/* Unshakeable Sports - our own layer, loaded after the exported stylesheet.
   Never edit the exported CSS; put changes here so they survive a re-pull. */

/* -------------------------------------------------------------- ANCHORS
   The navbar is position:fixed and ~105px tall, so every in-page link
   (#team, #contact, #values, #register) used to land with its heading
   hidden underneath it. Reserve the nav's height on every anchor jump. */
html {
  scroll-padding-top: 7.5rem;
  scroll-behavior: smooth;
}

@media screen and (max-width: 991px) {
  html {
    scroll-padding-top: 7rem;
  }
}

/* ---------------------------------------------------------------- TOUCH
   44px is the minimum comfortable tap target. Grow with padding, never by
   changing `display` - the export mixes block/inline-block/flex buttons and
   switching display resizes half of them. Scoped under 992px so the desktop
   layout is untouched. */
@media screen and (max-width: 991px) {
  .nav_link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .navbar_logo-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .navbar1_menu-button {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon-sized controls get an invisible hit area instead of a bigger box,
     so nothing shifts visually. */
  .w-backgroundvideo-backgroundvideoplaypausebutton {
    position: relative;
  }
  .w-backgroundvideo-backgroundvideoplaypausebutton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
  }

  .made-by-wrapper {
    position: relative;
    padding-block: 0.5rem;
  }
  .made-by-wrapper::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* 44px on every size, not just phones. A mouse copes with 40px, but there is
   no reason for the buttons and nav links to sit under the bar. */
input.button[type="submit"],
.button,
.nav_link,
.navbar_logo-link {
  min-height: 44px;
}

.button,
.nav_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The hero's background-video pause control ships at 40px square. */
.w-backgroundvideo-backgroundvideoplaypausebutton {
  min-width: 44px;
  min-height: 44px;
}

/* -------------------------------------------------------- CAROUSEL DOTS
   These shipped 12px tall with a 4px gap, which is a hard thing to hit on a
   phone. Grown, spaced, and given an invisible 44px-tall hit area that
   extends exactly half the gap each side, so the boxes never OVERLAP. An
   overlapping hit box is worse than a small one: every tap lands on the
   neighbouring dot. */
.swiper-bullet-wrapper {
  grid-column-gap: 0.75rem;
  gap: 0.75rem;
}

.swiper-bullet {
  position: relative;
  width: 1rem;
  height: 1rem;
}

.swiper-bullet.is-active {
  width: 3.5rem;
}

.swiper-bullet::after {
  content: "";
  position: absolute;
  left: -0.375rem;
  right: -0.375rem;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* ----------------------------------------------------------------- FORMS
   Under 16px iOS zooms the whole page the moment a field is focused, which
   wrecks a half-filled form. */
.form_input,
input[type="text"],
input[type="email"],
textarea,
select {
  font-size: max(16px, 1rem);
}

/* Our own handler drives these; keep them hidden until it shows one. */
.footer_form-block .w-form-done,
.footer_form-block .w-form-fail,
.contact_form-block .w-form-done,
.contact_form-block .w-form-fail {
  display: none;
}

/* ------------------------------------------------------- CONTACT FORM
   The export shipped .contact_form styles (a two-column grid) but no page
   ever used them. The message box and the submit button span both columns;
   on a phone the whole thing collapses to one. */
.contact_form .form_field-label {
  display: block;
}

.contact_form input[type="submit"] {
  cursor: pointer;
}

.contact_form .form_input.is-text-area {
  min-height: 9rem;
  resize: vertical;
}

@media screen and (max-width: 767px) {
  /* Full-width button on a phone, where a thumb wants the whole row. */
  .contact_form input[type="submit"] {
    align-self: stretch;
  }
}

/* The success and error notes sit under the form, not beside it. */
.contact_form-block .success-message,
.contact_form-block .error-message {
  margin-top: 1rem;
}

/* Two forms stacked under Contact Us: ask a question, and subscribe for
   updates. Both post to the HoopLife app; there is no email address on this
   site, so these are the only way in besides the phone. */
.contact_forms {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

/* Each form sits in its own panel so the two never read as one run-on block. */
.contact_forms .contact_form-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.25rem;
  padding: 2rem;
}

@media screen and (min-width: 992px) {
  .contact_forms {
    /* The question form earns more room; it has a message box. */
    grid-template-columns: 1.25fr 1fr;
    gap: 2rem;
    /* Stretch, not start: the two panels used to end at different heights
       because the question form is taller, which read as a mistake. */
    align-items: stretch;
  }
  .contact_forms .contact_form-block {
    padding: 2.5rem;
  }
}

/* Both panels are the same height, so let each form fill its panel and push
   its button to the bottom. The two buttons then sit on the same line. */
.contact_forms .contact_form-block {
  display: flex;
  flex-direction: column;
}

.contact_forms .contact_form {
  flex: 1;
  align-content: start;
}

.contact_form input[type="submit"] {
  align-self: start;
  margin-top: auto;
}

@media screen and (max-width: 991px) {
  /* Stacked on a phone, so a stretched button would float oddly far down. */
  .contact_form input[type="submit"] {
    margin-top: 0.5rem;
  }
}

/* ------------------------------------------------- PHONE AND ADDRESS
   The export built this as a THREE column grid for email, phone and address.
   The email is gone, so two cards sat squashed into the left two thirds and
   looked misaligned. Centred row now, sized to their content. */
.contact_contact-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  grid-template-columns: none !important;
  width: 100%;
  margin-top: 3rem;
}

.contact_contact-list .contact_item {
  flex: 0 1 22rem;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 1.25rem 1.5rem;
  min-height: 5.5rem;
}

@media screen and (max-width: 575px) {
  .contact_contact-list .contact_item {
    flex: 1 1 100%;
  }
}

.contact_form-block > .margin-bottom:first-child .text-weight-semibold {
  font-size: 1.25rem;
}

/* A flex column, not the export's grid: grid cannot push the submit button to
   the bottom of a taller panel, because margin-top:auto only works inside an
   item's own grid area, never the container's leftover space. The paired
   Name/Email fields get their own grid row inside it. */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact_form_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* The subscribe form has no message box, so side-by-side fields left a big
   void above its button once both panels were made the same height. Stacked,
   it fills its panel and reads as a deliberate column. */
#hl-updates-form .contact_form_row {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (max-width: 575px) {
  .contact_form_row {
    grid-template-columns: 1fr;
  }
}

