/* ESPFlight v53 — unified responsive width across website pages.
   This file is deliberately last in the stylesheet cascade.
   Canonical OUTER alignment: max 1500px; 24px gutters desktop,
   16px gutters <=900px. Text columns stay readable, and technical
   overflow stays inside its own local scrolling element.
*/
:root {
  --esp-content-max: 1500px;
  --esp-gutter: 24px;
  --esp-reading-max: 80ch;
}
@media (max-width: 900px) {
  :root { --esp-gutter: 16px; }
}
/* Align shared page chrome, content surfaces, navigation and Docs shell. */
body:is(.homePage,.editorialV34,.docsPage) :is(.siteHeader .container,.footer .container,main .container),
body.ds-v1 .ds-container,
body.docsPage :is(.docsV2Shell,.docsV2TopbarInner) {
  box-sizing: border-box;
  width: min(var(--esp-content-max),calc(100% - 2 * var(--esp-gutter))) !important;
  max-width: var(--esp-content-max) !important;
  margin-inline: auto !important;
}
body.ds-v1 { --ds-max-width: var(--esp-content-max); --ds-gutter: var(--esp-gutter); }
body.site-v47 { --contentMax: var(--esp-content-max); }

/* Respect content boundaries when columns resize, rather than growing the page. */
body.homePage :is(.heroGrid,.platformCards,.audienceGrid,.homeBuildGrid,.appSplit,.whyHeroPanel,.whyValueGrid,.whyPlatformItems,.homeIndependentTop) > *,
body.editorialV34 :is(.pageHeroGrid,.partnerHeroGrid,.aboutHeroGrid,.pf-hero-grid,.hw-hero-grid,.fm-hero-grid,.ap-hero-grid,.pf-components,.hw-workflow-grid,.fm-capability-grid,.ap-feature-grid,.legalSummaryGrid,.principleGrid,.audienceGrid,.partnerBenefits) > *,
body.docsPage :is(.docsV2Shell,.docsV2Center,.docsV2Article,.docsV2ArticleBody) {
  min-width: 0;
}
body:is(.homePage,.editorialV34,.docsPage) main img,
body:is(.homePage,.editorialV34,.docsPage) main video,
body:is(.homePage,.editorialV34,.docsPage) main picture {
  max-width: 100%;
}
body:is(.homePage,.editorialV34,.docsPage) main :is(h1,h2,h3,p,li) {
  overflow-wrap: break-word;
}

/* The real quadcopter image should remain visible; the CTAs must never
   be pushed underneath the first viewport by forced full-height alignment. */
body.homePage .hero { min-height: 0; }
body.homePage .heroGrid { align-items: start; }
body.homePage .heroCopy { min-width: 0; }
body.homePage .heroButtons { display: flex; flex-wrap: wrap; min-width: 0; }
body.homePage .heroButtons .button { max-width: 100%; min-width: 0; }
@media (min-width: 1021px) {
  body.homePage .hero { padding-top: clamp(20px,2.2vw,34px); }
  body.homePage .heroCopy { padding-bottom: 0; }
  body.homePage .hero h1.heroSlogan { margin-top: 12px; margin-bottom: 12px; }
  body.homePage .heroLead { margin-bottom: 0; }
  body.homePage .heroButtons { margin-top: 17px; }
}
@media (max-width: 700px) {
  body.homePage .heroButtons { gap: 10px; }
  body.homePage .heroButtons .button { flex: 1 1 100%; width: 100%; }
}

/* Jump menus: keep every choice visible on smaller devices. Keep
   horizontal scrolling solely for real technical data, not main navigation. */
@media (max-width: 1100px) {
  body.editorialV34 .v34-jump-inner { min-width:0; }
  body.editorialV34 .v34-jump-links {
    display:flex;flex-wrap:wrap;overflow:visible;gap:8px;
    max-width:100%;white-space:normal;
  }
  body.editorialV34 .v34-jump-links a {
    min-height:44px;max-width:100%;white-space:normal;
    text-align:center;overflow-wrap:anywhere;
  }
  body.platformV1 .pf-jump-links {
    display:flex;flex-wrap:wrap;overflow:visible;max-width:100%;gap:8px;
  }
  body.platformV1 .pf-jump-links a {
    min-height:44px;max-width:100%;white-space:normal;
    text-align:center;overflow-wrap:anywhere;
  }
}

/* Give tables their own scroll containers, keeping each page's width intact. */
body.editorialV34 main :is(.partnerCompare,.legalDocumentWrap,.policyDocument),
body.docsPage :is(.docsV3TableWrap,.docsTableScrollable,.docsV2Article pre) {
  max-width:100%;min-width:0;
}
body.editorialV34 main .partnerCompare,
body.docsPage :is(.docsV3TableWrap,.docsTableScrollable,.docsV2Article pre) {
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
/* Long configuration paths may wrap in prose. Literal terminal commands
   inside <pre> retain whitespace and scroll within the code block. */
body.docsPage .docsV2Article :is(p,li,dd) code {
  overflow-wrap:anywhere;word-break:break-word;
}
body.docsPage .docsV2Article pre code {
  white-space:pre;overflow-wrap:normal;word-break:normal;
}

@media (prefers-reduced-motion: reduce) {
  body.homePage .heroButtons .button { transition:none; }
}


/* v55 Performance & Accessibility — site-wide and theme-aware.
   Outline cues are intentional; no box shadows are introduced. */
html:not([data-theme="dark"]) { --dim: #586474; }

/* Make keyboard focus clear across links, forms, disclosure controls and scroll regions. */
body:is(.homePage,.editorialV34,.docsPage) :is(a,button,summary,input,select,textarea,[tabindex="0"]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
body.docsPage .docsTableScrollable[tabindex="0"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Ensure scrollable table content can be browsed by touch and by keyboard. */
body.docsPage .docsTableScrollable { overscroll-behavior-inline: contain; }

/* Dark-theme text selection: text remains legible even on gradients/headings. */
html[data-theme="dark"] body:is(.homePage,.editorialV34,.docsPage) ::selection {
  background: rgba(102,221,176,.29);
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* Respect reduced-motion preference throughout page and navigation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body:is(.homePage,.editorialV34,.docsPage) *,
  body:is(.homePage,.editorialV34,.docsPage) *::before,
  body:is(.homePage,.editorialV34,.docsPage) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}