/* =========================================================
   ADULTING WITH ALEXIS — MASTER STYLESHEET
   Child theme of Kadence (or Ollie)
   Load via: child theme style.css, OR
             Appearance → Customize → Additional CSS
   ========================================================= */


/* ---------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   These mirror the color/typography slugs registered in
   theme.json. Keeping them here too means any custom CSS
   below (and any future one-off page) can reference
   var(--awa-sage) etc. instead of hard-coded hex values.
   --------------------------------------------------------- */
:root {
  /* Brand colors */
  --awa-golden-sand: #F4B860;
  --awa-golden-sand-tint: #FDF3E4;   /* ~12% flattened tint, used for Section 6-style backgrounds */
  --awa-sage: #9CBF9A;
  --awa-slate-blue: #5A72A0;
  --awa-off-white: #FAFAF9;
  --awa-charcoal: #2D2D2D;
  --awa-white: #FFFFFF;

  /* Typography */
  --awa-font-heading: 'Poppins', sans-serif;
  --awa-font-body: 'Lato', sans-serif;

  /* Spacing scale — use for consistent section/card padding
     instead of one-off pixel values per block */
  --awa-space-xs: 8px;
  --awa-space-sm: 16px;
  --awa-space-md: 24px;
  --awa-space-lg: 32px;
  --awa-space-xl: 48px;
  --awa-space-2xl: 80px;
  --awa-space-3xl: 100px;

  /* Radius + borders */
  --awa-radius: 6px;
  --awa-radius-lg: 12px;
  --awa-border-width: 2px;
}


/* ---------------------------------------------------------
   2. BASE TYPOGRAPHY
   Belt-and-suspenders in case theme.json font assignment
   doesn't cascade into every block context (e.g. inside
   third-party plugin markup).
   --------------------------------------------------------- */
body,
p,
li,
.wp-block-paragraph {
  font-family: var(--awa-font-body);
  color: var(--awa-charcoal);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--awa-font-heading);
  font-weight: 700;
  color: var(--awa-charcoal);
}

/* Reserved tagline treatment — "better every day" should
   ALWAYS use this exact combination, never plain italic
   text elsewhere, so it stays a special, recognizable
   brand moment rather than a decorative default. */
.awa-tagline {
  font-family: var(--awa-font-body);
  font-style: italic;
  color: var(--awa-golden-sand);
}


/* ---------------------------------------------------------
   3. UTILITY CLASSES — BACKGROUNDS
   Apply directly to a Group block's "Additional CSS Class"
   field in the block editor sidebar.
   --------------------------------------------------------- */
.awa-bg-off-white   { background-color: var(--awa-off-white); }
.awa-bg-charcoal    { background-color: var(--awa-charcoal); }
.awa-bg-slate-blue  { background-color: var(--awa-slate-blue); }
.awa-bg-sage        { background-color: var(--awa-sage); }
.awa-bg-golden-sand { background-color: var(--awa-golden-sand); }
.awa-bg-golden-sand-tint { background-color: var(--awa-golden-sand-tint); }
.awa-bg-white       { background-color: var(--awa-white); }

/* ---------------------------------------------------------
   3b. NATIVE GUTENBERG COLOR CLASS BRIDGE
   Every Section 1-8 block used core color-panel classes like
   has-sage-background-color / has-charcoal-color. Those only
   render correctly if a matching palette entry is registered
   in theme.json. Rather than require that as a dependency,
   we map the exact class names WordPress generates directly
   to our brand variables here — so existing block code works
   immediately, and works the same whether or not theme.json
   is ever set up.
   --------------------------------------------------------- */
.has-golden-sand-color            { color: var(--awa-golden-sand) !important; }
.has-golden-sand-background-color { background-color: var(--awa-golden-sand) !important; }

.has-golden-sand-tint-background-color { background-color: var(--awa-golden-sand-tint) !important; }

.has-sage-color            { color: var(--awa-sage) !important; }
.has-sage-background-color { background-color: var(--awa-sage) !important; }

.has-slate-blue-color            { color: var(--awa-slate-blue) !important; }
.has-slate-blue-background-color { background-color: var(--awa-slate-blue) !important; }

.has-off-white-color            { color: var(--awa-off-white) !important; }
.has-off-white-background-color { background-color: var(--awa-off-white) !important; }

.has-charcoal-color            { color: var(--awa-charcoal) !important; }
.has-charcoal-background-color { background-color: var(--awa-charcoal) !important; }

.has-white-background-color { background-color: var(--awa-white) !important; }

/* Text-color helpers for content sitting on dark backgrounds
   (Slate Blue / Charcoal sections) — replaces the manual
   style="color:#FAFAF9" overrides used in Sections 3 and 8 */
