/*
 * Skin: Tidewater (15 Min Locksmith, San Luis Obispo, 2026-11-10).
 * The Central Coast in the owner's red and blue: deep harbor navy, cool paper, signal-red calls to action, a squared geometric
 * grotesk. The hero carries faint swell lines off the coast, the only decoration. Rounded pill buttons read fast.
 * Loaded after style.css when business.json → brand.skin = "tidewater". Colors still come from the brand tokens.
 */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/space-grotesk-latin-var.woff2") format("woff2"); }

:root {
	--sf-font-h: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
	--sf-radius: 10px;
	--sf-card: #ffffff;
	--sf-line: #dde3ec;
	--sf-soft: #e8eef7;
	--sf-muted: #4a5568;
	--tw-deep: color-mix(in srgb, var(--sf-primary) 80%, #000);
	--tw-sea: var(--sf-primary);
	--tw-red-text: color-mix(in srgb, var(--sf-accent) 78%, #000);
	--tw-swell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='300' viewBox='0 0 720 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.4'%3E%3Cpath d='M0 120c60 0 60-24 120-24s60 24 120 24 60-24 120-24 60 24 120 24 60-24 120-24 60 24 120 24'/%3E%3Cpath d='M0 160c60 0 60-24 120-24s60 24 120 24 60-24 120-24 60 24 120 24 60-24 120-24 60 24 120 24'/%3E%3Cpath d='M0 200c60 0 60-24 120-24s60 24 120 24 60-24 120-24 60 24 120 24 60-24 120-24 60 24 120 24'/%3E%3Cpath d='M0 240c60 0 60-24 120-24s60 24 120 24 60-24 120-24 60 24 120 24 60-24 120-24 60 24 120 24'/%3E%3Cpath d='M0 280c60 0 60-24 120-24s60 24 120 24 60-24 120-24 60 24 120 24 60-24 120-24 60 24 120 24'/%3E%3C/g%3E%3C/svg%3E");
	--sf-shadow: 0 1px 2px rgba(10, 40, 52, .07), 0 14px 30px -16px rgba(10, 40, 52, .32);
}

body { caret-color: var(--sf-accent); }
::selection { background: var(--sf-accent); color: #fff; }
:focus-visible { outline-color: var(--sf-accent); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; }
h2 { font-size: clamp(27px, 3.2vw, 39px); line-height: 1.1; }
h3 { font-weight: 600; letter-spacing: -.01em; }
a { color: var(--tw-red-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sf-ink); }

/* Kicker above headings: a small red dot, then the words */
.sf-eyebrow { font-family: var(--sf-font-h); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; color: var(--tw-red-text); }
.sf-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sf-accent); vertical-align: 1px; }
.sf-hero .sf-eyebrow, .sf-pagehead .sf-eyebrow { color: color-mix(in srgb, var(--sf-accent) 40%, #fff); }

/* Buttons: pills, signal red */
.sf-btn, .wp-block-button__link { border-radius: 999px; font-family: var(--sf-font-h); font-weight: 700; letter-spacing: .005em; transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s, box-shadow .2s; }
.sf-btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.sf-btn--accent, .wp-block-button__link { background: var(--sf-accent); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--sf-accent) 80%, #000); }
.sf-btn--accent:hover, .wp-block-button__link:hover { background: color-mix(in srgb, var(--sf-accent) 88%, #000); color: #fff; }
.sf-btn--primary { background: var(--tw-deep); color: #fff; }

/* Top bar and header */
.sf-topbar { background: var(--tw-deep); color: #dcebec; }
.sf-topbar .sf-i { color: color-mix(in srgb, var(--sf-accent) 55%, #fff); }
.sf-header { background: var(--sf-card); border-bottom: 1px solid var(--sf-line); }
.sf-nav a { font-weight: 600; border-radius: 999px; }
.sf-nav a:hover, .sf-nav .is-current > a { background: var(--sf-soft); color: var(--sf-ink); }
.sf-nav .sf-sub, .sf-mnav__panel { background: var(--sf-card); border-radius: var(--sf-radius); }

/* Hero: deep sea with swell lines */
.sf-hero, .sf-pagehead {
	background:
		var(--tw-swell) right bottom / 820px auto no-repeat,
		radial-gradient(60% 80% at 92% 8%, color-mix(in srgb, var(--sf-accent) 16%, transparent), transparent 70%),
		linear-gradient(165deg, var(--tw-sea), var(--tw-deep));
	color: #eaf3f3;
}
.sf-hero { padding-block: 56px 74px; }
.sf-hero h1, .sf-pagehead h1 { color: #fff; }
.sf-lead { color: #d3e4e5; opacity: 1; font-size: 19px; line-height: 1.55; }
.sf-checks li { color: #eaf3f3; }
.sf-checks li::before { background-color: var(--sf-accent); }
.sf-section .sf-checks li { color: inherit; }
.sf-hero .sf-btn--ghost, .sf-pagehead .sf-btn--ghost { color: #fff; border-color: rgba(234, 243, 243, .5); }
.sf-hero .sf-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* Form: a white card, rounded, with a red left edge */
.sf-form { background: var(--sf-card); border-left: 5px solid var(--sf-accent); border-radius: var(--sf-radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .1); }
.sf-form__title { font-weight: 700; font-size: 23px; }
.sf-form input, .sf-form select, .sf-form textarea { border-radius: 8px; border-color: var(--sf-line); background: #fff; }
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 20%, transparent); }
.sf-form__call a { color: var(--tw-red-text); }

/* Trust strip */
.sf-trust { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); }
.sf-trust__item .sf-i { color: var(--sf-accent); }

/* Sections: a short rounded red bar under each section heading */
.sf-section--white { background: #fafbfd; border-color: var(--sf-line); }
.sf-section > h2::after, .sf-section .sf-wrap > h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--sf-accent); }
.sf-section h2 + p { color: var(--sf-muted); }
.sf-callstrip { background: var(--sf-soft); color: var(--sf-ink); }

/* Cards, features, steps */
.sf-card, .sf-features > .wp-block-group, .sf-feature, ol.sf-steps li, .sf-post, .sf-review, .sf-toc, .wp-block-details.sf-faq, details.sf-faq { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.sf-card:hover, .sf-post:hover { border-color: var(--sf-accent); box-shadow: var(--sf-shadow); }
.sf-card__icon { border-radius: 50%; background: var(--sf-soft); color: var(--tw-sea); }
.sf-card__body strong, .sf-post__body strong { font-family: var(--sf-font-h); font-weight: 600; font-size: 18.5px; }
.sf-card__go { color: var(--tw-red-text); }
.sf-features h3 { font-size: 20px; }
ol.sf-steps li::before { border-radius: 50%; background: var(--tw-sea); color: #fff; font-family: var(--sf-font-h); font-weight: 700; }
.sf-faq summary { font-weight: 600; font-size: 18.5px; }
.sf-faq summary::after { color: var(--sf-accent); }
.sf-pill, .sf-jump a { background: var(--sf-card); border-color: var(--sf-line); border-radius: 999px; }
.sf-pill:hover, .sf-jump a:hover { border-color: var(--sf-accent); color: var(--sf-ink); }
.sf-pill .sf-i { color: var(--sf-accent); }
.sf-table table, .sf-article table { background: var(--sf-card); }
.sf-table th { background: var(--sf-soft); font-family: var(--sf-font-h); }
.sf-photo img, .wp-block-image.sf-photo img { border-radius: var(--sf-radius); }

/* Closing call to action: the same sea and swell */
.sf-cta {
	background: var(--tw-swell) left bottom / 700px auto no-repeat, linear-gradient(165deg, var(--tw-sea), var(--tw-deep));
	color: #eaf3f3; border-radius: calc(var(--sf-radius) * 1.6);
}
.sf-cta p { color: #d3e4e5; opacity: 1; }
.sf-cta .sf-btn--light { background: var(--sf-accent); color: #fff; }
.sf-cta .sf-btn--ghost { color: #fff; border-color: rgba(234, 243, 243, .5); }

/* Footer */
.sf-footer { background: var(--tw-deep); color: #c9dcdd; border-top: 4px solid var(--sf-accent); }
.sf-footer a:hover { color: color-mix(in srgb, var(--sf-accent) 50%, #fff); }
.sf-footer__title, .sf-footer__brand { font-family: var(--sf-font-h); letter-spacing: .005em; }
.sf-pagination .current { background: var(--sf-accent); }

@media (max-width: 640px) {
	.sf-hero { padding-block: 34px 52px; }
	.sf-hero, .sf-pagehead { background-size: 560px auto, auto, auto; }
	h1 { font-size: clamp(32px, 8.8vw, 42px); }
	.sf-callbar { background: var(--sf-card); border-top-color: var(--sf-line); }
}