/* ==========================================================================
   LOAD IT UP — Custom styles
   loaditupmenu.com

   Tailwind handles layout/spacing/colour utilities inside the HTML.
   This file only holds the things Tailwind can't do cleanly:
     1. Base typography defaults
     2. Brand text/graphic effects (neon glow, splatter divider)
     3. Sticky nav + mobile menu behaviour
     4. Scroll-reveal animations
     5. Gallery lightbox
     6. Accessibility & print helpers
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
:root {
  --lime: #b4ff39;
  --flame: #ff7a18;
  --char-900: #0e0c0a;
  --nav-h: 72px; /* height of the sticky header — used for scroll offsets */
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* Stops anchor links hiding section titles under the sticky nav */
  scroll-padding-top: var(--nav-h);
}

body {
  background-color: var(--char-900);
  color: #f7f3ec;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Prevent background scrolling while the mobile menu is open */
body.nav-open {
  overflow: hidden;
}

/* Display headings: tighten and add the slight lean seen in the logo */
h1,
h2,
h3,
.font-display {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. BRAND EFFECTS
   -------------------------------------------------------------------------- */

/* Lime/orange gradient text — used on key headline words */
.text-gradient-brand {
  background: linear-gradient(100deg, var(--lime) 0%, #d8ff7a 40%, var(--flame) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle neon halo behind display text */
.glow-lime {
  text-shadow: 0 0 18px rgba(180, 255, 57, 0.45), 0 0 46px rgba(180, 255, 57, 0.18);
}
.glow-flame {
  text-shadow: 0 0 18px rgba(255, 122, 24, 0.45), 0 0 46px rgba(255, 122, 24, 0.18);
}

/* Charcoal card with a warm hairline border and lime hover lift */
.card {
  background: linear-gradient(160deg, #16130f 0%, #100e0b 100%);
  border: 1px solid #332c22;
  border-radius: 1rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(180, 255, 57, 0.55);
  box-shadow: 0 18px 42px -18px rgba(180, 255, 57, 0.28);
}

/* Primary CTA — solid lime */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: 9999px;
  background: var(--lime);
  color: #0e0c0a;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn-primary:hover {
  background: #c6ff62;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(180, 255, 57, 0.6);
}

/* Secondary CTA — outlined orange */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: 9999px;
  border: 2px solid var(--flame);
  color: var(--flame);
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.btn-secondary:hover {
  background: var(--flame);
  color: #0e0c0a;
  transform: translateY(-2px);
}

/* Paint-splatter style section divider */
.splatter-divider {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--lime) 18%, var(--flame) 82%, transparent);
  opacity: 0.65;
}

/* Numbered step badge used in "Build Your Way" */
.step-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid var(--lime);
  color: var(--lime);
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.375rem;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION
   -------------------------------------------------------------------------- */

/* Transparent at the top of the page, frosted charcoal once scrolled */
.site-header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.scrolled {
  background-color: rgba(8, 7, 6, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 0 #332c22, 0 14px 34px -22px rgba(0, 0, 0, 0.9);
}

/* Animated lime underline on desktop nav links */
.nav-link {
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: width 0.28s ease;
}
.nav-link:hover::after,
.nav-link[aria-current='page']::after {
  width: 100%;
}
.nav-link[aria-current='page'] {
  color: var(--lime);
}

/* Hamburger → X animation */
.hamburger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #f7f3ec;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.hamburger span + span {
  margin-top: 6px;
}
.hamburger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.hamburger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Slide-down mobile panel */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mobile-nav.open {
  max-height: 26rem;
}

/* --------------------------------------------------------------------------
   4. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger helpers — add to siblings for a cascading reveal */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* --------------------------------------------------------------------------
   5. GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.gallery-item:hover img {
  transform: scale(1.05);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8, 7, 6, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox.open {
  display: grid;
}
.lightbox img {
  max-width: min(100%, 1000px);
  max-height: 88vh;
  border-radius: 0.75rem;
  border: 1px solid #332c22;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY & PRINT
   -------------------------------------------------------------------------- */

/* Visible keyboard focus ring on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Screen-reader-only text is provided by Tailwind's own .sr-only /
   .not-sr-only utilities — no custom override here, so the skip link
   can reveal itself on focus. */

/* Respect "reduce motion" OS setting */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Clean printed menus */
@media print {
  .site-header,
  .mobile-nav,
  .lightbox,
  footer,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    break-inside: avoid;
  }
}