/*
Theme Name: Sam4Tech
Theme URI: https://sam4tech.local/
Author: Sam4Tech
Author URI: https://sam4tech.local/
Description: A clean, modern theme for technology and AI agencies. Warm cream canvas, vivid orange accents, deep navy typography, soft rounded cards, a sticky three-zone global header and a structured five-column global footer. Vanilla CSS only — no frameworks, no icon libraries.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sam4tech
Tags: one-column, custom-logo, custom-menu, featured-images, sticky-post, translation-ready, blog, portfolio
*/

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
    1. Design tokens
    2. Reset & base
    3. Typography
    4. Layout primitives
    5. Accessibility helpers
    6. Buttons & inline links
    7. Eyebrow badge
    8. GLOBAL HEADER
       8.1  Shell & sticky behaviour
       8.2  Zone 1 — branding (left)
       8.3  Zone 2 — primary navigation (center)
       8.4  Dropdown menus (desktop)
       8.5  Zone 3 — call button & toggle (right)
       8.6  Desktop zone balancing
       8.7  Mobile panel & collapsible sections
    9. Page & archive headers
   10. Cards & grid
   11. Entry meta & post content
   12. Pagination
   13. Search form & empty states
   14. Call-to-action panel
   15. GLOBAL FOOTER
       15.1 Shell & grid
       15.2 Top — brand, tagline, socials
       15.3 Middle — link columns
       15.4 Contact column
       15.5 Bottom bar
   16. WordPress core classes
   17. Responsive breakpoints
   18. Motion preferences
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   Single source of truth. Change a value here and it propagates everywhere.
   ========================================================================== */

:root {
	/* --- Palette --------------------------------------------------------- */
	--s4t-cream: #fdf7ef;
	--s4t-cream-deep: #fbf1e5;
	--s4t-white: #ffffff;
	--s4t-ink: #101e3c;
	--s4t-ink-deep: #0c1830;
	--s4t-ink-footer: #111c34;
	--s4t-body: #5b6b84;
	--s4t-muted: #8a97ac;
	/* Brand green. Everything that used to be orange derives from these. */
	--s4t-brand: #2bb273;
	--s4t-brand-strong: #1e8f5b;
	--s4t-brand-soft: #e2f5ea;
	/* Lighter and paler steps of the primary, used in gradients and tiles. */
	--s4t-brand-light: #4ec98f;
	--s4t-brand-pale: #a8e2c5;
	--s4t-brand-tint: #eefaf3;
	/* Channel lists so rgba() can borrow the primary without hardcoding it. */
	--s4t-brand-rgb: 43, 178, 115;
	--s4t-brand-strong-rgb: 30, 143, 91;
	--s4t-border: #f0e5d7;
	--s4t-border-strong: #e4d6c4;
	/* Secondary accent: a cooler green, so gradient hairlines still shift. */
	--s4t-accent: #12a594;
	--s4t-accent-soft: #ddf2ef;
	--s4t-accent-strong: #0e8377;

	/* Footer-specific text tints, kept as tokens so the footer stays tunable. */
	--s4t-footer-text: rgba(255, 255, 255, 0.62);
	--s4t-footer-text-strong: #ffffff;
	--s4t-footer-line: rgba(255, 255, 255, 0.1);
	--s4t-footer-surface: rgba(255, 255, 255, 0.06);

	/* --- Typography ------------------------------------------------------ */
	--s4t-font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
	--s4t-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--s4t-text-xs: 0.75rem;
	--s4t-text-sm: 0.875rem;
	--s4t-text-base: 1rem;
	--s4t-text-lg: 1.0625rem;
	--s4t-text-xl: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
	--s4t-text-2xl: clamp(1.375rem, 1vw + 1.1rem, 1.625rem);
	--s4t-text-3xl: clamp(1.75rem, 1.6vw + 1.3rem, 2.25rem);
	--s4t-text-4xl: clamp(2.25rem, 3.4vw + 1.4rem, 3.75rem);

	/* --- Spacing scale --------------------------------------------------- */
	--s4t-space-1: 0.25rem;
	--s4t-space-2: 0.5rem;
	--s4t-space-3: 0.75rem;
	--s4t-space-4: 1rem;
	--s4t-space-5: 1.5rem;
	--s4t-space-6: 2rem;
	--s4t-space-7: 2.5rem;
	--s4t-space-8: 3.5rem;
	--s4t-space-9: 5rem;
	--s4t-space-10: 7rem;

	/* --- Layout ---------------------------------------------------------- */
	--s4t-container: 1180px;
	--s4t-container-narrow: 780px;
	--s4t-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--s4t-header-height: 76px;

	/* --- Radii ----------------------------------------------------------- */
	--s4t-radius-sm: 10px;
	--s4t-radius-md: 14px;
	--s4t-radius-lg: 20px;
	--s4t-radius-xl: 28px;
	--s4t-radius-pill: 999px;

	/* --- Elevation ------------------------------------------------------- */
	--s4t-shadow-xs: 0 1px 2px rgba(16, 30, 60, 0.05);
	--s4t-shadow-sm: 0 2px 10px rgba(16, 30, 60, 0.05);
	--s4t-shadow-md: 0 10px 30px -12px rgba(16, 30, 60, 0.16);
	--s4t-shadow-lg: 0 24px 60px -24px rgba(16, 30, 60, 0.24);
	--s4t-shadow-brand: 0 12px 28px -10px rgba(var(--s4t-brand-rgb), 0.55);

	/* --- Motion ---------------------------------------------------------- */
	--s4t-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--s4t-duration-fast: 140ms;
	--s4t-duration: 220ms;
	--s4t-duration-slow: 420ms;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Keeps anchor targets clear of the sticky header. */
	scroll-padding-top: calc(var(--s4t-header-height) + 2rem);
}

