/*
Theme Name: Hexvorm
Theme URI: https://hexvorm.ee
Author: Hexvorm OÜ
Description: Hexvorm OÜ tehnilise 3D-printimise koduleht. Block theme, mis on genereeritud Pen-i disainifailist (disainitokenid, komponendid ja sektsioonid 1:1).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.5.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hexvorm
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo
*/

/* =========================================================================
   Hexvorm — komponentide stiilid
   Kõik värvid/spacing tulevad theme.json-ist (var(--wp--preset--…)).
   Ära kirjuta siia hardcoded värve — muuda theme.json-is.
   ========================================================================= */

:root {
  --hx-radius-sm: 4px;
  --hx-radius-md: 8px;
  --hx-radius-lg: 16px;
  --hx-radius-full: 9999px;
  --hx-gutter: var(--wp--preset--spacing--6);      /* 24px välisääris paneelidele */
  --hx-section-y: var(--wp--preset--spacing--section-y);
  --hx-section-x: var(--wp--preset--spacing--section-x);
  --hx-panel-x: var(--wp--preset--spacing--section-inner-x);
  --hx-section-gap: var(--wp--preset--spacing--section-gap);
  --hx-border: var(--wp--preset--color--border-default);
  --hx-fg: var(--wp--preset--color--fg-default);
  --hx-fg-muted: var(--wp--preset--color--fg-muted);
  --hx-bg: var(--wp--preset--color--bg-base);
  --hx-max: 1280px;
}

/* --- Baas ---------------------------------------------------------------- */

/* Padding ja ääris arvestatakse laiuse sisse. Ilma selleta paisuvad
   vormiväljad oma lahtrist välja ja söövad veergude vahed ära. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; height: auto; }

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(textarea:focus-visible),
:where(select:focus-visible),
:where(summary:focus-visible) {
  outline: 2px solid var(--hx-fg);
  outline-offset: 2px;
  border-radius: var(--hx-radius-sm);
}

.hx-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;
}

/* --- Sektsioonid --------------------------------------------------------- */

/* Tavaline sektsioon: 80px külgpadding, sisu max 1280px */
.hx-section {
  padding-block: var(--hx-section-y);
  padding-inline: var(--hx-section-x);
}
.hx-section > .hx-inner,
.hx-inner {
  max-width: var(--hx-max);
  margin-inline: auto;
  width: 100%;
}

/* Paneel-sektsioon: 24px välisääris + ümar värviline plokk */
.hx-bleed { padding-inline: var(--hx-gutter); }
.hx-panel {
  border-radius: var(--hx-radius-lg);
  padding: var(--hx-section-y) var(--hx-panel-x);
  overflow: hidden;
}
.hx-panel--slate { background: var(--wp--preset--color--surface-slate); color: var(--wp--preset--color--fg-on-slate); }
.hx-panel--slate :is(h1,h2,h3,h4,h5,h6,p,li,a) { color: var(--wp--preset--color--fg-on-slate); }
.hx-panel--subtle { background: var(--wp--preset--color--bg-subtle); }
.hx-panel--cool { background: var(--wp--preset--color--surface-cool); }

/* WP layout-klasside neutraliseerimine meie grid/flex konteinerites */
.hx-steps > *, .hx-service-grid > *, .hx-material-grid > *, .hx-hero > *,
.hx-contact > *, .hx-faq > *, .hx-header-split > *, .hx-footer__top > *,
.hx-step > *, .hx-service-card > *, .hx-material-card > *, .hx-tag-list > *,
.hx-badges > *, .hx-form > *, .hx-form__row > *, .hx-field > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.hx-inner > .wp-block-group { margin-block: 0; }

/* --- Nupud --------------------------------------------------------------- */

