/* TimeBuilt Solutions -- shared chrome: skip link, header, footer, focus,
   page transitions. Depends on tokens.css. */

/* ---------- Skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--bg); color: var(--accent-200);
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0; box-shadow: var(--shadow-sm);
}
.skip:focus-visible { left: 0; }

/* ---------- Header (design handoff; spec revised 2026-09-18) ----------
   Never a solid bar. On the homepage it sits over the hero photo, which runs
   to the very top of the viewport; once the hero has scrolled past, a
   gradient scrim appears behind it -- no fill, no border. Pages without a
   hero get the scrim from the top. js/site-head.js measures --head-h and
   sets .is-scrim / .is-hidden. */
:root { --head-h: 84px; } /* fallback until js/site-head.js measures it */
.site-head {
  position: sticky; top: 0; z-index: 20;
  transition: transform var(--dur-header) var(--ease);
}
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,24,38,.92), rgba(22,24,38,.72) 62%, rgba(22,24,38,0));
  opacity: 0; transition: opacity 260ms ease;
}
.site-head.is-scrim::before,
body:not(.has-hero) .site-head::before { opacity: 1; }
.site-head.is-hidden { transform: translateY(-104%); }
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head::before { transition: none; }
}
.has-hero .site-head { margin-bottom: calc(-1 * var(--head-h)); }
.site-head-inner {
  max-width: var(--page); margin: 0 auto; padding: 16px var(--gut);
  display: flex; align-items: center; gap: 24px;
}
.site-head .brand { display: block; flex-shrink: 0; }
.site-head .brand img { display: block; height: 52px; width: auto; max-width: none; filter: brightness(0) invert(1); }
.mainnav { display: flex; gap: 22px; margin-left: auto; }
.mainnav a {
  color: var(--text); font-size: 14.5px; padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.mainnav a:hover { color: var(--accent-300); border-bottom-color: var(--n-700); }
.mainnav a[aria-current="page"] { color: var(--accent-300); border-bottom-color: var(--accent); }
.head-phone {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1px solid var(--accent); color: var(--accent-300); background: transparent;
  padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.head-phone:hover { background: var(--accent-900); color: var(--accent-200); }
@media (max-width: 900px) {
  .site-head-inner { flex-wrap: wrap; gap: 16px; }
  .site-head .brand img { height: 44px; }
  .mainnav { flex-wrap: wrap; margin-left: 0; gap: 18px; }
}

/* The site has no footer (Matt, 2026-09-18: "none of that is needed").
   The privacy policy is linked under every form instead, where people
   hand over their details. */
.form-privacy { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--n-500); text-align: center; }
.form-privacy a { color: var(--accent-300); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Focus ----------
   Every interactive element: 2px --accent-200 outline, 3px offset. */
.site-head :where(a, button):focus-visible,
.skip:focus-visible { outline: 2px solid var(--accent-200); outline-offset: 3px; border-radius: 4px; }

/* ---------- Page transitions ----------
   Progressive enhancement: browsers without cross-document view transitions
   just navigate. Header and footer keep their place between pages. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }
.site-head { view-transition-name: sitehead; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .site-head, .skip { display: none !important; }
}