/* The palette lives here because every page loads this file. styles.css is
   only linked by some of them, so a token defined there alone resolves to
   nothing on the rest, and a colour that does not resolve is not a colour.
   Values are held to WCAG AA by tests/contrast.test.mjs. */
:root{
  --ink:#11110f;--night:#07172a;--navy:#0b2544;--navy2:#14385d;
  --cream:#f2eadc;--paper:#fffdf8;--white:#ffffff;--sand:#e6dac7;
  --copper:#87401d;--accent-text:#87401d;--copper-on-dark:#d4834a;--gold:#e4b85d;
  --line:#d9cfbf;--line-strong:#8f7d63;--muted:#5b656f;--ink-soft:#4b5560;
  --success:#17633f;--danger:#9b2d30
}

/* ===========================================================================
   LEAD48 - shell.css

   One shell for two design systems.

   The site runs audience.css (index, about, attend, participate, organize,
   speakers) and styles.css (recruitment, journey, selection, conversation,
   changelog, privacy). They render the same chrome from different markup:
   .site-header vs .topbar, .nav-action vs .nav-cta, .brand vs .brand-lockup.
   The result was a site whose header, nav and footer changed shape depending
   on which page you were on.

   This file normalises that chrome across both, so every page carries the
   same header height, nav treatment, CTA and footer. It does NOT touch the
   two systems' section layouts or heading scales - those already share the
   same Inter/Georgia pairing, and rewriting them would be a redesign rather
   than a reconciliation.

   LOAD ORDER: after the system stylesheet, BEFORE site-fixes.css.
   site-fixes.css owns the fixed-widget footer clearance (96px, and 140px
   under 760px so the Global Pulse dock never lands on the footer links). The
   footer padding set here would override that and put the dock back on top of
   them, so site-fixes.css has to come after this file.

   No inline styles anywhere: the CSP is style-src 'self' with no
   unsafe-inline.
   =========================================================================== */

:root {
  --shell-bg: #050d19;
  --shell-line: rgba(255, 255, 255, 0.12);
  --shell-link: #cbd2dc;
  --shell-height: 72px;
}


/* --- Header ---------------------------------------------------------------
   audience.css used a 76px fixed-height bar on #050d19; styles.css used an
   18px-padded translucent bar with a blur. One bar now. */

.site-header,
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--shell-height);
  padding: 0 clamp(20px, 5vw, 78px);
  border-bottom: 1px solid var(--shell-line);
  background: var(--shell-bg);
  color: #fff;
  backdrop-filter: none;
}


/* --- Brand ---------------------------------------------------------------- */

.site-header .brand,
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.site-header .brand img,
.topbar .brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}

