/* Global Pathology Review — house style bridge.
 *
 * This file previously remapped the magazine's tokens onto the main site's
 * warm-paper / oxblood / Noir et Blanc palette, because the two products
 * looked unrelated.
 *
 * The main site has now adopted this design system instead — white ground,
 * amber accent, Playfair / EB Garamond / Inter — so the magazine's native
 * styling already matches it. The colour and type overrides are therefore
 * removed rather than inverted: the fewer layers sitting on top of the
 * bundle, the less there is to drift.
 *
 * What remains are the two corrections that were never about matching the
 * main site, and still stand on their own.
 */

:root {
  /* The bundle's --ink-4 (#999999) scores 2.85:1 on white — below AA for any
     text size. Measured replacement: 5.33 / 4.94 / 4.65 across the three
     grounds the magazine actually uses. */
  --ink-4: #6b6b6b;
}

/* ---- Token normalisation --------------------------------------------------
 *
 * The bundle was never internally consistent: measured across its 64 pages,
 * every colour token carries three to five competing values. --bg alone ships
 * as #F5F2EC on 37 pages, #ffffff on 23, #faf9f6 on 2 and #fff on 1. That is
 * two design generations mixed together, and it is why about.html renders on
 * cream while index.html renders on white.
 *
 * An earlier version of this file dropped its colour overrides on the grounds
 * that "the magazine's native styling already matches the main site". That was
 * true of the page sampled (index.html) and wrong for the 37-page majority.
 *
 * These declarations restate the main site's tokens for the whole subtree, so
 * every page resolves to one palette regardless of which generation it came
 * from. Loaded after each page's own <style>, so it wins on equal specificity.
 */
:root {
  --bg:       #ffffff;
  --bg-card:  #ffffff;
  --bg-warm:  #f8f6f3;

  --ink:      #111111;
  --ink-2:    #333333;
  --ink-3:    #666666;
  /* --ink-4 keeps the corrected value set above, not the bundle's #888/#999 */

  --line:     #e2e2e2;
  --amber:    #b45309;
  --amber-bg: #fdf3e9;
}

/* Pages that paint the ground directly rather than through the token. */
html, body { background: var(--bg); }


/* The Countries panel holds the only links to the thirty country profile pages,
   and it opened off the edge of the screen at every width: 113px past the right
   on a 1280px desktop, 86px past it on a phone. It is anchored to the left of a
   button that sits at the far right of the bar, so it had nowhere to go but
   outwards. Anchoring it to the button's right edge instead means it opens
   inwards, across the bar, at any viewport. */
.dd-menu { left: auto; right: 0; }

/* The topbar is flex-nowrap with overflow:hidden, so any item that does not fit
   is not wrapped or scrolled to — it simply disappears. At 375px that was
   already swallowing one nav item, and restoring the full "Global Pathology ·
   Review" masthead in place of "Path-iQ" (87px wider) took a second one with
   it, including the Countries dropdown that holds the only links to the thirty
   country profile pages.
 *
 * .tb-nav cannot simply be made scrollable: .dd-menu is position:absolute
 * inside it, and a scroll container would clip the open dropdown. So the width
 * is reclaimed from the bar padding and the brand instead.
 *
 * Shrinking the type was not enough on its own — the nav needs 363px and
 * trimming the brand only bought 29 — and going further would have pushed the
 * labels below both legibility and the 24px touch target. So on small screens
 * the brand is taken out of the flow entirely rather than shrunk: the masthead
 * directly beneath it already reads "GLOBAL PATHOLOGY REVIEW", so nothing is
 * lost to the reader. It is clipped rather than display:none so the link to
 * index.html stays in the accessibility tree and remains a crawlable path
 * home. */
