/* =============================================================================
   footer.css — footer sa newsletter formom.

   Struktura i imena klasa preuzeti iz Congra footer komponente (footer_layout /
   footer_content / links / link + link_wrap.is-bot / form_footer / footer_bottom).
   Congrine `.column` grupe su izbačene — linkovi idu u jednom toku kroz
   multi-column `.links`, bez podnaslova. Sve je skoulovano pod `.footer` jer su
   `.link`, `.links` i `.submit` previše generička imena da bi stajala u globalnom
   cascade-u pored 6.700 linija Webflow stilova iz dm-deco-art.css.

   Tokeni (boje, fontovi, spacing) su iz teme, ne iz Congre — DESIGN.md je
   autoritet: Playfair/Cormorant/UI sans + #C8A353, bez Anton/Geist.
   ============================================================================= */

.footer {
  /* Lokalni tokeni koji fale u :root teme (DESIGN.md §2). */
  --footer-ivory: #F5EFE1;
  --footer-ivory-secondary: #D9CBA3;
  --footer-muted: #8A8477;
  --footer-surface: #121110;
  --footer-hairline: rgba(200, 163, 83, .22);
  --footer-hairline-strong: rgba(200, 163, 83, .4);
  /* Isti ease koji tema već koristi na svim link/button tranzicijama. */
  --footer-ease: cubic-bezier(.645, .045, .355, 1);

  background-color: var(--color--darkest);
  color: var(--footer-ivory);
}

.footer_layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--xl);
  padding-top: var(--spacing--xxl);
  padding-bottom: var(--spacing--l);
}

/* --- Gornji red: logo | dve kolone linkova | newsletter -------------------- */

.footer_content {
  display: grid;
  grid-template-columns: auto 1fr minmax(17.5rem, 23rem);
  align-items: start;
  gap: var(--spacing--xl);
}

.footer_brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--m);
}

.footer_logo-link {
  display: inline-block;
  flex: none;
}

/* Instagram — isti partial kao u navbaru (template-parts/social-instagram.php). */
.footer_social-link {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--footer-ivory-secondary);
  transition: color .4s var(--footer-ease);
}

/* Ikonica je 20px, a dodir traži 44px. Pseudo-element širi pogodak bez diranja
   layouta, pa optičko poravnanje sa logotipom ostaje netaknuto. */
.footer_social-link::after {
  content: "";
  position: absolute;
  inset: -.75rem;
}

.footer_social-link .social-icon {
  width: 100%;
  height: 100%;
}

.footer_social-link:hover {
  color: var(--color--accent);
}

.footer_social-link:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 6px;
}

.footer_logo-link img {
  width: 8.75rem;
  height: auto;
  display: block;
}

.footer_logo-link:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 4px;
}

/* Jedan tok linkova, tri kolone. Multi-column umesto grida: broj tehnika je
   dinamičan, pa se raspodela sama balansira umesto da poslednji red ostane
   krnj. Čita se niz kolonu, tako da navigacija ostaje na okupu u prvoj. */
.footer .links {
  column-count: 3;
  column-gap: var(--spacing--l);
  justify-self: center;
  width: 100%;
  max-width: 44rem;
}

/* --- Link sa double-label hover roll-om ----------------------------------- */

.footer .link {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: var(--footer-ivory-secondary);
  border-radius: 2px;
}

/* Razmak nosi sam link: u multi-column kontekstu nema flex `gap` roditelja.
   break-inside sprečava da se link prelomi preko granice kolone — tamo bi mu
   `overflow: hidden` odsekao donji label i roll bi pukao. */
.footer .links .link {
  margin-bottom: var(--spacing--xs);
  break-inside: avoid;
}

.footer .links .link:last-child {
  margin-bottom: 0;
}

.footer .link_wrap {
  transition: transform .4s var(--footer-ease), color .4s var(--footer-ease);
}

