/*
Theme Name: Thistle Surveying
Theme URI: https://thistlesurveying.com/
Author: Thistle Surveying Ltd
Description: Custom theme for Thistle Surveying Ltd, RICS chartered surveyors in Birmingham, the West Midlands and London. Built from the approved static design export. Section CSS ships inline per section, the way the export does it - this file holds the theme header, the design tokens and a small set of global helpers only.
Version: 1.2.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thistle-surveying
Tags: custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------------------------------------
   Design tokens - measured values from Thistle-Surveying-WP-Export/tokens.md.
   Sections still carry their own inline styles; these exist so shared classes
   (lifted .scpN:hover rules, the responsive layer, forms) have one source.
   --------------------------------------------------------------------------- */

:root {
	/* Brand */
	--tsv-yellow: #F0C040;
	--tsv-yellow-dark: #C9960E;
	--tsv-star: #E8A317;
	--tsv-trustpilot: #00B67A;

	/* Calls to action */
	--tsv-green: #17703D;
	--tsv-green-dark: #125A31;

	/* Ink and text */
	--tsv-ink: #0D0D0D;
	--tsv-body: #2E2E2E;
	--tsv-body-alt: #3A3A3A;
	--tsv-muted: #6B6B6B;
	--tsv-muted-light: #8A8A8A;
	--tsv-footer-text: #9E9E9E;
	--tsv-footer-text-light: #B8B8B8;

	/* Surfaces */
	--tsv-white: #FFFFFF;
	--tsv-grey: #F7F6F2;
	--tsv-grey-warm: #F7F4EF;
	--tsv-illustration: #EFEEEA;

	/* Lines */
	--tsv-border: #E8E4DE;
	--tsv-border-alt: #EAE7E0;
	--tsv-footer-divider: #2A2A2A;
	--tsv-footer-divider-light: #333333;

	/* Feedback */
	--tsv-error: #C0392B;

	/* Layout */
	--tsv-container: 1280px;
	--tsv-gutter: 28px;
	--tsv-measure: 760px;

	/* Radii */
	--tsv-radius-button: 4px;
	--tsv-radius-card: 8px;
	--tsv-radius-card-lg: 12px;
	--tsv-radius-pill: 999px;

	/* Shadows */
	--tsv-shadow-header: 0 1px 12px rgba(0, 0, 0, .05);
	--tsv-shadow-card: 0 2px 12px rgba(0, 0, 0, .05);
	--tsv-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, .08);
	--tsv-shadow-panel: 0 16px 48px rgba(0, 0, 0, .15);

	/* Motion */
	--tsv-transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;

	/* Type */
	--tsv-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--tsv-font-quote: Georgia, serif;
}

/* ---------------------------------------------------------------------------
   Global helpers only. Anything section-specific belongs inline, in the
   template part that owns it.
   --------------------------------------------------------------------------- */

/*
 * The design export relies on browser defaults: content-box sizing, 16px text,
 * normal line-height, default heading and paragraph margins. Every section's
 * inline styles were measured against those defaults, so the base layer sets
 * nothing that changes geometry. bin/extract/layout.py checks this in a real
 * browser.
 */
body {
	margin: 0;
	background: var(--tsv-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Carousel slides, tab panels and accordion bodies carry inline display values
 * from the design, which beat the browser's own [hidden] rule. Without this,
 * every "hidden" slide renders stacked under the visible one.
 */
[hidden] {
	display: none !important;
}

/* The export's root wrapper carries the font; nothing else is inherited. */
.tsv-site {
	font-family: Montserrat, sans-serif;
}

a:hover {
	text-decoration: underline;
}

/* Keyboard focus stays visible everywhere. */
:focus-visible {
	outline: 2px solid var(--tsv-yellow-dark);
	outline-offset: 2px;
}

.tsv-container {
	width: 100%;
	max-width: var(--tsv-container);
	margin: 0 auto;
	padding: 0 var(--tsv-gutter);
}

/* Accessible skip link and screen-reader text, WordPress conventions. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background: var(--tsv-white);
	clip-path: none;
	color: var(--tsv-ink);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 8px;
	padding: 12px 20px;
	top: 8px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--tsv-shadow-panel);
	border-radius: var(--tsv-radius-button);
}

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