body {
	background-color: var(--s4t-cream);
	color: var(--s4t-body);
	font-family: var(--s4t-font-body);
	font-size: var(--s4t-text-lg);
	line-height: 1.7;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	display: flex;
	flex-direction: column;
}

/* Faint engineering grid behind the top of the page, fading out downward. */
body::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 620px;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(16, 30, 60, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 30, 60, 0.05) 1px, transparent 1px);
	background-size: 88px 88px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

img,
svg,
video,
canvas,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--s4t-font-display);
	color: var(--s4t-ink);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--s4t-text-4xl); font-weight: 800; }
h2 { font-size: var(--s4t-text-3xl); }
h3 { font-size: var(--s4t-text-2xl); }
h4 { font-size: var(--s4t-text-xl); }
h5,
h6 { font-size: var(--s4t-text-base); letter-spacing: 0; }

p,
ul,
ol,
dl,
figure,
pre,
table,
blockquote {
	margin-block: 0 var(--s4t-space-5);
}

:where(h1, h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--s4t-space-4);
}

a {
	color: var(--s4t-brand);
	text-decoration-color: rgba(var(--s4t-brand-rgb), 0.35);
	text-underline-offset: 0.22em;
	transition: color var(--s4t-duration) var(--s4t-ease),
		text-decoration-color var(--s4t-duration) var(--s4t-ease);
}

a:hover {
	color: var(--s4t-brand-strong);
	text-decoration-color: currentColor;
}

strong,
b {
	color: var(--s4t-ink);
	font-weight: 600;
}

blockquote {
	border-left: 3px solid var(--s4t-brand);
	padding-left: var(--s4t-space-5);
	color: var(--s4t-ink);
	font-size: var(--s4t-text-xl);
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	background: var(--s4t-cream-deep);
	border: 1px solid var(--s4t-border);
	border-radius: 6px;
	padding: 0.15em 0.45em;
}

pre {
	background: var(--s4t-ink-deep);
	color: #e6ecf5;
	border-radius: var(--s4t-radius-md);
	padding: var(--s4t-space-5);
	overflow-x: auto;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--s4t-border);
	margin-block: var(--s4t-space-7);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	border-bottom: 1px solid var(--s4t-border);
	padding: var(--s4t-space-3) var(--s4t-space-2);
	text-align: left;
}

th {
	color: var(--s4t-ink);
	font-family: var(--s4t-font-display);
	font-weight: 600;
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

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

.s4t-container--narrow {
	max-width: var(--s4t-container-narrow);
}

.site-content {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	padding-block: clamp(3rem, 6vw, var(--s4t-space-9)) var(--s4t-space-9);
}

.s4t-section {
	margin-block-end: var(--s4t-space-9);
}

.s4t-stack > * + * {
	margin-block-start: var(--s4t-space-4);
}

/* ==========================================================================
   5. Accessibility helpers
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: var(--s4t-space-3);
	left: var(--s4t-space-3);
	z-index: 999;
	background: var(--s4t-ink);
	color: var(--s4t-white);
	border-radius: var(--s4t-radius-pill);
	padding: var(--s4t-space-2) var(--s4t-space-5);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--s4t-white);
}

/* One consistent focus ring across the whole theme. */
:focus-visible {
	outline: 2px solid var(--s4t-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The skip link moves focus into <main>, which carries tabindex="-1" so the
   jump lands for keyboard and screen-reader users rather than only scrolling.
   It is a region, not a control, so it does not draw the ring. */
.site-main:focus,
.site-main:focus-visible {
	outline: none;
}

/* ==========================================================================
   6. Buttons & inline links
   ========================================================================== */

.s4t-btn {
	--s4t-btn-bg: var(--s4t-brand);
	--s4t-btn-fg: var(--s4t-white);
	--s4t-btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s4t-space-2);
	background: var(--s4t-btn-bg);
	color: var(--s4t-btn-fg);
	border: 1px solid var(--s4t-btn-border);
	border-radius: var(--s4t-radius-pill);
	padding: 0.75rem 1.5rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		background-color var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease);
}

.s4t-btn .s4t-icon {
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-btn:hover {
	background: var(--s4t-brand-strong);
	color: var(--s4t-white);
	transform: translateY(-2px);
	box-shadow: var(--s4t-shadow-brand);
}

.s4t-btn:hover .s4t-icon {
	transform: translateX(3px);
}

/* Pressed state — the button sits back down. */
.s4t-btn:active {
	transform: translateY(0);
	box-shadow: var(--s4t-shadow-xs);
}

.s4t-btn--ghost {
	--s4t-btn-bg: var(--s4t-white);
	--s4t-btn-fg: var(--s4t-ink);
	--s4t-btn-border: var(--s4t-border-strong);
}

.s4t-btn--ghost:hover {
	background: var(--s4t-white);
	color: var(--s4t-brand);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-md);
}

/* "Learn more →" affordance used inside cards. */
.s4t-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	color: var(--s4t-brand);
	text-decoration: none;
}

