/* ------------------------------------------------------------------
   Bota Group — shared mobile layer.
   Loaded on every page. Contains ONLY phone/tablet-width rules, so the
   approved desktop design is untouched. Fixes are made here once instead
   of per page.
------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* --- 1. Overflow safety on media, without hiding real problems ----- */
  img, svg, video, iframe, canvas { max-width: 100%; }
  pre, code { overflow-x: auto; word-break: break-word; }
  .botaft a, .botaft p, main a { overflow-wrap: anywhere; }

  /* --- 2. Clearance for the fixed mobile CTA bar --------------------- */
  body.bota-has-mcta .botaft { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  /* --- 3. Floating controls: never stacked on each other ------------- */
  .bota-totop { right: 14px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; width: 44px !important; height: 44px !important; }
  body.bota-has-mcta .bota-totop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* --- 4. Touch targets --------------------------------------------- */
  .nav-toggle { min-width: 44px; min-height: 44px; }
  .botaft-col a,
  .botaft .ftgrp-p a,
  .botaft-loc a,
  .botaft-legal a,
  .mobile-menu a,
  .mobile-menu .mm-main,
  .lp-header nav a,
  .bcrumbs a, .faq-crumbs a, .crumb a, .bc a, .breadcrumb a, .crumbs a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .botaft-legal, .botaft-more { row-gap: 0; }
  .ftgrp-btn { min-height: 48px; width: 100%; }
  .faq-bulk-btn, .faq-nav a, .faq-chip, .fq-chip { min-height: 38px; display: inline-flex; align-items: center; }
  .ind-links a, .as-links a, .wwd-more a, .ct-careers-note a,
  .link-arrow, .faq-ind-link, .cult-link, a.back, a.visit, .ct-skip { min-height: 40px; display: inline-flex; align-items: center; }
  summary { min-height: 44px; display: flex; align-items: center; }

  /* --- 5. Legibility minimums --------------------------------------- */
  label, .tag, .pos-tag, .car2-tag, .wds2-tag, .ct-form-badge, .ct-success-label { font-size: 11.5px; }
  form label { font-size: 12.5px; }

  /* --- 6. Compact footer: logo, blurb, social, accordions, legal ----- */
  .botaft .ftin { padding: 44px 20px 0 !important; }
  .botaft .botaft-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
  .botaft .botaft-lead { order: 1; margin-bottom: 16px; }
  .botaft-lead .bl { font-size: 14px; line-height: 1.6; margin-bottom: 0; }
  .botaft .botaft-grid > .botaft-socrow { order: 2; margin: 0 0 18px; padding: 0; }
  .botaft .ftgrp { order: 3; border-top: 1px solid rgba(239, 231, 218, 0.12); }
  .botaft .ftgrp h4 { margin-bottom: 0; }
  .botaft .botaft-more { order: 4; display: none !important; }
  .botaft .botaft-bot { order: 5; padding-top: 18px !important; gap: 10px; }
  .botaft-legal { gap: 0 18px; }
  .botaft-mark { display: none; }

  /* --- 7. Card grids: tighter so stacked lists stay short ------------ */
  .ind-card, .gp-card, .card, .pc2-card { padding: 20px 18px; }
  .ind-card h3, .gp-card h3 { margin-bottom: 6px; }

  /* --- 8. Forms: full width, no zoom-on-focus, reachable controls ---- */
  input, select, textarea { font-size: 16px !important; max-width: 100%; }
  input[type="range"] { width: 100%; }
  button, .btn { max-width: 100%; }

  /* --- 9. Comparison rows stack instead of squeezing ----------------- */
  .cmp-row { grid-template-columns: 1fr !important; }

  /* --- 10. Breadcrumbs wrap instead of overflowing ------------------- */
  .bc, .breadcrumb, .crumbs { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  /* --- 10b. Careers application card stacks on phones -------------- */
  .apl-card { grid-template-columns: minmax(0, 1fr) !important; }
  .apl-card > * { min-width: 0; }
  .apl-intro { padding: 36px 22px !important; border-right: 0 !important; }
  .apl-form { padding: 32px 22px !important; }
  .cf-turnstile { max-width: 100%; overflow: hidden; }

  /* --- 11. Savings calculator: fields always fit the card ----------- */
  .calc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .calc-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .calc-inputs { padding: 24px 18px !important; }
  .calc-inputs .calc-f input { width: 100% !important; max-width: 160px; }
}

@media (max-width: 400px) {
  .cf-turnstile { transform: scale(.88); transform-origin: left top; height: 58px; }
  .calc-inputs { padding: 20px 14px !important; }
  .calc-inputs .calc-f { flex-wrap: wrap !important; gap: 6px; }
  .calc-inputs .calc-f > span:first-child { flex: 1 1 100% !important; }
  .calc-inputs .calc-in { flex: 1 1 100% !important; }
  .calc-inputs .calc-f input { width: 100% !important; max-width: none !important; }

  .botaft .ftin { padding: 38px 16px 0 !important; }
  .botaft-legal a, .botaft-bot .cpy { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bota-totop, .bota-mcta { transition: none !important; }
}

/* ==================================================================
   Shared mobile layer — part 2
   A. Compact breadcrumb back-link on phones
   B. Mobile navigation drawer: viewport-safe, internally scrollable
   ================================================================== */

@media (max-width: 768px) {
  /* --- A. Breadcrumbs collapse to one compact parent back-link ----- */
  .bcrumbs > *:not(.bota-back),
  .faq-crumbs > *:not(.bota-back),
  .crumb > *:not(.bota-back),
  .bc > *:not(.bota-back),
  .breadcrumb > *:not(.bota-back),
  .crumbs > *:not(.bota-back) { display: none !important; }

  .bota-back {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    font-family: var(--sans, inherit);
    font-size: 13px;
    letter-spacing: .02em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: .88;
    text-decoration: none;
  }
  .bota-back .bota-back-arrow { font-size: 15px; line-height: 1; }
  .indhero .bota-back, .hero .bota-back { color: inherit; }
}

@media (min-width: 769px) {
  .bota-back { display: none !important; }
}

/* --- B. Mobile navigation drawer ---------------------------------- */
@media (max-width: 1024px) {
  .mobile-menu {
    top: var(--bota-hdr, 76px) !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    inset: var(--bota-hdr, 76px) 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 28px calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* The fixed header already provides brand context. */
  .mobile-menu .mm-brand { display: none !important; }

  /* Whole row is the tap target; chevron only indicates state. */
  .mobile-menu .mm-main,
  .mobile-menu .mm-direct { min-height: 52px; }
  .mobile-menu .mm-panel a { min-height: 44px; display: flex !important; align-items: center; }

  /* The drawer is the dominant interface while open. */
  body.nav-open .bota-mcta,
  body.nav-open .bota-totop { display: none !important; }
  body.nav-open .nav.me-hide { transform: none !important; }
  body.nav-open { overflow: hidden; overscroll-behavior: none; }
}

@media (max-width: 1024px) {
  /* Drawer CTA was inheriting cream-on-cream and rendering invisible. The pages' own
     `.mobile-menu a.mm-cta { color: cream !important }` outranks a plain class selector,
     so this is written to win on specificity, and the tap state keeps the cream button
     (the page rule turns it oxblood, which would hide oxblood text). */
  html body .mobile-menu a.mm-cta,
  html body .mobile-menu a.mm-cta:hover,
  html body .mobile-menu a.mm-cta:focus,
  html body .mobile-menu a.mm-cta:active {
    color: var(--oxblood, #9E1622) !important;
    background: var(--cream, #F4F1EC) !important;
  }
}

@media (max-width: 1024px) {
  /* iOS Safari: fixed bottom:0 measures the large viewport, so the drawer
     could run under the browser toolbar. Size it to the dynamic viewport. */
  @supports (height: 100dvh) {
    .mobile-menu {
      bottom: auto !important;
      height: calc(100dvh - var(--bota-hdr, 76px)) !important;
      max-height: calc(100dvh - var(--bota-hdr, 76px)) !important;
    }
  }
  /* iOS-safe background scroll lock while the drawer is open. */
  body.bota-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
}