/*
 * header-geometry.css — site-owned geometry around the shared Stardock header.
 * Loaded AFTER header/v1/header-dark.css. S1-06.
 *
 * ===========================================================================
 * THIS FILE DELIBERATELY CONTAINS NO `padding-top` ON `body`.
 * ===========================================================================
 * Clearance for the fixed bar is created by the VENDOR class
 * `body.has-stardock-header`, applied in _Layout.cshtml. Bar height is
 * vendor-owned state, and `header/v1` is a MOVING POINTER — updated in place so
 * header fixes reach every site with no deploy. The vendor declares
 * `body.has-stardock-header` in the SAME FILE as the bar height
 * (header-dark.css:1477 and :615), so the two change together. A literal
 * `padding-top: 48px` here would silently drift the day the bar height moves
 * upstream. The one number this sheet must not own is the one the vendor
 * already owns.
 *
 * ===========================================================================
 * !! SYNC OBLIGATION — READ BEFORE EDITING, AND WHEN header/v1 CHANGES !!
 * ===========================================================================
 * The `scroll-padding-top` values below SECOND-SOURCE vendor-owned numbers:
 * the 33px / 44px bar heights, the 15px gap, and the 850px breakpoint. They are
 * literals because the vendor exposes NO CSS custom properties (`var(--` count
 * in header-dark.css: 0) and NO scroll-padding/scroll-margin of its own
 * (count: 0), so there is nothing to inherit and literals were the only
 * expressible option.
 *
 * That makes this a REAL, ASYMMETRIC SYNC POINT, and it is the reason this
 * comment exists:
 *
 *   - `body` padding SELF-CORRECTS when the vendor changes the bar height,
 *     because it is the vendor's own rule keyed to the vendor's own value.
 *   - `scroll-padding-top` BELOW DOES NOT. It will keep the old number and
 *     nothing will report it.
 *
 * The failure is silent and cosmetic-looking: anchor jumps land a few pixels
 * off, under or below the bar. If the bar height or the 850px breakpoint moves
 * in header/v1, UPDATE THE THREE NUMBERS BELOW BY HAND. Verified against
 * header-dark.css as served 2026-09-11 (60,886 bytes).
 */

/*
 * Why this is needed at all: the vendor pads the DOCUMENT once, which handles
 * the initial layout. It does nothing for scrolling. Without this, any in-page
 * `#fragment` jump lands flush against the viewport top — UNDER the still-
 * painted fixed bar — hiding the first 33/44px of the very thing the reader
 * just asked to see.
 *
 * Inert today (galciv4 ships no in-page anchors yet); it goes live silently
 * when the content ports land, which is exactly why it is written now.
 */
html {
    scroll-padding-top: calc(33px + 15px); /* 48px — mirrors header-dark.css:1477 */
}

@media (max-width: 850px) {
    html {
        scroll-padding-top: calc(44px + 15px); /* 59px — mirrors header-dark.css:1482 */
    }
}

/*
 * Keep <main> in default stacking order so a future positioned descendant
 * cannot paint over the chrome (the bar is z-index: 1000).
 *
 * `z-index: auto` rather than a number is DELIBERATE. Any numeric z-index here
 * would create a stacking context on <main> and TRAP every future modal inside
 * it — turning "my dialog renders under the header" into a bug that cannot be
 * fixed from the dialog's own CSS. `auto` asserts the default without building
 * the trap.
 */
main {
    position: static;
    z-index: auto;
}

/*
 * 851-1059px: THE SHARED HEADER'S PHONE BAR, ONE STEP WIDER.
 *
 * The legacy GalCiv4 bar is the phone bar (hamburger, account icons) from
 * 1059px down; the shared header switches at 850px. Pat, 2026-10-13: "make the
 * sites work the same". So between the two, this repeats the shared header's
 * own phone-bar rules from header-dark.css's @media (max-width:850px) block,
 * and its 44px + 15px padding. The site menu that its hamburger opens, and the
 * hiding of its desktop links and logo, are in gc4-nav-banner-footer.css.
 * KEEP IN STEP: if header/v1 changes its phone bar, change this block too.
 */
@media (min-width: 851px) and (max-width: 1059px) {
    .header-container {
        height: 44px;
        display: flex;
        align-items: stretch;
    }

    .header-container .menu-icon {
        display: flex;
        flex-shrink: 0;
    }

    .header-container > .wrapper {
        flex: 1;
        min-width: 0;
    }

    .header-container .wrapper {
        position: relative;
    }

    .header-container .account-nav {
        padding: 0 6px;
    }

    body.has-stardock-header {
        padding-top: calc(44px + 15px);
    }

    html {
        scroll-padding-top: calc(44px + 15px);
    }
}