/* ==========================================================================
   Vision Support India: main stylesheet
   --------------------------------------------------------------------------
   1. Design tokens and display modes (set by the accessibility options)
   2. GeneratePress colour variables, mapped to our tokens
   3. Base typography and elements
   4. Focus, skip links, utilities
   5. Layout
   6. Header, search, accessibility options button
   7. Accessibility options panel
   8. Main navigation
   9. Content components (hero, cards, helpline, contacts, episodes…)
   10. Forms
   11. Events calendar (My Calendar plugin)
   12. Footer
   13. User preference media queries
   All colour pairs are checked for at least 7:1 (WCAG AAA) for text and
   3:1 for borders and icons. See docs/03-design-system.md for the table.
   ========================================================================== */

/* 1. Design tokens ======================================================== */

:root {
	--vsi-text-scale: 1;

	/* Standard theme: from the VSI logo. Navy text, the logo teal deepened
	   to reach 7:1, and a lighter logo orange behind navy text. */
	--vsi-bg: #ffffff;
	--vsi-surface: #eef6f6;
	--vsi-surface-strong: #e5f2f2;
	--vsi-ink: #101820;
	--vsi-ink-soft: #3b4652;
	--vsi-line: #5a6470;
	--vsi-brand: #00575a;
	--vsi-on-brand: #ffffff;
	--vsi-accent: #f5a04a;
	--vsi-on-accent: #101820;
	--vsi-link: #00575a;
	--vsi-link-hover: #101820;
	--vsi-focus: #101820;
	--vsi-focus-halo: #f5a04a;
	--vsi-error: #8f0f24;

	--vsi-font: "Atkinson Hyperlegible", Verdana, Tahoma, "Segoe UI", sans-serif;
	--vsi-line-height: 1.6;
	--vsi-heading-line-height: 1.25;
	--vsi-letter-spacing: normal;
	--vsi-word-spacing: normal;
	--vsi-paragraph-gap: 1.25em;

	--vsi-radius: 0.5rem;
	--vsi-border-width: 2px;
	--vsi-target: 3rem; /* Minimum height for anything clickable (48px+ at default size). */
	--vsi-gap: 1.5rem;
	--vsi-measure: 70ch;
}

