/* ==========================================================================
   PETSON — komponendid: nupud, päis, jalus, kaardid, vorm, akordion
   ========================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Peamine tegevus — alati "Küsi pakkumist".
   Topeltklass .btn.btn--primary on tahtlik: tumedas sektsioonis kehtiv
   ".on-dark a" reegel võidaks muidu nupu värvi üle ja tekst sulaks taustaga kokku. */
.btn.btn--primary {
  background: var(--brand-brass);
  color: var(--brand-ink);
  border-color: var(--brand-brass);
  font-weight: var(--weight-body-strong);
}
.btn.btn--primary:hover {
  background: var(--brand-brass-ink);
  border-color: var(--brand-brass-ink);
  color: var(--brand-paper);
}

.btn.btn--dark {
  background: var(--brand-ink);
  color: var(--brand-paper);
  border-color: var(--brand-ink);
}
.btn.btn--dark:hover { background: var(--brand-forest); border-color: var(--brand-forest); color: var(--brand-paper); }

.btn.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--line-strong);
}
.btn.btn--ghost:hover { border-color: var(--brand-ink); background: rgba(13, 15, 16, 0.04); color: var(--brand-ink); }

.on-dark .btn.btn--ghost { color: var(--text-on-dark); border-color: var(--line-on-dark); }
.on-dark .btn.btn--ghost:hover { border-color: var(--brand-paper); background: rgba(237, 233, 225, 0.08); color: var(--brand-paper); }

.btn--sm { padding: 0.7rem 1.15rem; font-size: var(--size-caption); }
.btn--block { width: 100%; }

/* Tekstilink noolega */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--size-small);
  font-weight: var(--weight-body-medium);
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 133, 80, 0.35);
  padding-bottom: 2px;
  transition: gap var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.link-arrow::after { content: "→"; font-family: var(--font-mono); }
.link-arrow:hover { gap: var(--space-sm); border-color: var(--brand-brass); }
.on-dark .link-arrow { color: var(--text-accent-on-dark); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 15, 16, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-on-dark);
  color: var(--text-on-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

/* Logo. Sõnamärk on pilt; kõrgus juhib mõõtu, laius arvutatakse suhtest.
   Tumedal taustal kasutame paberitoonis varianti, heledal /assets/logo-petson-ink.png. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--brand-paper);
  margin-right: auto;
}

/* Sõnamärgil on failis endal veeris, seega lõuendi kõrgus ei ole tähtede
   kõrgus: tähed on 135/248 ehk ~54% sellest numbrist. */
.logo__img {
  height: 38px;
  width: auto;
  flex: none;
}

.logo--footer .logo__img { height: 46px; }

/* Tekstiline varuvariant (.logo__mark) ja alapealkiri (.logo__tag) ei ole
   praegu kasutusel — päises on ainult logo. Reeglid on alles, kui neid
   hiljem vaja läheb. */
.logo__mark {
  font-family: var(--font-display);
  font-weight: var(--weight-display-regular);
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.logo__tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent-on-dark);
  padding-bottom: 1px;
}
.logo:hover { color: var(--brand-paper); }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nulli üldine loendiveeris. Flex-real koos align-items:center tähendaks
   viimase punkti puuduv alumine veeris, et ülejäänud nihkuvad paar pikslit üles. */
.site-nav li { margin: 0; }

.site-nav a {
  font-size: var(--size-small);
  font-weight: var(--weight-body-medium);
  color: var(--text-on-dark);
  text-decoration: none;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.site-nav a:hover { color: var(--brand-paper); border-color: var(--brand-brass); }
.site-nav a[aria-current="page"],
.site-nav li.active > a { color: var(--text-accent-on-dark); border-color: var(--brand-brass); }

.site-header__cta { flex: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1px; width: 100%;
  background: var(--brand-paper);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .site-header__inner { gap: var(--space-sm); }
  .site-header__cta .btn { padding: 0.7rem 1rem; font-size: var(--size-caption); }

  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--brand-ink);
    border-bottom: 1px solid var(--line-on-dark);
    padding: var(--space-md) var(--gutter) var(--space-xl);
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { margin: 0; border-bottom: 1px solid var(--line-on-dark); }
  .site-nav a { display: block; padding: var(--space-md) 0; border-bottom: 0; font-size: var(--size-body-lg); }
}

