/* Site-wide typography scale & weight normalization */
:root {
  --type-hero: clamp(36px, 4vw, 45px);
  --type-h2: clamp(36px, 3.2vw, 50px);
  --type-h3: clamp(20px, 1.8vw, 24px);
  --type-eyebrow: 13px;
  --type-subtitle: clamp(16px, 1.2vw, 18px);
  --type-body: 16px;
  --font-bold: 700;
}

html,
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

p,
li,
dt,
dd,
td,
th,
figcaption,
blockquote,
span,
a,
button,
label,
input,
textarea,
select,
h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  transform: translateY(-140%);
  padding: 12px 18px;
  border-radius: 10px;
  background: #111;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #c8f542;
  outline-offset: 4px;
}

header.white-header a:focus-visible,
header.white-header button:focus-visible,
.instructor-card a:focus-visible {
  outline-color: #0a7b4a;
}

/* Display hero (Montserrat) */
.hero-v2 .hero-title-main,
.hero-v2 .hero-title-line {
  font-weight: 800 !important;
}

/* Page hero titles */
.sub-hero h1,
.program-hero h1,
.guide-hero h1,
.notice-hero h1,
.about-reference-copy h1,
.rental-title-main,
h1.page-title {
  font-size: 55px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.facilities-hero h1 {
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Section titles (H2) */
h2.title-large,
h2.section-title,
.experience-header h2,
.facility-intro-copy h2,
.facility-section-title.centered h2,
.guide-section-heading h2,
.about-landmark-copy h2,
.section-header-left h2,
.notice-detail-header #detail-title,
.inquiry-info-title,
.facilities-page .facility-showcase-copy h3,
.facility-cta h2,
.cta-promo-text {
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Card / block titles (H3) */
h3,
.floating-menu-title,
.experience-card-title,
.program-card-title,
.news-title,
.notice-column-title,
.facility-card-body h3,
.facility-strengths h3,
.guide-summary-card h3,
#detail-title {
  font-size: var(--type-h3) !important;
  font-weight: var(--font-bold) !important;
  line-height: 1.3 !important;
}

/* Eyebrow / kicker / section label */
.label-teal,
.label-orange,
.facilities-eyebrow,
.program-eyebrow,
.notice-hero-copy > span,
.guide-section-heading > span,
.facility-intro-copy > span,
.facility-section-title.centered > span,
.program-intro-copy > span,
.program-section-head span,
.booking-title > span,
.notice-list-heading span,
.inquiry-info-label,
.about-reference-copy > span,
.rental-subtitle-small,
.faq-title p {
  font-size: var(--type-eyebrow) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: 0.08em;
}

.hero-v2 .hero-kicker {
  font-size: clamp(16px, 1.5vw, 22px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}

.facilities-eyebrow,
.program-eyebrow,
.guide-eyebrow,
.notice-hero-copy > span,
.instructors-hero-inner > span {
  color: #c8f542 !important;
  font-size: var(--type-eyebrow) !important;
  font-weight: var(--font-bold) !important;
  letter-spacing: 0.08em !important;
}

.hero-v2 .hero-subtitle-small {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Subtitle / lead copy */
.hero-subtitle-medium,
.subtitle-desc,
.floating-menu-desc,
.experience-card-desc,
.program-info-row,
.news-desc,
.notice-row-subtext,
.facilities-hero-copy > p:last-child,
.guide-hero > div > p:last-child,
.program-hero-copy > p:last-child,
.notice-hero-copy > p:last-child,
.guide-section-heading p,
.facility-section-title.centered p,
.facility-intro-copy p,
.program-intro-copy p,
.rental-intro-copy p,
.rental-page .program-section-head > p,
.notice-list-heading p,
.inquiry-info-card p:last-child,
.faq-answer-inner,
.about-reference-copy p,
.rental-title-desc,
.cta-promo-subtext {
  font-size: var(--type-subtitle) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Cap heavy font weights site-wide */
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
th,
button,
.btn-orange,
.btn-white-outline,
.btn-card-reserve,
.btn-all-view,
.btn-nav-reserve-common,
.nav-links-common a,
.label-teal,
.label-orange,
[class*="title"],
[class*="heading"],
[class*="eyebrow"],
[class*="kicker"] {
  font-weight: var(--font-bold);
}

@media (max-width: 768px) {
  :root {
    --type-eyebrow: 12px;
  }

  .today-programs .header-row-flex .title-large {
    font-size: var(--type-h2) !important;
  }

  .cta-promo-btn,
  .guide-cta a,
  .program-cta a,
  .facility-cta a,
  .instructor-cta a,
  .about-landmark-cta a,
  .rental-download-btn,
  .rental-btn-submit {
    width: fit-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    justify-content: center !important;
  }
}