.hx-btn,
.wp-block-button__link {
  align-self: flex-start;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--1);
  border-radius: var(--hx-radius-full);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.5;
  font-weight: 400;
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hx-btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--wp--preset--color--brand-lime);
  color: var(--wp--preset--color--fg-on-brand);
  border: 1px solid transparent;
}
.hx-btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--wp--preset--color--brand-lime-hover);
}
.hx-btn--primary:active,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
  background: var(--wp--preset--color--brand-lime-active);
}
.hx-btn--ghost {
  background: transparent;
  color: var(--hx-fg);
  border: 1px solid transparent;
}
.hx-btn--ghost:hover { background: var(--wp--preset--color--bg-subtle); }
/* Teisene nupp — hall, nagu päise EE/EN keelevalik */
.hx-btn--secondary {
  background: var(--wp--preset--color--bg-subtle);
  color: var(--hx-fg);
  border: 1px solid transparent;
}
.hx-btn--secondary:hover { background: color-mix(in srgb, var(--wp--preset--color--bg-subtle) 82%, var(--hx-fg)); }
.hx-btn--secondary:active { background: color-mix(in srgb, var(--wp--preset--color--bg-subtle) 72%, var(--hx-fg)); }
.hx-btn[aria-disabled="true"],
.hx-btn:disabled {
  background: var(--wp--preset--color--bg-disabled);
  color: var(--wp--preset--color--fg-disabled);
  border-color: var(--wp--preset--color--border-default);
  pointer-events: none;
}

/* Nooleikooniga tekstilink */
.hx-link {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--wp--preset--spacing--1);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.6;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.hx-link:hover { border-bottom-color: currentColor; }
.hx-link::after {
  content: "";
  width: 16px; height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: var(--hx-arrow) center / 16px 16px no-repeat;
  mask: var(--hx-arrow) center / 16px 16px no-repeat;
  transition: transform .15s ease;
}
.hx-link:hover::after { transform: translateX(2px); }
:root {
  --hx-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M3.33 8h9.34"/><path d="M8 3.33 12.67 8 8 12.67"/></svg>');
}

/* Ümmargune ikooninupp (48×48) */
.hx-btn-icon {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border-radius: var(--hx-radius-full);
  background: var(--wp--preset--color--bg-base);
  border: 1px solid var(--hx-border);
  color: var(--hx-fg);
  flex: 0 0 48px;
}
.hx-btn-icon:hover { background: var(--wp--preset--color--bg-subtle); }

/* --- Päis ---------------------------------------------------------------- */

.hx-navbar {
  padding: var(--wp--preset--spacing--4) var(--hx-section-x);
  background: var(--hx-bg);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
}
.hx-navbar.is-stuck { border-bottom-color: var(--hx-border); }
.hx-navbar__inner {
  max-width: var(--hx-max);
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--wp--preset--spacing--2);
}
.hx-navbar__logo { display: inline-flex; color: var(--hx-fg); }
.hx-navbar__logo svg, .hx-navbar__logo img { width: 221px; height: auto; display: block; }
.hx-navbar__actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--wp--preset--spacing--12);
}
.hx-navbar__menu { display: flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.hx-navbar__menu a { text-decoration: none; font-size: var(--wp--preset--font-size--body-base); }
.hx-navbar__menu a:hover { text-decoration: underline; }
.hx-navbar__locale { display: flex; align-items: center; gap: var(--wp--preset--spacing--2); }
.hx-navbar .hx-btn { font-size: var(--wp--preset--font-size--body-base); }
.hx-navbar__locale a {
  font-size: var(--wp--preset--font-size--body-base);
  text-decoration: none;
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
  border-radius: var(--hx-radius-full);
}
.hx-navbar__locale a[aria-current="true"] { background: var(--wp--preset--color--bg-subtle); }
.hx-navbar__toggle { display: none; }

@media (max-width: 899px) {
  .hx-navbar__toggle {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px; margin-left: auto;
    background: none; border: 0; cursor: pointer; color: var(--hx-fg);
  }
  .hx-navbar__logo svg, .hx-navbar__logo img { width: 150px; }
  .hx-navbar__actions {
    display: none;
    position: absolute; left: var(--hx-gutter); right: var(--hx-gutter); top: 64px;
    flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--4);
    background: var(--hx-bg);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-radius-lg);
    padding: var(--wp--preset--spacing--4);
  }
  .hx-navbar.is-open .hx-navbar__actions { display: flex; }
  .hx-navbar__menu { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--4); }

  /* Avatud menüü: paneel päise all, lingid, nupp ja keelevalik üksteise all */
  .hx-navbar__toggle svg { display: block; }
  .hx-navbar__icon-close { display: none !important; }
  .hx-navbar.is-open .hx-navbar__icon-open { display: none !important; }
  .hx-navbar.is-open .hx-navbar__icon-close { display: block !important; }
  .hx-navbar__actions {
    top: 100%;
    left: 8px; right: 8px;
    gap: var(--wp--preset--spacing--6);
    padding: var(--wp--preset--spacing--6);
    box-shadow: 0 12px 32px rgb(22 23 31 / 0.12);
  }
  .hx-navbar__menu { align-items: stretch; gap: 0; }
  .hx-navbar__menu a {
    display: block;
    padding: var(--wp--preset--spacing--3) 0;
    font-size: var(--wp--preset--font-size--heading-sm);
  }
  .hx-navbar__group { display: flex; }
  .hx-navbar__group .hx-btn { width: 100%; justify-content: center; align-self: stretch; }
  .hx-navbar__locale {
    padding-top: var(--wp--preset--spacing--4);
    border-top: 1px solid var(--hx-border);
  }
}

