/* ==========================================================================
   SafeBAE Club Hub — overrides
   --------------------------------------------------------------------------
   Loaded LAST, after each page's own widget <style> blocks, so it gets the
   final word in the cascade. The widgets ship with their original CSS intact
   and we don't want to edit 22 bespoke stylesheets, so corrections live here.

   Two jobs:
     1. Snap every widget shell onto the site's single 1080px measure.
     2. Repair text that is unreadable against the background it actually
        renders on (several blocks were authored for a dark band but ended up
        on white).

   Brand kit (see style.css for the full list):
     Logo Teal #1d5a66 · SafeBAE Teal #13848f · Deep Slate #1d414e
     Electric Mint #15ffc8 · Pale Aqua #d1feff · Coral #fe7171
   ========================================================================== */


/* ==========================================================================
   1. ONE MEASURE, ONE LEFT EDGE
   Each widget arrived with its own shell width — 780, 900, 1040, 1080, 1120,
   1140, 1144 — which put content left edges anywhere from x=148 to x=330 on a
   1440px viewport, while the hero, breadcrumb and footer all sat at x=180.
   These rules retire those private widths in favour of .wrap's measure.
   ========================================================================== */

.embed-host{
  max-width:1128px;          /* 1080 content + 2 x 24px gutter, same as .wrap */
  margin:0 auto;
  padding:44px 24px 64px;
}

/* Outermost widget wrappers: drop private caps, auto-centring and side padding
   so their content box IS the 1080px column. */
.embed-host > *{
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Second level too — most widgets nest a "-shell" or "-flow" element that
   carries the real max-width. */
.embed-host > * > *{max-width:100% !important}

/* Deliberately narrow reading blocks keep a comfortable measure, centred. */
.embed-host .sbhof-intro,
.embed-host .sbad4-sub{
  max-width:68ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (max-width:640px){
  .embed-host{padding:26px 16px 44px}
}


/* ==========================================================================
   2. UNREADABLE TEXT
   Every fix below was measured against its computed background, not guessed.
   Ratios in the comments are before → after.
   ========================================================================== */

/* --- Headings authored for a dark band, rendered on white (1.0:1) --------- */
.embed-host .sben-h{color:var(--deep-slate) !important}          /* Calendar, Event Library */
.embed-host .sbad1-h,
.embed-host .sbad4-h{color:var(--logo-teal) !important}          /* Advisors */
.embed-host .sbad4-sub{color:var(--ink-soft) !important}         /* Advisors */
.embed-host .sbhof-intro{color:var(--ink) !important;opacity:1 !important}   /* Hall of Fame */
.embed-host .sbhof-sub{color:var(--safebae-teal) !important}     /* Hall of Fame, 1.09 -> 3.9 */

/* --- Hero: a .muted line on the teal gradient (1.18:1) -------------------- */
.hero .muted{color:var(--pale-aqua)}

/* --- Step badges on the pale-aqua phase header (3.76:1, needs 4.5) -------- */
.embed-host .sbfa-p3 .sbfa-num,
.embed-host .sbcr-p3 .sbcr-num,
.embed-host .sbmc-p3 .sbmc-num,
.embed-host .sbeo-p3 .sbeo-num,
.embed-host .sbpt-p3 .sbpt-num{
  background:rgba(29,65,78,.14) !important;
  color:var(--deep-slate) !important;
}

/* --- Small brand-teal text on white sits at 4.26-4.47, just under AA.
       Backgrounds keep #13848f; only small text drops to the darker logo
       teal, which clears 7:1 and still reads as the same brand colour. ----- */
.embed-host .lib-card-more,
.embed-host .lib-kicker,
.embed-host .lib-tag,
.embed-host .sbae-kicker,
.embed-host .sbae-pill,
.embed-host .cal-kicker,
.embed-host .cal-tag-type,
.embed-host .cal-evt-side,
.embed-host .cal-toggle-hint,
.embed-host .sbsd-go,
.embed-host .sbryc-go,
.embed-host .sbpe-go,
.embed-host .sbres-go,
.embed-host .sbopp-go,
.embed-host .sbopp-tag,
.embed-host .sbgc-tlink,
.embed-host .sbrg-tlink,
.embed-host .gip-lbl,
.embed-host .gip-onum,
.embed-host .gip-fill,
.embed-host .gip-note-label,
.embed-host .gip-src,
.crumbs a{color:var(--logo-teal) !important}

/* Muted body copy on the tinted card backgrounds (4.47 and 2.95). */
.embed-host .lib-card-snip,
.embed-host .lib-foot,
.embed-host .sbae-foot{color:#4c6570 !important}
.embed-host .sublabel,
.embed-host .pvhead .lbl{color:#546a72 !important}


/* ==========================================================================
   3. EMBEDDED VIDEO AND AUDIO
   The widgets already do their own 16:9 padding-box sizing, so this only
   catches stray players. Note: YouTube and Spotify refuse to play when the
   page is opened straight off disk — a file:// page sends no origin and the
   embed reports a configuration error. Serve the folder over http (see
   README) and they play normally.
   ========================================================================== */
.embed-host iframe{max-width:100%;border:0}

/* ==========================================================================
   4. ICONS INSIDE WIDGETS
   A few widget footers carry the same clubsupport link as the site footer, so
   they pick up its inlined icon. Give it the same inline spacing the shell
   uses — the widgets' own CSS knows nothing about .icon.
   ========================================================================== */
.embed-host a .icon{
  width:1em;height:1em;flex:0 0 auto;
  display:inline-block;vertical-align:-.14em;
  fill:currentColor;margin-right:.4em;
}


/* ==========================================================================
   5. TEAL EMBED GROUND
   The poster builder sits on a full-bleed SafeBAE Teal ground so the poster
   artwork reads as artwork rather than as part of the page. Full-bleed via
   box-shadow + clip-path so it reaches both viewport edges without ever
   creating a horizontal scrollbar. The builder starts immediately under the
   page header — no gap between the two bands.
   ========================================================================== */
.embed-host-teal{
  position:relative;
  background:var(--safebae-teal);
  box-shadow:0 0 0 100vmax var(--safebae-teal);
  clip-path:inset(0 -100vmax);
  padding-top:0;padding-bottom:64px;
}
.embed-host-teal #sbpb{background:transparent !important;padding-top:34px !important}
/* The builder paints its own light panels; lift them off the teal ground. */
.embed-host-teal #sbpb .panel,
.embed-host-teal #sbpb .pvbar{
  background:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:14px !important;
}
/* .cuNote sits INSIDE the white preview panel, not on the teal ground. */
.embed-host-teal #sbpb .cuNote{color:#546a72 !important}
/* White is the highest-contrast text available on SafeBAE Teal (4.44:1). */
.embed-host-teal #sbpb .foot,
.embed-host-teal #sbpb .foot *{color:#fff !important}
.embed-host-teal #sbpb .foot a{color:#fff !important;text-decoration:underline !important}