/* Production-only tweaks on top of the design's CSS. Keep the design files (tokens/base/components) untouched. */

/* Brand font: Rockford Sans (licensed web font, self-hosted: /assets/fonts/rockford-sans, see its CSS for the credit).
   The design was drawn in Rockford Sans. Inter files stay in /assets/fonts/inter as a fallback option (not loaded). */
:root { --font-sans: "Rockford Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* internal review notes from the prototype never show to visitors */
.gap, [data-gapm], .review-bar,
.review-toggle, .review-inline, [data-review-toggle], [data-review-pop] { display: none !important; }
/* Review mode is OFF on the live site: the design defaults it ON (for reviewers), which shows
   "Placeholder · To collect" cards (.review-only) and reviewer "why" notes. Unfinished figure/story
   placeholders in articles (.art-ph) are hidden too until the content exists. */
.review-only, .fcta__why, .art-ph { display: none !important; }

/* small utilities for our own Astro pages (404, careers): CSP forbids style="" attributes */
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.job-list { list-style: none; }
.job-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line, #e2e8f0); }

/* ---- Page loading screen (site.config.mjs -> ui.pageLoader). Remove this block with the flag if not kept. ---- */
.page-loader {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-6, 24px);
  background: var(--c-ground, #fff);
  transition: opacity .35s ease, visibility 0s linear .35s;
  /* safety net if JavaScript never fires 'load': fade out after 8 s anyway */
  animation: page-loader-failsafe 0s linear 8s forwards;
}
html:not(.js) .page-loader { display: none; }
html.is-loaded .page-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader__logo { width: min(180px, 45vw); height: auto; }
.page-loader__bar { position: relative; width: min(180px, 45vw); height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--c-ink, #000) 8%, transparent); }
.page-loader__bar > span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, #F99E1C, #F81B69, #5100FF); animation: page-loader-slide 1.1s ease-in-out infinite; }
@keyframes page-loader-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes page-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .page-loader__bar > span { animation: none; width: 100%; opacity: .5; } }

/* English only (site.config.mjs -> languages): hide the design's language switchers when one language is published */
html[data-single-lang] [aria-label="Language"],
html[data-single-lang] .lang-sw, html[data-single-lang] .ft-lang, html[data-single-lang] .mnav__lang { display: none !important; }

/* Marketing opt-in checkbox on forms (site.config.mjs -> consent, added by /assets/js/consent.js) */
form .consent { grid-column: 1 / -1; } /* full row in grid forms (pop-up) */
.consent { display: flex; align-items: flex-start; gap: var(--s-3, 12px); margin: var(--s-2, 8px) 0 var(--s-4, 16px); }
.consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-accent, #5100ff); cursor: pointer; }
.consent label { font-size: var(--fs-small, 14px); line-height: 1.45; color: var(--c-ink-2, inherit); cursor: pointer; }
.on-dark .consent label { color: inherit; }

/* Website forms (public/assets/js/forms.js): honeypot hidden from people, reCAPTCHA notice instead of the floating badge */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { grid-column: 1 / -1; margin: var(--s-3, 12px) 0 0; font-size: 12px; line-height: 1.45; color: var(--c-muted, #6b6b7b); }
.form-send-error { grid-column: 1 / -1; margin: var(--s-3, 12px) 0 0; font-size: var(--fs-small, 14px); color: #b42318; }