/* --- Hero ---------------------------------------------------------------- */

.hx-hero {
  display: flex; gap: var(--hx-section-gap);
  align-items: flex-start;
}
.hx-hero > * { flex: 1 1 0; min-width: 0; }
.hx-hero h1 {
  font-size: var(--wp--preset--font-size--heading-xxl);
  line-height: 1.15;
  margin: 0;
}
.hx-hero p {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 899px) { .hx-hero { flex-direction: column; } }

/* Suur pildiplokk */
.hx-media {
  border-radius: var(--hx-radius-lg);
  overflow: hidden;
  background: var(--wp--preset--color--bg-subtle);
  display: grid; place-items: center;
  /* Disainilaud on 1392 px lai. Ilma piirita venib pilt laial ekraanil
     akna laiuseks ja kasvab kuvasuhte tõttu ka kõrgemaks kui ette nähtud. */
  max-width: 1392px;
  margin-inline: auto;
}
/* Pilt täidab raami alati ära, ükskõik mis mõõtu fail sisse pannakse.
   !important on siin vajalik: WordPress kirjutab pildiploki laiuse/kõrguse
   ise inline-stiiliks, kui keegi redaktoris mõõte puudutab. */
.hx-media img,
.hx-media > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}
.hx-media--hero { aspect-ratio: 1392 / 782; }

/* Pildiriba: kõrgus ei ole fikseeritud, vaid kuvasuhe — nii ei muutu
   riba kitsal ekraanil paberiribaks ega lai ekraanil liiga madalaks. */
.hx-media--band { aspect-ratio: 1392 / 300; height: auto; }
@media (max-width: 899px) { .hx-media--band { aspect-ratio: 3 / 2; } }
@media (max-width: 599px) { .hx-media--band { aspect-ratio: 4 / 3; } }

/* --- Kuidas töötab (StepList) -------------------------------------------- */

