/* Zenturi Theme - Footer (tmavý mega footer)
   Newsletter + stĺpce menu + Kontakt + Praktické pomôcky + tagline + vlnovka.
   Na mobile (<1200px) sa stĺpce a pomôcky menia na accordiony. */

.zn-footer {
  /* Footer beží v tmavej scheme - Black Blue podklad, krémové bordery (primary-lighter @60%) */
  --zn-f-border: rgba(253, 233, 180, .6);
  background: var(--color-text);
  color: var(--color-white);
  padding-block: clamp(4rem, 7.8vw, 7rem);
}

.zn-footer__inner {
  width: min(100% - 2 * var(--container-padding), var(--container-max));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.zn-footer a { color: var(--color-white); }
.zn-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── NEWSLETTER ─────────────────────────────────────────────────────────────── */

.zn-footer__newsletter {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.zn-footer__news-text { max-width: 560px; }

.zn-footer__news-title {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  font-weight: var(--weight-regular);
  color: var(--color-white);
}
.zn-footer__news-title em {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-light);
}
.zn-footer__news-desc {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-white);
}

.zn-footer__news-form { width: 400px; display: flex; flex-direction: column; gap: 12px; }

/* CF7 aj fallback: riadok input + button */
.zn-footer__news-form form,
.zn-footer__news-form .wpcf7-form p {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
}
.zn-footer__news-form .wpcf7-form-control-wrap { flex: 1 1 auto; }
.zn-footer__news-form input[type="email"] {
  width: 100%;
  height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--zn-f-border);
  border-radius: var(--radius-input);
  background: transparent;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-white);
}
.zn-footer__news-form input[type="email"]::placeholder { color: var(--color-bg-medium); }
.zn-footer__news-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary-lighter);
}
.zn-footer__news-form input[type="submit"],
.zn-footer__news-form button[type="submit"] {
  height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-button);
  background: var(--color-white);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--color-black);
  cursor: pointer;
  white-space: nowrap;
}
.zn-footer__news-form input[type="submit"]:hover,
.zn-footer__news-form button[type="submit"]:hover { background: var(--color-primary-lighter); border-color: var(--color-primary-lighter); }

/* CF7 servisné prvky na tmavom podklade */
.zn-footer__news-form .wpcf7-spinner { position: absolute; }
.zn-footer__news-form .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--text-xs);
  color: var(--color-primary-lighter);
}
.zn-footer__news-form .wpcf7-not-valid-tip { font-size: var(--text-xs); color: var(--color-primary); }