.awa-text-off-white { color: var(--awa-off-white) !important; }
.awa-text-muted-on-dark { color: #E2E6EC !important; }       /* was off-white @ 85% opacity */
.awa-text-muted-on-dark-light { color: #D2D8E3 !important; } /* was off-white @ 75% opacity */


/* ---------------------------------------------------------
   4. BUTTONS
   Fixes the outline-button border-color inheritance issue
   flagged in Section 8, and standardizes hover states across
   every button style we've used so far.
   --------------------------------------------------------- */

/* Base radius + font consistency (covers cases where a
   block's own JSON style attribute is missing) */
.wp-block-button__link {
  border-radius: var(--awa-radius);
  font-family: var(--awa-font-heading);
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Outline style — explicit border-color rather than relying
   on the theme's default (which sometimes ties border-color
   to text-color and sometimes doesn't) */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: var(--awa-border-width);
  border-style: solid;
  background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link.has-slate-blue-color {
  border-color: var(--awa-slate-blue);
}

.wp-block-button.is-style-outline .wp-block-button__link.has-off-white-color {
  border-color: var(--awa-off-white);
}

/* Focus visibility for keyboard users — required for AA
   accessibility, easy to forget on custom button colors */
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--awa-slate-blue);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   5. CARDS
   Used by the Season Roadmap grid (Section 4) and will be
   reused on the Season Hub page and Resource Library grid.
   --------------------------------------------------------- */
.awa-card {
  background-color: var(--awa-white);
  border-radius: var(--awa-radius);
  padding: 28px 24px;
  border-top: 4px solid var(--awa-sage); /* default accent, override per-card below */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.awa-card:hover {
  box-shadow: 0 6px 20px rgba(45, 45, 45, 0.08);
  transform: translateY(-2px);
}

.awa-card--sage       { border-top-color: var(--awa-sage); }
.awa-card--slate-blue { border-top-color: var(--awa-slate-blue); }
.awa-card--golden-sand { border-top-color: var(--awa-golden-sand); }

.awa-card__eyebrow {
  font-family: var(--awa-font-body);
  font-weight: 600;
  font-size: 13px;
}

.awa-card__eyebrow--sage        { color: var(--awa-sage); }
.awa-card__eyebrow--slate-blue  { color: var(--awa-slate-blue); }
.awa-card__eyebrow--golden-sand { color: var(--awa-golden-sand); }


/* ---------------------------------------------------------
   6. IMAGE PLACEHOLDER STYLING
   Ensures blank core/image placeholder blocks (used per your
   "no hard-coded file paths" rule) still look intentional
   and on-brand before an image is uploaded, and that the
   border-radius applies immediately once one is.
   --------------------------------------------------------- */
.wp-block-image img,
.wp-block-image .components-placeholder {
  border-radius: var(--awa-radius-lg);
}

.wp-block-image .components-placeholder {
  background-color: var(--awa-off-white);
  border: 1px dashed var(--awa-slate-blue);
}


/* ---------------------------------------------------------
   7. MOBILE BEHAVIOR
   Handles the "images move below their paired text on
   mobile" rule from the homepage blueprint's page-level
   notes — native Gutenberg column stacking doesn't support
   this out of the box, so we reorder with flexbox below
   the tablet breakpoint.

   USAGE: add the class "awa-media-text-row" to the parent
   Columns block, and "awa-media-col" to whichever Column
   contains the image, for any section pairing a photo with
   text (Hero, Meet Alexis, Resource Teaser, future Episode
   template pull-quotes, etc.)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .awa-media-text-row.wp-block-columns {
    display: flex;
    flex-direction: column;
  }

  .awa-media-text-row .awa-media-col {
    order: 2; /* image always renders after text on mobile */
  }

  .awa-media-text-row .wp-block-column:not(.awa-media-col) {
    order: 1;
  }
}


/* ---------------------------------------------------------
   8. RESPONSIVE TYPE SCALE
   Prevents oversized desktop headings/tagline treatment from
   overflowing or looking awkward on small screens. Applies
   automatically — no extra class needed.
   --------------------------------------------------------- */
@media (max-width: 600px) {
  h1, .wp-block-heading h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  h2, .wp-block-heading h2 {
    font-size: 26px !important;
  }

  .awa-tagline {
    font-size: 30px !important;
  }

  .wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ---------------------------------------------------------
   9. ACCESSIBILITY BASELINE
   Global focus-state visibility and reduced-motion respect
   — worth having site-wide before you scale to 150+ pages.
   --------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--awa-slate-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}


/* ---------------------------------------------------------
   10. FUTURE PAGE HOOKS (placeholders — expand as we build
   the Season Hub, Episode template, and Resource Library)
   --------------------------------------------------------- */

/* Season Hub: episode progression list */
.awa-episode-row {
  border-bottom: 1px solid rgba(45, 45, 45, 0.1);
  padding: var(--awa-space-md) 0;
}

/* Episode template: sticky companion-resource sidebar */
.awa-sticky-sidebar {
  position: sticky;
  top: var(--awa-space-lg);
}

/* Resource Library: Free vs Paid badge */
.awa-badge {
  display: inline-block;
  font-family: var(--awa-font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.awa-badge--free {
  background-color: var(--awa-golden-sand-tint);
  color: var(--awa-charcoal);
}

.awa-badge--paid {
  background-color: var(--awa-slate-blue);
  color: var(--awa-off-white);
}

/* Episode status badges — used on Season Hub pages (.awa-episode-row)
   to mark each episode's publish state. Additive to the Free/Paid
   badges above; shares the same .awa-badge base. */
.awa-badge--coming-soon {
  background-color: var(--awa-golden-sand-tint);
  color: var(--awa-charcoal);
}

.awa-badge--published {
  background-color: var(--awa-sage);
  color: var(--awa-charcoal);
}