/**
 * PR1MELAB — UX/UI responsive spacing system
 * Loads last. Uses clamp(), safe-area insets, and touch-friendly sizing.
 * Applies to all public pages (not admin).
 */

:root {
  --rs-header-height: clamp(64px, 10vw, 86px);
  --rs-gutter: clamp(16px, 4vw, 32px);
  --rs-gutter-max: 32px;
  --rs-section-y: clamp(48px, 7vw, 96px);
  --rs-section-y-compact: clamp(36px, 6vw, 64px);
  --rs-page-top: calc(var(--rs-header-height) + clamp(20px, 4vw, 64px));
  --rs-page-bottom: clamp(48px, 7vw, 88px);
  --rs-stack-xs: clamp(8px, 1.5vw, 12px);
  --rs-stack-sm: clamp(12px, 2vw, 16px);
  --rs-stack-md: clamp(12px, 2vw, 18px);
  --rs-stack-lg: clamp(18px, 3vw, 24px);
  --rs-grid-gap: clamp(16px, 2.5vw, 28px);
  --rs-touch-min: 44px;
  --rs-input-height: clamp(44px, 10vw, 48px);
  --rs-button-height: clamp(44px, 10vw, 48px);
  --rs-prose-max: 72ch;
  --rs-radius-ui: clamp(12px, 2vw, 16px);
}

@media (max-width: 430px) {
  :root {
    --rs-gutter: max(16px, env(safe-area-inset-left, 0px));
  }
}

@media (min-width: 1024px) {
  :root {
    --rs-gutter: clamp(24px, 2.5vw, 32px);
  }
}

@media (min-width: 1280px) {
  :root {
    --rs-section-y: clamp(64px, 6vw, 96px);
  }
}

/* Map UX tokens onto legacy theme variables */
body:not(.dashboard-app-body) {
  --header-height: var(--rs-header-height);
  --mobile-header-height: clamp(64px, 10vw, 72px);
  --container-width: min(1240px, 100%);
  --site-container-max: 1240px;
  --site-container-padding-desktop: var(--rs-gutter);
  --site-container-padding-mobile: max(16px, env(safe-area-inset-left, 0px));
  --container-padding: var(--site-container-padding-desktop);
  --page-inner-padding-top-desktop: calc(var(--rs-header-height) + clamp(40px, 5vw, 72px));
  --page-inner-padding-top-mobile: calc(var(--rs-header-height) + clamp(16px, 4vw, 32px));
  --page-inner-padding-bottom-desktop: var(--rs-page-bottom);
  --page-inner-padding-bottom-mobile: clamp(40px, 7vw, 64px);
  --page-content-top-gap-desktop: clamp(20px, 2.5vw, 32px);
  --page-content-top-gap-mobile: clamp(12px, 3vw, 20px);
  --page-content-top-padding-desktop: calc(var(--rs-header-height) + var(--page-content-top-gap-desktop));
  --page-content-top-padding-mobile: calc(var(--rs-header-height) + var(--page-content-top-gap-mobile));
  --site-section-padding-y-desktop: var(--rs-section-y);
  --site-section-padding-y-mobile: var(--rs-section-y-compact);
  --site-section-inner-y: var(--rs-section-y);
  --site-section-padding-y-active: var(--rs-section-y);
  --site-grid-gap-desktop: var(--rs-grid-gap);
  --site-grid-gap-mobile: clamp(14px, 3vw, 20px);
  --site-grid-gap-active: var(--rs-grid-gap);
  --site-card-padding-desktop: clamp(20px, 3vw, 32px);
  --site-card-padding-mobile: clamp(16px, 4vw, 24px);
  --site-card-padding-active: clamp(20px, 3vw, 32px);
  --site-button-min-height-desktop: var(--rs-button-height);
  --site-button-min-height-mobile: var(--rs-touch-min);
  --button-min-height: var(--rs-button-height);
  --section-eyebrow-heading-gap-desktop: var(--rs-stack-xs);
  --section-eyebrow-heading-gap-mobile: clamp(6px, 2vw, 10px);
  --section-heading-text-gap-desktop: var(--rs-stack-sm);
  --section-heading-text-gap-mobile: clamp(10px, 2.5vw, 14px);
  --section-text-content-gap-desktop: var(--rs-stack-lg);
  --section-text-content-gap-mobile: clamp(18px, 4vw, 28px);
  --section-header-button-gap-desktop: var(--rs-stack-md);
  --section-header-button-gap-mobile: clamp(16px, 3vw, 24px);
  --footer-column-gap: clamp(24px, 4vw, 42px);
  --footer-container-padding-desktop: clamp(16px, 3vw, 24px);
  --booking-panel-max-width: min(100%, 720px);
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) {
    --container-padding: max(16px, env(safe-area-inset-left, 0px));
    --site-section-padding-y-active: var(--rs-section-y-compact);
    --site-card-padding-active: clamp(16px, 4vw, 24px);
    --site-grid-gap-active: clamp(14px, 3vw, 20px);
  }
}

