/**
 * Uncurved Isle - theme.css
 *
 * Only what theme.json cannot express: focus rings, interaction states,
 * form field states, notices, card details, a few accessibility fixes and
 * compatibility with the parent theme presets.
 *
 * Rules:
 * - Every value comes from a theme.json variable (--wp--preset--* or
 *   --wp--custom--*), so colours and sizes are changed in one place.
 * - Every class created here starts with "uci-" and is documented below.
 * - Antique gold (accent) is used only for decoration, never for text or
 *   for the border of a form field.
 *
 * Classes provided:
 * - .uci-card            White card with a thin border and a gold top rule.
 * - .uci-rule            Heading followed by a short decorative gold rule.
 * - .uci-site-header     Header bar, separated from the page by a hairline.
 * - .uci-header-cta      Contact button in the header. functions.php gives
 *                        it the address of the published Contact page.
 * - .uci-footer-contact  Contact details area in the footer.
 * - .uci-field, .uci-field__help, .uci-field__error
 *                        Form field wrapper, help text and error text.
 * - .uci-notice, .uci-notice--error, .uci-notice--success, .uci-notice__title
 *                        Error and confirmation messages.
 *
 * @package Uncurved_Isle
 * @since 0.1.0
 */

/* ------------------------------------------------------------------------
 * 1. Compatibility with Twenty Twenty-Five presets
 *
 * The child palette and font list replace the parent ones. Parent templates
 * and patterns that still refer to the parent names are mapped to the
 * Uncurved Isle values so they never lose their colours or fonts.
 * --------------------------------------------------------------------- */

:root {
	--wp--preset--color--accent-1: var(--wp--preset--color--accent);
	--wp--preset--color--accent-2: var(--wp--preset--color--surface);
	--wp--preset--color--accent-3: var(--wp--preset--color--primary);
	--wp--preset--color--accent-4: var(--wp--preset--color--contrast-muted);
	--wp--preset--color--accent-5: var(--wp--preset--color--base);
	--wp--preset--color--accent-6: var(--wp--custom--color--hairline);
	--wp--preset--font-family--manrope: var(--wp--preset--font-family--atkinson-hyperlegible);
	--wp--preset--font-family--fira-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.has-accent-1-color { color: var(--wp--preset--color--accent-1) !important; }
.has-accent-2-color { color: var(--wp--preset--color--accent-2) !important; }
.has-accent-3-color { color: var(--wp--preset--color--accent-3) !important; }
.has-accent-4-color { color: var(--wp--preset--color--accent-4) !important; }
.has-accent-5-color { color: var(--wp--preset--color--accent-5) !important; }
.has-accent-6-color { color: var(--wp--preset--color--accent-6) !important; }
.has-accent-1-background-color { background-color: var(--wp--preset--color--accent-1) !important; }
.has-accent-2-background-color { background-color: var(--wp--preset--color--accent-2) !important; }
.has-accent-3-background-color { background-color: var(--wp--preset--color--accent-3) !important; }
.has-accent-4-background-color { background-color: var(--wp--preset--color--accent-4) !important; }
.has-accent-5-background-color { background-color: var(--wp--preset--color--accent-5) !important; }
.has-accent-6-background-color { background-color: var(--wp--preset--color--accent-6) !important; }
.has-manrope-font-family { font-family: var(--wp--preset--font-family--manrope) !important; }
.has-fira-code-font-family { font-family: var(--wp--preset--font-family--fira-code) !important; }

/* ------------------------------------------------------------------------
 * 2. Base
 * --------------------------------------------------------------------- */

:where(a) {
	text-decoration-thickness: from-font;
	text-underline-offset: 0.2em;
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* Skip link added by WordPress: brand colours when it receives focus. */
body .skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	font-weight: 700;
	text-decoration: underline;
}

/* ------------------------------------------------------------------------
 * 3. Keyboard focus
 *
 * A dark outline with a light inner ring stays visible on light and on
 * dark backgrounds. On dark sections the outline itself turns light.
 * --------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 var(--wp--custom--focus--offset, 2px) var(--wp--preset--color--base);
	outline: var(--wp--custom--focus--width, 3px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset, 2px);
}

:is(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .wp-block-cover:not(.is-light)) :is(a, button, input, select, textarea, summary, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

:is(.has-base-background-color, .has-surface-background-color, .wp-block-cover.is-light) :is(a, button, input, select, textarea, summary, .wp-element-button, .wp-block-button__link):focus-visible {
	outline-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------------
 * 4. Dark sections
 *
 * Headings and links follow the section text colour on dark backgrounds,
 * unless a colour was chosen for them in the editor.
 * --------------------------------------------------------------------- */

:is(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .wp-block-cover:not(.is-light)) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

:is(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .wp-block-cover:not(.is-light)) a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* ------------------------------------------------------------------------
 * 5. Buttons
 * --------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: var(--wp--custom--control--min-height, 44px);
	transition:
		background-color var(--wp--custom--transition--duration, 150ms) ease,
		border-color var(--wp--custom--transition--duration, 150ms) ease,
		color var(--wp--custom--transition--duration, 150ms) ease;
}

