/* ==========================================================================
   Topaz Art Academy — base.css
   Design tokens, reset, type system, image system, motion utilities
   Style carried over from the MD Glow Skin template; palette rebranded
   to the Topaz identity (muted teal + topaz gold + ink).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette — Topaz Art Academy */
  --bg-light: #EDEBE4;        /* warm gallery plaster — header/benefits/gallery */
  --bg-lighter: #F5F3ED;      /* achievements/testimonials — slightly brighter */
  --bg-philosophy: #17242A;   /* very dark teal — dark sections */
  --bg-footer: #0F2830;       /* deep teal — footer */
  --bg-contact: #D8D5C9;      /* warm greige — booking + contact */

  --ink: #1E2A2E;             /* deep teal-charcoal (headings, body) */
  --hero-title-ink: #172125;  /* hero title — user's supplied color swatch */
  --ink-soft: #5C6660;        /* gray-teal body copy */
  --ink-faint: #93998F;       /* muted labels */
  --cream: #F4F0E8;           /* off-white text on dark */
  --cream-soft: rgba(244, 240, 232, 0.62);

  --teal: #558891;            /* brand teal (logo tone) */
  --teal-deep: #3D6B74;       /* hover / emphasis */
  --gold: #B08438;            /* topaz gold — CTA accent */
  --gold-bright: #C89A4E;     /* gold on dark backgrounds */
  --gold-deep: #9C7126;       /* gold on light backgrounds (AA large text) */
  --brand: var(--teal);       /* on-light accent (nav, rules, hover) */
  --brand-on-dark: var(--gold-bright);

  /* Hairlines */
  --rule-dark: rgba(30, 42, 46, 0.16);
  --rule-light: rgba(244, 240, 232, 0.22);

  /* Layout */
  --header-h: 140px;
  --pad-x: clamp(36px, 4.2vw, 72px);
  --content-max: 1560px;

  /* Type */
  --font-serif: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Oswald", "Arial Narrow", sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 0.9s;
}

/* phones: the 36px desktop-minimum gutter ate ~20% of a 375px screen */
@media (max-width: 560px) {
  :root { --pad-x: 22px; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* keep anchored headings clear of the fixed header on nav jumps */
  scroll-padding-top: calc(var(--header-h) + 28px);
  /* decorative extras (pulse rings at 118%, letter-spaced whispers) may
     poke past the edge — never let them make a phone page pan sideways.
     `clip`, unlike `hidden`, creates no scroll container. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* header is fixed; content begins directly underneath */
  padding-top: var(--header-h);
  /* with the html rule above: phones widen their layout viewport to
     fit any overflow (e.g. a 118% pulse ring) unless both clip it */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul { list-style: none; padding: 0; }

::selection {
  background: rgba(85, 136, 145, 0.28);
  color: var(--ink);
}

/* ---------- Shared section scaffolding ---------- */
.section {
  position: relative;
  width: 100%;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---------- Editorial type helpers ---------- */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.18;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow.on-dark { color: var(--cream-soft); }
.eyebrow.accent { color: var(--brand); }
.eyebrow.accent.on-dark { color: var(--brand-on-dark); }

/* ---------- CTA text link ---------- */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.35s var(--ease-out);
}

.cta-link .arrow {
  display: inline-block;
  transition: transform 0.45s var(--ease-out);
}

.cta-link:hover { color: var(--teal-deep); }
.cta-link:hover .arrow { transform: translateX(6px); }

.cta-link.on-dark { color: var(--cream-soft); }
.cta-link.on-dark:hover { color: var(--gold-bright); }

/* ---------- Solid CTA button (free-class / booking emphasis) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 19px 42px;
  background: var(--gold);
  color: #F7F3EA;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 0;
  border-radius: 2px;
  transition:
    background 0.4s var(--ease-out),
    color 0.4s var(--ease-out),
    transform 0.4s var(--ease-soft),
    box-shadow 0.4s var(--ease-out);
}

.btn .arrow { transition: transform 0.45s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }

.btn:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(176, 132, 56, 0.3);
}

.btn.on-dark {
  background: var(--cream);
  color: var(--ink);
}
.btn.on-dark:hover {
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

/* phones: the 0.22em tracking + 42px sides wrapped most labels to two
   lines, stranding the arrow */
@media (max-width: 560px) {
  .btn { padding: 18px 24px; letter-spacing: 0.16em; }
}

/* phone variants of the hero entrance (sections.css / lead2.css). The
   desktop `sub-in` ends holding letter-spacing 0.34em, which would
   override the tighter phone tracking on the tagline and the CTA. */
@keyframes sub-in-phone {
  from { opacity: 0; transform: translateY(18px); letter-spacing: 0.32em; }
  to   { opacity: 1; transform: none;            letter-spacing: 0.2em; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* gold pulse ring — the "animated thing that grabs attention" */
.btn.pulse { position: relative; }
.btn.pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  opacity: 0;
  animation: cta-pulse 2.8s var(--ease-soft) 1.4s infinite;
  pointer-events: none;
}

.btn.on-dark.pulse::after { border-color: rgba(244, 240, 232, 0.8); }

/* same smooth continuous ripple as nav-book-pulse: invisible at both
   loop ends (no pop-in), no flat hold (no mid-cycle stall). */
@keyframes cta-pulse {
  0%   { opacity: 0;    transform: scale(1); }
  18%  { opacity: 0.9;  transform: scale(1.02); }
  100% { opacity: 0;    transform: scale(1.18); }
}

/* ---------- Big textured brand title (hero + footer) ----------
   Topaz gold metallic, clipped to the type. */
.brand-title {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--gold); /* flat fallback for browsers without background-clip */
  background-image: url("../assets/textures/topaz-texture.jpg");
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-title {
    background-image: none;
    -webkit-text-fill-color: currentcolor;
    color: var(--gold);
  }
}

/* Solid dark teal title, shared by the homepage and lead landing page. */
body .hero-title.brand-title {
  color: var(--hero-title-ink);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentcolor;
  opacity: 1;
  animation: none;
  transition: none;
}


/* ---------- Image system ----------
   Two flavors:
   .ph   — designed tinted frame (for slots that still need photography,
           e.g. the pending hero image). Carries a hairline inset + label.
   .photo — a real photograph in the same frame language (img fills the box). */
.ph {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0) 42%,
      rgba(30, 42, 46, 0.05) 100%),
    var(--ph-tint, #E7E3D8);
}

.ph::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(30, 42, 46, 0.14);
  pointer-events: none;
  z-index: 3;
}

