/*
 * Base styles of the rebuilt pages (components/site/SiteShell.tsx): the few things every page relies on — box sizing,
 * the site's text font and colours, images that fit their box, form controls that use the page's font. Each page's
 * own stylesheet does the rest: everything below is inside :where(), so any page rule wins over it. Only under
 * body.zz-site, so pages still on the imported markup are unaffected.
 */
/* the text defaults the pages were designed with (the imported theme's: Poppins 16px, line height 1.75) */
body.zz-site {
  margin: 0; background: #fff; color: #4d6995;
  font: 400 16px/1.75 "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: break-word;
}
:where(body.zz-site) *, :where(body.zz-site) *::before, :where(body.zz-site) *::after { box-sizing: border-box; }
:where(body.zz-site) :where(img, svg, video) { max-width: 100%; }
:where(body.zz-site) :where(img, video) { height: auto; }
:where(body.zz-site) :where(a) { color: #006db8; }
:where(body.zz-site) :where(h1, h2, h3, h4, h5, h6) { font-family: "Poppins", system-ui, sans-serif; color: #101828; }
:where(body.zz-site) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.zz-site) :where(button) { cursor: pointer; }
:where(body.zz-site) :where(.zz-main) { display: block; }
/* visually hidden, read by screen readers and search engines */
body.zz-site .zz-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* blocks that fade up as they scroll into view (components/site/Reveal.tsx); visible unless the script hid them */
body.zz-site [data-reveal="wait"] { opacity: 0; transform: translateY(18px); }
body.zz-site [data-reveal="in"] { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }

/* the colour chosen on a CMS button block inside a page built from the old site's layout (lib/cms/render.ts); Blue keeps the page's own button */
body.zz-site a.elementor-button.zz-btn--navy { background-color: #002866 !important; border-color: #002866 !important; color: #fff !important; }
body.zz-site a.elementor-button.zz-btn--navy:hover, body.zz-site a.elementor-button.zz-btn--navy:focus-visible { background-color: #001a45 !important; border-color: #001a45 !important; }
body.zz-site a.elementor-button.zz-btn--success { background-color: #8bc53f !important; border-color: #8bc53f !important; color: #fff !important; }
body.zz-site a.elementor-button.zz-btn--success:hover, body.zz-site a.elementor-button.zz-btn--success:focus-visible { background-color: #6fa22c !important; border-color: #6fa22c !important; }
body.zz-site a.elementor-button.zz-btn--outline { background-color: transparent !important; border: 2px solid #006db8 !important; color: #006db8 !important; }
body.zz-site a.elementor-button.zz-btn--outline:hover, body.zz-site a.elementor-button.zz-btn--outline:focus-visible { background-color: #006db8 !important; color: #fff !important; }
body.zz-site a.elementor-button.zz-btn--outline .elementor-button-text { color: inherit !important; }