/* Badminton School Barendrecht — stylesheet
   Supplements the offline-built Tailwind CSS (css/tailwind.css, see
   tailwind.config.js) with the bespoke effects Tailwind utilities can't
   express on their own: the shrinking nav, the hero photo overlay,
   card hover-lift, the trust-bar hover states, scroll-reveal, the FAQ
   accordion, the mobile menu animation and the cookie banner. */

:root {
  --brand-cyan: #67e8f9;
  --brand-blue: #2563eb;
  --brand-grad: linear-gradient(100deg, var(--brand-cyan), var(--brand-blue));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #050b16; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .font-oswald { font-family: 'Oswald', sans-serif; }

/* ---------- shared theme gradient ---------- */
.theme-grad { background-image: var(--brand-grad); }
.theme-grad-text {
  background-image: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- sticky nav shrink (with hysteresis to avoid jitter) ---------- */
.nav-outer { transition: padding .35s ease; }
.nav-outer.scrolled { padding-top: 8px !important; }
.nav-inner-box { transition: max-width .35s ease, background .35s ease, box-shadow .35s ease; }
.nav-outer.scrolled .nav-inner-box {
  max-width: 880px;
  background: rgba(6, 13, 25, 0.92);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}
.nav-pad { transition: padding .35s ease; }
.nav-outer.scrolled .nav-pad { padding-top: 9px !important; padding-bottom: 9px !important; }
.nav-logo-img { height: 58px; width: auto; transition: height .35s ease; }
.nav-outer.scrolled .nav-logo-img { height: 36px; }
.nav-cta-pad { transition: padding .35s ease, font-size .35s ease; }
.nav-outer.scrolled .nav-cta-pad { padding: 8px 16px !important; font-size: 13px !important; }

/* ---------- hero background photo with overlay ---------- */
/* Fixed nav no longer reserves flow space, so the hero starts at the
   true top of the viewport. On the homepage the hero is sized to
   exactly fill the first screen (min-height 100dvh with a vh fallback
   for older browsers), so the trust bar underneath lands flush with
   the bottom edge and is fully readable before the visitor scrolls. */
.hero-shell { min-height: 100vh; min-height: 100dvh; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(4,9,18,0.55) 0%, rgba(5,10,20,0.30) 32%, rgba(5,11,22,0.36) 66%, rgba(4,9,18,0.86) 100%),
    linear-gradient(90deg, rgba(4,9,18,0.55) 0%, rgba(4,9,18,0.08) 46%, rgba(4,9,18,0.02) 70%),
    url('../assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center 65%;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(4,9,18,0.82) 0%, rgba(5,10,20,0.72) 100%),
    url('../assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
}
/* Hero photo: a very subtle native parallax (free — no scroll JS needed).
   Disabled on touch/small screens where fixed backgrounds can jank. */
@media (min-width: 901px) and (hover: hover) {
  .hero-bg { background-attachment: fixed; }
}

/* ---------- hero logo (in-flow, centered, above text) ---------- */
/* One consolidated rule (previously split across three places in this
   file with no visual difference — merged here for clarity only). */
.hero-logo-wrap { width: 100%; }
.hero-logo-wrap img {
  display: block;
  width: clamp(250px, 22vw, 340px);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,0.5));
  animation: floatLogo 6s ease-in-out infinite; /* gentle continuous float */
}
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (max-width: 900px) { .hero-logo-wrap img { width: 210px; } }
@media (max-width: 420px) {
  .hero-logo-wrap img { width: min(210px, 68vw); }
  .hero-logo-wrap { margin-bottom: 16px; }
  .hero-logo-wrap + div { max-width: 100%; }
  .hero-logo-wrap + div > div:last-child { max-width: 100%; }
  .hero-logo-wrap + div > div:last-child > a { max-width: 100%; }
}

/* ---------- CTA buttons: hover ring + subtle lift (shuttle animation removed) ---------- */
.btn-fly {
  position: relative;
  border: 0;
  box-sizing: border-box;
  max-width: 100%;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.btn-fly:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.12);
}
/* the trailing chevron nudges right on hover — a light, cheap replacement for the old animation */
.btn-fly .btn-arrow-icon { display: inline-flex; transition: transform .25s ease; }
.btn-fly:hover .btn-arrow-icon { transform: translateX(4px); }
/* CTA pixel-edge fix: gradient buttons must not inherit a transparent/hover border. */
.btn-fly:not(.theme-grad) { border: 1px solid rgba(255,255,255,0.20); }
.btn-fly:not(.theme-grad):hover { border-color: rgba(255,255,255,0.55); }
.btn-fly:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; }

/* ---------- translucent trust bar with diagonal separators ---------- */
.trust-item { position: relative; cursor: default; }
.trust-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0; top: 14%; bottom: 14%;
  width: 1px;
  background: rgba(255,255,255,0.28);
  transform: skewX(-14deg);
}
.trust-item h3 { transition: color .25s ease; }
.trust-item:hover h3 { color: var(--brand-cyan); }
.trust-item .trust-icon { transition: border-color .25s ease, background .25s ease, color .25s ease; }
.trust-item:hover .trust-icon { border-color: var(--brand-cyan); background: rgba(34,211,238,0.16); color: var(--brand-cyan); }
@media (max-width: 900px) {
  .trust-item:not(:first-child)::before { display: none; }
  .trust-item:not(:first-child) { border-top: 1px solid rgba(255,255,255,0.16); }
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }

/* ---------- FAQ chevron ---------- */
.faq-toggle[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .25s ease; }
.faq-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }

/* ---------- gallery masonry ---------- */
.masonry { column-count: 1; column-gap: 16px; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry > div { break-inside: avoid; margin-bottom: 16px; }

/* =========================================================
   Extra polish animations — kept deliberately light:
   pure CSS, no extra libraries, no added network requests.
   ========================================================= */

/* Card hover-lift: subtle rise + soft glow on cards throughout the page */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hover-lift:hover {
  transform: translateY(-5px);
  border-color: rgba(103,232,249,0.35);
  box-shadow: 0 20px 40px -20px rgba(34,211,238,0.35);
}

/* Gallery photos: gentle zoom on hover, clipped by the rounded wrapper */
.gallery-img { overflow: hidden; }
.gallery-img img { transition: transform .6s ease; }
.gallery-img:hover img { transform: scale(1.06); }

/* Small text links with a trailing arrow: nudge the arrow on hover */
.link-arrow svg { transition: transform .25s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* Nav links: underline that slides in from the left on hover */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: var(--brand-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Anchor targets stay clear of the sticky header. */
[id] { scroll-margin-top: 110px; }

/* ---------- mobile menu: light open/close animation (pure CSS, no JS animation cost) ---------- */
.mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height .32s ease, opacity .22s ease, padding-bottom .32s ease;
}
.mobile-menu.is-open { max-height: 420px; opacity: 1; padding-bottom: 16px; }
.nav-toggle svg { transition: transform .25s ease; }
.nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(6,13,25,0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.12);
  transform: translateY(100%);
  transition: transform .4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 320px; font-size: 13.5px; line-height: 1.6; color: #c4d3e3; margin: 0; }
.cookie-banner-text a { color: var(--brand-cyan); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-btn {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .2s ease, border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.cookie-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.25); color: #f4f8fb; }
.cookie-btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.cookie-btn-primary { background-image: var(--brand-grad); color: #04121f; }
.cookie-btn-primary:hover { filter: brightness(1.08); }

/* ---------- reduced motion: one consolidated rule for the whole file ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cookie-banner { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}