/*
 * Keesey's Auto Pro Care — main stylesheet.
 * Design tokens (color, type, spacing) come from theme.json as --wp--preset--* vars.
 * This file adds: the chrome treatment, motion / reveals, the sticky-shrink header,
 * card and form micro-interactions, the map, and accessibility helpers.
 */

:root {
	--k-base:        var(--wp--preset--color--base);
	--k-surface:     var(--wp--preset--color--surface);
	--k-card:        var(--wp--preset--color--card);
	--k-line:        var(--wp--preset--color--line);
	--k-accent:      var(--wp--preset--color--accent);
	--k-accent-2:    var(--wp--preset--color--accent-bright);
	--k-chrome:      var(--wp--preset--color--chrome);
	--k-steel:       var(--wp--preset--color--steel);
	--k-contrast:    var(--wp--preset--color--contrast);
	--k-ease:        cubic-bezier(0.22, 1, 0.36, 1);
	--k-header-h:    158px;
	--k-header-h-sm: 120px;
}

/* ------------------------------------------------------------------ *
 * Base niceties
 * ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

::selection { background: var(--k-accent); color: #fff; }

/* ------------------------------------------------------------------ *
 * Fixed brand watermark — a big, subtle logo silhouette that sits
 * behind the content on every page and stays put while scrolling.
 * ------------------------------------------------------------------ */
.wp-site-blocks { position: relative; z-index: 1; }
body::before {
	content: "";
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1180px, 100vw);
	aspect-ratio: 1200 / 807;
	background: url("../media/keeseys-watermark.webp") center / contain no-repeat;
	opacity: 0.55;
	z-index: 0;
	pointer-events: none;
}
@media (max-width: 782px) { body::before { opacity: 0.40; } }

/* Visible, on-brand keyboard focus everywhere. */
:where(a, button, input, select, textarea, summary, .wp-block-button__link, [tabindex]):focus-visible {
	outline: 2px solid var(--k-accent-2);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip link */
.skip-link.screen-reader-text {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--k-accent); color: #fff; padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.08em;
}
.skip-link.screen-reader-text:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------------ *
 * Chrome / metallic text treatment
 * Apply via the "Chrome Text" block style (added in JS) or .has-chrome-text
 * ------------------------------------------------------------------ */
.has-chrome-text,
.is-style-chrome-text {
	background: linear-gradient(160deg, #ffffff 0%, #C9CED6 28%, #7c828c 52%, #EDEFF2 70%, #9AA1AC 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Thin metallic divider */
.keeseys-rule {
	height: 2px; border: 0; width: clamp(60px, 10vw, 120px);
	background: linear-gradient(90deg, transparent, var(--k-accent) 20%, var(--k-accent) 80%, transparent);
	margin: 0;
}

/* Eyebrow / kicker label */
.keeseys-kicker {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase; letter-spacing: 0.22em;
	font-size: 0.8rem; font-weight: 600; color: var(--k-steel);
}
.keeseys-kicker::before {
	content: ""; width: 26px; height: 2px; background: var(--k-accent);
}

/* ------------------------------------------------------------------ *
 * Header — sticky, shrinks on scroll
 * ------------------------------------------------------------------ */
.wp-site-blocks > header.wp-block-template-part,
.keeseys-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--k-base) 82%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--k-line);
	transition: background 0.3s var(--k-ease), box-shadow 0.3s var(--k-ease);
}
.keeseys-header-inner {
	min-height: var(--k-header-h);
	transition: min-height 0.3s var(--k-ease), padding 0.3s var(--k-ease);
}
body.header-stuck .keeseys-header {
	background: color-mix(in srgb, var(--k-base) 94%, transparent);
	box-shadow: 0 10px 30px -18px rgba(0,0,0,0.9);
}
body.header-stuck .keeseys-header .keeseys-header-inner { min-height: var(--k-header-h-sm); }
body.header-stuck .keeseys-header .keeseys-logo img { max-height: 98px; }
.keeseys-logo img { max-height: 130px; width: auto; height: auto; transition: max-height 0.3s var(--k-ease); }
@media (max-width: 782px) { .keeseys-logo img { max-height: 84px; } body.header-stuck .keeseys-header .keeseys-logo img { max-height: 64px; } }