@media (max-width: 720px) {
  .topbar { padding: 0 14px; }
  .tb-brand {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Adding the Register link took the bar to seven items. Gap alone could not
     absorb it, so the labels drop half a point too — still within the 9-9.5px
     band the bundle already uses for this row, and it is the difference
     between all seven fitting and the call to action being the one that
     silently disappears. */
  .tb-nav { gap: 7px; }
  .tb-nav a, .dd-btn { font-size: 8.5px; letter-spacing: 0.09em; }

  /* Pages differ in how many items the bar carries — the country pages have
     seven, top100 and the directory have ten — and on the longer ones the row
     needs 547px inside 413. Those pages set overflow:visible on .topbar, so it
     did not clip, it spilled, and the whole document scrolled sideways.

     Scrolling the row is only safe because .dd-menu is position:fixed at this
     width (see above); as an absolutely-positioned child it would have been
     clipped by the scroll container. min-width:0 is what actually lets a flex
     item shrink below its content and scroll at all. */
  .tb-nav {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tb-nav::-webkit-scrollbar { display: none; }
  .tb-nav > * { flex: none; }
  .topbar { overflow: hidden; }

  /* The Countries panel is anchored to its button, which sits near the right
     of the bar, so it opened 86px past the edge of a 375px screen and took
     part of its thirty country links with it. Re-anchoring to the wrapper's
     other edge only pushed it 18px off the opposite side — the wrapper is too
     narrow for either edge to be a safe hinge. Pinning it to the viewport
     under the bar sidesteps the anchor entirely, and lets a 30-item list
     scroll rather than run off the bottom of a phone. */
  .dd-menu {
    position: fixed;
    top: 52px;
    left: 14px;
    right: 14px;
    width: auto;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    /* The panel centres itself on its button with translateX(-50%). Left
       unchecked that shifted the pinned box by half its width — exactly the
       185px it was landing off the left edge. */
    transform: none;
  }
}

/* WCAG 2.5.8 — the topbar links measure about 10px tall, and with the row now
   tightened they no longer clear the spacing exemption either. The bar is 52px,
   so there is room to give every target its 24px without moving anything: the
   links are already flex items, so min-height applies to them directly. */
.tb-nav a, .tb-nav .dd-btn, .topbar-back, .tb-back {
  min-height: 24px; display: inline-flex; align-items: center;
}

/* Two nav links carry no class of their own and fell through to the page
   default, rendering at 16px serif beside 9.5px siblings and colliding with
   the item next to them. */
.topbar a:not([class]), header nav a:not([class]) {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The spec is explicit that Inter is for "nav, labels, tags, captions, UI
   chrome ONLY" and that the serifs carry all editorial content. Several
   article pages set body prose in the sans, contradicting it — and leaving the
   magazine reading differently from the main site, which uses EB Garamond for
   the same role. Scoped to content containers so chrome is untouched. */
main p, article p, .article-body p, .prose p, .content p, .page p, .body-copy p,
.lede, .intro, .standfirst, .dek, .bio, .profile-bio, .profile-body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* …but the sans keeps the roles the spec assigns it, wherever they sit. */
p.meta, p.caption, p.disclaimer, p.tiny, p.byline, p.kicker, p.label,
.meta p, .card-meta p, .stat p, footer p, nav p {
  font-family: var(--sans);
  font-size: inherit;
  line-height: inherit;
}


/* ---- Call for submissions --------------------------------------------------
 *
 * A fixed foot ribbon rather than anything at the top. The 64 pages in this
 * subtree each carry their own stylesheet and their own top spacing, tuned to a
 * 52px fixed topbar; inserting a band above them would mean correcting 64
 * different padding values and getting all of them right. The bottom of the
 * viewport is unclaimed on every one of them.
 *
 * Dismissible, and it stays dismissed — a call to action that cannot be put
 * away stops being a call to action and becomes an obstruction.
 */
.gpr-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex; align-items: center; gap: 20px;
  padding: 13px 22px;
  background: #111111; color: #ffffff;
  border-top: 2px solid var(--amber, #b45309);
  font-family: var(--sans, Inter, system-ui, sans-serif);
  box-shadow: 0 -6px 24px rgba(0,0,0,.16);
}
.gpr-cta[hidden] { display: none; }

.gpr-cta-text { margin: 0; font-size: 13px; line-height: 1.45; color: #e8e8e8; }
.gpr-cta-text strong {
  display: block; color: #ffffff; font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 3px;
}
/* Not --amber. The house accent is tuned for dark-on-light: #b45309 scores
   5.02 on white but only 3.76 on this ribbon's near-black, and these words run
   at 13px, so they need 4.5. #d97706 is the next step up the same ramp and
   reaches 5.93 here. Scoped to the ribbon, so the palette elsewhere is
   untouched. */
.gpr-cta-text em { font-style: normal; color: #d97706; }

.gpr-cta-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 11px 26px;
  background: var(--amber, #b45309); color: #ffffff !important;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  border: none; white-space: nowrap; transition: background .2s;
}
.gpr-cta-btn:hover { background: #ffffff; color: #111111 !important; }
.gpr-cta-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

.gpr-cta-close {
  flex: none; width: 32px; height: 32px; padding: 0;
  background: none; border: 1px solid rgba(255,255,255,.28); color: #cfcfcf;
  font-size: 17px; line-height: 1; cursor: pointer; transition: all .2s;
}
.gpr-cta-close:hover { border-color: #ffffff; color: #ffffff; }
.gpr-cta-close:focus-visible { outline: 2px solid var(--amber, #b45309); outline-offset: 2px; }

/* Keep the ribbon from sitting on top of the last line of the page. */
body.has-gpr-cta { padding-bottom: 74px; }

@media (max-width: 720px) {
  .gpr-cta { gap: 12px; padding: 11px 14px; flex-wrap: wrap; }
  .gpr-cta-text { flex: 1 1 100%; order: 1; font-size: 12px; }
  .gpr-cta-btn  { order: 2; margin-left: 0; flex: 1 1 auto; padding: 11px 18px; }
  .gpr-cta-close{ order: 3; }
  body.has-gpr-cta { padding-bottom: 118px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Mega-menu navigation
   ──────────────────────────────────────────────────────────────────────────
   Replaces the old .topbar rather than restyling it. Those 64 pages carry
   three different nav markups and 64 separate inline stylesheets between
   them; one new component styled in one place is the only version of this
   that stays correct. The old bar is hidden, and this one keeps its 52px
   height so no page's top spacing moves.
   ═══════════════════════════════════════════════════════════════════════ */

.topbar { display: none !important; }

.gnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  display: flex; align-items: center; gap: 24px;
  height: 52px; padding: 0 26px;
  background: #ffffff; border-bottom: 1px solid var(--ink, #111);
  font-family: var(--sans, Inter, system-ui, sans-serif);
}

.gnav-brand {
  font-family: var(--serif, Georgia, serif);
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink, #111); text-decoration: none;
  white-space: nowrap; display: inline-block; line-height: 24px; min-height: 24px;
}
.gnav-brand span { color: var(--amber, #b45309); }

.gnav-menu { margin-left: auto; }
.gnav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gnav-item { position: static; }

.gnav-btn, .gnav-plain {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 6px 11px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3, #666); text-decoration: none; transition: color .18s;
}
.gnav-btn:hover, .gnav-plain:hover { color: var(--amber, #b45309); }
.gnav-btn[aria-expanded="true"] { color: var(--ink, #111); }
.gnav-btn:focus-visible, .gnav-plain:focus-visible, .gnav-cta:focus-visible,
.gnav-toggle:focus-visible { outline: 2px solid var(--amber, #b45309); outline-offset: 2px; }
.gnav-here > .gnav-btn, .gnav-here > .gnav-plain { color: var(--ink, #111); }

.gnav-caret { font-size: 8px; opacity: .6; transition: transform .18s; }
.gnav-btn[aria-expanded="true"] .gnav-caret { transform: rotate(180deg); opacity: 1; }

.gnav-cta {
  display: inline-flex; align-items: center; min-height: 32px;
  margin-left: 8px; padding: 8px 18px;
  background: var(--amber, #b45309); color: #fff !important; text-decoration: none;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: background .18s;
}
.gnav-cta:hover { background: var(--ink, #111); }

/* ---- panels ----
   Anchored to the bar, not to the button. The old Countries dropdown hung off
   its trigger, which sat at the far right, so it opened past the edge of the
   screen at every width. A panel pinned to the bar cannot do that. */
.gnav-panel {
  position: absolute; left: 0; right: 0; top: 52px;
  background: #ffffff; border-bottom: 1px solid var(--ink, #111);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  max-height: calc(100vh - 52px); overflow-y: auto;
}
.gnav-panel[hidden] { display: none; }
.gnav-panel-in {
  display: flex; gap: 52px; align-items: flex-start;
  max-width: 1160px; margin: 0 auto; padding: 30px 26px 34px;
}
.gnav-col { min-width: 170px; }
.gnav-col--wide { flex: 1; min-width: 0; }

.gnav-head {
  margin: 0 0 13px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line, #e2e2e2);
  font-family: inherit; font-size: 8.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amber, #b45309);
}
.gnav-links { list-style: none; margin: 0; padding: 0; }
.gnav-col--wide .gnav-links {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0 22px;
}
.gnav-links a {
  display: block; min-height: 24px; padding: 5px 0;
  font-family: var(--body, Georgia, serif); font-size: 14px; line-height: 1.45;
  color: var(--ink-2, #333); text-decoration: none; transition: color .15s;
}
.gnav-links a:hover { color: var(--amber, #b45309); }
.gnav-links a[aria-current="page"] { color: var(--amber, #b45309); font-weight: 600; }

/* ---- the mobile control, hidden until it is needed ---- */
.gnav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 8px;
  min-height: 32px; padding: 6px 10px;
  background: none; border: 1px solid var(--line, #e2e2e2); cursor: pointer;
  font-family: inherit; font-size: 9.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink, #111);
}
.gnav-bars { position: relative; width: 15px; height: 9px; }
.gnav-bars::before, .gnav-bars::after,
.gnav-bars { background: none; }
.gnav-bars::before, .gnav-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--ink, #111); transition: transform .2s;
}
.gnav-bars::before { top: 0; box-shadow: 0 4px 0 var(--ink, #111); }
.gnav-bars::after  { bottom: 0; }

@media (max-width: 1080px) {
  .gnav { padding: 0 16px; gap: 14px; }
  .gnav-toggle { display: inline-flex; }
  .gnav-menu {
    position: fixed; top: 52px; left: 0; right: 0; bottom: 0;
    background: #ffffff; border-top: 1px solid var(--line, #e2e2e2);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin-left: 0; padding: 6px 0 40px;
    display: none;
  }
  .gnav--open .gnav-menu { display: block; }
  .gnav-list { display: block; }
  .gnav-item { border-bottom: 1px solid var(--line, #e2e2e2); }
  .gnav-btn, .gnav-plain {
    width: 100%; justify-content: space-between;
    min-height: 48px; padding: 14px 18px; font-size: 10.5px;
  }
  .gnav-cta { margin: 16px 18px; width: calc(100% - 36px); justify-content: center; min-height: 48px; }
  .gnav-panel {
    position: static; box-shadow: none; border-bottom: none;
    max-height: none; background: var(--bg-warm, #f8f6f3);
  }
  .gnav-panel-in { display: block; padding: 6px 18px 20px; }
  .gnav-col { min-width: 0; margin-bottom: 16px; }
  .gnav-col--wide .gnav-links { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gnav-links a { min-height: 40px; display: flex; align-items: center; }
}