/* Wide screens: section backgrounds (videos, gradients, colour bands, footer) stay full width, while content
   stops growing at 1600px. The theme's containers already cap content at 1512px; vw-based offsets/spacing in
   the theme CSS use var(--vw) instead of vw (see tools/cap_viewport_width.py). */
:root {
	--site-max-width: 1600px;
	--vw: min(1vw, calc(var(--site-max-width) / 100));
	--site-gutter: max(0px, calc((100vw - var(--site-max-width)) / 2)); /* space outside the 1600px area */
}
/* Utility bar: background full width, items inside the 1600px area. */
@media (min-width: 960px) {
	.site-header__utility-menu { padding-inline: var(--site-gutter); }
}
/* Hero: the theme uses a 2:1 media ratio, so on wide-but-short screens the hero grew taller than the window and
   the tagline (pinned to its bottom) fell below the fold. Cap it at 800px, and at the window height when that
   is smaller (never below 480px). */
@media (min-width: 768px) {
	.topper-home__slide :is(img, video) {
		max-height: max(480px, min(800px, 100vh));
		max-height: max(480px, min(800px, 100svh));
	}
}
/* Hero slider controls: keep them inside the 1600px area. */
.topper-home__controls { left: calc(var(--site-gutter) + var(--iti-spacer-7)); }

/* Firefox: the theme sizes these icons with flex-basis only, so Firefox measures the button without the icon
   and the label runs into the right padding/divider. Give the icons an explicit size. */