/* Donji (duplirani) label sedi tačno preko gornjeg, isti box => isti prelom
   teksta, pa se par nikad ne razilazi ni kad se naziv tehnike prelomi u dva reda. */
.footer .link_wrap.is-bot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  color: var(--color--accent);
}

.footer .link:hover .link_wrap,
.footer .link:focus-visible .link_wrap {
  transform: translateY(-100%);
}

.footer .link:hover .link_wrap.is-bot,
.footer .link:focus-visible .link_wrap.is-bot {
  transform: translateY(0);
}

.footer .link:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 3px;
}

/* Aktivna strana: gornji label stoji u zlatnom, hover roll i dalje radi.
   Kači se na [aria-current], ne na .w--current — Webflow-ov `links` modul skida
   tu klasu sa svega gde href nije znak-za-znak jednak location.href (isto kao u
   header navigaciji, vidi .nav-link-underline u dm-deco-art.css). */
.footer .link[aria-current="page"] .link_wrap {
  color: var(--color--accent);
}

.footer .text-sm {
  font-family: var(--font--ui-font);
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .01em;
}

.footer .u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Newsletter ----------------------------------------------------------- */

.footer .submit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--xs);
  min-width: 0;
}

.footer_newsletter-label {
  margin: 0;
  font-family: var(--font--body-font);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--footer-ivory-secondary);
  max-width: 22rem;
}

.footer .form_footer {
  margin: 0;
}

.footer .form_submit {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* overflow:hidden da dugme unutra ne mora da nosi svoj (netokenizovan)
     unutrašnji radijus — roditelj mu odseca ugao. */
  overflow: hidden;
  border: 1px solid var(--footer-hairline);
  border-radius: 2px;
  background-color: var(--footer-surface);
  transition: border-color .4s var(--footer-ease);
}

.footer .form_submit:focus-within {
  border-color: var(--color--accent);
}

.footer .form_field {
  flex: 1;
  min-width: 0;
  height: 2.875rem;
  margin: 0;
  padding: 0 .875rem;
  border: 0;
  background-color: transparent;
  color: var(--footer-ivory);
  font-family: var(--font--ui-font);
  font-size: .875rem;
  line-height: 1.25;
}

.footer .form_field:focus {
  border: 0;
  outline: 0;
}

.footer .form_field::placeholder {
  color: var(--footer-muted);
  font-size: .875rem;
}

.footer .submit_button {
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--color--accent);
  color: var(--color--darkest);
  cursor: pointer;
  transition: background-color .4s var(--footer-ease), transform .2s var(--footer-ease);
}

.footer .submit_button:hover {
  background-color: #D3B468;
}

.footer .submit_button:active {
  transform: scale(.98);
}

.footer .submit_button:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 2px;
}

.footer .submit_button svg {
  width: .75rem;
  height: 1.5rem;
}

/* Webflow-ov .w-form-done nosi svetlu pozadinu i 20px padding — resetuj na dark.
   display:none je ponovljen ovde namerno: tako stanje forme ne zavisi od toga da
   li se webflow.css učita pre ili posle ovog fajla. */
.footer .w-form-done,
.footer .w-form-fail {
  display: none;
  padding: .625rem 0 0;
  background-color: transparent;
  text-align: left;
  font-family: var(--font--ui-font);
  font-size: .875rem;
  line-height: 1.5;
}

.footer .w-form-done {
  color: var(--color--accent);
}

.footer .w-form-fail {
  margin-top: 0;
  color: #A8453A;
}

/* --- Donja traka ---------------------------------------------------------- */

.footer_bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--s);
  padding-top: var(--spacing--m);
  border-top: 1px solid var(--footer-hairline);
  font-family: var(--font--ui-font);
  font-size: .75rem;
  line-height: 1.5;
}

.footer .text-color-secondary {
  color: var(--footer-muted);
}

.footer_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing--s);
}

.footer .link.is-mini {
  font-family: var(--font--ui-font);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--footer-muted);
  transition: color .4s var(--footer-ease);
}

