/* ============================================================================
 * WFD Academy — Design System v3.0 component overrides (v2.9.15)
 * ----------------------------------------------------------------------------
 * SURGICAL, ADDITIVE retrofit. Enqueued LAST so it wins the cascade. Touches
 * COLOUR + the named v3.0 component treatments ONLY. No layout, spacing,
 * positioning, width, or structural properties. Class-scoped; no global
 * element restyling. The reader header geometry is never referenced here.
 *
 * Enforces:
 *   1. Primary / gold buttons: gold fill + BLACK text (#0A0A0A);
 *      hover = bronze-deep fill (#52400F) + cream text (#F8F5EE).
 *   2. Gold-AS-TEXT on light surfaces -> bronze (#5A430F).
 *      (Gold-as-text on dark surfaces is already correct; left untouched.)
 *   3. Inset / callout headings -> near-black stone (#2A251E).
 *   4. Numerals / stats / prices -> Libre Franklin (--font-numeral).
 *   5. Badges -> single v3.0 treatment (light: stone fill + white text;
 *      dark: transparent + gold border + white text).
 * ============================================================================ */

/* ---- 1. Primary / gold buttons: gold fill + BLACK text -------------------- */
.wfd-btn.gold,
.wfd-wa .wa-btn--gold,
.wfd-player__enrol-btn,
.wfd-rp-enrol__btn {
  background-color: var(--wfd-gold, #C5A572);
  color: var(--wfd-black, #0A0A0A);
}
.wfd-btn.gold:hover,
.wfd-btn.gold:focus,
.wfd-wa .wa-btn--gold:hover,
.wfd-wa .wa-btn--gold:focus,
.wfd-player__enrol-btn:hover,
.wfd-player__enrol-btn:focus,
.wfd-rp-enrol__btn:hover,
.wfd-rp-enrol__btn:focus {
  background-color: var(--wfd-bronze-deep, #52400F);
  color: var(--wfd-cream, #F8F5EE);
  /* neutralise the reader btn's brightness filter so the v3.0 hue lands */
  filter: none;
}

/* ---- 2. Gold-AS-TEXT on LIGHT surfaces -> bronze -------------------------- */
/* Eyebrows / labels that were rendered in gold or gold-deep on a light card
 * or light section. Only true TEXT; gold borders / fills / underlines remain. */
.wfd-section .section-eyebrow,
.wfd-card .card-eyebrow,
.wfd-course-card .cc-eyebrow {
  color: var(--wfd-bronze, #5A430F);
}
/* Keep the dark-surface variant gold (explicit, higher specificity safeguard) */
.wfd-section.dark .section-eyebrow {
  color: var(--wfd-gold, #C5A572);
}

/* ---- 3. Inset / callout headings -> near-black stone --------------------- */
.wfd-callout h3,
.wfd-callout h4,
.wfd-callout-tint h4,
.wfd-callout-stone h4 {
  color: var(--wfd-stone-900, #2A251E);
}

/* ---- 4. Numerals / stats / prices -> Libre Franklin ---------------------- */
.wfd-hero-stat .num,
.wfd-stat-num,
.stat-num,
.wfd-price,
.price {
  font-family: var(--font-numeral, "Libre Franklin", system-ui, sans-serif);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---- 5. Badge: ONE v3.0 stone treatment for ALL states + status dot ------- */
/* v3.0 unifies the badge to stone-fill + white text (15.2:1), but only .gold /
 * .light ever received it; the semantic variants (.live/.soon/.good/.bad/.dark)
 * kept the old v2 colour-tint pills whose TEXT measured 4.4-5.3:1, under the
 * 8:1 floor. Apply the stone treatment to EVERY variant so badge text always
 * passes, and carry the STATE in a decorative leading dot. The dot is a graphic
 * fill (exempt from the 8:1 text floor; each colour clears the 3:1 graphic
 * guideline on the stone fill); the text label stays the colour-blind-safe
 * primary signal. The .wfd-badge component already reserves gap:6px for it. */
.wfd-badge,
.wfd-badge.gold,
.wfd-badge.light,
.wfd-badge.live,
.wfd-badge.soon,
.wfd-badge.good,
.wfd-badge.bad,
.wfd-badge.dark{
  background-color:var(--wfd-stone-900,#2A251E);
  color:var(--wfd-white,#FFFFFF);
  border-color:transparent;
}
/* Dark surfaces: transparent + gold border + white text. */
.wfd-section.dark .wfd-badge,
.wfd-hero .wfd-badge,
.wfd-footer .wfd-badge{
  background-color:transparent;
  color:var(--wfd-white,#FFFFFF);
  border:1px solid var(--wfd-gold,#C5A572);
}
/* Leading status dot. */
.wfd-badge::before{
  content:"";
  flex:0 0 auto;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--wfd-gold,#C5A572);
}
.wfd-badge.live::before,
.wfd-badge.good::before{ background:#46C06A; }   /* live / available -> green  */
.wfd-badge.soon::before{ background:var(--wfd-gold,#C5A572); } /* coming soon -> gold */
.wfd-badge.bad::before{ background:#F0613B; }    /* closed / error -> warm red */

/* ---- 6. Suppress Jetpack Carousel comment UI ----------------------------- */
/* The Jetpack image-lightbox injects a comment area whose "Loading Comments..."
 * text (#999) renders at 7.37:1 on the near-black overlay, under the 8:1 floor.
 * Hide the comment block site-wide; the image lightbox itself is unaffected.
 * Third-party chrome suppression. */
.jp-carousel-comments-wrapper,
#jp-carousel-comments-loading,
#jp-carousel-comment-form-container{ display:none !important; }

/* ---- 7. Course reader (#wfd-reader-pilot) contrast-only fix (v2.9.60) ------
 * Authorised 2026-05-23 (Daniel). CONTRAST ONLY — no layout/structure/size
 * change to the locked reader. Raises 8:1-failing text to pass, preserving
 * hue/intent where possible. Doubled-id selector (2,1,0) out-specifies the
 * module's #wfd-reader-pilot .x (1,1,0) rules regardless of load order
 * (module-style.scoped.css loads after wfd-v3.css), with no !important. */
/* Dark TOC/progress sidebar — brighten. */
#wfd-reader-pilot#wfd-reader-pilot .toc-heading{ color:rgba(255,255,255,.82); }
#wfd-reader-pilot#wfd-reader-pilot .progress-meta{ color:rgba(255,255,255,.82); }
#wfd-reader-pilot#wfd-reader-pilot .toc-status.todo{ color:rgba(255,255,255,.82); }
#wfd-reader-pilot#wfd-reader-pilot .toc-num{ color:#E0C896; }            /* lighter gold, 9.5:1 on TOC bg */
#wfd-reader-pilot#wfd-reader-pilot .toc-status.draft{ color:#F4ECD9; }    /* cream on gold-tint pill, 8.6:1 */
/* Light content body — darken. */
#wfd-reader-pilot#wfd-reader-pilot .chapter-eyebrow{ color:#4D370A; }
#wfd-reader-pilot#wfd-reader-pilot .key-terms .key-terms-title{ color:#4D370A; }
#wfd-reader-pilot#wfd-reader-pilot .pager-link .pager-label{ color:#443A2C; }
#wfd-reader-pilot#wfd-reader-pilot .content-body a.note-link,
#wfd-reader-pilot#wfd-reader-pilot .fs-body a.note-link{ color:#143C95; }
#wfd-reader-pilot#wfd-reader-pilot .content-body strong,
#wfd-reader-pilot#wfd-reader-pilot .fs-body strong{ color:#4D370A; }
/* chapter-header meta line ("Topic: ...") — muted stone was 5.0:1 on cream. */
#wfd-reader-pilot#wfd-reader-pilot .chapter-header .meta,
#wfd-reader-pilot#wfd-reader-pilot .chapter-header .meta strong{ color:#443A2C; }

/* ---- 8. Course reader — MOBILE (v2.9.66). Scoped to body.wfd-reader-page only,
 *        so the rest of the site (fine on mobile) is untouched. -------------- */
/* (a) Logged-out masthead actions (Sign in / Start free) are full-width STACKED
 * on mobile (theme-v2-critical @900). The reader masthead is fixed and content
 * is offset by its measured height, so that stack eats the whole top band.
 * Compact to a small inline row; the reader chrome JS re-measures + corrects. */
@media (max-width: 900px) {
  body.wfd-reader-page .wfd-masthead-actions {
    flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 6px; width: auto; margin: 0 0 0 auto;
  }
  body.wfd-reader-page .wfd-masthead-signin,
  body.wfd-reader-page .wfd-masthead-actions .wfd-masthead-cta {
    width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 13px;
    margin: 0; justify-content: center; text-align: center;
  }
}
/* (b) Phone-portrait rotate prompt. Browsers can't force orientation (iOS Safari
 * has no orientation lock), so this is a full-screen nudge on phone-portrait
 * only; landscape and tablets (>600 / not portrait) are unaffected. */
@media (orientation: portrait) and (max-width: 600px) {
  body.wfd-reader-page::before {
    content: "Rotate your phone\A\A The IFRS 17 reader is best read in landscape.";
    position: fixed; inset: 0; z-index: 2147483000;
    background: var(--wfd-black, #0A0A0A); color: var(--wfd-white, #FFFFFF);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 40px; white-space: pre-line;
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 19px; line-height: 1.55;
  }
}

/* ---- 9. Course reader MOBILE round 2 (v2.9.67) — readability on phones. ---- */
@media (max-width: 900px) {
  /* Smaller chapter prose (was 17px EB Garamond — too big on a phone column). */
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body,
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body p,
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body li{
    font-size: 15px; line-height: 1.62;
  }
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body h1{ font-size: 22px; }
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body h2{ font-size: 17px; }
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .content-body h3{ font-size: 15px; }
  /* Narrower chapter drawer (was 88vw / max 320px). */
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .sidebar{ width: 76vw; max-width: 248px; }
  /* Trim oversized side padding so content gets more width. */
  body.wfd-reader-page #wfd-reader-pilot#wfd-reader-pilot .main{ padding: 20px 18px 44px; }
}

/* ---- 10. Course reader MOBILE round 3 (v2.9.68) — fixed rail was overlaying
 *      the chapter text on phones. .wfd-player__rail is position:fixed; left:0;
 *      width:296px at ALL widths; on mobile the content column (.wfd-player__
 *      column, which wraps #wfd-reader-pilot) loses its grid offset and slides
 *      UNDER the rail, hiding the start of each line. Narrow the rail and
 *      re-offset the column to sit flush beside it. ≤900 only; !important is
 *      required to beat the existing !important width/padding rules. --------- */
@media (max-width: 900px) {
  body.wfd-reader-pilot-page .wfd-player__rail   { width: 224px !important; }
  body.wfd-reader-pilot-page .wfd-player__column { margin-left: 224px !important; }
  body.wfd-reader-pilot-page .wfd-footer         { padding-left: 224px !important; }
}

/* ---- 11. Course reader MOBILE round 4 (v2.9.69) — off-canvas chapter drawer.
 *      Supersedes the round-3 content offset. On phones the rail slides OFF
 *      screen (content reads full-width); the .wfd-rail-toggle button (added by
 *      reader-pilot-adapter.js) slides it back as an overlay + backdrop, closing
 *      on chapter select / backdrop tap. body.wfd-rail-open is the open state.
 *      <=900 only; desktop/tablet-landscape unchanged. ----------------------- */
.wfd-rail-toggle { display: none; }
@media (max-width: 900px) {
  body.wfd-reader-pilot-page .wfd-player__column { margin-left: 0 !important; }
  body.wfd-reader-pilot-page .wfd-footer { padding-left: 0 !important; }
  body.wfd-reader-pilot-page .wfd-player__rail {
    width: 86vw !important; max-width: 320px !important;
    transform: translateX(-100%);
    transition: transform .26s ease;
    z-index: 250 !important;
  }
  body.wfd-rail-open.wfd-reader-pilot-page .wfd-player__rail {
    transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.45);
  }
  .wfd-rail-backdrop {
    position: fixed; inset: 0; z-index: 240; background: rgba(10,10,10,.5);
    opacity: 0; visibility: hidden; transition: opacity .26s ease;
  }
  body.wfd-rail-open .wfd-rail-backdrop { opacity: 1; visibility: visible; }
  .wfd-rail-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; right: 16px; bottom: 18px; z-index: 255;
    padding: 11px 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--wfd-gold, #C5A572); color: var(--wfd-black, #0A0A0A);
    font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
    font-size: 14px; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  .wfd-rail-toggle__icon { display: inline-flex; }
  body.wfd-rail-open .wfd-rail-toggle { background: var(--wfd-stone-900, #2A251E); color: var(--wfd-white, #FFFFFF); }
}

/* ---- 12. Reader drawer FIX (v2.9.70) — the open rail was UNDER the backdrop.
 *      reader-pilot.css sets `.wfd-player__rail{z-index:150!important}` (no media
 *      query) and loads AFTER wfd-v3.css, beating the round-4 z-index:250 and
 *      leaving the backdrop (z240) on top of the open rail — blocking all scroll
 *      and taps. Raise the OPEN rail with higher specificity (open class) so it
 *      wins regardless of load order; keep the toggle above it; iOS momentum. - */
@media (max-width: 900px) {
  body.wfd-rail-open.wfd-reader-pilot-page .wfd-player__rail {
    z-index: 260 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.wfd-reader-pilot-page .wfd-rail-toggle { z-index: 270; }
}