/* ══════════════════════════════════════════
   SCOOP OOH — THEME TOKENS
   Dark mode (default) + Light mode overrides
══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

:root {
  --bg-base:     #0B0C0E;
  --bg-surface:  #141619;
  --bg-elevated: #1C1F23;
  --bg-overlay:  rgba(11,12,14,.72);

  --bg-primary:    var(--bg-base);
  --bg-secondary:  var(--bg-surface);
  --bg-tertiary:   var(--bg-elevated);
  --bg-card:       rgba(28,31,35,0.7);
  --bg-glass:      rgba(255,255,255,0.04);
  --bg-glass-hover:rgba(255,255,255,0.07);

  --border-subtle: #24272B;
  --border:         #33373C;
  --border-strong:  #474B51;
  --border-glass:  rgba(255,255,255,0.1);
  --border-glow:   var(--focus-ring);

  --text-primary:  #F3F4F5;
  --text-secondary:#ADAFB2;
  --text-muted:    #75787C;
  --text-disabled: #45484C;

  --brand-300: #C83A50;
  --brand-400: #B12A42;
  --brand-500: #981E32;
  --brand-600: #7C1728;
  --brand-700: #61111F;
  --brand-wash: rgba(152,30,50,.12);

  --accent-indigo: var(--brand-500);
  --accent-cyan:   var(--brand-300);
  --accent-violet: var(--brand-400);
  --accent-emerald:var(--success);
  --accent-amber:  var(--warning);
  --accent-rose:   var(--error);

  --success: #35B37E;
  --warning: #E0A13A;
  --error:   #E5484D;
  --info:    #0496FF;
  --focus-ring: rgba(152,30,50,.55);

  --glow-indigo:   var(--focus-ring);
  --glow-cyan:     var(--focus-ring);

  --nav-bg:        rgba(11,12,14,0.95);
  --shadow-card:   0 8px 32px rgba(0,0,0,0.4);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;
}

[data-theme="light"] {
  --bg-primary:    #F0F4FF;
  --bg-secondary:  #E8EEF8;
  --bg-tertiary:   #DDE5F5;
  --bg-card:       rgba(255,255,255,0.85);
  --bg-glass:      rgba(255,255,255,0.7);
  --bg-glass-hover:rgba(255,255,255,0.9);
  --border-glass:  rgba(152,30,50,0.15);
  --border-glow:   rgba(152,30,50,0.3);

  --text-primary:  #0A1628;
  --text-secondary:#3D4F6E;
  --text-muted:    #6B7A99;

  --nav-bg:        rgba(240,244,255,0.97);
  --shadow-card:   0 8px 32px rgba(152,30,50,0.1);
  --glow-indigo:   rgba(152,30,50,0.1);
}

/* ── Global reset ─────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background:  var(--bg-primary);
  color:       var(--text-primary);
  min-height:  100vh;
  overflow-x:  hidden;
  transition:  background 0.4s, color 0.4s;
}

/* ── Branding pattern watermark ──────────────────────────
   Faint, tiled SCOOP/UDC pattern behind every page. Fixed + negative
   z-index so it always paints behind in-flow content (see CSS 2.1 painting
   order — negative stack levels come before non-positioned descendants)
   without having to touch the z-index of the nav or any other element.
   The source file is a huge 8046x3117 tile, so it's scaled down to a small
   repeat unit here (width only — height is "auto" so the aspect ratio is
   preserved, not stretched) and then tiled/repeated to fill the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../../../images/udcpattern.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: 700px auto;
  opacity: 0.02;
  pointer-events: none;
}

iframe { position:relative; z-index:1; border:none; }

/* ── Animated dot ─────────────────────── */
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.6; transform:scale(0.8); }
}

/* ── Orb float ────────────────────────── */
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(15px,-20px) scale(1.02); }
  66%     { transform:translate(-10px,10px) scale(0.98); }
}

/* ── Fade in up ───────────────────────── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Reveal on scroll ─────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
/* transform:none (not translateY(0)) once settled — any non-"none" transform
   value on an ancestor creates a new containing block, which silently breaks
   position:sticky on descendants in real browsers (e.g. the bookings page's
   sticky card/table header living inside .bookings-content.reveal). Visually
   identical resting frame either way, and the transition still interpolates
   correctly from translateY(30px) to none. */
.reveal.visible { opacity:1; transform:none; }

/* ── Prevent mobile Safari's auto-zoom on input focus ──
   iOS zooms the whole page in whenever a focused text field's computed
   font-size is under 16px — most of this app's inputs/selects are styled
   smaller than that for a tighter desktop look, which is what triggers it.
   Global + !important so it reliably wins over every page's own (smaller)
   input font-size without having to hunt down and patch each one
   individually; scoped to mobile viewports only so desktop's compact sizing
   is untouched. Excludes checkbox/radio/range/etc. — their native controls
   don't render text and font-size can affect their intrinsic sizing in some
   browsers. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
  }
}