/* ==========================================================================
   Kongify Starter — framework.css
   --------------------------------------------------------------------------
   Layout primitives + reset shared by every brand. Brand themes layer their
   own brand.css on top (loaded with a higher priority enqueue). Keep this
   file PRESENTATION-AGNOSTIC: no brand colors, no brand fonts, no brand
   shadows. Anything visually distinctive belongs in the brand theme.
   ========================================================================== */

/* ---------- Tokens (semantic mirrors of theme.json presets) ---------- */
:root {
	--kfy-color-primary:    var(--wp--preset--color--primary);
	--kfy-color-secondary:  var(--wp--preset--color--secondary);
	--kfy-color-accent:     var(--wp--preset--color--accent);
	--kfy-color-ink:        var(--wp--preset--color--ink);
	--kfy-color-ink-soft:   var(--wp--preset--color--ink-soft);
	--kfy-color-paper:      var(--wp--preset--color--paper);
	--kfy-color-paper-soft: var(--wp--preset--color--paper-soft);
	--kfy-color-border:     var(--wp--preset--color--border);
	--kfy-color-muted:      var(--wp--preset--color--muted);
	--kfy-color-success:    var(--wp--preset--color--success);
	--kfy-color-warning:    var(--wp--preset--color--warning);
	--kfy-color-danger:     var(--wp--preset--color--danger);

	--kfy-font-display: var(--wp--preset--font-family--display);
	--kfy-font-body:    var(--wp--preset--font-family--body);

	--kfy-space-xs:  var(--wp--preset--spacing--xs);
	--kfy-space-sm:  var(--wp--preset--spacing--sm);
	--kfy-space-md:  var(--wp--preset--spacing--md);
	--kfy-space-lg:  var(--wp--preset--spacing--lg);
	--kfy-space-xl:  var(--wp--preset--spacing--xl);
	--kfy-space-2xl: var(--wp--preset--spacing--2xl);

	--kfy-radius-sm: 6px;
	--kfy-radius-md: 12px;
	--kfy-radius-lg: 24px;
	--kfy-radius-pill: 999px;

	--kfy-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
	--kfy-shadow-md: 0 4px 12px rgba(0,0,0,.08);
	--kfy-shadow-lg: 0 12px 32px rgba(0,0,0,.12);

	--kfy-bp-md: 768px;
	--kfy-bp-lg: 1024px;
	--kfy-bp-xl: 1280px;
}

/* ---------- Light reset (complements WP's reset, not a replacement) ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* ---------- Skip link for a11y ---------- */
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--kfy-color-ink); color: var(--kfy-color-paper);
	padding: .5rem 1rem; z-index: 9999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Layout primitives ---------- */
.kfy-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.kfy-container--wide { max-width: 1440px; }
.kfy-container--narrow { max-width: 760px; }

.kfy-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.kfy-stack > * + * { margin-block-start: var(--kfy-space-sm); }
.kfy-stack--md > * + * { margin-block-start: var(--kfy-space-md); }
.kfy-stack--lg > * + * { margin-block-start: var(--kfy-space-lg); }

.kfy-grid {
	display: grid;
	gap: var(--kfy-space-md);
}
.kfy-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kfy-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kfy-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.kfy-cluster {
	display: flex; flex-wrap: wrap; gap: var(--kfy-space-sm); align-items: center;
}

/* ---------- Buttons (token-driven, brand-overridable) ---------- */
.kfy-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .8em 1.4em;
	font-family: var(--kfy-font-display); font-weight: 600;
	border: 2px solid transparent; border-radius: var(--kfy-radius-pill);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	text-align: center;
}
.kfy-btn:hover { transform: translateY(-1px); box-shadow: var(--kfy-shadow-md); text-decoration: none; }
.kfy-btn--primary   { background: var(--kfy-color-primary);   color: var(--kfy-color-paper); }
.kfy-btn--secondary { background: var(--kfy-color-secondary); color: var(--kfy-color-ink); }
.kfy-btn--ghost     { background: transparent; color: var(--kfy-color-ink); border-color: var(--kfy-color-border); }

/* ---------- Forms ---------- */
.kfy-field { display: grid; gap: .35rem; }
.kfy-field label { font-weight: 600; font-size: .875rem; }
.kfy-field input, .kfy-field textarea, .kfy-field select {
	width: 100%; padding: .7em 1em; font: inherit;
	background: var(--kfy-color-paper);
	color: var(--kfy-color-ink);
	border: 1px solid var(--kfy-color-border);
	border-radius: var(--kfy-radius-md);
}
.kfy-field input:focus-visible,
.kfy-field textarea:focus-visible,
.kfy-field select:focus-visible {
	outline: 2px solid var(--kfy-color-primary); outline-offset: 2px;
	border-color: var(--kfy-color-primary);
}

/* Honeypot — hidden from sighted users + assistive tech, still in DOM. */
.kfy-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cards ---------- */
.kfy-card {
	background: var(--kfy-color-paper);
	border: 1px solid var(--kfy-color-border);
	border-radius: var(--kfy-radius-lg);
	padding: var(--kfy-space-md);
	box-shadow: var(--kfy-shadow-sm);
}

/* ---------- Hero scaffold ---------- */
.kfy-hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.kfy-hero__title { margin: 0 0 var(--kfy-space-sm); }
.kfy-hero__subtitle { margin: 0 0 var(--kfy-space-md); color: var(--kfy-color-ink-soft); }
.kfy-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--kfy-space-sm); }

/* ---------- Review badge cluster ---------- */
.kfy-reviews { display: flex; flex-wrap: wrap; gap: var(--kfy-space-sm); align-items: center; }
.kfy-reviews__badge {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .5em 1em; border-radius: var(--kfy-radius-pill);
	background: var(--kfy-color-paper-soft); border: 1px solid var(--kfy-color-border);
	font-weight: 600; font-size: .875rem;
}

/* ---------- CTA pair ---------- */
.kfy-cta-pair { display: flex; flex-wrap: wrap; gap: var(--kfy-space-sm); }

/* ---------- Certifications strip ---------- */
.kfy-certifications { display: flex; flex-wrap: wrap; gap: var(--kfy-space-md); align-items: center; justify-content: center; opacity: .85; }
.kfy-certifications img { max-height: 56px; width: auto; }

/* ---------- Breadcrumbs ---------- */
.kfy-breadcrumbs { font-size: .875rem; color: var(--kfy-color-muted); }
.kfy-breadcrumbs a { color: inherit; }
.kfy-breadcrumbs__sep { margin: 0 .35em; opacity: .5; }

/* ---------- Owner pill ---------- */
.kfy-owner-pill {
	display: inline-flex; align-items: center; gap: .65em;
	padding: .4em 1em .4em .4em;
	background: var(--kfy-color-paper);
	border: 1px solid var(--kfy-color-border);
	border-radius: var(--kfy-radius-pill);
	box-shadow: var(--kfy-shadow-sm);
	font-size: .875rem;
}
.kfy-owner-pill__avatar {
	width: 32px; height: 32px; border-radius: 50%; background: var(--kfy-color-paper-soft);
	display: inline-grid; place-items: center; overflow: hidden;
}

/* ---------- Visually hidden utility ---------- */
.kfy-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}