/* ====== HERO SECTION ====== */

#hero {
  position: relative;
  width: 100%;
  background-color: var(--color-blue);
  overflow: hidden;
}

/* Top navigation bar — spans full width above the two-column layout */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 1.8vw, 28px) var(--site-gutter);
  color: var(--color-white);
}

.hero-nav__logo {
  display: block;
}

.hero-nav__logo img {
  height: 64px;
  width: auto;
}

.hero-nav__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

/* Plain text links — exclude the Contact button because it has
   its own padding/border treatment below. */
.hero-nav__links a:not(.hero-nav__contact-btn) {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  opacity: 0.95;
  transition: opacity 0.2s;
  /* Expand tappable area to WCAG 2.5.5 minimum (48px) without
     changing visible typography. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.15rem;
}

.hero-nav__links a:hover {
  opacity: 1;
}

.hero-nav__contact-btn {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  padding: 0.45em 1.4em;
  border: 1.5px solid var(--color-white);
  border-radius: 6px;
  background: transparent;
  color: var(--color-white);
  transition: background 0.2s, color 0.2s;
  /* Same tap-target minimum as the plain nav links, but keep
     the existing horizontal padding so the button stays wide. */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  box-sizing: border-box;
}

.hero-nav__contact-btn:hover {
  background: var(--color-white);
  color: var(--color-blue);
}

/* Current page nav indicator */
.hero-nav__links a.is-current {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Hamburger — hidden on desktop */
.hero-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  /* Guarantee 48x48 minimum tap area (WCAG 2.5.5) */
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
}

.hero-nav__hamburger span {
  display: block;
  width: 28px;
  height: 2.5px;
  background: var(--color-white);
  border-radius: 2px;
}

/* Two-column hero body: headline left, flow field right */
.hero-body {
  display: flex;
  align-items: stretch;
  padding: 0 var(--site-gutter);
}

/* Left column: headline in clear blue space */
.hero-content {
  flex: 0 0 35%;
  display: flex;
  align-items: center;
  padding-right: var(--space-lg);
}

.hero-headline {
  font-size: clamp(2.2rem, 3.5vw, 4.2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-headline-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes hero-headline-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.hero-headline__gap {
  display: block;
  height: 0.6em;
}

/* Right column: contained flow field block */
.hero-field-wrapper {
  flex: 0 0 65%;
  position: relative;
  padding: 2.5vw 0 5vw;
}

.flow-field-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  /* Above the sweet-spot width, stop growing taller and let the
     field extend wider with more grid columns instead. The flow
     field JS recalculates cols/rows from getBoundingClientRect. */
  max-height: 740px;
  background-color: var(--color-blue);
  overflow: hidden;
}

#flow-field-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ====== MOBILE: stack vertically ====== */
@media (max-width: 768px) {

  .hero-nav {
    padding: 6vw var(--site-gutter);
  }

  .hero-nav__logo img {
    height: 48px;
  }

  /* Hide desktop links, show hamburger */
  .hero-nav__links {
    display: none;
  }

  .hero-nav__hamburger {
    display: flex;
  }

  /* Stack: headline on top, flow field below */
  .hero-body {
    flex-direction: column;
  }

  .hero-content {
    flex: none;
    padding-right: 0;
    padding-top: 6vw;
    padding-bottom: 3vw;
  }

  .hero-headline {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
  }

  .hero-field-wrapper {
    flex: none;
    padding: 0 0 4vw;
  }

  .flow-field-container {
    aspect-ratio: 1.1 / 1;
  }
}

/* ====== MOBILE MENU OVERLAY ====== */

.mobile-menu {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-blue);
  z-index: 900;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__links li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open .mobile-menu__links li {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu__links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(2) { transition-delay: 0.17s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(3) { transition-delay: 0.24s; }

.mobile-menu__links {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.mobile-menu__links a {
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  opacity: 0.9;
  transition: opacity 0.2s;
  /* Guarantee 48px minimum tap target + extra block padding so
     adjacent links can never be mis-tapped. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0.25em 0.75em;
}

.mobile-menu__links a:hover {
  opacity: 1;
}

.mobile-menu__links a.is-current {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Hamburger → X animation when menu is open */
.hero-nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.hero-nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.hero-nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.hero-nav__hamburger span {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Keep hamburger above the overlay */
.hero-nav {
  position: relative;
  z-index: 950;
}

/* ====== NAV-ONLY SECTION (explorer/utility pages with no hero content) ====== */

.section--nav-only {
  background-color: var(--color-blue);
  min-height: auto;
}

/* Base .hero-nav has padding-bottom: 0 because pages with a hero body
   don't need it. On nav-only pages there is nothing below the nav inside
   the blue strip, so the blue band would otherwise cut off flush with
   the bottom of the logo. Mirror the existing top padding. */
.section--nav-only .hero-nav {
  padding-bottom: clamp(14px, 1.8vw, 28px);
}

@media (max-width: 768px) {
  .section--nav-only .hero-nav {
    padding-bottom: 6vw;
  }
}

/* ====== SCROLL-UP NAV REVEAL (desktop only) ====== */

.hero-nav--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(20, 54, 188, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-bottom: clamp(10px, 1.2vw, 18px);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 950;
  will-change: transform;
}

.hero-nav--fixed.hero-nav--visible {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .hero-nav--fixed {
    position: relative;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ====== DEV CONTROLS (hidden by default) ====== */

#flow-field-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

#flow-field-controls.hidden {
  display: none;
}

.controls-panel {
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 16px;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  min-width: 240px;
  backdrop-filter: blur(10px);
}

.controls-panel h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 8px;
}

.control-group {
  margin-bottom: 12px;
}

.control-group label {
  display: block;
  margin-bottom: 4px;
  opacity: 0.8;
}

.control-group select,
.control-group input[type="range"] {
  width: 100%;
}

.control-group select {
  padding: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}

.control-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.control-actions button {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
}

#btn-export {
  background: #4CAF50;
  color: white;
}

#btn-reset {
  background: rgba(255,255,255,0.2);
  color: white;
}