/* ==========================================================================
   Design system (same in every theme we build). Colors are NEVER hard-coded:
   use the palette tokens (--wp--preset--color--*), set in theme.json and
   fine-tuned in <Site> Settings → Design.

   01 Base            05 Header
   02 Sections/tones  06 Cards
   03 Eyebrow, lists  07 FAQ (details)
   04 Buttons         08 Footer, utilities
   ========================================================================== */

/* 01 Base */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
img { height: auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* 02 Sections and tones: a tone only sets the local look; any block works on any tone */
.kit-section { padding-block: var(--wp--preset--spacing--70); }
.is-style-tone-light { background: var(--wp--preset--color--light); color: var(--wp--preset--color--text); }
.is-style-tone-muted { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--text); }
.is-style-tone-dark,
.is-style-tone-accent { --tone-fg: var(--wp--preset--color--text-inverse); color: var(--tone-fg); }
.is-style-tone-dark { background: var(--wp--preset--color--dark); }
.is-style-tone-accent { background: var(--wp--preset--color--accent); --tone-fg: var(--wp--preset--color--accent-contrast); }
:is(.is-style-tone-dark, .is-style-tone-accent) :is(h1, h2, h3, h4, h5, h6, p, li, summary, blockquote, cite) { color: inherit; }
:is(.is-style-tone-dark, .is-style-tone-accent) a:not(.wp-element-button) { color: inherit; text-decoration-color: currentColor; }
.is-style-tone-dark .is-style-card { background: var(--wp--preset--color--dark-alt); border-color: rgba(255, 255, 255, 0.1); }
.is-style-tone-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--text-inverse); color: var(--wp--preset--color--dark); }

/* 03 Eyebrow, step number, checklist */
.is-style-eyebrow {
	display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0;
	font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.is-style-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.is-style-eyebrow.has-text-align-center { justify-content: center; }
.is-style-eyebrow.has-text-align-center::before { display: none; }
:is(.is-style-tone-dark) .is-style-eyebrow { color: var(--wp--preset--color--accent); }
.is-style-tone-accent .is-style-eyebrow { color: inherit; }
.is-style-step {
	display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0;
	border-radius: 999px; border: 1px solid currentColor; font-weight: 600; color: var(--wp--preset--color--accent);
}
.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 1.75rem; margin-block: 0.4rem; }
.is-style-checks li::before {
	content: ""; position: absolute; left: 0; top: 0.5em; width: 0.9rem; height: 0.5rem;
	border-left: 2px solid var(--wp--preset--color--accent); border-bottom: 2px solid var(--wp--preset--color--accent); transform: rotate(-45deg);
}

/* 04 Buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: currentColor; border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); border-color: var(--wp--preset--color--accent); }
.wp-element-button { transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.wp-element-button:hover { transform: translateY(-1px); }

/* 05 Header */
.kit-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--light) 88%, transparent);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.admin-bar .kit-header { top: var(--wp-admin--admin-bar--height, 32px); }
.kit-header .wp-block-button__link { padding: 0.6rem 1.1rem; font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 480px) { .kit-header .wp-block-button { display: none; } }

/* 06 Cards */
.is-style-card, .is-style-card-soft {
	background: var(--wp--preset--color--light);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(1.25rem, 2.5vw, 2rem);
}
.is-style-card-soft { background: var(--wp--preset--color--muted); border-color: transparent; }
.is-style-card :is(h2, h3, h4):first-child, .is-style-card-soft :is(h2, h3, h4):first-child { margin-top: 0; }
.wp-block-image.is-style-rounded img { border-radius: var(--wp--custom--radius--card); }
.wp-block-post-featured-image img { border-radius: calc(var(--wp--custom--radius--card) - 4px); }
.is-style-card .wp-block-post-featured-image { margin: calc(clamp(1.25rem, 2.5vw, 2rem) * -1) calc(clamp(1.25rem, 2.5vw, 2rem) * -1) 1rem; }
.is-style-card .wp-block-post-featured-image img { border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0; width: 100%; }
.kit-stat .kit-stat__value { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--xx-large); line-height: 1; margin: 0; color: var(--wp--preset--color--accent); }
.is-style-tone-dark .kit-stat__value { color: inherit; }
.kit-stat .kit-stat__label { margin: 0.35rem 0 0; font-size: var(--wp--preset--font-size--small); opacity: 0.8; }

/* 07 FAQ: the "Details" block with the FAQ style. Also feeds FAQPage schema. */
.wp-block-details.is-style-faq { border-bottom: 1px solid var(--wp--preset--color--border); padding-block: 1rem; }
.wp-block-details.is-style-faq summary { cursor: pointer; font-weight: 600; font-size: var(--wp--preset--font-size--large); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.wp-block-details.is-style-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-faq summary::after { content: "+"; font-weight: 400; color: var(--wp--preset--color--accent); }
.wp-block-details.is-style-faq[open] summary::after { content: "–"; }
.wp-block-details.is-style-faq > :not(summary) { margin-block-start: 0.75rem; color: var(--wp--preset--color--text-muted); }

/* 08 Footer, utilities */
.kit-footer { font-size: var(--wp--preset--font-size--small); }
.kit-footer .wp-block-navigation { gap: 0.4rem; }
.kit-footer .kit-company a, .kit-footer a { text-decoration: none; }
.kit-footer a:hover { text-decoration: underline; }
.kit-rise { animation: kit-rise 0.7s ease both; }
@keyframes kit-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kit-rise { animation: none; } html { scroll-behavior: auto; } }