@media (max-width: 460px) {
  .logo__tag { display: none; }
  .logo__img { height: 32px; }
}

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

.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-footer__brand .logo { margin-right: 0; margin-bottom: var(--space-md); }

.footer-title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent-on-dark);
  margin-bottom: var(--space-md);
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--space-sm); }
.footer-list a { color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--size-small); }
.footer-list a:hover { color: var(--brand-paper); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  padding-top: var(--space-lg);
  font-size: var(--size-caption);
  color: var(--text-on-dark-muted);
}

/* --- CTA riba ------------------------------------------------------------- */

.cta-band {
  background: var(--surface-forest);
  color: var(--text-on-dark);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(169, 133, 80, 0.25);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 860px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.5fr) auto; }
}

.cta-band h2 { margin-bottom: var(--space-sm); }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* --- Usaldusnäitajad ------------------------------------------------------ */

.trust-bar { border-block: 1px solid var(--line-hairline); }
.on-dark .trust-bar,
.section--dark .trust-bar { border-color: var(--line-on-dark); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Ühtlane polster kõigil lahtritel, ka esimesel — tekst ei alga vastu
   eraldusjoont ega lahtri serva. */
.trust-item {
  padding: var(--space-xl) var(--space-lg);
  border-right: 1px solid var(--line-hairline);
}

.trust-item:last-child { border-right: 0; }
.section--dark .trust-item { border-color: var(--line-on-dark); }

@media (max-width: 700px) {
  /* Virnastatult ei ole eraldusjoont, mille eest polsterdada — hoiame teksti
     ülejäänud lehe vasaku servaga tasa. */
  .trust-item { border-right: 0; border-bottom: 1px solid var(--line-hairline); padding: var(--space-lg) 0; }
  .section--dark .trust-item { border-color: var(--line-on-dark); }
  .trust-item:last-child { border-bottom: 0; }
}

.trust-item__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-display-light);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--space-sm);
  color: inherit;
}
.trust-item__figure .ph { background: none; box-shadow: none; padding: 0; }

.trust-item__label {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
}
.section--dark .trust-item__label { color: var(--text-on-dark-muted); }

.trust-item__note {
  margin-top: var(--space-xs);
  font-size: var(--size-caption);
  color: var(--text-secondary);
  max-width: 32ch;
}
.section--dark .trust-item__note { color: var(--text-on-dark-muted); }

/* --- Kaardid -------------------------------------------------------------- */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card--dark {
  background: var(--surface-dark-alt);
  border-color: var(--line-on-dark);
  color: var(--text-on-dark);
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-accent);
}

.card h3 { margin-bottom: 0; }
.card p { margin-bottom: 0; }
.card__footer { margin-top: auto; padding-top: var(--space-sm); }

/* Andmerida — kasutame numbrite jaoks kogu saidil ühte mustrit. */
.data-list { margin: 0; padding: 0; }
.data-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line-hairline);
}
.data-list__row:last-child { border-bottom: 0; }
.on-dark .data-list__row,
.card--dark .data-list__row { border-color: var(--line-on-dark); }

