/* =========================================================================
   Wildersound shared chrome — ITEM-090 (Path B single source of truth).

   Extracted verbatim from home/wildersound.blade.php's inline <style> block
   so the homepage AND the legal pages (privacy, future terms/cookies/
   accessibility) render identical navbar + footer + site background +
   base typography. Linked once from layouts/wildersound-page.blade.php.

   Page-specific CSS (hero, sections, artists, contact form, rb-modal,
   success banner, Chrome dark-form fixes) stays inline in each page's
   own @section('styles') block — NOT here.
   ========================================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  /* color: #d6d6d6; */
  /* ITEM-119-contrast (WCAG 1.4.3): opaque dark bg-color so axe/Lighthouse
     composite the .dark-section rgba scrim + text over a dark ancestor rather
     than the white canvas default (which produced false low-contrast fails).
     Painted behind the fixed .site-bg-img (z-index -1, inset:0, cover), so it
     only ever shows as a graceful fallback — no visual change to the page. */
  background-color: #151515;
  -webkit-font-smoothing: antialiased;
}

/* Site-wide fixed background — tiger image stays put while the page scrolls.
   Sits behind everything; only visible where elements above it are transparent. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.site-bg-img {
  position: absolute;
  inset: 0;
  background: url("/homepage/img/bg-1.png") center center / cover no-repeat;
  background-image: image-set(url("/homepage/img/bg-1.webp") type("image/webp"), url("/homepage/img/bg-1.png") type("image/png"));
  filter: brightness(0.2) saturate(0.9);
}

html {
  /* background: #000; */
}

a {
  color: #ffc451;
  text-decoration: none;
}

a:hover {
  color: #ffd57e;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
  color: #fff;
}

/* ---------- Header ---------- */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 997;
  padding: 14px 0;
  /* Header itself stays visible; background fades in on scroll. */
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition:
    background 0.4s ease,
    backdrop-filter 0.4s ease,
    border-color 0.4s ease,
    padding 0.3s;
}

#header.is-scrolled {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

#header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header .logo img {
  height: 36px;
  display: block;
}

.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  gap: 6px;
}

.navbar a {
  display: inline-block;
  padding: 10px 16px;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
  text-decoration: none;
}

.navbar a:hover,
.navbar .active {
  color: #ffc451;
}

.get-started-btn {
  margin-left: 18px;
  background: #ffc451;
  color: #151515;
  border-radius: 50px;
  padding: 8px 26px;
  white-space: nowrap;
  transition: 0.3s;
  font-size: 13px;
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #ffc451;
}

.get-started-btn:hover {
  background: transparent;
  color: #ffc451;
}

/* ITEM-092 A.2: navbar Logout is a CSRF <form>; keep it inline so it
   sits exactly where the Login <a> did in the header flex/grid row.
   The submit reuses .get-started-btn for brand parity. */
.ws-logout-form {
  display: inline;
}

/* ──────────────────────────────────────────────────────────────
 * Logged-in user menu (public navbar) — native <details> dropdown, parity with the
 * portal navbar dropdown. Styled to the dark header chrome + brand amber (#ffc451).
 * No Bootstrap JS / utils.css dependency; icons are inline SVG (.ws-user-ico).
 * ────────────────────────────────────────────────────────────── */
.ws-user-menu {
  position: relative;
  margin-left: 18px;
}
.ws-user-menu .ws-user-ico {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}
/* Trigger (summary) — amber person glyph + caret; hide the native disclosure marker. */
.ws-user-menu-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 8px;
  color: #ffc451;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  transition: opacity 0.2s, background 0.2s;
}
.ws-user-menu-trigger::-webkit-details-marker { display: none; }
.ws-user-menu-trigger::marker { content: ""; }
.ws-user-menu-trigger:hover,
.ws-user-menu[open] .ws-user-menu-trigger {
  background: rgba(255, 196, 81, 0.10);
}
.ws-user-menu-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.2s;
}
.ws-user-menu[open] .ws-user-menu-caret { transform: rotate(180deg); }