.zn-footer__gdpr {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--color-white);
}
.zn-footer__gdpr a {
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── DIVIDER ────────────────────────────────────────────────────────────────── */

.zn-footer__divider {
  border: 0;
  border-top: 1px solid var(--zn-f-border);
  margin: 0;
  width: 100%;
}

/* ── STĹPCE ─────────────────────────────────────────────────────────────────── */

.zn-footer__grid {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.zn-footer__col { flex: 1 1 0; min-width: 0; }
.zn-footer__col--footer-3 { flex: 0 0 180px; }

.zn-footer__col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 16px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  color: var(--color-white);
  text-align: left;
}
.zn-footer__col-head .zn-nav__caret { display: none; }

.zn-footer__list { display: flex; flex-direction: column; }
.zn-footer__list > li { padding-block: 8px; }
.zn-footer__list a,
.zn-footer__list address {
  font-size: var(--text-sm);
  line-height: 1.5;
  font-style: normal;
  color: var(--color-white);
}

/* Kontakt */
.zn-footer a.zn-footer__phone {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zn-footer__list--contact address { white-space: pre-line; }
.zn-footer__socials { display: inline-flex; align-items: center; gap: 24px; }
.zn-footer__socials img { display: block; width: 24px; height: 24px; }

/* ── PRAKTICKÉ POMÔCKY ──────────────────────────────────────────────────────── */

.zn-footer__tools {
  padding: 24px;
  border: 1px solid var(--zn-f-border);
  border-radius: var(--radius-md);
}
.zn-footer__tools .zn-footer__col-head { margin-bottom: 8px; }

.zn-footer__list--tools {
  display: block;
  columns: 6;
  column-gap: 24px;
}
.zn-footer__list--tools > li { break-inside: avoid; }
.zn-footer__list--tools a {
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* ── TAGLINE ────────────────────────────────────────────────────────────────── */

.zn-footer__tagline {
  text-align: center;
  font-size: clamp(2.375rem, 1.39rem + 4vw, 5rem);
  line-height: 1;
  font-weight: var(--weight-regular);
  color: var(--color-primary);
  /* NAŠE riešenie proti osamotenému slovu, NIE hodnota z Figmy (tabletový frame
     v dizajne neexistuje). Pri ~768 vychádzal zlom „Keď vám na raste vašej firmy" /
     „záleží" — druhý riadok jedno slovo. `balance` rozdelí riadky rovnomerne bez
     hardcodovaného `<br>`, takže to drží pri akejkoľvek šírke aj po zmene textu.
     Prehliadače bez podpory ho ignorujú a správajú sa ako doteraz. */
  text-wrap: balance;
}
.zn-footer__tagline em {
  font-style: italic;
  font-weight: var(--weight-tagline);
}

/* ── VLNOVKA + COPYRIGHT ────────────────────────────────────────────────────── */

.zn-footer__band { display: flex; flex-direction: column; gap: 32px; }

/* Figma (857:49401, Credits): každá strana = 2 samostatné kópie toho istého
   wave.svg vedľa seba, KAŽDÁ naťahovaná na presnú šírku svojej flex:1 bunky
   (nie CSS `background-repeat: repeat-x` jednej dlhej lišty). Dôvod zmeny
   (Maroš 2026-07-23, "vlnka vo footri sa zle vykresľuje"): `repeat-x` s
   `background-size: auto 100%` v premenlivo širokej flex:1 bunke orezáva
   poslednú dlaždicu uprostred vlnky namiesto celého motívu — presne pri švíku
   vedľa loga, kde je to najviac vidieť. Fix: `aspect-ratio` drží proporciu
   SVG (276.25×19.1162 z viewBoxu) a `background-size: 100% 100%` naťahuje
   CELÝ motív (bez orezu) na šírku, ktorú flex:1 pridelí — presne ako vo Figme. */
.zn-footer__waves {
  display: flex;
  align-items: center;
  gap: 16px;
}
.zn-footer__wave-group {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.zn-footer__wave {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 276.25 / 19.1162;
  height: clamp(6.4px, 1.33vw, 19.12px);
  background: url('../img/footer/wave.svg') no-repeat center;
  background-size: 100% 100%;
}
/* Mobil: na stranu JEDNA vlnka, nie dve.
   Figma mobil (1181:71001 → Credits → Frame 15912, 361×52) má v každom bočnom frame
   (15950 / 15951) dva Vectory, ale jeden je HIDDEN — viditeľný je 93×6.435,
   skrytý 42×2.906. Pomer 93/6.435 = 14.45 = presne pomer wave.svg (276.25/19.1162),
   a 19.1162 × (93/276.25) = 6.435 → mobilná vlnka je ten istý tvar zmenšený na 93px.
   My sme do skupiny kreslili obe kópie, každú s `flex: 1 1 0` na polovicu šírky
   (45.8×6.39 @393) — pri `background-size: 100% 100%` to tvar horizontálne stlačilo
   a zdvojnásobilo frekvenciu vĺn. Po skrytí druhej dostane zvyšná celú skupinu
   (91.5×6.39 = pomer 14.32 ≈ prirodzených 14.45), takže sa už nedeformuje.
   DESKTOP ZOSTÁVA DVOJKÓPIOVÝ — Figma ho tak má a CLAUDE.md to explicitne chráni
   (riadok o „wave.svg 2-kópiová štruktúra ... Figma ju má takto zámerne"); to pravidlo
   platí pre desktop, mobil je iný stav toho istého komponentu, nie jeho porušenie. */
@media (max-width: 767.98px) {
  .zn-footer__wave-group .zn-footer__wave:nth-child(2) { display: none; }
  /* Výšku nechá dopočítať `aspect-ratio`, nie `clamp`. Podlaha clampu (6.4px) sa pod 393
     prestane zmenšovať so šírkou, takže by sa tvar znova stláčal (@375 pomer 13.04 namiesto
     14.45). S `auto` drží prirodzený pomer na každej mobilnej šírke. */
  .zn-footer__wave { height: auto; }
}

.zn-footer__logo { display: block; width: 143px; height: auto; flex-shrink: 0; }

.zn-footer__copy {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
}

/* ── MOBILE (accordiony) ────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
  .zn-footer__inner { gap: var(--space-20); }

  .zn-footer__newsletter { flex-direction: column; gap: 24px; }
  .zn-footer__news-desc { font-size: var(--text-base); }
  .zn-footer__news-form { width: 100%; }
  .zn-footer__news-form form,
  .zn-footer__news-form .wpcf7-form p { flex-direction: column; align-items: stretch; }
  .zn-footer__news-form input[type="submit"],
  .zn-footer__news-form button[type="submit"] { width: 100%; }

  .zn-footer__grid { flex-direction: column; gap: 16px; }

  /* Poradie podľa návrhu: Kontakt, Porovnanie, Riešenia, Odvetvia, Zdroje, Podmienky */
  .zn-footer__col--kontakt  { order: -2; margin-bottom: 24px; }
  .zn-footer__col--kontakt .zn-footer__col-head { margin-bottom: 0; }
  .zn-footer__col--footer-5 { order: -1; }

  .zn-footer__col { flex: none; width: 100%; }
  .zn-footer__col--footer-3 { flex: none; }

  /* Accordion hlavička */
  .zn-footer__col[data-zn-acc] .zn-footer__col-head,
  .zn-footer__tools .zn-footer__col-head {
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--zn-f-border);
    cursor: pointer;
  }
  .zn-footer__col-head .zn-nav__caret { display: block; margin-left: 0; transition: transform var(--transition-fast); }
  [data-zn-acc].is-open .zn-footer__col-head .zn-nav__caret { transform: rotate(180deg); }

  /* Obsah accordionu */
  [data-zn-acc] .zn-footer__list { display: none; padding-top: 8px; }
  [data-zn-acc].is-open .zn-footer__list { display: flex; }
  [data-zn-acc].is-open .zn-footer__list--tools { display: block; }

  /* Pomôcky = rovnaký accordion, bez boxu */
  .zn-footer__tools { padding: 0; border: 0; border-radius: 0; }
  .zn-footer__list--tools { columns: 1; }
  .zn-footer__list--tools a { font-size: var(--text-sm); line-height: 1.5; }

  .zn-footer__phone { font-size: var(--text-lg); }

  .zn-footer__band { padding-bottom: 16px; }
}