/* Header nav */
.keeseys-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; font-weight: 500; color: var(--k-chrome); }
.keeseys-header .wp-block-navigation a:hover { color: var(--k-contrast); }
.keeseys-header-nav { gap: clamp(0.75rem, 2vw, 2rem); }
/* Collapse the phone number to just the icon on small screens */
@media (max-width: 782px) { .keeseys-call-btn .keeseys-callnum { display: none; } }
@media (max-width: 480px) { .keeseys-call-btn { display: none; } } /* hamburger overlay carries Call + Book on very small screens */

/* Secondary "call" button (outline) */
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--k-chrome);
	border: 1px solid var(--k-line);
}
.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--k-accent); color: #fff; background: transparent;
}

/* Primary buttons get a subtle lift on hover */
.wp-block-button__link { transition: transform 0.2s var(--k-ease), background-color 0.2s var(--k-ease), box-shadow 0.2s var(--k-ease); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--accent); }

/* ------------------------------------------------------------------ *
 * Home hero — logo backdrop + frosted-glass text panel
 * ------------------------------------------------------------------ */
.keeseys-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	/* Transparent background so the site's single fixed logo watermark shows through. */
	background: transparent;
}
.keeseys-hero-inner {
	position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto;
	padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem);
}
.keeseys-hero-panel {
	max-width: 820px;
	background: rgba(11, 13, 17, 0.42);
	-webkit-backdrop-filter: blur(12px) saturate(125%);
	backdrop-filter: blur(12px) saturate(125%);
	border: 1px solid rgba(201, 206, 214, 0.14);
	border-radius: 18px;
	padding: clamp(1.6rem, 3.5vw, 2.75rem);
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
/* Fallback for browsers without backdrop-filter: lean on a slightly more opaque panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.keeseys-hero-panel { background: rgba(11, 13, 17, 0.62); }
}

/* ------------------------------------------------------------------ *
 * Cards — hover lift
 * ------------------------------------------------------------------ */
.keeseys-card {
	background: var(--k-card);
	border: 1px solid var(--k-line);
	border-top: 2px solid var(--k-accent);
	border-radius: 12px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	height: 100%;
	transition: transform 0.28s var(--k-ease), border-color 0.28s var(--k-ease), box-shadow 0.28s var(--k-ease), background 0.28s var(--k-ease);
}
.keeseys-card:hover {
	transform: translateY(-6px);
	background: #20242E;
	box-shadow: var(--wp--preset--shadow--lift);
}
.keeseys-card .keeseys-card-icon {
	display: inline-grid; place-items: center;
	width: 56px; height: 56px; border-radius: 10px;
	background: color-mix(in srgb, var(--k-accent) 12%, var(--k-card));
	color: var(--k-accent-2); margin-bottom: 1.1rem;
}
.keeseys-card .keeseys-card-icon svg { width: 28px; height: 28px; }

/* Service check list */
.keeseys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.keeseys-list li { position: relative; padding-left: 1.9rem; color: var(--k-chrome); }
.keeseys-list li::before {
	content: ""; position: absolute; left: 0; top: 0.45em;
	width: 12px; height: 7px; border-left: 2px solid var(--k-accent); border-bottom: 2px solid var(--k-accent);
	transform: rotate(-45deg);
}

/* Two-column service list */
.keeseys-list--grid { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
@media (max-width: 540px) { .keeseys-list--grid { grid-template-columns: 1fr; } }

/* Testimonial quote cards */
.keeseys-quote { display: flex; flex-direction: column; gap: 0.9rem; margin: 0; }
.keeseys-quote blockquote { margin: 0; border: 0; padding: 0; }
.keeseys-quote blockquote p { margin: 0; color: var(--k-contrast); font-size: 1.05rem; line-height: 1.6; }
.keeseys-quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; padding-top: 0.5rem; }
.keeseys-quote .keeseys-quote-name { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-chrome); font-weight: 600; }
.keeseys-quote .keeseys-quote-meta { color: var(--k-steel); font-size: 0.85rem; }
.keeseys-stars { color: var(--k-accent); letter-spacing: 0.15em; font-size: 1.05rem; }
.keeseys-verified { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.78rem; color: #3fb950; letter-spacing: 0.01em; }
.keeseys-verified-icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* CTA band contact block */
.keeseys-cta-address { color: var(--k-steel); margin: 0 0 0.5rem; }
.keeseys-cta-phone { display: inline-block; font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--k-contrast); text-decoration: none; letter-spacing: 0.01em; }
.keeseys-cta-phone:hover { color: var(--k-accent-2); }

