/* ==========================================================================
   Komponenty – tlačítka, odkazy, navigace, přepínač
   ========================================================================== */

/* ---------- Tlačítka ---------- */

/* Dvě úrovně:
   – CTA (výchozí .btn, vede k poptávce / odesílá ji): zlatá + „čep“ se šipkou (.btn__go)
   – vedlejší (.btn--outline na světlém, .btn--ghost na tmavém, .btn--white): bez zlaté,
     tónová výplň, malá ikona směru (↓ sekce, ↗ jiná stránka) nebo kontaktu
   Textové odkazy (.link-arrow, Zpět) jsou třetí, nejtišší úroveň.

   Společný pohyb: při hoveru se zleva nasune výplň (--btn-sweep) a text změní barvu.
   CTA se zalije tmavým dřevem, vedlejší tmavou (na světlém) nebo bílou (na tmavém). */
.btn {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-ink);
  --btn-sweep: var(--c-wood);
  --btn-fg-hover: var(--c-cream);
  --btn-h: 3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  height: var(--btn-h);
  padding-inline: var(--s-3);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  /* zpět do klidu: základní barva se vrátí hned, výplň mezitím odjíždí */
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color 0s;
}

/* nasouvaná výplň – leží nad pozadím tlačítka, pod textem.
   O 1px přesahuje, aby na zaoblených okrajích neprosvítala základní barva. */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--btn-sweep);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur) var(--ease-out);
}

@media (hover: hover) {
  /* po dojetí výplně se přebarví i samotné tlačítko → žádný světlý lem */
  .btn:hover {
    color: var(--btn-fg-hover);
    background-color: var(--btn-sweep);
    transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color 0s linear var(--dur);
  }

  .btn:hover::before {
    clip-path: inset(0 0 0 0);
  }
}

.btn:focus-visible {
  color: var(--btn-fg-hover);
  background-color: var(--btn-sweep);
  transition: color var(--dur) var(--ease-out), background-color 0s linear var(--dur);
}

.btn:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.btn:active {
  transform: scale(0.97);
}

.btn--sm {
  --btn-h: 2.5rem;
}

.btn__label {
  display: block;
  padding-block: 0.15em;
}

/* ---------- CTA: šipka ----------
   Šipka je součástí tlačítka (bez oddělovače). Při hoveru odjede doprava a nová přijede zleva. */
.btn:has(> .btn__go) {
  justify-content: space-between; /* i při plné šířce zůstane šipka vpravo */
  gap: var(--s-2);
}

.btn__go {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out);
}

.btn__go svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur) var(--ease-out);
}

.btn__go svg + svg {
  transform: translateX(-120%);
}

@media (hover: hover) {
  .btn:hover .btn__go {
    color: var(--c-gold);
  }

  .btn:hover .btn__go svg:first-child {
    transform: translateX(120%);
  }

  .btn:hover .btn__go svg + svg {
    transform: none;
    transition-delay: 0.08s;
  }
}

/* ---------- Vedlejší: ikona směru za textem ---------- */
.btn__icon--end {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: -0.25rem;
  opacity: 0.72;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .btn:hover .btn__icon--end {
    opacity: 1;
    transform: translateY(2px);
  }

  .btn[href$=".html"]:hover .btn__icon--end {
    transform: translate(2px, -2px);
  }
}

.btn--white {
  --btn-bg: var(--c-white);
  --btn-sweep: var(--c-ink);
  --btn-fg-hover: var(--c-white);
}

.btn--dark {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-white);
  --btn-sweep: var(--c-gold);
  --btn-fg-hover: var(--c-ink);
}

/* Čtvercové tlačítko se šipkou ↗ */
.btn--icon {
  width: 3rem;
  padding: 0;
}

.btn--icon .icon-swap {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  overflow: hidden;
}

.icon-swap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform var(--dur) var(--ease-out);
}

.icon-swap svg + svg {
  transform: translate(-120%, 120%);
}