/* Page background tints (Standard colours only). */
:root[data-vsi-bg="cream"] { --vsi-bg: #fff8e7; --vsi-surface: #f7ebcb; --vsi-surface-strong: #f7ebcb; }
:root[data-vsi-bg="blue"]  { --vsi-bg: #e8f1fa; --vsi-surface: #f3f8fd; --vsi-surface-strong: #f3f8fd; }
:root[data-vsi-bg="green"] { --vsi-bg: #eaf5ea; --vsi-surface: #f4faf4; --vsi-surface-strong: #f4faf4; }
:root[data-vsi-bg="grey"]  { --vsi-bg: #ededed; --vsi-surface: #f7f7f7; --vsi-surface-strong: #f7f7f7; }

/* Dark mode. Placed after the tints so it overrides them. */
:root[data-vsi-theme="dark"] {
	--vsi-bg: #121212;
	--vsi-surface: #1e1e1e;
	--vsi-surface-strong: #1e1e1e;
	--vsi-ink: #e6eef0;
	--vsi-ink-soft: #cfd8dc;
	--vsi-line: #8a949c;
	--vsi-brand: #7fdcda;
	--vsi-on-brand: #101820;
	--vsi-accent: #ffb35c;
	--vsi-on-accent: #101820;
	--vsi-link: #7fdcda;
	--vsi-link-hover: #ffffff;
	--vsi-focus: #ffffff;
	--vsi-focus-halo: #ffb35c;
	--vsi-error: #ff9e9e;
	color-scheme: dark;
}

/* High contrast: yellow text on black. */
:root[data-vsi-theme="hc-dark"] {
	--vsi-bg: #000000;
	--vsi-surface: #000000;
	--vsi-surface-strong: #000000;
	--vsi-ink: #ffff00;
	--vsi-ink-soft: #ffff00;
	--vsi-line: #ffff00;
	--vsi-brand: #ffff00;
	--vsi-on-brand: #000000;
	--vsi-accent: #ffff00;
	--vsi-on-accent: #000000;
	--vsi-link: #ffffff;
	--vsi-link-hover: #00ffff;
	--vsi-focus: #00ffff;
	--vsi-focus-halo: #000000;
	--vsi-error: #ffffff;
	--vsi-border-width: 3px;
	color-scheme: dark;
}

/* High contrast: black text on white. */
:root[data-vsi-theme="hc-light"] {
	--vsi-bg: #ffffff;
	--vsi-surface: #ffffff;
	--vsi-surface-strong: #ffffff;
	--vsi-ink: #000000;
	--vsi-ink-soft: #000000;
	--vsi-line: #000000;
	--vsi-brand: #000000;
	--vsi-on-brand: #ffffff;
	--vsi-accent: #ffff00;
	--vsi-on-accent: #000000;
	--vsi-link: #0000cc;
	--vsi-link-hover: #000000;
	--vsi-focus: #000000;
	--vsi-focus-halo: #ffff00;
	--vsi-error: #8f0f24;
	--vsi-border-width: 3px;
}

/* In the high-contrast modes, background tints are switched off. */
:root[data-vsi-theme="hc-dark"][data-vsi-bg],
:root[data-vsi-theme="hc-light"][data-vsi-bg],
:root[data-vsi-theme="dark"][data-vsi-bg] {
	--vsi-surface-strong: var(--vsi-surface);
}

/* Font choices. */
:root[data-vsi-font="lexend"]   { --vsi-font: "Lexend", Verdana, Tahoma, sans-serif; }
:root[data-vsi-font="dyslexic"] { --vsi-font: "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif; }
:root[data-vsi-font="system"]   { --vsi-font: Verdana, Tahoma, "Segoe UI", "DejaVu Sans", sans-serif; }

/* Spacing choices. "Extra wide" meets the WCAG 1.4.12 text spacing values. */
:root[data-vsi-line="wide"]     { --vsi-line-height: 1.9; --vsi-heading-line-height: 1.45; --vsi-paragraph-gap: 1.6em; }
:root[data-vsi-line="xwide"]    { --vsi-line-height: 2.2; --vsi-heading-line-height: 1.6; --vsi-paragraph-gap: 2em; }
:root[data-vsi-spacing="wide"]  { --vsi-letter-spacing: 0.06em; --vsi-word-spacing: 0.1em; }
:root[data-vsi-spacing="xwide"] { --vsi-letter-spacing: 0.12em; --vsi-word-spacing: 0.16em; }

/* 2. GeneratePress variables ============================================== */
/* GeneratePress (and its editor colour palette) uses these names. Pointing them
   at our tokens means any colour chosen in the editor follows the display mode. */

html:root {
	--contrast: var(--vsi-ink);
	--contrast-2: var(--vsi-ink-soft);
	--contrast-3: var(--vsi-line);
	--base: var(--vsi-surface);
	--base-2: var(--vsi-surface);
	--base-3: var(--vsi-bg);
	--accent: var(--vsi-brand);
}

/* 3. Base ================================================================= */

html {
	/* 112.5% of the browser's own default (usually 16px) = 18px, and it still
	   respects any larger default the visitor has set. */
	font-size: calc(112.5% * var(--vsi-text-scale));
	background-color: var(--vsi-bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 1rem;
}

body,
body.vsi {
	margin: 0;
	background-color: var(--vsi-bg);
	color: var(--vsi-ink);
	font-family: var(--vsi-font);
	font-size: 1rem;
	line-height: var(--vsi-line-height);
	letter-spacing: var(--vsi-letter-spacing);
	word-spacing: var(--vsi-word-spacing);
	overflow-wrap: break-word;
}

body button,
body input,
body select,
body textarea,
body optgroup {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: inherit;
	word-spacing: inherit;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	overflow-wrap: anywhere;
	hyphens: auto;
	font-family: var(--vsi-font);
	color: var(--vsi-ink);
	font-weight: 700;
	line-height: var(--vsi-heading-line-height);
	letter-spacing: var(--vsi-letter-spacing);
	margin: 1.75em 0 0.6em;
	text-transform: none;
}

h1, .entry-title { font-size: 2.25rem; margin-top: 0; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1.05rem; }

@media (min-width: 48em) {
	h1, .entry-title { font-size: 2.75rem; }
	h2 { font-size: 2rem; }
	h3 { font-size: 1.5rem; }
}

p, ul, ol, dl, blockquote, figure, table, pre {
	margin-top: 0;
	margin-bottom: var(--vsi-paragraph-gap);
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > dl {
	max-width: var(--vsi-measure);
}

ul, ol { padding-left: 1.5em; margin-left: 0; }
li { margin-bottom: 0.4em; }
li > ul, li > ol { margin-top: 0.4em; margin-bottom: 0; }

strong, b { font-weight: 700; }

a,
a:visited {
	color: var(--vsi-link);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--vsi-link-hover);
	text-decoration-thickness: 0.16em;
}

/* Highlight links (accessibility option). */
:root[data-vsi-links="on"] a:not(.vsi-btn):not(.wp-block-button__link):not(.vsi-skip-link) {
	background-color: var(--vsi-accent);
	color: var(--vsi-on-accent);
	text-decoration-thickness: 0.18em;
	outline: 2px solid var(--vsi-on-accent);
	outline-offset: 1px;
	padding: 0 0.15em;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

hr,
.wp-block-separator {
	border: 0;
	border-top: var(--vsi-border-width) solid var(--vsi-line);
	margin: 2.5rem 0;
	opacity: 1;
}

blockquote {
	border-left: 0.35rem solid var(--vsi-brand);
	padding: 0.25rem 0 0.25rem 1.25rem;
	margin-left: 0;
	font-style: normal;
	font-size: 1.1rem;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 1px solid var(--vsi-line);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

th { background-color: var(--vsi-surface-strong); }

::selection {
	background-color: var(--vsi-accent);
	color: var(--vsi-on-accent);
}

/* Buttons. One shape everywhere, at least 48px high at default size. */
.vsi-btn,
.vsi a.wp-block-button__link,
.vsi .wp-element-button,
body :where(button:not(.vsi-submenu-toggle, .vsi-nav__toggle, .vsi-a11y-toggle, .vsi-search__submit)),
body input[type="submit"],
body input[type="button"],
body input[type="reset"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--vsi-target);
	padding: 0.65em 1.25em;
	border: var(--vsi-border-width) solid var(--vsi-brand);
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
	font-family: var(--vsi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.vsi-btn:visited,
.vsi a.wp-block-button__link:visited { color: var(--vsi-on-brand); }

.vsi-btn:hover,
.vsi a.wp-block-button__link:hover,
.vsi .wp-element-button:hover,
body :where(button:not(.vsi-submenu-toggle, .vsi-nav__toggle, .vsi-a11y-toggle, .vsi-search__submit)):hover,
body input[type="submit"]:hover {
	background-color: var(--vsi-ink);
	border-color: var(--vsi-ink);
	color: var(--vsi-bg);
	text-decoration: underline;
}

.vsi-btn--secondary,
.vsi .is-style-outline > a.wp-block-button__link,
.vsi .wp-block-button.is-style-outline a.wp-block-button__link {
	background-color: var(--vsi-bg);
	color: var(--vsi-brand);
	border-color: var(--vsi-brand);
}

.vsi-btn--secondary:visited,
.vsi .is-style-outline > a.wp-block-button__link:visited { color: var(--vsi-brand); }

.vsi-btn--accent {
	background-color: var(--vsi-accent);
	border-color: var(--vsi-on-accent);
	color: var(--vsi-on-accent);
}

.vsi-btn--accent:visited { color: var(--vsi-on-accent); }

.vsi-btn[aria-disabled="true"] {
	opacity: 1;
	border-style: dashed;
	cursor: not-allowed;
}

.wp-block-buttons { gap: 1rem; }

/* Icons inherit text colour and scale with text. */
.vsi-icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: currentColor;
	vertical-align: -0.2em;
}

/* 4. Focus, skip links, utilities ========================================= */

/* A two-colour focus ring (dark outline plus a bright halo) stays visible on
   any background. Shown for keyboard focus only (:focus-visible). */
:focus { outline: none; }

:focus-visible,
.vsi-choice input:focus-visible + label {
	outline: 3px solid var(--vsi-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--vsi-focus-halo);
	border-radius: 2px;
}

/* Elements given tabindex="-1" only to receive focus from a skip link. */
[tabindex="-1"]:focus-visible,
main:focus-visible,
h1:focus,
h2:focus {
	outline: none;
	box-shadow: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.vsi-skip-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vsi-skip-links li { margin: 0; }

.vsi-skip-link {
	position: absolute;
	left: 1rem;
	top: -100vh;
	z-index: 100000;
	max-width: calc(100vw - 2rem);
	box-sizing: border-box;
	padding: 0.75rem 1.25rem;
	background-color: var(--vsi-accent);
	color: var(--vsi-on-accent) !important;
	font-weight: 700;
	font-size: 1.1rem;
	border: 3px solid var(--vsi-on-accent);
	border-radius: var(--vsi-radius);
	text-decoration: underline;
}

.vsi-skip-link:focus,
.vsi-skip-link:focus-visible {
	top: 1rem;
}

/* 5. Layout =============================================================== */

.vsi-container {
	width: 100%;
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	box-sizing: border-box;
}

@media (min-width: 48em) {
	.vsi-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* GeneratePress containers. */
body .site.grid-container,
body .grid-container {
	max-width: 75rem;
}

body .site,
body .one-container .site-content,
body .one-container .container,
body .inside-article,
body .site-main,
body .site-content {
	background-color: var(--vsi-bg);
	color: var(--vsi-ink);
}

body.one-container .site-content {
	padding: 2rem 1rem 3rem;
}

@media (min-width: 48em) {
	body.one-container .site-content { padding: 3rem 1.5rem 4rem; }
}

body .inside-article { padding: 0; }
body .entry-header { margin-bottom: 1.5rem; }
body .site-main > * { margin-bottom: 0; }
body .page-header { margin-bottom: 2rem; }

.home.one-container .site-content { padding-top: 0; }

/* Wide and full-width blocks. */
.entry-content .alignwide { max-width: 75rem; }
.entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/* 6. Header =============================================================== */

.vsi-header {
	background-color: var(--vsi-bg);
	border-bottom: var(--vsi-border-width) solid var(--vsi-line);
}

.vsi-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.vsi-brand { min-width: 0; max-width: 100%; }

.vsi-brand__link,
.vsi-brand__link:visited {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	color: var(--vsi-ink);
	text-decoration: none;
	min-height: var(--vsi-target);
}

.vsi-brand__link:hover .vsi-brand__name { text-decoration: underline; }

.vsi-brand__mark {
	width: 4rem;
	height: 4rem;
	flex: none;
	object-fit: contain;
}

.vsi-brand__text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

.vsi-brand__name {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.vsi-brand__tagline {
	font-size: 1rem;
	color: var(--vsi-ink-soft);
	line-height: 1.3;
}

.vsi-header__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.25rem;
}

.vsi-header__helpline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-weight: 700;
	min-height: var(--vsi-target);
}

.vsi-header__phone { font-size: 1.15rem; }

/* Search: a real, labelled field rather than a hidden icon. */
.vsi-search { margin: 0; }

.vsi-search__label {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.vsi-search__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 100%;
}

body .vsi-search__input {
	min-height: var(--vsi-target);
	min-width: 0;
	flex: 1 1 8rem;
	width: 12rem;
	max-width: 60vw;
	padding: 0.5rem 0.75rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-right: 0;
	border-radius: var(--vsi-radius) 0 0 var(--vsi-radius);
	background-color: var(--vsi-bg);
	color: var(--vsi-ink);
}

.vsi-search__submit,
.vsi-a11y-toggle,
.vsi-nav__toggle {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	white-space: normal;
	text-align: left;
	gap: 0.5rem;
	min-height: var(--vsi-target);
	padding: 0.5rem 1rem;
	border: var(--vsi-border-width) solid var(--vsi-brand);
	background-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
	font-weight: 700;
	cursor: pointer;
}

.vsi-search__submit { border-radius: 0 var(--vsi-radius) var(--vsi-radius) 0; }

.vsi-a11y-toggle,
.vsi-nav__toggle { border-radius: var(--vsi-radius); }

.vsi-a11y-toggle {
	background-color: var(--vsi-accent);
	border-color: var(--vsi-on-accent);
	color: var(--vsi-on-accent);
}

.vsi-search__submit:hover,
.vsi-a11y-toggle:hover,
.vsi-nav__toggle:hover,
.vsi-a11y-toggle[aria-expanded="true"] {
	background-color: var(--vsi-ink);
	border-color: var(--vsi-ink);
	color: var(--vsi-bg);
	text-decoration: underline;
}

/* Without JavaScript the panel can't open, so don't offer the button. */
html:not(.vsi-js) .vsi-a11y-toggle,
html:not(.vsi-js) a[href="#vsi-a11y-toggle"] {
	display: none;
}

@media (max-width: 39.99em) {
	.vsi-header__tools { width: 100%; }
	.vsi-search { flex: 1 1 100%; }
	body .vsi-search__input { width: 100%; max-width: none; flex: 1; }
	.vsi-a11y-toggle { flex: 1 1 auto; justify-content: center; }
}

/* 7. Accessibility options panel ========================================== */

.vsi-a11y-panel {
	background-color: var(--vsi-surface);
	border-top: var(--vsi-border-width) solid var(--vsi-line);
	padding: 1.5rem 0 2rem;
}

.vsi-a11y-panel[hidden] { display: none; }

.vsi-a11y-panel__title {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.vsi-a11y-panel__intro {
	margin-bottom: 1.25rem;
	max-width: var(--vsi-measure);
}

.vsi-a11y-form {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	align-items: start;
}

.vsi-a11y-group {
	margin: 0;
	padding: 1rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-bg);
	min-width: 0;
}

.vsi-a11y-legend,
.vsi-a11y-group > legend {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	padding: 0 0.25rem;
	float: none;
	width: auto;
}

.vsi-a11y-hint {
	margin: 0 0 0.5rem;
	color: var(--vsi-ink-soft);
	font-size: 0.95rem;
}

.vsi-a11y-size {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.vsi-a11y-size__value {
	min-width: 4ch;
	font-weight: 700;
	font-size: 1.15rem;
	text-align: center;
}

.vsi-a11y-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	grid-column: 1 / -1;
}

/* Large radio and checkbox targets: the whole row is clickable. */
.vsi-choice {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--vsi-target);
	margin: 0;
}

.vsi-choice input {
	position: absolute;
	left: 0.5rem;
	top: 50%;
	width: 1.4rem;
	height: 1.4rem;
	margin: -0.7rem 0 0;
	accent-color: var(--vsi-brand);
}

.vsi-choice label {
	display: block;
	box-sizing: border-box;
	width: 100%;
	overflow-wrap: anywhere;
	padding: 0.6rem 0.5rem 0.6rem 2.6rem;
	border-radius: var(--vsi-radius);
	cursor: pointer;
	line-height: 1.35;
}

.vsi-choice label:hover {
	background-color: var(--vsi-surface-strong);
	text-decoration: underline;
}

.vsi-choice input:checked + label { font-weight: 700; }

/* 8. Main navigation ====================================================== */

.vsi-nav {
	background-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
}

.vsi-nav__inner { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.vsi-nav__toggle {
	background-color: var(--vsi-bg);
	color: var(--vsi-ink);
	border-color: var(--vsi-bg);
}

.vsi-menu,
.vsi-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vsi-menu li { margin: 0; }

.vsi-menu a,
.vsi-menu a:visited {
	display: flex;
	align-items: center;
	min-height: var(--vsi-target);
	padding: 0.5rem 0.65rem;
	color: var(--vsi-on-brand);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--vsi-radius);
}

.vsi-menu a:hover,
.vsi-menu a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
}

.vsi-menu > .is-current-section > a {
	box-shadow: inset 0 -0.3rem 0 var(--vsi-accent);
	border-radius: 0;
}

.vsi-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--vsi-target);
	min-height: var(--vsi-target);
	padding: 0;
	border: var(--vsi-border-width) solid transparent;
	border-radius: var(--vsi-radius);
	background: transparent;
	color: var(--vsi-on-brand);
	cursor: pointer;
}

.vsi-submenu-toggle:hover { border-color: var(--vsi-on-brand); }

.vsi-submenu-toggle .vsi-icon { width: 1.5rem; height: 1.5rem; }

.vsi-submenu-toggle[aria-expanded="true"] .vsi-icon { transform: rotate(180deg); }

.vsi-menu .sub-menu {
	background-color: var(--vsi-bg);
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	padding: 0.5rem;
}

.vsi-menu .sub-menu a,
.vsi-menu .sub-menu a:visited {
	color: var(--vsi-link);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
}

.vsi-menu .sub-menu a:hover,
.vsi-menu .sub-menu a[aria-current="page"] {
	color: var(--vsi-ink);
	background-color: var(--vsi-surface-strong);
	text-decoration-thickness: 0.14em;
}

.vsi-menu .sub-menu a[aria-current="page"] { font-weight: 700; }

/* With JavaScript, submenus are hidden until their button opens them.
   Without it, everything stays visible so nothing is unreachable. */
.vsi-js .vsi-menu .menu-item-has-children:not(.is-open) > .sub-menu { display: none; }

/* Below 1200px (small screens, tablets, high zoom): the whole menu folds behind "Menu". */
@media (max-width: 74.99em) {
	.vsi-js .vsi-nav:not(.is-open) .vsi-menu { display: none; }

	html:not(.vsi-js) .vsi-nav__toggle { display: none; }

	.vsi-menu { padding-top: 0.5rem; }

	.vsi-menu > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid var(--vsi-on-brand);
	}

	.vsi-menu > li > a { flex: 1 1 auto; }

	.vsi-menu .sub-menu {
		flex: 1 1 100%;
		margin: 0 0 0.75rem;
	}
}

/* Wide screens: one row of sections with drop-down panels. */
@media (min-width: 75em) {
	.vsi-nav__toggle { display: none; }

	.vsi-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
	}

	.vsi-menu > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.vsi-menu > li > a { padding-right: 0.5rem; }

	.vsi-menu .menu-item-has-children > a { padding-right: 0.15rem; }

	.vsi-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 1000;
		min-width: 18rem;
		box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
	}

	/* Mega-menu: long sections use two columns. */
	.vsi-menu .sub-menu:has(> li:nth-child(6)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(16rem, 1fr));
		column-gap: 0.5rem;
		width: max-content;
		max-width: min(40rem, 90vw);
	}

	.vsi-js .vsi-menu .menu-item-has-children:not(.is-open) > .sub-menu:has(> li:nth-child(6)) { display: none; }

	/* Keep the last panels on screen. */
	.vsi-menu > li:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }
}

