/*
Theme Name: Swiss Colours
Theme URI: https://swisscolours.es/
Author: Swiss Colours
Description: Block theme for Swiss Colours — painters in Marbella and along the Costa del Sol. Ships its own SEO, schema and quote form; needs no page builder or SEO plugin.
Version: 1.1.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swisscolours
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu
*/

/* ==========================================================================
   Design tokens. theme.json owns the palette, spacing scale and type ramp;
   these are the values the block editor cannot express as presets.
   ========================================================================== */
:root {
	--sc-red-50: #FDEDEF;
	--sc-red-100: #FAD3D8;
	--sc-red-300: #F0707E;
	--sc-red-500: #E01020;
	--sc-red-600: #C60E1C;
	--sc-red-700: #A20B17;
	--sc-ink-900: #1A1615;
	--sc-ink-800: #211C1B;
	--sc-ink-700: #302828;
	--sc-ink-600: #4A413E;
	--sc-ink-500: #6B615D;
	--sc-ink-400: #928884;
	--sc-stone-50: #FBFAF8;
	--sc-stone-100: #F4F1ED;
	--sc-stone-200: #E8E3DE;
	--sc-stone-300: #D6CFC8;
	--sc-green-500: #1F7A4D;

	--color-accent: var(--sc-red-500);
	--color-accent-hover: var(--sc-red-600);
	--color-accent-press: var(--sc-red-700);
	--color-accent-tint: var(--sc-red-50);
	--text-strong: var(--sc-ink-900);
	--text-body: var(--sc-ink-700);
	--text-muted: var(--sc-ink-500);
	--text-faint: var(--sc-ink-400);
	--text-on-dark-muted: rgba(255, 255, 255, .72);
	--surface-page: #fff;
	--surface-alt: var(--sc-stone-50);
	--surface-sunken: var(--sc-stone-100);
	--surface-dark: var(--sc-ink-900);
	--border-hairline: var(--sc-stone-200);
	--border-strong: var(--sc-stone-300);
	--border-dark: rgba(255, 255, 255, .16);
	--overlay-scrim: rgba(26, 22, 21, .58);
	--gradient-image-protect: linear-gradient(to top, rgba(26, 22, 21, .78) 0%, rgba(26, 22, 21, .32) 42%, rgba(26, 22, 21, 0) 78%);

	--font-serif-display: "Playfair Display", Georgia, serif;
	--font-sans: "Poppins", "Helvetica Neue", Helvetica, sans-serif;

	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
	--space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

	--container-max: 1200px;
	--container-pad: 24px;
	--radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px; --radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(26,22,21,.06), 0 1px 1px rgba(26,22,21,.04);
	--shadow-md: 0 2px 4px rgba(26,22,21,.06), 0 8px 20px rgba(26,22,21,.07);
	--shadow-lg: 0 12px 40px rgba(26,22,21,.14);
	--focus-ring: 0 0 0 3px rgba(224, 16, 32, .22);
	--ease-standard: cubic-bezier(.2, .6, .2, 1);
	--dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

img { max-width: 100%; height: auto; }
a { text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--surface-dark);
	color: #fff;
	text-decoration: none;
}
.sc-skip-link:focus { left: 0; color: #fff; }

/* Section rhythm ---------------------------------------------------------- */
.sc-section { padding-block: var(--space-9); }
.sc-section--tight { padding-block: var(--space-7); }
.sc-section--flush { padding-block: 0; }

/* Shared type ------------------------------------------------------------- */
.sc-eyebrow {
	display: block;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.sc-lead { font-size: 19px; line-height: 1.7; color: var(--text-muted); max-width: 60ch; }
.sc-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.sc-head > * { margin: 0; }
.sc-head--center { margin-inline: auto; text-align: center; align-items: center; }
.sc-head--center .sc-lead { margin-inline: auto; }

/* ==========================================================================
   Buttons. Core button block + registered style variations.
   ========================================================================== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	border: 1px solid transparent;
	transition:
		background-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard),
		transform 90ms var(--ease-standard);
}
.wp-block-button__link:active { transform: scale(.985); }
.wp-block-button__link:hover { color: #fff; }

.wp-block-button.is-style-sc-small .wp-block-button__link { padding: 12px 20px; font-size: 12px; }

.wp-block-button.is-style-sc-secondary .wp-block-button__link {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text-strong);
}
.wp-block-button.is-style-sc-secondary .wp-block-button__link:hover {
	border-color: var(--text-strong);
	background: var(--surface-sunken);
	color: var(--text-strong);
}

.wp-block-button.is-style-sc-light .wp-block-button__link { background: #fff; color: var(--text-strong); }
.wp-block-button.is-style-sc-light .wp-block-button__link:hover { background: var(--sc-stone-100); color: var(--text-strong); }

.wp-block-button.is-style-sc-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	padding-inline: var(--space-2);
}
.wp-block-button.is-style-sc-ghost .wp-block-button__link:hover { color: #fff; opacity: .8; }

/* ==========================================================================
   Icons
   ========================================================================== */
.sc-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}

/* ==========================================================================
   Header
   ========================================================================== */
.sc-site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--border-hairline);
}
/* The frosted pane is a pseudo-element rather than the header itself, because
   `backdrop-filter` makes its element the containing block for every fixed
   descendant — and the mobile menu overlay is `position: fixed; inset: 0`
   inside this header. With the blur on the header, `inset: 0` resolved to the
   96px header strip instead of the viewport and the menu opened as a sliver
   under the logo. A pseudo-element is a descendant, so it contains nothing. */
