/**
 * 3M (Miracle Magician Method) - Product Styles
 *
 * Aligned to the live WordPress site (miraclemagictraining.com, read 2026-10-09):
 * light-grey header with the "Aaron Fisher's Miracle Magician Method" logo,
 * bright-blue section bands, near-black dark sections, orange CTA buttons.
 *
 * Color Palette:
 * - Blue:        #0194E3 (primary brand — WP section bands)
 * - Light Blue:  #159DFF (WP secondary buttons)
 * - Dark Blue:   #0170AD (hover / darker accents)
 * - Orange:      #FBA035 (accent, CTAs — WP "Watch now" / "Get instant access")
 * - Orange Dark: #E8891A (CTA hover)
 * - Near-black:  #1C1C1C / #262626 (WP dark sections; page background + dashboard chrome)
 * - Header grey: #D4D4D4 (WP header bar) — applied by `.header-3m`, NOT `--header-bg`
 */

/* WP's font. @import must precede every rule (comments above are fine). CSP allows fonts.googleapis.com + fonts.gstatic.com. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────────────────────
   * PRIMITIVE TOKENS - Override these to change the entire theme
   * ───────────────────────────────────────────────────────────────────────────── */

  /* Brand Primary (Blue) */
  --color-brand-primary: #0194E3;
  --color-brand-primary-light: #159DFF;
  --color-brand-primary-dark: #0170AD;

  /* Brand Accent (Orange) */
  --color-brand-accent: #FBA035;
  --color-brand-accent-light: #FCB86A;
  --color-brand-accent-dark: #E8891A;

  /* ─────────────────────────────────────────────────────────────────────────────
   * LEGACY TOKENS - Kept for backwards compatibility during migration
   * ───────────────────────────────────────────────────────────────────────────── */

  /* Brand colors */
  --brand-primary: var(--color-brand-primary);
  --brand-accent: var(--color-brand-accent);

  /* Heading colors */
  --heading-color: #2E2E2E;
  --heading-color-on-gradient: #ffffff;
  /* ⚠ REQUIRED — this line is an OPT-OUT, not an opt-in, and removing it is a
   * regression. The conjuror tenant file loads BEFORE this one and sets
   * `--edge-tab-icon-active: var(--color-brand-accent)`. Custom properties
   * substitute at computed-value time, so that inherited declaration would
   * resolve against THIS file's accent (orange on the dark chrome) — keep the
   * white + palette-independent stroke cue until an accessible active colour
   * is picked and MEASURED for this palette (see css-tokens.md). */
  --edge-tab-icon-active: var(--text-inverted);

  /* CTA colors */
  --cta-primary-bg: var(--color-brand-accent);
  --cta-primary-bg-hover: var(--color-brand-accent-dark);
  --cta-primary-text: white;
  --cta-secondary-bg: white;
  --cta-secondary-text: var(--color-brand-primary);

  /* Link colors (WP body links #5478B0) */
  --link-color-default: #5478B0;
  --link-color-hover: var(--color-brand-primary-dark);
  --nav-link-hover: var(--color-brand-primary-dark);
  --header-link-hover: var(--color-brand-primary);

  /* Header & Footer.
   * `--header-bg` stays DARK on purpose: the conjuror tenant file paints the
   * dashboard sidebar/bottombar and the body strip with it, under white text.
   * The light-grey WP header bar is `.header-3m` below. */
  --header-bg: #1C1C1C;
  --footer-bg: #262626;

  /* ─────────────────────────────────────────────────────────────────────────────
   * HERO SECTION OVERRIDES — WP hero band is flat blue
   * ───────────────────────────────────────────────────────────────────────────── */
  --hero-bg: var(--color-brand-primary);

  /* ─────────────────────────────────────────────────────────────────────────────
   * CTA BANNER OVERRIDES
   * ───────────────────────────────────────────────────────────────────────────── */
  --cta-banner-brand-bg: var(--color-brand-primary);
  --cta-banner-accent-bg: var(--color-brand-accent);
}