/* 9. Content components =================================================== */

/* Sections on long pages (home page). */
.vsi-section {
	margin: 0 0 3.5rem;
}

.vsi-section > h2:first-child,
.vsi-section > .wp-block-group__inner-container > h2:first-child { margin-top: 0; }

.vsi-section--tinted {
	background-color: var(--vsi-surface);
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	padding: 1.5rem;
}

@media (min-width: 48em) {
	.vsi-section--tinted { padding: 2rem 2.5rem; }
}

/* Hero. */
.vsi-hero {
	display: grid;
	gap: 1.5rem;
	align-items: start;
	padding: 2.5rem 0 3rem;
	margin-bottom: 3rem;
	border-bottom: var(--vsi-border-width) solid var(--vsi-line);
}

@media (min-width: 48em) {
	.vsi-hero { grid-template-columns: auto 1fr; gap: 2.5rem; padding-top: 3.5rem; }
}

/* The header already shows the logo; on small screens skip the repeat so content starts sooner. */
.vsi-hero__mark { display: none; }

@media (min-width: 48em) {
	.vsi-hero__mark { display: block; }
}

.vsi-hero__logo { width: 9rem; height: 9rem; }

.vsi-hero > div { min-width: 0; }

.vsi-hero h1 { margin: 0 0 0.5rem; }