/* ----- Global layout safety ----- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body:not(.dashboard-app-body) {
  overflow-x: clip;
  min-width: 0;
}

body:not(.dashboard-app-body) .site-page,
body:not(.dashboard-app-body) .site-main,
body:not(.dashboard-app-body) .site-page-flow,
body:not(.dashboard-app-body) .programs-membership-flow,
body:not(.dashboard-app-body) .about-gallery-bmi-flow,
body:not(.dashboard-app-body) .location-faq-flow {
  min-width: 0;
  max-width: 100%;
}

body:not(.dashboard-app-body) .container,
body:not(.dashboard-app-body) .site-main .container,
body:not(.dashboard-app-body) .footer-container,
body:not(.dashboard-app-body) .footer-bottom-container {
  width: 100%;
  max-width: min(var(--container-width, 1240px), 100%);
  padding-left: max(var(--rs-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rs-gutter), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

body:not(.dashboard-app-body) img,
body:not(.dashboard-app-body) video,
body:not(.dashboard-app-body) iframe,
body:not(.dashboard-app-body) svg {
  max-width: 100%;
}

body:not(.dashboard-app-body) .site-page-section--from-top {
  padding-top: var(--page-content-top-padding-desktop) !important;
  padding-bottom: var(--page-inner-padding-bottom-desktop) !important;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .site-page-section--from-top {
    padding-top: var(--page-content-top-padding-mobile) !important;
    padding-bottom: var(--page-inner-padding-bottom-mobile) !important;
  }
}

/* ----- Header & navigation ----- */
body:not(.dashboard-app-body) .site-header {
  min-height: var(--rs-header-height);
}

body:not(.dashboard-app-body) .header-container {
  gap: clamp(8px, 2vw, 16px);
}

@media (min-width: 1024px) {
  body:not(.dashboard-app-body) .site-header .main-navigation .main-menu {
    gap: clamp(1rem, 1.4vw, 1.75rem);
  }

  body:not(.dashboard-app-body) .site-header .main-navigation .main-menu > li > a {
    padding-inline: clamp(0.4rem, 0.7vw, 0.85rem);
    min-height: var(--rs-touch-min);
    display: inline-flex;
    align-items: center;
  }

  body:not(.dashboard-app-body) .header-actions {
    gap: clamp(8px, 1.2vw, 14px);
  }
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .menu-toggle {
    min-width: var(--rs-touch-min);
    min-height: var(--rs-touch-min);
  }

  body:not(.dashboard-app-body) .mobile-menu-panel {
    padding:
      clamp(20px, 5vw, 28px)
      max(var(--rs-gutter), env(safe-area-inset-right, 0px))
      max(24px, env(safe-area-inset-bottom, 0px))
      max(var(--rs-gutter), env(safe-area-inset-left, 0px));
  }

  body:not(.dashboard-app-body) .mobile-menu-panel .mobile-menu a,
  body:not(.dashboard-app-body) .mobile-menu-panel .mobile-navigation a {
    min-height: var(--rs-touch-min);
    display: flex;
    align-items: center;
  }
}

/* ----- Hero ----- */
body:not(.dashboard-app-body) .hero-section {
  min-height: clamp(420px, 72vh, 760px);
}

body:not(.dashboard-app-body) .hero-title {
  font-size: clamp(1.875rem, 7vw, var(--global-h1-size-desktop, 4rem));
  max-width: min(100%, var(--hero-title-max-width, var(--text-wide, 920px)));
}

body:not(.dashboard-app-body) .hero-text {
  font-size: clamp(0.9375rem, 2.4vw, 1.125rem);
  max-width: min(100%, var(--rs-prose-max));
}

body:not(.dashboard-app-body) .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 16px);
  width: 100%;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .hero-actions {
    flex-direction: column;
    align-items: center;
    max-width: min(100%, clamp(220px, 78vw, 320px));
    margin-inline: auto;
  }

  body:not(.dashboard-app-body) .hero-actions .btn,
  body:not(.dashboard-app-body) .hero-actions .hero-btn {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
  }
}

/* ----- Section headings (all pages) ----- */
body:not(.dashboard-app-body) :is(
  .programs-page-title,
  .about-page-title,
  .partnerships-page-title,
  .contact-location-title,
  .blog-page-title,
  .legal-page-title,
  .program-detail-title,
  .single-post-title
) {
  font-size: clamp(1.625rem, 5.5vw, var(--global-h1-size-desktop, 3rem));
  line-height: 1.08;
}

