/* =========================================================
   TeedUp layout adjustments (Oct 2026)
   Loaded after main.css (see teedup_scripts() in functions.php).
   Deleting this file + its enqueue restores the previous layout.

   1. Banner text starts at the top of every banner (just under the
      fixed header) on all screen sizes, so it is visible without
      scrolling.
   2. Compact FAQ accordion for the shared FAQ section on inner pages
      (main FAQ page is excluded) so 10+ questions fit on one screen.
   ========================================================= */

/* Space between the top of the banner and its text = fixed header + gap */
:root {
  --tu-hero-top: 220px;
}

@media (max-width: 1536px) {
  :root { --tu-hero-top: 158px; }
}

@media (max-width: 1366px) {
  :root { --tu-hero-top: 140px; }
}

@media (max-width: 1024px) {
  :root { --tu-hero-top: 128px; }
}

@media (max-width: 767px) {
  :root { --tu-hero-top: max(112px, calc(env(safe-area-inset-top) + 100px)); }
}

/* Landscape phones (short screens) */
@media (max-width: 767px) and (max-height: 560px) {
  :root { --tu-hero-top: max(100px, calc(env(safe-area-inset-top) + 92px)); }
}

/* ---------------------------------------------------------
   1. BANNERS
   --------------------------------------------------------- */

/* Shared inner-page banner (hero-banner.php), product page and
   membership banner: all are .product-hero inside .site-main */
html body .site-main > .product-hero {
  align-items: flex-end !important;
}

/* Default pages, blog article, archive and search banners */
html body .site-main .default-page__hero,
html body .site-main .journal-article__hero,
html body .site-main .archive-page__hero,
html body .site-main .search-results-page__hero {
  align-items: flex-start !important;
}

/* Home page slider banner - desktop (flex layout) */
@media (min-width: 992px) {
  html body .site-main > .hero {
    align-items: flex-end !important;
    padding-bottom: 80px;
  }

  html body .site-main > .hero .hero__content {
    margin-top: 0 !important;
    padding-top: var(--tu-hero-top) !important;
  }
}

/* Home page slider banner - tablet (text is absolutely positioned) */
@media (min-width: 768px) and (max-width: 991px) {
  html body .site-main > .hero .hero__content {
    top: var(--tu-hero-top) !important;
    bottom: auto !important;
  }
}

/* Top spacing: fixed header height + gap */
html body .site-main > .product-hero,
html body .site-main .default-page__hero,
html body .site-main .journal-article__hero,
html body .site-main .archive-page__hero,
html body .site-main .search-results-page__hero {
  padding-top: var(--tu-hero-top) !important;
}

/* Landscape phones: let the banner grow if its text is taller than the
   screen, so buttons are never cut off at the bottom */
@media (max-width: 767px) and (max-height: 560px) {
  html body .site-main > .product-hero {
    height: auto !important;
    max-height: none !important;
  }
}

/* Home page slider banner (mobile): text was pinned to the bottom */
@media (max-width: 767px) {
  /*html body .site-main > .hero .hero__content {
    top: var(--tu-hero-top) !important;
    bottom: auto !important;
  }*/
	html body .site-main > .product-hero {
	  align-items: flex-end !important;
	}
   /* .site-main>.product-hero .product-hero__content {
        gap: clamp(8px, 1.6svh, 14px) !important;
    } */
	/*.site-main>.product-hero :is(.product-hero__intro, .product-hero__copy, .product-hero__copy p) {
        font-size: clamp(14px, 2.2svh, 18px) !important;
    }*/
	html body .site-main .default-page__hero, html body .site-main .journal-article__hero, html body .site-main .archive-page__hero, html body .site-main .search-results-page__hero {
		align-items: flex-end !important;
	}
}

/* ---------------------------------------------------------
   2. SHARED FAQ SECTION - inner pages only (not the FAQ page)
   --------------------------------------------------------- */

html body .site-main:not(.faq-page) .product-faq .product-faq__question {
  min-height: 0 !important;
  padding: 9px 30px 9px 0 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
}

html body .site-main:not(.faq-page) .product-faq .product-faq__answer {
  padding: 0 32px 12px 0 !important;
}