.s4t-link-arrow .s4t-icon {
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-link-arrow:hover .s4t-icon {
	transform: translateX(4px);
}

/* ==========================================================================
   7. Eyebrow badge
   ========================================================================== */

.s4t-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-pill);
	padding: 0.375rem 0.9rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--s4t-ink);
	box-shadow: var(--s4t-shadow-xs);
}

.s4t-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--s4t-brand);
	flex: none;
}

/* ==========================================================================
   7b. Marketing section primitives
   Shared by every stacked marketing template (front page, AI Solutions, and
   any future landing page). Page-specific blocks live in their own stylesheet.
   ========================================================================== */

/* Stacked full-bleed sections manage their own vertical rhythm. */
.site-main--sections {
	display: block;
}

body.s4t-flush .site-content {
	padding-block: 0;
}

.s4t-home-section {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, var(--s4t-space-10));
}

/* Slightly cooler band used to separate neighbouring sections. */
.s4t-home-section--tint {
	background: linear-gradient(180deg, #fffdfa 0%, #fdfbf7 100%);
	border-block: 1px solid rgba(240, 229, 215, 0.7);
}

.s4t-section-head {
	max-width: 620px;
	margin-block-end: clamp(2rem, 4vw, var(--s4t-space-8));
}

.s4t-section-head .s4t-eyebrow {
	margin-block-end: var(--s4t-space-4);
}

.s4t-section-head__title {
	margin-block-end: var(--s4t-space-4);
}

.s4t-section-head__text {
	margin: 0;
}

/* A head may carry more than one paragraph; space them apart. */
.s4t-section-head__text + .s4t-section-head__text {
	margin-block-start: var(--s4t-space-4);
}

.s4t-section-head--center {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

/* Heading on the left, "read more" link on the right. */
.s4t-section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s4t-space-4);
	max-width: none;
}

.s4t-section-head--split .s4t-section-head__title {
	margin-block-end: 0;
}

.s4t-section-foot {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(2rem, 4vw, var(--s4t-space-7));
}

.s4t-page-content {
	padding-block: clamp(2.5rem, 5vw, var(--s4t-space-8));
}

/* Orange words inside a headline — see sam4tech_highlight(). */
.s4t-hl {
	color: var(--s4t-brand);
	font-style: normal;
}

@media (max-width: 640px) {
	.s4t-section-head--split {
		align-items: flex-start;
	}
}

/* --- Process steps -------------------------------------------------------
   Numbered step cards, shared by the front page and the Services index. */

.s4t-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s4t-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.s4t-step {
	position: relative;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	overflow: hidden;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-step:hover {
	transform: translateY(-5px);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-step__number {
	display: block;
	font-family: var(--s4t-font-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--s4t-brand-pale);
	margin-block-end: var(--s4t-space-3);
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-step:hover .s4t-step__number {
	color: var(--s4t-brand);
}

.s4t-step__title {
	font-size: var(--s4t-text-base);
	font-weight: 700;
	margin-block-end: var(--s4t-space-2);
}

.s4t-step__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 1100px) {
	.s4t-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.s4t-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Stats bar -----------------------------------------------------------
   Gradient-hairline panel of headline figures. Shared by the front page and
   the About page. */

.s4t-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s4t-space-5);
	background: var(--s4t-white);
	border-radius: var(--s4t-radius-xl);
	padding: clamp(1.75rem, 4vw, var(--s4t-space-7)) clamp(1.5rem, 4vw, var(--s4t-space-8));
	box-shadow: var(--s4t-shadow-md);
}

/* Gradient hairline border, same treatment as the closing CTA panel. */
.s4t-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(100deg, var(--s4t-brand), var(--s4t-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Two-up arrangement, used where the panel sits beside body copy. */
.s4t-stats--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4t-space-6) var(--s4t-space-5);
}

.s4t-stat {
	text-align: center;
}

.s4t-stat__value {
	display: block;
	font-family: var(--s4t-font-display);
	font-size: clamp(1.875rem, 2.4vw + 1rem, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-2);
}

.s4t-stat__label {
	display: block;
	font-size: var(--s4t-text-sm);
	color: var(--s4t-body);
}

@media (max-width: 960px) {
	.s4t-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s4t-space-6) var(--s4t-space-4);
	}
}

