/**
 * Maps existing v2 utility classes to CSS variables set from event_themes.tokens.
 * Load order: style.css → optional style-{theme}.css → :root (theme-variables.blade.php) → this file.
 * Must load last so token-based rules beat per-theme overrides that use hardcoded !important.
 */

html,
body {
  background-color: var(--theme-page-background, #ffffff);
}

/* event-inner.blade.php: was bg-secondary on full wrapper — caused seams vs hero; use page background */
#wrapper.event-v2-wrapper {
  background-color: var(--theme-page-background, #ffffff) !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#wrapper.event-v2-wrapper > header,
#wrapper.event-v2-wrapper > footer {
  flex-shrink: 0;
}

/* Sticky footer: short pages (no sponsors, etc.) still fill the viewport; footer stays at bottom */
#wrapper.event-v2-wrapper > main.event-v2-layout-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* When there are no Primary sponsors, primary-partner.blade.php renders this instead of a blank spacer */
.primary-sponsor-secondary-fill {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background-color: var(--theme-secondary, #fbb03b);
}

/* No primary sponsors: legacy markup may still use .no-sponsor-fix — keep height from blowing up */
.no-sponsor-fix {
  min-height: 0 !important;
}

body {
  color: var(--theme-text-body, #333333) !important;
}

a {
  color: var(--theme-link, #014186);
}

.text-primary,
.text-primary:hover {
  color: var(--theme-primary, #014186) !important;
}

.text-primary-dark {
  color: var(--theme-primary-dark, #073668) !important;
}

.text-secondary {
  color: var(--theme-secondary, #fbb03b) !important;
}

.text-dark {
  color: var(--theme-text-heading, #111111) !important;
}

.text-dark-lite {
  color: var(--theme-text-body, #333333);
}

.text-grey {
  color: var(--theme-text-muted, #5a7090);
}

.text-light {
  color: var(--theme-text-on-primary, #ffffff) !important;
}

.bg-primary {
  background-color: var(--theme-primary, #014186) !important;
}

.bg-primary-dark {
  background-color: var(--theme-primary-dark, #073668);
}

.bg-primary-body {
  background-color: var(--theme-primary-body, #edf2f8);
}

.bg-primary-lite,
.bg-primary-light {
  background-color: var(--theme-primary-lite, #f5f9fc);
}

.bg-secondary {
  background-color: var(--theme-secondary, #fbb03b) !important;
}

.bg-light {
  background-color: var(--theme-surface, #ffffff);
}

.bg-grey {
  background-color: var(--theme-text-muted, #5a7090);
}

.bg-grey-lite {
  background-color: #eeeeee;
}

header {
  background-color: var(--theme-primary-dark, #073668) !important;
  color: var(--theme-header-text, #ffffff);
}

header a {
  color: var(--theme-header-text, #ffffff);
}

/* Per-theme packs reuse these selectors with the brand colour */
.add-remove-btn {
  background-color: var(--theme-primary-dark, #073668) !important;
  color: var(--theme-add-remove-btn-text, #ffffff) !important;
}

.add-remove-btn i {
  color: var(--theme-add-remove-btn-text, #ffffff) !important;
}

.bg-primary-lg,
.bg-primary-sm {
  background-color: var(--theme-primary, #014186) !important;
}

.list-card a {
  color: var(--theme-button-lite-text, #014186) !important;
}

.bg-primary-very-dark {
  background-color: var(--theme-footer-background, #031222) !important;
}

.bg-primary-darker {
  background-color: var(--theme-primary-dark, #001c38) !important;
}

.btn-primary {
  background: var(--theme-primary, #014186) !important;
  color: var(--theme-button-primary-text, #ffffff) !important;
}

.btn-primary-outline {
  border: 1px solid var(--theme-primary-dark, #073668);
  color: var(--theme-primary-dark, #073668);
}

.btn-primary-outline:hover {
  background-color: var(--theme-primary-lite, #f5f9fc);
}

.btn-secondary {
  background: var(--theme-button-secondary-background, #fbb03b) !important;
  color: var(--theme-button-secondary-text, #111111) !important;
}

.btn-secondary:focus {
  background-color: var(--theme-button-secondary-background, #fbb03b) !important;
  color: var(--theme-text-body, #333333) !important;
}

.btn-secondary:hover {
  background: var(--theme-secondary-hover, #ffa30e) !important;
  color: var(--theme-button-secondary-text, #111111) !important;
}

.btn-lite {
  background: var(--theme-button-lite-background, #ffffff) !important;
  color: var(--theme-button-lite-text, #014186) !important;
}

.btn-primary-secondary {
  background-color: var(--theme-primary, #014186) !important;
  color: var(--theme-text-on-primary, #ffffff) !important;
}

.btn-primary-secondary:hover {
  background-color: var(--theme-secondary, #fbb03b) !important;
}

/* Hero: gradient + photo; wave is inline SVG (.hero-shape-svg partial) with fill: var(--theme-secondary) */
/* Fallbacks match EventThemeTokens defaults when :root tokens are absent */
#hero,
.double-backdrop {
  position: relative;
  background-image: linear-gradient(
      var(--theme-hero-gradient-start, rgba(1, 65, 134, 0.9)),
      var(--theme-hero-gradient-end, rgba(1, 65, 134, 0.9))
    ),
    var(--theme-hero-photo, url(../images/hero.png)) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: contain, cover !important;
}

/* Legacy ticket/support heroes: hide pseudo-layer so themed #hero shows (per-theme packs did this; default theme had no pack) */
#hero .hero-img-ticket:before,
#hero .hero-text-container:before {
  display: none !important;
}

/* Inline wave lives in .hero-shape-layer; legacy in-flow img duplicated it → double bands + seams */
#hero .hero-img-ticket .hero-shape > img {
  display: none !important;
}

.double-backdrop.basic-event {
  background-image: linear-gradient(
      var(--theme-hero-gradient-start, rgba(1, 65, 134, 0.9)),
      var(--theme-hero-gradient-end, rgba(1, 65, 134, 0.9))
    ),
    var(--theme-hero-photo, url(../images/hero.png)) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: contain, cover !important;
}

#hero .hero-shape-layer,
.double-backdrop .hero-shape-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}

#hero .hero-shape-layer svg,
.double-backdrop .hero-shape-layer svg {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

#hero > *:not(.hero-shape-layer),
.double-backdrop > *:not(.hero-shape-layer) {
  position: relative;
  z-index: 1;
}

/* Remove hairline between hero and the following section (subpixel gap + anti-aliasing) */
#hero + *,
.double-backdrop + * {
  margin-top: -6px !important;
  position: relative;
}

#hero .hero-text-container,
#hero .hero-img-ticket {
  background: transparent !important;
}

.hero-text-container {
  background-color: var(--theme-hero-overlay, rgba(1, 65, 134, 0.8)) !important;
}

.quickbrief-box {
  background-color: var(--theme-hero-overlay, rgba(0, 45, 92, 0.9)) !important;
}

.footer-brief {
  color: var(--theme-text-muted, #5a7092);
}

.footer-items a {
  color: var(--theme-footer-link, rgba(255, 255, 255, 0.8));
}

.footer-items a:hover {
  color: var(--theme-footer-link-hover, #fbb03b);
}

.ftr-copyright {
  color: rgba(255, 255, 255, 0.4);
}

/* e.g. “Back to Event” / “Modify Ticket Selection” — was tied to secondary; now own token */
.back-to-home-a:hover,
.back-to-home-a.text-light:hover,
a.back-to-home-a:hover {
  color: var(--theme-back-link-hover, #fbb03b) !important;
}

#supporters,
#event-sponsor {
  background-color: var(--theme-surface-alt, #f0f4f8);
}

.donation_radio + label:hover {
  color: var(--theme-donation-hover-border, #014186);
  border-color: var(--theme-donation-hover-border, #014186);
}

.donation_radio:checked + label {
  background: var(--theme-donation-selected, #014186);
}

* {
  scrollbar-color: var(--theme-scrollbar-thumb, #014186) var(--theme-scrollbar-track, #ffffff) !important;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--theme-scrollbar-thumb, #b6bdc4);
  border: 3px solid var(--theme-scrollbar-track, #ffffff);
}

.input-group .btn-primary:hover {
  filter: brightness(1.05);
}

/* --------------------------------------------------------------------------
   Event home — Our Judges (common.css was never linked; styles lived in
   home.blade.php inline until removed — keep tokens + layout here)
   -------------------------------------------------------------------------- */
.judges-row {
  width: 100%;
  margin-top: 150px;
  margin-bottom: -130px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.judges-each-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0 0 160px 0;
}

.judges-each-box > .pic-holder {
  width: 80%;
  height: 200px;
  padding: 8px;
  margin: 0 auto;
  position: absolute;
  top: -130px;
  left: 0;
  right: 0;
  z-index: 1;
  border: 1px solid var(--theme-border, #ababab);
  box-sizing: border-box;
}

.judges-each-box > .pic-holder > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
}

.judges-each-box > .content-box {
  width: 100%;
  padding: 90px 20px 20px;
  background-color: var(--theme-secondary, #fbb03b) !important;
}

.judges-each-box > .content-box > .judge-name,
.judges-each-box > .content-box > .judge-role,
.judges-each-box > .content-box > .para-txt,
.judges-each-box > .content-box > .sc-link-row > li > a > i {
  color: var(--theme-button-secondary-text, #111111);
}

.judges-each-box > .content-box > .judge-name {
  font: 600 25px/1.1 "Poppins", sans-serif !important;
  text-align: center;
  margin: 0 auto;
}

.judges-each-box > .content-box > .judge-role {
  font: 400 14px/1.1 "Poppins", sans-serif !important;
  letter-spacing: 1px;
  text-align: center;
  margin: 10px auto;
}

.judges-each-box > .content-box > .para-txt {
  font: 400 12px/1.5 "Poppins", sans-serif !important;
  text-align: center;
  margin: 0 auto;
}

.judges-each-box > .content-box > .sc-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 15px auto 0;
  list-style-type: none;
}

.judges-each-box > .content-box > .sc-link-row > li {
  padding: 0 5px;
}

.judges-each-box > .content-box > .sc-link-row > li > a:hover > i {
  opacity: 0.6;
}

@media only screen and (max-width: 991px) {
  .judges-row {
    display: block;
    margin: 20px auto 0;
  }

  .judges-each-box {
    height: auto;
    display: block;
    margin: 0 auto 20px;
    padding: 0;
    max-width: 300px;
  }

  .judges-each-box > .pic-holder {
    width: auto;
    height: 250px;
    position: unset;
  }

  .judges-each-box > .content-box {
    padding: 20px;
  }
}