/* ==========================================================================
   Charnwood Tech Help — structural styles
   Visual direction B, "Two hills".

   This file contains only what theme.json cannot express: focus rings, the
   skip link, the horizon edge, ruled compositions and reduced-motion handling.
   Every colour, type size and spacing value comes from a theme.json token.
   No colour is written as a literal in this file.
   ========================================================================== */

/* --- Skip link -----------------------------------------------------------
   Not defined here. WordPress core emits its own skip link as the first
   element in the body, with its own stylesheet, and the theme previously
   added a second one doing the same job. One is enough. */

/* --- Focus visibility ----------------------------------------------------
   A visible ring on every interactive element. Blue on light surfaces
   (5.04:1 on paper). On deep green the blue ring would measure 1.18:1 against
   the background and be effectively invisible, so dark surfaces switch to the
   paper colour (6.03:1 on deep green). */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--action);
	outline-offset: var(--wp--custom--focus-offset);
}

.cth-on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* --- Structural container ------------------------------------------------
   One container width for the whole site, used by the header, the footer and
   every band so that their content lines up exactly. It is a flow container
   rather than a constrained one: constrained layouts centre their children,
   which would turn the reading-measure cap into a centred column instead of a
   left-aligned one. */

.cth-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

/* --- Full-bleed ----------------------------------------------------------
   The content area spans the viewport so that bands can run edge to edge.
   WordPress offsets .alignfull children of a padded container with negative
   margins; here the containers already reach the viewport edge, so those
   offsets would push a band past it and cause horizontal scrolling. */

.wp-block-post-content,
.cth-main {
	padding-left: 0;
	padding-right: 0;
}