/*
 * Buttons with colours chosen in the editor keep those colours on hover,
 * so the hover state is shown with an underline instead.
 */
.wp-block-button__link:is(.has-background, .has-text-color):hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Outline buttons get a visible hover and focus state. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	text-decoration: underline;
}

.wp-block-button__link[aria-disabled="true"],
.wp-element-button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/*
 * A button whose text comes from a field (for example the department link
 * on a service page) is hidden when that field is empty, so no empty link
 * is ever shown.
 */
.wp-block-button:has(> .wp-block-button__link:empty) {
	display: none;
}

/*
 * A Buttons block left without any button takes no room. This happens to
 * the header Contact button while no Contact page is published (see
 * functions.php) and to service buttons whose fields are empty.
 */
.wp-block-buttons:not(:has(.wp-block-button)) {
	display: none;
}

.uci-site-header {
	border-bottom: 1px solid var(--wp--custom--color--hairline);
}

.uci-header-cta .wp-block-button__link {
	white-space: nowrap;
}

/* ------------------------------------------------------------------------
 * 6. Form fields
 *
 * Field borders use the "Field border" colour (3.66:1 on white), never the
 * gold accent. Errors are shown with text and an icon, not colour alone.
 * --------------------------------------------------------------------- */

:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="range"], [type="color"], [type="file"]), select, textarea),
.wp-block-search__input {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small, 4px);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1.4;
	max-width: 100%;
	min-height: var(--wp--custom--control--min-height, 44px);
	padding: 0.625rem 0.75rem;
}

:where(textarea) {
	min-height: 8rem;
	resize: vertical;
}

:where(input, select, textarea):hover {
	border-color: var(--wp--preset--color--contrast-muted);
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	border-width: 2px;
}

:where(input, select, textarea):disabled {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-muted);
	cursor: not-allowed;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--primary);
	height: 1.25rem;
	width: 1.25rem;
}

::placeholder {
	color: var(--wp--preset--color--contrast-muted);
	opacity: 1;
}

.uci-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-block-end: 1.25rem;
}

.uci-field > label {
	font-weight: 700;
}

.uci-field__help {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

.uci-field__error {
	align-items: center;
	color: var(--wp--preset--color--error);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	gap: 0.375rem;
}

.uci-field__error::before {
	align-items: center;
	background-color: var(--wp--preset--color--error);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	content: "!";
	content: "!" / "";
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.75rem;
	height: 1.125rem;
	justify-content: center;
	width: 1.125rem;
}

/* ------------------------------------------------------------------------
 * 7. Notices (error and confirmation messages)
 * --------------------------------------------------------------------- */

.uci-notice {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--color--hairline);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radius--small, 4px);
	color: var(--wp--preset--color--contrast);
	padding: 1rem 1.25rem;
}

.uci-notice--error {
	background-color: var(--wp--custom--color--error-tint);
	border-left-color: var(--wp--preset--color--error);
}

.uci-notice--success {
	background-color: var(--wp--custom--color--success-tint);
	border-left-color: var(--wp--preset--color--success);
}

.uci-notice__title {
	font-weight: 700;
	margin: 0 0 0.25rem;
}

/* ------------------------------------------------------------------------
 * 8. Cards and decorative rules
 * --------------------------------------------------------------------- */

.uci-card {
	border: 1px solid var(--wp--custom--color--hairline);
	border-radius: var(--wp--custom--radius--small, 4px);
	border-top: 3px solid var(--wp--preset--color--accent);
	transition: border-color var(--wp--custom--transition--duration, 150ms) ease;
}

.uci-card:hover,
.uci-card:focus-within {
	border-color: var(--wp--custom--color--hairline-strong);
	border-top-color: var(--wp--preset--color--accent);
}

.uci-rule::after {
	background-color: var(--wp--preset--color--accent);
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.75rem;
	width: 3rem;
}

.has-text-align-center.uci-rule::after {
	margin-inline: auto;
}

/* ------------------------------------------------------------------------
 * 9. Questions and answers (Details block)
 * --------------------------------------------------------------------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--custom--color--hairline);
	padding-block: 0.75rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	padding-block: 0.5rem;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------------
 * 10. Tables
 * --------------------------------------------------------------------- */

.wp-block-table :where(th, td) {
	border-color: var(--wp--custom--color--hairline-strong);
}

/* ------------------------------------------------------------------------
 * 11. Reduced motion
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}