/* Shared look for the whole site: font, colours, glowing tiles.
   Loaded last on every page (index, booking, admin). Behaviour lives in fx.js. */

:root {
  /* theme colours as "r g b" triplets; theme.js overwrites these from the chosen theme */
  /* defaults = the "Apex Volt" theme: vivid lime + green, cyan and amber, deep navy surfaces */
  --acc: 34 197 94;       /* fills: green */
  --acc-b: 163 230 53;    /* vivid accent: lime (text, borders, highlights) */
  --acc-d: 21 128 61;     /* dark accent */
  --comp-1: 6 182 212;    /* complement: cyan */
  --comp-2: 245 158 11;   /* complement: amber */
  --bg-950: 6 7 9;
  --bg-900: 11 14 20;
  --bg-800: 19 24 34;
  --bg-700: 30 38 54;

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --green: rgb(var(--acc-b));
  --green-bright: rgb(var(--acc-b));
  --green-dark: rgb(var(--acc));
  --green-glow: rgb(var(--acc-b) / 0.3);
  --green-dim: rgb(var(--acc-b) / 0.14);
  --comp1: rgb(var(--comp-1));
  --comp2: rgb(var(--comp-2));
  --bg: rgb(var(--bg-950));
  --bg-alt: rgb(var(--bg-900));
  --card: rgb(var(--bg-800));
  --border: rgba(255, 255, 255, 0.1);
  --text: #f8fafc;
  --text-dim: #94a3b8;
  --sky: #06b6d4;
}

body {
  font-family: var(--font);
  /* fixed-pixel glows, so they never stretch with the screen height */
  background:
    radial-gradient(760px circle at 18% 40px, rgb(var(--acc) / 0.09) 0%, transparent 70%) no-repeat,
    radial-gradient(640px circle at 92% 90%, rgb(var(--acc-d) / 0.07) 0%, transparent 70%) no-repeat,
    rgb(var(--bg-950));
  background-attachment: fixed;
}
/* phones: no fixed backgrounds (they scale badly), and a much softer glow */
@media (max-width: 900px), (hover: none) {
  body {
    background:
      radial-gradient(420px circle at 20% 0, rgb(var(--acc) / 0.06) 0%, transparent 70%) no-repeat,
      rgb(var(--bg-950));
    background-attachment: scroll;
  }
}
h1, h2, h3, h4 { font-family: var(--font); }
h1, h2 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.1; }
h3 { font-weight: 800; }
.acc { color: var(--green); }

/* small section labels: plain, bold, spaced, coloured */
.kicker, .eyebrow {
  display: block; width: fit-content;
  color: var(--green); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
}
.eyebrow.cyan, .kicker.cyan { color: var(--comp1); }

/* buttons: lime-to-green gradient with a neon glow (as in the design) */
.btn { border-radius: 14px; font-weight: 800; letter-spacing: 0.005em; }
.btn-primary, .btn:not(.ghost):not(.danger):not(.btn-outline):not(.btn-ghost) {
  background: linear-gradient(90deg, rgb(var(--acc-b)), rgb(var(--acc)));
  color: #060709; border: 0;
  box-shadow: 0 0 25px -3px rgb(var(--acc-b) / 0.38);
}
.btn-primary:hover, .btn:not(.ghost):not(.danger):not(.btn-outline):not(.btn-ghost):hover:not(:disabled) {
  background: linear-gradient(90deg, rgb(var(--acc-b)), rgb(var(--acc)));
  box-shadow: 0 0 35px -2px rgb(var(--acc-b) / 0.6);
}
.btn-outline { border-color: rgb(var(--acc-b) / 0.7); color: var(--green); }
.btn-outline:hover { background: rgb(var(--acc-b) / 0.12); }

