/* ==========================================
   HEADER & BRANDING
   ========================================== */
.site-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 15px 0;
    position: relative;
    overflow-x: clip;
    isolation: isolate;
    clip-path: inset(0px -9999px 0px -9999px); /* cards clipped to header rectangle — no bleed below */
    height: 180px;
    box-sizing: border-box;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    /* No position:relative here — cards inside .branding-lower use .site-header
       (position:relative) as their containing block for desktop abs-positioning. */
}

.site-branding {
    margin-bottom: 15px;
    text-align: center;
}

/* ==========================================
   HEADER CARD FLANKING IMAGES (Issue #130)
   Pre-rotated PNGs: tao-up-ccw.png (left) + nexus-up-cw.png (right)
   background-image set inline via header.php (home_url() needed for correct URL).
   background-image approach — no CSS rotation, no <img> tags, no JS.

   bottom:0 anchors wrapper at header's bottom edge (the red clip line).
   translateY(40%) shifts wrapper down 40% of its own height so the card's
   40%-from-bottom mark sits at the clip line and 60% is visible above it.
   clip-path on .site-header hides the 40% overhang below the nav bar.
   z-index:-1 keeps cards behind branding text (within site-header stacking context).
   left:0 / right:0 bias cards to the outer viewport edges.
   ========================================== */
.header-card {
    position: absolute;
    bottom: 0;
    z-index: -1;
    /* Image aspect ratio: 566×776 (rotated canvas) */
    /* Anchor at 45% (was 40%): scale height by 0.6/0.55 so visible portion above clip line stays identical.
       167px at 375px → 273px at 550px, clamped at both ends. */
    height: clamp(167px, calc(167px + (100vw - 375px) * 0.604), 273px);
    width: auto;
    aspect-ratio: 566 / 776;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    /* translateY(45%) anchors bottom at clip line; 55% visible above, 45% hidden below */
    transform: translateY(45%);
}

.header-card--left {
    /* Slides INWARD as viewport grows: -35px at 375px (slightly more outrigged),
       fully visible (0px) at ~800px, centered in growing margins at desktop.
       Slope: +0.0824px per vw-px → clamps at +35px on wide screens. */
    left: clamp(-35px, calc(-35px + (100vw - 375px) * 0.0824), 35px);
}

.header-card--right {
    right: clamp(-35px, calc(-35px + (100vw - 375px) * 0.0824), 35px);
}

/* ==========================================
   SITE TITLE & DESCRIPTION
   ========================================== */
.site-title {
    font-size: 1.6em;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.3em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    padding: 0 20px;
}

.site-title a {
    color: white;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    /* Contrast against card corners underlapping the h1.
       Background color is ~#1e3c72 (dark navy). Both effects active — comment one out to compare. */
    /* -webkit-text-stroke: 1px #1e3c72; */
    text-shadow:
        -1px 0 #1e3c72,  1px 0 #1e3c72,
         0 -1px #1e3c72, 0 1px #1e3c72,
        -1px -1px #1e3c72, 1px -1px #1e3c72,
        -1px  1px #1e3c72, 1px  1px #1e3c72;
}

.site-title a:hover {
    color: magenta; /* Issue #46: magenta — do not revert */
    /* Green glow — Issue #46: small size, medium spread */
    /* Note: -webkit-text-stroke is intentionally omitted — on Safari/WebKit it
       outlines individual subpaths within a glyph (crossbars, counters) rather
       than the full character outline, causing a broken look. The 8-direction
       text-shadow below provides an equivalent 1px black outline without that
       bug (each shadow copy renders the glyph as a whole). */
    text-shadow:
        /* 8-direction 1px black shadow fallback for non-WebKit */
        -1px 0 #000,  1px 0 #000,
         0 -1px #000, 0 1px #000,
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px  1px 0 #000, 1px  1px 0 #000,
        /* green glow: small radius (6px), medium spread via layered stops */
        0 0 6px rgba(0, 200, 0, 0.95),
        0 0 14px rgba(0, 180, 0, 0.55);
}

.site-description {
    color: rgba(255,255,255,0.9);
    font-size: 1.1em;
    font-style: italic;
    margin-top: 8px;
    /* Tracks visible card artwork edge (80% of total card width × full position slope = 0.418).
       70px at 375px (proven baseline) → ~144px at 550px, ~6-14px clearance throughout */
    padding: 0 clamp(70px, calc(70px + (100vw - 375px) * 0.418), 240px);
}