.vsi-hero__tagline {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--vsi-brand);
	margin-bottom: 1rem;
}

:root[data-vsi-theme="dark"] .vsi-hero__tagline { color: var(--vsi-accent); }

.vsi-hero__welcome { font-size: 1.15rem; max-width: var(--vsi-measure); }

.vsi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

/* Card grids. Cards reflow to one column at high zoom. */
.vsi-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--vsi-gap);
	margin: 0 0 var(--vsi-paragraph-gap);
	padding: 0;
	list-style: none;
}

.vsi-cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* GeneratePress pads every group's inner wrapper; our components set their own spacing. */
.site-main .vsi-section > .wp-block-group__inner-container,
.site-main .vsi-cards > .wp-block-group__inner-container,
.site-main .vsi-card > .wp-block-group__inner-container,
.site-main .vsi-callout > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

/* Classic themes wrap group contents in an extra div; let the grid see the cards. */
.vsi-cards > .wp-block-group__inner-container { display: contents; }

.vsi-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

.vsi-card > .wp-block-group__inner-container > * { min-width: 0; max-width: 100%; }

.vsi-card p:last-child:has(> a:only-child) {
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 700;
}

.vsi-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1rem 1rem 1.25rem;
	background-color: var(--vsi-bg);
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-top: 0.4rem solid var(--vsi-brand);
	border-radius: var(--vsi-radius);
}

