/* Tektis components (tk-*), from the Tektis design system. Tokens map to theme.json presets. */
:root {
  --surface: var(--wp--preset--color--surface);
  --surface-raised: var(--wp--preset--color--surface-raised);
  --surface-sunken: var(--wp--preset--color--surface-sunken);
  --line: var(--wp--preset--color--line);
  --line-strong: var(--wp--preset--color--line-strong);
  --ink: var(--wp--preset--color--ink);
  --ink-muted: var(--wp--preset--color--ink-muted);
  --petrol: var(--wp--preset--color--petrol);
  --petrol-deep: var(--wp--preset--color--petrol-deep);
  --petrol-soft: var(--wp--preset--color--petrol-soft);
  --on-petrol: var(--wp--preset--color--on-petrol);
  --on-petrol-deep: var(--wp--preset--color--on-petrol-deep);
  --salbei: var(--wp--preset--color--salbei);
  --salbei-soft: var(--wp--preset--color--salbei-soft);
  --gold: var(--wp--preset--color--gold);
  --gold-text: var(--wp--preset--color--gold-text);
  --gold-soft: var(--wp--preset--color--gold-soft);
  --on-gold: var(--wp--preset--color--on-gold);
  --danger: var(--wp--preset--color--danger);
  --danger-soft: var(--wp--preset--color--danger-soft);
  --seal-ground: var(--wp--preset--color--seal-ground);
  --seal-ink: var(--wp--preset--color--seal-ink);
  --link: var(--wp--preset--color--petrol);
  --focus-ring: var(--wp--preset--color--petrol);
  --space-1: var(--wp--preset--spacing--1);
  --space-2: var(--wp--preset--spacing--2);
  --space-3: var(--wp--preset--spacing--3);
  --space-4: var(--wp--preset--spacing--4);
  --space-6: var(--wp--preset--spacing--6);
  --space-8: var(--wp--preset--spacing--8);
  --space-12: var(--wp--preset--spacing--12);
  --space-16: var(--wp--preset--spacing--16);
  --space-24: var(--wp--preset--spacing--24);
  --radius-sm: var(--wp--custom--radius--sm);
  --radius-md: var(--wp--custom--radius--md);
  --radius-lg: var(--wp--custom--radius--lg);
  --radius-pill: var(--wp--custom--radius--pill);
  --shadow-card: var(--wp--preset--shadow--card);
  --font-serif: var(--wp--preset--font-family--serif);
  --font-sans: var(--wp--preset--font-family--sans);
}

/* Tektis — component styles. Class-based (tk-*) so the same CSS can be copied into WordPress (Additional CSS / child theme). Needs tokens.css. */

.tk-root, .tk-root * { box-sizing: border-box; }

/* ---------- Button ---------- */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 600 17px/24px var(--font-sans); text-decoration: none; cursor: pointer;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md);
  border: 2px solid transparent; transition: background-color .15s ease, border-color .15s ease;
}
.tk-btn--lg { font-size: 19px; line-height: 26px; padding: 14px 28px; }
.tk-btn--primary { background: var(--gold); color: var(--on-gold); }
.tk-btn--primary:hover { background: var(--gold-text); color: var(--surface-raised); }
.tk-btn--secondary { background: var(--petrol); color: var(--on-petrol); }
.tk-btn--secondary:hover { background: var(--petrol-deep); color: var(--on-petrol-deep); }
.tk-btn--outline { background: transparent; color: var(--petrol); border-color: var(--line-strong); }
.tk-btn--outline:hover { border-color: var(--petrol); background: var(--petrol-soft); }
.tk-btn:focus-visible, .tk-faq summary:focus-visible, .tk-link:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.tk-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.tk-btn svg { width: 18px; height: 18px; flex: none; }

.tk-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Badge ---------- */
.tk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/20px var(--font-sans); padding: 2px 12px 2px 10px;
  border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink);
}
.tk-badge svg { width: 14px; height: 14px; flex: none; }
.tk-badge--petrol  { background: var(--petrol-soft); color: var(--petrol); }
.tk-badge--success { background: var(--salbei-soft); color: var(--salbei); }
.tk-badge--gold    { background: var(--gold-soft); color: var(--gold-text); }
.tk-badge--danger  { background: var(--danger-soft); color: var(--danger); }