.hx-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--8);
}
.hx-step { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.hx-step__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); }
.hx-step__body > div { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.hx-step__icon { width: 40px; height: 40px; color: var(--hx-fg); }
.hx-step h3 {
  font-size: var(--wp--preset--font-size--heading-lg);
  line-height: 1.25; margin: 0;
}
.hx-step p { margin: 0; color: var(--hx-fg); }
.hx-header-split { display: flex; gap: var(--hx-section-gap); }
.hx-header-split > * { flex: 1 1 0; min-width: 0; }
.hx-header-split h2 { margin: 0; }
@media (max-width: 1099px) { .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .hx-steps { grid-template-columns: 1fr; } .hx-header-split { flex-direction: column; } }

/* --- Teenused ------------------------------------------------------------ */

.hx-services__header { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.hx-services__header p { max-width: 600px; font-size: var(--wp--preset--font-size--body-lg); margin: 0; }
.hx-services__title { display: flex; align-items: center; gap: var(--wp--preset--spacing--2); }
.hx-services__title h2 { margin: 0; }

.hx-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--4);
  margin-top: var(--wp--preset--spacing--12);
}
.hx-service-card {
  background: var(--wp--preset--color--bg-base);
  color: var(--hx-fg);
  border-radius: var(--hx-radius-lg);
  padding: var(--wp--preset--spacing--8);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--wp--preset--spacing--6);
  min-height: 293px;
}
.hx-service-card > div { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); }
.hx-panel--slate .hx-service-card :is(h3,p,a) { color: var(--hx-fg); }
.hx-service-card h3 {
  font-size: var(--wp--preset--font-size--heading-lg);
  line-height: 1.25;
  margin: 0;
}
/* Kuusnurk omaette real pealkirja kohal (Pen: 29×29, gap 24px) */
.hx-service-card__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); }
.hx-service-card p { margin: 0; }
.hx-hex {
  --hx-hex-size: 29px;
  width: var(--hx-hex-size); height: var(--hx-hex-size);
  flex: 0 0 var(--hx-hex-size);
  background: currentColor;
  -webkit-mask: var(--hx-hexmask) center / 100% 100% no-repeat;
  mask: var(--hx-hexmask) center / 100% 100% no-repeat;
}
:root {
  --hx-hexmask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 18"><path d="M8 0l8 4.5v9L8 18 0 13.5v-9z"/></svg>');
}
@media (max-width: 899px) { .hx-service-grid { grid-template-columns: 1fr; } }

.hx-tag-list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wp--preset--spacing--1);
  margin-top: var(--wp--preset--spacing--12);
}
.hx-tag {
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2);
  padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) 0;
  border-radius: var(--hx-radius-md);
  font-size: var(--wp--preset--font-size--heading-sm);
  color: var(--wp--preset--color--fg-on-slate);
}
.hx-tag .hx-hex { --hx-hex-size: 10px; }

/* --- Materjalid ---------------------------------------------------------- */

.hx-materials__header {
  display: flex; align-items: flex-end; gap: var(--wp--preset--spacing--4);
}
.hx-materials__header-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--5); }
.hx-materials__header-text h2 { margin: 0; }
.hx-materials__header-text p { margin: 0; font-size: var(--wp--preset--font-size--body-lg); }
.hx-materials__header-actions { flex: 0 0 auto; }
@media (max-width: 899px) { .hx-materials__header { flex-direction: column; align-items: flex-start; } }

.hx-material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--4);
  margin-top: var(--wp--preset--spacing--12);
}
.hx-material-card {
  background: var(--wp--preset--color--surface-cool-strong);
  border-radius: var(--hx-radius-lg);
  padding: var(--wp--preset--spacing--8);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--wp--preset--spacing--6);
}
@media (min-width: 900px) { .hx-material-card { min-height: 556px; } }
.hx-material-card h3 {
  font-size: var(--wp--preset--font-size--heading-lg);
  line-height: 1.25; margin: 0;
}
.hx-material-card__body {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--wp--preset--spacing--8); flex: 1 1 auto;
}
.hx-material-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--4); }
.hx-badges { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); }
.hx-badge {
  display: inline-flex; align-items: center;
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
  border: 1px solid var(--wp--preset--color--bg-base);
  border-radius: var(--hx-radius-full);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.5;
}
.hx-material-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.hx-material-list li { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1); }
.hx-material-list .hx-badge { align-self: flex-start; }
@media (max-width: 1099px) { .hx-material-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px) { .hx-material-grid { grid-template-columns: 1fr; } }

/* --- Materjalikaardi avamine/sulgemine (ilma JavaScriptita) --------------- */