.ph-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}

.ph-label .ph-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(30, 42, 46, 0.4);
  line-height: 1.8;
}

.ph-label .ph-glyph {
  width: 34px;
  height: 34px;
  opacity: 0.3;
}

/* tint variants — stand-ins for pending photography */
.ph--sand   { --ph-tint: #EAE2D2; }
.ph--blush  { --ph-tint: #E8E0D6; }
.ph--sage   { --ph-tint: #DDE1D6; }
.ph--rose   { --ph-tint: #E7D9CE; }
.ph--stone  { --ph-tint: #E2E0D8; }
.ph--milk   { --ph-tint: #F0ECE2; }
.ph--sky    { --ph-tint: #DDE3E2; }
.ph--deep   { --ph-tint: #1E3138; }
.ph--deep .ph-label .ph-name { color: rgba(244, 240, 232, 0.4); }
.ph--deep::before { border-color: rgba(244, 240, 232, 0.18); }

/* real photography inside the frame language */
.photo {
  position: relative;
  overflow: hidden;
  background: #D8D4C8;
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Scroll-reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* stagger helpers */
[data-delay="1"] { --reveal-delay: 0.12s; }
[data-delay="2"] { --reveal-delay: 0.24s; }
[data-delay="3"] { --reveal-delay: 0.36s; }
[data-delay="4"] { --reveal-delay: 0.48s; }
[data-delay="5"] { --reveal-delay: 0.60s; }
[data-delay="6"] { --reveal-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Cookie consent notice — injected by js/consent.js on every
   page. Advertising cookies (the Meta pixel) are only set
   after the visitor chooses "Accept all".
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: rgba(18, 27, 31, 0.97);
  color: var(--cream);
  padding: 18px clamp(18px, 4vw, 40px) 22px;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(244, 240, 232, 0.14);
}
.cookie-consent .cc-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.cookie-consent .cc-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1 1 360px;
}
.cookie-consent .cc-text a { color: var(--gold-bright); text-underline-offset: 3px; }
.cookie-consent .cc-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent .cc-btn {
  appearance: none;
  border: 1px solid rgba(244, 240, 232, 0.35);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
}
.cookie-consent .cc-btn:hover { border-color: var(--cream); }
.cookie-consent .cc-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #17242a;
}
.cookie-consent .cc-btn--gold:hover { background: var(--gold-bright); }
.cookie-consent .cc-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* phones: buttons side by side so the notice covers less of the screen */
@media (max-width: 560px) {
  .cookie-consent { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .cookie-consent .cc-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-consent .cc-text { flex: none; font-size: 12.5px; line-height: 1.5; }
  .cookie-consent .cc-actions { gap: 8px; }
  .cookie-consent .cc-btn { flex: 1 1 0; text-align: center; padding: 11px 12px; }
}