/* Replacements for layout that Squarespace's scripts used to set at runtime. */

/* About page background video: cover the section at any size */
.sqs-video-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
.sqs-video-background iframe.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  /* oversized so YouTube's title bar and logo fall outside the section */
  transform: translate(-50%, -50%) scale(1.3);
  border: 0;
  pointer-events: none;
}

/* Navy buttons on light sections: white text and an inset white ring
   instead of the original red text */
[data-section-theme="light"] :is(.sqs-block-button-element, .form-submit-button),
[data-section-theme="light"] .form-submit-button-label {
  color: #fff !important;
}
[data-section-theme="light"] :is(.sqs-block-button-element, .form-submit-button) {
  box-shadow: inset 0 0 0 5px rgb(0, 37, 102), inset 0 0 0 7px #fff;
}

/* Events dropdown in the header: keyboard users get it on focus, and the
   caret flips on hover via the template's .header-dropdown-flip rule */
.header-nav .header-nav-item--folder:focus-within .header-nav-folder-content {
  display: block;
  pointer-events: auto;
}
.header-nav-folder-title { display: inline-flex; align-items: center; gap: .35em; }
.header-dropdown-flip svg { display: block; width: .6em; height: auto; }
.header-nav .header-nav-item--folder:hover .header-dropdown-flip svg { transform: none; }
.header-nav .header-nav-folder-content .header-nav-folder-item { padding: .25em 0; }
.header-menu-nav-item--folder .chevron { margin-left: .3em; }

/* Events page */
.asp-events {
  --asp-red: #a61315;
  padding: calc(var(--header-height, 125px) + 2vw) var(--sqs-site-gutter, 4vw) 6vw;
  color: var(--paragraphMediumColor);
}
.asp-events h1, .asp-events h2 {
  font-family: var(--heading-font-font-family);
  font-weight: var(--heading-font-font-weight);
  letter-spacing: var(--heading-font-letter-spacing);
  text-transform: uppercase;
  line-height: 1;
  color: var(--headingExtraLargeColor);
  margin: 0;
}
.asp-events h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
.asp-events-intro p { max-width: 34em; margin: 1em 0 0; }

/* Each event is a white bar with a navy ring line that opens to its videos */
.asp-event { margin-top: 1rem; scroll-margin-top: 1.5rem; }
.asp-events [hidden] { display: none !important; }