/* Dropdown panel — opens below-right of the trigger. */
.ws-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
  z-index: 1200;
}
.ws-user-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 8px;
}
.ws-user-menu-sub {
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.5);
}
.ws-user-menu-name {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
}
.ws-user-menu-divider {
  height: 1px;
  margin: 5px 6px;
  background: rgba(255, 255, 255, 0.08);
}
.ws-user-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: #f3ede2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ws-user-menu-item .ws-user-ico { color: #ffc451; }
.ws-user-menu-item:hover {
  background: rgba(255, 196, 81, 0.10);
  color: #ffc451;
}
.ws-user-menu-logout { color: #e0685c; }
.ws-user-menu-logout:hover { background: rgba(224, 104, 92, 0.12); color: #e0685c; }

/* The <button> must render identically to the <a>.get-started-btn:
   .get-started-btn already sets every font property explicitly, so do
   NOT `font: inherit` here (that was overriding it with the larger
   navbar font — ITEM-092 A.2 size-mismatch fix). Only the cursor
   differs from a <button>'s UA default. */
.ws-logout-form .get-started-btn {
  cursor: pointer;
}

.get-started-btn.outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.get-started-btn.outline:hover {
  border-color: #ffc451;
  color: #ffc451;
}

.mobile-nav-toggle {
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  display: none;
  background: none;
  border: 0;
  padding: 4px 8px;
}

/* Mobile-only account group (bottom of the hamburger panel). Hidden at
   desktop widths — the header shows the Login button / user menu there. */
.navbar .ws-mnav-account,
.navbar .ws-mnav-logout {
  display: none;
}

@media (max-width: 991.98px) {
  .navbar {
    display: none;
    position: static;
  }

  .navbar.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }

  .navbar.is-open ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 12px;
    list-style: none;
    margin: 0;
  }

  .navbar.is-open li {
    width: 100%;
  }

  .navbar a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
  }

  .navbar a:hover,
  .navbar a:active {
    background: rgba(255, 255, 255, 0.04);
  }

  .navbar a:last-child {
    border-bottom: 0;
  }

  /* Account group: separated from the page anchors by a rule line. The
     portal/Login entry reads as a distinct amber pill; Log out beneath
     it stays quiet/secondary. */
  .navbar .ws-mnav-account,
  .navbar .ws-mnav-logout {
    display: block;
  }

  .navbar .ws-mnav-account {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .navbar .ws-mnav-account a {
    color: #ffc451;
    border: 1px solid rgba(255, 196, 81, 0.5);
    border-radius: 6px;
    background: rgba(255, 196, 81, 0.08);
  }

  .navbar .ws-mnav-account a:hover,
  .navbar .ws-mnav-account a:active {
    background: rgba(255, 196, 81, 0.16);
    color: #ffc451;
  }

  .navbar .ws-mnav-logout form {
    margin: 0;
  }

  .navbar .ws-mnav-logout button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 6px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .navbar .ws-mnav-logout button:hover,
  .navbar .ws-mnav-logout button:active {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
  }

  .mobile-nav-toggle {
    display: inline-block;
  }

  /* Once the hamburger exists, the header Login button and the authed
     user-menu icon hide — the menu's account group (Login / My events /
     Admin portal + Log out) is the single account surface on narrow
     screens. */
  #header .get-started-btn,
  #header .ws-user-menu {
    display: none;
  }

  #header .container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  #header .logo {
    justify-self: start;
  }

  #header .mobile-nav-toggle {
    justify-self: end;
  }
}

/* ---------- Footer ---------- */
#footer {
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#footer .footer-top {
  padding: 50px 0 20px;
}

#footer .social {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 18px 0;
}

#footer .social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: 0.3s;
  text-decoration: none;
  font-size: 16px;
}

#footer .social a:hover {
  background: #ffc451;
  color: #151515;
}

#footer .footer-bottom {
  background: rgba(0, 0, 0, 0.5);
  padding: 24px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.8;
}

#footer .footer-bottom img {
  max-width: 140px;
  display: block;
  margin: 0 auto 12px;
  opacity: 0.85;
}

#footer .footer-bottom .legal-links {
  margin-top: 8px;
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

#footer .footer-bottom .legal-links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}

#footer .footer-bottom .legal-links a:hover {
  color: #ffc451;
}

#footer .footer-bottom .acknowledgement {
  margin-top: 12px;
  font-style: italic;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- a11y ---------- */
:focus-visible {
  outline: 2px solid #ffc451;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  background: #ffc451;
  color: #151515;
  padding: 8px 16px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* Global reduced-motion damping. The page-specific
   `#top video.hero-video { display:none }` half of the original
   combined rule stays inline in the homepage (it targets a
   homepage-only element). */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Justified body copy WITHOUT hyphenation — let the lines breathe rather
   than splitting words. Visual rivers are accepted as the trade-off. */
.justify-body {
  text-align: justify;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Realtime form validation — custom class, NOT Bootstrap's `.is-invalid`.
   Defined here in the chrome (single source) so it can't be PurgeCSS-trimmed
   like `.text-center` was, and so it's available to any wildersound-page
   form (homepage contact, future surfaces). Driven by
   initEnquiryFormValidation() in wildersound-forms.js — blur sets the class
   + aria-invalid + inline `.field-invalid-msg`; later blur clears them when
   valid. */
.field-invalid,
.field-invalid:focus {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 107, 107, 0.18) !important;
  outline-color: #ff6b6b;
}

.field-invalid-msg {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

/* When the field is the consent checkbox inside `.consent-row`, the row is
   a 2-column grid (24px checkbox | 1fr label). Without this override the
   appended `.field-invalid-msg` lands in the next grid cell — column 1 of
   row 2, only 24px wide — and the text wraps to a tight stack. Span both
   columns so the message reads as a single readable line below the row. */
.consent-row .field-invalid-msg {
  grid-column: 1 / -1;
}

/* Phase B — enquiry submit-success button state. The ITEM-068 dispatcher
   (partials/csp-helpers) adds `.ws-btn-sent` and swaps the label to "Sent ✓"
   for ~2.5s after a successful submit, alongside the #successMessage banner,
   then reverts. Green confirmation with a soft transition + a brief pop. */
.ws-btn-sent {
  background-color: #2e7d32 !important;
  border-color: #2e7d32 !important;
  color: #fff !important;
  transition: background-color .25s ease, border-color .25s ease;
  animation: ws-btn-sent-pop .3s ease;
}
@keyframes ws-btn-sent-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-btn-sent { animation: none; transition: none; }
}