.site-header .brand b,
.topbar .brand b {
  color: var(--gold,#e4b85d);
}


/* --- Nav ------------------------------------------------------------------ */

.site-header nav,
.topbar nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

.site-header nav > a,
.topbar nav > a {
  color: var(--shell-link);
  font: 700 0.72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-header nav > a:hover,
.topbar nav > a:hover,
.site-header nav > a.active,
.topbar nav > a.active {
  color: #fff;
}

.site-header nav > a:focus-visible,
.topbar nav > a:focus-visible {
  outline: 2px solid var(--gold,#e4b85d);
  outline-offset: 4px;
}

/* The one call to action, same shape in both systems. */
.site-header nav .nav-action,
.site-header nav .nav-cta,
.topbar nav .nav-action,
.topbar nav .nav-cta {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--gold,#e4b85d);
  border-radius: 999px;
  color: #fff;
}

.site-header nav .nav-action:hover,
.site-header nav .nav-cta:hover,
.topbar nav .nav-action:hover,
.topbar nav .nav-cta:hover {
  background: var(--gold,#e4b85d);
  color: #08182b;
}


/* --- Event facts strip ----------------------------------------------------
   The four things a busy reader needs before anything else: when it is, that
   it is online, that there is no travel, and that the roles are unpaid. Same
   component, same wording, on every page that carries it. */

.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font: 700 0.7rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.event-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold,#e4b85d);
}

.event-facts li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* On the cream sections the gold is unreadable; use the darker copper there. */
.section .event-facts li,
.page-hero + .section .event-facts li {
  color:var(--accent-text,#87401d);
}

.page-hero .event-facts li,
.hero .event-facts li,
.brief-hero .event-facts li,
.hero-copy .event-facts li {
  color: var(--gold,#e4b85d);
}


/* --- Footer ---------------------------------------------------------------
   audience.css laid the footer out as a single flex row, styles.css as a
   stack. One stacked footer now, on the same dark ground. */

body > footer {
  display: grid;
  gap: 10px;
  padding: 52px clamp(20px, 5vw, 78px) 96px;
  border-top: 1px solid var(--shell-line);
  background: #050f1b;
  color: #fff;
}

body > footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

body > footer .brand img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

body > footer .brand b {
  color: var(--gold,#e4b85d);
}

body > footer p {
  margin: 0;
  max-width: 70ch;
  font-size: 0.86rem;
}

body > footer .footer-tagline {
  font-size: 1rem;
}

body > footer .footer-facts {
  color: var(--gold,#e4b85d);
  font: 700 0.68rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* The contact address in .footer-contact is charles.igwe@ci3pro.ca for now.
   It becomes support@lead48.org once the lead48.org domain is live - change it
   in the footer of every page and in the About contact block at the same time. */
body > footer .footer-contact a {
  font-weight: 700;
}

body > footer .footer-links,
body > footer .fine,
body > footer .micro {
  color: #9fb0c2;
  font-size: 0.8rem;
}

body > footer a {
  color: #cbd8e4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body > footer a:hover {
  color: var(--gold,#e4b85d);
}

body > footer .brand:hover {
  color: #fff;
}


/* --- Narrow widths --------------------------------------------------------
   Each system keeps its own mobile nav shape: the audience.css pages toggle a
   .menu-button panel, the styles.css pages collapse to the CTA plus their
   .mobile-dock. The shared shell values are re-asserted here - and, because
   this file loads last of the two, so is the audience.css collapse itself.
   See the "Collapsed mobile nav" note below for why it has to live here. */

@media (max-width: 860px) {
  /* One mobile bar height, declared once, so the collapsed nav panel and the
     anchor offsets can be derived from it instead of each re-hardcoding
     64 / 66 / 82px. */
  :root {
    --shell-height: 64px;
  }

  .site-header,
  .topbar {
    height: var(--shell-height);
    padding: 0 16px;
  }

  .site-header .brand,
  .topbar .brand {
    font-size: 1rem;
  }

  .site-header .brand img,
  .topbar .brand img {
    width: 30px;
    height: 30px;
  }

  body > footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .event-facts {
    gap: 5px 12px;
    font-size: 0.62rem;
  }


  /* --- Collapsed mobile nav ------------------------------------------------
     audience.css already collapses .site-header nav behind the .menu-button
     below 850px. This file loads after it and re-asserted "display: flex" on
     the same selector outside any media query, so that display:none lost on
     equal specificity - while position:absolute and top:66px survived. The
     panel therefore rendered on every mobile load: six links plus the Apply
     pill, absolutely positioned under the bar and painting on top of the
     hero, so the first screen was a wall of navigation and the H1 was cut off
     behind it.

     The collapse is restated here, at this file's own breakpoint, so the two
     agree. Between 851 and 860px audience.css still hides .menu-button, which
     is why the button is shown here too - hiding the nav without its toggle
     would strand every link.

     Only .site-header is touched. The styles.css .topbar pages already
     collapse to the CTA plus .mobile-dock through responsive.css. */

  .menu-button {
    display: inline-flex;
    align-items: center;
    flex: none;
  }

  .site-header nav {
    display: none;
    position: absolute;
    top: var(--shell-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100vh - var(--shell-height));
    padding: 20px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-bottom: 1px solid var(--shell-line);
    background: var(--shell-bg);
  }

  .site-header nav.open {
    display: flex;
  }

  /* In the panel the pill is a full-width row, not a floating chip. */
  .site-header nav .nav-action {
    margin-top: 4px;
  }
}


/* --- Menu button ------------------------------------------------------------
   Every page now carries the one .site-header, including the styles.css
   pages, which never loaded audience.css where this button was first styled.
   Hidden on desktop; the narrow-width block above shows it. */

.menu-button {
  display: none;
  background: none;
  border: 1px solid #607087;
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}

.menu-button:focus-visible {
  outline: 2px solid var(--gold,#e4b85d);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  .menu-button {
    display: inline-flex;
    align-items: center;
    flex: none;
  }
}


/* --- On this page -------------------------------------------------------------
   The deep pages (the relay, the conversation architecture, selection) used to
   put their section links in the top bar. The top bar is now the one site
   nav, so those links sit in a quiet strip under it. */

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 12px clamp(20px, 5vw, 78px);
  border-bottom: 1px solid var(--shell-line);
  background: #0a1828;
}

.page-nav a {
  color: var(--shell-link);
  font: 700 0.68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.page-nav a:hover {
  color: #fff;
}

.page-nav a:focus-visible {
  outline: 2px solid var(--gold,#e4b85d);
  outline-offset: 3px;
}


/* --- /participate ------------------------------------------------------------ */

.ways-in a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold,#e4b85d);
  text-underline-offset: 4px;
}

.ways-in a:hover {
  color: var(--gold,#e4b85d);
}

.organize-continuity {
  margin: 26px 0 0;
  max-width: 70ch;
}

/* /status keeps its own sticky applicant bar under the site header. */
.site-header + .status-topbar {
  top: var(--shell-height);
}

/* Contrast: inside a dark panel the accent takes its lighter variant.
   A dark panel is a rule that sets both a dark background and light text;
   anything less is a card or a border, and its accent stays as it is. */
/* --- Footer ---------------------------------------------------------------
   audience.css laid the footer out as a single flex row,
styles.css as a
   stack. One stacked footer now,
on the same dark ground. */

body > footer{--accent-text:var(--copper-on-dark,#d4834a)}