/* veloryn.css - shared nav/footer styles and design tokens */

/* Font: Grava Roman (wordmark only) */
@font-face {
  font-family: 'Grava Roman';
  src:
    local('Grava Roman'),
    url('../fonts/Grava%20Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shared token: subtle border (nav bottom, footer dividers) */
.border-subtle {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Nav links hover (desktop + mobile) */
.nav-link:hover {
  color: #1E5FFF !important;
}

/* Keyboard focus (accessibility) */
.nav-link:focus-visible,
.btn-get-started:focus-visible,
#mobile-menu-btn:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Get Started button hover: colour + subtle scale */
.btn-get-started {
  transition: background-color 0.25s ease-out, transform 0.25s ease-out;
}

.btn-get-started:hover {
  background-color: #4AA3FF !important;
  transform: scale(1.02);
}

/* Hamburger icon: 3 lines to X when open */
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cbd5e1;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#mobile-menu-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#mobile-menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

#mobile-menu-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu panel: max-height slide + opacity */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

#mobile-menu.open {
  max-height: 1000px;
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .btn-get-started,
  .hamburger-line,
  #mobile-menu {
    transition: none !important;
  }
}


/* ── Global hero text stroke ─────────────────────────────────
   2px navy outline on all hero headings and subtext.
   Applies via text-shadow to avoid distorting letterforms.
   Covers all four hero class naming patterns across the site.
   ─────────────────────────────────────────────────────────── */
.hero-headline,
.hero-sub,
.text-hero-text,
.text-hero-subtext,
.about-hero-heading,
.about-hero-subtext {
}