.vsi-card h3,
.vsi-card .vsi-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
}

.vsi-card p:last-child { margin-bottom: 0; }

.vsi-card__link { margin-top: auto; padding-top: 0.75rem; font-weight: 700; }

/* Helpline card. */
.vsi-helpline {
	display: grid;
	gap: 0.5rem 2rem;
	padding: 1.5rem;
	background-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
	border-radius: var(--vsi-radius);
	border: var(--vsi-border-width) solid var(--vsi-brand);
	margin: 0 0 var(--vsi-paragraph-gap);
}

@media (min-width: 48em) {
	.vsi-helpline { grid-template-columns: 1fr auto; align-items: center; padding: 2rem 2.5rem; }
}

.vsi-helpline h2,
.vsi-helpline h3 { color: var(--vsi-on-brand); margin: 0 0 0.25rem; }

.vsi-helpline p { margin: 0 0 0.5rem; }

.vsi-helpline a,
.vsi-helpline a:visited { color: var(--vsi-on-brand); }

.vsi-helpline__number {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

@media (min-width: 30em) {
	.vsi-helpline__number { font-size: 2rem; }
}

.vsi-helpline .vsi-btn {
	background-color: var(--vsi-accent);
	border-color: var(--vsi-on-accent);
	color: var(--vsi-on-accent);
}

/* Contacts list. */
.vsi-contacts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem var(--vsi-gap);
	margin: 0 0 var(--vsi-paragraph-gap);
}

