/* HourlyVPS header: topbar, sticky main bar, mega menus, mobile panel.
   Markup: inc/nav.php + header.php. Enhancement: assets/js/nav.js (works without it).
   The whole header is sticky with a negative top equal to the topbar height, so the topbar
   scrolls away and the main bar stays. */

:root{--tb-h:36px;--mb-h:60px;--tb-bg:#0F1215;--tb-ink:#F2F4F5;--tb-mut:#A9B2BA;--tb-rule:#2C333A;--tb-focus:#8FB3FF}
@media (min-width:1024px){:root{--mb-h:68px}}
/* Touch layouts: the topbar links are 44px targets (BUILD-SPEC §4.2); every offset reads --tb-h. */
@media (max-width:1023px),(pointer:coarse){:root{--tb-h:44px}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--tb-bg:#08090B;--tb-mut:#98A2AC;--tb-rule:#22282E}}
:root[data-theme=dark]{--tb-bg:#08090B;--tb-mut:#98A2AC;--tb-rule:#22282E}

/* Sticky offsets for things that stick or scroll under the main bar. */
html{scroll-padding-top:calc(var(--mb-h) + 1rem)}
:root .plans__bar{top:var(--mb-h)}
:root .fpi thead th{top:var(--mb-h)}
@media (min-width:1024px){:root .doc__aside{top:calc(var(--mb-h) + 1.5rem);max-height:calc(100vh - var(--mb-h) - 3rem)}}

.site-header{position:sticky;top:calc(var(--tb-h) * -1);z-index:50}
.site-header ul{margin:0;padding:0;list-style:none}

/* ---------- Topbar ---------- */
.topbar{position:relative;background:var(--tb-bg);color:var(--tb-mut);font:400 .75rem/1 var(--mono);--focus:var(--tb-focus)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--tb-h);white-space:nowrap}
/* Facts: one line of text; each extra fact (.tb-f) starts with a notch. Ellipsis is only a safety net. */
.topbar__facts{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis}
.topbar__facts::before,.tb-f::before{content:"";display:inline-block;width:2px;height:10px;margin-right:.5rem;vertical-align:-1px;background:var(--tape)}
.tb-f::before{margin-left:1.25rem;background:var(--tb-mut)}
/* Utility links sit directly in the <nav>; a 1px rule separates them. */
.topbar__nav{display:flex;align-items:center}
.topbar__nav>:not(:last-child){background:linear-gradient(var(--tb-rule),var(--tb-rule)) 100% 50%/1px 12px no-repeat}
.topbar__nav a{display:flex;align-items:center;min-height:var(--tb-h);padding:0 .75rem;color:var(--tb-ink);font:500 .8125rem/1 var(--sans);text-decoration:none}
.topbar__nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.topbar__nav a:focus-visible{outline-offset:-4px}
.topbar__nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.topbar__nav .tb-mail{font:400 .75rem/1 var(--mono);color:var(--tb-mut)}
.topbar__nav .tb-mail:hover{color:var(--tb-ink)}
.topbar__cur{padding-left:.75rem;color:var(--tb-ink);font-weight:600;letter-spacing:.04em}
.topbar__nav a:last-child{padding-right:0}

/* ---------- Main bar ---------- */
.mainbar{position:relative;background:var(--surface);border-bottom:1px solid var(--rule)}
/* Ruler edge aligned to the 24-column grid: an hour tick per column, a longer tick every 6 hours (decorative). */
.mainbar::before{content:"";position:absolute;left:50%;bottom:0;width:min(100% - 2 * var(--gx),var(--maxw));height:8px;transform:translateX(-50%);pointer-events:none;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / 24)) 0 100%/100% 4px no-repeat,repeating-linear-gradient(90deg,var(--notch) 0 1px,transparent 1px calc(100% / 4)) 0 100%/100% 8px no-repeat,linear-gradient(var(--notch),var(--notch)) 100% 100%/1px 8px no-repeat}
.mainbar__in{display:flex;align-items:center;gap:.5rem;min-height:calc(var(--mb-h) - 1px)}
.site-header .brand{flex:none;position:relative}
.hdr-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.hdr-login{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1.5px solid var(--rule);border-radius:var(--r);color:var(--ink);font-weight:600;text-decoration:none}
.hdr-login:hover{border-color:var(--ink)}
.header-cta{flex:none}

/* Menu button (an anchor to #site-nav without JS; nav.js turns it into a toggle button). */
.nav-toggle,.nav-close{display:none;align-items:center;white-space:nowrap;min-height:44px;min-width:44px;padding:0 .75rem;border:1.5px solid var(--ink);border-radius:var(--r);color:var(--ink);font-weight:650;text-decoration:none;cursor:pointer}
/* Icon drawn by the link's own pseudo-elements (no extra markup): ::before is the box in flow, ::after is pulled
   back over it (order:-1 + negative margin). Hamburger = top/bottom border + 11px middle bar; X = two crossed
   20px bars. Borders, not gradients, so the icon survives forced-colors mode. */
