/* Site-wide design polish (29 Oct 2026, design QA of beta).
   Loaded after the page stylesheets; some pages also carry inline <style> blocks in the body, so rules here start with html to outrank them.
   Lives outside css/pages/, so convert.py never overwrites it. Page-specific rules use html[data-page]. */

/* 1. Line breaks: no single word alone on the last line, balanced headings */
html main p,html main li,html main blockquote,html main figcaption,html footer.site p{text-wrap:pretty}
html main h1,html main h2,html main h3{text-wrap:balance}

/* 2. Homepage hero: keep the body text clear of the phone in the photo (laptop widths) */
@media (min-width:761px){html[data-page="/"] .hero .body{max-width:44ch}}

/* 3. One H1 size on every subpage (homepage keeps its larger hero): 54px desktop, 34px phone */
html.bro:not([data-page="/"]) main h1{font-size:clamp(34px,4.2vw,54px)!important;line-height:1.08!important;font-weight:800!important;letter-spacing:-.025em!important}

/* 4. Section headings back on the 36px standard */
html[data-page="/"] #switching h2,
html[data-page="/large-operations/security-trust/"] #facts h2{font-size:clamp(28px,3vw,36px)!important;line-height:1.15!important}

/* 5. Section spacing: same scale as every other section (.sec clamp 56–112px), so headings line up at every width */
@media (min-width:761px){
  html[data-page="/about-cloudfarms/"] #leadership{padding-block:clamp(56px,8vw,112px)}
  html[data-page="/about-cloudfarms/"] #team{padding-bottom:clamp(56px,8vw,112px)}
  html[data-page="/customer-stories/"] #stories{padding-block:clamp(56px,8vw,112px)}
  html[data-page="/news/"] #news{padding-block:clamp(56px,8vw,112px)}
  html[data-page="/switching/customer-impact/"] #data{padding-block:clamp(56px,8vw,112px)}
}

/* 6. Common left edge: About, Customer Stories and News text columns start where every other section starts */
html .ab-col{margin-inline:0}