/* --- Materjalikaartide avamine/sulgemine (ilma JavaScriptita) --- */
.hx-material-card { position: relative; }
.hx-mc-toggle { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.hx-mc-head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); }
.hx-mc-mark { display: block; }

/* Sujuv avanemine: grid-rida 0fr → 1fr. Ei vaja JavaScripti. */
.hx-mc-collapsed, .hx-mc-expanded {
  display: grid;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.hx-mc-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.hx-mc-collapsed { grid-template-rows: 1fr; opacity: 1; }
.hx-mc-expanded  { grid-template-rows: 0fr; opacity: 0; }

.hx-mc-toggle:checked ~ .hx-material-card__body .hx-mc-collapsed { grid-template-rows: 0fr; opacity: 0; }
.hx-mc-toggle:checked ~ .hx-material-card__body .hx-mc-expanded  { grid-template-rows: 1fr; opacity: 1; }

/* Avatuna: kuusnurk peitu, pealkiri 24px */
.hx-mc-toggle:checked ~ .hx-material-card__body .hx-hex { display: none; }
.hx-mc-toggle:checked ~ .hx-material-card__body h3 { font-size: var(--wp--preset--font-size--heading-md); }
.hx-mc-toggle:checked ~ .hx-material-card__body { justify-content: flex-start; }
.hx-material-card__body h3 { transition: font-size .3s cubic-bezier(.4,0,.2,1); }
.hx-material-card { transition: none; }

.hx-material-card__foot { justify-content: flex-start; }
.hx-mc-btn {
	width: 48px; height: 48px; flex: 0 0 48px;
	display: inline-grid; place-items: center;
	border-radius: 9999px; cursor: pointer;
	background: var(--wp--preset--color--brand-lime, #dbf900);
	border: 1px solid transparent;
	color: #17181c;
	transition: background-color .15s ease;
}
.hx-mc-btn:hover { background: #c6e000; }
.hx-mc-btn:active { background: #aec400; }
.hx-mc-toggle:focus-visible ~ .hx-material-card__foot .hx-mc-btn {
	outline: 2px solid #16171f; outline-offset: 2px;
}
/* Ikoon pöörleb +/− vahel täpselt samamoodi nagu KKK nupp */
.hx-mc-icon {
	display: block;
	width: 24px; height: 24px;
	background: currentColor;
	-webkit-mask: var(--hx-plus-24) center / 24px 24px no-repeat;
	mask: var(--hx-plus-24) center / 24px 24px no-repeat;
	transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hx-mc-toggle:checked ~ .hx-material-card__foot .hx-mc-icon {
	-webkit-mask-image: var(--hx-minus-24);
	mask-image: var(--hx-minus-24);
	transform: rotate(180deg);
}
.hx-mc-sr {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- KKK (accordion) ----------------------------------------------------- */

.hx-faq { display: flex; gap: var(--hx-section-gap); }
.hx-faq__header { flex: 0 0 500px; max-width: 500px; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.hx-faq__header h2 { margin: 0; }
.hx-faq__header p { margin: 0; }
.hx-faq__list { flex: 1 1 auto; border-bottom: 1px solid var(--hx-border); }
@media (max-width: 1099px) { .hx-faq { flex-direction: column; } .hx-faq__header { flex-basis: auto; max-width: none; } }

.hx-faq__item { border-top: 1px solid var(--hx-border); position: relative; }
.hx-faq__toggle { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.hx-faq__q {
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--6);
  padding: var(--wp--preset--spacing--6) 0;
  font-size: var(--wp--preset--font-size--heading-sm);
  line-height: 1.4;
}
.hx-faq__q::after {
  content: "";
  flex: 0 0 32px; width: 32px; height: 32px;
  background: currentColor;
  -webkit-mask: var(--hx-plus) center / 32px 32px no-repeat;
  mask: var(--hx-plus) center / 32px 32px no-repeat;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.hx-faq__toggle:checked ~ .hx-faq__q::after {
  -webkit-mask-image: var(--hx-minus);
  mask-image: var(--hx-minus);
  transform: rotate(180deg);
}
.hx-faq__toggle:focus-visible ~ .hx-faq__q {
  outline: 2px solid var(--hx-fg); outline-offset: 2px; border-radius: var(--hx-radius-sm);
}

/* Sujuv avanemine — sama võte mis materjalikaartidel */
.hx-faq__answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.hx-faq__toggle:checked ~ .hx-faq__answer { grid-template-rows: 1fr; }
.hx-faq__answer-inner { overflow: hidden; min-height: 0; }
.hx-faq__answer-inner p { margin: 0; padding-bottom: var(--wp--preset--spacing--6); max-width: 60ch; }
:root {
  --hx-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M16 9v14M9 16h14"/></svg>');
  --hx-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M9 16h14"/></svg>');
  --hx-plus-24: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');
  --hx-minus-24: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round"><path d="M5 12h14"/></svg>');
}

/* --- Kontakt ------------------------------------------------------------- */

.hx-contact { display: flex; gap: var(--hx-section-gap); }
.hx-contact > * { flex: 1 1 0; min-width: 0; }
.hx-contact__intro { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.hx-contact__intro h2 { margin: 0; }
.hx-contact__intro p { margin: 0; }
.hx-contact__details { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
.hx-contact__row { display: flex; align-items: center; gap: var(--wp--preset--spacing--3); }
.hx-contact__row a { text-decoration: none; }
.hx-contact__row a:hover { text-decoration: underline; }
@media (max-width: 899px) { .hx-contact { flex-direction: column; } }

/* Vormiväljad — kehtivad ka Contact Form 7 / Fluent Forms väljadele */
.hx-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--10); }
.hx-form__fields { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); }
.hx-form__row { display: flex; gap: var(--wp--preset--spacing--6); }
.hx-form__row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 599px) { .hx-form__row { flex-direction: column; } }

.hx-field { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); }
.hx-field > label,
.hx-field .hx-field__label {
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.5;
  color: var(--hx-fg);
}
.hx-field__hint { font-size: var(--wp--preset--font-size--body-sm); color: var(--hx-fg-muted); }

.hx-form input[type="text"],
.hx-form input[type="email"],
.hx-form input[type="tel"],
.hx-form input[type="url"],
.hx-form input[type="number"],
.hx-form select,
.hx-form textarea,
.hx-field input[type="text"],
.hx-field input[type="email"],
.hx-field input[type="tel"],
.hx-field select,
.hx-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  font: inherit;
  font-size: var(--wp--preset--font-size--body-base);
  color: var(--hx-fg);
  background: var(--wp--preset--color--bg-base);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-md);
  transition: border-color .15s ease;
}
.hx-form textarea, .hx-field textarea { min-height: 132px; resize: vertical; }
.hx-form :is(input,select,textarea)::placeholder { color: var(--wp--preset--color--fg-disabled); }
.hx-form :is(input,select,textarea):hover { border-color: #9e9faf; }
.hx-form :is(input,select,textarea):focus {
  border-color: var(--hx-fg);
  outline: 1px solid var(--hx-fg);
  outline-offset: 0;
}
.hx-form :is(input,select,textarea)[aria-invalid="true"],
.hx-form .wpcf7-not-valid {
  border-color: var(--wp--preset--color--border-error);
}
.hx-field__error { color: var(--wp--preset--color--fg-error); font-size: var(--wp--preset--font-size--body-sm); }

/* Teade pärast vormi saatmist */
.hx-form__notice {
  margin: 0;
  padding: var(--wp--preset--spacing--4);
  border-radius: var(--hx-radius-md);
  border-left: 3px solid;
  font-size: var(--wp--preset--font-size--body-base);
}
.hx-form__notice--ok {
  border-color: var(--wp--preset--color--brand-lime-border);
  background: color-mix(in srgb, var(--wp--preset--color--brand-lime) 22%, var(--wp--preset--color--bg-base));
  color: var(--hx-fg);
}
.hx-form__notice--error {
  border-color: var(--wp--preset--color--border-error);
  background: color-mix(in srgb, var(--wp--preset--color--border-error) 10%, var(--wp--preset--color--bg-base));
  color: var(--wp--preset--color--fg-error);
}

/* Failiväli — Pen: raamiga kast 48px, sisu paremal, sees "Vali fail" nupp */
.hx-file {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--wp--preset--spacing--3);
  width: 100%; height: 48px;
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-md);
  background: var(--wp--preset--color--bg-base);
  transition: border-color .15s ease;
}
.hx-file:hover { border-color: #9e9faf; }
.hx-file__input { position: absolute; opacity: 0; width: 0; height: 0; }
.hx-file__name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--wp--preset--font-size--body-sm);
  color: var(--hx-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-file__name:empty { display: none; }
.hx-file__btn {
  flex: 0 0 auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2);
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-md);
  font-size: var(--wp--preset--font-size--body-sm);
  line-height: 1.5;
  background: var(--wp--preset--color--bg-base);
  transition: background-color .15s ease;
}
.hx-file__btn:hover { background: var(--wp--preset--color--bg-subtle); }
.hx-file__input:focus-visible ~ .hx-file__btn {
  outline: 2px solid var(--hx-fg); outline-offset: 2px;
}

.hx-checkbox { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--3); font-size: var(--wp--preset--font-size--body-sm); }
.hx-checkbox input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; flex: 0 0 20px;
  accent-color: var(--wp--preset--color--brand-lime);
  border: 1px solid var(--hx-border); border-radius: var(--hx-radius-sm);
}

