/* v4 site header — ported from the SSG build (src/components/Header.astro +
   tokens.css). Scoped to .site-header only; the rest of the page keeps the
   old design. Loads after app.css so it can neutralize the old fixed-topbar
   compensation. */

/* self-hosted brand fonts (GDPR: no font CDNs), used inside the header only */
@font-face { font-family: 'General Sans'; src: url('../fonts/brand/GeneralSans-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/brand/InstrumentSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/brand/InstrumentSans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/brand/InstrumentSans-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* the sticky header is in-flow: undo the old fixed-.topbar body offset */
body, body.submenu { margin-top: 0 !important; }

/* corner triangle sits on top of the sticky header (old app.css rule has z-index 101) */
.small-triangle { z-index: 1001; pointer-events: none; }

/* skip link: first focusable, visually hidden until keyboard focus */
.skip-link { position: absolute; left: -9999px; background: #1A2333; color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 1100; font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 15px; text-decoration: none; }
.skip-link:focus { left: 16px; top: 16px; }
html { scroll-padding-top: 64px; }
@media (max-width: 900px) { html { scroll-padding-top: 60px; } }

.site-header {
  /* tokens (DESIGN.md Modernization) — scoped, children inherit */
  --ink: #1A2333; --white: #FFFFFF; --teal: #33B5A4; --teal-text: #0B6B5C;
  --coral: #D14324; --blue: #016DB6; --gray-2: #E8E8E4; --bg: #FFFFFF; --text: #1A2333;
  --muted: #5A6474; --r-sm: 6px;
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-7: 28px;
  --content-width: 1160px; --gutter: 24px;
  --font-display: 'General Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  position: sticky; top: 0; z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--gray-2);
  font-family: var(--font-body);
}

/* wp_nav_menu list resets (Foundation/app.css set list + anchor styles) */
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header li { margin: 0; padding: 0; }

.site-header .bar { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: flex; align-items: center; gap: 28px; }
.site-header .logo { display: flex; align-items: center; flex: none; }
.site-header .logo img { height: 32px; width: auto; display: block; }

.site-header .nav { margin-right: auto; }
.site-header .sh-navlist { display: flex; gap: var(--s-6); }
.site-header .sh-navlist a { color: var(--text); text-decoration: none; font-weight: 500; font-size: 15px; padding: 4px 0; border-bottom: 2px solid transparent; line-height: 1.4; white-space: nowrap; }
.site-header .sh-navlist a:hover { color: var(--teal-text); }
.site-header .sh-navlist a[aria-current='page'],
.site-header .sh-navlist .current-menu-item > a { border-bottom-color: var(--teal); }

.site-header .header-cta { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
/* language switch: quiet text link (the pill read as out of place next to the CTA) */
.site-header .lang { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-header .lang:hover { color: var(--text); }

/* button spec (DESIGN.md: one box for all variants) */
.site-header .btn { display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: var(--r-sm); padding: 11px 24px; font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: none; font-family: var(--font-body); }
/* clipped bottom-right corner echoes the 42 logo diagonal */
.site-header .btn-primary { background: var(--blue); color: var(--white); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.site-header .btn-ghost { border-color: var(--ink); color: var(--text); background: transparent; }
.site-header .header-cta .btn { padding: 9px 20px; white-space: nowrap; }

/* boxless three-bar menu button (the old site's icon); bars animate to an X */
.site-header .menu-btn { display: none; background: none; border: 0; width: 34px; height: 42px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.site-header .menu-btn span { display: block; width: 26px; height: 2px; background: var(--text); border-radius: 1px; transition: transform .25s ease, opacity .2s ease; }
.site-header .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .site-header .menu-btn span { transition: none; } }

/* mobile drawer (SSG .menu, renamed: Foundation claims .menu) */
.sh-drawer { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 999; background: var(--bg); padding: var(--s-3) var(--gutter) var(--s-6); overflow-y: auto; overflow-x: hidden; }
.sh-drawer.open { display: block; }
/* brand donut, bottom-right, opening facing up (chosen from the variants page);
   fixed so it stays pinned at the bottom while the drawer content scrolls */
.sh-drawer .sh-drawer-deco { position: fixed; right: -25%; bottom: 0; width: 110%; opacity: .16; transform: rotate(-90deg); z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sh-drawer.open { animation: sh-menu-in 200ms ease-out; }
  @keyframes sh-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
.sh-drawer .sh-drawer-list a { display: block; padding: var(--s-4) 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--gray-2); }
.sh-drawer .sh-drawer-list a[aria-current='page'],
.sh-drawer .sh-drawer-list .current-menu-item > a { color: var(--teal-text); }
.sh-drawer .meta { margin-top: var(--s-6); display: flex; flex-direction: column; gap: 14px; }
.sh-drawer .meta a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; }
.sh-drawer .menu-address { font-style: normal; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* company name at the same size/weight as the phone/email lines below it */
.sh-drawer .menu-address strong { font-size: 16px; font-weight: 600; color: var(--text); }
.sh-drawer .meta svg { width: 20px; height: 20px; }
.sh-drawer .meta .lang { align-self: flex-start; font-size: 16px; color: var(--text); }
.sh-drawer .menu-actions { margin-top: var(--s-7); display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); }
.sh-drawer .menu-actions .btn { width: 100%; }

/* spaces-pricing anchor submenu — was styled as .topbar .submenu in app.css */
.site-header .submenu { background: #00072D; padding-top: .6rem; padding-bottom: .6rem; }
.site-header .submenu .menu a { color: #fff; }
.site-header .submenu .menu a.is-active { color: #03c1ac; }

@media (min-width: 901px) { .sh-drawer, .sh-drawer.open { display: none; } }

/* tablet: the WP menu labels are longer than the SSG ones — tighten gaps
   so the flat nav still fits on one line */
@media (min-width: 901px) and (max-width: 1199px) {
  .site-header .bar { gap: 20px; }
  .site-header .sh-navlist { gap: var(--s-4); }
  .site-header .header-cta { gap: var(--s-3); }
}
@media (max-width: 900px) {
  .site-header .bar { gap: var(--s-3); height: 60px; padding: 0 14px; }
  .sh-drawer { padding-left: 14px; padding-right: 14px; }
  .site-header .nav { display: none; }
  .site-header .logo img { height: 28px; }
  .site-header .header-cta { gap: var(--s-3); }
  /* lang stays visible left of the CTA (also in the drawer); padding for tap size */
  .site-header .header-cta > .lang { padding: 10px 6px; }
  .site-header .header-cta .btn { padding: 0 16px; font-size: 14px; height: 42px; }
  .site-header .menu-btn { display: flex; }
}