.sc-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(140%) blur(12px);
}
.sc-header-inner {
	min-height: 96px;
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: nowrap;
}
.sc-site-header .wp-block-site-logo { flex: 0 0 auto; line-height: 0; }
.sc-site-header .wp-block-site-logo img { height: 68px; width: auto; max-width: none; }
.sc-header-nav { margin-left: auto; }
.sc-header-nav .wp-block-navigation__container { gap: var(--space-6); }
.sc-header-nav a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-body);
	text-decoration: none;
}
.sc-header-nav a:hover { color: var(--color-accent); }
.sc-header-actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.sc-header-tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-header-tel p { margin: 0; font-size: 14px; font-weight: 500; }
.sc-header-tel a { color: var(--text-strong); text-decoration: none; }
.sc-header-tel a:hover { color: var(--color-accent); }

/* ==========================================================================
   Hero
   ========================================================================== */
.sc-hero {
	background: var(--surface-dark);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.sc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 12px, transparent 12px 24px);
	pointer-events: none;
}
.sc-hero > * { position: relative; }
.sc-hero-grid {
	padding-block: var(--space-10);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--space-8);
	align-items: center;
}
.sc-hero :is(h1, h2) { color: #fff; }
.sc-hero h1 { margin-top: var(--space-3); }
.sc-hero p { margin-top: var(--space-4); font-size: 19px; line-height: 1.7; color: var(--text-on-dark-muted); max-width: 48ch; }
.sc-hero-actions { margin-top: var(--space-6); gap: var(--space-3); }

.sc-stats { display: flex; gap: var(--space-7); margin-top: var(--space-8); flex-wrap: wrap; }
.sc-stat > * { margin: 0; }
.sc-stat b {
	display: block;
	font-family: var(--font-serif-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
}
.sc-stat span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-dark-muted); }

/* ==========================================================================
   Image placeholders. Kept deliberately: the site must not look broken
   before real photography lands. Every one is a real Image block slot.
   ========================================================================== */
.sc-ph {
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-xs);
	background: repeating-linear-gradient(45deg, var(--sc-stone-100) 0 10px, var(--sc-stone-50) 10px 20px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-4);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.sc-ph--dark {
	border-color: var(--border-dark);
	background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,.02) 10px 20px);
	color: rgba(255, 255, 255, .5);
}
.sc-ph--4x3 { aspect-ratio: 4/3; }
.sc-ph--4x5 { aspect-ratio: 4/5; }
.sc-ph--1x1 { aspect-ratio: 1/1; }
.sc-ph--16x9 { aspect-ratio: 16/9; }
.sc-ph p { margin: 0; }

