/* ═══════════════════════════════════════════════════════════════════════════
   PF2 BRIDGE — runs PF-Redesign's page CSS on the old (live) dark theme.

   PF-Redesign's pages carry their own scoped <style> block written against 18
   `--pf2-*` tokens, and `theme.css` defines those as a light, papery palette
   (#F6F7FB paper, #0B1430 ink). productfaculty.com is the opposite: #080e1a
   with gold.

   Rather than rewrite every page's CSS, this file redefines the 18 tokens in
   terms of `pf-theme.css`. Import it after pf-theme.css and the redesign markup
   renders in the old theme, unchanged.

   Load order matters: pf-theme.css first (it defines --pf-*), this second.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-root {

  /* ── Surfaces: light → dark, keeping the same three-step hierarchy ────────
     paper is the page, paper2 is the alternating band, card is what lifts.   */
  --pf2-paper:  var(--pf-bg);        /* #F6F7FB → #080e1a */
  --pf2-paper2: var(--pf-panel);     /* #ECEFF7 → #0d1426 */
  --pf2-card:   var(--pf-surface);   /* #FFFFFF → rgba(255,255,255,.03) */
  --pf2-line:   var(--pf-line);      /* #DBE1F0 → rgba(255,255,255,.08) */

  /* ── Text: inverted ──────────────────────────────────────────────────────  */
  --pf2-ink:   var(--pf-ink);        /* #0B1430 → #ffffff */
  --pf2-muted: var(--pf-sub);        /* #4C5A7D → #c2c2c2 */

  /* ── The navy bands ──────────────────────────────────────────────────────
     In the light design these are the dark contrast sections. On a page that
     is already near-black they must go LIGHTER, not darker, or the section
     disappears into the page. Hence panel-2 / panel-3 rather than --pf-bg.   */
  --pf2-navy:        var(--pf-panel-2);     /* #0E1B3F → #111a2e */
  --pf2-navy2:       var(--pf-panel-3);     /* #16275C → #162138 */
  --pf2-onnavy:      var(--pf-ink);
  --pf2-onnavy-muted: var(--pf-sub);
  --pf2-onnavy-line: var(--pf-line-strong);

  /* ── Yellow ──────────────────────────────────────────────────────────────
     --pf2-yellow-txt is the important one. It is #8F6B00 — a dark mustard
     designed to be readable as text ON a white card. On #080e1a it is almost
     invisible, and it is used on all nine pages. It has to become the real
     gold, not a darkened one.                                                */
  --pf2-yellow:       var(--pf-gold);        /* #FFC53D → #f5c518 */
  --pf2-yellow-deep:  var(--pf-gold-dim);    /* #EFAE18 → #c9a010 */
  --pf2-yellow-ink:   var(--pf-gold-ink);    /* text on a gold fill */
  --pf2-yellow-txt:   var(--pf-gold);        /* #8F6B00 → #f5c518  ← the fix */

  /* ── Depth ───────────────────────────────────────────────────────────────
     The light theme leans on layered navy shadows (rgba(11,20,48,.07)). Those
     are invisible on a near-black page — the card would read as flat and
     edgeless. The live site gets depth from a 1px border plus a 3px lift, so
     these become a soft black shadow that supports the border instead of
     replacing it.                                                            */
  --pf2-sh1:  0 1px 2px rgba(0, 0, 0, .30), 0 10px 26px rgba(0, 0, 0, .28);
  --pf2-sh2:  0 2px 4px rgba(0, 0, 0, .34), 0 18px 44px rgba(0, 0, 0, .34);
  --pf2-sh3:  0 12px 28px rgba(0, 0, 0, .40);
  --pf2-sh4:  0 6px 14px rgba(0, 0, 0, .30), 0 30px 70px rgba(0, 0, 0, .42);
  --pf2-glow: 0 10px 30px rgba(245, 197, 24, .22);   /* gold, dialled down */

  /* ── Geometry: unchanged, they already match ─────────────────────────────  */
  --pf2-portrait: var(--pf-r-card);   /* both 18px */
  --pf2-gutter:      clamp(20px, 4vw, 50px);
  --pf2-sec-y:       clamp(48px, 7vw, 92px);
  --pf2-card-pad-y:  clamp(18px, 4.4vw, 24px);
  --pf2-card-pad-x:  clamp(16px, 4vw, 20px);
}

