/*
Theme Name: Lee Abbey London
Author: Tim Wakeling
Author URI: https://timwakeling.co.uk
Description: Custom block theme for Lee Abbey London
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.4
Version: 2026.10.15.5
*/

/* Colour schemes for pages */

body {
  --theme-accent: var( --wp--preset--color--primary );
  --theme-accent-contrast: var( --wp--preset--color--primary-contrast );
  --theme-accent-hover: color-mix( in srgb, var( --wp--preset--color--primary ) 85%, black );
  --theme-accent-soft: color-mix( in srgb, var( --wp--preset--color--primary ) 10%, white );
}
body.scheme-green {
  --theme-accent: var( --wp--preset--color--green );
  --theme-accent-contrast: var( --wp--preset--color--green-contrast );
  --theme-accent-hover: color-mix( in srgb, var( --wp--preset--color--green ) 85%, black );
  --theme-accent-soft: color-mix( in srgb, var( --wp--preset--color--green ) 10%, white );
}
body.scheme-red {
  --theme-accent: var( --wp--preset--color--red );
  --theme-accent-contrast: var( --wp--preset--color--red-contrast );
  --theme-accent-hover: color-mix( in srgb, var( --wp--preset--color--red ) 85%, black );
  --theme-accent-soft: color-mix( in srgb, var( --wp--preset--color--red ) 10%, white );
}
body.scheme-purple {
  --theme-accent: var( --wp--preset--color--purple );
  --theme-accent-contrast: var( --wp--preset--color--purple-contrast );
  --theme-accent-hover: color-mix( in srgb, var( --wp--preset--color--purple ) 85%, black );
  --theme-accent-soft: color-mix( in srgb, var( --wp--preset--color--purple ) 10%, white );
}

/* Make header fixed position, full width and gradually blur the content under it */

html:not(.has-modal-open) .site-header {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9999;
}
html:not(.has-modal-open) .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    backdrop-filter: blur( 12px );
    -webkit-backdrop-filter: blur( 12px );
    mask-image: linear-gradient( to top, transparent, black 30% );
    -webkit-mask-image: linear-gradient( to top, transparent, black 30% );
}
html:not(.has-modal-open) .site-header > * {
    position: relative;
    z-index: 1;
}
html:not(.has-modal-open) body.logged-in .site-header {
    top: 46px;
}
@media screen and ( min-width: 784px ) {
    html:not(.has-modal-open) body.logged-in .site-header {
        top: 32px;
    }
}

/* Featured image cover blocks should have a semi-transparent theme accent overlay */

.wp-block-cover.featured-image-cover > .wp-block-cover__background {
    background: linear-gradient( color-mix( in srgb, var( --theme-accent ) 60%, transparent ), black ) !important;
}

/* Featured image cover blocks without a featured image should have a theme accent colour background and a lower minimum height */

.wp-block-cover.featured-image-cover:not(:has(img.wp-block-cover__image-background)) {
    background: var( --theme-accent );
    min-height: 400px !important;
}
.wp-block-cover.featured-image-cover:not(:has(img.wp-block-cover__image-background)) div {
    min-height: 400px !important;
}

/* Cover block video background should be hidden if the user prefers reduced motion */

@media (prefers-reduced-motion: reduce) {
    .wp-block-cover__video-background video,
    video.wp-block-cover__video-background {
        animation: none;
    }
}

/* Pause button for cover block videos */