/* An Image block with no image yet. In the editor the same block shows
   WordPress's Upload / Media Library buttons; this is only the front end. */
.sc-image-slot {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-4);
}
.sc-image-slot > span {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-faint);
}
.sc-image-slot.sc-ph--dark > span { color: rgba(255, 255, 255, .5); }
/* Once a real image is set the slot styling must get out of the way. */
figure.wp-block-image.sc-ph:has(img) {
	border: 0;
	background: none;
	padding: 0;
	display: block;
}
figure.wp-block-image.sc-ph img { border-radius: var(--radius-xs); }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.sc-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	justify-content: space-between;
	align-items: center;
}
.sc-trust-item { display: flex; align-items: center; gap: var(--space-3); }
.sc-trust-item p { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.sc-trust .sc-icon-wrap { color: var(--color-accent); line-height: 0; }

/* ==========================================================================
   Grids and cards
   ========================================================================== */
.sc-grid-2, .sc-grid-3, .sc-grid-4 { display: grid; }
.sc-grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.sc-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.sc-grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.sc-grid-2 > *, .sc-grid-3 > *, .sc-grid-4 > * { margin: 0; }

.sc-card {
	background: #fff;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}
.sc-card--raised { box-shadow: var(--shadow-sm); }
.sc-card--pad { padding: var(--space-6); }

/* Service cards ----------------------------------------------------------- */
.sc-service {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background: #fff;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	transition:
		box-shadow var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-standard),
		border-color var(--dur-base) var(--ease-standard);
}
.sc-service:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
	border-color: var(--border-strong);
}
.sc-service > * { margin: 0; }
.sc-service .sc-service-icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-xs);
	background: var(--color-accent-tint);
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}
.sc-service .sc-service-icon .sc-icon-wrap { line-height: 0; }
.sc-service h3 { color: var(--text-strong); }
.sc-service h3 a { color: inherit; text-decoration: none; }
/* The whole card is the click target, with the heading link as the a11y anchor. */
.sc-service h3 a::after { content: ""; position: absolute; inset: 0; }
.sc-service { position: relative; }
.sc-service h3 a:hover { color: var(--color-accent); }
.sc-service p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.sc-service .sc-more {
	margin-top: auto;
	padding-top: var(--space-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* ==========================================================================
   Gallery. The tiles are a query loop, so each tile is a <li> from
   core/post-template rather than a hand-written <figure>.
   ========================================================================== */
.sc-gallery .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}
.sc-gallery .wp-block-post-template > li {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-xs);
	border: 1px solid var(--border-hairline);
	background: var(--surface-sunken);
	aspect-ratio: 4/3;
	margin: 0;
}
.sc-gallery .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}
.sc-gallery .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.sc-gallery .wp-block-post-featured-image.sc-ph { border: 0; border-radius: 0; }
.sc-gallery .wp-block-post-featured-image.sc-ph p { margin: 0; }

.sc-gallery .wp-block-post-template > li::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gradient-image-protect);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-standard);
	pointer-events: none;
}
.sc-gallery .wp-block-post-template > li:hover::after,
.sc-gallery .wp-block-post-template > li:focus-within::after { opacity: 1; }

