/* ============================================================
   Retrofit Aircon — Global Stylesheet
   Shared across all pages. Page-specific styles can go in
   their own files later if a page truly needs them, but the
   goal is to keep almost everything in here.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Colour system */
  --cream:   #f5f1e8;
  --cream2:  #ebe5d3;
  --forest:  #5c8a6a;
  --forest2: #487054;
  --teal:    #5b8a8a;
  --clay:    #c97b5b;
  --ink:     #1a1a1a;
  --muted:   #5a574e;

  /* Typography */
  --font-display: 'Cormorant', Georgia, serif;
  --font-sans:    'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --max-w: 1400px;
  --radius-lg: 28px;
  --radius-md: 24px;
  --radius-sm: 20px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

/* Cormorant runs light at its default weight. Give every heading
   a bit more backbone — but skip any element that already opts
   into an explicit Tailwind weight class (e.g. the oversized
   stat number uses font-light on purpose). */
.font-display:not(.font-light):not(.font-normal):not(.font-medium):not(.font-semibold):not(.font-bold) {
  font-weight: 500;
}

::selection { background: var(--forest); color: var(--cream); }

/* ---------- Texture / atmosphere ---------- */

/* Subtle paper grain overlay */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Hero gradient mesh placeholder (until real image dropped in) */
.hero-mesh {
  background:
    radial-gradient(at 18% 22%, rgba(91,138,138,0.55) 0px, transparent 50%),
    radial-gradient(at 82% 18%, rgba(217,188,141,0.55) 0px, transparent 55%),
    radial-gradient(at 70% 80%, rgba(31,58,46,0.65) 0px, transparent 55%),
    radial-gradient(at 25% 85%, rgba(201,123,91,0.35) 0px, transparent 50%),
    linear-gradient(140deg, #d8d1bb 0%, #b4c4b8 45%, #6b8a86 100%);
}

/* Soft section divider */
.leaf-div {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,58,46,0.18), transparent);
}

/* ---------- Reveal on scroll ----------
   The hidden state is only applied once JS has marked the
   document with `.js-ready` (set by main.js on load). If
   main.js fails to load or is blocked, everything stays
   visible — the site degrades gracefully. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s cubic-bezier(0.2,0.6,0.2,1),
    transform 1s cubic-bezier(0.2,0.6,0.2,1);
  will-change: transform, opacity;
}
.js-ready .reveal.in { opacity: 1; transform: none; }
.reveal.delay-1  { transition-delay: 0.08s; }
.reveal.delay-2  { transition-delay: 0.16s; }
.reveal.delay-3  { transition-delay: 0.24s; }
.reveal.delay-4  { transition-delay: 0.32s; }
.reveal.delay-5  { transition-delay: 0.40s; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bob, .ticker-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Animated underline link ---------- */
.uline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease;
}
.uline:hover { background-size: 100% 1px; }

/* Current-page nav link — a permanent clay underline so the
   active page stays distinct now that every nav item is the
   same size, weight, and colour. */
.uline.is-active {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 100% 2px;
}

/* ---------- Numbers ---------- */
.stat-num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -0.04em;
}

/* ---------- Section eyebrows — make Matt's clay tags visible ---------- */
/* Bumps every "— Section name" small-caps tag bigger + bolder so they
   actually read on cream. Targets both clay and forest variants. */