.vsi-contacts > div {
	padding: 1rem 1.25rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
}

.vsi-contacts dt { font-weight: 700; font-size: 1.1rem; }
.vsi-contacts dd { margin: 0.25rem 0 0; }

/* Callout (notes, placeholders, "good to know"). */
.vsi-callout {
	padding: 1.25rem 1.5rem;
	border-left: 0.5rem solid var(--vsi-brand);
	background-color: var(--vsi-surface);
	border-radius: 0 var(--vsi-radius) var(--vsi-radius) 0;
	margin: 0 0 var(--vsi-paragraph-gap);
	max-width: var(--vsi-measure);
}

.vsi-callout > :last-child,
.vsi-callout > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* Let long words wrap inside grid items at very large text sizes. */
.vsi-card,
.vsi-helpline > *,
.vsi-contacts > div,
.vsi-footer__col {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Top bar: help line, WhatsApp, and the display settings on every page. */
.vsi-topbar {
	background-color: var(--vsi-surface);
	border-bottom: 1px solid var(--vsi-line);
}

.vsi-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.vsi-topbar__talk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-weight: 700;
}

.vsi-topbar__talk a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.vsi-topbar__sep { padding: 0 0.25rem; }

.vsi-display {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.vsi-display__label { font-weight: 700; margin-right: 0.25rem; }

body .vsi-display__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.35rem 0.8rem;
	border: var(--vsi-border-width) solid var(--vsi-brand);
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-bg);
	color: var(--vsi-brand);
	font-family: var(--vsi-font);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	white-space: normal;
}

body .vsi-display__btn--big { font-size: 1.2rem; }

body .vsi-display__btn:hover,
body .vsi-display__btn[aria-pressed="true"],
body .vsi-display__btn[aria-expanded="true"] {
	background-color: var(--vsi-brand);
	border-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
	text-decoration: underline;
}

/* Pressed state is shown by a tick, not colour alone. */
body .vsi-display__btn[aria-pressed="true"]::before {
	content: "\2713";
	font-weight: 700;
}

body .vsi-display__btn[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }

body .vsi-display__btn.vsi-a11y-toggle {
	background-color: var(--vsi-accent);
	border-color: var(--vsi-on-accent);
	color: var(--vsi-on-accent);
}

body .vsi-display__btn.vsi-a11y-toggle:hover,
body .vsi-display__btn.vsi-a11y-toggle[aria-expanded="true"] {
	background-color: var(--vsi-ink);
	border-color: var(--vsi-ink);
	color: var(--vsi-bg);
}

.vsi-header__join { max-width: 100%; }

/* At very large text sizes, let header pieces shrink and long words wrap instead of overflowing. */
.vsi-topbar__inner > *,
.vsi-header__inner > *,
.vsi-header__tools > *,
.vsi-search__row > *,
body .vsi-display__btn {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Menu sections without a page of their own: the label is the button. */
body .vsi-submenu-toggle--labelled {
	gap: 0.35rem;
	padding: 0.5rem 0.65rem;
	min-width: 0;
	font-weight: 700;
	font-size: 1rem;
	font-family: var(--vsi-font);
	white-space: nowrap;
}

.vsi-submenu-toggle--labelled:hover span { text-decoration: underline; }

.vsi-menu > .is-current-section > .vsi-submenu-toggle--labelled {
	box-shadow: inset 0 -0.3rem 0 var(--vsi-accent);
	border-radius: 0;
}

@media (max-width: 74.99em) {
	.vsi-menu > .menu-item--heading > .vsi-submenu-toggle--labelled {
		flex: 1 1 auto;
		justify-content: space-between;
	}
}

/* "Prefer to talk? Call or WhatsApp us" beside every form. */
.vsi-talk {
	max-width: 40rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: var(--vsi-border-width) solid var(--vsi-brand);
	border-left-width: 0.5rem;
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-surface);
}

.vsi-talk__title { font-weight: 700; font-size: 1.15rem; margin-bottom: 0.25rem; }

.vsi-talk p { margin-bottom: 0.5rem; }

.vsi-talk .vsi-actions { margin-top: 0.5rem; }

/* The clear next step at the end of every page. */
.vsi-next-step {
	margin: 3rem 0 0;
	padding: 1.5rem;
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-brand);
	color: var(--vsi-on-brand);
	max-width: var(--vsi-measure);
}

.vsi-next-step h2 { color: var(--vsi-on-brand); margin: 0 0 0.5rem; font-size: 1.5rem; }

.vsi-next-step p { margin-bottom: 0.5rem; }

body .vsi-next-step .vsi-btn {
	background-color: var(--vsi-accent);
	border-color: var(--vsi-on-accent);
	color: var(--vsi-on-accent);
}

