/* ==========================================================================
   Header / nav — scoped to .site-header, .menu-toggle, .fullscreen-menu
   ========================================================================== */

/* Always transparent, at every scroll position — no solid/blurred
   background switch. Once scrolled (assets/js/main.js toggles
   .is-scrolled), the logo and the email/phone fade out instead, leaving
   just the Contact button and menu icon over whatever's underneath. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
}

.site-header-inner {
  position: relative;
  width: 100%;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Horizontally centered on the header itself (not split evenly between
   the flex items either side), so the logo stays dead-center regardless
   of the left/right content being a different width. Full logo mark
   (assets/img/logo.png), pushed down slightly below dead-
   center rather than perfectly vertically centered on the header bar. */
.site-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -12%);
  animation: logo-fade-in 1.2s ease 0.2s backwards; /* backwards, not both, so the scrolled opacity:0 still wins afterwards */
  transition: opacity 0.6s ease;
}

@keyframes logo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* fades out once scrolled — only Contact + the menu icon remain */
.site-header.is-scrolled .site-logo {
  opacity: 0;
  pointer-events: none;
}

.site-logo-img {
  width: min(355px, 27vw);
  height: auto;
  filter: brightness(0) invert(1); /* white */
}

/* Below 900px the email/phone are hidden, so the logo has the header
   almost to itself — 30vw leaves it far too small there. The explicit
   width on the anchor matters: left:50% caps a shrink-wrapped absolute
   element at the space between its edge and the page edge (half the
   viewport), which was holding the logo back on phones. */
@media (max-width: 900px) {
  .site-logo { width: min(267px, 50vw); }
  .site-logo-img { width: 100%; }
}

/* Email / phone, left of the centered logo. Absolute-positioned logo
   means this just sits as the first item in the header's flex row.
   Fades out once scrolled, same as the logo. */
.site-header-contact {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: opacity 0.3s ease;
}
.site-header.is-scrolled .site-header-contact {
  opacity: 0;
  pointer-events: none;
}
.site-header-contact a {
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.site-header-contact a:hover { color: var(--prism-teal); }

.site-header-right {
  margin-left: auto; /* sticks to the right edge whether or not other content sits in the header */
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}

/* ---- menu icon — opens the full-screen menu, every breakpoint ---- */

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle-bar {
  display: block;
  height: 2px;
  background: var(--prism-band-text);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.25s ease;
}
.menu-toggle-bar:nth-child(1) { width: 26px; }
.menu-toggle-bar:nth-child(2) { width: 20px; }
.menu-toggle-bar:nth-child(3) { width: 26px; }
.menu-toggle:hover .menu-toggle-bar { width: 26px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bar { width: 26px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  /* the email/phone would crowd the centered logo below this width */
  .site-header-contact { display: none; }
}

/* ---- full-screen menu overlay ---- */

/* Sits inside the overlay (which paints above the header), in the exact
   same spot as the header's own icon, so closing it feels like clicking
   "the same" button rather than a different control appearing. Always
   drawn as an X — no need to track aria-expanded since it only exists
   while the menu is open. */
.fullscreen-menu-close {
  position: fixed;
  top: 28px;
  right: var(--gutter);
  z-index: 101;
}
.fullscreen-menu-close .menu-toggle-bar:nth-child(1) { width: 26px; transform: translateY(8px) rotate(45deg); }
.fullscreen-menu-close .menu-toggle-bar:nth-child(2) { opacity: 0; }
.fullscreen-menu-close .menu-toggle-bar:nth-child(3) { width: 26px; transform: translateY(-8px) rotate(-45deg); }

.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  /* liquid-glass: a translucent, heavily-blurred panel over whatever's
     behind it, rather than a flat solid fill */
  background: rgba(6, 6, 8, 0.8);
  backdrop-filter: blur(72px) saturate(160%);
  -webkit-backdrop-filter: blur(72px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  overflow-y: auto;
}
.fullscreen-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* subtle glass highlight — a soft diagonal sheen, not a flat tint */
.fullscreen-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* behind the in-flow topbar/inner content, within .fullscreen-menu's own stacking context */
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 45%),
    radial-gradient(ellipse 60% 40% at 85% 8%, rgba(81, 180, 213, 0.12) 0%, transparent 70%);
}

/* Close button, pinned to the top of the overlay regardless of
   how tall the nav list ends up (it can scroll independently below). */
.fullscreen-menu-topbar {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* no logo in the menu — just the close button */
  padding: 56px var(--gutter) 0;
}

/* Content block sits centered in whatever vertical space is left below
   the topbar — a percentage-based breathing margin above/below rather
   than being pinned to the top, at every viewport height. Falls back to
   the overlay's own scroll (see .fullscreen-menu) if content ever runs
   taller than the available space. */
.fullscreen-menu-inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(32px, 8vh, 96px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  align-content: center;
}

/* ---- nav list ---- */

.fullscreen-menu-nav {
  position: relative;
}

.fullscreen-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vw, 10px);
}

.fullscreen-menu-list a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1.25;
  color: var(--prism-band-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.fullscreen-menu-list a:hover,
.fullscreen-menu-list a:focus-visible {
  color: var(--prism-teal);
}

/* ---- right-hand info sidebar ---- */

.fullscreen-menu-side {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
  padding-top: 8px;
}

.fullscreen-menu-side-block {
  border-left: 1px solid var(--prism-band-line);
  padding-left: 20px;
}

.fullscreen-menu-side-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--prism-band-text);
  margin: 0 0 12px;
}

.fullscreen-menu-side-block address,
.fullscreen-menu-side-block a {
  display: block;
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  color: var(--prism-band-text-secondary);
  text-decoration: none;
}
.fullscreen-menu-side-block a:hover { color: var(--prism-teal); }

.fullscreen-menu-social {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fullscreen-menu-cta {
  align-self: flex-start;
  margin-top: 4px;
}

/* ---- bottom legal notice — same copy as the footer's, anchored to the
   bottom of the overlay so it reads as a fixed footnote rather than part
   of the centered nav block ---- */
.fullscreen-menu-notice {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid var(--prism-band-line);
}
.fullscreen-menu-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--prism-band-text-faint);
  max-width: 90ch;
}
.fullscreen-menu-notice strong { color: var(--prism-band-text-secondary); }

@media (max-width: 900px) {
  .fullscreen-menu-inner {
    grid-template-columns: 1fr;
    padding-top: 32px;
    align-content: start;
  }
  .fullscreen-menu-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(28px, 6vw, 56px);
    padding-top: 32px;
    border-top: 1px solid var(--prism-band-line);
  }
  .fullscreen-menu-cta { align-self: flex-start; }
}

@media (max-width: 640px) {
  .fullscreen-menu-topbar { padding: 20px 24px 0; }
  .fullscreen-menu-inner { padding: 32px 24px 48px; gap: 32px; }
  .fullscreen-menu-list { gap: 6px; }
  .fullscreen-menu-list a { font-size: clamp(26px, 9vw, 36px); }
  .fullscreen-menu-side { flex-direction: column; gap: 28px; }
  .fullscreen-menu-notice { padding: 16px 24px 24px; }
}

/* ---- Get in Touch button, right of the header (stays visible when scrolled) ---- */

.site-header-cta {
  background: transparent;
  color: var(--prism-band-text);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 10px 20px;
}
.site-header-cta:hover {
  border-color: var(--prism-teal);
  color: var(--prism-teal);
}

@media (max-width: 600px) {
  .site-header-cta { display: none; } /* the logo needs the room on phones; it's in the menu */
}