.wp-block-cover {
    position: relative;
}
.cover-video-toggle {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 5;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover-video-toggle:hover,
.cover-video-toggle:focus-visible {
    background: rgba(0, 0, 0, 0.75);
}
.cover-video-toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

/* Cover block should use the page's theme accent colour as a background while loading */

.wp-block-cover {
	background-color: var( --theme-accent );
}

/* Search */

.wp-block-search.wp-block-search__button-only .wp-block-search__input {
    transition: none;
}
form:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    position: absolute;
    bottom: -5.2rem;
    left: 0;
    z-index: 999999;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
form.wp-block-search__searchfield-hidden .wp-block-search__label {
    display: none;
}
.wp-block-search .wp-block-search__button {
    background: transparent;
    color: white;
    border: 2px solid transparent;
    padding: 4px;
    margin-right: -12px;
}
.wp-block-search .wp-block-search__button:hover {
    background: color-mix( in srgb, black 25%, transparent );
    border-color: transparent;
    border-radius: 5px;
    color: white;
}
.wp-block-search__button svg {
    min-width: 36px;
    min-height: 36px;
}
.wp-block-search__input {
    margin-right: 0.5rem;
    border-radius: 5px;
}
.wp-block-search__label {
    color: transparent;
}

/* Links */

a {
	text-decoration-thickness: 2px !important;
	text-underline-offset: .2em;
}
a.block-link,
p.block-link a {
    display: inline-block;
    padding: 0.1em 0.2em;
    text-decoration: none;
    border-radius: 5px;
}
a[target="_blank"]:not(:has(img)):not(:has(svg)):not(.wp-block-navigation-item__content)::after,
a[target="_blank"]:not(:has(img)):not(:has(svg)).wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	content: "";
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.3em;
	position: relative;
	top: -0.05em;
	opacity: 0.5;
	background-color: currentColor;
	-webkit-mask: url("./assets/icons/external-link.svg") center / contain no-repeat;
	mask: url("./assets/icons/external-link.svg") center / contain no-repeat;
}

/* Navigation buttons */

.wp-block-navigation.tw-nav-hover-box li > button {
    display: block;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    padding-left: 1em;
    padding-right: 1em;
}
.wp-block-navigation.tw-nav-hover-box li > button:hover {
	position: relative;
	text-decoration: none;
}
.wp-block-navigation.tw-nav-hover-box li > button:hover::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0.1;
	border-radius: 5px;
}

/* Breadcrumbs */

.wp-block-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.wp-block-breadcrumbs a::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	background: currentColor;
	mask: url("./assets/icons/arrow-up-left.svg") no-repeat center / contain;
	-webkit-mask: url("./assets/icons/arrow-up-left.svg") no-repeat center / contain;
}

/* Stretched links */

.tw-stretched-link:hover,
.wp-block-post:has( .tw-stretched-link ):hover {
    background: var( --theme-accent-contrast );
}
footer .tw-stretched-link {
    border-radius: 5px;
}
footer .tw-stretched-link:hover {
    background: color-mix( in srgb, black 50%, transparent );
}
.wp-block-post:has( .tw-stretched-link ) .tw-stretched-link:hover {
    background: none;
}
.tw-stretched-link a:hover {
    text-decoration: none;
    background: none;
    /* The general link hover style adds a filter, which would make the link
       the containing block for Twentig's full-block overlay (its ::after),
       shrinking the overlay to the link and making the hover flicker on/off */
    filter: none;
}
/* Twentig draws the full-block overlay with the link's ::after, but links that
   open in a new tab use ::after for their external link icon, which replaces it.
   Draw their overlay with ::before instead. */
.tw-stretched-link:where(.wp-block-group, .wp-block-column, .wp-block-media-text, .wp-block-cover) a[target="_blank"]:not(:has(img)):not(:has(svg))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* As Twentig does, only the title or "read more" link covers a post in a query loop */
.wp-block-query .wp-block-post .tw-stretched-link a[target="_blank"]::before {
    content: none;
}
.wp-block-query .wp-block-post .tw-stretched-link :where(.wp-block-post-title, .wp-block-post-excerpt__more-text) a[target="_blank"]:not(:has(img)):not(:has(svg))::before {
    content: "";
}

/* Clickable boxes (a stretched link on a block with its own background, e.g. the
   event cards on What's on). Core makes constrained groups position: relative,
   which traps Twentig's full-box link overlay inside the inner group, so let it
   reach the outer box. The box keeps its own background and rounded corners, and
   brightens as a whole on hover like buttons do. */