@media (max-width: 420px) {
	.s4t-stats,
	.s4t-stats--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Value cards ---------------------------------------------------------
   Small tinted icon tile, title, short paragraph. Shared by the front page
   and the About page. */

.s4t-value {
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-value:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-value__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	margin-block-end: var(--s4t-space-4);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-value:hover .s4t-value__icon {
	transform: translateY(-2px) rotate(-4deg);
}

/* One accent tone per card, matching the reference. */
.s4t-value__icon--brand  { background: var(--s4t-brand-soft); color: var(--s4t-brand); }
.s4t-value__icon--accent { background: var(--s4t-accent-soft); color: var(--s4t-accent-strong); }
.s4t-value__icon--ink    { background: #eaeef5; color: var(--s4t-ink); }
.s4t-value__icon--sky    { background: #e4eefb; color: #2f6fb5; }

.s4t-value__title {
	font-size: var(--s4t-text-base);
	font-weight: 700;
	margin-block-end: var(--s4t-space-2);
}

.s4t-value__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.7;
	margin: 0;
}

/* --- Post cards ----------------------------------------------------------
   Category pill, date, title, excerpt. Shared by the front page and the blog. */

.s4t-post {
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-post:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4t-space-3);
	margin-block-end: var(--s4t-space-4);
	font-size: var(--s4t-text-xs);
	color: var(--s4t-muted);
}

.s4t-post__tag {
	display: inline-block;
	background: var(--s4t-brand-soft);
	border: 1px solid rgba(var(--s4t-brand-rgb), 0.28);
	border-radius: var(--s4t-radius-pill);
	padding: 0.15rem 0.65rem;
	color: var(--s4t-brand);
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-xs);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease);
}

.s4t-post__tag:hover {
	background: var(--s4t-brand);
	color: var(--s4t-white);
}

.s4t-post__title {
	font-size: var(--s4t-text-base);
	font-weight: 700;
	line-height: 1.35;
	margin-block-end: var(--s4t-space-3);
}

.s4t-post__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-post:hover .s4t-post__title a {
	color: var(--s4t-brand);
}

.s4t-post__excerpt {
	font-size: var(--s4t-text-sm);
	line-height: 1.7;
	margin: 0;
}

/* ==========================================================================
   8. GLOBAL HEADER
   Three zones inside one floating white bar:
   [ left: brand ] [ center: primary nav ] [ right: call button + toggle ]
   ========================================================================== */

/* --- 8.1 Shell & sticky behaviour ---------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-block: var(--s4t-space-3);
	padding-inline: var(--s4t-gutter);
	transition: padding var(--s4t-duration) var(--s4t-ease);
}

.site-header__bar {
	position: relative;
	max-width: var(--s4t-container);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4t-space-4);
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-md);
	padding: 0.75rem 0.75rem 0.75rem 1.5rem;
	min-height: var(--s4t-header-height);
	box-shadow: var(--s4t-shadow-sm);
	transition: box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

/* Added by JS once the page scrolls — the bar lifts off the canvas. */
.site-header.is-stuck .site-header__bar {
	box-shadow: var(--s4t-shadow-md);
	border-color: var(--s4t-border-strong);
}

/* --- 8.2 Zone 1 — branding (left) ---------------------------------------- */

.site-header__left {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-3);
	min-width: 0;
}

.site-branding .custom-logo-link {
	display: block;
	line-height: 0;
	transition: opacity var(--s4t-duration) var(--s4t-ease);
}

.site-branding .custom-logo-link:hover {
	opacity: 0.85;
}

.site-branding .custom-logo {
	max-height: 40px;
	width: auto;
}

.site-title {
	font-family: var(--s4t-font-display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin: 0;
}

.site-title a {
	color: var(--s4t-ink);
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.site-title a:hover {
	color: var(--s4t-brand);
}

/* Tagline is available to screen readers but not shown in the bar. */
.site-header .site-description {
	display: none;
}

/* --- 8.3 Zone 2 — primary navigation (center) ---------------------------- */

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav li {
	position: relative;
}

.primary-nav a {
	position: relative;
	display: block;
	padding: 0.5rem 0.85rem;
	border-radius: var(--s4t-radius-sm);
	color: var(--s4t-ink);
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease),
		background-color var(--s4t-duration) var(--s4t-ease);
}

/* Underline slides open from the centre on hover, focus and current page. */
.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.3rem;
	height: 2px;
	border-radius: 2px;
	background: var(--s4t-brand);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
	color: var(--s4t-brand);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav .current-menu-item > a::after,
.primary-nav .current-menu-ancestor > a::after,
.primary-nav .current_page_item > a::after,
.primary-nav .current_page_parent > a::after {
	transform: scaleX(1);
}

/* Active page state. */
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_item > a,
.primary-nav .current_page_parent > a {
	color: var(--s4t-brand);
	font-weight: 600;
}

/* --- 8.4 Dropdown menus (desktop) ---------------------------------------- */

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 0.65rem);
	left: 0;
	z-index: 20;
	display: block;
	min-width: 220px;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-md);
	padding: 0.4rem;
	box-shadow: var(--s4t-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--s4t-duration) var(--s4t-ease),
		transform var(--s4t-duration) var(--s4t-ease),
		visibility var(--s4t-duration) var(--s4t-ease);
}