.sc-tile-caption {
	position: absolute;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 2;
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.sc-gallery .wp-block-post-template > li:hover .sc-tile-caption,
.sc-gallery .wp-block-post-template > li:focus-within .sc-tile-caption { opacity: 1; transform: none; }
.sc-tile-caption .wp-block-post-title {
	margin: 0;
	font-family: var(--font-serif-display);
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
.sc-tile-caption .wp-block-post-title a { color: #fff; text-decoration: none; }
/* The title link is the tile's click target. */
.sc-tile-caption .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.sc-tile-meta {
	display: flex;
	gap: 6px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-on-dark-muted);
}
.sc-tile-meta > * { margin: 0; }
.sc-tile-meta a { color: inherit; text-decoration: none; }
.sc-tile-meta > * + *::before { content: "· "; }

/* Filters are an editable List block; the active one is marked at render time. */
.sc-filters {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.sc-filters li { margin: 0; }
.sc-filters a {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-pill);
	padding: 6px 14px;
	background: #fff;
	color: var(--text-body);
	text-decoration: none;
}
.sc-filters a:hover { border-color: var(--text-strong); color: var(--text-strong); }
.sc-filters a[aria-current="page"] {
	background: var(--surface-dark);
	border-color: var(--surface-dark);
	color: #fff;
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.sc-steps { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: var(--space-4); }
.sc-steps li { display: flex; gap: var(--space-4); }
.sc-steps b { font-family: var(--font-serif-display); font-size: 1.5rem; font-weight: 400; color: var(--color-accent); min-width: 38px; line-height: 1.1; }
.sc-steps strong { display: block; color: var(--text-strong); }
.sc-steps span { font-size: 14px; color: var(--text-muted); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.sc-quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	background: #fff;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin: 0;
}
.sc-quote .sc-stars { display: flex; gap: 3px; color: var(--color-accent); }
.sc-quote blockquote { margin: 0; border: 0; padding: 0; font-family: var(--font-serif-display); font-size: 1.5rem; line-height: 1.22; color: var(--text-strong); }
.sc-quote blockquote p { margin: 0; font-size: inherit; }
.sc-quote figcaption { font-size: 14px; color: var(--text-muted); }
.sc-quote figcaption b { color: var(--text-strong); font-weight: 500; }

/* ==========================================================================
   FAQ — core/details, no JavaScript
   ========================================================================== */
.sc-faq { border-top: 1px solid var(--border-hairline); }
.sc-faq .wp-block-details {
	border-bottom: 1px solid var(--border-hairline);
	padding: 0;
	background: none;
}
.sc-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--text-strong);
}
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary:hover { color: var(--color-accent); }
.sc-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background:
		linear-gradient(var(--color-accent), var(--color-accent)) center/100% 2px no-repeat,
		linear-gradient(var(--color-accent), var(--color-accent)) center/2px 100% no-repeat;
}
.sc-faq .wp-block-details[open] summary::after {
	background: linear-gradient(var(--color-accent), var(--color-accent)) center/100% 2px no-repeat;
}
.sc-faq .wp-block-details > :not(summary) {
	padding: 0 var(--space-8) var(--space-5) 0;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-muted);
}

/* ==========================================================================
   Quote form
   ========================================================================== */
.sc-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.sc-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sc-field--full { grid-column: 1 / -1; }
.sc-field label { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.sc-field label i { color: var(--color-accent); font-style: normal; }
.sc-hint { font-size: 12px; color: var(--text-muted); }

.sc-form :is(input[type=text], input[type=email], input[type=tel], textarea, select) {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--text-strong);
	background: #fff;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 11px 13px;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.sc-form textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.sc-form select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
		linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 38px;
	cursor: pointer;
}
.sc-form :is(input, textarea, select):hover { border-color: var(--text-muted); }
.sc-form :is(input, textarea, select):focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }

.sc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-body); font-weight: 400; }
.sc-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--color-accent); flex: 0 0 auto; }
.sc-radios { display: flex; gap: var(--space-5); grid-column: 1 / -1; flex-wrap: wrap; }
.sc-radios label { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; }
.sc-radios input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.sc-form-submit { grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.sc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sc-notice {
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	border: 1px solid var(--sc-green-500);
	background: rgba(31, 122, 77, .08);
	color: var(--sc-green-500);
	font-size: 14px;
	margin-bottom: var(--space-4);
}
.sc-notice--error { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent-press); }

/* ==========================================================================
   Contact aside
   ========================================================================== */