.footer .link.is-mini:hover,
.footer .link.is-mini:focus-visible {
  color: var(--color--accent);
}

/* Bez newsletter kolone red ima samo logo i linkove — zakotvi ih na suprotne
   ivice umesto da linkovi lebde u sredini pored prazne treće trake. */
.footer_content.is-compact {
  grid-template-columns: auto minmax(0, 44rem);
  justify-content: space-between;
}

/* Puna širina trake, ne skupljanje na sadržaj — inače se obe kolone stisnu u
   desni ugao i prazninu u sredini nema šta da drži. */
.footer_content.is-compact .links {
  width: 100%;
  justify-self: end;
}

/* --- Responsive ----------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .footer_content {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing--xl-tablet);
  }

  .footer_brand {
    grid-column: 1 / -1;
  }

  .footer .links {
    justify-self: start;
    max-width: none;
  }

  /* Samo dva bloka — nema šta da deli red na pola, pa linkovi idu punom širinom
     ispod logotipa. */
  .footer_content.is-compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer_content.is-compact .links {
    justify-self: start;
  }
}

@media screen and (max-width: 767px) {
  .footer_layout {
    gap: var(--spacing--xl-mobile);
    padding-top: var(--spacing--xxl-tablet);
  }

  .footer_content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing--xl-mobile);
  }

  /* Logotip i ikonica se centriraju zajedno kao blok. */
  .footer_brand {
    grid-column: auto;
    justify-self: center;
    align-items: center;
    gap: var(--spacing--s);
  }

  /* Tri kolone na 390px daju ~110px po koloni — "Beton tehnika" se tu prelama
     u dva reda. Na telefonu ide na dve. */
  .footer .links {
    column-count: 2;
    column-gap: var(--spacing--s);
    max-width: none;
  }

  .footer_bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing--xs);
  }

  .footer_links {
    gap: var(--spacing--m-mobile);
  }
}

/* =============================================================================
   Lepljiva traka za poziv (.dm-callbar)

   Stoji u ovom fajlu, a ne u contact.css, jer se renderuje u podnožju na
   svakoj stranici — contact.css se učitava samo na /kontakt/. Markup:
   template-parts/contact-sticky.php.

   Vidljiva je samo na telefonu: na desktopu je broj u zaglavlju i podnožju
   dovoljno blizu, a fiksna traka bi bez potrebe jela visinu ekrana.
   ============================================================================= */

.dm-callbar {
  display: none;
}

@media screen and (max-width: 767px) {
  .dm-callbar {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    border-top: 1px solid var(--footer-hairline, rgba(200, 163, 83, .22));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .dm-callbar_inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    background-color: rgba(200, 163, 83, .22);
  }

  .dm-callbar_link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    background-color: #121110;
    color: #F5EFE1;
    font-family: var(--font--ui-font);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
  }

  /* Poziv je jedini kanal sa zlatnom ispunom — DESIGN.md drži zlato u
     manjini, pa ostali kanali nose samo tamnu podlogu. */
  .dm-callbar_link.is-telefon {
    background-color: #C8A353;
    color: #0A0A0A;
  }

  .dm-callbar_link.is-telefon:active {
    background-color: #A9822F;
  }

  .dm-callbar_link:not(.is-telefon):active {
    background-color: #17150F;
  }

  /* Traka prekriva dno stranice — podnožje dobija prostor za nju, da poslednji
     red linkova ne ostane ispod. */
  body.dm-has-callbar .footer {
    padding-bottom: 4rem;
  }
}

/* --- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .footer .link_wrap,
  .footer .submit_button {
    transition-duration: .01ms;
  }

  /* Bez roll-a: donji label se ne koristi, hover je čista promena boje. */
  .footer .link_wrap.is-bot {
    display: none;
  }

  .footer .link:hover .link_wrap,
  .footer .link:focus-visible .link_wrap {
    transform: none;
    color: var(--color--accent);
  }

  .footer .submit_button:active {
    transform: none;
  }
}