/* Filter (All / Boxing / Kickboxing) and sort controls above the list */
.asp-events-tools {
  --asp-navy: #002566;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); color: var(--asp-navy);
}
.asp-events-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.asp-events-filter button, .asp-events-sort select {
  font: inherit; color: var(--asp-navy); background: #fff;
  border: 2px solid var(--asp-navy); border-radius: 0; padding: .45em 1em; cursor: pointer;
}
.asp-events-filter button:hover { background: var(--asp-navy); color: #fff; }
.asp-events-filter button[aria-pressed="true"] { background: var(--asp-navy); color: #fff; }
.asp-events-filter button:focus-visible, .asp-events-sort select:focus-visible {
  outline: 3px solid var(--asp-red); outline-offset: 2px;
}
.asp-events-sort { display: flex; align-items: center; gap: .6em; }
.asp-event-list { margin-top: clamp(1.5rem, 3vw, 2rem); }
.asp-events-tools[hidden] + .asp-event-list { margin-top: clamp(2.5rem, 5vw, 4rem); }
.asp-event-list > .asp-event:first-child { margin-top: 0; }
.asp-events-none { margin: 1.5rem 0 0; opacity: .75; }
.asp-event-head {
  --asp-bar: #fff;
  --asp-navy: #002566;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25em 1.25em;
  padding: 1.25rem 1.75rem;
  background: var(--asp-bar); color: var(--asp-navy);
  box-shadow: inset 0 0 0 5px var(--asp-bar), inset 0 0 0 7px var(--asp-navy);
  cursor: pointer; list-style: none; user-select: none;
  transition: background-color .15s;
}
.asp-event-head::-webkit-details-marker { display: none; }
.asp-event-head:hover { box-shadow: inset 0 0 0 4px var(--asp-bar), inset 0 0 0 9px var(--asp-navy); }
.asp-event-head:focus-visible { outline: 3px solid var(--asp-red); outline-offset: 3px; }
.asp-events .asp-event-head h2 { color: var(--asp-navy); font-size: clamp(1.75rem, 4vw, 3rem); }
.asp-event-meta { opacity: .85; }
.asp-event-sport {
  border: 2px solid; padding: .15em .55em;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.asp-event-toggle {
  margin-left: auto; width: .8rem; height: .8rem; flex: none;
  border-right: 3px solid; border-bottom: 3px solid;
  transform: translateY(-25%) rotate(45deg); transition: transform .2s;
}
.asp-event[open] .asp-event-toggle { transform: translateY(25%) rotate(-135deg); }
.asp-event-panel { padding: 1.25rem 0 2.5rem; }
.asp-event-yt { display: inline-block; margin-bottom: 1rem; color: inherit; }
.asp-event-empty { margin: 0; opacity: .75; }

.asp-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.asp-player iframe, .asp-player-start, .asp-player-start img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.asp-player-start img { object-fit: cover; }
.asp-play {
  position: absolute; top: 50%; left: 50%; width: 84px; height: 84px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--asp-red); box-shadow: 0 0 0 4px #fff;
  transition: transform .15s;
}
.asp-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #fff;
}
.asp-player-start:hover .asp-play, .asp-player-start:focus-visible .asp-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.asp-fights {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.asp-fights a { display: block; color: inherit; text-decoration: none; }
.asp-fight-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.asp-fight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.asp-fights a:hover img, .asp-fights a:focus-visible img { transform: scale(1.04); }
.asp-fight-title { display: block; margin-top: .5em; line-height: 1.3; }
.asp-fights a[aria-current="true"] .asp-fight-thumb::after {
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--asp-red);
}
.asp-fights a[aria-current="true"] .asp-fight-thumb img { opacity: .85; }
.asp-fights a[aria-current="true"] .asp-fight-title { color: var(--asp-red); }

/* Desktop: fight list beside the player, scrolling at the player's height */
@media (min-width: 1024px) {
  .asp-event-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; }
  .asp-fights-wrap { position: relative; }
  .asp-fights {
    position: absolute; inset: 0; margin: 0; padding-right: .5rem; overflow-y: auto;
    display: flex; flex-direction: column; gap: .9rem;
  }
  .asp-fights a { display: grid; grid-template-columns: 45% 1fr; gap: .75rem; align-items: start; }
  .asp-fight-title { margin-top: 0; }
  /* fade the bottom edge while more videos are hidden below */
  .asp-fights-wrap.has-more .asp-fights {
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
  }
}