/* Theme-specific overrides */
.theme-light {
  /* Page background — the WP site's near-black sections */
  --page-background: linear-gradient(to bottom, #262626 0%, #1C1C1C 100%);

  /* Callout background */
  --callout-premium-background: linear-gradient(
    90deg,
    var(--color-brand-primary-dark) 0%,
    var(--color-brand-primary) 100%
  );

  /* Text on gradient backgrounds */
  --text-on-gradient: white;
  --link-color: white;
  --link-hover: rgba(255, 255, 255, 0.8);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 3M HEADER (products/3m/Header.tsx) — the WP header bar: light grey, logo
 * left, grey nav links right.
 * ───────────────────────────────────────────────────────────────────────────── */
.header-3m {
  background-color: #D4D4D4;
}
.header-3m__link {
  color: #555555;
  font-weight: 500;
}
.header-3m__link:hover {
  color: var(--color-brand-primary-dark);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Rich text inside dark / brand section schemes. `.theme-light h1-h6` (and the
 * prose defaults) paint headings + body dark even on a dark band, so copy in a
 * dark or blue band went invisible. Scoped to 3M here; the same gap exists
 * platform-wide (flagged in .claude/plans/3m-2026-launch-plan.md §10).
 * ───────────────────────────────────────────────────────────────────────────── */
.section-scheme--dark .prose :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--scheme-dark-heading);
}
.section-scheme--dark .prose :is(p, li, blockquote) {
  color: var(--scheme-dark-text);
}
.section-scheme--brand .prose :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--scheme-brand-heading);
}
.section-scheme--brand .prose :is(p, li, blockquote) {
  color: var(--scheme-brand-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Section colours MEASURED on the live WP home page (computed styles, 2026-10-09):
 * dark bands #1C1C1C with #D9D9D9 copy, light bands warm off-white
 * (#FAFAF9→#F7F5F2), body copy #444, headings #2E2E2E in a light weight,
 * the "Join" bar = warm light band + green (#80C421) button, white page.
 * ───────────────────────────────────────────────────────────────────────────── */
:root {
  --text-body: #444444;
  --text-heading: #2E2E2E;
  --scheme-light-text: #444444;
  --scheme-light-heading: #2E2E2E;
  --scheme-muted-bg: #F8F7F5;
  --scheme-muted-text: #444444;
  --scheme-muted-heading: #2E2E2E;
  --scheme-dark-bg: #1C1C1C;
  --scheme-dark-text: #D9D9D9;
  --scheme-dark-heading: #FFFFFF;

  /* The WP "Join … Now" bar */
  --cta-banner-brand-bg: linear-gradient(to bottom, #F6F5F4 0%, #F4F3F1 100%);
  --cta-banner-button-bg: #80C421;
  --cta-banner-button-text: #FFFFFF;
  --cta-banner-button-hover: #6FAE1B;
  /* Text + Image buttons (e.g. the home page JOIN) — the same WP green */
  --text-image-button-bg: #80C421;
  --text-image-button-bg-hover: #6FAE1B;
  --text-image-button-text: #FFFFFF;
}

/* WP orange buttons (Mike, 2026-10-15: exact WP #ffa035) — the plain "Button" (`ctaButton`) section
 * (WP sales-page buttons: square corners, white bold text) and the twoColumn survey-button launchers
 * (the /lp opt-in buttons: 6px corners, 1px black outline, no shadow). Rules + fallbacks: globals.css. */
:root {
  --section-cta-button-bg: #FFA035;
  --section-cta-button-bg-hover: #E8891A;
  --section-cta-button-text: #FFFFFF;
  --section-cta-button-radius: 0;
  --two-column-survey-button-bg: #FFA035;
  --two-column-survey-button-bg-hover: #E8891A;
  --two-column-survey-button-border: #000000;
  --two-column-survey-button-radius: 6px;
  --two-column-survey-button-shadow: none;
}
.section-cta-banner--brand .section-cta-banner__heading {
  color: #181818;
  font-weight: 300;
}
.section-cta-banner--brand .section-cta-banner__text {
  color: #444444;
}
.section-cta-banner__button {
  border-radius: 6px;
}

/* White page behind CMS pages (WP pages are white); dashboard/member pages keep the dark theme. */
.template-landing.theme-light,
.template-sales.theme-light,
.template-full-width.theme-light {
  --page-background: #FFFFFF;
}

/* WP headings are a light weight */
.page-container .section :is(h1, h2) {
  font-weight: 300;
}

/* Rich text uses the typography plugin's own colour variables (slate by default). */
.page-container .prose {
  --tw-prose-body: #444444;
  --tw-prose-headings: #2E2E2E;
  --tw-prose-bold: #2E2E2E;
  --tw-prose-links: #5478B0;
  --tw-prose-bullets: #777777;
}
/* PortableTextComponents hard-codes `text-gray-700` on paragraphs — match WP's #444 on light bands. */
.section-scheme--light .prose :is(p, li),
.section-scheme--muted .prose :is(p, li) {
  color: #444444;
}

/* The "Join … Now" bar button: WP green with white text. globals gives brand-variant
 * banner buttons the accent colour; the link-colour variables carry the text colour
 * past the `.theme-light a` rule. */
.section-cta-banner--brand .section-cta-banner__button {
  background-color: #80C421;
  color: #FFFFFF;
  --link-primary: #FFFFFF;
  --link-primary-hover: #FFFFFF;
}
.section-cta-banner--brand .section-cta-banner__button:hover {
  background-color: #6FAE1B;
}

/* Typography: Open Sans throughout, light headings — the WP site (Mike, 2026-10-09: "there's a simplicity to that"). */
:root {
  --heading-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --heading-weight: 300;
}
body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.page-container .section h3 {
  font-weight: 300;
}

/* Full-bleed bands like the WP site: CMS page sections run edge to edge and start
 * right under the header; each section's own max-width keeps the content column. */
.template-landing.page-container,
.template-sales.page-container,
.template-full-width.page-container {
  padding: 0;
}
.template-landing .content-area,
.template-sales .content-area,
.template-full-width .content-area {
  max-width: none;
}

/* A more generous, light hero title than WP's 34px — modern but still the WP voice. */
.section-scheme--brand .section-rich-text__content > h2:first-child {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* 3M footer (products/3m/Footer.tsx) — the WP slim footer bar: white, small grey links. */
.footer-3m {
  background-color: #FFFFFF;
  border-top: 1px solid #E5E5E5;
}
.footer-3m__link {
  color: #5478B0;
}
.footer-3m__link:hover {
  color: var(--color-brand-primary-dark);
}
.footer-3m__copy {
  color: #666666;
}

/* 3M member dashboard (products/3m/Dashboard.tsx + ThreeMDashboardClient.tsx) — white panels on the dark member
 * background; row titles in the light heading voice; hover cues from the existing tokens. */
.dashboard-3m .dashboard-3m__row-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
}
.dashboard-3m .dashboard-3m__row:hover,
.dashboard-3m .dashboard-3m__line--link:hover {
  background-color: var(--surface-muted);
}
/* Inside the muted Resources box a hover lifts to the card surface instead */
.dashboard-3m .dashboard-3m__resources .dashboard-3m__download--link:hover {
  background-color: var(--surface-card);
}