/* --- Jalus --------------------------------------------------------------- */

.hx-footer { padding: 0 var(--hx-gutter) var(--hx-gutter); }
.hx-footer__inner {
  border-radius: var(--hx-radius-lg);
  padding: var(--hx-section-y) var(--hx-panel-x);
  background: linear-gradient(180deg, #eeeef4 0%, #dbf900 34.6%, #9cd8f6 75%);
  color: var(--hx-fg);
  display: flex; flex-direction: column; gap: var(--hx-section-gap);
}
.hx-footer__top { display: flex; gap: var(--wp--preset--spacing--16); }
.hx-footer__top > * { flex: 1 1 0; min-width: 0; }
.hx-footer__label { font-size: var(--wp--preset--font-size--body-sm); color: var(--hx-fg-muted); margin: 0 0 var(--wp--preset--spacing--3); }
.hx-footer__row { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--3); margin: 0 0 var(--wp--preset--spacing--2); }
.hx-footer__row a { text-decoration: none; }
.hx-footer__row a:hover { text-decoration: underline; }
.hx-footer__social { display: flex; gap: var(--wp--preset--spacing--3); justify-content: flex-end; }
.hx-footer__logo { color: var(--hx-fg); display: flex; justify-content: flex-end; }
.hx-footer__logo .hx-logo { display: block; width: min(100%, 991px); }
.hx-footer__logo svg { width: 100%; height: auto; display: block; }
.hx-footer__bottom {
  border-top: 1px solid var(--hx-fg);
  padding-top: var(--wp--preset--spacing--6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wp--preset--spacing--6); flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--body-sm);
}
.hx-footer__links { display: flex; gap: var(--wp--preset--spacing--6); flex-wrap: wrap; }
.hx-footer__links a { text-decoration: none; }
.hx-footer__links a:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .hx-footer__top { flex-direction: column; gap: var(--wp--preset--spacing--8); }
  .hx-footer__social { justify-content: flex-start; }
}

