/* ============================================================
   PAGE EDITOR SECTIONS, SERVER-RENDERED LAYER
   public/assets/gt/blocks.css is the approved prototype file, kept as copied.
   This file only adds what server rendering needs without inline styles
   (CSP-ready): column counts, the banner picture and its darkening as
   classes, the design tokens swatches, and the spacing rules blocks.css
   wrote against the prototype's inline padding-top:0.
   ============================================================ */

/* ------------------------------------------------------------
   CONTRAST (2026-10-12, WCAG AA in light and dark)
   --blue is the TEXT colour. Anything with white text on it uses a fill
   shade instead (--blue-fill, --blue-fill-hover), and brand-colour bands use
   their own stops (--band-1..3), all worked out by ThemeCss::palette() from
   the brand colour and set again in /content/theme.css after this file.
   The values here are the approved brand colour's, for pages without it.
   Selectors repeat gt.css / v2.css / blocks.css (loaded before this file),
   which stay as copied. Band text colours = ThemeCss::BAND_TEXT.
   ------------------------------------------------------------ */
:root{--blue-fill:#0F5EAB;--blue-fill-hover:#0C4B89;--band-1:#0B4780;--band-2:#0F5EAB;--band-3:#1663AE}
:root[data-theme="dark"]{--blue-fill:#1461AD;--blue-fill-hover:#3779B9;--band-1:#062645;--band-2:#0A3C6E;--band-3:#0C4B89}

/* white text on the brand colour (as found: background:var(--blue), hover var(--blue-700)) */
.btn-primary{background:var(--blue-fill)}
.btn-primary:hover{background:var(--blue-fill-hover)}
.btn-dark:hover{background:var(--blue-fill)}
.catcard:hover .ic{background:var(--blue-fill)}
.themetog button[aria-pressed="true"]{background:var(--blue-fill)}
.skip{background:var(--blue-fill)}
.seg a[aria-current="true"]{background:var(--blue-fill)}
.pager a[aria-current="page"]{background:var(--blue-fill);border-color:var(--blue-fill)}
.steps4 .n{background:var(--blue-fill)}

/* brand-colour bands (as found: gradients from --blue-700 / --blue / --blue-400, and color-mix of --blue in dark) */
.blk.t-blue,:root[data-theme="dark"] .blk.t-blue{background:linear-gradient(135deg,var(--band-1),var(--band-2))}
.bnr-blue,:root[data-theme="dark"] .bnr-blue{background:linear-gradient(120deg,var(--band-1),var(--band-2) 55%,var(--band-3))}
/* their text: solid colours, 4.5:1 on the lightest stop (as found: rgba(232,238,245,.65 to .8), #9CC6F0, kicker at opacity .8) */
.blk.t-blue .sec-head p,.blk.t-blue p,.t-blue .cdown p,.t-blue .split-copy p,.t-blue .tbody p,.t-blue .ctab p,.t-blue .steps4 p,.bnr-blue p{color:#F0F5FA}
.blk.t-blue .kicker,.bnr-blue .kicker{color:#D6E6F7;opacity:1}
.t-blue .stats span,.t-blue .ctile .cn em,.t-blue .tquotes figcaption{color:#DCE6F0}
.t-blue .faq .pm::before,.t-blue .faq .pm::after{background:#D6E6F7}
.t-blue .steps4 .n{background:#fff;color:var(--band-1)}

/* category tiles per row (blocks.js set --cols inline) */
.ctiles.cms-cols-2{--cols:2}.ctiles.cms-cols-3{--cols:3}.ctiles.cms-cols-4{--cols:4}.ctiles.cms-cols-5{--cols:5}.ctiles.cms-cols-6{--cols:6}
@media (max-width:900px){.ctiles[class*="cms-cols-"]{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* promo banner with a picture behind the text: a real <img>, the overlay above it, the words above both */
.bnr>.cms-bnr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bnr-image::before{z-index:1}
.bnr-image>.bnr-copy{z-index:2}
.cms-dim-0{--bdim:0}.cms-dim-5{--bdim:.05}.cms-dim-10{--bdim:.1}.cms-dim-15{--bdim:.15}.cms-dim-20{--bdim:.2}.cms-dim-25{--bdim:.25}
.cms-dim-30{--bdim:.3}.cms-dim-35{--bdim:.35}.cms-dim-40{--bdim:.4}.cms-dim-45{--bdim:.45}.cms-dim-50{--bdim:.5}.cms-dim-55{--bdim:.55}
.cms-dim-60{--bdim:.6}.cms-dim-65{--bdim:.65}.cms-dim-70{--bdim:.7}.cms-dim-75{--bdim:.75}.cms-dim-80{--bdim:.8}.cms-dim-85{--bdim:.85}.cms-dim-90{--bdim:.9}

/* built-in sections that follow another white section keep a real gap after a banner or a coloured band
   (blocks.css matched the prototype's style="padding-top:0"; the server uses class pt0) */
.blk-banner+section.pt0{padding-top:16px}
.blk.t-surface+section.pt0,.blk.t-blue+section.pt0,.blk.t-dark+section.pt0,.blk.band+section.pt0,.band+section.pt0{padding-top:64px}

/* design tokens panel (internal) */
.cms-sw-1{background:#0F5EAB}.cms-sw-2{background:#0B4880}.cms-sw-3{background:#3B86D6}.cms-sw-4{background:#EAF2FB}.cms-sw-5{background:#0A1018}
.cms-sw-6{background:#0D1520}.cms-sw-7{background:#F5F7FA}.cms-sw-8{background:#12794A}.cms-sw-9{background:#9A6200}
.cms-note{margin:0;color:var(--ink-2);font-size:13.5px}

/* quotation terms preview */
.cms-terms-list{margin:0 0 18px;padding-left:22px;display:grid;gap:10px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* editing inside the staff preview: the tag sits on built-in roots too */
.gt-editing .band[data-sec],.gt-editing .showcase[data-sec]{position:relative}
.gt-editing .hero>.gt-tag{z-index:40}
.gt-editing [data-ek]:empty{display:inline-block;min-width:2.5em;min-height:1em;background:rgba(59,134,214,.08)}
@media (prefers-reduced-motion:reduce){.gt-editing [data-sec]{transition:none}}