.data-list__key {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.card--dark .data-list__key,
.on-dark .data-list__key { color: var(--text-on-dark-muted); }

.data-list__value {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
}

/* --- Sildid --------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.tag--accent { border-color: var(--brand-brass); color: var(--text-accent); }
.on-dark .tag { border-color: var(--line-on-dark); color: var(--text-on-dark-muted); }
.on-dark .tag--accent { border-color: var(--brand-brass); color: var(--text-accent-on-dark); }

.tag--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal-live);
  margin-right: 0.15rem;
}

.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* --- Pildi platshoidrid --------------------------------------------------- */

.media {
  position: relative;
  background: var(--surface-sunken);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--4x3 { aspect-ratio: 4 / 3; }
.media--5x4 { aspect-ratio: 5 / 4; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 3 / 4; }

/* Tühja pildikoha visuaal — kadub niipea, kui <img> lisatakse. */
.media__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-md);
  background-image: repeating-linear-gradient(
    45deg,
    transparent, transparent 9px,
    rgba(110, 115, 110, 0.09) 9px, rgba(110, 115, 110, 0.09) 10px
  );
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.media__placeholder strong { color: var(--text-accent); font-weight: var(--weight-body-medium); }

.media__caption {
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Foto omas kuvasuhtes. Erinevalt .media plokist ei suru see konteiner peale
   ühtki suhet ega kasuta object-fit: cover — ükskõik millise kuvasuhtega fail
   jääb tervikuna nähtavaks. Kasuta seda alati, kui pilti ei tohi kärpida. */
.photo { margin: 0; position: relative; }

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius);
}

/* Enne / pärast paar */
.beforeafter { display: grid; gap: var(--space-md); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .beforeafter { grid-template-columns: 1fr 1fr; } }

.beforeafter__item { position: relative; }
.beforeafter__stamp {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm);
  z-index: 2;
  background: var(--brand-ink);
  color: var(--brand-paper);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
}
.beforeafter__stamp--after { background: var(--brand-brass); color: var(--brand-ink); }
.beforeafter__stamp--during { background: var(--brand-stone); color: var(--brand-paper); }

/* Väiksemate piltide riba */
.gallery-strip {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* --- Tsitaat -------------------------------------------------------------- */

.quote {
  border-left: 2px solid var(--brand-brass);
  padding: var(--space-lg) 0 var(--space-lg) var(--space-xl);
  margin: 0;
}

.quote__text {
  font-family: var(--font-display);
  font-weight: var(--weight-display-light);
  font-style: italic;
  font-size: var(--size-h3);
  line-height: 1.45;
  margin: 0 0 var(--space-md);
  max-width: 46ch;
}

.quote__source {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-secondary);
  font-style: normal;
}
.on-dark .quote__source { color: var(--text-on-dark-muted); }

/* Ootel tsitaat — koht on olemas, sisu tuleb hiljem. */
.quote--pending {
  border-left-style: dashed;
  border-left-color: var(--brand-stone);
}
.quote--pending .quote__text { color: var(--text-secondary); }

/* --- Akordion (KKK) ------------------------------------------------------- */

.accordion { border-top: 1px solid var(--line-hairline); }

.accordion__item { border-bottom: 1px solid var(--line-hairline); }

.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-lg) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-display-regular);
  font-size: var(--size-h3);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}
.accordion__trigger:hover { color: var(--text-accent); }

.accordion__icon {
  flex: none;
  width: 24px; height: 24px;
  position: relative;
  margin-top: 0.35em;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: var(--brand-brass-ink);
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.accordion__icon::before { top: 50%; left: 0; width: 100%; height: 1px; }
.accordion__icon::after { left: 50%; top: 0; width: 1px; height: 100%; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); opacity: 0; }

.accordion__panel { display: none; padding-bottom: var(--space-lg); }
.accordion__panel[data-open="true"] { display: block; }
.accordion__panel p { color: var(--text-secondary); max-width: 72ch; }

/* --- Vorm ----------------------------------------------------------------- */

.form { display: grid; gap: var(--space-lg); }

.form__row {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.field { display: flex; flex-direction: column; gap: var(--space-xs); }

.field__label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field__label .req { color: var(--text-accent); }

.field__hint { font-size: var(--size-caption); color: var(--text-secondary); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand-ink); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-brass-ink);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 133, 80, 0.18);
}

.textarea { min-height: 140px; resize: vertical; line-height: var(--leading-body); }

/* Failiväli. Katkendjoon eristab selle täidetavatest väljadest — see on
   koht, kuhu midagi lohistatakse või lisatakse, mitte kuhu kirjutatakse. */
.file-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-small);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.file-input:hover { border-color: var(--brand-ink); }
.file-input:focus {
  border-color: var(--brand-brass-ink);
  border-style: solid;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 133, 80, 0.18);
}