@media (hover: hover) {
  .btn--icon:hover .icon-swap svg:first-child,
  .group:hover .icon-swap svg:first-child {
    transform: translate(120%, -120%);
  }

  .btn--icon:hover .icon-swap svg + svg,
  .group:hover .icon-swap svg + svg {
    transform: none;
  }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

/* ---------- Odkaz se šipkou → ---------- */

/* Text + malý „čep“ se šipkou: při hoveru se čep zleva zalije (stejný pohyb jako u tlačítek). */
.link-arrow {
  --cep: var(--c-ink);
  --cep-fg: var(--c-cream);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
}

.link-arrow svg {
  box-sizing: content-box;
  flex: none;
  width: 1em;
  height: 1em;
  margin-block: -0.5rem;
  padding: 0.5rem;
  border-radius: calc(var(--r) / 2);
  background: linear-gradient(var(--cep), var(--cep)) no-repeat 0 0 / 0 100%;
  transition:
    background-size var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .link-arrow:hover svg,
  .group:hover .link-arrow svg {
    background-size: 100% 100%;
    color: var(--cep-fg);
    transform: translateX(2px);
  }
}

/* ---------- Navigace ---------- */

.site-header {
  position: fixed;
  top: calc(var(--inset) + var(--s-2));
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - var(--s-6)));
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  max-width: 60rem; /* užší plovoucí lišta uprostřed, ne přes celou šířku */
  margin-inline: auto;
  height: 3.5rem;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--r);
  background: rgba(5, 17, 7, 0.28);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--c-white);
  pointer-events: auto;
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.site-header.is-scrolled .nav {
  background: rgba(5, 17, 7, 0.82);
  box-shadow: 0 12px 32px -12px rgba(5, 17, 7, 0.35);
}

/* skrytá lišta nesmí nechat stín u horní hrany okna */
.site-header.is-hidden .nav {
  box-shadow: none;
}

.nav__logo {
  display: block;
  flex: none;
  padding-block: var(--s-1);
}

.nav__logo svg {
  width: 5.5rem;
  height: auto;
}

.nav__links {
  display: flex;
  gap: var(--s-3);
}

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--s-1);
  font-size: var(--fs-body);
  line-height: 1.5;
  opacity: 0.92;
  transition: opacity var(--dur-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .nav__link:hover {
    opacity: 1;
  }

  .nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Aktivní stránka – podtržení zůstává natažené a je zlaté (aktivní stav = zlatá) */
.nav__link[aria-current] {
  opacity: 1;
}

.nav__link[aria-current]::after {
  height: 1.5px;
  background: var(--c-gold);
  transform: scaleX(1);
}

/* ---------- Rozbalovací „Výkup dřeva“ ----------
   Tlačítko v liště otevře panel s typy výkupu (JS: assets/js/modules/nav.js, třída .is-open).
   Bez JS se panel ukáže při najetí myší a při fokusu klávesnicí. */

.nav__item--drop {
  position: relative;
}

.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* podtržení jen pod textem, ne pod šipkou */
.nav__link--drop::after {
  right: 1.25rem;
}

.nav__chevron {
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease-out);
}

.nav__item--drop.is-open .nav__chevron {
  transform: rotate(180deg);
}

/* aktivní sekce: na přehledu výkupu i na stránkách jednotlivých typů */
[data-nav="vykup"] .nav__link--drop {
  opacity: 1;
}

[data-nav="vykup"] .nav__link--drop::after {
  height: 1.5px;
  background: var(--c-gold);
  transform: scaleX(1);
}

/* panel visí pod lištou; horní průhledný okraj = most pro myš mezi tlačítkem a panelem */
.nav-drop {
  position: absolute;
  top: 100%;
  left: -1.5rem;
  z-index: 2;
  width: 38rem;
  padding-top: 1.25rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.nav__item--drop.is-open .nav-drop,
.no-js .nav__item--drop:hover .nav-drop,
.no-js .nav__item--drop:focus-within .nav-drop {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s;
}

.nav-drop__inner {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r);
  background: rgba(5, 17, 7, 0.94);
  box-shadow: 0 24px 48px -16px rgba(5, 17, 7, 0.45);
}

