/* Gigged holding page. Palette and type mirror the app's default theme
   ("Concept 1" in app/globals.css): cream/navy, following the device's
   light/dark setting, with Baloo 2 throughout. Everything is served from
   this folder — no third-party requests (see _headers' CSP).

   Layout goal: the whole page fits one screen with no scrolling. Sizes and
   spacing scale with the viewport's height as well as its width (the
   min(..vw, ..vh) clamps below), so it fits phones through desktops. Only a
   genuinely short screen (e.g. a phone in landscape) is allowed to scroll —
   clipping content there would hide it with no way to reach it. */

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --surface: #f8f2e4;
  --surface-raised: #efe4ce;
  --on-surface: #1c2739;
  --on-surface-secondary: #5c6b80;
  --brand: #34517d;
  --border: #e0d0ac;
  /* A white highlight, not a brand tint: blue over cream mixes toward grey
     (a smudge), while white just brightens the cream from above — the
     light-mode counterpart to the dark theme's blue glow. */
  --glow: rgba(255, 255, 255, 0.85);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0c1220;
    --surface-raised: #16203a;
    --on-surface: #f8f2e4;
    --on-surface-secondary: #93a2be;
    --brand: #7ca0de;
    --border: #223255;
    --glow: rgba(124, 160, 222, 0.18);
    color-scheme: dark;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(60rem 30rem at 50% -8rem, var(--glow), transparent 70%),
    var(--surface);
  background-attachment: fixed;
  color: var(--on-surface);
  font-family: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 2.1vh, 1.0625rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Exactly one screen tall: header at the top, footer at the bottom, the
   hero centred in whatever is left. */
.page {
  height: 100vh;
  height: 100dvh;
  max-width: 46rem;
  margin: 0 auto;
  padding:
    max(clamp(1rem, 3.5vh, 2rem), env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(clamp(1rem, 3vh, 2rem), env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

/* The logo PNGs are trimmed tight to the mark, so this width is the
   wordmark's real visible size. */
.logo {
  display: block;
  width: clamp(9rem, min(42vw, 24vh), 15rem);
  height: auto;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.3rem 0.85rem 0.25rem;
  border: 2px solid var(--brand);
  border-radius: 999px;
  color: var(--brand);
  font-weight: 700;
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.hero {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Optically centred: more padding below than above lifts the content
     toward the logo, so spare height collects above the footer instead of
     as a gap under the header. */
  padding-block: clamp(1rem, 3vh, 2rem) clamp(1.5rem, 9vh, 6rem);
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, min(11vw, 8.5vh), 5.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.accent {
  display: block;
  color: var(--brand);
}

.lead {
  margin: clamp(0.85rem, 2.8vh, 1.75rem) 0 0;
  max-width: 34rem;
  color: var(--on-surface-secondary);
  font-size: clamp(1rem, min(2.6vw, 2.5vh), 1.3rem);
}

.features {
  list-style: none;
  margin: clamp(1rem, 3.2vh, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(0.4rem, 1.2vh, 0.75rem);
}

.features li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(0.5rem, 1.5vh, 0.9rem) 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 1rem;
  line-height: 1.35;
}

.features strong {
  font-weight: 700;
}

.bullet {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--brand);
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  border-top: 1px solid var(--border);
  padding-top: clamp(0.75rem, 2vh, 1.25rem);
}

footer p {
  margin: 0;
}

.small {
  color: var(--on-surface-secondary);
  font-size: 0.9rem;
}

/* Too short to fit everything (e.g. a phone in landscape): let the page
   grow and scroll rather than clip content out of reach. */
@media (max-height: 30rem) {
  .page {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Narrow phones (~360px): tighten the pill so it stays on the logo's row. */
@media (max-width: 23rem) {
  .status {
    gap: 0.4rem;
    padding-inline: 0.65rem;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot {
    animation: none;
  }
}