/* --- Mobiili vertikaalne rütm (disaineri spetsifikatsioon) ---------------
   Kastiga sektsioon: 8px kasti ümber + 16px kasti sees = 24px sisuni.
   Kastita sektsioon: 24px. Kaartidel 32px püstpadding (Seff, 30.09).
   Külgpadding jääb puutumata — disainer täpsustas ainult püstsuunda.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* 8px kasti ümber: nii külgedel kui sektsioonide vahel */
  .hx-bleed { padding-inline: 8px; }
  .hx-section + .hx-section,
  .hx-section + .hx-bleed,
  .hx-bleed + .hx-section,
  .hx-bleed + .hx-bleed { margin-block-start: 8px; }

  /* 16px kasti sees */
  .hx-panel { padding-block: 16px; }
  .hx-footer { padding: 0 8px 8px; }
  .hx-footer__inner { padding-block: 16px; }

  /* 24px kastita sektsioonis */
  .hx-section { padding-block: 24px; }

  /* Kaardid */
  .hx-service-card,
  .hx-material-card { padding-block: 32px; }
}

/* --- Küpsiste teade ------------------------------------------------------ */

.hx-cookie {
  position: fixed; z-index: 100;
  right: var(--wp--preset--spacing--6); bottom: var(--wp--preset--spacing--6);
  width: min(440px, calc(100% - 16px));
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4);
  padding: var(--wp--preset--spacing--6);
  background: var(--hx-bg);
  color: var(--hx-fg);
  border: 1px solid var(--hx-border);
  border-radius: var(--hx-radius-lg);
  box-shadow: 0 16px 40px rgb(22 23 31 / 0.14);
}
.hx-cookie[hidden] { display: none; }
.hx-cookie__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wp--preset--spacing--4); }
.hx-cookie__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--heading-sm);
  line-height: 1.3;
}
.hx-cookie__close {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; margin: -4px -4px 0 0;
  background: none; border: 0; border-radius: var(--hx-radius-full);
  color: var(--hx-fg); cursor: pointer;
}
.hx-cookie__close:hover { background: var(--wp--preset--color--bg-subtle); }
.hx-cookie__text { margin: 0; font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; }
.hx-cookie__actions { display: flex; gap: var(--wp--preset--spacing--2); }
.hx-cookie__actions .hx-btn { flex: 1 1 0; justify-content: center; align-self: stretch; width: auto; cursor: pointer; font: inherit; font-size: var(--wp--preset--font-size--body-sm); }
@media (max-width: 599px) {
  .hx-cookie { left: 8px; right: 8px; bottom: 8px; width: auto; padding: var(--wp--preset--spacing--4); }
}
@media print { .hx-cookie { display: none !important; } }