.nav-drop__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.nav-drop__link {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-areas:
    "thumb name"
    "thumb desc";
  align-content: center;
  column-gap: var(--s-2);
  padding: 0.5rem;
  border-radius: var(--r);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav-drop__thumb {
  grid-area: thumb;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: #4a3d2f;
}

.nav-drop__thumb--icon {
  display: grid;
  place-items: center;
  background: rgba(198, 147, 80, 0.16);
  color: var(--c-gold);
}

.nav-drop__thumb--icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-drop__name {
  grid-area: name;
  align-self: end;
  font-weight: var(--fw-medium);
  line-height: 1.35;
}

.nav-drop__desc {
  grid-area: desc;
  align-self: start;
  color: var(--c-on-dark-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* aktuální typ dřeva */
.nav-drop__link[aria-current] .nav-drop__name {
  color: var(--c-gold);
}

.nav-drop__all {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5rem;
  margin: 0 0 0.25rem 0.5rem;
  color: var(--c-on-dark-muted);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-drop__all svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--dur) var(--ease-out);
}

.nav-drop__all[aria-current="page"] {
  color: var(--c-gold);
}

@media (hover: hover) {
  .nav-drop__link:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .nav-drop__all:hover {
    color: var(--c-white);
  }

  .nav-drop__all:hover svg {
    transform: translateX(3px);
  }
}

/* Stránka bez tmavého hera: lišta je plná hned od začátku (i bez JS) */
[data-header="solid"] .site-header .nav,
.site-header.is-solid .nav {
  background: rgba(5, 17, 7, 0.82);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.nav__burger {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
}

.nav__burger span {
  position: absolute;
  left: 50%;
  width: 1.25rem;
  height: 1.5px;
  margin-left: -0.625rem;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}

.nav__burger span:first-child {
  top: calc(50% - 4px);
}

.nav__burger span:last-child {
  top: calc(50% + 3px);
}

.menu-open .nav__burger span:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.menu-open .nav__burger span:last-child {
  top: 50%;
  transform: rotate(-45deg);
}

/* Mobilní menu – odkazy nahoře pod lištou, typy výkupu jako dlaždice s miniaturou, akce dole */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: calc(var(--inset) + var(--s-2) + 3.5rem + var(--s-4)) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-ink);
  color: var(--c-white);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-slow) var(--ease-in-out), visibility 0s linear var(--dur-slow);
}

.menu-open .mobile-menu {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path var(--dur-slow) var(--ease-in-out), visibility 0s;
}

.menu-open .site-header {
  z-index: calc(var(--z-menu) + 1);
}

.mobile-menu__nav {
  display: grid;
  gap: var(--s-3);
}

.mobile-menu__group {
  display: grid;
  gap: var(--s-2);
}

.mobile-menu__link,
.mobile-menu__sub {
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}

.mobile-menu__link {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.menu-open .mobile-menu__link,
.menu-open .mobile-menu__sub {
  transform: none;
  opacity: 1;
}

.menu-open .mobile-menu__group .mobile-menu__link { transition-delay: 0.12s; }
.menu-open .mobile-menu__sub { transition-delay: 0.18s; }
.menu-open .mobile-menu__nav > .mobile-menu__link:nth-child(2) { transition-delay: 0.24s; }
.menu-open .mobile-menu__nav > .mobile-menu__link:nth-child(3) { transition-delay: 0.28s; }
.menu-open .mobile-menu__nav > .mobile-menu__link:nth-child(4) { transition-delay: 0.32s; }

/* typy výkupu: dlaždice 2 × 2 s miniaturou jako v rozbalovacím menu na desktopu */
.mobile-menu__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__sublink {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-white);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  transition: background var(--dur-fast) var(--ease-out);
}

.mobile-menu__sublink:active,
.mobile-menu__sublink[aria-current] {
  background: rgba(198, 147, 80, 0.2);
}

.mobile-menu__thumb {
  display: block;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--r) / 1.5);
  object-fit: cover;
}

.mobile-menu__thumb--icon {
  display: grid;
  place-items: center;
  background: var(--c-gold);
  color: var(--c-ink);
}

.mobile-menu__thumb--icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Aktivní stránka – malý zlatý „trám“ za textem */
.mobile-menu__link[aria-current]::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.3em;
  border-radius: 2px;
  background: var(--c-gold);
  vertical-align: 0.12em;
}

/* akce přichycené dole */
.mobile-menu__actions {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  margin-top: auto;
  opacity: 0;
  transform: translateY(16px);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}

