/* Layout-level styles for pages on redesignLayout.hbs.
   tokens.css and components.css are copies of the design system (docs/redesign/design/design-system); keep page and layout glue here instead. */

[hidden] { display: none !important; }
html { background: var(--ink-900); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.site { background: var(--white); overflow-x: clip; }
.nowrap { white-space: nowrap; }

/* ---------- Hero ---------- */
/* The design's 940px minimum is taller than a laptop window, which pushed the buttons below the fold. Fit the window instead (the content still sets the minimum) */
.isw-hero { min-height: min(940px, 100vh); min-height: min(940px, 100svh); }
.isw-hero__body { padding-bottom: clamp(32px, 5vw, 72px); }

/* ---------- Header inside a photo hero ---------- */
/* Full width so the logo lines up with the hero text; the hero is a flex column, which would otherwise shrink the header to its content. */
.isw-hero > .isw-header { width: 100%; box-sizing: border-box; }
.isw-nav a.isw-btn--light { padding: 9px 18px; }

/* ---------- Language switcher (nav pill and mobile menu), set apart from the page links by a hairline ---------- */
.isw-nav a.site-nav__lang { position: relative; margin-left: 9px; font-weight: 700; letter-spacing: .06em; }
.isw-nav a.site-nav__lang::before { content: ''; position: absolute; left: -7px; top: 11px; bottom: 11px; width: 1px; background: rgba(255,255,255,.3); }
.isw-menu a.site-menu__lang { position: relative; margin-top: 9px; font-size: 17px; font-weight: 700; }
.isw-menu a.site-menu__lang::before { content: ''; position: absolute; left: 18px; right: 18px; top: -5px; height: 1px; background: rgba(255,255,255,.14); }

/* ---------- Red photo tint toggle (nav pill and mobile menu) ---------- */
/* The swatch is red while the red tint is on and white while it is off (the default); redesign.js keeps aria-pressed in sync */
.site-tint { display: inline-flex; align-items: center; gap: var(--space-12); padding: 8px; border: 0; background: none; color: var(--white); font: inherit; cursor: pointer; }
.site-tint__swatch { box-sizing: border-box; width: 22px; height: 22px; flex: none; border: 2px solid var(--white); border-radius: 6px; background: var(--red-500); transition: background-color .25s, border-color .25s; }
.site-tint[aria-pressed='false'] .site-tint__swatch { border-color: var(--red-500); background: var(--white); }
.isw-menu .site-tint--menu { width: 100%; padding: 14px 18px; border-radius: var(--radius-xs); font-size: 17px; font-weight: 700; text-align: left; }
.isw-menu .site-tint--menu:hover { background: rgba(255,255,255,.12); }

/* ---------- Natural-colour photos (the default; html.tint switches the design's red treatment on) ---------- */
/* Duotone photos show their natural colour; with the tint on, redesign.js swaps the grounds to their red versions ([data-red]) */
html:not(.tint) .isw-duo img { filter: none; }
html:not(.tint) .isw-duo__tint { opacity: 0; }
html:not(.tint) .isw-hero { background: var(--ink-900); }
/* The natural-colour hover twins only make sense over red photos */
html:not(.tint) .isw-hover-color { display: none; }
html:not(.tint) .isw-hero__shade { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 26%, rgba(10,10,10,0) 46%, rgba(10,10,10,.82) 100%); }

/* ---------- Sections ---------- */
/* Tighter than the design system's clamp(90px, 10vw, 150px), and the same above the first line and below the last element */
:root { --site-section-y: clamp(40px, 4vw, 64px); }
.isw-section { padding-top: var(--site-section-y); padding-bottom: var(--site-section-y); }

/* ---------- Buttons ---------- */
.isw-btn:disabled { opacity: .55; cursor: not-allowed; }
.isw-btn--primary:disabled:hover .isw-btn__arrow { transform: none; }

/* ---------- Footer ---------- */
.site-footer__brand { flex: 1 1 300px; }
.site-footer__recruit { flex: 0 1 460px; display: flex; flex-direction: column; gap: var(--space-8); font-size: 16px; }
.site-footer__recruit p { margin: 0; }
.site-footer__recruit a { font-weight: 700; }
.isw-footer__bottom a { text-decoration: none; }
.isw-footer__bottom a:hover { text-decoration: underline; }

/* ---------- Motion safety ---------- */
/* components.css only stops elements whose class contains "isw-"; this also stops their classless children
   (the rotating words, the race bar, the dropping bubblehead) and the page's own animations, so everything shows its end state */
@media (prefers-reduced-motion: reduce) {
    .isw *, .isw *::before, .isw *::after { animation: none !important; transition: none !important; }
}

/* ---------- Cookie banner (cookieconsent; colours are set in redesign.js) ---------- */
.cc-window { font-family: var(--font-text); }
.cc-window .cc-btn { font-family: var(--font-display); font-weight: 800; border-radius: var(--radius-pill); }