.cth-main > .alignfull,
.wp-block-post-content > .alignfull {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* --- Band geometry -------------------------------------------------------
   A band is a full-bleed surface. It carries no inline padding of its own:
   the constrained container inside it supplies the single inset, so every
   band's content lines up with the header and the footer. WordPress applies
   the root padding to each constrained block automatically, so adding it here
   as well would double the inset and break that alignment. */

.cth-hero,
.cth-page-header,
.cth-section.alignfull {
	padding-left: 0;
	padding-right: 0;
}

/* --- Section rhythm ------------------------------------------------------ */

.cth-section {
	padding-block: var(--wp--preset--spacing--80);
}

.cth-section--tight {
	padding-block: var(--wp--preset--spacing--60);
}


/* --- The horizon ---------------------------------------------------------
   The bottom edge of the opening band. The SVG is painted in the paper
   colour, so the green band's lower edge becomes the hill line. Decorative
   only: it is aria-hidden and carries no information. */

.cth-horizon {
	display: block;
	width: 100%;
	height: auto;
	/* Guards against a sub-pixel seam between the silhouette and the band
	   below it, which some browsers render as a light hairline. */
	margin-bottom: -1px;
}

/* The hero band hands over to the silhouette, so it takes no bottom padding of
   its own, and no row gap: the silhouette's upper area is transparent, so a
   gap between the content and the edge reads as extra empty green. */
.cth-hero {
	padding-bottom: 0;
	row-gap: 0;
}

.cth-hero__inner {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

/* --- Ruled list ----------------------------------------------------------
   The editorial list used for "common things I can help with" and for the
   "what I will not do" boundary list. Hairline rules are decorative
   separators, not the only indicator of a control boundary, so the low
   contrast of the line colour is acceptable here. */

.cth-ruled-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.cth-ruled-list > li {
	padding-block: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--hairline) solid var(--wp--custom--line);
	break-inside: avoid;
}

.cth-ruled-list > li:last-child {
	border-bottom: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

.cth-ruled-list .cth-ruled-list__term {
	display: block;
	font-weight: 600;
}

/* Two-column editorial flow on wide screens, single column on narrow ones.
   Deliberately not a card grid. */
.cth-ruled-list--columns {
	columns: 2;
	column-gap: var(--wp--preset--spacing--70);
}

@media (max-width: 781px) {
	.cth-ruled-list--columns {
		columns: 1;
	}
}

/* --- Questions list ------------------------------------------------------
   Each question is a real heading, so the page is navigable by heading. The
   size is held down so that eleven of them do not shout, and a hairline rule
   separates each one. */

.cth-faq .wp-block-heading {
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.35;
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

/* The rule runs the full structural width while the answer stays at the
   reading measure, so eleven questions read as a set rather than as a narrow
   column that ran out of page. Specificity is raised deliberately: the shared
   reading-measure rule also targets .cth-section headings. */
.cth-section .cth-faq .wp-block-heading {
	max-width: none;
}

.cth-faq > .wp-block-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* --- Portrait ------------------------------------------------------------
   A 4:5 crop, which is the source photograph's own proportion. No rounding, no
   shadow, no tint. The photograph does the work of saying who will turn up, so
   it is given real size rather than treated as decoration. */

.cth-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}

/* --- Two-column text flow ------------------------------------------------
   Short editorial lists that are not the ruled index. Two columns on wide
   screens, one on narrow ones. */

.cth-columns-2 {
	columns: 2;
	column-gap: var(--wp--preset--spacing--70);
}

.cth-columns-2 > li {
	break-inside: avoid;
	margin-bottom: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.cth-columns-2 {
		columns: 1;
	}
}

/* --- Statement list ------------------------------------------------------
   A narrow single column of short statements, used on the deep green band.
   The page already uses the two-column ruled index for "common things I can
   help with"; repeating that shape for the safety boundaries would weaken
   both sections, so this one is a different component with no rules. */

.cth-statements {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding-left: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--70);
}

.cth-statements > li {
	break-inside: avoid;
	margin-bottom: var(--wp--preset--spacing--50);
}

.cth-statements strong {
	display: block;
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 781px) {
	.cth-statements {
		columns: 1;
	}
}

/* --- Numbered sequence ---------------------------------------------------
   "How a visit works". Numbers are typographic, not decorative icons. The
   list is held to the reading measure: a single-column ruled list at full
   structural width would run to well over a hundred characters a line. */

.cth-steps {
	counter-reset: cth-step;
	list-style: none;
	margin: 0;
	padding-left: 0;
	max-width: var(--wp--custom--measure);
}

.cth-steps > li {
	counter-increment: cth-step;
	position: relative;
	padding-left: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

.cth-steps > li:last-child {
	border-bottom: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

.cth-steps > li::before {
	content: counter(cth-step);
	position: absolute;
	left: 0;
	top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.cth-on-dark .cth-steps > li,
.cth-on-dark .cth-ruled-list > li {
	border-color: var(--wp--preset--color--paper);
}

.cth-on-dark .cth-steps > li::before {
	color: var(--wp--preset--color--paper);
}

/* --- Prices --------------------------------------------------------------
   Tabular figures throughout so figures line up in a column. */

.cth-figures,
.cth-price-lead {
	font-variant-numeric: tabular-nums;
}

.cth-price-lead {
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

/* --- Tables --------------------------------------------------------------
   Horizontal rules only. A full cell grid is heavier than anything else on
   the page and reads as a spreadsheet rather than a price list. */

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	box-sizing: border-box;
	border: 0;
	border-bottom: var(--wp--custom--hairline) solid var(--wp--custom--line);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: 0;
	text-align: left;
	vertical-align: baseline;
}

.wp-block-table th {
	font-weight: 600;
}

.wp-block-table th + td,
.wp-block-table td + td {
	padding-left: var(--wp--preset--spacing--50);
}

.cth-price-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.cth-price-table .cth-price-table__amount {
	white-space: nowrap;
	font-weight: 600;
}

/* Captions sit under the table, aligned with it rather than centred. */
.wp-block-table figcaption,
.wp-element-caption {
	margin-top: var(--wp--preset--spacing--30);
	text-align: left;
}

/* On narrow screens a three-column price table leaves about eleven characters
   per column. Each row becomes a term-and-price line with the explanation
   underneath, which keeps the figures and their meaning together. */
@media (max-width: 600px) {
	.cth-price-table table,
	.cth-price-table tbody,
	.cth-price-table tr,
	.cth-price-table th,
	.cth-price-table td {
		display: block;
		width: 100%;
	}

	.cth-price-table tr {
		padding-block: var(--wp--preset--spacing--40);
		border-bottom: var(--wp--custom--hairline) solid var(--wp--custom--line);
	}

	.cth-price-table th,
	.cth-price-table td,
	.cth-price-table td + td {
		border-bottom: 0;
		padding: 0;
	}

	.cth-price-table th,
	.cth-price-table .cth-price-table__amount {
		display: inline;
	}

	.cth-price-table .cth-price-table__amount {
		margin-left: var(--wp--preset--spacing--30);
	}
}

/* --- Navigation ----------------------------------------------------------
   Current page is shown with weight and an underline, never with colour
   alone. */

.cth-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.cth-nav .wp-block-navigation-item__content:hover,
.cth-nav .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.cth-nav .current-menu-item > .wp-block-navigation-item__content,
.cth-nav .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* --- Surfaces on the deep green band -------------------------------------
   Links inside a dark band take the paper colour; the theme.json link colour
   (blue) measures 1.18:1 against deep green. */

.cth-on-dark a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
}

.cth-on-dark a:not(.wp-element-button):hover,
.cth-on-dark a:not(.wp-element-button):focus {
	color: var(--wp--preset--color--surface);
}

/* --- Small print and boundaries ------------------------------------------ */

.cth-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.cth-on-dark .cth-note {
	color: var(--wp--preset--color--surface);
}

.cth-boundary {
	border-left: 4px solid var(--wp--preset--color--brand-primary);
	padding-left: var(--wp--preset--spacing--50);
}

.cth-launch-note {
	border-top: var(--wp--custom--hairline) solid currentColor;
	padding-top: var(--wp--preset--spacing--40);
}

.cth-area-list {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.cth-area-list li + li {
	margin-top: var(--wp--preset--spacing--30);
}

/* --- Service area map ----------------------------------------------------
   A self-contained schematic rather than an embedded third-party map. It
   adds no cookies or tracking and deliberately carries no home marker. */

.cth-service-area-map__image {
	max-width: 47.5rem;
	margin-top: var(--wp--preset--spacing--60);
	margin-right: auto;
	margin-left: 0;
}

.cth-service-area-map__image img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

.cth-service-area-map__image figcaption {
	max-width: var(--wp--custom--measure);
	margin-top: var(--wp--preset--spacing--30);
	text-align: left;
}

.cth-on-dark .cth-boundary {
	border-left-color: var(--wp--preset--color--paper);
}

/* --- Development-only marker ---------------------------------------------
   Retained for unpublished legal drafts only. Public pages must not expose
   build notes or internal instructions. */

.cth-dev-placeholder {
	border: 2px dashed var(--wp--custom--boundary);
	padding: var(--wp--preset--spacing--60);
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
}

.cth-dev-placeholder strong {
	display: block;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* --- Reading measure -----------------------------------------------------
   The structural width is 72rem so that lists, tables and columns can use the
   space. Prose is held to the reading measure so that lines never run long.
   Inside a narrow column the cap is larger than its container, so the rule
   has no effect there and is safe to apply broadly. */

.cth-section p,
.cth-section .wp-block-heading,
.cth-hero p,
.wp-block-post-content > p,
.wp-block-post-content > .wp-block-heading,
.wp-block-post-content > .wp-block-list {
	max-width: var(--wp--custom--measure);
}

/* --- Buttons -------------------------------------------------------------
   The primary button is styled in theme.json. The outline variation is styled
   here: theme.json cannot target a block style variation, so a
   styles.blocks.core/button.variations entry is silently ignored and the
   button renders as a filled primary. WordPress applies the class, so the
   rule belongs in CSS. */

.wp-block-button.is-style-outline .wp-element-button {
	background-color: transparent;
	color: var(--wp--preset--color--action);
	border: 2px solid var(--wp--preset--color--action);
}

.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:focus {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--paper);
}

/* --- Telephone -----------------------------------------------------------
   The number appears in the header, the footer and on the contact page, all
   rendered from one value. It never wraps, because a split phone number is
   harder to read aloud than a wide header is to look at. */

.cth-phone {
	margin-block: 0;
	white-space: nowrap;
}

.cth-phone a {
	font-weight: 600;
	text-underline-offset: 0.25em;
}

/* --- Header -------------------------------------------------------------- */

.cth-header {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: var(--wp--custom--hairline) solid var(--wp--custom--line);
}

.cth-header__bar {
	width: 100%;
	gap: var(--wp--preset--spacing--50);
	justify-content: flex-end;
}

/* The logo holds the left edge; the navigation and the booking action sit
   together on the right. Justifying the row to the end keeps them right
   aligned if the row ever wraps, instead of the action dropping to the left
   margin under the logo. */
.cth-header__bar > .cth-header__logo,
.cth-header__bar > .wp-block-site-logo {
	margin-right: auto;
}

.cth-header__logo {
	display: block;
	line-height: 0;
}

.cth-header__logo img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

/* The navigation's default gap plus its link padding is wide enough to push
   the booking action onto a second row. Narrow it so the header stays a single
   row on ordinary desktop widths. */
.cth-nav .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

/* Below the width at which the single-row header stops fitting, the logo gives
   up some width so the row survives a little longer before wrapping. */
@media (max-width: 1279px) {
	.cth-header__logo img,
	.cth-header .wp-block-site-logo img {
		max-width: 190px;
	}
}

.cth-header .wp-block-site-logo img {
	height: auto;
}

/* The default hamburger is a 24px icon with no padding around it, which is
   well below the touch target this audience needs. */
.wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--hairline) solid var(--wp--custom--boundary);
	border-radius: var(--wp--custom--radius);
}

@media (max-width: 640px) {
	.cth-header__logo img,
	.cth-header .wp-block-site-logo img {
		max-width: 170px;
	}

	.cth-header__bar {
		row-gap: var(--wp--preset--spacing--40);
	}

}

/* --- Page header band ----------------------------------------------------
   The deep green band that opens an inner page. Inner pages use a straight
   edge; the hill silhouette appears once, on the home page, so that it stays
   a signature rather than wallpaper. */

.cth-page-header {
	padding-block: var(--wp--preset--spacing--70) 0;
}

/* The page intro band continues the same green surface with the lead paragraph
   and the first action. The two bands are one block visually, so neither
   carries padding on the edge they share. */
.cth-page-intro {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

/* Any gap the block layout puts between the page header band and the content
   area would show as a strip of paper across the middle of the green opening.
   There is nothing to separate, so there is no gap. */
.cth-page-header + .wp-block-group,
.cth-page-header + * {
	margin-block-start: 0;
}

/* --- Footer -------------------------------------------------------------- */

.cth-footer {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.cth-footer__name {
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: var(--wp--preset--spacing--20);
}

.cth-footer__tagline {
	margin-bottom: var(--wp--preset--spacing--40);
}

.cth-footer__heading {
	font-size: var(--wp--preset--font-size--heading-sm);
}

.cth-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
}

/* Footer links are not inline links inside a sentence, so they get a full
   touch target rather than relying on the 2.5.8 inline exception. */
.cth-footer .wp-block-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.cth-footer .wp-block-list li + li {
	margin-top: 0;
}

/* --- Form controls -------------------------------------------------------
   Native controls styled to match the system so that any form plugin
   inherits the design rather than fighting it. The boundary colour is the
   token measured at 3.84:1 against paper, which clears the 3:1 requirement
   for a meaningful control edge. */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 32rem;
	min-height: 44px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	border: var(--wp--custom--hairline) solid var(--wp--custom--boundary);
	border-radius: var(--wp--custom--radius);
}

textarea {
	min-height: 9rem;
}

label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20);
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

/* Wrappers for the enquiry form, which is a known requirement waiting on a
   decision about where submissions are stored. Kept alongside the control
   styles so the form has a place to land. */
.cth-field {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cth-field__hint {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.cth-field--checkbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--30);
	max-width: 40rem;
}

.cth-field--checkbox label {
	font-weight: 400;
	margin: 0;
}

.cth-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cth-form-notice {
	border-left: 4px solid var(--wp--preset--color--brand-primary);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
}

.cth-form-notice--error {
	border-left-color: var(--wp--preset--color--ink);
}

/* --- Motion --------------------------------------------------------------
   Motion is near-invisible by default and removed entirely when the visitor
   asks for reduced motion. */

@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;
	}
}

/* On the narrowest screens the logo shrinks further, so that the logo, the
   menu button and the telephone number all stay on one row even when the
   number is a full UK number rather than the placeholder. */
@media (max-width: 420px) {
	.cth-header .wp-block-site-logo img {
		max-width: 132px;
	}

	.cth-header__bar {
		column-gap: var(--wp--preset--spacing--30);
	}
}

/* Below about 380px, a full UK telephone number plus the menu button will not
   fit beside a 132px logo, and the header would take a third row. The logo
   gives up more room instead: it is a wordmark and stays legible. */
@media (max-width: 380px) {
	.cth-header .wp-block-site-logo img {
		max-width: 110px;
	}
}

/* At 320–360px the logo, menu and action cannot share one row without either
   wrapping awkwardly or making the wordmark illegible. Contact remains in the
   menu and every page carries its own action, so the duplicate header action
   is removed only at this narrowest breakpoint. */
@media (max-width: 360px) {
	.cth-header__bar > .wp-block-buttons {
		display: none;
	}
}