.sc-contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: start; }
.sc-contact-card { background: var(--surface-dark); color: #fff; border-radius: var(--radius-md); padding: var(--space-6); }
.sc-contact-card .sc-eyebrow { color: #fff; opacity: .6; }
.sc-contact-card ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sc-contact-card li { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.sc-contact-card a { color: #fff; text-decoration: none; }
.sc-contact-card a:hover { color: #fff; text-decoration: underline; }
.sc-contact-card .sc-icon { width: 18px; height: 18px; color: var(--color-accent); }

/* The flex layout sets its own gap with higher specificity than a bare
   class, so match it. */
.wp-block-group.sc-figures { display: flex; gap: var(--space-6); }
.sc-figures > div > b {
	display: block;
	font-family: var(--font-serif-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--text-strong);
}
.sc-figures > div > span { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* ==========================================================================
   CTA band and footer
   ========================================================================== */
.sc-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	background: var(--surface-dark);
	border-radius: var(--radius-md);
	padding: var(--space-7);
}
.sc-cta :is(h2, h3) { color: #fff; margin: 0; }
.sc-cta p { margin: var(--space-2) 0 0; color: var(--text-on-dark-muted); max-width: 52ch; }
.sc-cta .sc-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.sc-site-footer { background: var(--surface-dark); color: var(--text-on-dark-muted); padding: var(--space-8) 0 var(--space-5); }
.sc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.sc-site-footer img { height: 56px; width: auto; }
.sc-site-footer .sc-eyebrow { color: #fff; opacity: .6; }
.sc-site-footer p { font-size: 14px; }
/* The link columns stack; the social-links block must stay a row, so scope
   this to lists that are not the social block. */
.sc-site-footer ul:not(.wp-block-social-links) {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.sc-site-footer :is(a, li) { color: var(--text-on-dark-muted); font-size: 14px; text-decoration: none; }
.sc-site-footer a:hover { color: #fff; }

.sc-footer-bottom {
	border-top: 1px solid var(--border-dark);
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.sc-footer-bottom p { margin: 0; font-size: 12px; }
.sc-socials { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.sc-socials a {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.sc-socials a:hover { background: rgba(255, 255, 255, .16); }
.sc-socials .sc-icon { width: 16px; height: 16px; }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.sc-breadcrumbs { padding-block: var(--space-4); font-size: 13px; color: var(--text-muted); }
.sc-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-breadcrumbs li::after { content: "/"; margin-left: 6px; color: var(--text-faint); }
.sc-breadcrumbs li:last-child::after { content: ""; }
.sc-breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.sc-breadcrumbs a:hover { color: var(--color-accent); }

/* ==========================================================================
   Page and post scaffolding
   ========================================================================== */
.sc-page-header { padding-block: var(--space-8) var(--space-6); }
.sc-page-header > * { margin: 0; }
.sc-page-header .sc-lead { margin-top: var(--space-4); }
.sc-entry-content > * { margin-block: var(--space-5); }
.sc-entry-content > :first-child { margin-top: 0; }

/* ==========================================================================
   Responsive — the three breakpoints the design was drawn at
   ========================================================================== */
@media (max-width: 1000px) {
	.sc-hero-grid,
	.sc-contact-grid,
	.sc-grid-3,
	.sc-footer-grid,
	.sc-split { grid-template-columns: 1fr; }
	.sc-grid-4,
	.sc-gallery .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
	.sc-header-inner { min-height: 76px; }
	.sc-site-header .wp-block-site-logo img { height: 52px; }
	.sc-hero-grid { padding-block: var(--space-8); }
}

@media (max-width: 640px) {
	.sc-form, .sc-grid-2 { grid-template-columns: 1fr; }
	.sc-header-tel { display: none; }
	.sc-section { padding-block: var(--space-8); }
	.sc-cta { padding: var(--space-6); }
}

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

/* ==========================================================================
   Mobile navigation.
   The original export hid the nav entirely below 1000px, which left phones
   with no way to reach anything. The block navigation's overlay replaces it.
   ========================================================================== */
.sc-header-nav .wp-block-navigation__responsive-container-open,
.sc-header-nav .wp-block-navigation__responsive-container-close { color: var(--text-strong); }

/* While the menu is open the header has to clear the whole page, not just the
   z-index: 40 it needs for sticky scrolling. */
.sc-site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { z-index: 100000; }

/* Core paints the overlay itself, from selectors carrying more classes than a
   theme rule normally has — `.wp-block-navigation:not(.has-background)
   .wp-block-navigation__responsive-container.is-menu-open:not(
   .disable-default-overlay)` is five classes to our three — so the dark panel
   and its padding only land with !important behind them. Without it the menu
   is core's white sheet with our white text on it: legible as nothing. */
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--surface-dark) !important;
	padding: var(--space-6) var(--space-5) !important;
}

/* The desktop nav is justified right, and core reuses that same setting to
   align the overlay — which left the links ranged right against the edge of a
   full-screen panel, while the rest of the design reads from the left margin.
   Core copies the nav's own classes onto the inner <ul> as well, so
   `.items-justified-right` redeclares the variable there and the list has to
   be named too: an inherited value loses to a declaration on the element. */
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open,
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
}
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; font-size: 18px; }
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--color-accent); }
.sc-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }

@media (max-width: 1000px) {
	.sc-header-nav .wp-block-navigation__container { gap: var(--space-4); }
}

/* ==========================================================================
   Reading column alignment.
   The design left-aligns text within the 1200px container rather than
   centring it, so the H1, the breadcrumbs and the body copy all share one
   left edge. WordPress centres constrained children by default, which would
   leave the body indented from its own heading.
   Core centres them with `margin-inline: auto !important`, so overriding it
   needs !important in return.
   ========================================================================== */
.sc-entry-content > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* ==========================================================================
   Contact card, figures and footer, adjusted for the block markup.
   ========================================================================== */
.sc-contact-card > .sc-eyebrow { margin-bottom: var(--space-4); }
.sc-contact-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.sc-contact-row p { margin: 0; font-size: 14px; }
.sc-contact-card .sc-icon-wrap { color: var(--color-accent); line-height: 0; }

.sc-figures > .wp-block-group { flex: 0 0 auto; }
.sc-figure-value {
	margin: 0;
	font-family: var(--font-serif-display);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--text-strong);
}
.sc-figure-label {
	margin: 0;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sc-site-footer .sc-socials { margin-top: var(--space-4); gap: var(--space-2); }
.sc-site-footer .sc-socials .wp-social-link {
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, .06);
}
.sc-site-footer .sc-socials .wp-social-link:hover { background: rgba(255, 255, 255, .16); transform: none; }
.sc-footer-logo { margin: 0; }
.sc-footer-logo img { height: auto; }

/* The icon block: a wrapper span so spacing and colour controls have a target. */
.sc-icon-wrap { display: inline-flex; flex: 0 0 auto; line-height: 0; }

/* ==========================================================================
   Partners
   ========================================================================== */
.sc-partners { border-top: 1px solid var(--border-hairline); }
.sc-partners-intro {
	font-size: 15px;
	color: var(--text-muted);
	max-width: 52ch;
	margin-inline: auto;
}
.sc-partner-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-5);
	align-items: center;
	margin-top: var(--space-6);
}
.sc-partner-row > * { margin: 0; }
/* Logos arrive in every colour and weight; muting them keeps the row calm and
   stops one loud logo dominating the others. */
.sc-partner-row img {
	max-height: 44px;
	width: auto;
	margin-inline: auto;
	filter: grayscale(1);
	opacity: .55;
	transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.sc-partner-row a:hover img,
.sc-partner-row img:hover { filter: grayscale(0); opacity: 1; }
.sc-partner-row .sc-image-slot { aspect-ratio: 5/2; }

@media (max-width: 1000px) {
	.sc-partner-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.sc-partner-row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Editor only: unset image slots.
   WordPress draws its own Upload / Media Library placeholder inside an Image
   block with no image. Our decorative slot styling sits behind it and, on the
   dark hero slot, rendered those buttons dark-on-dark. Drop the decoration in
   the editor and let the placeholder do its job; the front end still gets the
   styled slot from inc/filters.php.
   ========================================================================== */
.editor-styles-wrapper .sc-ph:has(.components-placeholder) {
	background: none;
	border: 0;
	padding: 0;
}
/* Fallback where :has() is unavailable — keep the controls legible whatever is
   painted behind them. */
.editor-styles-wrapper .sc-ph .components-placeholder {
	background: rgba(255, 255, 255, .94);
	color: var(--sc-ink-900);
	border-radius: var(--radius-xs);
}
.editor-styles-wrapper .sc-ph .components-placeholder__label,
.editor-styles-wrapper .sc-ph .components-placeholder__instructions {
	color: var(--sc-ink-900);
}