/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Focus ring for every interactive element (brand: 3 px, Swedish Blue in light mode, Dutch Orange in dark).
   :where() keeps the element list out of the specificity, so components with their own focus rule still win.
   tabindex="-1" is left out so skip-link targets don't get a ring around the whole content area. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--nv-focus);
	outline-offset: 2px;
}

/* The footer sits on the water, where a Swedish Blue ring would be invisible. */
.site-footer :where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline-color: var(--nv-on-water);
}

/* The footer's text links (privacy, terms) are underlined on hover, like links elsewhere. */
.site-footer .gb-button-text:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Round back-to-top button, like the other round controls (GeneratePress draws a square). */
.generate-back-to-top {
	border-radius: 50%;
}

/* GeneratePress tints the mobile menu button and the open menu grey when the menu and the header share a
   background, which leaves the current page's item as a white stripe in the open menu. */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
	background-color: transparent;
}

/* Front page: when the window is taller than the page, the sea grows to fill it and the darker footer sits at
   the bottom. The page is made at least as tall as the visible window (svh: with phone toolbars showing), so
   this never adds scrolling; the wrappers down to the sea block pass the extra height on to it. */
body.home {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}
body.home :is(#page, #content, #primary, #main, #main > article, .inside-article, .entry-content) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}
body.home .entry-content > .nv-on-water {
	flex-grow: 1;
}
/* The sky above the sea takes two parts of that extra height for every part the sea gets, so the waterline
   moves towards the middle of the window. The cat stays at the bottom of the sky, sitting on the water. */
body.home .entry-content > :has(> .nemvo-home),
body.home .nemvo-home,
body.home .nemvo-home .nv-simple {
	display: flex;
	flex-direction: column;
	flex-grow: 2;
}
body.home .nemvo-home .nv-sky {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-grow: 1;
}

/* Dark mode. The :root style (GenerateBlocks → Global Styles) sets color-scheme, which every role token follows
   through light-dark(). A choice made with the footer toggle (data-theme on <html>, see functions.php) wins
   over the system setting. The logo and the toggle's icons follow the same choice. */
:root[data-theme="light"] {
	color-scheme: light;
}
:root[data-theme="dark"] {
	color-scheme: dark;
}
.site-logo .nv-logo-dark,
.nv-theme-toggle .nv-sun {
	display: none;
}
:root[data-theme="dark"] .site-logo .nv-logo-light,
:root[data-theme="dark"] .nv-theme-toggle .nv-moon {
	display: none;
}
:root[data-theme="dark"] .site-logo .nv-logo-dark {
	display: inline;
}
:root[data-theme="dark"] .nv-theme-toggle .nv-sun {
	display: block;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-logo .nv-logo-light,
	:root:not([data-theme="light"]) .nv-theme-toggle .nv-moon {
		display: none;
	}
	:root:not([data-theme="light"]) .site-logo .nv-logo-dark {
		display: inline;
	}
	:root:not([data-theme="light"]) .nv-theme-toggle .nv-sun {
		display: block;
	}
}

/* The toggle sits on the water in the footer, sized like the footer's icon circles. */
.nv-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid var(--nv-on-water);
	border-radius: 50%;
	background: transparent;
	color: var(--nv-on-water);
	cursor: pointer;
}
.nv-theme-toggle[hidden] {
	display: none;
}
.nv-theme-toggle:hover {
	background: var(--nv-on-water);
	color: var(--nv-water);
}
.nv-theme-toggle svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Fallback for anything the rule above can't fill (browsers without svh, a phone toolbar sliding away): the
   space below the footer takes the footer's blue instead of white. Matches "Footer Front Page" (element 94). */
html:has(> body.home) {
	background-color: var(--swedish-blue-hover);
}


/* Booking widget (nemvo-booking plugin 1.1.1+). The plugin draws everything from --nb-* tokens with zero
   specificity; this maps them to the role tokens, so the widget follows the brand and dark mode. Hover shades of
   the Cancel and ghost buttons are derived from these by the plugin. Token list: the plugin README, "Styling".
   Status colors (--nb-danger, --nb-success) and input corners keep the plugin's defaults. */
.nb-booking {
	color-scheme: inherit; /* the plugin pins light; this lets the widget and its native controls follow dark mode */
	--nb-accent: var(--nv-accent);           /* selected day, hovered slot, main button */
	--nb-accent-hover: var(--nv-accent-hover);
	--nb-on-accent: var(--nv-on-accent);     /* black on orange */
	--nb-link: var(--nv-link);               /* available days, slots, pills, arrows, links */
	--nb-focus: var(--nv-focus);
	--nb-text: var(--nv-text);
	--nb-muted: var(--nv-text-muted);
	--nb-bg: var(--nv-bg);
	--nb-bg-soft: var(--nv-panel);
	--nb-border: var(--nv-line);
	--nb-input-border: var(--nv-text-muted); /* --nv-line is too faint for input edges */
	--nb-radius: 18px;                       /* brand card */
	--nb-radius-slot: 999px;                 /* pills, like the buttons and duration pills */
	--nb-radius-button: 999px;
	--nb-shadow: none;                       /* brand cards have a line, no shadow */
	--nb-font: var(--gp-font--figtree);
	--nb-font-heading: var(--gp-font--outfit);
	--nb-font-ui: var(--gp-font--outfit);
	--nb-font-size: 16px;
	--nb-weight-medium: 500;
	--nb-weight-strong: 500;                 /* brand weights stop at 500 */
	--nb-weight-title: 400;                  /* the title is a Heading 3: Outfit Regular */
}