.tw-stretched-link :where(.wp-block-group) {
    position: static;
}
.tw-stretched-link.has-background {
    transition: filter 0.15s ease;
}
.wp-block-post:has( > .tw-stretched-link.has-background ):hover {
    background: none;
}
.tw-stretched-link.has-background:hover {
    filter: brightness( 1.1 );
}

/* Show the focus ring around the whole clickable area, not the link inside it.
   The clickable area is the block itself, except for Columns and Latest Posts,
   where Twentig makes each column / post clickable instead. */
.wp-site-blocks .tw-stretched-link :is( a:focus, a:focus-visible, button:focus, button:focus-visible ) {
    outline: none;
}
:is(
	.tw-stretched-link:not( .wp-block-columns, .wp-block-latest-posts ),
	.wp-block-columns.tw-stretched-link > .wp-block-column,
	.wp-block-latest-posts.tw-stretched-link > li
):has( a:focus, button:focus ) {
	outline: 3px solid var( --focus-ring );
	outline-offset: 2px;
}
/* The hover brightness filter also lightens the ring, so darken the ring by the
   same amount to keep it the normal focus colour */
.tw-stretched-link.has-background:hover:has( a:focus ) {
	outline-color: rgb( from var( --focus-ring ) calc( r / 1.1 ) calc( g / 1.1 ) calc( b / 1.1 ) );
}

/* Bold text */

strong {
    font-weight: 700;
}

/* Focus */

/* The focus ring is dark by default and light on dark backgrounds. A ring sits
   just outside its element, so what matters is the background behind the
   element, not its own: set the colour on the children of anything with a
   background, so they (and everything inside them) pick it up. Custom colours
   are off, so every background colour is one of the palette ones listed here. */
body {
	--focus-ring: var( --theme-accent );
}
:is(
	.site-header,
	.wp-block-cover:not( .is-light ),
	h1:not( .has-background ),
	.wp-block-post-title:not( .has-background ),
	.has-primary-background-color,
	.has-green-background-color,
	.has-red-background-color,
	.has-purple-background-color,
	.has-movement-turquoise-background-color,
	.has-success-background-color,
	.has-warning-background-color,
	.has-black-background-color
) > * {
	--focus-ring: var( --theme-accent-contrast );
}
:is(
	.wp-block-cover.is-light,
	.has-primary-contrast-background-color,
	.has-green-contrast-background-color,
	.has-red-contrast-background-color,
	.has-purple-contrast-background-color,
	.has-white-background-color
) > * {
	--focus-ring: var( --theme-accent );
}

/* The temporary message in the header has its own (light) background */
.site-header > .temporary-message {
	--focus-ring: black;
}

.wp-site-blocks :is(a:focus, a:focus-visible, button:focus, button:focus-visible) {
	outline: 3px solid var( --focus-ring );
	outline-offset: 2px;
}
.wp-site-blocks .wp-block-button__link:focus,
.wp-site-blocks .wp-block-button__link:focus-visible {
	outline-offset: 2px;
}

/* Menus */

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 5px;
}
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
    padding-top: 0.3rem !important;
}
.wp-block-navigation__responsive-container a.wp-block-navigation-item__content {
    border-radius: 5px !important;
    outline-offset: 2px !important;
}

/* Mobile full screen menu */

.wp-block-navigation__responsive-container.is-menu-open {
    background: var( --wp--preset--color--primary ) !important;
    background: rgb( from var( --wp--preset--color--primary ) r g b / 0.9 ) !important;
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 1rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
    text-decoration: underline !important;
}

/* Avoid widows and orphans */

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Other tweaks */

.more-link {
	display: block;
}

/* Dark logo injected after the site logo for printing only (see assets/css/print.css).
   Hidden on screen and in the editor. */

