/* =====================================================================
   VESPER — MOBILE / TABLET LAUNCH-BLOCKER FIXES  (v1, 2026-09-28)
   Paste as ONE block. It must load AFTER each page's own stylesheet
   (last <link> in <head>, or appended to the end of each template CSS).
   Every rule is scoped to a class that exists on only one template, or
   sits inside a max-width media query, so it is safe to load on every page.
   Template breakpoints used by the live CSS: Home 900 · Platform 800 ·
   Solutions 850 · Why EMI/Insights/articles 900 · forms 900 · toolkit 900
   · legal 850.
   ===================================================================== */

/* ---------- 0. GLOBAL SAFETY: long words never push a heading off-screen */
main h1, main h2, main h3 { overflow-wrap: break-word; }

/* ---------- 1. HOME (/) --------------------------------------------------- */

/* 1a. Merged words at hidden <br> ("requiresinfrastructure", "industrialmobility").
   site.css hides these <br> at <=900px and the HTML has no space next to them.
   Restoring the break is the CSS-only fix (the permanent HTML fix is in HANDOFF.md). */
@media (max-width: 900px) {
  .insights h2 br, .cta h2 br { display: inline; }
}

/* 1b. "not another workflow tool" paragraph: fixed width 900px with no max-width.
   Width becomes fluid; desktop still caps at 900px, so desktop is unchanged. */
.operating > p { width: auto; max-width: 900px; }