/* Contact form ([nemvo_contact_form], functions.php) on Contact. No card around it (owners' choice, 31 October
   2026): it lines up with the text above. Fields are Figtree (brand: forms), labels and the title Outfit. The field border is the
   text colour at 40% so it stays visible (3:1) in both modes; errors use the darker orange, since the palette has
   no red. Classes are doubled up (.nv-contact .nv-contact__input) to beat GeneratePress's input[type] rules. */
.nv-contact {
	container-type: inline-size;
	margin-top: 48px;
}
.nv-contact [hidden] {
	display: none;
}
.nv-contact__form,
.nv-contact__done {
	color: var(--nv-text);
}
.nv-contact .nv-contact__title {
	margin: 0 0 24px;
	font-family: var(--gp-font--outfit);
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	color: var(--nv-text);
}
.nv-contact__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px 16px;
}
.nv-contact__field {
	grid-column: span 6;
	min-width: 0;
}
.nv-contact__field--half {
	grid-column: span 3;
}
.nv-contact__field--third {
	grid-column: span 2;
}
.nv-contact__field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--gp-font--figtree);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--nv-text);
}
.nv-contact__field label span {
	font-weight: 400;
	color: var(--nv-text-muted);
}
.nv-contact .nv-contact__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid color-mix(in srgb, var(--nv-text) 40%, transparent);
	border-radius: 10px;
	background-color: var(--nv-bg);
	color: var(--nv-text);
	font-family: var(--gp-font--figtree);
	font-size: 16px;
	line-height: 24px;
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.nv-contact textarea.nv-contact__input {
	min-height: 168px;
	resize: vertical;
}
.nv-contact .nv-contact__input:hover {
	border-color: var(--nv-text-muted);
}
.nv-contact .nv-contact__input:focus {
	border-color: var(--nv-focus);
	background-color: var(--nv-bg);
	color: var(--nv-text);
}
.nv-contact .nv-contact__input[aria-invalid="true"] {
	border-color: var(--nv-accent-hover);
	box-shadow: inset 0 0 0 1px var(--nv-accent-hover);
}
.nv-contact__error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--nv-text);
}
.nv-contact__error:empty {
	display: none;
}
.nv-contact__error::before,
.nv-contact__alert::before {
	content: "!";
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: var(--nv-accent);
	color: var(--nv-on-accent);
	font-family: var(--gp-font--outfit);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	text-align: center;
}
.nv-contact__alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: -8px 0 24px;
	padding: 14px 16px;
	border-radius: 10px;
	background-color: var(--nv-panel);
	font-size: 15px;
	line-height: 22px;
	color: var(--nv-text);
}
.nv-contact__alert:focus {
	outline: none;
}
.nv-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.nv-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}
.nv-contact .nv-contact__submit {
	cursor: pointer;
}
.nv-contact .nv-contact__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}
.nv-contact__note {
	flex: 1 1 220px;
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--nv-text-muted);
}
.nv-contact__note a {
	color: var(--nv-link);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--nv-link) 35%, transparent);
	text-underline-offset: 3px;
}
.nv-contact__note a:hover {
	color: var(--nv-link-hover);
	text-decoration-color: currentColor;
}
.nv-contact__done {
	padding: 8px 0 16px;
}
.nv-contact__done:focus {
	outline: none;
}
.nv-contact__done-icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 0 20px;
	fill: none;
	stroke: var(--nv-link);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.nv-contact .nv-contact__done .nv-contact__title {
	margin-bottom: 8px;
}
.nv-contact__done p {
	margin: 0;
	color: var(--nv-text-muted);
}
/* Narrow cards (phones, and the left column on tablets): one field per row. */
@container (max-width: 520px) {
	.nv-contact__field--half,
	.nv-contact__field--third {
		grid-column: span 6;
	}
}
@media (max-width: 767px) {
	.nv-contact {
		margin-top: 40px;
	}
	.nv-contact .nv-contact__title {
		font-size: 20px;
		line-height: 28px;
	}
}

/* Picture pairs: the bright and the dark file of one illustration side by side, with .nv-light-only and
   .nv-dark-only. Follows the system setting and the footer toggle, like the logo. Used on the 404 page. */
.nv-dark-only {
	display: none;
}
:root[data-theme="dark"] .nv-light-only {
	display: none;
}
:root[data-theme="dark"] .nv-dark-only {
	display: block;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .nv-light-only {
		display: none;
	}
	:root:not([data-theme="light"]) .nv-dark-only {
		display: block;
	}
}

/* 404 page (block element 544): the 404 illustration (portrait, the cat chomping a fish), centred above the title. */
.nv-404-art {
	max-width: 260px;
	margin: 0 auto 28px;
}
@media (max-width: 767px) {
	.nv-404-art {
		max-width: 210px;
	}
}
.nv-404-art img {
	width: 100%;
	height: auto;
}
.nv-404-art .nv-light-only {
	display: block;
}
:root[data-theme="dark"] .nv-404-art .nv-light-only {
	display: none;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .nv-404-art .nv-light-only {
		display: none;
	}
}

/* Copy buttons (.nv-copy-btn, script in functions.php): a small round button after an email address or phone
   number, like the footer's round controls. Shows a tick for 2 seconds after copying. */
.nv-copy-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1.5px solid var(--nv-text);
	border-radius: 50%;
	background: transparent;
	color: var(--nv-text);
	cursor: pointer;
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.nv-copy-btn::before {
	content: "";
	position: absolute;
	inset: -8px;
}
.nv-copy-btn[hidden] {
	display: none;
}
.nv-copy-btn:is(:hover, :focus) {
	background: var(--nv-text);
	color: var(--nv-bg);
}
.nv-copy-btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.nv-copy-btn .nv-check-icon,
.nv-copy-btn.is-copied .nv-copy-icon {
	display: none;
}
.nv-copy-btn.is-copied .nv-check-icon {
	display: block;
}
.nv-copy-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}