.menu-open .mobile-menu__actions {
  opacity: 1;
  transform: none;
  transition-delay: 0.36s;
}

.mobile-menu__cta {
  width: auto;
}

.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding-block: 0.25rem;
  color: var(--c-on-dark-muted);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.mobile-menu__phone svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-gold);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__link,
  .mobile-menu__sub,
  .mobile-menu__actions {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: block;
  }
}

@media (max-width: 479px) {
  .nav__cta {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* ---------- Přepínač (Vykupujeme / Nevykupujeme) ---------- */

.toggle {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--c-chip);
  isolation: isolate;
}

.toggle__btn {
  position: relative;
  height: 3rem;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.toggle__btn[aria-selected="true"] {
  color: var(--c-white);
  background: transparent;
}

.toggle__indicator {
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 1;
  height: calc(100% - 0.5rem);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  pointer-events: none;
}

.toggle__btn span {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  .toggle__btn[aria-selected="false"]:hover {
    background: rgba(255, 255, 255, 0.55);
  }
}

/* Bez JS – aktivní tlačítko má černé pozadí samo */
.no-js .toggle__btn[aria-selected="true"] {
  background: var(--c-ink);
}

/* ---------- Obrysové tlačítko (sekundární akce, např. WhatsApp) ---------- */

.btn--outline {
  --btn-bg: rgba(5, 17, 7, 0.06);
  --btn-fg: var(--c-ink);
  --btn-sweep: var(--c-ink);
  --btn-fg-hover: var(--c-white);
}

.btn__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.btn--outline .btn__icon {
  color: #1f9d55; /* WhatsApp zelená, ztlumená do palety */
}

/* ==========================================================================
   Dotykové cíle – min. 44 × 44 px na mobilu a dotykových displejích.
   Vizuální velikost zůstává, plocha se rozšíří paddingem (u bloků a inline-flex
   se záporným okrajem vrací původní rozložení).
   ========================================================================== */

@media (pointer: coarse), (max-width: 899px) {
  .link-arrow,
  .kontakt-social {
    padding-block: 0.625rem;
    margin-block: -0.625rem;
  }

  /* inline odkazy – padding rozšíří jen zásahovou plochu, řádek se nezvětší */
  .quote__phone,
  .quote__mail,
  .footer__legal,
  .breadcrumbs a {
    padding-block: 0.625rem;
  }

  .quote-progress li > button {
    min-width: 2.75rem;
    height: 2.75rem;
  }

  .breadcrumbs a {
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
  }

  /* patička: odkazy pod sebou mají celé řádky 44 px, mezera se přesune do paddingu */
  .footer__col {
    gap: 0;
  }

  .footer__col > a,
  .footer__col > span {
    padding-block: 0.625rem;
  }

  .footer__socials {
    gap: 1.5rem;
  }

  .footer__social {
    box-sizing: content-box;
    padding: 0.75rem;
    margin: -0.75rem;
  }
}

/* ==========================================================================
   Žlutá komponenta pro chybějící údaje a nepotvrzené podmínky (klientský náhled)
   <span class="legal-placeholder legal-placeholder--doplnit">[DOPLNIT: IČO]</span>
   Varianty: --doplnit · --potvrdit · --pravne (liší se textovým štítkem i stylem čáry)
   Používá se v právních dokumentech i v patičce, dokud chybí skutečné údaje.
   ========================================================================== */

:root {
  /* žlutá pro poznámky ke kontrole klientem – dostatečný kontrast tmavého textu (≈ 11 : 1) */
  --legal-yellow: #fff1a8;
  --legal-yellow-soft: #fff9d6;
  --legal-yellow-line: #b08800;
  --legal-yellow-ink: #3a2e00;
}

.legal-placeholder {
  display: inline;
  padding: 0.0625rem 0.375rem;
  border: 1.5px solid var(--legal-yellow-line);
  border-radius: 4px;
  background: var(--legal-yellow);
  color: var(--legal-yellow-ink);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.legal-placeholder--potvrdit {
  border-style: dashed;
}

.legal-placeholder--pravne {
  border-style: double;
  border-width: 3px;
}