/* ============================================================================
   RheumWave — HEADER + FOOTER
   ----------------------------------------------------------------------------
   The site chrome, in one place. Loaded by index.html, cases.html and every
   case page. NOT loaded by quizzes.html, which has no header or footer by
   design so that a participant mid-quiz has nothing to wander off to.

   Requires rheumwave-theme.css to be loaded first — every colour here is a
   token defined there.

   The markup this expects is in the header/footer block of index.html. Copy
   it as a unit; the class names are the contract between the two files.
   ========================================================================== */

/* Lines every full-width band up with the ones above and below it. */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ── HEADER ────────────────────────────────────────────────────────────────
   One row: brand · nav · menu · sign in · theme. Same navy as the footer,
   so the page opens and closes on the same note. */
header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 12px rgba(15,23,42,0.18);
}
[data-theme="dark"] header { background: #0b1220; border-bottom: 1px solid var(--border); }

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand strong {
  font-family: 'Source Serif 4', serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.brand span { font-size: .78rem; color: #b8d4e8; margin-top: 3px; letter-spacing: .01em; }
.brand:hover strong { opacity: .85; }

/* Plain links — no grouped pill bar behind them */
nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
nav a {
  text-decoration: none;
  color: rgba(255,255,255,0.82);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
nav a:hover { color: #fff; }
nav a[aria-current="page"] { color: #fff; border-bottom-color: rgba(255,255,255,0.75); }

.header-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin-left: auto; }

/* The ID pill, Sign out and the theme button share one outlined shape, so the
   cluster reads as one row of controls rather than three different things.
   Sign in is deliberately NOT in this list — see below. */
.session-pill,
#signOutBtn,
.theme-btn {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 7px 12px;
  border-radius: 7px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .2s;
}
#signOutBtn:hover,
.theme-btn:hover { background: rgba(255,255,255,0.24); }

/* The ID pill is a label, not a control — same shape, but no pointer. */
.session-pill { cursor: default; }
.session-pill .dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; flex-shrink: 0; }

/* Sign in is the one action a signed-out visitor is meant to take, so it stays
   solid white against the navy while everything around it is outlined. It is
   the only filled control in the header, and that is what makes it read as the
   primary one. */
.signin-btn {
  background: #fff;
  color: var(--navy);
  border: 1px solid #fff;
  padding: 7px 16px;
  border-radius: 7px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: opacity .2s;
}
.signin-btn:hover { opacity: .88; }

/* Signed in: the ID sits beside Sign out. Signed out — guest included — the
   Sign in button stands in their place. */
#sessionBox { display: none; align-items: center; gap: 9px; }
#sessionBox.visible { display: flex; }

/* Menu sits immediately left of Sign in, and appears once the tabs stop
   fitting on one row. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  width: 38px;
  height: 34px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}
.nav-toggle:hover { background: rgba(255,255,255,0.24); }
.nav-toggle svg { width: 19px; height: 19px; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer {
  background: var(--navy);
  color: rgba(255,255,255,0.72);
  margin-top: 72px;
  padding: 56px 0 26px;
  font-size: .88rem;
}
[data-theme="dark"] footer { background: #0b1220; border-top: 1px solid var(--border); }

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; text-decoration: none; color: #fff; }
.footer-brand img { width: 36px; height: 36px; object-fit: contain; }
.footer-brand strong { font-family: 'Source Serif 4', serif; font-size: 1.25rem; font-weight: 600; }
.footer-about { margin: 0 0 18px; max-width: 34ch; line-height: 1.7; color: rgba(255,255,255,0.66); }
.footer-contact { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: .85rem; }
.footer-contact:hover { color: #fff; }
.footer-contact svg { width: 16px; height: 16px; }

.footer-col h5 {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b8d4e8;
  margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(255,255,255,0.72); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.68); }
/* The floating logo is pinned to the viewport corner, so on mid-width screens
   the right-hand end of this row can run underneath it. The padding holds the
   text clear — but only across the range where they can actually collide.
   Above ~1368px the centred 1200px column ends well short of the logo, and
   applying the padding there would just pull the copyright text 104px left of
   the hairline above it, which reads as a misalignment. */
@media (min-width: 701px) and (max-width: 1368px) {
  .footer-bottom { padding-right: 104px; }
}

/* Column one opens with a 36px logo, so its wordmark sits well below the top
   of the column. Left flush, the Learn and About headings float above it and
   the three columns read as if they start at different heights. This drops
   them to the centre line of the logo row. Only while the columns sit side by
   side — once they stack on a phone there is nothing to align to. */
@media (min-width: 701px) { .footer-col h5 { margin-top: 11px; } }

/* ── FLOATING LOGO ───────────────────────────────────────────────────────── */
#floatingLogo {
  position: fixed; bottom: 22px; right: 22px;
  width: 90px; height: 90px;
  z-index: 200;
  filter: drop-shadow(0 4px 14px rgba(30,58,95,0.35));
  cursor: default;
  transition: transform .2s;
}
#floatingLogo:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { #floatingLogo:hover { transform: none; } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
/* The seven nav tabs plus the actions stop fitting on one row here, so the
   tabs move into a panel behind the menu button. */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  nav {
    order: 3;
    display: none;
    width: 100%;
    margin: 2px 0 4px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  nav.open { display: flex; }
  nav a { padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
  nav a:last-child { border-bottom: none; }
  /* The underline that marks the current tab is invisible in a stacked panel,
     so it is carried by weight and a full-strength colour instead. */
  nav a[aria-current="page"] { border-bottom-color: rgba(255,255,255,0.1); font-weight: 600; color: #fff; }
  .header-inner { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 700px) {
  :root { --header-h: 66px; }
  .wrap { padding: 0 18px; }
  .header-inner { padding: 10px 18px; }
  .brand span { display: none; }
  .brand strong { font-size: 1.25rem; }
  .header-actions { gap: 7px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  footer { margin-top: 52px; padding-bottom: 96px; }
  #floatingLogo { width: 62px; height: 62px; bottom: 14px; right: 14px; }
}

/* Narrowest phones. Signed out the row has three items; signed in it has four
   — burger, ID pill, Sign out, theme — and at ~390px those four plus the
   wordmark no longer fit, so the whole cluster used to wrap onto a second row
   and the header doubled in height. Everything below buys back that width:
   the theme button drops its label, the controls tighten, and the wordmark is
   allowed to shrink rather than force the wrap. */
@media (max-width: 540px) {
  .header-inner { gap: 10px; padding: 9px 16px; }

  .brand strong { font-size: 1.12rem; }

  .header-actions { gap: 6px; }
  #sessionBox { gap: 6px; }

  .theme-btn .theme-label { display: none; }
  .theme-btn, .session-pill, #signOutBtn { padding: 6px 9px; font-size: .75rem; }
  .signin-btn { padding: 6px 12px; font-size: .75rem; }

  .nav-toggle { width: 34px; height: 31px; }
  .nav-toggle svg { width: 17px; height: 17px; }

  /* Footer: the columns are stacked by now, so the headings need no top nudge
     and the whole block can sit tighter. */
  footer { padding-top: 44px; }
  .footer-about { max-width: none; }
  .footer-bottom { margin-top: 32px; }
}

/* Smallest phones still in use (~320px). Four controls plus the wordmark will
   not fit on one row at any sensible size, and truncating the wordmark to
   "RheumWa…" is worse than a second row. So the wrap becomes deliberate here:
   wordmark on top, controls right-aligned beneath it — and --header-h is
   raised to match, or in-page anchors would land underneath the taller bar. */
@media (max-width: 360px) {
  :root { --header-h: 104px; }
  .header-actions { width: 100%; justify-content: flex-end; }
}