/*
 * Kate Angelo — About page (id 7778) TOP HERO + pinned scroll-story wrapper
 * fix — v1.2.6
 * -----------------------------------------------------------------------------
 * ROOT CAUSE (verified empirically against the live page, 2026-07-07 — the
 * EXACT same bug already fixed for the lower sections in v1.2.4/v1.2.5, now
 * confirmed live for the top hero too):
 *
 * The About page's post_content (confirmed via REST `context=edit`, which
 * returns the true stored `content.raw` — this page's real content lives in
 * plain `wp_posts.post_content`, not `_elementor_data`; `_elementor_data`
 * was only ever used for the original page-shell creation, the actual
 * hero/hook/story/bio/endorsements/cta/newsletter markup and its styling
 * were authored directly into post_content as three concatenated Elementor
 * HTML/Code + Text Editor widgets' saved content) contained ONE single
 * literal `<style>` block (the entire ~24KB page stylesheet: root `.ka-about`
 * variables, HERO, HOOK, the `.ka-about-story-wrap` page-level spacing
 * wrapper, BIO, ENDORSEMENTS, CTA, NEWSLETTER — every section on the page).
 * That block passes through WordPress's `wpautop()` filter on render
 * (confirmed: `content.rendered` shows dozens of literal `<p>`/`</p>` tags
 * injected directly between CSS rules, e.g. `}</p>\n<p>.ka-about-hero__bg {`)
 * which makes the browser drop virtually every rule as an invalid selector.
 *
 * v1.2.4/v1.2.5 already extracted the BIO/ENDORSEMENTS/CTA/NEWSLETTER/HOOK
 * rules into assets/about-lower-sections-fix.css and enqueued that file —
 * confirmed working. Those rounds' changelog notes both explicitly (and, it
 * turns out, incorrectly) asserted the top HERO and the pinned SCROLL-STORY
 * were "already correct, out of scope" — that assumption was never actually
 * true for the hero: `.ka-about-hero` and all of its children/pseudo-
 * elements/keyframes, plus the root `.ka-about` page-base rule and the
 * `.ka-about-story-wrap` outer spacing wrapper, were STILL only ever defined
 * inside that same corrupted inline `<style>` block and nowhere else. Only
 * the pinned story's own INNER mechanics (`.ka-story-*`) were safe, because
 * those are separately authored in the normally-enqueued, wpautop-immune
 * assets/about-scroll-story.css (confirmed live: enqueued correctly, byte-
 * identical to this theme package's copy, no drift). This file is what was
 * actually missing.
 *
 * This file reproduces the hero + root + story-wrapper rules, hardcoded
 * (not `var(--ka-navy-1)` etc., for the same reason as about-lower-sections-
 * fix.css: the custom-property-defining rule on `.ka-about` was itself one
 * of the dropped rules, so those variables were never actually defined in
 * the live DOM) in this normally-enqueued file, which is never passed
 * through wpautop.
 *
 * SCOPE: the root `.ka-about` page-base rule, the entire `.ka-about-hero*`
 * family + its keyframes, and `.ka-about-story-wrap` (the pinned story's
 * OUTER page-level spacing wrapper only — NOT its inner `.ka-story-*`
 * mechanics, which stay exactly where they already correctly are, in
 * assets/about-scroll-story.css — do not duplicate those rules here).
 * Does NOT touch .ka-about-hook / .ka-about-bio / .ka-about-endorsements /
 * .ka-about__section / .ka-about-newsletter — those stay exactly as fixed
 * in about-lower-sections-fix.css, unchanged by this file.
 *
 * As part of this fix, the page's stored post_content had its single
 * corrupted inline `<style>` block removed entirely (including a byte-
 * identical, equally-corrupted duplicate copy of about-scroll-story.css
 * that had been pasted inline as a "renders before the theme zip installs"
 * safety net back in v1.2.2 — dead weight since the real theme file has
 * been live and confirmed working for several rounds now; removing it also
 * removes a redundant wpautop-recurrence risk). Post_content now contains
 * plain HTML markup only — audited in full: zero remaining inline
 * `<style>`/`<script>` blocks anywhere in the page content.
 *
 * Enqueued only on is_page('about'), after kate-angelo-child and
 * ka-about-scroll-story, before ka-about-lower-sections-fix (load order
 * doesn't matter between these three — each is scoped to non-overlapping
 * selectors — but this keeps hero-before-lower-sections for readability).
 *
 * ── v1.1.0 (sitewide type-unification round) ────────────────────────────
 * 'Fjalla One' swapped to 'Oswald' (Impact fallback kept) everywhere in
 * this file that sets a HEADING font — see functions.php's ka-fonts
 * enqueue for where Oswald is now loaded (sitewide, not gated to
 * front-page/book/404 anymore). Poppins body copy is untouched. Every
 * heading color rule below stays exactly as it already was (solid
 * #EEF2F8 / #DF6176 on the royal-blue/navy hero background) — this round
 * ONLY changes font-family, never color, so the already-verified contrast
 * on this section is unaffected.
 */