html body .site-main:not(.faq-page) .product-faq .product-faq__answer,
html body .site-main:not(.faq-page) .product-faq .product-faq__answer p,
html body .site-main:not(.faq-page) .product-faq .product-faq__answer li {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

html body .site-main:not(.faq-page) .product-faq .product-faq__answer p + p {
  margin-top: 6px !important;
}

/* Home FAQ uses the same final typography as the membership FAQ cards. */
html body .site-main #home-faq-list .product-faq__question,
html body .site-main #home-faq-list .product-faq__question[aria-expanded="true"] {
  font-family: "Montserrat", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

html body .site-main #home-faq-list .product-faq__answer,
html body .site-main #home-faq-list .product-faq__answer p,
html body .site-main #home-faq-list .product-faq__answer li {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Section heading block sits a little closer to the accordion */
html body .site-main:not(.faq-page) .product-faq .product-faq__header {
  margin-bottom: 28px !important;
}

@media (max-width: 1024px) {
  html body .site-main:not(.faq-page) .product-faq .product-faq__question {
    font-size: 15px !important;
  }

  html body .site-main:not(.faq-page) .product-faq .product-faq__answer,
  html body .site-main:not(.faq-page) .product-faq .product-faq__answer p,
  html body .site-main:not(.faq-page) .product-faq .product-faq__answer li {
    font-size: 14px !important;
  }

  html body .site-main #home-faq-list .product-faq__question,
  html body .site-main #home-faq-list .product-faq__question[aria-expanded="true"] {
    font-size: 15px !important;
  }

  html body .site-main #home-faq-list .product-faq__answer,
  html body .site-main #home-faq-list .product-faq__answer p,
  html body .site-main #home-faq-list .product-faq__answer li {
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  html body .site-main:not(.faq-page) .product-faq .product-faq__accordion {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body .site-main:not(.faq-page) .product-faq .product-faq__question, .product-faq__question {
    /*padding: 7px 22px 7px 0 !important;*/
	/*font-size: 14px !important;
    line-height: 1.25 !important;*/
    font-size: 18px !important;
    line-height: 22px !important;
	font-weight:700 !important;
  }

  html body .site-main:not(.faq-page) .product-faq .product-faq__answer {
    padding: 0 18px 8px 0 !important;
  }

  html body .site-main:not(.faq-page) .product-faq .product-faq__answer,
  html body .site-main:not(.faq-page) .product-faq .product-faq__answer p,
  html body .site-main:not(.faq-page) .product-faq .product-faq__answer li {
    /*font-size: 13px !important;
    line-height: 1.4 !important;*/
	font-size: 14px !important;
    line-height: 22px !important;
  }

  html body .site-main:not(.faq-page) .product-faq .product-faq__header {
    margin-bottom: 20px !important;
  }

  html body .site-main #home-faq-list .product-faq__question,
  html body .site-main #home-faq-list .product-faq__question[aria-expanded="true"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
  }

  html body .site-main #home-faq-list .product-faq__answer,
  html body .site-main #home-faq-list .product-faq__answer p,
  html body .site-main #home-faq-list .product-faq__answer li {
    font-size: 14px !important;
    line-height: 22px !important;
  }
}

/* ---------------------------------------------------------
   3. DESKTOP HEADER — fits 5 left-hand items (incl. Club Fitting)
   Replaces the fixed 20/16/14/12px steps with one fluid scale so the
   menu never runs into the centre logo at any desktop width.
   12px @1200 → 18px @1920+ (padding 10px → 20px).
   --------------------------------------------------------- */