/* Third level opens to the side. */
.primary-nav .sub-menu .sub-menu {
	top: -0.4rem;
	left: calc(100% + 0.4rem);
}

/* Opens on pointer hover AND on keyboard focus. */
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	padding: 0.55rem 0.75rem;
	border-radius: var(--s4t-radius-sm);
}

.primary-nav .sub-menu a::after {
	display: none;
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible {
	background: var(--s4t-brand-soft);
}

/* Chevron on parent items. */
.primary-nav .menu-item-has-children > a {
	padding-right: 1.5rem;
}

.primary-nav .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 0.7rem;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		opacity var(--s4t-duration) var(--s4t-ease);
}

.primary-nav li:hover > a::before,
.primary-nav li:focus-within > a::before {
	transform: rotate(45deg) translate(2px, 2px);
	opacity: 1;
}

/* --- 8.5 Zone 3 — call button & toggle (right) --------------------------- */

.site-header__right {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-2);
	flex: none;
}

.header-cta ul {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hamburger / close toggle. Hidden on desktop, shown from 900px down. */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-sm);
	color: var(--s4t-ink);
	transition: background-color var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease);
}

.menu-toggle:hover {
	color: var(--s4t-brand);
	border-color: var(--s4t-brand);
	background: var(--s4t-brand-soft);
}

/* Swap the icon based on the ARIA state — no extra classes needed. */
.menu-toggle__icon--close,
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: block;
}

.menu-toggle[aria-expanded="true"] {
	color: var(--s4t-brand);
	border-color: var(--s4t-brand);
	background: var(--s4t-brand-soft);
}

/* Submenu expand/collapse button — injected by JS, mobile only. */
.submenu-toggle {
	display: none;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	background: transparent;
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-sm);
	color: var(--s4t-ink);
	transition: background-color var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease);
}

.submenu-toggle:hover {
	background: var(--s4t-brand-soft);
	border-color: var(--s4t-brand);
	color: var(--s4t-brand);
}

.submenu-toggle .s4t-icon {
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.submenu-toggle[aria-expanded="true"] {
	color: var(--s4t-brand);
	border-color: var(--s4t-brand);
}

.submenu-toggle[aria-expanded="true"] .s4t-icon {
	transform: rotate(180deg);
}

/* --- 8.6 Desktop zone balancing ------------------------------------------ */
/* Left and right flex equally so the centre nav is optically centred
   regardless of how wide the logo or the call button happen to be. */

@media (min-width: 901px) {
	.site-header__left {
		flex: 1 1 0;
	}

	.site-header__center {
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.site-header__right {
		flex: 1 1 0;
		justify-content: flex-end;
	}
}

/* --- 8.7 Mobile panel & collapsible sections ----------------------------- */

@media (max-width: 900px) {
	.menu-toggle {
		display: inline-flex;
	}

	/* The centre zone becomes a dropdown panel anchored under the bar. */
	.site-header__center {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + var(--s4t-space-2));
		z-index: 90;
		background: var(--s4t-white);
		border: 1px solid var(--s4t-border);
		border-radius: var(--s4t-radius-md);
		box-shadow: var(--s4t-shadow-lg);
		padding: var(--s4t-space-3);
		max-height: calc(100vh - var(--s4t-header-height) - 3rem);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity var(--s4t-duration) var(--s4t-ease),
			transform var(--s4t-duration) var(--s4t-ease),
			visibility var(--s4t-duration) var(--s4t-ease);
	}

	.site-header__center.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Stack menu items vertically. */
	.primary-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
	}

	.primary-nav a {
		padding: 0.7rem 0.85rem;
	}

	.primary-nav a::after {
		left: 0.85rem;
		right: auto;
		bottom: 0.45rem;
		width: 18px;
	}

	/* Parent row: label on the left, expand button on the right. */
	.primary-nav .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: var(--s4t-space-2);
	}

	.primary-nav .menu-item-has-children > a {
		grid-column: 1;
		padding-right: 0.85rem;
	}

	.primary-nav .menu-item-has-children > a::before {
		display: none;
	}

	.submenu-toggle {
		display: grid;
		grid-column: 2;
	}

	/* Collapsed submenu — animates open via max-height. */
	.primary-nav .sub-menu {
		grid-column: 1 / -1;
		position: static;
		display: block;
		min-width: 0;
		opacity: 0;
		visibility: visible;
		transform: none;
		border: 0;
		border-left: 1px solid var(--s4t-border);
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 var(--s4t-space-3);
		margin-left: 0.85rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--s4t-duration-slow) var(--s4t-ease),
			opacity var(--s4t-duration) var(--s4t-ease);
	}

	.primary-nav .menu-item-has-children.is-open > .sub-menu {
		max-height: 70vh;
		opacity: 1;
		padding-block: var(--s4t-space-2);
	}

	/* Hover-open is disabled on touch: the button is the only control. */
	.primary-nav li:hover > .sub-menu,
	.primary-nav li:focus-within > .sub-menu {
		opacity: 0;
		max-height: 0;
	}

	.primary-nav .menu-item-has-children.is-open:hover > .sub-menu,
	.primary-nav .menu-item-has-children.is-open:focus-within > .sub-menu {
		opacity: 1;
		max-height: 70vh;
	}
}