/* The redesign markup assumes its own reset. Webflow's stylesheet is loaded here
   for the nav and footer and will otherwise restyle bare elements inside the
   ported content. */
/* Wrapped in :where() so the whole selector scores (0,0,0). `.pf-root main :is(…)`
   is (0,2,1) and beat every single-class rule on the page — it was repainting a
   gradient headline flat white through `color: inherit`. A reset must lose. */
:where(.pf-root) :where(main) :where(h1, h2, h3, h4, h5, h6, p, li, figure, blockquote) {
  color: inherit;
  font-family: inherit;
}

/* `:not([class])` matters. These rules exist to style the ported PROSE, and they
   used to apply to everything inside <main> — which meant a `.pf-btn` in there
   was painted --pf-gold ON a gold fill (invisible text) and a styled paragraph
   was forced back to --pf-sub, because `.pf-root main p` (0,2,1) outranks a
   single class (0,1,0).

   An element that carries a class has been styled deliberately, either by the
   theme or by the page's own CSS. Only unclassed elements are prose. */
.pf-root main :is(p, li):not([class]) { color: var(--pf-sub); }
.pf-root main a:not([class]) { color: var(--pf-gold); }
.pf-root main img { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Patterns that do not survive the light → dark flip.

   Token remapping handles almost everything. These are the cases where the
   light design depended on the background being light, so swapping the tokens
   alone leaves something unreadable. Each one is listed with what it was.
   ═══════════════════════════════════════════════════════════════════════════ */

/* about-us: the vision line is painted with a gold highlighter band behind the
   text (linear-gradient, 62%–94% of the line box). That works when the text is
   #0B1430 on white. On #080e1a the text is light grey sitting on a gold bar, so
   it reads as a strikethrough and the words are lost.

   productfaculty.com's own emphasis idiom is gold TEXT, not a marker — the
   homepage headline sets "AI-native builder & operator" in --pf-gold. Matching
   that rather than inventing a third treatment. */
.pf-root .pf-about__vision {
  background: none;
  color: var(--pf-gold);
  font-weight: 700;
}

/* Clearance for the fixed nav.

   Our nav (.new-nav-bar) is position:fixed and 75px tall — measured, not
   guessed. PF-Redesign reserved space for its own 66px .pfnav with
   `body.pf2-page{padding-top:66px}`, and we replace that header with ours, so
   the imported pages lost the offset and their first line sat under the bar.

   Only the imported pages load this file. The mirrored pages carry Webflow's
   own layout, which already accounts for the nav — do not move this rule into
   pf-theme.css or they will gain 75px of dead space at the top. */
.pf-root { --pf-nav-h: 75px; padding-top: var(--pf-nav-h); }

/* Anchor targets must clear it too, or #header-top lands behind the bar. */
.pf-root { scroll-padding-top: calc(var(--pf-nav-h) + 12px); }

/* Review attribution: left-aligned, cohort on its own line.

   The ported markup nests name / role / cohort inside .pf-rev__who, sitting in a
   flex row beside the portrait — so all three shared the portrait's row and the
   long cohort string forced the block to read as a centred stack.

   `display: contents` on the wrapper promotes those three to grid items of
   .pf-rev__by, which lets the portrait span the name and role rows while the
   cohort takes a full-width row of its own underneath. No markup change, so it
   survives the next import. */
.pf-root .pf-rev__by {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  /* row-gap: 0, explicitly. The source sets `gap: 12px` for the flex row, and
     overriding only column-gap left 12px between the name and the role — enough
     that they read as two unrelated lines rather than one person. The original
     stack used a 2px gap; here the line-heights below do that job. */
  row-gap: 0;
  align-items: center;
  text-align: left;
}
.pf-root .pf-rev__who { display: contents; }
.pf-root .pf-rev__face { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.pf-root .pf-rev__name {
  grid-column: 2; grid-row: 1; text-align: left;
  align-self: end;
  font-size: 16px;      /* up from 14.5 — the name should lead the pair */
  font-weight: 700;
  line-height: 1.25;
}
.pf-root .pf-rev__role {
  grid-column: 2; grid-row: 2; text-align: left;
  align-self: start;
  line-height: 1.3;
  margin-top: 1px;
}
.pf-root .pf-rev__course {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 8px;          /* the small space before the last line */
  text-align: left;
}