@media (min-width: 1200px) {
  html body .site-header {
    --hdr-font: clamp(12px, calc(0.8333vw + 2px), 18px);
    --hdr-pad: clamp(10px, calc(1.3889vw - 6.67px), 20px);
  }

  html body .site-header .site-header__nav > a:not(.btn):not(.icon-link),
  html body .site-header .nav-item > button {
    font-size: var(--hdr-font);
    padding-inline: var(--hdr-pad);
    white-space: nowrap;
  }

  html body .site-header .nav-item > button {
    padding-right: max(8px, calc(var(--hdr-pad) - 6px));
  }

  html body .site-header .site-header__nav--right > .btn {
    font-size: var(--hdr-font);
    padding-inline: calc(var(--hdr-pad) + 4px);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------
   4. MOBILE HEADER — "download app" phone icon (left of Join / Book)
   --------------------------------------------------------- */
.site-header__app-link {
      display: inline-flex
;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-header__app-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

.site-header__app-link:hover,
.site-header__app-link:focus-visible {
  border-color: var(--color-brand-lime, #e3f956);
  color: var(--color-brand-forest, #003415);
  background: var(--color-brand-lime, #e3f956);
}

.site-header__app-link:focus-visible {
  outline: 2px solid var(--color-brand-lime, #e3f956);
  outline-offset: 2px;
}

/* Small phones: tighten the quick actions so the extra icon never touches the logo. */
@media (max-width: 374px) {
  html body .site-header .site-header__mobile-actions {
    gap: 4px;
  }

  html body .site-header .site-header__mobile-actions .btn {
    width: max-content !important;
    /* min-width: 52px !important;
    max-width: 52px !important; */
    flex: 0 0 52px !important;
    font-size: 12px;
  }

  .site-header__app-link {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .site-header__app-link svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------
   5. MEMBERSHIP PACKAGE NAMES (Home + Membership page)
   Larger, one consistent scale: 24px on phones → 38px on large screens.
   Centered on phones.
   --------------------------------------------------------- */
html body .site-main .benefits--plans .membership-card h3 {
  font-size: clamp(24px, calc(1.1vw + 17px), 38px);
  line-height: 1.2;
}

@media (max-width: 767px) {
  html body .site-main .benefits--plans .membership-card h3 {
    display: block;
    width: 100%;
    max-width: none;
    align-self: stretch;
    margin-bottom: 16px;
    text-align: center;
  }
}
/* The header Tee Times action is intentionally phone-only. */
@media (min-width: 768px) {
  html body .site-header .mbl-tee-btn {
    display: none !important;
  }
}

/* Keep the UserWay accessibility launcher at the bottom edge of the viewport. */
#userwayAccessibilityIcon {
  top: 0 !important;
  bottom: auto !important;
}


/* Home instructors slider: horizontal cards, two per slide on desktop, one when alone. */
.site-main .instructors--slider .instructors__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.site-main .instructors--slider .instructors__track::-webkit-scrollbar {
  display: none;
}

.site-main .instructors--slider .instructors__slide {
  display: grid;
  flex: 0 0 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  scroll-snap-align: start;
}

.site-main .instructors--slider .instructors__slide--single {
  grid-template-columns: minmax(0, calc((100% - 24px) / 2));
  justify-content: center;
}

.site-main .instructors--slider .instructors__card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 328fr) minmax(0, 460fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "media body"
    "media button";
  column-gap: 20px;
  border-radius: 20px;
  padding: 20px;
  background: #ffffff;
}

.site-main .instructors--slider .instructors__media {
  grid-area: media;
  height: 100%;
  min-height: 346px;
  margin: 0;
  aspect-ratio: auto;
}

.site-main .instructors--slider .instructors__media img {
  position: absolute;
  inset: 0;
}

.site-main .instructors--slider .instructors__badge {
  z-index: 1;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-main .instructors--slider .instructors__body {
  grid-area: body;
  min-width: 0;
  margin: 0 0 28px;
  padding-top: 2px;
}

.site-main .instructors--slider .instructors__button {
  grid-area: button;
  align-self: end;
}

/* Only one instructor: a single wider card centered in the section. */
.site-main .instructors--slider.instructors--single .instructors__slide--single {
  grid-template-columns: minmax(0, 1180px);
}

.site-main .instructors--slider.instructors--single .instructors__card {
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    "media ."
    "media body"
    "media button"
    "media .";
  column-gap: 40px;
  padding: 24px;
}

.site-main .instructors--slider.instructors--single .instructors__media {
  min-height: 443px;
}

.site-main .instructors--slider.instructors--single .instructors__body {
  padding-top: 0;
}

.site-main .instructors--slider.instructors--single .instructors__body h3 {
  font-size: 32px;
  line-height: 40px;
}

.site-main .instructors--slider.instructors--single .instructors__button {
  justify-self: start;
  width: auto;
  min-width: 320px;
}

.site-main .instructors--slider .instructors__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}

/* Hide the arrows when every card already fits on screen. */
.site-main .instructors--slider .instructors__controls:not(:has(.instructors__control:not(.is-unavailable))) {
  display: none;
}

/* Tablet: one horizontal card per view. */
@media (max-width: 1199px) {
  .site-main .instructors--slider .instructors__slide {
    display: contents;
  }

  .site-main .instructors--slider .instructors__card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .site-main .instructors--slider.instructors--single .instructors__card {
    grid-template-columns: minmax(0, 328fr) minmax(0, 460fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "media body"
      "media button";
    column-gap: 20px;
    padding: 20px;
  }

  .site-main .instructors--slider.instructors--single .instructors__button {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .site-main .instructors--slider.instructors--single .instructors__media {
    min-height: 346px;
  }

  .site-main .instructors--slider.instructors--single .instructors__body h3 {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Mobile: stacked card, one per view. */
@media (max-width: 767px) {
  .site-main .instructors--slider .instructors__track {
    gap: 20px;
  }

  .site-main .instructors--slider .instructors__card,
  .site-main .instructors--slider.instructors--single .instructors__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "media"
      "body"
      "button";
    border-radius: 16px;
    padding: 16px;
  }

  .site-main .instructors--slider .instructors__media,
  .site-main .instructors--slider.instructors--single .instructors__media {
    height: auto;
    min-height: 0;
    margin-bottom: 24px;
    border-radius: 12px;
    aspect-ratio: 352 / 289;
  }

  .site-main .instructors--slider .instructors__body {
    margin-bottom: 24px;
    padding-top: 0;
  }

  .site-main .instructors--slider.instructors--single .instructors__button {
    width: 100%;
    min-width: 0;
  }

  .site-main .instructors--slider .instructors__controls {
    margin-top: 32px;
  }
}