.nav-toggle::before,.nav-toggle::after,.nav-close::before,.nav-close::after{content:"";flex:none;border-top:2px solid currentColor}
.nav-toggle::before{width:18px;height:14px;margin-right:.5rem;border-bottom:2px solid currentColor}
.nav-toggle::after{order:-1;width:11px;margin-right:-11px}
.nav-toggle[aria-expanded=true]::before,.nav-toggle[aria-expanded=true]::after,.nav-close::before,.nav-close::after{width:20px;height:2px;border-bottom:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true]::before,.nav-close::before{margin:0 calc(.5rem - 1px) 0 -1px}
.nav-toggle[aria-expanded=true]::after,.nav-close::after{order:-1;margin:0 -19px 0 -1px;transform:rotate(-45deg)}

/* ---------- Menu items (shared by mega panels and the mobile panel) ---------- */
.nav__top{display:flex;align-items:center;gap:.4rem;color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.nav__top::-webkit-details-marker{display:none}
summary.nav__top::after{content:"";flex:none;width:.4375rem;height:.4375rem;margin:-.25rem 0 0 .125rem;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg)}
.nav__menu[open]>summary.nav__top::after{margin-top:.25rem;transform:rotate(-135deg)}
a.nav__top{-webkit-user-select:auto;user-select:auto}
.mega__lead{margin:0;color:var(--ink);font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
.mega__addr{margin-top:.75rem;color:var(--muted);font-size:.9375rem;font-style:normal;line-height:1.5}
.mega__more{display:inline-flex;align-items:center;min-height:44px;margin-top:.75rem;color:var(--link);font-weight:650}
.mega__h{margin:0 0 .375rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule);color:var(--muted);font:400 .75rem/1.3 var(--mono);letter-spacing:.02em}
.mega__list{display:grid;gap:.125rem}
.mi{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:.1875rem;padding:.625rem .75rem;margin-inline:-.75rem;border-radius:var(--r);color:var(--ink);font-size:1rem;font-weight:650;text-decoration:none;line-height:1.35}
.mi--icon{grid-template-columns:2.5rem minmax(0,1fr);column-gap:.875rem}
.mi__i{grid-row:1/span 3;width:2.5rem;height:2.5rem;padding:.5rem;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--surface-2)}
.mi__d{color:var(--muted);font-size:.875rem;font-weight:400}
.mi__p{color:var(--muted);font:400 .8125rem/1.4 var(--mono)}
.mi__p b{color:var(--ink);font-weight:600}
.mi:hover{background:var(--bg)}
.mi--badge::before{content:attr(data-badge);content:attr(data-badge) / "";grid-row:1/span 3;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--surface-2);color:var(--ink);font:600 .75rem/1 var(--mono);letter-spacing:.02em}
.mi:hover .mi__i,.mi--badge:hover::before{background:var(--tape);color:var(--on-tape);border-color:var(--tape-edge)}
.mi[aria-current=page]{box-shadow:inset 3px 0 0 var(--ink)}
.mi:focus-visible{outline-offset:0}
.nav__foot{display:none}
.mega__foot{margin:0;padding-top:1rem;border-top:1px dashed var(--rule);color:var(--muted);font:400 .8125rem/1.6 var(--mono)}
.mega__foot b{margin-right:.5rem;color:var(--ink);font-weight:600}

/* ---------- Desktop: bar + mega panels ---------- */
@media (min-width:1024px){
.site-header .brand{margin-right:1.25rem;padding-right:1.5rem}
.site-header .brand::after{content:"";position:absolute;right:0;top:50%;height:28px;margin-top:-14px;border-right:1px solid var(--rule)}
.nav{align-self:stretch;display:flex}
.nav__list{display:flex;align-items:stretch}
.nav__list>li{display:flex}
.nav__top{position:relative;height:calc(var(--mb-h) - 1px);padding:0 .875rem;font-size:1rem}
.nav__top:hover{background:var(--surface-2)}
.nav__top[aria-current]{box-shadow:inset 0 -2px 0 var(--ink)}
.nav__menu{display:block}
.nav__menu[open]>.nav__top{background:var(--surface-2);box-shadow:inset 0 -2px 0 var(--ink)}
.nav__top:focus-visible{outline-offset:-4px}
.mega{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-columns:minmax(0,17rem) repeat(var(--mc,2),minmax(0,1fr));gap:1.5rem 3rem;padding:2rem max(var(--gx),(100% - var(--maxw)) / 2) 2.25rem;background:var(--surface);border-top:1px solid var(--rule);border-bottom:1.5px solid var(--ink);box-shadow:0 32px 48px -32px rgb(15 18 21 / .45);cursor:auto}
.mega--locations,.mega--company{--mc:1}
.mega__intro{position:relative;padding:1.375rem 2rem 0 0;border-right:1px solid var(--rule)}
.mega__intro::before{content:"";position:absolute;left:0;top:0;width:2.25rem;height:.625rem;border:1.5px solid var(--tape-edge);border-radius:2px;background:var(--tape) linear-gradient(90deg,var(--on-tape) 1px,transparent 1px) .5rem 0/.5rem 45% repeat-x}
.mega__list--grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem;row-gap:.5rem}
.mega__list--cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.mega__list--cards .mi{height:100%;margin:0;padding:1rem;border:1px solid var(--rule)}
.mega__list--cards .mi:hover{border-color:var(--ink)}
.mega>.mega__list{align-self:start;padding-top:.625rem}
.mega__foot{grid-column:2/-1}
}
@media (min-width:1024px) and (max-width:1199px){
.site-header .brand{margin-right:.5rem;padding-right:1rem}
.nav__top{padding:0 .625rem}
.hdr-login{padding:0 .75rem}
.mega{gap:1.5rem 2rem}
.mega__intro{padding-right:1.5rem}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
.nav__menu[open]>.mega{animation:hvps-mega .16s ease-out}
@keyframes hvps-mega{from{opacity:0;transform:translateY(-6px)}}
}

