/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OMANIT — Brand Stylesheet
   Loaded on every page. Tailwind CDN handles utility classes.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ─── FONTS ─────────────────────────────────────────────────────────────────
   La Siesta is a two-in-one font in a single WOFF2 file:
     · Title case ("Omanit")  →  script / calligraphic glyphs
     · ALL CAPS ("OMANIT")    →  geometric caps glyphs

   Usage:
     .font-wordmark   →  written as "Omanit" in HTML  →  script mode
     .font-headline   →  text-transform: uppercase     →  caps mode

   Fraunces Light    →  pull-quotes, body copy, italic narrative moments
   Tenor Sans        →  labels, nav links, captions, all UI text
   ──────────────────────────────────────────────────────────────────────────*/

@font-face {
  font-family: 'La Siesta';
  src: url('../fonts/la-siesta-script.woff2') format('woff2'),
       url('../fonts/la-siesta-script.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ─── TYPOGRAPHY UTILITY CLASSES ─────────────────────────────────────────── */

/* OMANIT wordmark — nav / header only. Written "Omanit" → script glyphs. */
.font-wordmark {
  font-family: 'La Siesta', serif;
  font-weight: normal;
  letter-spacing: 0.02em;
}

/* All h1/h2/h3 headlines. text-transform: uppercase → caps glyphs. */
.font-headline {
  font-family: 'La Siesta', serif;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Pull-quotes, italic narrative moments, supporting body copy */
.font-fraunces {
  font-family: 'Fraunces', serif;
  font-weight: 300;
}

/* Labels, nav, captions — architectural sans */
.font-tenor {
  font-family: 'Tenor Sans', sans-serif;
}


/* ─── MATERIAL SYMBOLS ───────────────────────────────────────────────────── */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}


/* ─── MOBILE MENU ────────────────────────────────────────────────────────── */

#mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.menu-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}


/* ─── ACCORDION (FAQ) ────────────────────────────────────────────────────── */

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

details .icon-open  { display: none; }
details .icon-closed { display: block; }
details[open] .icon-open  { display: block; }
details[open] .icon-closed { display: none; }


/* ─── SCROLL INDICATOR ANIMATION ────────────────────────────────────────── */

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

.animate-bounce-gentle {
  animation: bounce-gentle 2.2s ease-in-out infinite;
}


/* ─── DESIGN SYSTEM RULES (from DESIGN.md) ──────────────────────────────── */

/*
  "The No-Line Rule": structural boundaries via background tonal shifts only.
  Ghost borders permitted at outline-variant (#C6C8B9) at ≤20% opacity only.
  100% opacity solid borders are strictly forbidden.

  Transitions: ease-in-out, 400–600ms. No "pop" animations.
  Shadows: 0px 20px 40px rgba(69, 72, 61, 0.06) only.
*/