/* The one header component, used by every page including the landing page. It lived in
   site.css, which also carries an older landing section whose unscoped .hero rule squeezed
   the real landing hero to 800px the moment that file was loaded there. A page that wants
   the header now takes only the header. */

/* One header for the whole app, ported from the landing page's floating navbar, which is
   the treatment the owner picked. The app pages have no hero to float over, so it always
   wears the landing's docked look: translucent panel, blur, hairline border. */
.site-header {
    /* Sticky, not fixed: it occupies its own space in the flow, so nothing underneath has to be
       pushed down by a body padding that has to be kept in step with the header's height. That
       padding was a magic number and it was already wrong on a phone, where the nav wraps to a
       second row and the page title ended up behind the bar. */
    position: sticky;
    top: 0;
    z-index: 50;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space);
    /* The bar carries the page background so content scrolling under it never reappears either
       side of the pill. The landing turns this off, because seeing the hero through it is the
       point there. */
    background: var(--bg, #12151a);
    border-bottom: 1px solid var(--line, #2b323c);
    font-family: var(--font-sans);
}
/* The pill. It used to be the header itself, centred with translateX(-50%), which made it the
   containing block for anything fixed inside it. */
.site-header-inner {
    box-sizing: border-box;
    max-width: 100%;
    height: 56px;
    padding: 0 var(--space);
    display: flex;
    align-items: center;
    gap: var(--space);
    border: 1px solid var(--line, #2b323c);
    border-radius: var(--radius);
    background: rgba(13, 16, 20, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* The landing floats over a full-bleed hero: no bar, and the hero starts at the top. */
/* The landing is the one page that floats over its content, because the hero is meant to be
   seen through it. That is the only place fixed positioning is needed. */
.site-header.is-hero {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
}
.site-header.is-hero .site-header-inner { background: rgba(11, 13, 16, 0.86); }
.site-header.is-hero.docked .site-header-inner { background: rgba(11, 13, 16, 0.97); border-color: var(--line-bright, #3d4450); }
body:has(> .site-header.is-hero) { padding-top: 0; }

/* Wordmark: the one serif accent in the component. */
.site-wordmark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--w-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text, #e8eaed);
    text-decoration: none;
    white-space: nowrap;
}
.site-wordmark:hover { color: var(--gold, #c9a227); }

/* Nav. flex:1 lets the optional credit sit hard right on wide screens and
   gives the scroll container its width on narrow ones. */
.site-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { width: 0; height: 0; }
.site-nav a {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    font-size: 13px;
    font-weight: var(--w-medium);
    color: var(--muted, #99a1ab);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--text, #e8eaed); }
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: transparent;
}
.site-nav a[aria-current="page"] { color: var(--text, #e8eaed); }
.site-nav a[aria-current="page"]::after { background: var(--gold, #c9a227); }

/* Optional Radiopaedia credit. Pages that carried the credit in their header
   before (index.html, credits.html) keep it here. It may lose its href, it
   must never lose its words. */
.site-header-credit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--gold, #c9a227);
    text-decoration: none;
    white-space: nowrap;
}
.site-header-credit:hover { color: #f0d78c; }

.site-header a:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: 2px; }

@media (max-width: 720px) {
    /* The nav wraps to its own row, so neither the bar nor the pill can keep a fixed height:
       with one, the second row was clipped and a phone showed the wordmark and nothing else. */
    .site-header {
        height: auto;
        min-height: 88px;
        padding: 16px var(--space);
    }
    .site-header-inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 56px;
        width: 100%;
        padding: 8px var(--space);
        gap: 0 var(--space);
    }
    /* Every target stays 44px tall. */
    .site-wordmark { margin-right: auto; }
    .site-header-credit { order: 1; }
    /* Own row, scrolling inside the 24px inset. order keeps it visually below the
       wordmark row without moving it in the DOM or in the tab order. */
    .site-nav { order: 2; flex: 1 0 100%; }
}

/* The landing page floats this over a full-bleed hero, so it starts invisible and takes the
   panel on scroll (js/landing.js toggles .docked). Every other page is docked from the start,
   because there is no hero to float over. */
/* The landing header used to start transparent and take its panel only on scroll. Over a
   full-bleed CT that leaves nav text and the gold credit sitting on bright skull, so the panel
   is always on. It still floats over the hero; it is simply always readable. .docked deepens it
   slightly once the page moves, which is the only thing js/landing.js still toggles. */
.site-header.is-hero.docked {
    background: rgba(11, 13, 16, 0.97);
    border-color: var(--line-bright, #3d4450);
}
body:has(> .site-header.is-hero) { padding-top: 0; }   /* the hero sits under it by design */

/* The landing's call to action, in the slot the app pages give the Radiopaedia credit. */
.site-header-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--space);
    border: 1px solid var(--line, #2b323c);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: var(--w-medium);
    color: var(--text, #e8eaed);
    text-decoration: none;
    white-space: nowrap;
}
.site-header-cta:hover { border-color: var(--gold, #c9a227); color: var(--gold, #c9a227); }