.lalondon-print-logo {
	display: none;
}

/* Paragraph styles */

/* These box styles are also declared as a registered block style
   (see styles/blocks/paragraph-*.json), which is how they're applied
   when chosen from the block editor. They're duplicated here, keyed off
   the stable "is-style-paragraph-*" class rather than WordPress's
   auto-generated (and unstable) suffixed class, so the same look can be
   reproduced in hand-written HTML. Inside a Gravity Forms form, the
   shorter classes "info", "success" and "warning" do the same, e.g.
   <p class="info">...</p> in an HTML field. */

:is( .wp-block-paragraph.is-style-paragraph-info, .gform_wrapper .info ),
:is( .wp-block-paragraph.is-style-paragraph-success, .gform_wrapper .success ),
:is( .wp-block-paragraph.is-style-paragraph-warning, .gform_wrapper .warning ) {
	border-radius: 5px;
	box-sizing: border-box;
	padding: 0.8em 1em 0.8em 2.8em;
	position: relative;
}
:is( .wp-block-paragraph.is-style-paragraph-info, .gform_wrapper .info ) {
	background-color: var( --theme-accent-contrast );
	color: black;
}
:is( .wp-block-paragraph.is-style-paragraph-success, .gform_wrapper .success ) {
	background-color: var( --wp--preset--color--success );
	color: white;
}
:is( .wp-block-paragraph.is-style-paragraph-warning, .gform_wrapper .warning ) {
	background-color: var( --wp--preset--color--warning );
	color: white;
}
:is( .wp-block-paragraph.is-style-paragraph-success, .gform_wrapper .success ) a,
:is( .wp-block-paragraph.is-style-paragraph-warning, .gform_wrapper .warning ) a {
	color: white !important;
}
:is( .wp-block-paragraph.is-style-paragraph-info, .gform_wrapper .info )::before,
:is( .wp-block-paragraph.is-style-paragraph-success, .gform_wrapper .success )::before,
:is( .wp-block-paragraph.is-style-paragraph-warning, .gform_wrapper .warning )::before {
	content: '';
	position: absolute;
	left: 0.9em;
	top: 1em;
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}
:is( .wp-block-paragraph.is-style-paragraph-info, .gform_wrapper .info )::before {
	background: var( --theme-accent );
	mask-image: url( './assets/icons/info.svg' );
	-webkit-mask-image: url( './assets/icons/info.svg' );
}
:is( .wp-block-paragraph.is-style-paragraph-success, .gform_wrapper .success )::before {
	background: white;
	mask-image: url( './assets/icons/success.svg' );
	-webkit-mask-image: url( './assets/icons/success.svg' );
}
:is( .wp-block-paragraph.is-style-paragraph-warning, .gform_wrapper .warning )::before {
	background: white;
	mask-image: url( './assets/icons/warning.svg' );
	-webkit-mask-image: url( './assets/icons/warning.svg' );
}

/* Image styles */

/* "Fill column" (see styles/blocks/image-fill-column.json) makes an image
   fill the height of its column, as set by the neighbouring columns, and
   crop to fit. The rules are repeated here because WordPress wraps a block
   style's own CSS in :where(), so core's ".wp-block-image img" rules beat
   it. Once the columns stack on mobile there is nothing beside it to set
   the height, so give it its own shape instead. */
.wp-block-image.is-style-image-fill-column {
	position: relative;
	height: 100%;
	min-height: 12rem;
	margin: 0;
}