/* ---------- Callout ---------- */
.tk-callout {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--petrol-soft); color: var(--ink); font: 400 17px/28px var(--font-sans);
}
.tk-callout > svg { width: 24px; height: 24px; margin-top: 2px; color: var(--petrol); }
.tk-callout__title { margin: 0 0 2px; font-weight: 600; }
.tk-callout p { margin: 0; }
.tk-callout--success { background: var(--salbei-soft); }
.tk-callout--success > svg { color: var(--salbei); }
.tk-callout--gold { background: var(--gold-soft); }
.tk-callout--gold > svg { color: var(--gold-text); }
.tk-callout--danger { background: var(--danger-soft); }
.tk-callout--danger > svg { color: var(--danger); }

/* ---------- Steps ---------- */
.tk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: tk-step; }
.tk-steps--row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tk-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; }
.tk-steps--row .tk-step { grid-template-columns: 1fr; gap: var(--space-3); }
.tk-step__num {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center; background: var(--petrol); color: var(--on-petrol);
  font: 600 24px/1 var(--font-serif);
}
.tk-step--done .tk-step__num { background: var(--salbei); color: var(--on-petrol); }
.tk-step__kicker { font: 600 13px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); margin: 0 0 4px; }
.tk-step__title { font: 600 22px/30px var(--font-serif); margin: 0 0 4px; color: var(--ink); }
.tk-step__text { font: 400 17px/28px var(--font-sans); margin: 0; color: var(--ink-muted); }

/* ---------- Checklist ---------- */
.tk-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.tk-check { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-3); align-items: start; font: 400 17px/28px var(--font-sans); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.tk-check:last-child { border-bottom: 0; }
.tk-check__box { width: 22px; height: 22px; margin-top: 3px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); display: grid; place-items: center; }
.tk-check--done .tk-check__box { background: var(--salbei); border-color: var(--salbei); color: var(--surface-raised); }
.tk-check__box svg { width: 14px; height: 14px; }
.tk-check__ref { font: 400 14px/28px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }

/* ---------- Guarantee seal ---------- */
.tk-seal { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); max-width: 560px; }
.tk-seal__badge { display: block; width: auto; flex: none; }
.tk-seal__badge .sg-ground { fill: var(--seal-ground); }
.tk-seal__badge .sg-ink { fill: var(--seal-ink); }
.tk-seal__badge .sg-gold { fill: var(--gold); }
.tk-seal__badge .sg-gold-s { stroke: var(--gold); }
.tk-seal__title { margin: 0; font: 600 22px/30px var(--font-serif); color: var(--ink); }
.tk-seal__text { margin: 4px 0 0; font: 400 17px/26px var(--font-sans); color: var(--ink-muted); }
.tk-seal__link { display: inline-block; margin-top: var(--space-2); font: 400 15px/22px var(--font-sans); }

/* ---------- Price card ---------- */
.tk-price {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--line); max-width: 380px;
}
.tk-price--featured { border: 2px solid var(--petrol); box-shadow: var(--shadow-card); }
.tk-price__kicker { margin: 0; font: 600 13px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); }
.tk-price__title { margin: 0; font: 600 22px/30px var(--font-serif); }
.tk-price__amount { margin: 0; font: 600 44px/48px var(--font-serif); color: var(--ink); }
.tk-price__note { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
.tk-price__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font: 400 17px/26px var(--font-sans); }
.tk-price__list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); }
.tk-price__list svg { width: 18px; height: 18px; margin-top: 4px; color: var(--salbei); }

/* ---------- FAQ ---------- */
.tk-faq { border-bottom: 1px solid var(--line); }
.tk-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; font: 600 20px/28px var(--font-serif); color: var(--ink);
}
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--petrol); transition: transform .15s ease; }
.tk-faq[open] summary svg { transform: rotate(45deg); }
.tk-faq__.tk-faq__body p { margin: 0 0 var(--space-3); }

/* ---------- Logo ---------- */
.tk-logo { display: inline-block; width: auto; vertical-align: middle; }
.tk-logo .lg-ink { fill: var(--ink); }
.tk-logo .lg-gold { fill: var(--gold); }
.tk-logo .lg-tile { fill: var(--seal-ground); }
.tk-logo .lg-on-tile { fill: var(--seal-ink); }
.tk-logo--reverse .lg-ink { fill: var(--on-petrol-deep); }
.tk-logo--mono .lg-gold { fill: var(--ink); }
.tk-logo--mono.tk-logo--reverse .lg-gold { fill: var(--on-petrol-deep); }