/* 7. Readable grey for small text (captions, names under quotes, form labels) */
:root{--cf-ink-50:#5c7387}

/* 8. Phones: bigger tap areas for text links, without moving the layout */
@media (max-width:760px){
  html main a.more,html main .actions a.link{display:inline-block;padding-block:11px;margin-block:-11px}
  html .f-top ul{gap:0}
  html .f-top li a{display:block;padding-block:8px}
  html .f-bot a{display:inline-block;padding-block:10px;margin-block:-10px}
}

/* App store badges are links (2 Nov) */
html a.badge{text-decoration:none;transition:background-color .15s}
html a.badge:hover,html a.badge:focus-visible{background:rgba(255,255,255,.1)}

/* #4 (2 Nov): About, Customer Stories and News heroes use the same title block as the other subpages:
   page-name eyebrow 16–19px, eyebrow starts at the same height as on product/Large Operations/Switching pages */
html .ab-hero{padding-top:clamp(48px,6vw,88px)}
html .ab-hero .eyebrow{font-size:clamp(16px,1.4vw,19px);letter-spacing:.16em;margin-bottom:16px}

/* #7 (2 Nov): on short pages (legal notice) the footer sits at the bottom of the window, not above an empty strip */
html body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
html body>main{flex:1 0 auto}
html body>header.site,html body>footer.site{flex-shrink:0}

/* #6 (2 Nov): Country Presence team cards — every name on one line. The name size follows the card width
   (max 20px; ~17px in the five-column row), the same on every card, so "Bogdan Samoylenko" fits without wrapping */
html .cp-p .tx{container-type:inline-size}
html .cp-p h3{white-space:nowrap;font-size:min(20px,10cqi);margin-bottom:10px}

/* Martin (2 Nov): About "From the office to the barn" spans the full content width like every other section.
   Mission and Vision sit side by side in a full-width box.
   Martin (3 Nov): the story paragraphs span the full width too (they kept a 62ch reading width before). */
html[data-page="/about-cloudfarms/"] .ab-story .ab-col{max-width:none}
html[data-page="/about-cloudfarms/"] .ab-story .ab-col>p{max-width:none}
html .ab-story .ab-mvs{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
html .ab-story .ab-mvi+.ab-mvi{border-top:0;padding-top:0;border-left:1px solid var(--cf-turquoise);padding-left:clamp(28px,4vw,56px)}
@media (max-width:760px){html .ab-story .ab-mvs{grid-template-columns:1fr;gap:28px}html .ab-story .ab-mvi+.ab-mvi{border-left:0;padding-left:0;border-top:1px solid var(--cf-turquoise);padding-top:28px}}


/* 2 Nov site review (1): homepage cards — texts start at the same height even when one title wraps.
   Product cards reserve two title lines in the 2- and 4-column layouts; the three cards under the hero
   share their rows (subgrid), so titles, texts and links line up. */
@media (min-width:561px){html .prod-grid .pcard h3{min-height:2.3em}}
@media (min-width:901px){html .three-grid .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}html .three-grid .card>:last-child{align-self:start}}

/* (2) Footer column headings: one line where the columns allow it ("Large Operations" wrapped on every page);
   in the narrow six-column range all headings take two lines so the link lists still start level. */
html.bro footer.site .f-top h4{letter-spacing:.1em}
@media (min-width:1200px){html.bro footer.site .f-top h4{white-space:nowrap}}
@media (min-width:981px) and (max-width:1199px){html.bro footer.site .f-top h4{min-height:2lh}}

/* (4) Customer Stories: quotes sit at the bottom of each card, level across a row */
html .cs-grid .st .tx{flex:1 1 auto}
html .cs-grid .st .tx>figure.q{margin-top:auto}

/* Phone review (2 Nov) ---------------------------------------------------------------- */
/* (1) Form fields 16px: below 16px iPhone Safari zooms the page in when a field is tapped */
html .form input,html .form select,html .form textarea{font-size:16px}

/* (2) Homepage hero on phones and tablets (up to the 861px desktop layout): the photo becomes a clear band above the text instead of a dark background behind it */
@media (max-width:860px){
  html.bro .hero .bg{position:relative;inset:auto;height:clamp(230px,58vw,420px)}
  html.bro .hero .bg img{left:0;width:100%;object-position:58% 32%;-webkit-mask-image:none;mask-image:none}
  html.bro .hero .bg::after{background:linear-gradient(180deg,rgba(0,45,80,0) 55%,rgba(0,45,80,.85) 92%,var(--cf-darkblue) 100%)}
  html.bro .hero .hero-grid{min-height:0;padding-top:20px}
}

/* (3) "Built for large operations" on product pages and Capabilities, phones/tablets: eyebrow and headline first,
   then the farm-network graphic, then the tiles (as on the homepage), so the graphic no longer sits above its heading */
@media (max-width:980px){
  html .lo .lo2{row-gap:0}
  html .lo .lo2>div:first-child{display:contents}
  html .lo .lo2>div:first-child>*{order:4}
  html .lo .lo2>div:first-child>.eyebrow{order:1}
  html .lo .lo2>div:first-child>h2{order:2}
  html .lo .lo2>.lo-net{grid-row:auto;order:3;margin:28px auto 8px}
}

/* (4) Wheel labels on phones: the larger homepage sizes on every page with the wheel */
@media (max-width:520px){html .wheel .wn{font-size:22px}html .wheel .wt{font-size:28px}}

/* (5) Customer Stories on phones: story cards without a photo get a short name panel instead of a 220px empty block */
@media (max-width:760px){html .cs-grid>.st .ph.np{height:104px;min-height:0;flex:0 0 auto}}

/* (6) Holding Administration tree graphic: the "kept apart" tag stays on one line */
html[data-page="/large-operations/holding-administration/"] .ct .org,html[data-page="/large-operations/holding-administration/"] .ct .sep{white-space:nowrap;display:inline-block}
@media (max-width:399px){html[data-page="/large-operations/holding-administration/"] .ct .sep{margin-left:22px;margin-top:2px}}

/* Martin (3 Nov): phone menu. 17 page stylesheets (copied from the mockups) redefine .panel with a white background,
   so on phones their dropdowns were white boxes and the current page's entry (white text from header.css) was
   invisible. Restore the shared header's dark menu on every page; same look as the homepage. */
@media (max-width:1100px){
  html .nav .panel{background:transparent;border:0;box-shadow:none}
  html .nav .panel a{color:#fff}
  html .nav .panel a:hover,html .nav .panel a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
  html .nav .panel .ph{color:var(--cf-turquoise)}
}

/* Header 981–1100px (3 Nov): the shared header switches to the menu button below 1100px (layout/header.css),
   but most subpages still carry their own header rules that switch at 980px, so in between they showed the
   menu list stacked open under the header and no menu button. Same menu-button layout as the homepage here. */
@media (min-width:981px) and (max-width:1100px){
  html .nav{gap:12px}
  html .nav ul{display:none;position:absolute;left:0;right:0;top:var(--header-h,68px);background:var(--cf-darkblue);border-bottom:1px solid rgba(255,255,255,.12);flex-direction:column;padding:12px var(--gutter) 20px;gap:0;box-shadow:var(--shadow-md);max-height:calc(100dvh - var(--header-h,68px));overflow-y:auto}
  html .nav.menu-open ul{display:flex}
  html .nav li>a,html .nav li>button{color:#fff}
  html .nav li>button{width:100%;justify-content:space-between}
  html .nav li>button:hover,html .nav li.open>button{background:rgba(255,255,255,.12);color:#fff}
  html .panel{position:static;box-shadow:none;border:0;padding:0 0 8px 12px;margin:0;background:transparent;min-width:0}
  html .nav li .panel::before{display:none}
  html .panel a{color:#fff}
  html .panel a:hover,html .panel a[aria-current]{background:rgba(255,255,255,.12);color:#fff}
  html .panel .ph{color:var(--cf-turquoise)}
  html .nav .cta{order:1}
  html .nav .burger{display:grid;place-items:center;order:2}
}


/* Headlines on at most two lines on desktop (David, 4 Nov). Copy unchanged; layout only. -------------- */
/* Country Presence and Customer Impact: nothing sits beside the hero text, so the headline may use more width */
html .cp-hero .phero-grid{grid-template-columns:1fr}
html .cp-hero h1{max-width:12.6em}
html .ci-hero h1{max-width:14.6em}
html .ci-hero .sub{max-width:none}
/* Capabilities: wider text column; the wheel keeps its size by reaching into the right margin */
@media (min-width:1101px){
  html .chero-grid{grid-template-columns:minmax(0,calc(clamp(34px,4.2vw,54px)*14.4)) minmax(0,1fr);column-gap:24px}
  html .chero-wheel{margin-right:calc(-1*clamp(0px,(100vw - 1104px)/2 - 32px,140px))}
}
/* Switching strip ("Everything you need to make the switch."): wider headline column */
@media (min-width:981px){html .sw-grid,html .sw-strip .sw-grid{grid-template-columns:1.65fr 1fr 1fr 1fr}}
/* Product pages, "One system from breeding to finishing.": headline above the three cards (as on Capabilities) */
@media (min-width:981px){html .xs-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}html .xs-grid>:first-child{grid-column:1/-1}}
/* Product pages, "One system from management to daily execution.": slightly wider text column */
@media (min-width:981px){html .es-grid{grid-template-columns:1.1fr 1fr}}
html.bro .es-grid .h2.h2c{max-width:none}
/* Closing demo block: headline 40px (was 48), wider text column */
@media (min-width:861px){html #demo .close-grid>div:first-child h2{font-size:clamp(30px,2.8vw,40px)}}
@media (min-width:1200px){html .close-grid{grid-template-columns:1.4fr 1fr}}
/* Hero eyebrow + H1 at the same height on every subpage: single-column heroes (R&S, Customer Impact, Data Migration, FAQ, Product Offer) used 80px max padding, all others 88px */
html .rs-hero .phero-grid,html .ci-hero .phero-grid,html .dm-hero .phero-grid,html .fq-hero .phero-grid,html .po-hero .phero-grid{padding-block:clamp(48px,6vw,88px)}

/* Hero sub-headline on Customer Stories and News in the same style as every other subpage (.phero .sub:
   Red Hat Display bold, 18–23px, Cloudfarms blue), optional body line below it as on the product pages (David, 4 Nov).
   Our Story keeps its lighter intro paragraph (.ab-lead) on purpose. */
html .ab-hero h1:has(+ .ab-sub){margin-bottom:14px}
html .ab-hero .ab-lead.ab-sub{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.7vw,23px);line-height:1.3;color:var(--accent);max-width:30ch}
html .ab-hero .ab-body{font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--fg-2);margin:18px 0 0;max-width:52ch}
/* Product pages "Every step of the day": eyebrow + H2 at the same height as every other section (standard section padding, text top-aligned next to the wheel instead of vertically centred) */
html .steps-sig.sec{padding-block:clamp(56px,8vw,112px)}
html .es-grid{align-items:start}

/* Header with the language switcher (5 Nov, br review): the logo link could shrink, so with longer menu labels
   (pt-BR) plus the switcher the logo shrank on every desktop width and vanished at 1101–1150 px. The logo never
   shrinks now; only when the switcher is shown (li.lang), the menu items sit a little tighter so the same row still
   fits between the logo and the demo button. Without the switcher (com today) nothing changes. */
html .nav>a:first-child{flex:none}
@media (min-width:1101px){
  html .nav:has(li.lang) ul{gap:2px}
  html .nav:has(li.lang) li>a,html .nav:has(li.lang) li>button{padding-left:10px;padding-right:10px}
}
@media (min-width:1101px) and (max-width:1279px){
  html .nav:has(li.lang){gap:12px}
  html .nav:has(li.lang) li>a,html .nav:has(li.lang) li>button{padding-left:6px;padding-right:6px}
}