span.text-\[0\.78rem\].uppercase.tracking-\[0\.22em\],
div.text-\[0\.78rem\].uppercase.tracking-\[0\.22em\],
span.text-\[0\.7rem\].uppercase.tracking-\[0\.22em\],
div.text-\[0\.7rem\].uppercase.tracking-\[0\.22em\],
span.text-\[0\.72rem\].uppercase.tracking-\[0\.22em\],
div.text-\[0\.72rem\].uppercase.tracking-\[0\.22em\] {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

/* ---------- Rotating tagline — BIG display version ---------- */
.tagline-rotator-big {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  color: var(--forest);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Reserve room for ~2 lines so absolute-positioned items don't collapse the layout */
  min-height: 2.4em;
}
.tagline-rotator-big .tagline-big-item {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  animation: tagline-big-cycle 20s infinite;
  /* Don't break out of the column */
  max-width: 100%;
}
.tagline-rotator-big .tagline-big-item:nth-child(1) { animation-delay: 0s; }
.tagline-rotator-big .tagline-big-item:nth-child(2) { animation-delay: 4s; }
.tagline-rotator-big .tagline-big-item:nth-child(3) { animation-delay: 8s; }
.tagline-rotator-big .tagline-big-item:nth-child(4) { animation-delay: 12s; }
.tagline-rotator-big .tagline-big-item:nth-child(5) { animation-delay: 16s; }
/* The first item also sets the actual flowing layout height so we can size off content */
.tagline-rotator-big .tagline-big-item:first-child {
  position: relative;
}

@keyframes tagline-big-cycle {
  0%   { opacity: 0; transform: translateY(8px); }
  3%   { opacity: 1; transform: translateY(0); }
  18%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* On mobile, keep min-height generous enough for 2-3 line wrapping */
@media (max-width: 640px) {
  .tagline-rotator-big { min-height: 3.6em; }
}
@media (max-width: 380px) {
  .tagline-rotator-big {
    font-size: 1.4rem;
    min-height: 4em;
  }
}

/* ---------- Bento card hover lift ---------- */
.bento {
  transition:
    transform 0.5s cubic-bezier(0.2,0.6,0.2,1),
    box-shadow 0.5s ease,
    background-color 0.4s ease;
}
.bento:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(31,58,46,0.18);
}

/* ---------- Flip bento (Who-we-serve cards on homepage) ---------- */
.bento-flip {
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2,0.6,0.2,1), box-shadow 0.5s ease;
}
.bento-flip:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(31,58,46,0.22);
}
.bento-flip-face,
.bento-flip-back {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.bento-flip-back {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.bento-flip:hover .bento-flip-face,
.bento-flip:focus-within .bento-flip-face,
.bento-flip.is-active .bento-flip-face {
  opacity: 0;
  transform: translateY(-8px);
}
.bento-flip:hover .bento-flip-back,
.bento-flip:focus-within .bento-flip-back,
.bento-flip.is-active .bento-flip-back {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The solid-colour cards (forest + teal) need their own hover
   cue — a dark shadow barely registers against a dark card, so
   they lighten to a brighter shade of the same colour instead.
   These selectors outrank Tailwind's bg-* utility on hover. */
.bento.bg-forest:hover { background-color: var(--forest2); }
.bento.bg-teal:hover   { background-color: #6f9b9b; }

/* ---------- Navigation ---------- */
/* Smooth colour transitions for nav elements as the header
   flips between its transparent and scrolled states. */
#nav .group .font-display,
#nav nav.font-medium a,
#nav #menuBtn,
#nav .group ~ div > a,
#nav .group > span:first-child,
#nav .group > span:first-child > span {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Scrolled state: header flips to solid forest so the menu stays
   readable over any section (cream, the green band, the hero
   image) — and breaks up the cream further down the page. */
.nav-scrolled {
  background: rgba(92, 138, 106, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}
.nav-scrolled nav.font-medium a,
.nav-scrolled .group .font-display,
.nav-scrolled #menuBtn { color: var(--cream); }

/* Logo SVG flips from forest to cream on scrolled state */
.nav-scrolled .group > svg { color: var(--cream); }

/* "Book a free check" button inverts to cream-on-forest */
.nav-scrolled .group ~ div > a {
  background: var(--cream);
  color: var(--forest);
}
.nav-scrolled .group ~ div > a:hover { background: #ffffff; }

/* ---------- Ticker / marquee ---------- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}

/* ---------- Scroll cue ---------- */
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.bob { animation: bob 2.2s ease-in-out infinite; }

/* ---------- Utility: hide scrollbars on horizontal scroll regions ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Details / FAQ accordion (cross-browser arrow remove) ---------- */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ---------- Brand logo lockups (raster, supplied by client) ----------
   Nav uses the horizontal lockup: green sits on the transparent/cream
   header at the top of the page, then swaps to the cream version once
   the header flips to solid forest on scroll (.nav-scrolled on #nav).
   Both share identical dimensions so toggling display causes no shift. */
.nav-logo { display: block; transition: opacity 0.3s ease; }
.nav-logo-cream { display: none; }
#nav.nav-scrolled .nav-logo-green { display: none; }
#nav.nav-scrolled .nav-logo-cream { display: block; }