/****************************************************************************************
 * styles/main.css — Apple-inspired design + typography tweaks
 *
 * • Preserves all original Apple-style resets, typography, layout, and lightbox logic.
 * • ★ MOVED from inline in index.html: overlay/hero/animations/responsive overrides.
 * • ★ No visual/behavioral changes; just centralized CSS for caching & maintainability.
 ****************************************************************************************/

/* ───────── Root variables ───────── */
:root {
  --primary-color: #000;
  --accent-color: #0071e3;            /* Overridden by JS per season */
  --bg-light: #fff;
  --text-color: #1d1d1f;
  --section-bg: #f5f5f7;
  --transition-speed: 0.25s;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Apple Typography Vars */
  --apple-body-size: 17px;
  --apple-body-line: 1.47059;
  --apple-body-tracking: -0.022em;
  --apple-heading-2-size: 28px;
  --apple-heading-2-line: 1.21;
  --apple-heading-2-tracking: -0.022em;

  /* Hero motion (set by JS from video duration) */
  --pulse-duration: 30s;
}

/* ───────── Reset & Base ───────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-family);
  font-size: var(--apple-body-size);
  line-height: var(--apple-body-line);
  letter-spacing: var(--apple-body-tracking);
  background: var(--bg-light);
  color: var(--text-color);
  overflow-x: hidden;
}

/* Global link color (nav overrides below) */
a { color: var(--accent-color); text-decoration: none; transition: color var(--transition-speed); }
a:hover { color: var(--primary-color); }

/* ───────── Header & Nav ───────── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; background: var(--bg-light);
  border-bottom: 1px solid #d1d1d6;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.logo { display: flex; align-items: center; }
.logo-img { max-height: 40px; width: auto; margin-right: 0.75rem; }
.logo a { font-size: 20px; font-weight: 600; letter-spacing: var(--apple-body-tracking); color: var(--text-color); }

/* NAV OVERRIDE: default dark, accent on hover/active */
.site-nav ul { list-style: none; display: flex; gap: 2rem; }
.site-nav a {
  color: #333; font-size: 1rem; font-weight: 500; position: relative; padding: .5rem 0;
  transition: color var(--transition-speed);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -.25rem; width: 0; height: 2px;
  background: var(--accent-color); transition: width var(--transition-speed) ease-in-out;
}
.site-nav a:hover, .site-nav a.active { color: var(--accent-color); }
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }

/* ───────── Layout / Cards ───────── */
.container { max-width: 980px; margin: 0 auto; padding: 2rem 1rem; }
section {
  margin-bottom: 3rem; padding: 2rem; background: var(--section-bg);
  border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.booking, .updates, .about, .contact, .note {
  background: var(--bg-light); padding: 1.5rem; border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* Highlight callouts */
.callout {
  display: block; margin: 0.5em 0; padding: 0.5em 0.75em;
  background-color: #fff7c0; border-left: 4px solid #f5b700; border-radius: 3px; font-weight: 600;
}

/* Small fixes */
#schedule-service ul { margin-top: 4px; margin-bottom: 12px; }

/* ───────── Headings & Text ───────── */

/* ★ ADDED (Deprecation fix): give <h1> a uniform base size so its size is NOT inferred
   from sectioning context (article/aside/nav/section). This prevents the “deprecated API”
   warning and stabilizes Best Practices. Hero’s specific override remains below. */
h1 {
  font-size: 2.25rem;              /* ≈36px on 16px root */
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--apple-heading-2-tracking);
}

h2 {
  font-size: var(--apple-heading-2-size);
  line-height: var(--apple-heading-2-line);
  letter-spacing: var(--apple-heading-2-tracking);
  font-weight: 600;
  margin-bottom: 1rem;
}
h3 { font-size: 1.25rem; font-weight: 500; margin-top: 1.5rem; }
p, li { margin-bottom: 12px; }

/* Lists */
ul { list-style: none; }
ul.facts-list li { display: flex; align-items: flex-start; }
ul.facts-list li + li { margin-top: .75rem; }
ul.facts-list li::before { content: "•"; color: var(--accent-color); margin-right: .5rem; }

/* Footer */
footer {
  text-align: center; padding: 2rem 0; font-size: .875rem; color: #6e6e73;
  background: var(--bg-light); border-top: 1px solid #d1d1d6;
}

/* ───────── Lightbox (StringLab) ───────── */
#stringlab-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 1rem 0; }
@supports (overscroll-behavior-x: contain) { #stringlab-carousel { overscroll-behavior-x: contain; } }
#stringlab-carousel .carousel-item { flex: 0 0 auto; scroll-snap-align: start; }
#stringlab-carousel img { display: block; height: 160px; border-radius: 4px; object-fit: cover; cursor: pointer; }
#lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 1000; overflow: hidden; }
#lightbox-overlay.visible { display: flex; }
.lightbox-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-content img { width: auto; height: auto; max-width: 100vw; max-height: 100vh; object-fit: contain; border-radius: 4px; }
.lightbox-close,.lightbox-prev,.lightbox-next {
  position: absolute; background: rgba(0,0,0,0.5); color: #fff; border: none; padding: .5rem .8rem;
  font-size: 1.4rem; cursor: pointer; border-radius: 4px;
}
.lightbox-close { top: 10px; right: 10px; }
.lightbox-prev  { top: 50%; left: 10px; transform: translateY(-50%); }
.lightbox-next  { top: 50%; right: 10px; transform: translateY(-50%); }

/* Mobile lightbox fallback */
@media (max-width: 768px) {
  #lightbox-overlay { display: none !important; }
  #stringlab-carousel img { cursor: default; pointer-events: none; }
}

/* Accessibility helper */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ───────── MOVED from inline: Overlay + Hero + Animations ───────── */

/* 1) Hide hero until overlay completes */
.hero { visibility: hidden; }
.hero.show { visibility: visible; }

/* 2) Full-screen intro overlay: flow→shrink→grow (9s total) */
#introOverlay {
  position: fixed; top:0; left:0; width:100vw; height:100vh;
  background:#000; overflow:hidden; z-index:2000;
  clip-path: circle(150% at 50% 50%);
  animation: intro-flow 7s ease-in-out forwards;
}
@keyframes intro-flow {
  0%,50% { clip-path: circle(150% at 50% 50%); opacity:1; }
  77%,80% { clip-path: circle(8px at 50% 50%); opacity:1; }
  100% { clip-path: circle(150% at 50% 50%); opacity:0; }
}

/* 3) Accent-colored 3D dot pop */
#introOverlay::after {
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-color), #000);
  top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  opacity:0; animation: dot-pop 9s ease-in-out forwards;
}
@keyframes dot-pop {
  0%,76% { transform:translate(-50%,-50%) scale(0); opacity:0; }
  77%,80% { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) scale(150); opacity:0; }
}

