/* =========================================================
   Zoi Salon — Theme Tokens
   Change CSS variables below to re-theme the whole site.
   ========================================================= */
:root {
  /* Brand colours */
  --color-primary:        #800020;
  --color-primary-light:  #9B1B30;
  --color-primary-dark:   #6B0F2A;
  --color-primary-50:     #FDF2F4;
  --color-primary-100:    #F9E0E5;

  --color-secondary:       #D4AF37;
  --color-secondary-light: #F5E6A3;
  --color-secondary-dark:  #C5A028;
  --color-secondary-50:    #FBF6E3;
  --color-secondary-100:   #F5E9B8;

  /* Surfaces */
  --color-bg:        #FFFFFF;
  --color-bg-alt:    #F9F6F2;
  --color-bg-deep:   #1A0A10;
  --color-text:      #1F1A1D;
  --color-text-muted:#6B6169;
  --color-border:    #EAE3DC;

  /* Type */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Section-level font-sizes (re-theme easily) */
  --fs-display: clamp(2.75rem, 6vw + 0.5rem, 6.25rem); /* hero display */
  --fs-h1:      clamp(2rem,   3.4vw + 1rem, 3.5rem);
  --fs-h2:      clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
  --fs-h3:      clamp(1.125rem, 0.6vw + 0.9rem, 1.5rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
}

html.dark {
  --color-bg:       #0F0609;
  --color-bg-alt:   #1A0E13;
  --color-bg-deep:  #000000;
  --color-text:     #F6EFE6;
  --color-text-muted:#B8ADA3;
  --color-border:   #2A1A21;
  --color-primary-50: #2A0810;
  --color-primary-100:#3A1220;
  --color-secondary-50:#2A2510;
  --color-secondary-100:#3A3418;
}

* { box-sizing: border-box; }
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  /* Prevent accidental horizontal scrolling on mobile from decorative offset elements */
  overflow-x: clip;
  max-width: 100%;
}
body { font-family: var(--font-body); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; }

/* Defensive image sizing (Tailwind preflight also sets this, but be explicit) */
img, video, iframe, svg { max-width: 100%; }

h1,h2,h3,h4,h5 { font-family: var(--font-heading); letter-spacing: -0.01em; color: var(--color-text); }
h1 { font-size: var(--fs-h1); line-height: 1.05; font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

.display { font-family: var(--font-heading); font-size: var(--fs-display); line-height: 0.95; font-weight: 800; letter-spacing: -0.03em; }

/* Utility colour helpers that bind to vars */
.bg-surface     { background: var(--color-bg); }
.bg-surface-alt { background: var(--color-bg-alt); }
.bg-deep        { background: var(--color-bg-deep); color: var(--color-secondary-light); }
.text-brand     { color: var(--color-primary); }
.text-gold      { color: var(--color-secondary); }
.border-brand   { border-color: var(--color-primary); }
.border-soft    { border-color: var(--color-border); }
.muted          { color: var(--color-text-muted); }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 14px;
}
.bento > .cell {
  position: relative;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 28px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.bento > .cell:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(128,0,32,.18); border-color: var(--color-primary); }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > .cell { padding: 22px; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento > .cell { grid-column: auto !important; grid-row: auto !important; min-height: 200px; padding: 20px; }
}

/* Editorial marquee / headline */
.editorial-rule {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.08), transparent);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: all .25s var(--ease);
  border: 1px solid transparent;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-outline { border-color: var(--color-text); color: var(--color-text); }
.btn-outline:hover { background: var(--color-text); color: var(--color-bg); }
.btn-gold { background: var(--color-secondary); color: #1a1a1a; }
.btn-gold:hover { background: var(--color-secondary-dark); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1EB851; transform: translateY(-1px); }

/* Placeholder image overlay for dummy images */
.img-ph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-secondary-50));
  border: 1px dashed var(--color-border);
  border-radius: inherit;
}
.img-ph::after {
  content: attr(data-dim);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-dark);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .55;
}

/* Accordion */
details.faq {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
}
details.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; font-size: 1.05rem;
  color: var(--color-text);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] summary svg { transform: rotate(45deg); }
details.faq summary svg { transition: transform .3s var(--ease); color: var(--color-primary); }
details.faq .answer { color: var(--color-text-muted); padding-top: .75rem; font-size: .98rem; line-height: 1.6; }

/* Scrollbars mild */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Section sizing */
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.container-x { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 1024px) { .container-x { padding-inline: 2rem; } }

/* Footer */
footer a:hover { color: var(--color-secondary); }

/* Floating WhatsApp */
.float-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -10px rgba(37,211,102,.55);
  transition: transform .25s var(--ease);
}
.float-wa:hover { transform: scale(1.08); }

/* Marquee */
.marquee-track { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 28s linear infinite; width: max-content; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   Mobile safety net — fixes horizontal scroll on small screens
   ========================================================= */
@media (max-width: 1023px) {
  /*
     Tailwind "grid-cols-12 gap-10" creates 11 column gaps of 40px = 440px of
     minimum width from gaps alone, which is wider than a 375px mobile viewport.
     On mobile, children are almost always col-span-12 (stacked), so column gaps
     are not visible anyway — reduce them to 0 and keep row gaps for spacing.
  */
  .grid.grid-cols-12 { column-gap: 0 !important; }
}

@media (max-width: 640px) {
  /* Prevent long word / heading from pushing layout */
  h1, h2, h3, .display { overflow-wrap: anywhere; word-break: break-word; }

  /* Ease extreme letter-spacing on narrow screens (kicker labels) */
  .tracking-\[\.35em\] { letter-spacing: 0.18em; }

  /* Keep the offset hero stat card inside viewport on mobile */
  .absolute.-left-4 {
    left: 8px !important;
    right: auto;
    max-width: calc(100vw - 32px);
  }

  /* Make any w-[250px] decorative card flexible on narrow screens */
  .w-\[250px\] { max-width: calc(100vw - 40px); }

  /* Slightly tighter section padding on mobile */
  .section { padding-block: clamp(2.5rem, 8vw, 4.5rem); }

  /* Form / input safety — prevent inputs from overflowing their grid cell */
  input, textarea, select { max-width: 100%; }

  /* Trim very-wide container padding to reclaim usable width */
  .container-x { padding-inline: 1rem; }

  /* Tighten row gaps on big grids */
  .grid.grid-cols-12 { row-gap: 1.75rem; }
}

/* =========================================================
   Dark-mode overrides — ensure logo + marquee stay readable
   ========================================================= */

/* Swap the logo for a light-text variant whenever it sits on a dark
   surface. The base SVG uses fill="currentColor" for the "Zoi" text +
   subtitle, which doesn't inherit from the surrounding <img> element,
   so the text renders black. Swap to a pre-coloured variant via CSS
   `content:` replacement — covers dark-mode header AND the always-dark
   footer in both themes. */
html.dark img[src$="zoi-salon-logo.svg"],
html.dark img[src$="/zoi-salon-logo.svg"],
footer img[src$="zoi-salon-logo.svg"],
footer img[src$="/zoi-salon-logo.svg"] {
  content: url('../images/zoi-salon-logo-dark.svg');
}

/* The hero marquee uses .text-brand (burgundy #800020) which has very
   low contrast against the dark background. Switch to the gold secondary
   colour in dark mode so the banner remains legible. */
html.dark .editorial-rule .marquee-track,
html.dark .marquee-track { color: var(--color-secondary); }