.contact_form .form_field-label {
  margin-bottom: 0.4rem;
  color: var(--base-color-brand--lightest-primary);
  font-size: 0.9rem;
}

.contact_form .form_input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.25);
}

.contact_form .form_input::placeholder {
  /* The export's placeholder is near-black, which vanishes on this navy. */
  color: rgba(255, 255, 255, 0.45);
}

.contact_form .form_input:focus {
  border-color: var(--base-color-brand--lightest-primary);
  padding-left: 1rem;
  outline: none;
}

/* NOTE: submit button placement is set once, in the CONTACT FORM block above
   (align-self:start + margin-top:auto so the two panels' buttons line up).
   A second margin-top rule used to live here and silently won by being
   later in the file. Do not reintroduce one. */

/* ------------------------------------------------------------- FOOTER
   The newsletter signup moved up into Contact Us, so the footer's right-hand
   column is gone. Let the remaining brand and links block use the full width
   instead of hugging the left edge of a two-column grid. */
.footer_top-wrapper {
  grid-template-columns: 1fr;
}

/* -------------------------------------------------------------- EMBEDS
   The registration embed is a fixed-height iframe. On a phone the 16:9
   padding trick leaves a tall empty band below the cards, so let the
   declared min-height do the work instead. */
@media screen and (max-width: 767px) {
  .event_embed > div {
    padding-bottom: 0 !important;
    height: auto !important;
    min-height: 620px;
  }
  .event_embed iframe {
    position: relative !important;
    height: 620px !important;
  }
}

/* --------------------------------------------------------------- VIDEO
   The HoopLife x Unshakeable film. Deliberately a click-to-play facade, not a
   live YouTube iframe: the real player pulls in about a megabyte of script
   before anyone has decided to watch, and this site is judged on the phone
   first. js/site.js swaps in the player, already playing, on click. */
.hl-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Properly rounded, not a hard-cornered box. */
  border-radius: 2rem;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.45);
  /* Safari drops the corner clip on a transformed child without this. */
  isolation: isolate;
  transform: translateZ(0);
}

.hl-video_play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.hl-video_thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A soft wash so the play button always has contrast to sit on. */
.hl-video_play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
  transition: background 0.25s;
}

.hl-video_play:hover::after,
.hl-video_play:focus-visible::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
}

.hl-video_button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: clamp(4.25rem, 9vw, 6rem);
  transition: transform 0.25s;
}

.hl-video_button svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.45));
}

/* Brand red rather than YouTube red, so it reads as ours. */
.hl-video_shape {
  fill: #bf202f;
  transition: fill 0.25s;
}

.hl-video_play:hover .hl-video_button,
.hl-video_play:focus-visible .hl-video_button {
  transform: translate(-50%, -50%) scale(1.08);
}

.hl-video_play:hover .hl-video_shape {
  fill: #d8242f;
}

.hl-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 767px) {
  .hl-video {
    border-radius: 1.25rem;
  }
}

/* ----------------------------------------------------------- ACCORDION
   The Statement of Faith panel. Webflow's own interaction engine used to
   animate this; js/site.js drives it now, so the motion lives here. */
.accordion_bottom {
  height: 0;
  transition: height 0.35s ease;
}

.accordion_icon {
  transition: transform 0.35s ease;
}

/* The icon is a plus; a quarter turn makes it a close cross. */
.accordion_component.is-open .accordion_icon {
  transform: rotate(45deg);
}

.accordion_top:focus-visible {
  outline: 2px solid #79b0d2;
  outline-offset: -2px;
  border-radius: var(--corner-radius--medium, 0.8rem);
}

/* Room under the text when the panel is open. */
.accordion_component.is-open .accordion_bottom {
  padding-bottom: 0.5rem;
}

/* ------------------------------------------------- CLOSING MISSION
   The mission repeats at the very bottom of the page. */
.section_closing-mission {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.closing-mission_verse {
  color: var(--base-color-brand--lightest-primary);
  max-width: 38rem;
  margin-inline: auto;
}

.section_closing-mission .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ------------------------------------------------------------ MOTION */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- FOCUS
   The export removes focus rings; keyboard users need them back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #79b0d2;
  outline-offset: 2px;
  border-radius: 4px;
}