/* Small screens: the call button gives up space, never the brand.
   The right zone is flex:none by default, so on a narrow phone a long button
   label pushed the bar wider than the branding and the two overlapped. Below
   600px the branding is fixed and the button shrinks and wraps instead. */
@media (max-width: 600px) {
	.site-header__left {
		flex: none;
	}

	.site-header__right {
		flex: 0 1 auto;
		min-width: 0;
	}

	.header-cta {
		min-width: 0;
	}

	.header-cta .s4t-btn {
		white-space: normal;
		text-align: center;
		font-size: var(--s4t-text-xs);
		line-height: 1.25;
		padding-block: 0.6rem;
		padding-inline: 0.9rem;
	}
}

/* Very small screens: drop the button's arrow so the label keeps the room. */
@media (max-width: 480px) {
	.header-cta .s4t-btn .s4t-icon {
		display: none;
	}
}

/* ==========================================================================
   9. Page & archive headers
   ========================================================================== */

.page-header {
	text-align: center;
	max-width: 820px;
	margin-inline: auto;
	margin-block-end: var(--s4t-space-8);
}

.page-header .s4t-eyebrow {
	margin-block-end: var(--s4t-space-4);
}

.page-header__title {
	margin-block-end: var(--s4t-space-4);
}

.page-header__description {
	max-width: 620px;
	margin-inline: auto;
	font-size: var(--s4t-text-lg);
}

.page-header__thumbnail {
	margin-block-start: var(--s4t-space-6);
	border-radius: var(--s4t-radius-lg);
	overflow: hidden;
	box-shadow: var(--s4t-shadow-md);
}

.page-header__thumbnail img {
	width: 100%;
}

/* ==========================================================================
   10. Cards & grid
   ========================================================================== */

.s4t-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--s4t-space-5);
}

.s4t-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-6);
	box-shadow: var(--s4t-shadow-xs);
	overflow: hidden;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-card:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-card__media {
	display: block;
	margin: calc(var(--s4t-space-6) * -1) calc(var(--s4t-space-6) * -1) var(--s4t-space-5);
	overflow: hidden;
}

.s4t-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--s4t-duration-slow) var(--s4t-ease);
}

.s4t-card:hover .s4t-card__media img {
	transform: scale(1.04);
}

.s4t-card__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	flex: none;
	background: var(--s4t-brand-soft);
	border-radius: var(--s4t-radius-md);
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-4);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-card:hover .s4t-card__icon {
	transform: translateY(-2px) rotate(-3deg);
}

.s4t-card__title {
	font-size: var(--s4t-text-xl);
	margin-block-end: var(--s4t-space-2);
}

.s4t-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-card:hover .s4t-card__title a {
	color: var(--s4t-brand);
}

.s4t-card__excerpt {
	font-size: var(--s4t-text-base);
	margin-block-end: var(--s4t-space-4);
}

.s4t-card__footer {
	margin-block-start: auto;
}

/* ==========================================================================
   11. Entry meta & post content
   ========================================================================== */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4t-space-2) var(--s4t-space-4);
	font-size: var(--s4t-text-sm);
	color: var(--s4t-muted);
	margin-block-end: var(--s4t-space-4);
}

.entry-meta a {
	color: inherit;
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--s4t-brand);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.entry-content > * {
	margin-block-end: var(--s4t-space-5);
}

.entry-content > :last-child {
	margin-block-end: 0;
}

.entry-content :where(img, .wp-block-image, .wp-block-embed) {
	border-radius: var(--s4t-radius-md);
	overflow: hidden;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li + li {
	margin-block-start: var(--s4t-space-2);
}

.entry-footer {
	margin-block-start: var(--s4t-space-7);
	padding-block-start: var(--s4t-space-5);
	border-top: 1px solid var(--s4t-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4t-space-4);
	justify-content: space-between;
	align-items: center;
	font-size: var(--s4t-text-sm);
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4t-space-2);
}