/* 4) Intro video cover */
#introOverlay video { width:100vw; height:100vh; object-fit:cover; }

/* 5) Overlay text block & drift */
#introOverlay .introText {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; animation: blockSlideUp 4.5s linear forwards;
}
@keyframes blockSlideUp { from{transform:translateY(0);} to{transform:translateY(-96px);} }

/* 6) Staggered reveals */
#introOverlay .introText .line1,
#introOverlay .introText .line2,
#introOverlay .introText .phrase1,
#introOverlay .introText .phrase2 { opacity:0; transform:translateY(20px); display:inline-block; }
.line1   { animation: fadeUp .8s ease-out  .5s   forwards; }
.line2   { animation: fadeUp .8s ease-out  1.625s forwards; }
.phrase1 { animation: fadeUp .8s ease-out  2.75s forwards; }
.phrase2 { animation: fadeUp .8s ease-out  3.875s forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* 7) Hero video container */
.hero {
  position:relative; overflow:hidden; height:65vh; max-height:680px; margin-bottom:2rem; border-radius:16px;
}
.hero video {
  position:absolute; top:50%; left:50%; min-width:100%; min-height:100%;
  transform:translate(-50%,-50%); object-fit:cover; z-index:0;
}

/* 8) Hero content + pulse */
.hero-content {
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; padding:0 1.5rem; text-align:center; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.6); transform-origin:center;
  animation: hero-pulse var(--pulse-duration) ease-in-out infinite;
}
@keyframes hero-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.02); } }

/* 9) Scroll-triggered fade-ins */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .6s ease-out, transform .6s ease-out; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* 10) Dynamic accents for buttons & nav underline */
.btn-primary {
  display:inline-block; padding:0.9rem 2.2rem; border-radius:32px; font-size:1rem; font-weight:600; color:#fff;
  background:var(--btn-accent); transition:transform .2s, filter .2s;
}
.btn-primary:hover { transform:scale(1.05); filter:brightness(1.1); }

/* ───────── MOVED from inline: Responsive overrides ───────── */

/* Hero H1 size */
section.hero .hero-content > h1 { font-size: 3.5rem; line-height: 1.1; }
/* Hero subheading (paragraph) */
section.hero .hero-content > p { font-size: 1.45rem; max-width: 75%; line-height: 1.4; }

/* Intro overlay text sizes */
#introOverlay .introText h2.line1,
#introOverlay .introText h2.line2 { font-size: 3.4rem; }
#introOverlay .introText p.phrase1,
#introOverlay .introText p.phrase2 { font-size: 1.9rem; }

/* Breakpoints */
@media (max-width: 768px) {
  .site-header { flex-direction: column; gap: 1rem; }
  .site-nav ul { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .site-nav a { font-size: .95rem; }

  .hero { height: 60vh; }
  section.hero .hero-content > h1 { font-size: 2.55rem; }
  section.hero .hero-content > p { font-size: 1rem; }

  #introOverlay .introText h2.line1,
  #introOverlay .introText h2.line2 { font-size: 2.6rem; }
  #introOverlay .introText p.phrase1,
  #introOverlay .introText p.phrase2 { font-size: 1rem; }

  /* ★ ADDED (Deprecation fix mobile): ensure base <h1> also has explicit size on small screens */
  h1 { font-size: 1.75rem; }
}