/* the page you are on, in the menu */
.nav-desktop > ul > li > a.current {
  display: flex; align-items: center; gap: 8px; color: var(--green);
  background: rgb(var(--acc) / 0.10); border: 1px solid rgb(var(--acc) / 0.28);
  border-radius: 999px; box-shadow: 0 0 12px -2px rgb(var(--acc) / 0.35);
}
.nav-desktop a.current::before, .nav-mobile a.current::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block; animation: fxDot 2s ease-in-out infinite;
}
.nav-mobile a.current { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------ glowing tiles */
.fx-tile {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgb(var(--bg-800) / 0.9) 0%, rgb(var(--bg-900) / 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s, box-shadow .28s, background .28s;
  -webkit-tap-highlight-color: transparent;
}
/* light that follows the finger or mouse */
.fx-tile::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--z, var(--acc-b)) / 0.17), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
/* glowing edge that follows it */
.fx-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--z, var(--acc-b)) / 0.75), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.fx-tile.lit::before, .fx-tile.lit::after { opacity: 1; }
.fx-tile.pressed { transform: scale(0.982); }

@media (hover: hover) {
  .fx-tile:not(.fx-still):not(:disabled):hover {
    transform: translateY(-3px); border-color: rgb(var(--z, var(--acc-b)) / 0.35);
    box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.7), 0 0 26px -8px rgb(var(--z, var(--acc)) / 0.28);
  }
  .fx-tile.pressed:not(:disabled) { transform: translateY(-1px) scale(0.985); }
}

/* resting pulse, only while the tile is on screen */
@keyframes fxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--z, var(--acc)) / 0), 0 0 14px -10px rgb(var(--z, var(--acc)) / 0.15); border-color: rgba(255, 255, 255, 0.07); }
  50%      { box-shadow: 0 0 28px -6px rgb(var(--z, var(--acc)) / 0.34), 0 0 0 1px rgb(var(--z, var(--acc-b)) / 0.10); border-color: rgb(var(--z, var(--acc-b)) / 0.30); }
}
@keyframes fxPulseStrong {
  0%, 100% { box-shadow: 0 0 0 1px rgb(var(--z, var(--acc)) / 0.55), 0 8px 26px -12px rgb(var(--z, var(--acc)) / 0.30); }
  50%      { box-shadow: 0 0 0 1px rgb(var(--z, var(--acc-b)) / 0.95), 0 10px 40px -8px rgb(var(--z, var(--acc)) / 0.60); }
}
@keyframes fxDot {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--z, var(--acc)) / 0.6); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgb(var(--z, var(--acc)) / 0); opacity: .7; }
}
.fx-tile.in-view:not(.fx-still):not(.lit):not(:hover):not(:disabled) {
  animation: fxPulse 4.8s ease-in-out infinite; animation-delay: var(--fx-d, 0s);
}
.fx-tile.in-view.picked:not(.lit), .fx-tile.in-view.sel:not(.lit), .fx-tile.in-view.selected:not(.lit), .fx-tile.in-view.featured:not(.lit) {
  animation: fxPulseStrong 3.4s ease-in-out infinite; animation-delay: var(--fx-d, 0s);
}
.fx-tile:disabled { background: transparent; border-style: dashed; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fx-tile, .fx-tile * { animation: none !important; transition: none !important; }
}

/* coloured lip on the left edge of a tile */
.lip {
  border-left: 4px solid var(--lip, var(--green)) !important;
  background-image:
    linear-gradient(90deg, rgb(var(--lip-rgb, var(--acc)) / 0.16) 0, transparent 120px),
    linear-gradient(180deg, rgb(var(--bg-800) / 0.9) 0%, rgb(var(--bg-900) / 0.96) 100%) !important;
}
.lip-green { --lip: var(--green); --lip-rgb: var(--acc); }
.lip-blue  { --lip: #38bdf8; --lip-rgb: 56 189 248; }
.lip-amber { --lip: #f59e0b; --lip-rgb: 245 158 11; }
.lip-red   { --lip: #ef4444; --lip-rgb: 239 68 68; }
.lip-grey  { --lip: #6e766e; --lip-rgb: 110 118 110; }