/**
 * PR1MELAB UX/UI system — global tokens + consistency pass
 * Loads after responsive-system.css. Maps to legacy theme variables.
 */

:root {
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-padding-desktop: 32px;
  --container-padding-tablet: 24px;
  --container-padding-mobile: 20px;

  --section-y-desktop: clamp(96px, 8vw, 136px);
  --section-y-tablet: clamp(72px, 7vw, 104px);
  --section-y-mobile: clamp(56px, 12vw, 76px);

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 80px;

  --hero-title-size: clamp(42px, 7vw, 88px);
  --page-title-size: clamp(38px, 5.5vw, 72px);
  --section-title-size: clamp(30px, 4vw, 56px);
  --card-title-size: clamp(20px, 1.6vw, 28px);
  --body-size: clamp(16px, 1.1vw, 18px);
  --small-size: clamp(12px, 0.85vw, 14px);

  --hero-line-height: 0.96;
  --title-line-height: 1.06;
  --body-line-height: 1.65;

  --text-max: 720px;
  --text-narrow: 620px;
  --text-wide: 920px;

  --btn-height: 52px;
  --btn-padding-x: 28px;
  --btn-radius: 14px;

  --card-radius: 24px;
  --card-padding-desktop: 32px;
  --card-padding-mobile: 22px;
  --card-gap-desktop: 28px;
  --card-gap-mobile: 20px;

  --media-radius: 22px;
}

body:not(.dashboard-app-body) {
  --container-width: min(var(--container-max), 100%);
  --site-container-max: var(--container-max);
  --site-container-padding-desktop: var(--container-padding-desktop);
  --site-container-padding-mobile: max(var(--container-padding-mobile), env(safe-area-inset-left, 0px));
  --site-section-padding-y-desktop: var(--section-y-desktop);
  --site-section-padding-y-mobile: var(--section-y-mobile);
  --site-section-inner-y: var(--section-y-desktop);
  --site-section-padding-y-active: var(--section-y-desktop);
  --site-grid-gap-desktop: var(--card-gap-desktop);
  --site-grid-gap-mobile: var(--card-gap-mobile);
  --site-grid-gap-active: var(--card-gap-desktop);
  --site-card-padding-desktop: var(--card-padding-desktop);
  --site-card-padding-mobile: var(--card-padding-mobile);
  --site-card-padding-active: var(--card-padding-desktop);
  --site-button-min-height-desktop: var(--btn-height);
  --site-button-min-height-mobile: 48px;
  --button-min-height: var(--btn-height);
  --button-radius: var(--btn-radius);
  --global-text-size-desktop: var(--body-size);
  --global-text-size-mobile: clamp(13px, 3.2vw, 15px);
  --global-h1-size-desktop: var(--page-title-size);
  --global-h2-size-desktop: var(--section-title-size);
  --global-body-line-height: var(--body-line-height);
  --global-text-line-height: var(--body-line-height);
  --site-line-height-body: var(--body-line-height);
  --global-heading-line-height: var(--title-line-height);
  --hero-title-size-desktop: var(--hero-title-size);
  --hero-title-size-mobile: clamp(1.125rem, 4.5vw, 1.375rem);
  --hero-text-size-desktop: var(--body-size);
  --hero-text-size-mobile: clamp(13px, 3.2vw, 15px);
  --hero-title-line-height: var(--hero-line-height);
  --hero-content-width: var(--hero-content-max-width, var(--text-wide));
  --hero-content-max-width: var(--text-wide);
  --rs-section-y: var(--section-y-desktop);
  --rs-section-y-compact: var(--section-y-mobile);
  --rs-button-height: var(--btn-height);
  --rs-input-height: clamp(48px, 10vw, 54px);
  --rs-grid-gap: var(--card-gap-desktop);
  --rs-prose-max: var(--text-max);
}

@media (max-width: 1024px) {
  body:not(.dashboard-app-body) {
    --site-section-padding-y-active: var(--section-y-tablet);
    --site-section-inner-y: var(--section-y-tablet);
    --rs-section-y: var(--section-y-tablet);
  }
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) {
    --site-section-padding-y-active: var(--section-y-mobile);
    --site-section-inner-y: var(--section-y-mobile);
    --site-grid-gap-active: var(--card-gap-mobile);
    --site-card-padding-active: var(--card-padding-mobile);
    --container-padding: max(var(--container-padding-mobile), env(safe-area-inset-left, 0px));
    --rs-section-y: var(--section-y-mobile);
    --rs-section-y-compact: var(--section-y-mobile);
  }
}