/* Trust band stats */
.keeseys-stat { text-align: center; }
.keeseys-stat .keeseys-stat-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1; color: var(--k-contrast);
}
.keeseys-stat .keeseys-stat-num em { color: var(--k-accent); font-style: normal; }
.keeseys-stat .keeseys-stat-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--k-steel); margin-top: 0.4rem; }

/* ------------------------------------------------------------------ *
 * In-view reveals (progressive enhancement — hidden only when JS present)
 * ------------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--k-ease), transform 0.7s var(--k-ease); will-change: opacity, transform; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.reveal-delay-1 { transition-delay: 0.08s; }
.js .reveal.reveal-delay-2 { transition-delay: 0.16s; }
.js .reveal.reveal-delay-3 { transition-delay: 0.24s; }

/* ------------------------------------------------------------------ *
 * Booking form
 * ------------------------------------------------------------------ */
.keeseys-form { display: grid; gap: 1.1rem; }
.keeseys-form .field { display: grid; gap: 0.4rem; }
.keeseys-form .field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .keeseys-form .field-row { grid-template-columns: 1fr; } }
.keeseys-form label { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 500; color: var(--k-steel); }
.keeseys-form label .req { color: var(--k-accent); }
.keeseys-form input,
.keeseys-form select,
.keeseys-form textarea {
	width: 100%; background: var(--k-base); color: var(--k-contrast);
	border: 1px solid var(--k-line); border-radius: 8px;
	padding: 0.8rem 0.9rem; font: inherit; font-size: 1rem;
	transition: border-color 0.2s var(--k-ease), box-shadow 0.2s var(--k-ease);
}
.keeseys-form textarea { min-height: 130px; resize: vertical; }
.keeseys-form input:focus,
.keeseys-form select:focus,
.keeseys-form textarea:focus {
	outline: none; border-color: var(--k-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 25%, transparent);
}
.keeseys-form input::placeholder, .keeseys-form textarea::placeholder { color: #676d78; }
/* Honeypot — visually and semantically hidden from humans, present for bots. */
.keeseys-form .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.keeseys-form input[aria-invalid="true"], .keeseys-form select[aria-invalid="true"], .keeseys-form textarea[aria-invalid="true"] { border-color: var(--k-accent); }
.keeseys-form .field-error { color: var(--k-accent-2); font-size: 0.85rem; }
.keeseys-form .form-status { border-radius: 8px; padding: 0.9rem 1.1rem; font-size: 0.95rem; display: none; }
.keeseys-form .form-status.is-success { display: block; background: color-mix(in srgb, #16c60c 16%, var(--k-card)); border: 1px solid #16c60c; color: #d6ffd0; }
.keeseys-form .form-status.is-error { display: block; background: color-mix(in srgb, var(--k-accent) 16%, var(--k-card)); border: 1px solid var(--k-accent); color: #ffd8d6; }
.keeseys-form button[type="submit"] { justify-self: start; }
.keeseys-form.is-submitting button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------------ *
 * Contact info card + hours
 * ------------------------------------------------------------------ */
.keeseys-info-card { background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.keeseys-hours { width: 100%; border-collapse: collapse; }
.keeseys-hours th, .keeseys-hours td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--k-line); font-weight: 400; }
.keeseys-hours tr:last-child th, .keeseys-hours tr:last-child td { border-bottom: 0; }
.keeseys-hours th { color: var(--k-chrome); font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.keeseys-hours td { color: var(--k-steel); text-align: right; }
.keeseys-hours td.is-closed { color: #6b7078; }

.keeseys-tel { white-space: nowrap; }
.keeseys-contact-line { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.keeseys-contact-line svg { width: 20px; height: 20px; color: var(--k-accent); flex: 0 0 auto; margin-top: 2px; }

/* ------------------------------------------------------------------ *
 * Google Map — lazy facade, no third-party request until clicked
 * ------------------------------------------------------------------ */
.keeseys-map { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: 14px; overflow: hidden; border: 1px solid var(--k-line); background: var(--k-surface); }
.keeseys-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.keeseys-map .map-facade {
	position: absolute; inset: 0; display: grid; place-items: center; gap: 0.75rem; cursor: pointer;
	background:
		radial-gradient(circle at 30% 30%, rgba(225,6,0,0.14), transparent 60%),
		repeating-linear-gradient(0deg, #14171E 0 39px, #1b1f28 39px 40px),
		repeating-linear-gradient(90deg, #14171E 0 39px, #1b1f28 39px 40px);
	text-align: center; color: var(--k-chrome);
}
.keeseys-map .map-facade .map-pin { width: 44px; height: 44px; color: var(--k-accent); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.keeseys-map .map-facade .map-cta { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; }
.keeseys-map .map-facade small { color: var(--k-steel); }
.keeseys-map--tall { aspect-ratio: 16 / 6; }
@media (max-width: 700px) { .keeseys-map, .keeseys-map--tall { aspect-ratio: 4 / 3; } }
.map-facade { border: 0; font: inherit; }

/* Anchor offset so the sticky header never hides section tops */
section[id], .keeseys-anchor, [id]:target { scroll-margin-top: 100px; }
.keeseys-anchor { position: relative; height: 0; }
.keeseys-info-card h3 { font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-chrome); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.keeseys-footer { background: var(--k-surface); border-top: 1px solid var(--k-line); }
.keeseys-footer a { color: var(--k-steel); text-decoration: none; }
.keeseys-footer a:hover { color: var(--k-contrast); }
.keeseys-footer .keeseys-footer-brand img { max-height: 76px; width: auto; }
.keeseys-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.keeseys-footer h5 { color: var(--k-chrome); margin-bottom: 1rem; }
.keeseys-footer address a { color: var(--k-chrome); }
.keeseys-footer address a:hover { color: var(--k-accent-2); }

/* ------------------------------------------------------------------ *
 * Full-bleed section imagery helper
 * ------------------------------------------------------------------ */
.keeseys-media-band { position: relative; overflow: hidden; }
.keeseys-media-band > img,
.keeseys-media-band .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Section top hairline accent used on alternating bands */
.keeseys-band-top { border-top: 1px solid var(--k-line); }

/* Keep explicit-width columns side-by-side on desktop (widths that sum to 100%
 * plus the block gap can otherwise trip flex-wrap and stack them). They still
 * stack on mobile via core's <=781px rule. */
@media (min-width: 782px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap; }
}

/* ------------------------------------------------------------------ *
 * 404
 * ------------------------------------------------------------------ */
.keeseys-404-code { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(6rem, 22vw, 14rem); line-height: 0.85; color: var(--k-card); letter-spacing: 0.02em; }
.keeseys-404-code em { color: var(--k-accent); font-style: normal; }

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.keeseys-card, .wp-block-button__link, .keeseys-logo img { transition: none !important; }
	.keeseys-card:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { transform: none !important; }
}