/* Shared phone rules. Page-specific layout fixes stay in their route sheets. */
/* Keep new shared layout boundaries on the approved 640/768/992/1100px spine. */
@media (width < 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body[class] {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
  }

  body[class] main {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  body[class] main :where(*, *::before, *::after) {
    box-sizing: border-box;
    min-inline-size: 0;
  }

  body[class] main :where(img, video, iframe, svg) {
    max-inline-size: 100%;
  }

  body[class] main :where(p, li, dt, dd, blockquote, td, th) {
    font-size: max(16px, 1em) !important;
    overflow-wrap: anywhere;
  }

  body[class] main :where(small, .small, figcaption, .form-text, .text-muted,
    .ss-eyebrow, .op-eyebrow, .ss-date-class, .ss-calendar-help,
    .ss-month-legend) {
    font-size: max(14px, 1em) !important;
    overflow-wrap: anywhere;
  }

  body[class] :where(small, .small, figcaption, .form-text, .text-muted,
    .ss-eyebrow, .op-eyebrow, .ss-date-class, .ss-calendar-help,
    .ss-month-legend) {
    font-size: max(14px, 1em) !important;
    overflow-wrap: anywhere;
  }

  body[class] main :where(p:not(.op-eyebrow):not(.ss-eyebrow), li, dt, dd,
    blockquote, td, th) {
    font-size: max(16px, 1em) !important;
  }

  body[class] main h1 {
    font-size: clamp(2rem, 7.4vw, 3rem) !important;
    line-height: 1.08;
  }

  body[class] main h2 {
    font-size: clamp(1.625rem, 6vw, 2.4rem) !important;
    line-height: 1.12;
  }

  body[class] main h3 {
    font-size: clamp(1.3rem, 4.8vw, 1.85rem) !important;
    line-height: 1.2;
  }

  body[class] main :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]), select, textarea) {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    min-block-size: 44px;
    font-size: 16px !important;
  }

  /* Full-width action buttons on visit and free-intro funnel pages */
  body.page-visit .visit-hero-actions a.btn,
  body.page-visit .visit-card a.btn,
  body.page-visit a.btn[href^="sms:"] {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    text-align: center;
  }

  body[class] main :where(a.btn, a.ss-btn, a.ss-action-primary, a.op-button,
    a[data-cta-target], .btn-primary, .pb-card-btn, button.ss-nav-cta,
    #copy-term-link, #copy-state-link) {
    box-sizing: border-box;
    max-inline-size: 100%;
    white-space: normal;
    min-block-size: 44px;
    min-height: 44px;
  }

  body[class] :where(.ss-double-bezel, .ss-double-bezel-inner) {
    box-sizing: border-box;
    max-inline-size: 100%;
  }

  body[class] :where(.ss-double-bezel-inner.p-4, .ss-double-bezel-inner.p-md-5) {
    padding: 1.25rem 1rem !important;
  }

  body[class] main :where(table) {
    max-inline-size: 100%;
  }
}

@media (width <= 640px) {
  body[class] :where(.container, .container-fluid, .container-sm, .container-md,
    .container-lg, .container-xl, .container-xxl) {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    padding-inline: 1rem;
  }
}

/* WS-29: one shared phone action bar on the five first-visit funnel routes. */
.ss-mobile-actionbar .ss-action-reserve {
  display: none !important;
}

@media (width < 768px) {
  body[data-ws29-funnel] {
    padding-block-end: calc(88px + env(safe-area-inset-bottom));
  }

  body[data-ws29-funnel] :is(.ss-mobile-sticky-cta,
    .mobile-sticky-cta, .ss-mobile-sticky-action) {
    display: none !important;
  }

  body[data-ws29-funnel] .ss-mobile-actionbar {
    display: flex !important;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  }

  body[data-ws29-funnel] .ss-mobile-actionbar .ss-action-home {
    display: none !important;
  }

  body[data-ws29-funnel] .ss-mobile-actionbar .ss-action-reserve {
    display: inline-flex !important;
    border-color: var(--color-accent, #116a42);
    background: var(--color-paper, #fff);
    color: var(--color-accent-deep, #116a42);
  }

  body[data-ws29-funnel] .ss-mobile-actionbar a {
    min-height: 48px;
    font-size: 14px;
  }

  body:has(.ss-site-header.nav-open) .ss-mobile-actionbar {
    display: none !important;
  }
}