/* Typography */
body:not(.dashboard-app-body) .hero-title {
  font-size: var(--hero-title-size-desktop, var(--hero-title-size));
  line-height: var(--hero-title-line-height, var(--hero-line-height));
  letter-spacing: -0.04em;
  max-width: min(var(--text-wide), 100%);
}

body:not(.dashboard-app-body) .hero-text {
  font-size: var(--hero-text-size-desktop, var(--body-size));
  line-height: var(--body-line-height);
  max-width: min(var(--text-max), 100%);
}

body:not(.dashboard-app-body) .programs-title,
body:not(.dashboard-app-body) .membership-title,
body:not(.dashboard-app-body) .partnerships-title,
body:not(.dashboard-app-body) .about-title,
body:not(.dashboard-app-body) .gym-gallery-title,
body:not(.dashboard-app-body) .faq-title,
body:not(.dashboard-app-body) .location-title,
body:not(.dashboard-app-body) .get-in-touch-title,
body:not(.dashboard-app-body) .bmi-title,
body:not(.dashboard-app-body) .strength-title {
  font-size: var(--section-title-size);
  line-height: var(--title-line-height);
  max-width: min(780px, 100%);
}

body:not(.dashboard-app-body) .programs-eyebrow,
body:not(.dashboard-app-body) .membership-eyebrow,
body:not(.dashboard-app-body) .partnerships-eyebrow,
body:not(.dashboard-app-body) .about-eyebrow,
body:not(.dashboard-app-body) .gym-gallery-eyebrow,
body:not(.dashboard-app-body) .faq-eyebrow,
body:not(.dashboard-app-body) .location-eyebrow,
body:not(.dashboard-app-body) .get-in-touch-eyebrow,
body:not(.dashboard-app-body) .bmi-eyebrow,
body:not(.dashboard-app-body) .strength-eyebrow {
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body:not(.dashboard-app-body) .programs-description,
body:not(.dashboard-app-body) .membership-text,
body:not(.dashboard-app-body) .partnerships-text,
body:not(.dashboard-app-body) .about-text,
body:not(.dashboard-app-body) .gym-gallery-text,
body:not(.dashboard-app-body) .faq-intro,
body:not(.dashboard-app-body) .location-text,
body:not(.dashboard-app-body) .get-in-touch-intro,
body:not(.dashboard-app-body) .bmi-text,
body:not(.dashboard-app-body) .strength-intro {
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  max-width: var(--text-max);
}

/* Hero layout — desktop center, mobile readable */
@media (min-width: 761px) {
  body:not(.dashboard-app-body) .hero-container,
  body.preview-editor-mode .hero-container {
    justify-content: center;
  }

  body:not(.dashboard-app-body) .hero-content,
  body.preview-editor-mode .hero-content {
    max-width: var(--hero-content-width, var(--text-wide));
    text-align: center;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body:not(.dashboard-app-body) .hero-title,
  body:not(.dashboard-app-body) .hero-text,
  body.preview-editor-mode .hero-title,
  body.preview-editor-mode .hero-text {
    text-align: center;
    margin-inline: auto;
  }

  body:not(.dashboard-app-body) .hero-actions,
  body.preview-editor-mode .hero-actions {
    justify-content: center;
    width: 100%;
    gap: var(--gap-sm);
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  body:not(.dashboard-app-body) .hero-content,
  body.preview-editor-mode .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-content-gap, clamp(14px, 2.2vw, 20px));
  }

  body:not(.dashboard-app-body) .hero-title,
  body.preview-editor-mode .hero-title {
    font-size: var(--hero-title-size-mobile, clamp(38px, 9vw, 48px));
  }

  body:not(.dashboard-app-body) .hero-actions,
  body.preview-editor-mode .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-sm);
    width: 100%;
  }

  body:not(.dashboard-app-body) .hero-actions .btn,
  body.preview-editor-mode .hero-actions .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* Buttons */
body:not(.dashboard-app-body) .btn {
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--btn-radius);
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .btn {
    min-height: 48px;
    padding-inline: clamp(22px, 5vw, 28px);
  }
}