.entry-tags a {
	display: inline-block;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-pill);
	padding: 0.2rem 0.75rem;
	color: var(--s4t-body);
	font-size: var(--s4t-text-xs);
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		background-color var(--s4t-duration) var(--s4t-ease);
}

.entry-tags a:hover {
	color: var(--s4t-brand);
	border-color: var(--s4t-brand);
	background: var(--s4t-brand-soft);
}

.entry--single {
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-xl);
	padding: clamp(1.75rem, 4vw, 3.5rem);
	box-shadow: var(--s4t-shadow-sm);
}

.post-navigation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--s4t-space-4);
	margin-block-start: var(--s4t-space-7);
}

.post-navigation a {
	display: block;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-md);
	padding: var(--s4t-space-4) var(--s4t-space-5);
	color: var(--s4t-ink);
	font-family: var(--s4t-font-display);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.post-navigation a:hover {
	border-color: var(--s4t-brand);
	color: var(--s4t-brand);
	transform: translateY(-2px);
	box-shadow: var(--s4t-shadow-md);
}

.post-navigation .nav-subtitle {
	display: block;
	font-family: var(--s4t-font-body);
	font-size: var(--s4t-text-xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--s4t-muted);
	margin-block-end: 0.25rem;
}

/* ==========================================================================
   12. Pagination
   ========================================================================== */

.s4t-pagination {
	margin-block-start: var(--s4t-space-8);
}

.s4t-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s4t-space-2);
}

.s4t-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-sm);
	color: var(--s4t-ink);
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-pagination .page-numbers:hover {
	border-color: var(--s4t-brand);
	color: var(--s4t-brand);
	transform: translateY(-2px);
	box-shadow: var(--s4t-shadow-md);
}

.s4t-pagination .page-numbers.current {
	background: var(--s4t-brand);
	border-color: var(--s4t-brand);
	color: var(--s4t-white);
	box-shadow: var(--s4t-shadow-brand);
}

.s4t-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

/* ==========================================================================
   13. Search form & empty states
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--s4t-space-2);
	max-width: 460px;
}

.search-form label {
	flex: 1;
}

.search-field {
	width: 100%;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-pill);
	padding: 0.7rem 1.25rem;
	font-size: var(--s4t-text-base);
	color: var(--s4t-ink);
	transition: border-color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.search-field::placeholder {
	color: var(--s4t-muted);
}

.search-field:focus {
	outline: none;
	border-color: var(--s4t-brand);
	box-shadow: 0 0 0 4px rgba(var(--s4t-brand-rgb), 0.14);
}

.search-submit {
	border: 0;
	background: var(--s4t-brand);
	color: var(--s4t-white);
	border-radius: var(--s4t-radius-pill);
	padding-inline: 1.35rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	transition: background-color var(--s4t-duration) var(--s4t-ease),
		transform var(--s4t-duration) var(--s4t-ease);
}

.search-submit:hover {
	background: var(--s4t-brand-strong);
	transform: translateY(-1px);
}

.s4t-empty {
	text-align: center;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-xl);
	padding: clamp(2rem, 5vw, 4rem);
	box-shadow: var(--s4t-shadow-sm);
}

.s4t-empty .search-form {
	margin-inline: auto;
	margin-block-start: var(--s4t-space-5);
}

/* ==========================================================================
   14. Call-to-action panel
   ========================================================================== */

.s4t-cta {
	position: relative;
	text-align: center;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-xl);
	padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
	box-shadow: var(--s4t-shadow-md);
	overflow: hidden;
}

/* Orange-to-teal gradient hairline around the panel, as in the reference. */
.s4t-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(100deg, var(--s4t-brand), var(--s4t-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.s4t-cta__title {
	margin-block-end: var(--s4t-space-3);
}

.s4t-cta__text {
	max-width: 560px;
	margin-inline: auto;
	margin-block-end: var(--s4t-space-6);
}

.s4t-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s4t-space-3);
}

/* ==========================================================================
   15. GLOBAL FOOTER
   [ brand + tagline + socials ] [ Main Pages ] [ Useful Links ]
   [ Legal ] [ Contact ]  →  then the bottom bar.
   ========================================================================== */

/* --- 15.1 Shell & grid ---------------------------------------------------- */

.site-footer {
	position: relative;
	z-index: 1;
	background: var(--s4t-ink-footer);
	color: var(--s4t-footer-text);
	font-size: var(--s4t-text-base);
	padding-block: var(--s4t-space-9) var(--s4t-space-6);
	margin-block-start: auto;
}