body:not(.dashboard-app-body) :is(
  .programs-title,
  .membership-title,
  .partnerships-title,
  .gym-gallery-title,
  .about-title,
  .bmi-title,
  .strength-title,
  .location-title,
  .faq-title,
  .get-in-touch-title,
  .booking-section-intro-title
) {
  font-size: clamp(1.5rem, 4.5vw, var(--global-h2-size-desktop, 2.5rem));
  line-height: 1.06;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) :is(
    .programs-page-title,
    .about-page-title,
    .partnerships-page-title,
    .contact-location-title,
    .blog-page-title,
    .legal-page-title,
    .program-detail-title,
    .single-post-title
  ) {
    font-size: var(--global-h1-size-mobile, clamp(1.25rem, 5.5vw, 1.5rem));
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  body:not(.dashboard-app-body) :is(
    .programs-title,
    .membership-title,
    .partnerships-title,
    .gym-gallery-title,
    .about-title,
    .bmi-title,
    .strength-title,
    .location-title,
    .faq-title,
    .get-in-touch-title,
    .booking-section-intro-title
  ) {
    font-size: var(--global-h2-size-mobile, clamp(1.0625rem, 4.2vw, 1.3125rem));
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  body:not(.dashboard-app-body) .hero-title {
    font-size: var(--hero-title-size-mobile, clamp(1.125rem, 4.5vw, 1.375rem));
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  body:not(.dashboard-app-body) .hero-text {
    font-size: var(--global-text-size-mobile, clamp(13px, 3.2vw, 15px));
    line-height: 1.5;
  }
}

/* ----- Home: programs, membership, partnerships ----- */
@media (max-width: 767px) {
  body:not(.dashboard-app-body) .programs-grid,
  body:not(.dashboard-app-body) .programs-page-list--stream {
    gap: var(--rs-grid-gap);
  }

  body:not(.dashboard-app-body) .program-card,
  body:not(.dashboard-app-body) .programs-page-row--stream {
    width: 100%;
    max-width: 100%;
  }

  body:not(.dashboard-app-body) .membership-selector {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: clamp(8px, 2vw, 12px);
    padding-bottom: 4px;
    scrollbar-width: none;
    max-width: 100%;
  }

  body:not(.dashboard-app-body) .membership-selector::-webkit-scrollbar {
    display: none;
  }

  body:not(.dashboard-app-body) .membership-selector-button {
    flex: 0 0 auto;
    min-height: var(--rs-touch-min);
    padding-inline: clamp(14px, 4vw, 20px);
    white-space: nowrap;
  }

  body:not(.dashboard-app-body) .membership-grid {
    width: 100%;
    max-width: 100%;
  }

  body:not(.dashboard-app-body) .membership-card {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  body:not(.dashboard-app-body) .partnerships-cta-wrap {
    padding-inline: var(--rs-gutter);
  }
}

/* ----- Inner pages: grids & cards ----- */
body:not(.dashboard-app-body) .partnerships-page-partners,
body:not(.dashboard-app-body) .partnerships-page-partners--clean {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--rs-grid-gap);
  width: 100%;
}

body:not(.dashboard-app-body) .programs-page-row--stream {
  gap: clamp(20px, 4vw, 32px);
}

body:not(.dashboard-app-body) .programs-page-row-body,
body:not(.dashboard-app-body) .program-detail-body,
body:not(.dashboard-app-body) .about-page-block,
body:not(.dashboard-app-body) .blog-card-body {
  max-width: 100%;
}

body:not(.dashboard-app-body) .about-page-team-panel {
  padding: clamp(20px, 4vw, 32px);
}

/* ----- Contact ----- */
body:not(.dashboard-app-body) .contact-page-blocks {
  gap: var(--rs-stack-lg);
}

body:not(.dashboard-app-body) .contact-location-map-wrap,
body:not(.dashboard-app-body) .contact-location-map-container {
  width: 100%;
  max-width: 100%;
  border-radius: var(--rs-radius-ui);
  overflow: hidden;
}

body:not(.dashboard-app-body) .contact-location-map {
  width: 100%;
  min-height: clamp(220px, 45vw, 420px);
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .contact-tiles--premium {
    grid-template-columns: 1fr !important;
    gap: var(--rs-stack-sm);
  }

  body:not(.dashboard-app-body) .contact-tile {
    min-height: var(--rs-touch-min);
    padding: clamp(14px, 3vw, 18px);
  }
}

/* ----- Forms, calculators, booking ----- */
body:not(.dashboard-app-body) :is(
  .bmi-form input,
  .strength-form input,
  .strength-form select,
  .get-in-touch-form input,
  .get-in-touch-form textarea,
  .booking-fields input,
  .booking-fields select,
  .booking-fields textarea
) {
  min-height: var(--rs-input-height);
  font-size: max(16px, 1rem);
}

body:not(.dashboard-app-body) :is(
  .btn,
  .button,
  .booking-submit,
  .booking-option,
  .booking-time-slot,
  .bmi-form button,
  .strength-form button,
  .get-in-touch-form button
) {
  min-height: var(--rs-button-height);
}

body:not(.dashboard-app-body) .booking-container,
body:not(.dashboard-app-body) .booking-panel,
body:not(.dashboard-app-body) .booking-step-panel {
  width: 100%;
  max-width: min(100%, var(--booking-panel-max-width, 720px));
  margin-inline: auto;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .booking-panel-view,
  body:not(.dashboard-app-body) .booking-panel-form,
  body:not(.dashboard-app-body) .booking-step-panel .booking-panel-view,
  body:not(.dashboard-app-body) .booking-step-panel .booking-panel-form {
    padding-inline: clamp(12px, 3vw, 16px) !important;
  }

  body:not(.dashboard-app-body) .booking-service-cards,
  body:not(.dashboard-app-body) .booking-fields,
  body:not(.dashboard-app-body) .booking-home-services {
    gap: var(--rs-stack-sm) !important;
  }

  body:not(.dashboard-app-body) .booking-service-card,
  body:not(.dashboard-app-body) .booking-home-service,
  body:not(.dashboard-app-body) .booking-main-button,
  body:not(.dashboard-app-body) .booking-submit {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body:not(.dashboard-app-body) .booking-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 88px), 1fr));
    gap: var(--rs-stack-xs) !important;
  }
}