/* --- Valikuline tume režiim ---------------------------------------------
   Disainis on olemas tumeda režiimi tokenid. Lülita sisse, lisades
   <html> elemendile klassi "hx-auto-dark" (functions.php-s on filter).
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  html.hx-auto-dark {
    --wp--preset--color--fg-default: #f1f2f4;
    --wp--preset--color--fg-muted: #a6abb5;
    --wp--preset--color--fg-disabled: #464b55;
    --wp--preset--color--fg-error: #f4bcbc;
    --wp--preset--color--bg-base: #23252a;
    --wp--preset--color--bg-subtle: #2c2f36;
    --wp--preset--color--bg-disabled: #2c2f36;
    --wp--preset--color--border-default: #464b55;
    --wp--preset--color--border-error: #eb8f8f;
    --wp--preset--color--surface-cool: #1b2831;
    --wp--preset--color--surface-cool-strong: #24363f;
  }
}

/* --- Print --------------------------------------------------------------- */
/* --- Sisulehed: loetav rea pikkus ---------------------------------------- */

.hx-prose { max-width: 68ch; }
.hx-prose > * + * { margin-block-start: var(--wp--preset--spacing--4); }
.hx-prose h2 { margin-block-start: var(--wp--preset--spacing--12); }
.hx-prose h3 { margin-block-start: var(--wp--preset--spacing--8); }
.hx-prose ul { padding-left: 1.25rem; }
.hx-prose li + li { margin-top: var(--wp--preset--spacing--2); }

@media print {
  .hx-navbar, .hx-footer__social { display: none; }
  .hx-panel, .hx-material-card, .hx-service-card { break-inside: avoid; }
}