.wp-block-image.is-style-image-fill-column img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media ( max-width: 781px ) {
	.wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column > .wp-block-image.is-style-image-fill-column {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/* Forms */

.gform_required_legend {
	display: none;
}
.gform-theme.gform_wrapper .gform_body .gform-field-label {
	font-size: 1.125rem;
	color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gform_body .gform-field-label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub) {
	font-size: 1.25rem;
    font-weight: 700;
}
.gform-theme.gform_wrapper .gform_body input[type="radio"],
.gform-theme.gform_wrapper .gform_body input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    border-width: 2px;
    border-color: var( --theme-accent );
}
/* Labels and non-text controls (radio, checkbox, select, file, buttons)
   get a pointer cursor, since clicking them activates/toggles something
   rather than placing a text caret. Text-entry fields are excluded so
   they keep the normal text (I-beam) cursor. */
.gform-theme.gform_wrapper .gform_body label,
.gform-theme.gform_wrapper .gform_body select,
.gform-theme.gform_wrapper .gform_body input:not([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="password"],[type="date"],[type="hidden"]) {
    cursor: pointer;
}
.gform-theme.gform_wrapper .gform_body input:is([type="text"],[type="email"],[type="tel"],[type="number"],[type="url"],[type="password"],[type="date"]),
.gform-theme.gform_wrapper .gform_body textarea {
    cursor: text;
}
.gform-theme.gform_wrapper .gform_body input[type="radio"]::before {
    width: 0.8rem;
    height: 0.8rem;
    background: var( --theme-accent );
}
.gform-theme.gform_wrapper .gform_body input[type="checkbox"]::before {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.2rem;
    background: transparent;
    color: var( --theme-accent );
}
/* Size each radio/checkbox choice to hug its input and label (rather
   than stretching to the full width of the row) so only the choice itself
   is clickable, not the empty space beside it. Top-align the two instead of centering them
   so a label that wraps onto several lines still keeps the input level
   with its first line rather than its vertical middle; the label is
   nudged down slightly with padding instead, to sit optically centred
   against the input when it's a single line. */
.gform-theme.gform_wrapper .gform_body .gchoice {
    width: fit-content;
    align-items: start;
}
.gform-theme.gform_wrapper .gform_body .gchoice label {
    padding-top: 0.2em;
}
.gform-theme.gform_wrapper .gform_body input:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"],[type="hidden"]),
.gform-theme.gform_wrapper .gform_body select,
.gform-theme.gform_wrapper .gform_body textarea {
	font-size: 1.2rem;
	border-color: var( --theme-accent );
    border-width: 2px;
    min-height: 3rem;
}
/* Draw the focus ring on each field's wrapper rather than on the field
   itself, so it has the same rounded corners whatever the field type.
   Radio buttons and checkboxes are the exception: a ring around the whole
   choice would take in its label too, so draw it on the input itself,
   where it follows the input's own shape. */
.gform-theme.gform_wrapper .gform_body input:focus,
.gform-theme.gform_wrapper .gform_body select:focus,
.gform-theme.gform_wrapper .gform_body textarea:focus {
	outline: none;
}
.gform-theme.gform_wrapper .gform_body :is( div, span ):has( > input:not([type="radio"],[type="checkbox"]):focus ),
.gform-theme.gform_wrapper .gform_body :is( div, span ):has( > select:focus ),
.gform-theme.gform_wrapper .gform_body :is( div, span ):has( > textarea:focus ) {
	outline: 2px solid var( --theme-accent );
	outline-offset: 3px;
	border-radius: 5px;
}
.gform-theme.gform_wrapper .gform_body input:is([type="radio"],[type="checkbox"]):focus {
	outline: 2px solid var( --theme-accent );
	outline-offset: 3px;
}
/* GP Page Transitions turns the form into a Swiper slider, which has
   overflow: hidden and so cuts off focus rings on fields that sit at its
   left edge (e.g. radio buttons). With the fade effect all the pages are
   stacked in the same place, so there's nothing to hide horizontally;
   only clip vertically, for the auto height animation between pages. The
   vertical clip would still cut off the focus rings on the page steps at
   the top of the form and the buttons in the page footer (Previous, Next,
   Submit) at the bottom, so extend the form both ways with padding and take
   the same amount back with negative margins */
.gform_wrapper form.swiper.swiper-fade {
	overflow-x: visible !important;
	overflow-y: clip !important;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: -6px;
	margin-bottom: -6px;
}
.gform-theme.gform_wrapper .gform_body .gfield_description,
.gform-theme.gform_wrapper .gform_body .gform-field-label--type-sub,
.gform-theme.gform_wrapper .gform_body .ginput_counter {
	font-size: 1rem;
    color: black;
}
.gform-theme.gform_wrapper .gform_body .gfield_consent_description {
    background: color-mix(in srgb, white 90%, var( --theme-accent ) );
    border-radius: 2;
    border-width: 0;
    color: black;
}
.gform_wrapper .gform_body .gfield--type-section {
    border-block-end: 0 !important;
}
.gform-theme.gform_wrapper .button.gform_button,
.gform-theme.gform_wrapper .button.gform_next_button,
.gform-theme.gform_wrapper .button.gform_previous_button {
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	border-radius: 100px !important;
    border-width: 2px !important;
    border-style: solid !important;
    padding: calc( 0.6rem - 1px ) calc( 1.5rem - 1px ) !important;
    transition: transform 0.08s ease, filter 0.15s ease;
}
.gform-theme.gform_wrapper .button.gform_button,
.gform-theme.gform_wrapper .button.gform_next_button {
	background: var( --theme-accent ) !important;
	border-color: var( --theme-accent ) !important;
	color: var( --theme-accent-contrast ) !important;
	padding-top: calc( 0.5rem - 1px ) !important;
}
/* Secondary buttons are outlined. "Back to Last Page" (added by GP Multi-Page
   Navigation) also has the gform_button class, so needs a more specific
   selector to override the solid style above */
.gform-theme.gform_wrapper .button.gform_previous_button,
.gform-theme.gform_wrapper .button.gform_button.gform_last_page_button {
	background: var( --theme-accent-contrast ) !important;
	border-color: var( --theme-accent ) !important;
	color: var( --theme-accent ) !important;
	padding-top: calc( 0.6rem - 1px ) !important;
}
.gform-theme.gform_wrapper .button.gform_button:hover,
.gform-theme.gform_wrapper .button.gform_next_button:hover,
.gform-theme.gform_wrapper .button.gform_previous_button:hover {
	filter: brightness( 1.1 ) !important;
}
.gform-theme.gform_wrapper .button.gform_button:active,
.gform-theme.gform_wrapper .button.gform_next_button:active,
.gform-theme.gform_wrapper .button.gform_previous_button:active {
	transform: scale( 0.98 );
}
.gform-theme.gform_wrapper .button.gform_button:focus,
.gform-theme.gform_wrapper .button.gform_next_button:focus,
.gform-theme.gform_wrapper .button.gform_previous_button:focus {
	outline-color: var( --theme-accent ) !important;
    outline-offset: 3px;
}

/* Save and continue later should look like a plain text link, not a button */

.gform-theme.gform_wrapper .button.gform_save_link {
	display: inline !important;
    inline-size: auto !important;
    block-size: auto !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	color: var( --theme-accent ) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .2em;
}
.gform-theme.gform_wrapper .button.gform_save_link:hover {
	filter: brightness( 1.1 );
}
.gform-theme.gform_wrapper .button.gform_save_link:focus {
	outline-color: var( --theme-accent ) !important;
    outline-offset: 3px;
}
.gform-theme.gform_wrapper .gf_progressbar_percentage {
    background-color: var( --theme-accent ) !important;
}
.gform-theme.gform_wrapper .gf_progressbar_percentage span {
    color: var( --theme-accent-contrast ) !important;
}
.gform-theme.gform_wrapper .gf_progressbar_title {
    color: var( --theme-accent ) !important;
}
.gform-theme.gform_wrapper .gf_step_number {
	color: var( --theme-accent );
	border-color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gf_step_active .gf_step_number {
	background: var( --theme-accent );
	color: var( --theme-accent-contrast );
	border-color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gf_step_completed .gf_step_number::after {
	background: var( --wp--preset--color--success );
	color: white;
	border-color: var( --wp--preset--color--success );
}
.gform-theme.gform_wrapper .gf_progressbar_wrapper,
.gform-theme.gform_wrapper .gf_page_steps {
    margin-bottom: 3rem;
}
.gform-theme.gform_wrapper .gform_body .gfield_description.validation_message {
    background: var( --wp--preset--color--warning );
    width: fit-content;
    margin-top: 0.75em !important;
    padding: 0.3em 0.6em;
    border-radius: 5px;
    color: white;
}
.gform-theme.gform_wrapper .gform_footer,
.gform-theme.gform_wrapper .gform_page_footer {
    margin-top: var( --wp--preset--spacing--40 ) !important;
}

/* Details / summary elements (for FAQs) */

.faqs {
	margin-top: 1em;
	margin-bottom: 1em;
}
details {
	margin-top: 1em;
	margin-bottom: 0.5em;
	border-radius: 5px;
    border: 2px solid transparent;
}
details[open] {
    border-color: var( --theme-accent-contrast );
    padding-bottom: 1.2rem;
}
details:first-child,
details + details {
	margin-top: 0.2em;
}
details:last-child {
	margin-bottom: 0;
}
summary {
	display: block;
	padding: 0.2em 0.5em;
	font-weight: 700;
    background: var( --theme-accent-contrast );
	color: var( --theme-accent );
	border-radius: 5px;
}
summary:hover {
	cursor: pointer;
}
summary::before {
	content: '+';
    font-size: 140%;
    font-weight: 400;
    line-height: 1;
    margin-right: 0.5rem;
    display: inline-block;
    vertical-align: middle;
}
details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
details[open] summary::before {
	content: '–';
}
details p {
	margin-left: 2.2rem;
}

@media screen and ( max-width: 1023px ) {

    /* Mobile menu */

    a.wp-block-navigation-item__content,
    button.wp-block-navigation-item__content {
        font-size: 1.2rem;
    }

}

/* Tables in content scroll horizontally rather than squashing their columns.
   Core already sets overflow-x: auto on .wp-block-table; this adds momentum
   scrolling on touch and keeps a horizontal swipe from triggering
   back/forward navigation.

   container-type: inline-size stops a wide table from stretching its
   ancestors (which would push the whole page sideways instead of scrolling
   within the table); scroll-state lets the ::before hint below react to
   whether the table can still be scrolled further right. Both are skipped
   for floated / centred tables, whose width comes from their content. */

.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.wp-block-table:not( .alignleft ):not( .alignright ):not( .aligncenter ) {
    container-type: inline-size scroll-state;
}

/* Hint shown just above a table while there is more of it hidden off the
   right edge. Sticky, so it stays in view as the table scrolls.

   The space for it is reserved whenever the table scrolls horizontally at
   all (scrollable: x), and only the text is toggled (visibility) by
   whether you can still scroll further right — so reaching the right-hand
   end hides the text without the table jumping up. When the table fits
   entirely it collapses to nothing (display: none). Needs scroll-state
   container queries (Chromium 133+); elsewhere it simply never appears. */

.wp-block-table::before {
    content: "Scroll the table right to see more";
    display: none;
    visibility: hidden;
    position: sticky;
    left: 0;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 0.4em;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.7;
    pointer-events: none;
}
@container scroll-state( scrollable: x ) {
    .wp-block-table::before {
        display: block;
    }
}
@container scroll-state( scrollable: right ) {
    .wp-block-table::before {
        visibility: visible;
    }
}

@media screen and ( max-width: 767px ) {

    /* Reduce text size in tables on mobile and tablet, and keep cell
       content on one line so the table scrolls horizontally instead of
       cramming columns into an unreadable width */

    .wp-block-table td,
    .wp-block-table th {
        font-size: var( --wp--preset--font-size--medium );
        white-space: nowrap;
        word-break: normal;
    }

    /* Size columns to their content so they stay readable. This also
       overrides the "fixed width table cells" option, which otherwise
       divides the columns equally and makes the text overlap. */

    .wp-block-table table,
    .wp-block-table table.has-fixed-layout {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }

}

@media screen and ( min-width: 1024px ) {

    /* Top menu (larger screens) */

    .wp-block-navigation-item {
        border-radius: 5px;
        background: transparent !important;
    }
    a.wp-block-navigation-item__content {
        padding-top: 0.5em;
        padding-bottom: 0.6em;
        border: 2px solid transparent;
    }
    button.wp-block-navigation-item__content {
        display: block;
        padding-top: 0.6em;
        padding-bottom: 0.7em;
        border-radius: 5px;
    }
    .site-header a:not( .temporary-message * ):hover,
    footer a:hover,
    a.wp-block-navigation-item__content:hover,
    button.wp-block-navigation-item__content:hover {
        background: color-mix( in srgb, black 50%, transparent );
    }
    button.wp-block-navigation-item__content[aria-expanded="true"] {
        background: var( --wp--preset--color--primary )
    }
    li.current-menu-item > a.wp-block-navigation-item__content,
    li.current-menu-item > button.wp-block-navigation-item__content {
        background: color-mix( in srgb, black 50%, transparent);
    }
    .wp-block-navigation-item__label {
        display: block;
        line-height: 1.1;
    }
    .wp-block-navigation .wp-block-navigation__submenu-icon {
        position: relative;
        left: -0.6em;
        z-index: 1;
        background-color: transparent;
    }
    .wp-block-navigation-item.open-on-click {
        padding: 0;
        background-position: center center;
        border-radius: 5px;
    }
    .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
        padding-left: 0.7em;
        padding-right: 1.6em;
    }

    /* Sub-menus (larger screens) */

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        top: calc( 100% + 10px );
        box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2 );
        padding: 5px;
        background: var( --wp--preset--color--primary ) !important;
        background: rgb( from var( --wp--preset--color--primary ) r g b / 0.8 ) !important;
        backdrop-filter: blur( 20px );
        -webkit-backdrop-filter: blur( 20px );
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container[aria-expanded="true"] {
        background: var( --wp--preset--color--primary );
    }
    .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
        border-color: transparent;
        border-width: 2px;
        border-radius: 5px;
    }
    .wp-block-navigation-item.open-on-click .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
        padding-left: 0.5em;
        padding-right: 0.5em;
        margin-right: -5px;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover,
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container button.wp-block-navigation-item__content:hover {
        background: rgba( 0, 0, 0, 0.25 ) !important;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container li.current-menu-item > a.wp-block-navigation-item__content,
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container li.current-menu-item > button.wp-block-navigation-item__content {
        background: rgba( 0, 0, 0, 0.25 ) !important;
    }

}

@media screen and ( min-width: 1200px ) and ( max-width: 1399px ) {

    /* Top menu (in-between screens). The full-size logo and menu need about
       1400px to sit side by side, so scale them down smoothly from that size to
       where the full menu first appears (1200px) to stop the menu wrapping
       below the logo. The padding ends up at the normal 1em / 0.7em / 1.6em
       of the (fluid) menu font size at 1400px. */

    .site-header .wp-block-site-logo img {
        width: calc( 190px + ( 100vw - 1200px ) * 0.35 );
    }
    .site-header a.wp-block-navigation-item__content {
        padding-left: calc( 13px + ( 100vw - 1200px ) * 0.032 );
        padding-right: calc( 13px + ( 100vw - 1200px ) * 0.032 );
    }
    .site-header .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
        padding-left: calc( 9.4px + ( 100vw - 1200px ) * 0.021 );
        padding-right: calc( 26px + ( 100vw - 1200px ) * 0.025 );
    }

}