/* Lists of guides, stories and news. */
.vsi-card-list .vsi-card__title { font-size: 1.25rem; margin: 0 0 0.5rem; }

.vsi-card__meta { color: var(--vsi-ink-soft); margin-bottom: 0.4rem; }

/* Events. */
.vsi-event-list {
	list-style: none;
	margin: 0 0 var(--vsi-paragraph-gap);
	padding: 0;
	max-width: var(--vsi-measure);
}

.vsi-event-item {
	padding: 1rem 0 1.25rem;
	border-bottom: var(--vsi-border-width) solid var(--vsi-line);
}

.vsi-event-item__title { margin: 0 0 0.35rem; font-size: 1.3rem; }

.vsi-event-item p { margin-bottom: 0.35rem; }

.vsi-event-details {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-surface);
	max-width: var(--vsi-measure);
}

.vsi-event-details > div { min-width: 0; overflow-wrap: anywhere; }

.vsi-event-details dt { font-weight: 700; }

.vsi-event-details dd { margin: 0; }

/* Form extras. */
.vsi-form [hidden] { display: none !important; }

.vsi-choices--inline .vsi-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

.vsi-choice__hint {
	display: block;
	font-weight: 400;
	color: var(--vsi-ink-soft);
}

.vsi-choice--hinted input { top: 1.4rem; }

.vsi-form__submit { margin-top: 2rem; }

.vsi-success__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.25rem; }

.vsi-form-wrap--compact .vsi-form { max-width: 22rem; }

.vsi-form-wrap--compact .vsi-field { margin-bottom: 0.75rem; }

.vsi-form-wrap--compact .vsi-form__submit { margin-top: 0.75rem; }

.vsi-form-wrap--compact .vsi-success,
.vsi-form-wrap--compact .vsi-error-summary { padding: 0.75rem 1rem; }

.vsi-form-wrap--compact .vsi-error-summary h2 { font-size: 1.1rem; }

/* Placeholder for a detail not yet entered in Organisation details. */
.vsi-placeholder {
	padding: 0 0.25em;
	border: 2px dashed currentColor;
	border-radius: 0.25rem;
	font-style: italic;
}

/* Show-and-hide sections (transcripts, FAQs). */
.wp-block-details,
details {
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	padding: 0 1.25rem;
	margin: 0 0 1rem;
	max-width: var(--vsi-measure);
}

details > summary {
	display: list-item;
	min-height: var(--vsi-target);
	padding: 0.75rem 0;
	font-weight: 700;
	cursor: pointer;
}

details > summary:hover { text-decoration: underline; }

details[open] > summary { border-bottom: 1px solid var(--vsi-line); margin-bottom: 1rem; }

/* Audio. The browser's own player: keyboard and screen reader friendly. */
.wp-block-audio,
.vsi-episode {
	max-width: var(--vsi-measure);
}

.wp-block-audio audio,
audio {
	width: 100%;
	min-height: 3.5rem;
}

.vsi-episode {
	padding: 1.25rem 1.5rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	margin: 0 0 2rem;
}

.vsi-episode h3 { margin-top: 0; }

/* Site map list. */
.vsi-sitemap ul { margin-bottom: 0.5rem; }

/* Search results and archives. */
.search .entry-summary,
.archive .entry-summary { max-width: var(--vsi-measure); }

body .post { margin-bottom: 2.5rem; }

/* 10. Forms =============================================================== */

body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body input[type="search"],
body input[type="password"],
body select,
body textarea {
	min-height: var(--vsi-target);
	padding: 0.5rem 0.75rem;
	border: var(--vsi-border-width) solid var(--vsi-line);
	border-radius: var(--vsi-radius);
	background-color: var(--vsi-bg);
	color: var(--vsi-ink);
	box-sizing: border-box;
	max-width: 100%;
}

body textarea { min-height: 8rem; width: 100%; }

.vsi-form { max-width: 40rem; }

.vsi-field { margin: 0 0 1.5rem; }

.vsi-field > label,
.vsi-field > legend,
.vsi-field__label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.vsi-field input[type="text"],
.vsi-field input[type="email"],
.vsi-field input[type="tel"],
.vsi-field select,
.vsi-field textarea { width: 100%; }

.vsi-field input.vsi-input--short { width: 12rem; }

.vsi-field__hint {
	display: block;
	color: var(--vsi-ink-soft);
	margin: 0 0 0.4rem;
}

.vsi-field__optional { font-weight: 400; color: var(--vsi-ink-soft); }

.vsi-field__error {
	display: block;
	color: var(--vsi-error);
	font-weight: 700;
	margin: 0 0 0.4rem;
}

.vsi-field--error {
	border-left: 0.35rem solid var(--vsi-error);
	padding-left: 1rem;
}

.vsi-field--error input,
.vsi-field--error select,
.vsi-field--error textarea { border-color: var(--vsi-error); border-width: 3px; }

fieldset.vsi-field {
	border: 0;
	padding: 0;
	min-width: 0;
}

.vsi-error-summary,
.vsi-success {
	padding: 1.25rem 1.5rem;
	border: 0.25rem solid var(--vsi-error);
	border-radius: var(--vsi-radius);
	margin: 0 0 2rem;
	max-width: 40rem;
}

.vsi-error-summary h2,
.vsi-success h2 { margin-top: 0; font-size: 1.4rem; }

.vsi-error-summary a { color: var(--vsi-error); font-weight: 700; }

