/* ==========================================================================
   WP Mojster — Global styles
   Reset, base typography, layout helpers, header/navigation and footer.
   Page sections live in the page-scoped sheets (home.css, service.css).
   Breakpoints: 640 / 768 / 1024 only (tokens.css rule).
   ========================================================================== */

/* ---- Reset & base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: var(--font-family);
	color: var(--color-text);
	background: var(--color-paper);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	color: var(--color-ink);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
}

ul[class], ol[class] { list-style: none; }

.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }

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

/* Body scroll lock while the mobile panel is open (nav.js toggles it) */
body.nav-open { overflow: hidden; }

/* ---- Skip link — visually hidden, first in tab order, appears on focus ---- */
.skip-link {
	position: absolute;
	top: 13px; left: 12px;
	z-index: 100;
	background: var(--color-paper);
	color: var(--color-primary-strong);
	font-size: var(--text-sm);
	font-weight: 600;
	padding: 10px 14px; /* 1px over the 9px design value: clears 44px with the border */
	border-radius: var(--radius-btn);
	border: 1.5px solid var(--color-primary);
	box-shadow: 0 2px 8px rgba(20, 37, 44, 0.15);
	text-decoration: none;
	transform: translateY(-200%);
}
.skip-link:focus {
	transform: none;
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   Header — sticky, paper, 64px mobile / 72px desktop, no shrink animation
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
}
.site-header .hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px; /* minimum brand↔cluster gap; only binds at ~320px */
	height: 64px;
}

/* Brand — pure text wordmark, no logo image */
/* min-height carries the 44px target. In the header the row is a fixed
   64/72px centred flex line, so the mark does not move; the footer variant
   compensates for the extra 6px below. */
.brand { display: flex; align-items: center; min-height: 44px; gap: var(--space-2); text-decoration: none; }
.brand .mark {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--color-primary);
	color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
	display: flex; align-items: center; justify-content: center;
}
.brand .word { font-size: 17px; font-weight: 700; letter-spacing: var(--tracking-heading); color: var(--color-ink); }
.brand:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; }