/* Programs grid */
body:not(.dashboard-app-body) .programs-grid {
  display: grid;
  gap: var(--card-gap-desktop);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  body:not(.dashboard-app-body) .programs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 28px);
  }
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .programs-grid {
    grid-template-columns: 1fr;
    gap: var(--card-gap-mobile);
  }
}

/* Card rhythm */
body:not(.dashboard-app-body) .program-card,
body:not(.dashboard-app-body) .membership-card {
  border-radius: var(--card-radius);
  padding: var(--card-padding-desktop);
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .program-card,
  body:not(.dashboard-app-body) .membership-card {
    padding: var(--card-padding-mobile);
  }
}

/* Section vertical rhythm — FAQ uses tighter spacing (legacy already pads FAQ) */
body:not(.dashboard-app-body) .programs-section,
body:not(.dashboard-app-body) .membership-section,
body:not(.dashboard-app-body) .partnerships-section,
body:not(.dashboard-app-body) .about-section,
body:not(.dashboard-app-body) .gym-gallery-section,
body:not(.dashboard-app-body) .location-section,
body:not(.dashboard-app-body) .get-in-touch-section,
body:not(.dashboard-app-body) .bmi-section,
body:not(.dashboard-app-body) .strength-section {
  padding-top: var(--site-section-padding-y-active, var(--section-y-desktop));
  padding-bottom: var(--site-section-padding-y-active, var(--section-y-desktop));
}