@media (max-width: 640px) {
  .asp-events { padding-inline: 16px; }
  .asp-event-head { padding: 1rem 1.25rem; }
  .asp-fights { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
  .asp-play { width: 64px; height: 64px; }
}

/* Home hero on phones. Squarespace's phone layout shrank the photo and put the
   white "LOUISIANA'S TOP PROMOTION" headline below it, on the light background,
   where it was invisible: a tall blank gap. Overlay it on the photo as desktop
   does (up in the dark sky, clear of faces), split over two lines (the auto-fit in site.js then sizes it to fill). */
@media (min-width: 768px) {
  .asp-phone-br { display: none; }
}
@media (max-width: 767px) {
  #page .fe-69b0e3bf9b710f6be32e1b02 { grid-template-rows: repeat(14, minmax(24px, auto)); }
  #page .fe-block-8e7b7220ae6c426d0f1c { grid-area: 1/1/15/11; margin-inline: 2vw; } /* edges line up with the text below (6vw) */
  #page .fe-block-01f2bbe0accc5692fcc3 { grid-area: 1/1/15/11; margin-inline: 2vw; z-index: 2; }
  #page .fe-block-01f2bbe0accc5692fcc3 .sqs-block { justify-content: flex-start; }
  #page .fe-block-01f2bbe0accc5692fcc3 .sqs-html-content { padding: 9% 6% 0; }
  #page .fe-block-01f2bbe0accc5692fcc3 strong { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
}

/* Tickets page (assets/tickets.js fills .asp-tix-app). Square corners, navy. */
.asp-tickets { --asp-navy: #002566; --asp-red: #ad0000; --asp-gold: #af8137; }
.asp-tix-event { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; }
.asp-tix-logo { width: min(260px, 70vw); height: auto; }
.asp-tix-when { margin: 0; font-weight: 700; color: var(--asp-navy); text-transform: uppercase; letter-spacing: .04em; }
.asp-star { color: var(--asp-gold); }
.asp-tix-app { margin-top: clamp(1.75rem, 4vw, 3rem); max-width: 640px; }
.asp-tix-card { background: #fff; border: 2px solid var(--asp-navy); padding: clamp(1.1rem, 3vw, 1.75rem); box-sizing: border-box; }
.asp-tickets .asp-tix-card h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--asp-navy); margin: 0 0 .6rem; }
.asp-tix-card p { margin: 0 0 1rem; }
.asp-tix-form { display: grid; gap: 1rem; }
.asp-tix-form label { display: grid; gap: .3rem; font-weight: 600; color: var(--asp-navy); }
.asp-tix-form input, .asp-tix-form select {
  font: inherit; font-size: 16px; color: #111; background: #fff;
  border: 2px solid var(--asp-navy); border-radius: 0; padding: .6em .7em; width: 100%; box-sizing: border-box;
}
.asp-tix-form input:focus-visible, .asp-tix-form select:focus-visible, .asp-tix-step button:focus-visible, .asp-tix-btn:focus-visible {
  outline: 3px solid var(--asp-gold); outline-offset: 2px;
}
.asp-tix-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.asp-tix-opt { font-weight: 400; color: #555; }
.asp-tix-check { display: flex !important; grid-template-columns: none; align-items: center; gap: .6rem; font-weight: 600; }
.asp-tix-check input { width: 1.3em; height: 1.3em; flex: none; accent-color: var(--asp-navy); }
.asp-tix-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.asp-tix-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--asp-navy); }
.asp-tix-row b { color: var(--asp-navy); font-size: 1.1em; }
.asp-tix-sub { display: block; font-size: .9em; color: #444; font-weight: 400; }
.asp-tix-step { display: flex; align-items: center; gap: .5rem; flex: none; }
.asp-tix-step button {
  width: 44px; height: 44px; font: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer;
  background: var(--asp-navy); color: #fff; border: 0; border-radius: 0;
}
.asp-tix-step button:disabled { background: #9a9a9a; cursor: default; }
.asp-tix-step output { min-width: 2ch; text-align: center; font-weight: 700; font-size: 1.2rem; color: var(--asp-navy); }
.asp-tix-total { margin: 0 !important; font-size: 1.1em; color: var(--asp-navy); }
.asp-tix-total b { font-size: 1.3em; }
.asp-tix-btn {
  font: inherit; font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--asp-navy); border: 0; border-radius: 0; padding: 1.05em 1.4em; cursor: pointer;
  box-shadow: inset 0 0 0 5px var(--asp-navy), inset 0 0 0 7px #fff;
}
.asp-tix-btn:disabled { background: #7a8bb0; box-shadow: inset 0 0 0 5px #7a8bb0, inset 0 0 0 7px #fff; cursor: default; }
.asp-tix-error { margin: 0 !important; padding: .6rem .8rem; border: 2px solid var(--asp-red); color: var(--asp-red); background: #fff; font-weight: 600; }
.asp-tix-note { padding: .6rem .8rem; border-left: 4px solid var(--asp-navy); background: #fff; }
.asp-tix-mock { padding: .6rem .8rem; border: 2px solid #b08400; background: #fff4d6; font-weight: 600; }
.asp-tix-fine { font-size: .9em; color: #444; margin: 0 !important; }
.asp-tix-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; margin: 2rem 0 .75rem; color: var(--asp-navy); font-weight: 600; }
.asp-tix-facts li::before { content: "\2605"; color: var(--asp-gold); margin-right: .45em; }
.asp-tickets > .asp-tix-fine { max-width: 640px; }
@media (max-width: 640px) {
  .asp-tix-two { grid-template-columns: 1fr; }
}
.asp-tix-card a { color: var(--asp-navy); text-decoration: underline; font-weight: 600; }

/* White everywhere; no light or gray-blue (asked 2026-10-30). Brand navy #002566 and red #AD0000 stay. */
:root { --lightAccent-hsl: 0,0%,100%; }
[data-section-theme="bright"] { --accent-hsl: 0,0%,100%; --safeLightAccent-hsl: 0,0%,100%; --safeDarkAccent-hsl: 0,0%,100%; }
.header-menu-bg { background-color: #fff !important; }
.header-skip-link.sqs-button-element--primary { background-color: #002566 !important; border-color: #002566 !important; color: #fff !important; }
/* About page: the founding-story box border matches the white border on the "Who we are" box. */
#block-bc4b52d26a577f0d9995 { --tweak-text-block-stroke-color: #fff; border-color: #fff !important; }
/* Cart page: navy title and a navy button like the rest of the site (was light blue). */
.cart-title { color: #002566 !important; }
.cart-continue-button {
  background-color: #002566 !important; border-color: #002566 !important; color: #fff !important;
  box-shadow: inset 0 0 0 5px rgb(0, 37, 102), inset 0 0 0 7px #fff;
}