/* Right cluster: phone (desktop only) + CTA + burger (mobile only) */
.site-header .right { display: flex; align-items: center; gap: 10px; }
.site-header .phone {
	display: none;
	font-size: 15px; font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.site-header .phone:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.site-header .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* Very narrow screens: icon-only brand (the link keeps its aria-label name)
   so the CTA stays on one line. Deliberate header-only exception to the
   breakpoint set; 374px is the measured safe cutoff. */
@media (max-width: 374px) {
	.brand .word { display: none; }
	.brand .mark { width: 36px; height: 36px; font-size: 14px; }
	.site-header .btn { white-space: nowrap; }
}

/* Burger — real button with accessible name, mobile only */
.burger {
	flex: none; /* never shrink below the 48px touch target */
	width: 48px; height: 48px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	background: var(--color-paper);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	cursor: pointer;
}
.burger i { display: block; width: 18px; height: 2px; background: var(--color-ink); border-radius: 1px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
/* nth-of-type, not nth-child: the sr-only label span is the first child */
.burger[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-of-type(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-of-type(3) { transform: translateY(-7px) rotate(-45deg); }
.burger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---- Navigation: one markup, two shapes ----
   Mobile (<1024px): full-width panel below the header, plain vertical list,
   services expanded flat under a section label, contact bar at the bottom.
   Desktop (≥1024px): inline links + click-toggled Services dropdown. */

.site-nav {
	display: none;
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-border);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}
.site-nav.is-open { display: block; }

.site-nav .menu > li > a,
.site-nav .sub-menu a {
	display: flex; align-items: center; gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	font-size: var(--text-base); font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--color-surface);
}
.site-nav a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* Scanning hierarchy: standalone pages (Home, Contact) read heavier than
   group children, and each group (Services, Plugins, then Contact after
   the last group) gets breathing room above it. Desktop resets both. */
.site-nav .menu > li > a { font-weight: 600; }
.site-nav .menu > li.menu-item-has-children,
.site-nav .menu > li.menu-item-has-children + li { margin-top: var(--space-4); }

/* Services/Plugins parents render BOTH a <button aria-expanded> dropdown
   toggle (desktop) and a plain .group-label span (mobile); each breakpoint
   displays exactly one, so mobile never exposes a collapsed button next to
   its always-visible links. */
.dd-toggle { display: none; }
.group-label {
	display: flex; align-items: center;
	min-height: 40px;
	padding: 8px 20px 0;
	font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted);
}

/* Urgent chip on menu items (wp-admin CSS class "urgent") */
.menu-chip-urgent {
	font-size: 12px; font-weight: 500;
	color: var(--color-accent);
	background: var(--color-accent-tint);
	border-radius: var(--radius-chip);
	padding: 2px 9px;
}

/* Mobile contact bar at the panel bottom — phone + email only (the
   "Request help" CTA lives in the header, visible in both menu states) */
.site-nav .contactbar { padding: var(--space-4) 20px; background: var(--color-surface); }
.site-nav .contactbar p { font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.site-nav .contactbar p a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
/* 44px target on an inline link: vertical padding grows the hit box, never
   the line box, so the bar's alignment and panel height are unchanged. */
.site-nav .contactbar p a { padding-block: 14px; }
.site-nav .contactbar p a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 1024px) {
	.site-header .hdr { height: 72px; gap: var(--space-4); }
	.brand .mark { width: 34px; height: 34px; font-size: 14px; }
	.brand .word { font-size: 19px; }
	.site-header .right { gap: 20px; }
	/* inline-flex + min-height carries the 44px target; the cluster is a
	   centred flex row, so the number does not move. */
	.site-header .phone { display: inline-flex; align-items: center; min-height: 44px; }
	.site-header .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }
	.burger { display: none; }

	.site-nav {
		display: block;
		position: static;
		border-bottom: 0;
		max-height: none;
		overflow: visible;
		background: none;
	}
	.site-nav .menu { display: flex; align-items: center; gap: 28px; }
	.site-nav .menu > li { position: relative; }
	/* Outspecify the mobile group-gap selectors */
	.site-nav .menu > li.menu-item-has-children,
	.site-nav .menu > li.menu-item-has-children + li { margin-top: 0; }
	/* 44px target via padding + equal negative margin: the hit box grows while
	   the li keeps its layout box, so the menu gap, header line and dropdown
	   anchor are unchanged. */
	.site-nav .menu > li > a {
		min-height: 0;
		padding: 10px 0;
		margin: -10px 0;
		border-bottom: 0;
		font-size: 15px;
		font-weight: 500;
		display: inline-flex;
	}
	.site-nav .menu > li.current-menu-item > a,
	.site-nav .menu > li.current-menu-ancestor > a {
		color: var(--color-primary);
		position: relative;
	}
	/* Bar pinned to the padding edge: bottom = padding-bottom (10px) − bar
	   height (2px), flush under the text despite the compensated padding. */
	.site-nav .menu > li.current-menu-item > a::after,
	.site-nav .menu > li.current-menu-ancestor > a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 8px;
		height: 2px;
		background: var(--color-primary);
	}
	.site-nav a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

	/* Dropdown toggle is the "Services" nav link with a chevron; the mobile
	   group label stays hidden here */
	.group-label { display: none; }
	.dd-toggle {
		display: inline-flex; align-items: center; gap: 6px;
		border: 0; background: none; cursor: pointer;
		/* 44px target, same compensated padding as the sibling nav links; this
		   box is 18px tall rather than 24px, so it needs 13px not 10px. */
		padding: 13px 0;
		margin: -13px 0;
		font-family: var(--font-family);
		font-size: 15px; font-weight: 500;
		color: var(--color-text);
	}
	.dd-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
	.dd-toggle .chev {
		display: inline-block;
		width: 8px; height: 8px;
		border-right: 1.8px solid currentColor;
		border-bottom: 1.8px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
	}
	.dd-toggle[aria-expanded="true"],
	li.current-menu-ancestor > .dd-toggle { color: var(--color-primary); }

	/* Dropdown panel */
	.site-nav .sub-menu {
		display: none;
		position: absolute;
		top: calc(100% + 22px); left: -14px;
		width: 340px;
		background: var(--color-paper);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-card);
		box-shadow: 0 8px 24px rgba(20, 37, 44, 0.12);
		padding: var(--space-2);
		z-index: 60;
	}
	li.dd-open > .sub-menu { display: block; }
	.site-nav .sub-menu a {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		min-height: 0;
		padding: 11px 14px;
		border-bottom: 0;
		border-radius: var(--radius-btn);
		font-size: 15px; font-weight: 500;
		color: var(--color-text);
		transition: background-color var(--transition-fast), color var(--transition-fast);
	}
	.site-nav .sub-menu a:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }
	.site-nav .sub-menu a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

	.site-nav .contactbar { display: none; }
}

/* ==========================================================================
   Footer — flat ink band, wordmark watermark, 4+3 services, washed bottom bar
   ========================================================================== */
.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--color-ink);
	color: var(--color-text-on-ink);
	border-top: 1px solid var(--color-border-on-ink);
}
/* Watermark lives inside .inner so it ends at the bottom bar's top rule instead
   of running behind it (the bar carries the © line and legal links). The right
   calc pushes it past the centered container so it still bleeds off the viewport
   edge; the bottom offset keeps Inter's descender overflow above the rule. */