/* Subtle depth wash so the footer does not read as a flat block. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 100% at 0% 0%, rgba(var(--s4t-brand-rgb), 0.07), transparent 55%);
}

.site-footer > * {
	position: relative;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
	gap: var(--s4t-space-8) var(--s4t-space-6);
	align-items: start;
}

/* --- 15.2 Top — brand, tagline, socials ---------------------------------- */

.site-footer__brand .site-title a,
.site-footer__brand .site-title {
	color: var(--s4t-footer-text-strong);
}

.site-footer__brand .site-title a:hover {
	color: var(--s4t-brand);
}

.site-footer__brand .custom-logo {
	max-height: 38px;
	width: auto;
}

.site-footer__tagline {
	color: var(--s4t-brand);
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	margin-block: var(--s4t-space-4) var(--s4t-space-3);
}

.site-footer__description {
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
	max-width: 34ch;
	margin-block-end: var(--s4t-space-5);
}

/* Social icon tiles. */
.social-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--s4t-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-nav a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--s4t-radius-sm);
	background: var(--s4t-footer-surface);
	border: 1px solid var(--s4t-footer-line);
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: transform var(--s4t-duration) var(--s4t-ease),
		background-color var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.social-nav a:hover,
.social-nav a:focus-visible {
	background: var(--s4t-brand);
	border-color: var(--s4t-brand);
	color: var(--s4t-white);
	transform: translateY(-3px);
	box-shadow: var(--s4t-shadow-brand);
}

/* --- 15.3 Middle — link columns ------------------------------------------ */

.footer-column__title {
	color: var(--s4t-footer-text-strong);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	letter-spacing: 0;
	margin-block-end: var(--s4t-space-4);
}

.site-footer nav ul,
.footer-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.site-footer nav a,
.footer-column a {
	position: relative;
	display: inline-block;
	color: var(--s4t-footer-text);
	font-size: var(--s4t-text-sm);
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease),
		transform var(--s4t-duration) var(--s4t-ease);
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible,
.footer-column a:hover,
.footer-column a:focus-visible {
	color: var(--s4t-footer-text-strong);
	transform: translateX(3px);
}

.site-footer nav .current-menu-item > a {
	color: var(--s4t-footer-text-strong);
}

/* --- 15.4 Contact column -------------------------------------------------- */

.footer-contact ul {
	gap: var(--s4t-space-4);
}

.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: var(--s4t-space-3);
	font-size: var(--s4t-text-sm);
	line-height: 1.6;
}

.footer-contact .s4t-icon {
	flex: none;
	margin-top: 0.15rem;
	color: var(--s4t-brand);
}

.footer-contact a {
	transform: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
	transform: none;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.footer-contact address {
	font-style: normal;
}

/* --- 15.5 Bottom bar ------------------------------------------------------ */

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4t-space-3) var(--s4t-space-5);
	justify-content: space-between;
	align-items: center;
	margin-block-start: var(--s4t-space-8);
	padding-block-start: var(--s4t-space-5);
	border-top: 1px solid var(--s4t-footer-line);
	font-size: var(--s4t-text-sm);
	color: rgba(255, 255, 255, 0.5);
}

.site-footer__bottom p {
	margin: 0;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s4t-space-2) var(--s4t-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--s4t-text-sm);
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
	color: var(--s4t-footer-text-strong);
}

/* ==========================================================================
   16. WordPress core classes
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0.35rem var(--s4t-space-5) var(--s4t-space-4) 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 var(--s4t-space-4) var(--s4t-space-5);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	width: min(100vw - (var(--s4t-gutter) * 2), 1180px);
	margin-inline: calc(50% - min(100vw - (var(--s4t-gutter) * 2), 1180px) / 2);
	max-width: none;
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: none;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	font-size: var(--s4t-text-sm);
	color: var(--s4t-muted);
	text-align: center;
	margin-block-start: var(--s4t-space-2);
}

.sticky .s4t-card {
	border-color: var(--s4t-brand);
}

.post-password-form input[type="password"] {
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-pill);
	padding: 0.6rem 1.1rem;
}

/* ==========================================================================
   17. Responsive breakpoints
   Header breakpoints live in section 8.6 / 8.7 next to the header rules.
   ========================================================================== */

/* Laptop — brand spans the row, four content columns underneath. */
@media (max-width: 1100px) {
	.site-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s4t-space-7) var(--s4t-space-5);
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}

	.site-footer__description {
		max-width: 52ch;
	}
}

/* Tablet — two columns. */
@media (max-width: 860px) {
	.site-footer {
		padding-block: var(--s4t-space-8) var(--s4t-space-6);
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile. */
@media (max-width: 600px) {
	body {
		font-size: var(--s4t-text-base);
	}

	.site-header__bar {
		padding-left: var(--s4t-space-4);
	}

	.site-title {
		font-size: 1.3rem;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--s4t-space-6);
	}

	.site-footer__bottom {
		justify-content: flex-start;
		gap: var(--s4t-space-3);
	}
}

/* ==========================================================================
   18. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}