/* ---------- Mobile and tablet: menu panel ---------- */
@media (max-width:1023px){
.nav-toggle{display:inline-flex}
/* DOM order = visual and keyboard order: logo · Menu (or Close) · Deploy. */
.nav-toggle,.nav-close{margin-left:auto}
.hdr-actions{margin-left:0}
.hdr-login{display:none}
.nav{display:none;position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;padding-top:var(--nav-top,calc(var(--tb-h) + var(--mb-h)));overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
.nav:target,.nav.is-open{display:flex;flex-direction:column}
.site-header:not(.is-enh) .nav:target~.nav-close{display:inline-flex}
.mainbar__in:has(.nav:target) .nav-toggle{display:none}
/* Open panel: its footer carries Log in + Deploy, so the bar's Deploy steps aside (one Deploy on screen). */
.mainbar__in:has(.nav.is-open,.nav:target) .header-cta{display:none}
.site-header.is-enh .nav-close{display:none}
.site-header .nav__list{flex:1 0 auto;width:min(100% - 2 * var(--gx),var(--maxw));margin:0 auto;padding-top:.5rem}
.nav__list>li{border-bottom:1px solid var(--rule)}
.nav__top{justify-content:space-between;min-height:56px;font-size:1.125rem}
a.nav__top::after{content:"";width:.4375rem;height:.4375rem;margin-right:.125rem;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(45deg)}
.nav__top[aria-current]{box-shadow:inset 3px 0 0 var(--ink);padding-left:.75rem}
.mega{display:flex;flex-direction:column;gap:1.25rem;padding:.25rem 0 1.25rem}
.mega__intro{order:2}
.mega__lead,.mega__addr{display:none}
.mega--company .mega__lead,.mega--company .mega__addr{display:block;font-size:.875rem;color:var(--muted)}
.mega--company .mega__intro{padding:.75rem 1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.mega__more{margin-top:0}
.mi{margin-inline:0;padding:.625rem .5rem}
.nav__foot{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem;width:100%;padding:1rem max(var(--gx),(100% - var(--maxw)) / 2) calc(1rem + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1.5px solid var(--ink)}
.nav__foot .btn{width:100%}
html.nav-lock{overflow:hidden}
}
@media (min-width:600px) and (max-width:1023px){
.mega__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
}
/* Pages with the mobile sticky Deploy bar: the bar takes over the Deploy button. */
@media (max-width:719px){
body:has(.sticky-cta) .header-cta{display:none}
}
@media (max-width:379px){
.nav-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-toggle,.nav-close{padding:0;justify-content:center}
.nav-close{font-size:0} /* text hidden; the name comes from aria-label */
.nav-toggle::before{margin-right:0}
.nav-toggle[aria-expanded=true]::before,.nav-close::before{margin-right:-1px}
.site-header .brand{font-size:1.125rem}
}

/* ---------- Topbar priorities (measured 320-1440px: nothing truncates) ---------- */
@media (max-width:1279px){.tb-f3,.topbar__nav .tb-p3{display:none}}
@media (max-width:899px){.tb-f2{display:none}}
@media (max-width:719px){.topbar__nav .tb-p2{display:none}.topbar__nav>*{background:none}.topbar__nav a{padding-right:0}}
@media (max-width:459px){.tb-x{display:none}.topbar__in{gap:1rem}}

/* Header shadow once the page scrolls (scroll-driven, no JS; ignored where unsupported). */
@supports (animation-timeline:scroll()){
.site-header{animation:hvps-hdr linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--tb-h) + 1px)}
@keyframes hvps-hdr{to{box-shadow:0 12px 24px -20px rgb(15 18 21 / .55)}}
}

@media (forced-colors:active){
.mainbar::before{display:none}
.mainbar{border-bottom:1px solid CanvasText}
.mega{border:1px solid CanvasText}
.topbar__facts::before,.tb-f::before{background:CanvasText}
}

/* Logged-in admin bar: keep the main bar below it while it is fixed (wider than 600px). */
.admin-bar .site-header{top:calc(32px - var(--tb-h))}
@media (max-width:782px){.admin-bar .site-header{top:calc(46px - var(--tb-h))}}
@media (max-width:600px){.admin-bar .site-header{top:calc(var(--tb-h) * -1)}}