/* wg:design-vars:start */
:root{--wg-surface:#ffffff;--wg-surface-alt:#f2f2f2;--wg-surface-inverse:#1b1b1b;--wg-ink:#1b1b1b;--wg-ink-muted:#585858;--wg-ink-inverse:#f8f8f8;--wg-primary:#585858;--wg-primary-hover:#424242;--wg-primary-soft:#f8f8f8;--wg-accent:#ff6a6b;--wg-accent-soft:#ffedec;--wg-link:#424242;--wg-link-inverse:#d4d4d4;--wg-line:#e4e4e4;--wg-line-inverse:#424242;--wg-primary-on:#ffffff;--wg-accent-on:#090909;--wg-font-display:'Spectral', Georgia, 'Times New Roman', serif;--wg-font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-radius-ui:0px;--wg-radius-card:0px;--wg-shadow-card:none;--wg-section:8rem}
/* wg:design-vars:end */
/* ==========================================================================
   Drvodom Interijeri — finishing touches
   ========================================================================== */

/* ---- Base transitions -------------------------------------------------- */
a,
button,
input,
textarea,
select {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    opacity 0.2s ease, transform 0.2s ease;
}

/* ---- Header sticky / scrolled state ------------------------------------ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

#site-header.is-scrolled {
  border-bottom-color: var(--wg-line);
  background-color: var(--wg-surface);
}

/* ---- Mobile menu transition (visibility handled by Tailwind .hidden) --- */
#mobile-menu {
  transition: opacity 0.25s ease;
}

/* ---- Cookie banner ------------------------------------------------------ */
#cookie-banner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---- Form focus / error states ------------------------------------------ */
input,
textarea,
select {
  border: 1px solid var(--wg-line);
  border-radius: var(--wg-radius-ui);
  background-color: var(--wg-surface);
  color: var(--wg-ink);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wg-primary);
  box-shadow: 0 0 0 2px var(--wg-primary-soft);
}

input.error,
textarea.error,
select.error {
  border-color: var(--wg-accent);
}

input.error:focus,
textarea.error:focus,
select.error:focus {
  box-shadow: 0 0 0 2px var(--wg-accent-soft);
}

.form-error-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #dc2626;
}

.form-success-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #15803d;
}

/* ---- Decorative: single accent underline per section heading ----------- */
.section h2,
.section h1 {
  position: relative;
  padding-bottom: 0.75rem;
}

.section h2::after,
.section h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 2px;
  background-color: var(--wg-accent);
}

.text-center.section h2::after,
.text-center.section h1::after,
.mx-auto.section h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Tiny labels (eyebrow already styled globally — minor polish) ------ */
.eyebrow {
  letter-spacing: 0.08em;
}

/* ---- Subtle animations that fit a quiet, minimal art direction --------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease both;
}

.animate-fade-in {
  animation: fade-in 0.6s ease both;
}

/* Gentle hover lift reserved for genuinely clickable cards (links/buttons) */
a.card:hover,
.card.is-interactive:hover {
  border-color: var(--wg-primary);
}

/* ---- Back to top button -------------------------------------------------- */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-2px);
}

/* ---- Accordion content transition --------------------------------------- */
.accordion-content {
  transition: opacity 0.3s ease;
}

.accordion-header i {
  transition: transform 0.3s ease;
}

.accordion-header.is-open i {
  transform: rotate(180deg);
}

/* ---- img-frame subtle fade for lazy-loaded images ----------------------- */
.img-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Print rules ---------------------------------------------------------- */
@media print {
  #site-header,
  #mobile-menu,
  #cookie-banner,
  #back-to-top,
  footer {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}