.vsi-success { border-color: var(--vsi-brand); }

/* Honeypot: hidden from everyone. Bots fill it in; people never see it. */
.vsi-hp {
	position: absolute !important;
	left: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 11. Events calendar (My Calendar plugin) ================================ */
/* My Calendar draws its colours and sizes from CSS variables. Point them at our
   tokens so the calendar follows every display mode and the text size option. */

body.vsi .mc-main {
	--close-button: var(--vsi-error);
	--search-highlight-bg: var(--vsi-accent);
	--main-background: var(--vsi-bg);
	--main-color: var(--vsi-ink);
	--navbar-background: transparent;
	--nav-button-bg: var(--vsi-bg);
	--nav-button-color: var(--vsi-brand);
	--nav-button-border: var(--vsi-brand);
	--nav-input-border: var(--vsi-line);
	--nav-input-background: var(--vsi-bg);
	--nav-input-color: var(--vsi-ink);
	--grid-cell-border: var(--vsi-line);
	--grid-header-border: var(--vsi-line);
	--grid-header-color: var(--vsi-ink);
	--grid-weekend-color: var(--vsi-ink);
	--grid-header-bg: var(--vsi-surface-strong);
	--grid-weekend-bg: var(--vsi-surface);
	--grid-cell-background: var(--vsi-bg);
	--current-day-border: var(--vsi-brand);
	--current-day-color: var(--vsi-ink);
	--current-day-bg: var(--vsi-surface-strong);
	--date-has-events-bg: var(--vsi-brand);
	--date-has-events-color: var(--vsi-on-brand);
	--primary-dark: var(--vsi-ink);
	--primary-light: var(--vsi-bg);
	--secondary-light: var(--vsi-bg);
	--secondary-dark: var(--vsi-ink);
	--highlight-dark: var(--vsi-ink-soft);
	--highlight-light: var(--vsi-surface);
	--calendar-heading: 1.5rem;
	--event-title: 1.25rem;
	--grid-date: 1rem;
	--grid-date-heading: 1rem;
	--modal-title: 1.5rem;
	--navigation-controls: 1rem;
	--card-heading: 1.15rem;
	--list-date: 1.15rem;
	--author-card: 1rem;

	font-family: var(--vsi-font);
	color: var(--vsi-ink);
	background: var(--vsi-bg);
}

body.vsi .mc-main .my-calendar-month,
body.vsi .mc-main .my-calendar-month span,
body.vsi .mc-main .mc-date-text,
body.vsi .mc-main .event-title,
body.vsi .mc-main h2,
body.vsi .mc-main h3 {
	color: var(--vsi-ink);
}

body.vsi .mc-main .my-calendar-header,
body.vsi .mc-main .mc_bottomnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

body.vsi .mc-main button,
body.vsi .mc-main .my-calendar-nav a,
body.vsi .mc-main .mc-format a,
body.vsi .mc-main .mc-time a,
body.vsi .mc-main .mc-export a,
body.vsi .mc-main input[type="submit"],
body.vsi .mc-main select {
	min-height: var(--vsi-target);
	padding: 0.4rem 0.9rem;
	border: var(--vsi-border-width) solid var(--vsi-brand);
	border-radius: var(--vsi-radius);
	background: var(--vsi-bg);
	color: var(--vsi-brand);
	font-size: 1rem;
	font-weight: 700;
}

body.vsi .mc-main button:hover,
body.vsi .mc-main .my-calendar-nav a:hover,
body.vsi .mc-main .mc-format a:hover,
body.vsi .mc-main .mc-time a:hover {
	background: var(--vsi-ink);
	border-color: var(--vsi-ink);
	color: var(--vsi-bg);
	text-decoration: underline;
}

body.vsi .mc-main a { color: var(--vsi-link); }

body.vsi .mc-main th,
body.vsi .mc-main td {
	border: 1px solid var(--vsi-line);
}

/* 12. Footer ============================================================== */

body .site-footer { background-color: var(--vsi-surface); }

.vsi-footer {
	background-color: var(--vsi-surface);
	color: var(--vsi-ink);
	border-top: 0.4rem solid var(--vsi-brand);
	padding-top: 2.5rem;
}

.vsi-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 2rem;
	padding-bottom: 2rem;
}

.vsi-footer__heading {
	font-size: 1.25rem;
	margin: 0 0 0.75rem;
}

.vsi-footer__heading--minor { margin-top: 1.5rem; font-size: 1.1rem; }

.vsi-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vsi-link-list li { margin: 0; }

.vsi-link-list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.vsi-footer__bar {
	border-top: var(--vsi-border-width) solid var(--vsi-line);
	padding: 1rem 0;
}

.vsi-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.vsi-footer__bar p { margin: 0; }

/* 13. User preference media queries ======================================= */

/* No decorative motion anywhere; this also stops smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Windows High Contrast / forced colours: keep borders and focus visible. */
@media (forced-colors: active) {
	.vsi-btn,
	.wp-block-button__link,
	.vsi-a11y-toggle,
	.vsi-nav__toggle,
	.vsi-submenu-toggle,
	.vsi-search__submit,
	.vsi-card,
	.vsi-helpline,
	.vsi-a11y-group {
		border: 2px solid ButtonText;
	}

	:focus-visible {
		outline: 3px solid Highlight;
		box-shadow: none;
	}

	.vsi-icon { fill: currentColor; forced-color-adjust: auto; }
}