.site-header__utility-menu button:has(svg) svg,
.mobile-nav-menus__utility-menu .menu button:has(svg) svg { width: 23px; height: 23px; flex: 0 0 23px; }
.site-header__utility-menu .site-header__search-button svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Small adjustments for server-rendered listing markup. */
.facet-clear { cursor: pointer; }
.facet-index__selections a.facet-selection-value { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.facet-index__no-results { padding: 2rem 0; }
.topper-home__slide img.iti-block-primitive-web-video__video { width: 100%; height: 100%; object-fit: cover; }
#facet-index { scroll-margin-top: 120px; }

/* AI answer on the search results page */
.ai-answer { margin: 32px 0 8px; }
.ai-answer[hidden], .ai-answer [hidden] { display: none !important; }
.ai-answer__inner {
	position: relative; overflow: hidden;
	padding: 24px 28px 22px;
	background: #fff;
	border: 1px solid var(--iti-color-deep-navy-20, #cfcdda);
	box-shadow: 0 10px 30px rgba(13, 6, 68, .06);
}
.ai-answer__inner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--iti-color-cyan, #a3eceb), var(--iti-color-chartreuse, #d5ffab) 60%, var(--iti-color-sapphire, #2169ed)); }
.ai-answer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ai-answer__title { margin: 0; font-family: var(--iti-f-primary); font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--iti-color-deep-navy, #0d0644); display: flex; align-items: center; gap: 8px; }
.ai-answer__spark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--iti-color-cyan, #a3eceb), var(--iti-color-chartreuse, #d5ffab)); font-size: 13px; }
.ai-answer__start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.ai-answer__start p { margin: 0; color: var(--iti-color-deep-navy-70, #56517c); font-family: var(--iti-f-primary); }
.ai-answer__loading { display: flex; align-items: center; gap: 10px; color: var(--iti-color-deep-navy-70, #56517c); font-family: var(--iti-f-primary); }
.ai-answer__dots { display: inline-flex; gap: 4px; }
.ai-answer__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--iti-color-sapphire, #2169ed); animation: ai-dot 1.1s infinite ease-in-out; }
.ai-answer__dots i:nth-child(2) { animation-delay: .15s; }
.ai-answer__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-answer__dots i { animation: none; opacity: .6; } }
.ai-answer__body { font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-contextual; font-feature-settings: "dlig" 0, "calt" 0; font-family: var(--iti-f-body); font-size: 1.0625rem; line-height: 1.6; color: var(--iti-color-lead, #212121); }
.ai-answer__body p { margin: 0 0 .75em; }
.ai-answer__body ul { margin: 0 0 .75em 1.2em; padding: 0; }
.ai-answer__body li { margin: .25em 0; }
.ai-answer__cite a { display: inline-block; min-width: 1.4em; padding: 0 .35em; margin-left: 1px; border-radius: 999px; background: var(--iti-color-gray, #f4f9f9); border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); color: var(--iti-color-sapphire, #2169ed); font-family: var(--iti-f-primary); font-size: .7rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.ai-answer__cite a:hover { background: var(--iti-color-sapphire, #2169ed); color: #fff; }
.ai-answer__msg { color: var(--iti-color-deep-navy-70, #56517c); font-family: var(--iti-f-primary); }
.ai-answer__sources { margin: 14px 0 0; padding: 14px 0 0 1.4em; border-top: 1px solid var(--iti-color-deep-navy-20, #cfcdda); font-family: var(--iti-f-primary); font-size: .875rem; columns: 2 320px; column-gap: 32px; }
.ai-answer__sources li { margin: 0 0 6px; break-inside: avoid; color: var(--iti-color-deep-navy-70, #56517c); }
.ai-answer__sources li:target a { background: var(--iti-color-chartreuse, #d5ffab); }
.ai-answer__sources a { color: var(--iti-color-deep-navy, #0d0644); font-weight: 600; text-decoration: underline; text-decoration-color: var(--iti-color-deep-navy-20, #cfcdda); text-underline-offset: 3px; }
.ai-answer__sources a:hover { text-decoration-color: currentColor; }
.ai-answer__kind { margin-left: 8px; font-size: .75rem; color: var(--iti-color-deep-navy-47, #8d8aa7); }
.ai-answer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--iti-color-deep-navy-20, #cfcdda); font-family: var(--iti-f-primary); font-size: .8125rem; color: var(--iti-color-deep-navy-70, #56517c); }
.ai-answer__note { margin: 0; }
.ai-answer__rate { display: flex; align-items: center; gap: 8px; }
.ai-answer__rate button { padding: 4px 12px; border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); background: #fff; color: var(--iti-color-deep-navy, #0d0644); font: inherit; font-weight: 600; cursor: pointer; }
.ai-answer__rate button:hover { border-color: var(--iti-color-sapphire, #2169ed); color: var(--iti-color-sapphire, #2169ed); }
@media (max-width: 767px) { .ai-answer { margin-top: 20px; } .ai-answer__inner { padding: 20px 18px 18px; } }

/* "Ask AI" row in the quick search results */
.search-suggest__item--ai { display: flex; align-items: center; gap: 10px; padding: var(--iti-spacer-3, 12px) var(--iti-spacer-4, 16px); border-top: 1px solid var(--iti-color-deep-navy-20, #cfcdda); color: var(--iti-color-deep-navy, #0d0644); font-family: var(--iti-f-heading); font-weight: 600; }
.search-suggest__item--ai .ai-answer__spark { width: 22px; height: 22px; font-size: 11px; flex: none; }

/* Spanish pages: small machine-translation note (bottom-left) */
.translation-notice { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 8px 8px 8px 12px; background: #fff; border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); box-shadow: 0 8px 24px rgba(13, 6, 68, .14); font-family: var(--iti-f-primary); font-size: .8125rem; line-height: 1.4; color: var(--iti-color-deep-navy-70, #56517c); }
.translation-notice[hidden] { display: none; }
.translation-notice__icon { display: inline-grid; place-items: center; flex: none; width: 26px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, var(--iti-color-cyan, #a3eceb), var(--iti-color-chartreuse, #d5ffab)); font-size: .6875rem; font-weight: 600; color: var(--iti-color-deep-navy, #0d0644); }
.translation-notice a { margin-left: 4px; color: var(--iti-color-sapphire, #2169ed); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.translation-notice__close { flex: none; width: 26px; height: 26px; border: 0; background: none; color: var(--iti-color-deep-navy-47, #8d8aa7); font-size: 18px; line-height: 1; cursor: pointer; }
.translation-notice__close:hover { color: var(--iti-color-deep-navy, #0d0644); }

/* Search popup: "Ask in your own words" explanation */
.search-ai-intro { margin-top: 28px; padding: 18px 20px; max-width: 880px; background: var(--iti-color-gray, #f4f9f9); border-left: 4px solid; border-image: linear-gradient(180deg, var(--iti-color-cyan, #a3eceb), var(--iti-color-chartreuse, #d5ffab), var(--iti-color-sapphire, #2169ed)) 1; font-family: var(--iti-f-primary); color: var(--iti-color-deep-navy, #0d0644); }
.search-ai-intro__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.search-ai-intro__title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.search-ai-intro__text { margin: 0 0 12px; font-size: .9375rem; line-height: 1.5; color: var(--iti-color-deep-navy-70, #56517c); }
.search-ai-intro__label { margin: 0 0 6px; font-family: var(--iti-f-primary); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iti-color-deep-navy-47, #8d8aa7); }
.search-ai-intro__examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.search-ai-intro__examples a { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); color: var(--iti-color-deep-navy, #0d0644); font-size: .875rem; text-decoration: none; }
.search-ai-intro__examples a::before { content: "✦ "; color: var(--iti-color-sapphire, #2169ed); }
.search-ai-intro__examples a:hover, .search-ai-intro__examples a:focus-visible { border-color: var(--iti-color-sapphire, #2169ed); color: var(--iti-color-sapphire, #2169ed); }
.search-ai-intro__note { margin: 0; font-size: .75rem; color: var(--iti-color-deep-navy-47, #8d8aa7); }
@media (max-width: 767px) { .search-ai-intro { margin-top: 20px; padding: 14px 16px; } }

/* Search: relaxed keyword match note */
.search-relaxed { margin: 0 0 18px; padding: 10px 14px; background: var(--iti-color-gray, #f4f9f9); border-left: 3px solid var(--iti-color-sapphire, #2169ed); font-family: var(--iti-f-primary); font-size: .875rem; color: var(--iti-color-deep-navy-70, #56517c); }

/* Search results: sort switch, quick answers, tip */
.topper--search__meta { flex-wrap: wrap; gap: 8px 24px; }
.search-sort { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-family: var(--iti-f-primary); font-size: .875rem; color: var(--iti-color-deep-navy-70, #56517c); }
.search-sort a { padding: 4px 12px; border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); color: var(--iti-color-deep-navy, #0d0644); text-decoration: none; }
.search-sort a:hover { border-color: var(--iti-color-sapphire, #2169ed); }
.search-sort a.is-active { background: var(--iti-color-deep-navy, #0d0644); border-color: var(--iti-color-deep-navy, #0d0644); color: #fff; }
.quick-answer .ai-answer__spark { font-size: 12px; font-weight: 700; }
.quick-answer__note { font-size: .9375rem; color: var(--iti-color-deep-navy-70, #56517c); }
.quick-answer__source { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--iti-color-deep-navy-20, #cfcdda); font-family: var(--iti-f-primary); font-size: .875rem; color: var(--iti-color-deep-navy-70, #56517c); }
.quick-answer__source a { color: var(--iti-color-sapphire, #2169ed); font-weight: 600; }
.search-tip { margin: 24px 0 18px; padding: 12px 16px; background: var(--iti-color-gray, #f4f9f9); border-left: 3px solid var(--iti-color-chartreuse, #d5ffab); font-family: var(--iti-f-primary); font-size: .875rem; line-height: 1.5; color: var(--iti-color-deep-navy-70, #56517c); }

/* ---------------------------------------------------------------------------------------------------------------
   Accessibility options (templates/partials/overlays.html #a11y-dialog, static/site/a11y.js)
   --------------------------------------------------------------------------------------------------------------- */
.a11y-toggle svg { flex-basis: 22px !important; }
.a11y-dialog { max-width: 34rem; }
.a11y-dialog__body { display: grid; gap: 14px; }
.a11y-dialog__group { margin: 4px 0 0; padding: 0; border: 0; }
.a11y-dialog__legend { margin-bottom: 8px; padding: 0; font-family: var(--iti-f-primary); font-size: var(--iti-fs-small-text); font-weight: 600; color: var(--iti-color-deep-navy); }
.a11y-dialog__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a11y-size { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1.5px solid var(--iti-color-deep-navy-20, #cfcdda); border-radius: 10px; cursor: pointer; font-family: var(--iti-f-primary); font-size: .875rem; color: var(--iti-color-deep-navy); }
.a11y-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.a11y-size__sample { font-weight: 700; font-size: 1rem; line-height: 1.2; }
.a11y-size__sample--l { font-size: 1.25rem; }
.a11y-size__sample--xl { font-size: 1.5rem; }
.a11y-size:has(input:checked) { border-color: var(--iti-color-sapphire, #2169ed); background: #eef4fe; }
.a11y-size:has(input:focus-visible) { outline: 3px solid var(--iti-color-sapphire, #2169ed); outline-offset: 2px; }
.a11y-dialog__options { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.a11y-dialog__options li { margin: 0; padding: 0; }
.a11y-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--iti-color-deep-navy-20, #cfcdda); cursor: pointer; }
.a11y-option__text { display: grid; gap: 2px; }
.a11y-option__name { font-family: var(--iti-f-primary); font-weight: 600; font-size: 1rem; color: var(--iti-color-deep-navy); }
.a11y-option__desc { font-family: var(--iti-f-primary); font-size: .875rem; color: var(--iti-color-deep-navy-70, #56517c); }
.a11y-option input[role=switch] {
	-webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0;
	border-radius: 999px; background: #8d8aa7; cursor: pointer; transition: background .2s ease;
}
.a11y-option input[role=switch]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(13, 6, 68, .35); transition: transform .2s ease; }
.a11y-option input[role=switch]:checked { background: var(--iti-color-sapphire, #2169ed); }
.a11y-option input[role=switch]:checked::before { transform: translateX(18px); }
.a11y-option input[role=switch]:focus-visible { outline: 3px solid var(--iti-color-sapphire, #2169ed); outline-offset: 3px; }
.a11y-dialog__footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.a11y-dialog__status { margin: 0; color: var(--iti-color-deep-navy-70, #56517c); }

/* Larger text: the theme sizes text in rem, so scaling the root scales everything. */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }

/* High contrast: muted greys become full-strength navy, borders darker, links underlined. */
html.a11y-contrast {
	--iti-color-deep-navy-70: var(--iti-color-deep-navy);
	--iti-color-deep-navy-60: var(--iti-color-deep-navy);
	--iti-color-deep-navy-47: #3d3869;
	--iti-color-deep-navy-20: #6e6a8f;
}
html.a11y-contrast .small-text, html.a11y-contrast time, html.a11y-contrast .post-item__date { color: inherit !important; opacity: 1 !important; }
html.a11y-contrast a:not(.btn), html.a11y-links a:not(.btn) { text-decoration: underline !important; text-decoration-thickness: from-font; text-underline-offset: .15em; }
html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { border-color: var(--iti-color-deep-navy) !important; }

/* Readable font: the sans-serif interface font for body text as well. */
html.a11y-font { --iti-f-body: var(--iti-f-primary); }
html.a11y-font body { letter-spacing: .01em; }

/* More text spacing (WCAG 1.4.12 values). */
html.a11y-spacing body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, a, span, h1, h2, h3, h4, h5, h6) {
	line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

/* Stop animations. */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
	animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
html.a11y-motion .member-logos__track { animation-play-state: paused !important; }

/* Highlight focus. */
html.a11y-focus :focus-visible { outline: 3px solid #2169ed !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #ffe680 !important; }
/* The theme fills header icons; this icon is drawn with outlines. */
.a11y-toggle svg circle:first-of-type, .a11y-toggle svg path { fill: none !important; stroke: currentColor; }
.a11y-toggle svg circle:last-of-type { fill: currentColor !important; stroke: none; }

/* ---------------------------------------------------------------------------------------------------------------
   Edit mode for signed-in staff (apps/core/editmode.py, templates/partials/admin_bar.html)
   --------------------------------------------------------------------------------------------------------------- */
body.has-admin-bar { --admin-bar-h: 44px; --header-sticky-top: var(--admin-bar-h); padding-top: var(--admin-bar-h); }
.admin-bar {
	position: fixed; inset: 0 0 auto 0; z-index: 2147483000; font: 500 13px/1.3 var(--iti-f-primary, system-ui, sans-serif);
	color: #fff; background: #0d0644; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.admin-bar--preview { background: #3d3869; }
.admin-bar__inner { display: flex; align-items: center; gap: 12px; height: var(--admin-bar-h, 44px); padding: 0 16px; white-space: nowrap; }
.admin-bar__mode { display: inline-flex; align-items: center; gap: 8px; }
.admin-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: #d5ffab; box-shadow: 0 0 0 3px rgba(213, 255, 171, .25); }
.admin-bar__dot--off { background: #a3eceb; box-shadow: 0 0 0 3px rgba(163, 236, 235, .25); }
.admin-bar__hint { color: rgba(255, 255, 255, .7); }
.admin-bar__page { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); min-width: 0; }
.admin-bar__label { color: rgba(255, 255, 255, .7); }
.admin-bar__spacer { flex: 1; }
.admin-bar a, .admin-bar button, .admin-bar summary { color: #fff; font: inherit; }
.admin-bar__btn {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px; background: transparent; text-decoration: none !important; cursor: pointer; list-style: none;
}
.admin-bar__btn::-webkit-details-marker { display: none; }
.admin-bar__btn:hover, .admin-bar__btn:focus-visible { background: rgba(255, 255, 255, .12); }
.admin-bar__btn--primary { background: #d5ffab; border-color: #d5ffab; color: #0d0644 !important; font-weight: 600; }
.admin-bar__btn--primary:hover, .admin-bar__btn--primary:focus-visible { background: #c4f590; }
.admin-bar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-bar__link { padding: 0; border: 0; background: none; text-decoration: none; cursor: pointer; }
.admin-bar__link:hover, .admin-bar__link:focus-visible { text-decoration: underline; }
.admin-bar :focus-visible { outline: 2px solid #d5ffab; outline-offset: 2px; }
.admin-bar__user { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); }
.admin-bar__avatar { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #d5ffab, #a3eceb); color: #0d0644; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; text-align: center; padding: 0 0 1px; box-sizing: border-box; }
.admin-bar__logout { margin: 0; }
/* Log out with the console's Lucide log-out icon (and without the theme's square button marker). */
.admin-bar__logout-btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-bar__logout-btn::before, .admin-bar__logout-btn::after { content: none !important; display: none !important; }
.admin-bar__menu { position: relative; }
.admin-bar__dropdown {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 10px; border-radius: 12px; background: #fff;
	color: #0d0644; box-shadow: 0 12px 32px rgba(13, 6, 68, .25); white-space: normal;
}
.admin-bar__dropdown-title { margin: 4px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #56517c; }
.admin-bar__dropdown ul { margin: 0 0 6px; padding: 0; list-style: none; }
.admin-bar__dropdown a { display: block; padding: 7px 8px; border-radius: 8px; color: #0d0644 !important; text-decoration: none; }
.admin-bar__dropdown a:hover, .admin-bar__dropdown a:focus-visible { background: #eef4fe; }
.admin-bar__notice { padding: 7px 16px; background: #fff3d6; color: #5c3d00; font-size: 13px; }
.admin-bar__notice--scheduled { background: #efe9fb; color: #3f2a75; }
.admin-bar__notice a { margin-left: 8px; color: inherit !important; font-weight: 700; text-decoration: underline; }
.admin-bar__messages { padding: 7px 16px; background: #ecfaf2; color: #0b5a34; font-size: 13px; }
.admin-bar__message { margin: 0; }
.admin-bar__message--error { color: #8a1c13; }
body.has-admin-bar .admin-bar ~ * dialog { margin-top: 0; }
@media (max-width: 1100px) { .admin-bar__hint, .admin-bar__name, .admin-bar__label { display: none; } }
@media (max-width: 760px) {
	body.has-admin-bar { --admin-bar-h: 48px; }
	.admin-bar__inner { gap: 8px; padding: 0 10px; overflow-x: auto; }
	.admin-bar__btn span, .admin-bar__type, .admin-bar__link[href] { display: none; }
	.admin-bar__btn { padding: 0 9px; }
}

/* Status badges and ✎ buttons on content (edit mode only). */
.edit-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font: 700 11px/1.5 var(--iti-f-primary, sans-serif); letter-spacing: .02em; white-space: nowrap; }
.edit-badge--draft { background: #fff3d6; color: #7a4f00; }
.edit-badge--scheduled { background: #efe9fb; color: #4b2f8a; }
.edit-badge--hidden { background: #fde8e7; color: #8a1c13; }
.edit-badge--published { background: #e7f8ef; color: #0b5a34; }
.is-edit-mode :is(.post-card, .post-card-resource, .post-item) { position: relative; }
.edit-controls { position: absolute; top: 8px; right: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.edit-controls > * { pointer-events: auto; }
.edit-pencil {
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #0d0644; color: #fff !important;
	box-shadow: 0 2px 8px rgba(13, 6, 68, .35); opacity: .85; transition: opacity .15s ease, transform .15s ease;
}
.edit-pencil:hover, .edit-pencil:focus-visible { opacity: 1; transform: scale(1.08); outline: 2px solid #d5ffab; outline-offset: 2px; }
.edit-pencil svg, .edit-section svg, .edit-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.edit-section-row { position: relative; z-index: 6; display: flex; justify-content: flex-end; max-width: var(--iti-container-max-width, 1440px); margin: 8px auto; padding: 0 16px; }
.edit-section, .edit-add {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #0d0644; color: #fff !important;
	font: 600 13px/1.3 var(--iti-f-primary, sans-serif); text-decoration: none !important; box-shadow: 0 2px 8px rgba(13, 6, 68, .25);
}
.edit-add { background: #2169ed; }
.edit-section:hover, .edit-section:focus-visible, .edit-add:hover, .edit-add:focus-visible { outline: 2px solid #d5ffab; outline-offset: 2px; }
/* Section buttons float over the top-right corner of their section without taking space (the theme's header overlaps
   the first section, so buttons there sit below the header). */
.edit-section-row { height: 0; margin: 0 auto; padding: 0; overflow: visible; }
.edit-section-row > a { position: absolute; top: 12px; right: 16px; }
.richtext-content > .edit-section-row:first-child > a { top: calc(var(--header-height, 88px) + 16px); }
/* The bar sits in the normal flow at the top of the page (no fixed positioning or page offsets), so the theme's
   header measurements and overlap stay exactly as for visitors. */
body.has-admin-bar { padding-top: 0; --header-sticky-top: 0px; }
.admin-bar { position: relative; inset: auto; }
/* Hero: its button sits in the hero's bottom-right corner (it follows the hero, which must stay the first element). */
.topper-home + .edit-section-row > a { top: auto; bottom: 16px; }
/* ✎ and badges must sit above the theme's full-card link (.overlay-link, z-index 99), or the click opens the item. */
.edit-controls { z-index: 101; }
/* Add menu headings: bold interface font (paragraphs otherwise get the serif body font). */
.admin-bar__dropdown-title { font-family: var(--iti-f-primary, system-ui, sans-serif) !important; font-weight: 700 !important; }
.admin-bar__dropdown a { font-family: var(--iti-f-primary, system-ui, sans-serif); }

/* Utility bar: search, accessibility and globe are all edge-to-edge Lucide-style icons at one size. */
.site-header__utility-menu button:has(svg) svg,
.site-header__utility-menu .site-header__search-button svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Homepage hero controls (pause / play, previous, next; static/site/hero-video.js): hidden from view, but they appear
   as soon as a keyboard user tabs to them, so the moving hero can still be paused (WCAG 2.2.2). Mouse users stop
   it with "Stop animations" in the Accessibility panel. */
.richtext-content .iti-block-topper-home .topper-home__controls.topper-home__controls--on {
	display: flex; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.richtext-content .iti-block-topper-home .topper-home__controls.topper-home__controls--on:focus-within {
	opacity: 1; pointer-events: auto;
}

/* Skip-link target gets focus programmatically; no ring around the whole page. */
#content[tabindex="-1"]:focus { outline: none; }

/* Focus ring on the blue call-to-action panel: white, so it stands out from the blue (WCAG 1.4.11). */
.cta .cta__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Search results found inside an attached document: the matching passage (apps/content/documents.py). */
.search-doc-snippet {
	margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--iti-color-cyan, #a3eceb); background: #f4fbfb;
	font-family: var(--iti-f-primary, "Saans", "Helvetica Neue", Arial, sans-serif); font-size: 15px;
	line-height: 1.55; color: var(--iti-color-darkest, #0d0644); max-width: 62em;
}
.search-doc-snippet__label { font-weight: 600; margin-right: 2px; }
.search-doc-snippet mark { background: #d5ffab; color: inherit; padding: 0; }

/* Language & region dialog: suggestion buttons under the fields (static/site/site.js). Nothing changes until clicked. */
.language-region-dialog__suggestion {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; width: 100%; margin: 8px 0 6px; padding: 6px 8px;
	border: 0; border-radius: 6px; background: #f1faf8; color: var(--iti-color-deep-navy-70, #56517c); text-align: left;
	font: 400 14px/1.4 var(--iti-f-primary, "Saans", "Helvetica Neue", Arial, sans-serif); cursor: pointer;
}
.language-region-dialog__suggestion[hidden] { display: none; }
.language-region-dialog__suggestion::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--iti-color-emerald, #00ae91); flex: 0 0 7px; }
.language-region-dialog__suggestion strong { color: var(--iti-color-deep-navy, #0d0644); font-weight: 600; }
.language-region-dialog__suggestion-use { margin-left: auto; color: var(--iti-color-sapphire, #2169ed); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.language-region-dialog__suggestion:hover, .language-region-dialog__suggestion:focus-visible { background: #e3f6f2; }
.language-region-dialog__suggestion:focus-visible { outline: 2px solid var(--iti-color-sapphire, #2169ed); outline-offset: 2px; }

/* Edit bar: the "(Polish text is in …)" note only where there is room (the button's tooltip says it too). */
.admin-bar__btn { white-space: nowrap; flex-shrink: 0; }
.admin-bar__note { font-size: inherit; font-weight: 400; }
@media (max-width: 1440px) { .admin-bar__note { display: none; } }

/* Homepage hero on translated pages: Spanish, French, German and Polish headlines are much longer than the English
   one, so they scale with the screen and never grow up into the logo and menu. English keeps the design sizes. */
html:not([lang^="en"]) .topper-home__heading.xl-header {
	font-size: clamp(2.5rem, 7.2vw, var(--iti-fs-xl-header));
	overflow-wrap: anywhere;
	hyphens: auto;
}
/* Edit bar groups keep their size (a squeezed group spilled over its neighbours); on narrower screens the secondary
   buttons become icon-only (name in the tooltip; screen readers still read it) and the page type is hidden. */
.admin-bar__mode, .admin-bar__page, .admin-bar__menu, .admin-bar__user, .admin-bar__logout { flex-shrink: 0; }
.admin-bar__page { min-width: auto; }
@media (max-width: 1100px) {
	.admin-bar__type { display: none; }
	.admin-bar__btn:not(.admin-bar__btn--primary) span {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
	.admin-bar__btn:not(.admin-bar__btn--primary) { padding: 0 9px; }
}

/* Cookie banner (templates/partials/cookie_banner.html, static/site/consent.js). */
.cookie-banner {
	position: fixed; z-index: 950; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 1080px;
	background: #fff; border: 1px solid var(--iti-color-deep-navy-20, #cfcdda); border-top: 4px solid var(--iti-color-sapphire, #2169ed);
	box-shadow: 0 18px 50px rgba(13, 6, 68, .22); font-family: var(--iti-f-primary, sans-serif); color: var(--iti-color-deep-navy, #0d0644);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: end; padding: 20px 24px; }
.cookie-banner__title { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; }
.cookie-banner__desc { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--iti-color-deep-navy-70, #56517c); max-width: 62ch; }
.cookie-banner__desc a { color: var(--iti-color-sapphire, #2169ed); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookie-banner__btn {
	min-height: 44px; padding: 10px 18px; border: 1px solid var(--iti-color-sapphire, #2169ed); border-radius: 0;
	background: var(--iti-color-sapphire, #2169ed); color: #fff; font: 600 .9375rem/1.2 var(--iti-f-primary, sans-serif); cursor: pointer;
}
.cookie-banner__btn--ghost { background: #fff; color: var(--iti-color-deep-navy, #0d0644); border-color: var(--iti-color-deep-navy-20, #cfcdda); }
.cookie-banner__btn:hover { filter: brightness(.95); }
.cookie-banner__btn:focus-visible, .cookie-banner__switch:focus-visible { outline: 2px solid var(--iti-color-sapphire, #2169ed); outline-offset: 2px; }
.cookie-banner__btn[hidden] { display: none; }
.cookie-banner__settings { grid-column: 1 / -1; display: grid; gap: 10px; }
.cookie-banner__settings[hidden] { display: none; }
.cookie-banner__category { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 14px; background: var(--iti-color-gray, #f4f9f9); }
.cookie-banner__category-name { margin: 0; font-weight: 600; font-size: .9375rem; }
.cookie-banner__category-desc { margin: 2px 0 0; font-size: .875rem; line-height: 1.45; color: var(--iti-color-deep-navy-70, #56517c); }
.cookie-banner__always { flex: none; font-size: .8125rem; font-weight: 600; color: var(--iti-color-emerald, #00ae91); }
.cookie-banner__none { margin: 0; font-size: .8125rem; color: var(--iti-color-deep-navy-70, #56517c); }
.cookie-banner__switch {
	flex: none; appearance: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; background: #c9c7d6; position: relative; cursor: pointer; transition: background .2s;
}
.cookie-banner__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cookie-banner__switch:checked { background: var(--iti-color-sapphire, #2169ed); }
.cookie-banner__switch:checked::after { transform: translateX(20px); }
@media (max-width: 760px) {
	.cookie-banner { left: 8px; right: 8px; bottom: 8px; }
	.cookie-banner__inner { grid-template-columns: 1fr; padding: 16px; }
	.cookie-banner__actions { justify-content: stretch; }
	.cookie-banner__btn { flex: 1 1 auto; }
}
/* While the banner is open, the floating translation notice moves above it. */
body.has-cookie-banner .translation-notice { bottom: 190px; }
.site-footer__cookie-settings {
	margin-left: 16px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline;
	text-underline-offset: 2px; cursor: pointer;
}

/* Embedded content waiting for consent: "Content from YouTube · Load content". */
.consent-embed {
	display: grid; place-items: center; width: 100%; max-width: 760px; min-height: 220px; margin: 1.5rem 0; padding: 24px;
	background: linear-gradient(135deg, #0d0644, #23186b); color: #fff; font-family: var(--iti-f-primary, sans-serif);
}
.consent-embed__box { max-width: 460px; text-align: center; }
.consent-embed__title { margin: 0 0 6px; font-size: 1.0625rem; }
.consent-embed__text { margin: 0 0 14px; font-size: .9375rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.consent-embed__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.consent-embed__load, .consent-embed__always {
	min-height: 44px; padding: 10px 16px; border: 1px solid #fff; background: #fff; color: #0d0644; font: 600 .9375rem/1.2 var(--iti-f-primary, sans-serif); cursor: pointer;
}
.consent-embed__always { background: transparent; color: #fff; }
.consent-embed__load:focus-visible, .consent-embed__always:focus-visible { outline: 2px solid #a3eceb; outline-offset: 2px; }
.cookie-banner, .cookie-banner *, .consent-embed, .consent-embed * { font-family: var(--iti-f-primary, "Saans", "Helvetica Neue", Arial, sans-serif) !important; }

/* Utility bar (Ask or Search · Accessibility · Global / English · Member Login): every item centred on the same line
   (the buttons used line-height: normal and sat 2.5px higher than the links). */
.site-header__utility-menu .menu > li > a,
.site-header__utility-menu .menu > li > button,
.site-header__utility-menu .site-header__search-button {
	display: flex; align-items: center; gap: var(--iti-spacer-1, 6px); line-height: 24px;
}
.site-header__utility-menu .menu > li > a > span,
.site-header__utility-menu .menu > li > button > span,
.site-header__utility-menu .site-header__search-button > span { line-height: 24px; }
.site-header__utility-menu .menu > li > button svg,
.site-header__utility-menu .site-header__search-button svg { display: block; }

/* Edit bar notices in the site's sans-serif (the theme sets a serif on paragraphs). The first-visit explanation of
   edit mode uses ITI ochre; its text is navy because white on #e66012 would fall short of WCAG contrast (3.5:1). */
.admin-bar__messages, .admin-bar__messages * { font-family: var(--iti-f-primary, "Saans", "Helvetica Neue", Arial, sans-serif) !important; }
.admin-bar__messages--intro {
	display: flex; align-items: center; gap: 12px; padding: 5px 10px 5px 16px;
	background: #e66012; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4;
}
.admin-bar .admin-bar__messages--intro .admin-bar__message { flex: 1; margin: 0; color: #fff; font-size: 12px !important; line-height: 1.4 !important; }
.admin-bar .admin-bar__intro-close {
	flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; background: transparent; color: #fff;
	font: 400 17px/1 Arial, sans-serif; cursor: pointer; transition: background-color .15s, color .15s;
}
.admin-bar .admin-bar__intro-close:hover, .admin-bar .admin-bar__intro-close:focus-visible { background: #fff; color: #e66012; outline: none; }
.admin-bar__intro-close:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }

/* Search sent: field greyed out, spinner in the button, "Searching…" under the field and a progress bar on top,
   until the results page arrives */
.search__form.is-loading .search__input, .search__form.is-loading .search__placeholder { opacity: .45; transition: opacity .15s; }
.search__form.is-loading .search__clear { opacity: .3; pointer-events: none; }
.search__form.is-loading .search__submit-btn { position: relative; pointer-events: none; filter: saturate(.55) brightness(.92); cursor: progress; }
.search__busy {
	display: flex; align-items: center; gap: 10px; margin: 12px 0 0;
	color: var(--iti-color-deep-navy-70, #56517c); font-family: var(--iti-f-primary); font-size: 1rem; font-weight: 600;
}
.search__busy::before { content: ""; flex: none; width: 16px; height: 16px; border: 2.5px solid rgba(33, 105, 237, .2); border-top-color: var(--iti-color-sapphire, #2169ed); border-radius: 50%; animation: iti-spin .8s linear infinite; }
body.is-searching::before {
	content: ""; position: fixed; top: 0; left: 0; z-index: 10000; height: 3px; width: 40%;
	background: linear-gradient(90deg, transparent, var(--iti-color-sapphire, #2169ed), #a3eceb, transparent);
	animation: iti-progress 1.1s ease-in-out infinite;
}
@keyframes iti-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
body.is-searching { cursor: progress; }
.search__form.is-loading .search__submit-btn { position: relative; pointer-events: none; }
.search__form.is-loading .search__submit-btn svg { visibility: hidden; }
.search__form.is-loading .search__submit-btn::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
	border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
	animation: iti-spin .7s linear infinite;
}
@keyframes iti-spin { to { transform: rotate(360deg); } }

/* AI answer: thinking state with changing steps and placeholder lines */
.ai-answer__loading { display: block !important; }
.ai-answer__loading[hidden] { display: none !important; }
.ai-answer__step { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--iti-color-deep-navy-70, #56517c); font-family: var(--iti-f-primary); font-size: 1rem; }
.ai-answer__spinner { flex: none; width: 20px; height: 20px; border: 2.5px solid rgba(33, 105, 237, .2); border-top-color: var(--iti-color-sapphire, #2169ed); border-radius: 50%; animation: iti-spin .8s linear infinite; }
.ai-answer__skeleton { display: grid; gap: 10px; }
.ai-answer__skeleton i {
	display: block; height: 12px; border-radius: 6px;
	background: linear-gradient(90deg, rgba(33, 105, 237, .08) 0%, rgba(33, 105, 237, .18) 50%, rgba(33, 105, 237, .08) 100%);
	background-size: 200% 100%; animation: ai-shimmer 1.4s ease-in-out infinite;
}
.ai-answer__skeleton i:nth-child(1) { width: 92%; }
.ai-answer__skeleton i:nth-child(2) { width: 78%; animation-delay: .1s; }
.ai-answer__skeleton i:nth-child(3) { width: 55%; animation-delay: .2s; }
@keyframes ai-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
	.search__form.is-loading .search__submit-btn::after, .ai-answer__spinner, .search__busy::before { animation-duration: 2s; }
	body.is-searching::before { animation: none; width: 100%; opacity: .6; }
	.ai-answer__skeleton i { animation: none; }
}