/* ========================================
   RC3 — Apple-Level Mobile QA
   Safari fixes, safe areas, overflow guards,
   touch targets, scroll & keyboard polish
   Load after rc2-premium.css
   ======================================== */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --header-offset: calc(var(--header-height) + var(--safe-top));
}

/* ---- Safari viewport & overflow ---- */
html {
  scroll-padding-top: var(--header-offset);
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 991px) {
  html {
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
  }

  body {
    overflow-x: clip;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  main,
  .booking-wizard,
  .booking-progress,
  .content-body,
  .content-hero,
  .community-main {
    max-width: 100%;
  }
}

/* ---- Safe-area header ---- */
.header {
  height: var(--header-offset);
  padding-top: var(--safe-top);
  box-sizing: border-box;
}

.nav {
  height: var(--header-height);
}

.nav__toggle {
  margin-right: 0;
}

@media (max-width: 991px) {
  .nav__links {
    top: var(--header-offset);
    padding-bottom: max(40px, var(--safe-bottom));
  }

  body.nav-open {
    overscroll-behavior: none;
  }
}

/* ---- Page shells (booking, community, content) ---- */
.booking-page,
.community-page {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  padding-top: var(--header-offset);
}

@media (max-width: 991px) {
  .hero {
    padding-top: calc(var(--header-offset) + 40px);
  }

  .content-page {
    padding-top: calc(var(--header-offset) + 32px);
    padding-bottom: calc(72px + var(--safe-bottom));
  }

  .booking-page .container,
  .community-page .container {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }

  .booking-main {
    padding-bottom: calc(88px + var(--safe-bottom));
  }

  .community-main {
    padding-bottom: calc(72px + var(--safe-bottom));
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--header-offset) + 36px);
  }

  .booking-main {
    padding-bottom: calc(72px + var(--safe-bottom));
  }
}

/* ---- Sticky booking progress ---- */
@media (max-width: 991px) {
  .booking-progress {
    top: var(--header-offset);
    overflow-x: clip;
  }

  .booking-progress-mobile__track {
    overflow: hidden;
  }

  .booking-step {
    scroll-margin-top: calc(var(--header-offset) + 88px);
    scroll-margin-bottom: 24px;
  }

  .booking-page .form-group input,
  .booking-page .form-group textarea,
  .booking-page .form-group select,
  .contact__form input,
  .contact__form textarea,
  .contact__form select {
    scroll-margin-top: calc(var(--header-offset) + 96px);
    scroll-margin-bottom: max(24px, var(--safe-bottom));
  }
}

/* ---- Booking narrow widths (320–430) ---- */
@media (max-width: 430px) {
  .booking-step {
    padding: 24px 16px;
  }

  .booking-progress {
    padding: 12px 14px 10px;
    border-radius: 12px;
  }

  .booking-option__card {
    padding: 24px 16px;
    min-height: 100px;
  }

  .booking-package__card {
    padding: 22px 16px 20px;
  }

  .booking-progress__price-wrap {
    font-size: 1.45rem;
  }
}

@media (max-width: 374px) {
  .booking-dates,
  .booking-dates__later-panel {
    gap: 10px;
  }

  .booking-date__card {
    min-height: 76px;
    padding: 12px 6px;
  }

  .booking-date__num {
    font-size: 1.2rem;
  }

  .booking-pills--vehicle {
    gap: 8px;
  }

  .booking-pills--vehicle .booking-pill__label {
    padding: 12px 10px;
    font-size: 0.75rem;
  }
}

/* ---- Price & text overflow guards ---- */
.booking-progress__price-wrap,
.booking-progress__total-price,
.booking-package__price,
.booking-price-amount {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.content-main a:not(.btn),
.content-hero__lead,
.area-place__text {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- FAQ touch targets & chevron alignment ---- */
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.faq__item summary::after {
  float: none;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  line-height: 1;
}

.content-faq .faq__item summary {
  min-height: 48px;
}

@media (max-width: 767px) {
  .faq__item summary {
    min-height: 48px;
    padding: 16px 18px;
  }

  .faq__answer {
    padding: 0 18px 16px;
  }
}

/* ---- Footer & nav touch targets ---- */
.footer__links a,
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

.content-card__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

.vchub-article-list a {
  min-height: 44px;
  align-items: center;
}

.area-cluster__link {
  min-height: 44px;
}

/* ---- Booking card focus (keyboard / VoiceOver) ---- */
.booking-pill:has(input:focus-visible) .booking-pill__label,
.booking-date:has(input:focus-visible) .booking-date__card,
.booking-time:has(input:focus-visible) .booking-time__label,
.booking-option:has(input:focus-visible) .booking-option__card,
.booking-package:has(input:focus-visible) .booking-package__card,
.booking-upgrade:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---- Service map overflow guard ---- */
@media (max-width: 991px) {
  .service-area-card,
  .service-area-card--map-only,
  .service-map,
  .service-map__stage,
  .service-map__frame {
    max-width: 100%;
    overflow: hidden;
  }

  .services--maintenance .services__feature::before {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/* ---- Community mobile rhythm ---- */
@media (max-width: 767px) {
  .community-hero {
    padding: 40px 0 36px;
  }

  .community-hero__intro {
    padding: 20px 16px;
  }

  .community-event-card__body {
    padding: 24px 18px;
  }

  .community-cta {
    padding: 36px 18px;
  }

  .community-cta .btn {
    width: 100%;
  }
}

/* ---- Content hub / area pages narrow ---- */
@media (max-width: 374px) {
  .content-hero {
    padding: 28px 0 36px;
  }

  .content-cta {
    padding: 24px 16px;
  }

  .content-card {
    padding: 20px 16px;
  }

  .area-cluster {
    padding: 22px 16px;
  }

  .area-cluster__link {
    padding: 16px 14px;
  }

  .hero__actions {
    gap: 10px;
  }

  .hero__badge {
    padding: 8px 12px;
    font-size: 0.625rem;
  }
}

/* ---- Footer safe area ---- */
.footer {
  padding-bottom: max(48px, calc(40px + var(--safe-bottom)));
}

@media (max-width: 767px) {
  .footer {
    padding-top: 56px;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
  }
}

/* ---- Confirmation screen mobile ---- */
@media (max-width: 767px) {
  .booking-confirmation {
    padding: 40px 20px;
  }

  .booking-confirmation__title {
    text-wrap: balance;
  }
}

/* ---- Reduce paint on scroll (mobile) ---- */
@media (max-width: 991px) {
  .booking-progress-mobile__dot {
    will-change: auto;
  }

  [data-animate].visible {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .booking-step {
    scroll-margin-top: calc(var(--header-offset) + 24px);
  }
}