/*
 * pm.header-offset.css
 *
 * Clears this site's own fixed chrome out from under the shared Stardock header.
 *
 * The header (stardock-header 1.0.0, Dark variant) is `position: fixed; top: 0` and occupies
 * 33px on desktop and 44px at <=850px.
 *
 * These were 34/45 while the header came from the Stardock.Web.Header Razor class library: that
 * sheet left `box-sizing` at the default `content-box`, so the 1px bottom border sat OUTSIDE the
 * declared 33/44px height. The standalone package ships a reset that sets `border-box`, so the
 * border is now inside the declared height and the bar is exactly 33/44px. Measured in Chromium
 * at 1920/850/768/390: computed height 33px/44px, border-bottom 1px, box-sizing border-box,
 * getBoundingClientRect().height 33/44. Keeping 34/45 here left a harmless 1px gap; these values
 * now match the bar exactly.
 *
 * politicalmachine2024.css positions its own mobile chrome at top:0 as well, from before this
 * site adopted the shared header:
 *
 *     #nav-menu    fixed  top:0  z-index:1002   <- site hamburger
 *     #mobilenav   fixed  top:0  z-index:2000   <- site slide-in panel, height:100%
 *
 * Both sit ABOVE the header's stacking context (z-index 1000), so #nav-menu painted directly
 * on top of the header's own hamburger: measured at 390/768/850px, the site hamburger occupied
 * [0,0,32,36] and the header's .menu-icon [0,0,46,44] — the same origin. The header's control
 * was completely covered, making the Stardock menu unreachable on mobile.
 *
 * Loaded AFTER politicalmachine2024.css so these win on source order at equal specificity.
 */

:root {
    --stardock-header-height: 33px;
}

@media (max-width: 850px) {
    :root {
        /* The package's own breakpoint: .header-container grows to height:44px (border included). */
        --stardock-header-height: 44px;
    }
}

/* Site hamburger: drop it below the bar so both controls are visible and clickable.
   It is display:none above 850px, so only the mobile value actually applies. */
#nav-menu {
    top: var(--stardock-header-height);
}

/* Slide-in site panel: start below the bar and shorten by the same amount so its bottom edge
   still meets the viewport floor. Without this it covers the header while open (z-index 2000),
   hiding the corporate nav behind the site nav. */
#mobilenav {
    top: var(--stardock-header-height);
    height: calc(100% - var(--stardock-header-height));
}

/* The header's own mobile account drawer anchors at top:50px, tuned for the 50px light
   variant. Re-anchor it to the dark bar's real height.
   RE-VERIFIED against the standalone package: header-dark.css still sets `#account-menu`
   to `top:50px; max-height:calc(100vh - 50px)` at <=850px (its shared section), and the dark
   section that composes after it overrides only colours, never `top`. So this override is
   still required and stays.
   Caveat, stated rather than glossed: it could NOT be confirmed visually. politicalmachine is
   anonymous-only, and `#account-menu` is absent from the DOM entirely - measured both before
   and after this migration. Anonymous renders `a#account-trigger.login-trigger` instead, with
   no flyout. The rule is therefore inert today and matters only if this host gains auth. */
@media (max-width: 850px) {
    #account-menu {
        top: var(--stardock-header-height);
        max-height: calc(100vh - var(--stardock-header-height));
    }
}

/* In-page jumps: /#download (Purchase) and /#game (Game) land 60px BELOW the fixed bars instead
   of under them. Without this the browser puts the target's top at y=0, where the bars cover it:
   measured 2026-10-29 at 1600px, the "Now Available" heading sat at 0-32px under bars ending at
   83px, and the top 83px of the "Game Features" banner was hidden. www.politicalmachine.com does
   the same; Pat asked for the tile to show in full. #screenshots is left alone: its section has
   its own top padding, so its heading already lands clear (136px).
   The red nav (50px) is hidden at <=899px (politicalmachine2024.css). */
#download, #game {
    scroll-margin-top: calc(var(--stardock-header-height) + 50px + 60px);
}

@media (max-width: 899px) {
    #download, #game {
        scroll-margin-top: calc(var(--stardock-header-height) + 60px);
    }
}