/* ==========================================================================
   Blackbird Submission — supporting layer
   Design tokens, type ramp and utilities live in the Tailwind config inside
   index.html. This file only holds what utilities cannot express.

   Colours are sampled from the official OMG PRINCE press kit
   (source/OMG-PRINCE-EPK-web.pdf): forest green, warm gold, soft grey.
   ========================================================================== */

:root {
  --primary: #2c663d;
  --primary-container: #37804c;
  --primary-fixed: #a9dfb9;
  --gold: #eeb257;
  --gold-soft: #f5cf8f;
  --surface: #ffffff;
  --on-surface: #191c1c;
}

html {
  background-color: var(--surface);
}

/* Fixed header would otherwise cover anchor targets */
section[id],
main[id] {
  scroll-margin-top: 6.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 1rem 0;
  background: var(--primary);
  color: #ffffff;
  font-family: Lexend, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.skip-link:focus-visible {
  left: 0;
  top: 0;
}

/* Signature gradient used on primary actions and the closing CTA */
.kinetic-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
}

.text-kinetic {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   Press-kit motifs
   The printed EPK is built on two devices: fields of small dots, and a rounded
   gold marker swiped behind a key word. Both are recreated here so the page
   reads as the same brand rather than a lookalike.
   -------------------------------------------------------------------------- */

.dot-grid {
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 22px 22px;
}

.dot-grid-lg {
  background-image: radial-gradient(currentColor 2.5px, transparent 2.6px);
  background-size: 34px 34px;
}

/* Gold marker behind a word, sitting under the text like a highlighter pass */
.mark-gold {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.mark-gold::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.35em;
  right: -0.35em;
  bottom: -0.08em;
  height: 0.62em;
  border-radius: 9999px;
  background: var(--gold-soft);
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

/* Material Symbols render as ligature text before the icon font loads */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  line-height: 1;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Booking teams tend to print or PDF submission pages */
@media print {
  #global-nav,
  #mobile-menu,
  .skip-link {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  section {
    break-inside: avoid;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.7rem;
    word-break: break-all;
  }
}