.site-footer .wm {
	position: absolute;
	right: calc((100% - 100vw) / 2 - 8px); bottom: 10px;
	font-size: 96px; font-weight: 700;
	letter-spacing: -0.05em; line-height: 1;
	white-space: nowrap;
	color: rgba(230, 238, 241, 0.04);
	pointer-events: none;
	user-select: none;
}
/* The word lives in a pseudo-element, not a DOM text node: purely
   decorative ghost branding (deliberately ~1.1:1), so it must not exist
   as page text — this also keeps axe/Lighthouse color-contrast from
   auditing it (aria-hidden alone doesn't exempt visible text). */
.site-footer .wm::before { content: "wpmojster"; }
.site-footer .inner { position: relative; padding-top: var(--space-12); }
.site-footer .cols { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 44px; }

/* Brand block (on-ink variant) + specialization chip */
/* The shared 44px min-height adds 6px around the 38px mark. Pulling 3px back
   off the top and 3px off the 14px bottom margin keeps the mark and the
   tagline on their existing baselines. */
.site-footer .brand { display: inline-flex; gap: var(--space-2); margin-top: -3px; margin-bottom: 11px; }
.site-footer .brand .mark { width: 38px; height: 38px; border-radius: 9px; font-size: 15px; }
.site-footer .brand .word { font-size: 20px; color: #fff; }
.site-footer .brand:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 4px; }
.site-footer .tagline { font-size: 15px; color: var(--color-text-muted-on-ink); max-width: 30ch; }
.site-footer .chip {
	margin-top: 20px;
	font-size: 13px;
	border-color: var(--color-border-on-ink);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text-on-ink);
}
.site-footer .chip::before { width: 7px; height: 7px; background: var(--color-link-on-ink); }

/* Column labels carry a mini level mark — small echo of the H2 signature */
.site-footer .col-h {
	font-size: var(--text-xs); font-weight: 600;
	text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
	color: var(--color-text-muted-on-ink);
	margin-bottom: 14px;
}
.site-footer .col-h::before {
	content: "";
	display: block;
	width: 20px; height: 2px;
	border-radius: 1px;
	background: var(--color-link-on-ink);
	margin-bottom: 10px;
}