/* ── shared tokens used literally throughout this file ───────────────────
   --ka-navy-1 #1a4a90 / --ka-navy-2 #0d3170 / --ka-navy-3 #08204d
   --ka-gold   #F5D000  (primary accent)
   --ka-pink   #DF6176  (Kate's established feminine secondary accent)
   --ka-text   #EEF2F8  (light body text)
   --ka-muted  rgba(238,242,248,.72) / --ka-muted-2 rgba(238,242,248,.52)
   Fonts: 'Oswald' (headings, Impact fallback) / 'Poppins' (body) — both
   loaded sitewide via functions.php's ka-fonts enqueue. */

/* ────────────────────────────────────────────────────────────────────────
   ROOT — page base (background gradient, font, resets). Restores the
   whole-page royal-blue gradient behind every section and the base type
   rules (h1-h4 use the display font, p/ul reset). Individual sections
   (hero/hook/bio/endorsements/cta/newsletter) each still set their own
   explicit background per the v1.2.5 alternating rhythm — this root rule
   is a base fallback, not a source of the alternation itself.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about {
  background: linear-gradient(180deg, #1a4a90 0%, #0d3170 50%, #08204d 100%) !important;
  color: #EEF2F8 !important;
  font-family: 'Poppins', sans-serif !important;
  position: relative;
}
body.page-id-7778 .ka-about * { box-sizing: border-box; }
body.page-id-7778 .ka-about a { color: inherit; }
body.page-id-7778 .ka-about h1,
body.page-id-7778 .ka-about h2,
body.page-id-7778 .ka-about h3,
body.page-id-7778 .ka-about h4 {
  font-family: 'Oswald', Impact, sans-serif !important;
  margin: 0;
}
body.page-id-7778 .ka-about p { margin: 0; }
body.page-id-7778 .ka-about ul { margin: 0; padding: 0; }

/* ────────────────────────────────────────────────────────────────────────
   HERO — royal-blue bookend (per v1.2.5's alternation chain: this section
   is untouched/out-of-scope for the alternation itself, it's the fixed
   starting "blue" tone the rest of the page alternates against).
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
}

body.page-id-7778 .ka-about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://i0.wp.com/kateangelo.com/wp-content/uploads/2025/09/Generated-Image-August-31-2025-11_05AM.jpeg?w=1600&ssl=1');
  background-size: cover;
  background-position: center top;
}
body.page-id-7778 .ka-about-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 32, 77, .58);
}
body.page-id-7778 .ka-about-hero__bg::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34%;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, #08204d);
}

body.page-id-7778 .ka-about-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

body.page-id-7778 .ka-about-hero__eyebrow {
  font-family: 'Poppins', sans-serif !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #DF6176 !important;
  margin-bottom: 1.4rem;
}

body.page-id-7778 .ka-about-hero__kate,
body.page-id-7778 .ka-about-hero__angelo {
  display: block;
  font-family: 'Oswald', Impact, sans-serif !important;
  font-weight: 700;
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
body.page-id-7778 .ka-about-hero__kate   { color: #EEF2F8 !important; }
body.page-id-7778 .ka-about-hero__angelo { color: #DF6176 !important; }

body.page-id-7778 .ka-about-hero__tagline {
  margin-top: 1.75rem;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #EEF2F8 !important;
}
body.page-id-7778 .ka-about-hero__tagline span { color: #F5D000 !important; }

body.page-id-7778 .ka-about-hero__links {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
body.page-id-7778 .ka-about-hero__link {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(238,242,248,.72) !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
body.page-id-7778 .ka-about-hero__link:hover {
  color: #F5D000 !important;
  border-color: #F5D000;
}

body.page-id-7778 .ka-about-hero__scrollhint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
body.page-id-7778 .ka-about-hero__scrollline {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, #DF6176, transparent);
  animation: ka-about-pulse 2.2s ease-in-out infinite;
}
body.page-id-7778 .ka-about-hero__scrolllabel {
  font-family: 'Poppins', sans-serif !important;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(238,242,248,.52) !important;
}
@keyframes ka-about-pulse {
  0%, 100% { opacity: .3; transform: scaleY(.7); }
  50%      { opacity: 1;  transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-7778 .ka-about-hero__scrollline { animation: none; opacity: .6; }
}

/* ────────────────────────────────────────────────────────────────────────
   STORY SECTION — OUTER page-level spacing wrapper only. The pinned
   scroll-story's actual inner mechanics/backgrounds (.ka-story-*) live in
   assets/about-scroll-story.css — do not duplicate them here.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-story-wrap {
  /* v1.3.2: max-width cap REMOVED entirely (was 1080px in v1.3.0, then
     1320px in v1.3.1 — still a visible ~60px-per-side gutter of the page's
     base gradient around the card, and still read as "boxed" per Kate's
     follow-up feedback that v1.3.1 didn't go far enough). This wrapper no
     longer constrains its own box width at all — it now follows the exact
     same "full-bleed box, inner content controls its own width" pattern
     already used by every other section on the page (.ka-about-hook,
     .ka-about__section, etc., all of which carry no max-width/margin:auto
     of their own). The only width control left is this small edge-padding
     clamp, tightened from the old 1.5rem/4vw/3rem (max 48px) to 1rem/2.5vw/2rem
     (max 32px) — landing in the 24-60px "sensible gutter" range, on the
     tighter end since this was the page's last remaining visibly-boxed
     section. `.ka-story-scene` (the rounded card, 100% width of this
     wrapper) now expands to fill essentially the full page width minus
     that small gutter (measured live: ~1376px at a 1440px viewport, up
     from 1320px/1230px in prior rounds — see CHANGELOG for the full
     before/after verification).

     TWO-COLUMN LAYOUT AT FULL WIDTH: `.ka-story-scene` uses CSS Grid
     (`grid-template-columns: 55fr 45fr`, about-scroll-story.css) rather
     than two independently-margined boxes — a proportional grid split
     has no middle "gap" to open up as the container widens (unlike a
     flex/inline-block layout with its own auto-margins, which is the
     failure mode this round's brief specifically warned about). Verified
     via live measurement at the new ~1376px card width: the right
     (content) column lands at ~613px — still squarely inside the
     600-750px comfortable reading measure the brief calls for — and the
     left (chapter-word) column at ~751px, which is fine since it holds a
     single large display word, not body copy. No ratio/grid change was
     needed to avoid an awkward stranded-columns look; the existing 55/45
     split already scales correctly. */
  padding: 0 clamp(1rem, 2.5vw, 2rem) 5.5rem;
}

@media (max-width: 600px) {
  body.page-id-7778 .ka-about-story-wrap {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}