.file-input::file-selector-button {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  font-weight: var(--weight-body-medium);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  margin-right: var(--space-md);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
.file-input::file-selector-button:hover {
  background: var(--brand-brass);
  border-color: var(--brand-brass);
  color: var(--brand-ink);
}

.field--invalid .file-input { border-color: #9B3A2F; border-style: solid; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-stone) 50%),
                    linear-gradient(135deg, var(--brand-stone) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: #9B3A2F; }

.field__error {
  font-size: var(--size-caption);
  color: #9B3A2F;
  display: none;
}
.field--invalid .field__error { display: block; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--size-small);
  color: var(--text-secondary);
}
.checkbox input { margin-top: 0.3em; accent-color: var(--brand-brass-ink); }


/* Märkeruudu väli: veateade jääb teksti alla, mitte kõrvale. */
.field .checkbox { margin-bottom: 0; }
.field--invalid .checkbox { color: #9B3A2F; }
.field--invalid .checkbox input { outline: 1px solid #9B3A2F; outline-offset: 2px; }

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.form__note { font-size: var(--size-caption); color: var(--text-secondary); }

/* Vormi all olev privaatsusviide. Ei ole märkeruut — vt quote-form.tpl. */
.form__consent {
  font-size: var(--size-caption);
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0;
}

/* Tekstinupp, mis näeb välja nagu link (jaluse küpsiste seaded). */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linklike:hover { color: var(--brand-paper); }

/* --- Küpsiste riba -------------------------------------------------------
   Püsib ekraani allservas, kuni valik on tehtud. Ei kata sisu kinni, sest
   riba on madal ja lehel on allpool niigi jalus. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-top: 1px solid var(--line-accent);
  box-shadow: 0 -12px 40px -24px rgba(13, 15, 16, 0.9);
}

.cookie-banner__inner {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter);
  display: grid;
  gap: var(--space-lg);
}

/* Laial ekraanil: selgitus vasakul, lülitid ja nupud paremal. */
@media (min-width: 980px) {
  .cookie-banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: var(--space-2xl);
    align-items: center;
  }
}

.cookie-banner__controls {
  display: grid;
  gap: var(--space-md);
}

.cookie-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.cookie-options li { margin: 0; }

.cookie-banner .checkbox {
  font-size: var(--size-caption);
  color: var(--text-on-dark-muted);
  align-items: center;
  gap: var(--space-sm);
}
.cookie-banner .checkbox input { margin-top: 0; accent-color: var(--brand-brass); }
.cookie-banner .checkbox strong { color: var(--text-on-dark); font-weight: var(--weight-body-medium); }
.cookie-banner .checkbox input:disabled + span { opacity: 0.7; }

.cookie-banner__title {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent-on-dark);
  margin: 0 0 var(--space-xs);
}

.cookie-banner__text p {
  font-size: var(--size-small);
  color: var(--text-on-dark-muted);
  margin: 0;
  max-width: 78ch;
}
.cookie-banner__text a { color: var(--text-accent-on-dark); }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.cookie-banner__actions .btn.btn--ghost {
  color: var(--text-on-dark);
  border-color: var(--line-on-dark);
}
.cookie-banner__actions .btn.btn--ghost:hover {
  border-color: var(--brand-paper);
  background: rgba(237, 233, 225, 0.08);
}

.form-status {
  display: none;
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--brand-brass);
  background: var(--surface-sunken);
  font-size: var(--size-small);
}
.form-status[data-visible="true"] { display: block; }

/* --- Voogi vormi ala ------------------------------------------------------
   Vormi märgendi renderdab Voog ise, seega sihime elemente, mitte klassinimesid.
   Nii saab Voogi vorm meie kujunduse ka siis, kui tema klassinimed muutuvad.
   Kui vorm on lehel olemas, tasub see üle vaadata ja vajadusel täpsustada. */

.form-area input[type="text"],
.form-area input[type="email"],
.form-area input[type="tel"],
.form-area input[type="number"],
.form-area select,
.form-area textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-body);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.form-area input:hover,
.form-area select:hover,
.form-area textarea:hover { border-color: var(--brand-ink); }