.site-footer .svc2 { display: grid; grid-template-columns: 1fr; gap: 0; }
.site-footer .flist a {
	/* flex + min-height lifts the 39.75px box to 44px and keeps the label
	   centred; the padding stays as the design value. */
	display: flex; align-items: center;
	min-height: 44px;
	padding: 9px 0;
	font-size: 15px; font-weight: 500; line-height: 1.45;
	color: var(--color-text-muted-on-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.site-footer .flist a:hover { color: var(--color-text-on-ink); }
.site-footer .flist a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }

/* Direct contact lines — the two conversion paths keep the on-ink link color */
.site-footer .flist li.direct a {
	color: var(--color-link-on-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.site-footer .flist li.direct a:hover { color: #fff; }
/* Phone stays un-underlined (matches the final-CTA tile): a formatted number is
   self-identifying, and the email keeps the underline as the primary click target */
.site-footer .flist li.direct a[href^="tel:"] { text-decoration: none; }

/* Direct-line glyphs — one tiny inline-SVG mask per channel (envelope, handset,
   WhatsApp bubble), drawn from currentColor so they track the link color; no
   icon font, no extra request. Email keeps its underline (glyph sits outside
   the text run); phone and WhatsApp stay un-underlined as self-identifying. */
.site-footer .flist li.direct a::before {
	content: "";
	width: 1.05em; height: 1.05em;
	margin-right: 8px;
	flex-shrink: 0;
	background: currentColor;
}
.site-footer .flist li.direct a[href^="mailto:"]::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-footer .flist li.direct a[href^="tel:"]::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* WhatsApp — hover shifts the line to WhatsApp green, the only place the
   foreign brand color appears, and only on interaction. */
.site-footer .flist li.wa a { text-decoration: none; }
.site-footer .flist li.wa a::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-footer .flist li.wa a:hover { color: #25d366; }

/* Bottom bar — faint wash; carries the © business identification */
.site-footer .bbar {
	position: relative;
	border-top: 1px solid var(--color-border-on-ink);
	background: rgba(255, 255, 255, 0.02);
}
.site-footer .binner {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: var(--space-4);
	padding-top: 20px; padding-bottom: 20px;
}
.site-footer .copy { font-style: normal; font-size: var(--text-sm); color: var(--color-text-muted-on-ink); }
.site-footer .copy b { font-weight: 600; color: var(--color-text-on-ink); }
/* Legal nav — deliberately quieter than .flist so it stays subordinate to the
   main footer navigation. Hover adds the underline as well as the color lift,
   so the affordance never rests on color alone. Wraps instead of overflowing. */
.site-footer .legal-list {
	display: flex; flex-wrap: wrap;
	gap: 0 var(--space-6);
}
.site-footer .legal-list a {
	/* inline-flex keeps the shrink-to-text width the wrapping row relies on
	   while min-height carries the 44px target. */
	display: inline-flex; align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-size: 13px; font-weight: 500;
	color: var(--color-text-muted-on-ink);
	text-decoration: none;
	transition: color var(--transition-fast);
}
.site-footer .legal-list a:hover {
	color: var(--color-text-on-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.site-footer .legal-list a:focus-visible { outline: var(--focus-ring-on-ink); outline-offset: var(--focus-offset); border-radius: 2px; }

@media (min-width: 640px) {
	.site-footer .svc2 { grid-template-columns: 1fr 1fr; gap: 0 24px; }
	/* inline-flex, not inline-block: keeps the hit box off the full column
	   width as before, with min-height carrying the 44px target. */
	.site-footer .flist a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
}

@media (min-width: 1024px) {
	.site-footer .wm { right: calc((100% - 100vw) / 2 - 14px); bottom: 18px; font-size: 168px; }
	.site-footer .inner { padding-top: var(--space-16); }
	.site-footer .cols { grid-template-columns: 1.5fr 2.3fr 1fr; gap: 24px; padding-bottom: 56px; }
	.site-footer .binner { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
}

/* ============================================================
   Contact form — HTML Forms plugin; sitewide because the form sits in
   every page's final CTA. The field markup (scripts/create-contact-form.php)
   uses the token classes below and the plugin stylesheet stays disabled,
   so the theme owns every rule; only the plugin's state hooks (.hf-form,
   .hf-message-*, mc4wp-loading) need styling.
   ============================================================ */

.contact-form .hf-field { margin: 0 0 var(--space-4); }

/* Urgent-mode notice: the amber urgent tokens carrying explicit text
   (never color alone), rendered above the fields inside the same form
   card — server-rendered, so no layout shift. The bold lead takes the
   accent; the sentence stays body ink for long-text readability. */
.contact-form .urgent-note {
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-accent-tint);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-input);
	padding: 12px 14px;
	margin: 0 0 var(--space-4);
}
.contact-form .urgent-note b { color: var(--color-accent); }

/* Label: the .field-label token */
.contact-form .field-label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-ink);
	margin: 0 0 var(--space-2);
}

/* Input: the .field-input token */
.contact-form .field-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--font-family);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-paper);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-input);
	box-shadow: none;
}
.contact-form .field-input:focus {
	outline: var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--color-primary);
}
.contact-form textarea.field-input { min-height: 110px; resize: vertical; }

/* Invalid after interaction: red border; the browser's own validation
   message carries the text, so the state never relies on color alone. */
.contact-form .field-input:user-invalid { border-color: var(--color-error); }

/* Name/email row: the design's .frow grid (stacks below 640px like
   every other form row in the system). */
.contact-form .frow { display: grid; gap: 0 var(--space-4); }

/* Submit: .btn.btn--primary does the rest */
.contact-form .hf-form .btn { width: 100%; }

/* Submitting (public.js toggles the class around the AJAX request):
   visibly busy and shielded against accidental double submission. */
.contact-form .hf-form.mc4wp-loading .btn {
	pointer-events: none;
	opacity: 0.7;
}

/* Server messages — role="alert" paragraphs the plugin appends after the
   fields. Warning: red + ⚠ icon (never color alone). */
.contact-form .hf-message-warning {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-error);
	margin: var(--space-2) 0 0;
}
.contact-form .hf-message-warning::before { content: "⚠ "; }

/* Success confirmation: the tokens card's green-tint panel */
.contact-form .hf-message-success {
	font-size: 15px;
	color: #14532B;
	background: var(--color-success-tint);
	border: 0;
	box-shadow: none;
	border-radius: var(--radius-input);
	padding: 14px 16px;
	margin: var(--space-4) 0 0;
}
.contact-form .hf-message-success::before { content: "✓ "; font-weight: 700; }

/* Plain email fallback (plugin or form missing) */
.contact-form--fallback .fallback-lead {
	font-size: var(--text-base);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.contact-form--fallback .btn { width: 100%; }

@media (min-width: 640px) {
	.contact-form .frow { grid-template-columns: 1fr 1fr; }
}