@media (max-width: 900px) {
  /* 1c. "Enterprise infrastructure. When and where you need it." section clipped.
     The 1fr grid column grew to the 536px paragraph / 540px pill. */
  .requirement { grid-template-columns: minmax(0, 1fr); }
  .requirement-copy { min-width: 0; }
  .requirement-copy > p { width: auto; }
  .requirement .dark-pill { width: 100%; max-width: 540px; padding-right: 20px; }

  /* 1d. Lifecycle steps: from a clipped 5x180px sideways scroller to a wrapping grid
     (2 columns on phones, 5 on tablet portrait). All five steps are visible. */
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 30px 20px;
    overflow: visible;
  }

  /* 1e. Cropped product mockup ("+ Add S…", "$21.8…") */
  .product { grid-template-columns: minmax(0, 1fr); }
  .product-body { min-width: 0; padding: 20px 16px; }
  .product-title { flex-wrap: wrap; gap: 12px; }
  .product-title > * { min-width: 0; }
  .product-content > * { min-width: 0; }

  /* 1e2. "With Vesper" comparison card: fixed 520px height let list items 4-5
     spill out of the dark card as white-on-light (invisible) text */
  .compare article { height: auto; min-height: 520px; }

  /* 1f. Mobile menu: full width (margin-right:52px was shortening the panel),
     link rows 48px tall for tapping */
  .nav > #navlinks { margin: 0; left: -16px; right: -16px; gap: 0; }

  /* 1g. Hero CTA on mobile: the header pill is otherwise display:none at <=900px.
     Placed under the headline (hero is a fixed 690px tall at this breakpoint). */
  .hero h1 { bottom: 122px; }
  .nav > .nav-pill {
    display: inline-flex;
    position: absolute;
    top: 590px;              /* 690 hero - 4 header offset - 48 pill - 48 bottom space */
    left: 6px;               /* lines up with the h1 (22px) inside the 16px-inset header */
    width: auto; height: 48px; padding: 0 24px;
    font-size: 13px;
  }
}
@media (max-width: 600px) {
  .product .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 2. PLATFORM (/platform/) ------------------------------------ */

/* 2a. Desktop/tablet-landscape horizontal overflow (1451 @1440, 1203 @1194):
   the scale(1.015) explorer background layers and the 104.5% product shots spill
   past the viewport. Clip them; overflow-x:clip keeps position:sticky working. */
.explorer-images { overflow: hidden; }
.explorer-scroll, section.value { overflow-x: clip; }

/* 2b. Mobile overflow (page 670px wide on a 390px phone) and clipped final CTA.
   Root cause: .final-cta-content is a flex item whose 650px paragraph set its
   min-content width. */
.final-platform-cta .final-cta-content { min-width: 0; max-width: min(900px, 100%); }
@media (max-width: 800px) {
  .final-platform-cta .final-cta-content p { width: auto; }
  .final-platform-cta .final-cta-content h2 { font-size: clamp(34px, 10vw, 46px); }
  /* explorer rail stays a sideways scroller, but held inside the screen */
  .explorer .rail { left: 0; right: 0; width: auto; max-width: 100%; overflow-x: auto;
                    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .explorer .rail button { flex: 0 0 auto; min-width: 180px; scroll-snap-align: start; }
  /* menu panel full width even without :has() support */
  .nav > #platform-nav { left: 0; right: 0; border-radius: 0; }
}

/* ---------- 3. MOBILE MENUS: full-width panel + "Schedule a working session"
   inside the open menu (Home, Platform, Solutions, Why EMI, Insights, articles).
   Uses :has() (Safari 15.4+, Chrome 105+, Firefox 121+). Older browsers keep
   today's menu, so nothing breaks. */
@media (max-width: 900px) {
  header.nav:has(> nav.open),
  header.k-nav:has(> nav.open) {
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    row-gap: 0;
    background: #0e1e20;
    color: #fff;
    padding-bottom: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }
  /* Home header is inset 16px and offset 4px; make the open panel edge-to-edge */
  header.nav:has(> #navlinks.open) { top: 0; width: 100%; padding: 4px 16px 20px; }
  /* keep the logo row at each template's original bar height so nothing jumps */
  header.nav:has(> #navlinks.open) > a:first-child { min-height: 58px; }
  header.nav:has(> #platform-nav.open) > a:first-child { min-height: 100px; }
  header.nav:has(> #solutions-nav.open) > a:first-child { min-height: 70px; }
  header.k-nav:has(> nav.open) > a:first-child { min-height: 68px; }

  header.nav:has(> nav.open) > nav,
  header.k-nav:has(> nav.open) > nav {
    position: static;
    order: 10;
    flex: 0 0 100%;
    margin: 0;
    padding: 6px 0 14px;
    background: transparent;
    border-radius: 0;
    gap: 0;
  }
  header.nav:has(> nav.open) > nav a,
  header.k-nav:has(> nav.open) > nav a {
    display: flex; align-items: center; min-height: 48px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 16px;
  }
  header.nav:has(> nav.open) > .nav-pill,
  header.nav:has(> nav.open) > .nav-cta,
  header.k-nav:has(> nav.open) > .k-pill {
    display: flex;
    position: static;
    order: 11;
    flex: 0 0 100%;
    width: 100%; height: auto; min-height: 52px;
    margin: 0;
    justify-content: center;
    font-size: 14px;
  }
}

/* ---------- 4. NAV ON FORM, TOOLKIT AND LEGAL PAGES (no menu button exists)
   At <=900px these templates hide the nav (and the CTA on forms/toolkit).
   CSS-only fix: logo + CTA on row 1, the four links on a second row. */
@media (max-width: 900px) {
  .lp-nav, .tool-nav { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 0;
                       column-gap: 12px; padding-top: 8px; padding-bottom: 4px; }
  .lp-nav > nav, .tool-nav > nav {
    display: flex; order: 3; flex: 0 0 100%;
    margin: 0; gap: 4px 18px; overflow-x: auto; white-space: nowrap;
    color: #c7d9db; font-size: 14px; scrollbar-width: none;
  }
  .lp-nav > nav a, .tool-nav > nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-nav > .nav-cta, .tool-nav > a:last-child {
    display: inline-flex; align-items: center; margin-left: auto;
    min-height: 44px; padding: 0 16px; font-size: 13px;
  }
}
@media (max-width: 850px) {
  .legal-nav { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 0;
               padding-top: 8px; padding-bottom: 4px; }
  .legal-nav > nav {
    display: flex; order: 3; flex: 0 0 100%;
    margin: 0; gap: 4px 18px; overflow-x: auto; white-space: nowrap; font-size: 14px;
  }
  .legal-nav > nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-nav > .nav-cta { min-height: 44px; }
}

/* ---------- 5. QUICK WINS -------------------------------------------------- */

/* 5a. Tap targets >= 44px on touch screens (phones and tablets). */
@media (max-width: 900px), (pointer: coarse) {
  header > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav > .menu, .nav > .nav-toggle, .k-nav > .k-menu {
    min-height: 44px; min-width: 64px; padding: 0 16px;
  }
  footer nav a, .site-footer nav a, .footer-row nav a, .lp-footer nav a,
  footer .legal a, .footer-legal a, .tool-footer a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  footer > div > a:first-child, .footer-brand > a, .footer-row > div > a:first-child {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* text-link CTAs */
  .hero-actions a, .feature-cta, .tool > a, .resource-card a, .related-card a,
  .back-link, .legal-toc a, .resource-rail nav a, .insights-left p a,
  .learning-card li a, .article-next a, .source-locker p > a, .proof article > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .filter, .resource-rail button, .tool-nav > a:last-child { min-height: 44px; }
}

/* 5b. Minimum 12px for labels and eyebrows (were 9–11px) */
.network-card article small, .steps small, .cards i { font-size: 12px; }
.explorer .rail button, .value .step small, .ecosystem small, .outcomes-copy small,
.proof .quote small, .proof .quote b, .final-cta-content > small,
.footer-legal, .footer-legal span, footer .legal { font-size: 12px; }
.operating-model > small, .model-body li, .model-body article small,
.proof article > small, .proof-stats small { font-size: 12px; }
span.eyebrow, .feature-card .type, .resource-top .type, .resource-top .placeholder,
.resource-card .topic, .resource-meta span, .resource-rail > strong,
.decision-card small, .prompt-card small, .related-card small,
.journal-article aside span { font-size: 12px; }
.journey small, .schedule small, .field label, .outcome small, .thanks .next small { font-size: 12px; }
.tool-intro .eyebrow, .tool-label, .progress-meta span, .tool-meta span, .section-kicker, .score-number small { font-size: 12px; }

/* 5c. Contrast: #8cc4cc eyebrows/active links on LIGHT backgrounds (1.7–1.9:1)
   -> site teal #1f5763 (7.24:1 on #edf4f4, 8.07:1 on white). Dark sections keep #8cc4cc. */
.ownership-gap > small, .engagement > small { color: #1f5763; }
@media (min-width: 901px) {
  .k-nav.nav-dark .active, .k-nav.article-nav .active { color: #1f5763; }
}
/* active program stage: #8cc4cc on #1f5763 was 4.18:1 at 12px; white is 8.07:1 */
.program-stages article.active small, .program-stages article.active b { color: #ffffff; }
/* =================================== END VESPER MOBILE FIXES ============ */