.form-area input:focus,
.form-area select:focus,
.form-area textarea:focus {
  border-color: var(--brand-brass-ink);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(169, 133, 80, 0.18);
}

.form-area textarea { min-height: 140px; resize: vertical; line-height: var(--leading-body); }

.form-area label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Märkeruudud ja raadionupud jäävad tavatekstiks, mitte sildistiiliks. */
.form-area label:has(input[type="checkbox"]),
.form-area label:has(input[type="radio"]) {
  font-family: var(--font-body);
  font-size: var(--size-small);
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.form-area input[type="checkbox"],
.form-area input[type="radio"] { width: auto; accent-color: var(--brand-brass-ink); margin-top: 0.25em; }

.form-area input[type="file"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--size-small);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.form-area button,
.form-area input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: var(--weight-body-strong);
  line-height: 1;
  padding: 0.95rem 1.6rem;
  background: var(--brand-brass);
  color: var(--brand-ink);
  border: 1px solid var(--brand-brass);
  border-radius: var(--radius);
  cursor: pointer;
  width: auto;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.form-area button:hover,
.form-area input[type="submit"]:hover {
  background: var(--brand-brass-ink);
  border-color: var(--brand-brass-ink);
  color: var(--brand-paper);
}

/* Voogi enda klassinimed. Need said teada alles siis, kui vorm oli lehel —
   Voog renderdab märgendi ise ja dokumentatsioon seda ei kirjelda. */

.form-area .form_field { margin-bottom: var(--space-lg); }
.form-area .form_field:last-child { margin-bottom: 0; }

.form-area .form_field_label {
  display: block;
  margin-bottom: var(--space-xs);
}
/* Märkeruudu ees on tühi sildi-div, mis tekitaks muidu lisavahe. */
.form-area .form_field_label:empty { display: none; }

.form-area .form_field_select {
  width: 100%;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brand-stone) 50%),
                    linear-gradient(135deg, var(--brand-stone) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.form-area .form_field_textfield,
.form-area .form_field_textarea { width: 100%; }

.form-area .form_field_checkbox_label {
  font-family: var(--font-body);
  font-size: var(--size-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: var(--leading-body);
}
.form-area .form_control_indicator { display: none; }

.form-area .form_field_file::file-selector-button {
  font-family: var(--font-body);
  font-size: var(--size-caption);
  font-weight: var(--weight-body-medium);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  margin-right: var(--space-md);
  cursor: pointer;
}
.form-area .form_field_file::file-selector-button:hover {
  background: var(--brand-brass);
  border-color: var(--brand-brass);
}

/* Tärn kohustuslikele väljadele. Voog lisab neile klassi form_field_required,
   seega tärn ilmub ja kaob automaatselt koos Voogi seadistusega — CSS-i ei ole
   vaja puutuda, kui mõne välja kohustuslikkus muutub.
   Märkeruudu juures on sildi-div tühi ja peidetud, seega tärn läheb tekstisildile. */
.form-area .form_field_required > .form_field_label::after,
.form-area .form_field_required > .form_field_checkbox_label::after {
  content: " *";
  color: var(--text-accent);
}

.form-area .form_submit { margin-top: var(--space-xl); }

/* Voogi peidetud rämpsupüünis ei tohi paigutust mõjutada. */
.form-area .form_area > div[style*="display: none"] { display: none !important; }

/* --- Sammud / protsess ---------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: var(--space-xl); }
.steps--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.step { border-top: 1px solid var(--line-hairline); padding-top: var(--space-md); }
.on-dark .step { border-color: var(--line-on-dark); }

.step__num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--text-accent);
  margin-bottom: var(--space-sm);
  display: block;
}
.step__num::before { content: "0" counter(step) " / "; }

.step h4 { margin-bottom: var(--space-xs); }
.step p { font-size: var(--size-small); color: var(--text-secondary); }
.on-dark .step p { color: var(--text-on-dark-muted); }