/* ----- Tables (BMI, etc.) ----- */
body:not(.dashboard-app-body) .bmi-table-wrap,
body:not(.dashboard-app-body) .bmi-results-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body:not(.dashboard-app-body) table {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .bmi-table,
  body:not(.dashboard-app-body) .bmi-results-table {
    min-width: 280px;
  }
}

/* ----- Facilities carousel ----- */
@media (max-width: 767px) {
  body:not(.dashboard-app-body) .gym-gallery-carousel,
  body:not(.dashboard-app-body) .gym-gallery-track,
  body:not(.dashboard-app-body) .facility-carousel {
    max-width: 100%;
  }

  body:not(.dashboard-app-body) .gym-gallery-slide,
  body:not(.dashboard-app-body) .facility-carousel-slide {
    width: min(100%, 320px);
  }
}

/* ----- Legal & blog prose ----- */
body:not(.dashboard-app-body) :is(
  .legal-content-card,
  .legal-content-panel,
  .single-post-content,
  .single-post-content-inner,
  .blog-post-content
) {
  max-width: min(100%, var(--rs-prose-max));
}

body:not(.dashboard-app-body) .legal-page-section,
body:not(.dashboard-app-body) .blog-page-section,
body:not(.dashboard-app-body) .single-post-content-section {
  padding-inline: 0;
}

/* ----- Footer ----- */
body:not(.dashboard-app-body) .footer-container {
  gap: var(--footer-column-gap);
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(32px, 5vw, 48px);
}

body:not(.dashboard-app-body) .footer-bottom {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

body:not(.dashboard-app-body) .footer-social-link {
  min-width: var(--rs-touch-min);
  min-height: var(--rs-touch-min);
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .footer-container {
    grid-template-columns: 1fr !important;
    text-align: left;
  }

  body:not(.dashboard-app-body) .footer-bottom-container {
    padding-inline: max(var(--rs-gutter), env(safe-area-inset-left, 0px));
  }
}

/* ----- Cookie banner & scroll-to-top ----- */
body:not(.dashboard-app-body) .cookie-banner {
  width: min(1180px, calc(100vw - (var(--rs-gutter) * 2))) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  transform: translateX(-50%);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body:not(.dashboard-app-body) .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rs-stack-sm);
    padding: clamp(16px, 4vw, 20px) !important;
  }

  body:not(.dashboard-app-body) .cookie-banner-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--rs-stack-xs);
  }

  body:not(.dashboard-app-body) .cookie-button {
    width: 100%;
    min-height: var(--rs-touch-min);
  }
}

body:not(.dashboard-app-body) .scroll-to-top,
body:not(.dashboard-app-body) .scrolltop-button {
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  min-width: var(--rs-touch-min);
  min-height: var(--rs-touch-min);
}

/* ----- FAQ accordion ----- */
body:not(.dashboard-app-body) .faq-item button,
body:not(.dashboard-app-body) .faq-question {
  min-height: var(--rs-touch-min);
  padding-block: clamp(8px, 2vw, 12px);
}

/* ----- Utility: prevent edge-to-edge text on tiny screens ----- */
@media (max-width: 360px) {
  body:not(.dashboard-app-body) .container,
  body:not(.dashboard-app-body) .site-main .container {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
}