/* FAQ — compact typography & spacing */
body:not(.dashboard-app-body) .faq-section {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

body:not(.dashboard-app-body) .faq-title {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  max-width: min(680px, 100%);
}

body:not(.dashboard-app-body) .faq-intro {
  font-size: clamp(15px, 1.05vw, 17px);
  max-width: var(--text-max);
}

body:not(.dashboard-app-body) .faq-question {
  min-height: var(--rs-touch-min, 48px);
  padding: 10px 16px;
  font-size: clamp(15px, 1.05vw, 17px);
}

body:not(.dashboard-app-body) .faq-item {
  margin-bottom: clamp(8px, 1.2vw, 12px);
}

/* Forms */
body:not(.dashboard-app-body) input:not([type="checkbox"]):not([type="radio"]),
body:not(.dashboard-app-body) select,
body:not(.dashboard-app-body) textarea {
  min-height: var(--rs-input-height, 48px);
}

/* Motion safety — scope to background only, do not kill all site animations */
@media (prefers-reduced-motion: reduce) {
  .site-bg__fx,
  .site-bg__fx--abstract,
  .site-bg__fx--aurora,
  .site-bg__aurora-blob,
  .site-bg__abstract-glow,
  .site-bg__parallel-rail,
  .site-bg__scan-line,
  .site-bg__wave-stroke,
  .site-bg__diag,
  .site-bg__trail {
    animation: none !important;
    transform: none !important;
  }

  .site-bg__fx--abstract::before,
  .site-bg__fx--abstract::after {
    animation: none !important;
    transform: none !important;
  }
}

/* Hero stack — override stacked legacy margins */
body:not(.dashboard-app-body) .hero-title,
body.preview-editor-mode .hero-title,
body:not(.dashboard-app-body) .hero-text,
body.preview-editor-mode .hero-text {
  margin: 0 !important;
}

html body:not(.dashboard-app-body) .hero-text + .hero-actions,
html body:not(.dashboard-app-body) .hero-actions,
body.preview-editor-mode .hero-text + .hero-actions,
body.preview-editor-mode .hero-actions {
  margin-top: 0 !important;
}

body:not(.dashboard-app-body) .hero-title + .hero-text,
body.preview-editor-mode .hero-title + .hero-text {
  margin-top: 0 !important;
}

@media (max-width: 760px) {
  body:not(.dashboard-app-body) .site-bg {
    --bg-mobile-motion: auto;
  }
}

/* ----- Minimal background (fewer inner lines) ----- */
body:not(.dashboard-app-body) .site-bg__fx--lines .site-bg__line-pair:nth-child(n + 2) {
  display: none;
}

body:not(.dashboard-app-body) .site-bg__fx--waves .site-bg__wave-stroke--right {
  opacity: 0.65;
}

/* ----- Hero: tight grouped stack on all devices ----- */
body:not(.dashboard-app-body) .hero-title,
body.preview-editor-mode .hero-title {
  max-width: min(100%, var(--hero-title-max-width, var(--text-wide, 920px))) !important;
  letter-spacing: -0.02em !important;
  font-size: var(--hero-title-size-desktop, clamp(2rem, 6.5vw, 4.5rem)) !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}

@media (max-width: 760px) {
  body:not(.dashboard-app-body) .hero-section,
  body.preview-editor-mode .hero-section {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: clamp(28px, 7vw, 44px) !important;
  }

  body:not(.dashboard-app-body) .hero-container,
  body.preview-editor-mode .hero-container {
    min-height: auto !important;
    height: auto !important;
    justify-content: center !important;
    padding-top: calc(var(--header-height, 64px) + clamp(20px, 5vw, 32px)) !important;
    padding-bottom: clamp(20px, 5vw, 32px) !important;
  }

  body:not(.dashboard-app-body) .hero-content,
  body.preview-editor-mode .hero-content {
    align-items: center !important;
    gap: clamp(10px, 2.8vw, 14px) !important;
  }

  body:not(.dashboard-app-body) .hero-title,
  body.preview-editor-mode .hero-title {
    font-size: var(--hero-title-size-mobile, clamp(1.125rem, 4.5vw, 1.375rem)) !important;
    text-align: center !important;
  }

  body:not(.dashboard-app-body) .hero-text,
  body.preview-editor-mode .hero-text {
    text-align: center !important;
  }

  body:not(.dashboard-app-body) .hero-actions,
  body.preview-editor-mode .hero-actions {
    margin-top: 0 !important;
  }
}

/* ----- FAQ mobile: smaller accordion text ----- */
@media (max-width: 760px) {
  body:not(.dashboard-app-body) .faq-section {
    padding-top: clamp(40px, 8vw, 64px);
    padding-bottom: clamp(40px, 8vw, 64px);
  }

  body:not(.dashboard-app-body) .faq-question,
  body:not(.dashboard-app-body) .faq-question-text {
    font-size: 14px !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
    min-height: 44px !important;
  }

  body:not(.dashboard-app-body) .faq-item {
    margin-bottom: 6px !important;
  }

  body:not(.dashboard-app-body) .faq-answer,
  body:not(.dashboard-app-body) .faq-answer-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ----- Program detail page ----- */
body:not(.dashboard-app-body) .program-detail-page .program-detail-eyebrow {
  color: var(--programs-page-eyebrow-color, var(--color-red));
  text-align: center;
}

body:not(.dashboard-app-body) .program-detail-page .program-detail-title {
  text-align: center;
  margin-inline: auto;
}

body:not(.dashboard-app-body) .program-detail-page .program-detail-intro--stream,
body:not(.dashboard-app-body) .program-detail-page .program-detail-block--stream {
  text-align: left;
  margin-inline: 0;
  padding-inline: 0;
}

body:not(.dashboard-app-body) .program-detail-page .program-detail-block-list {
  padding-left: 1.1em;
  margin-left: 0;
}

body:not(.dashboard-app-body) .program-detail-page .program-detail-block-text,
body:not(.dashboard-app-body) .program-detail-page .program-detail-block-intro {
  max-width: none;
  margin-inline: 0;
}

/* ----- Partnerships page: white benefit text, no name ----- */
body:not(.dashboard-app-body) .partnerships-page-card-discount {
  color: var(--partnerships-page-card-discount-color, rgba(250, 249, 254, 0.92));
}

/* ----- Mobile menu booking CTA ----- */
body:not(.dashboard-app-body) .mobile-menu-booking-item {
  margin-top: clamp(12px, 3vw, 18px);
  list-style: none;
}

body:not(.dashboard-app-body) .mobile-menu-booking-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px !important;
  border-radius: var(--mobile-menu-booking-btn-radius, var(--btn-radius, 14px));
  font-family: var(--font-heading);
  font-size: clamp(14px, 3.8vw, 16px) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

body:not(.dashboard-app-body) .mobile-menu-booking-btn:hover {
  color: var(--color-light);
}

/* ----- Hide arrow spans on booking buttons ----- */
body:not(.dashboard-app-body) .programs-page-row-link span,
body:not(.dashboard-app-body) .btn-primary span:empty {
  display: none;
}