/* ============================================================
   Ahmetović Dental studio — stil sajta

   Učitava se POSLJEDNJI, iza sekcijskih stilova i brend.css-a.
   Sekcijski raspored se ne dira: ovdje idu samo boje, pismo,
   veličine, razmaci, zaobljenja, sjenke i podloge.

   Paleta je izvedena iz logotipa firme: podloga znaka je
   #3D3634 (izmjereno iz slike logotipa), pismo znaka je bijelo.
   Akcent je toplo mesingana nijansa iz iste porodice.
   ============================================================ */

:root {
  /* Visina zaglavlja pod drugim imenom — sekcijski --header-h se
     ne smije vezati sam na sebe, to je ciklus. */
  --head-h: 80px;

  --c-canvas-brand:    #2C2523;
  --c-canvas-brand-dp: #241E1C;
  --c-canvas-brand-lt: #453C39;

  color-scheme: light;
}

@media (max-width: 900px) { :root { --head-h: 66px; } }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  background: #faf7f3;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: #faf7f3;
  color: #2b2523;
  font-family: var(--font-sans);
  /* clip siječe, a ne pravi kontejner za skrol — sticky ostaje živ */
  overflow-x: clip;
}

.band { position: relative; }

/* Zaglavlje: .site-head je sticky, ali mu je roditelj sekcija visoka
   koliko i sama traka, pa otklizi poslije ~70 px. Ljepljivost se zato
   prebacuje na traku sastavljača, koja traje kroz cijelu stranicu. */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ============================================================
   1. TOKENI — jedna paleta i jedno pismo na svih 11 sekcija
   ============================================================ */

.sec-fernhill-header,
.sec-haven-hero,
.sec-fundament-services,
.sec-aperta-referenzen,
.sec-nordlicht-parallax,
.sec-fernhill-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-housecall-faq,
.sec-aperta-cta,
.sec-housecall-footer {
  /* ---------- pismo: Nunito za naslove, Inter za tekst ---------- */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* ---------- neutrali ---------- */
  --c-bg:          #faf7f3;
  --c-bg-alt:      #f2ede6;
  --c-white:       #ffffff;
  --c-surface:     #f0e9e0;
  --c-ink:         #2e2827;
  --c-text:        #2b2523;
  --c-text-muted:  #645a55;
  --c-on-dark:     #f5f1ec;
  --c-on-dark-mu:  rgba(245, 241, 236, 0.78);
  --c-line:        rgba(45, 37, 35, 0.12);
  --c-line-strong: rgba(45, 37, 35, 0.24);
  --c-line-dark:   rgba(245, 241, 236, 0.24);

  /* ---------- brend ---------- */
  --c-primary:     var(--primary);
  --c-primary-dk:  #2b2523;
  --c-primary-lt:  #8a817d;
  --c-primary-08:  rgba(61, 54, 52, 0.08);
  --c-primary-14:  rgba(61, 54, 52, 0.14);
  --c-primary-16:  rgba(61, 54, 52, 0.16);

  /* brend.css ne veže iste tokene u svim sekcijama — zato ih ovdje
     vežem sam, za sve sekcije odjednom. */
  --c-accent:      var(--accent);
  --c-accent-dk:   var(--accent-strong);
  --c-accent-lt:   #d9bd94;
  --c-accent-soft: var(--accent-soft);
  --c-accent-tint: rgba(195, 155, 95, 0.22);

  --c-whatsapp:    #0b7367;
  --c-whatsapp-dk: #085c52;
  --c-star:        #c39b5f;

  /* ---------- tamna platna (nordlicht) ---------- */
  --c-canvas:      var(--c-canvas-brand);
  --c-canvas-lt:   var(--c-canvas-brand-lt);
  --c-canvas-dp:   var(--c-canvas-brand-dp);
  --c-panel:       #faf7f3;
  --c-panel-alt:   #f2ede6;
  --c-on-canvas:   #f5f1ec;
  --c-on-canvas-mu: rgba(245, 241, 236, 0.78);
  --c-line-canvas: rgba(245, 241, 236, 0.18);

  /* ---------- sjenke: tople, niske i široke ---------- */
  --sh-xs: 0 1px 2px rgba(45, 37, 35, 0.05);
  --sh-sm: 0 4px 14px -8px rgba(45, 37, 35, 0.18);
  --sh-md: 0 14px 34px -18px rgba(45, 37, 35, 0.26);
  --sh-lg: 0 28px 60px -26px rgba(45, 37, 35, 0.32);
  --sh-xl: 0 46px 92px -36px rgba(45, 37, 35, 0.38);

  /* ---------- zaobljenja ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 14px;

  /* ---------- ritam ---------- */
  --section-y: clamp(62px, 8vw, 112px);
  --gutter:    clamp(20px, 5vw, 44px);
  --maxw:      1180px;

  /* ---------- tipografska skala ---------- */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --fs-h4:   clamp(1.125rem, 0.5vw + 1.02rem, 1.375rem);
  --fs-h3:   clamp(1.3125rem, 0.9vw + 1.1rem, 1.75rem);
  --fs-h2:   clamp(1.75rem, 2vw + 1.28rem, 2.75rem);
  --fs-h1:   clamp(2.25rem, 3.4vw + 1.35rem, 3.875rem);

  --ls-tight: -0.015em;
  --ls-label: 0.14em;
}

/* Nunito nosi malo više težine nego serifi iz templata — naslovi se
   zato drže na 700, a ne na 600. */
.sec-fernhill-header :is(h1, h2, h3, h4),
.sec-haven-hero :is(h1, h2, h3, h4),
.sec-fundament-services :is(h1, h2, h3, h4),
.sec-aperta-referenzen :is(h1, h2, h3, h4),
.sec-nordlicht-parallax :is(h1, h2, h3, h4),
.sec-fernhill-about :is(h1, h2, h3, h4),
.sec-quiet-hours-results :is(h1, h2, h3, h4),
.sec-fundament-instagram :is(h1, h2, h3, h4),
.sec-housecall-faq :is(h1, h2, h3, h4),
.sec-aperta-cta :is(h1, h2, h3, h4),
.sec-housecall-footer :is(h1, h2, h3, h4) {
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

/* Brojevi (telefon, vrijeme, ocjena) u Interu — Nunito im daje
   previše karaktera i loše se poravnavaju. */
.u-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ============================================================
   2. DUGMAD I ZNAČKE — isti oblik u svih 11 sekcija
   ============================================================ */

.sec-fernhill-header .u-btn,
.sec-haven-hero .u-btn,
.sec-nordlicht-parallax .u-btn,
.sec-fernhill-about .u-btn,
.sec-aperta-cta .u-btn,
.sec-housecall-footer .u-btn {
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* Akcent je mesing — bijeli tekst na njemu ne prolazi. Podloga
   akcentnog dugmeta ide na tamniju nijansu iz iste porodice. */
.sec-nordlicht-parallax .u-btn--accent {
  --btn-bg: var(--c-accent-dk);
  --btn-fg: #ffffff;
  box-shadow: var(--sh-md);
}
.sec-nordlicht-parallax .u-btn--accent:hover { --btn-bg: #67492a; }

.sec-fernhill-header .u-btn--solid,
.sec-fernhill-about .u-btn--solid { box-shadow: var(--sh-sm); }

/* ============================================================
   3. ZAGLAVLJE
   ============================================================ */

/* Meni i zaglavlje su u istom slaganju, pa traka zaglavlja pokrije vrh
   panela — zajedno sa dugmetom za zatvaranje. Panel ima svoje dugme i
   svoju zavjesu, pa smije ići iznad trake. */
.sec-fernhill-header { --z-menu: 300; }

.sec-fernhill-header .site-head {
  background: rgba(250, 247, 243, 0.9);
  border-bottom: 1px solid transparent;
}
.sec-fernhill-header .site-head.is-stuck {
  background: rgba(250, 247, 243, 0.94);
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 22px -18px rgba(45, 37, 35, 0.7);
}

.sec-fernhill-header .brand__mark {
  width: 34px; height: 34px;
  color: var(--c-primary);
  --mark-line: #faf7f3;
}
.sec-fernhill-header .brand__tx strong {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--c-primary-dk);
}
.sec-fernhill-header .brand__tx small {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.sec-fernhill-header .site-nav a { font-weight: 600; }
.sec-fernhill-header .head-tel { font-weight: 700; }
.sec-fernhill-header .head-tel svg { color: var(--c-accent-dk); }
.sec-fernhill-header .head-cta { padding: 12px 22px; }

.sec-fernhill-header .drawer__panel { background: var(--c-bg); }
.sec-fernhill-header .drawer__list a { font-weight: 600; }
.sec-fernhill-header .drawer__hours { color: var(--c-text-muted); }

.sec-fernhill-header .mobile-bar {
  background: rgba(250, 247, 243, 0.96);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -10px 30px -22px rgba(45, 37, 35, 0.9);
}
.sec-fernhill-header .mobile-bar__i { font-weight: 700; }
.sec-fernhill-header .mobile-bar__i--wa { background: var(--c-whatsapp); }

/* ============================================================
   4. HERO
   ============================================================ */

/* Zaglavlje je ljepljivo I U TOKU — hero mu ne treba čuvati mjesto,
   inače ostane prazan pojas visine trake. */
.sec-haven-hero .hero {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(72px, 10vh, 128px);
}

.sec-haven-hero .hero__media :is(img, video) { object-position: center 38%; }

.sec-haven-hero .hero__scrim {
  background:
    linear-gradient(to top, rgba(30, 25, 23, 0.92) 0%, rgba(30, 25, 23, 0.74) 28%, rgba(30, 25, 23, 0.26) 60%, rgba(30, 25, 23, 0.06) 100%),
    linear-gradient(to bottom, rgba(30, 25, 23, 0.42) 0%, transparent 24%);
}

/* Natpis iznad naslova stoji visoko, gdje je zatamnjenje najslabije —
   na svijetlom dijelu fotografije mesing se ne čita. Na širokom ekranu
   ide skoro bijelo, na telefonu je ionako na punoj podlozi brenda. */
.sec-haven-hero .hero__eyebrow {
  color: var(--c-accent);
  letter-spacing: 0.18em;
}
@media (min-width: 641px) {
  .sec-haven-hero .hero__eyebrow {
    color: #f2ece3;
    text-shadow: 0 1px 14px rgba(28, 23, 21, 0.8);
  }
}
.sec-haven-hero .hero h1 {
  max-width: 15ch;
  font-weight: 800;
  text-shadow: 0 2px 30px rgba(22, 18, 16, 0.42);
}
.sec-haven-hero .hero__lead {
  max-width: 46ch;
  color: rgba(245, 241, 236, 0.92);
}
.sec-haven-hero .hero__lead .lead--lg { display: none; }
@media (min-width: 641px) {
  .sec-haven-hero .hero__lead .lead--sm { display: none; }
  .sec-haven-hero .hero__lead .lead--lg { display: inline; }
}

.sec-haven-hero .u-btn--white {
  --btn-bg: #ffffff;
  --btn-fg: var(--c-primary-dk);
  box-shadow: var(--sh-md);
}
.sec-haven-hero .u-btn--white:hover { --btn-bg: #f6f1ea; }
.sec-haven-hero .hero__wa svg { color: var(--c-whatsapp); }

/* ---------- Hero na telefonu: slika gore, tekst dolje ----------
   Ispod 640 px tekst silazi ISPOD fotografije, na podlogu brenda:
   zatamnjenje tada nema razloga da postoji, a slika ostaje slika.
   Zadata visina na .hero__media poništi `bottom` iz `inset: 0`. */
@media (max-width: 640px) {
  .sec-haven-hero .hero {
    min-height: 0;
    padding-top: calc(58vw + 22px);
    padding-bottom: 30px;
    background: var(--c-canvas-brand);
  }
  .sec-haven-hero .hero__media { height: 58vw; }
  .sec-haven-hero .hero__media :is(img, video) {
    height: 100%;
    object-position: center 34%;
    /* skripta heroja piše transform inline */
    transform: none !important;
    animation: none;
  }
  .sec-haven-hero .hero__scrim { height: 58vw; background: none; }

  .sec-haven-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-haven-hero .hero h1 { font-size: 2.375rem; max-width: 18ch; text-shadow: none; }
  .sec-haven-hero .hero__lead { font-size: 1rem; line-height: 1.5; }

  /* Dva dugmeta u JEDAN red — dva preko cijele širine pojedu pola
     ekrana i nemaju hijerarhiju. `flex` nije zaključano svojstvo. */
  .sec-haven-hero .hero__act { gap: 10px; }
  .sec-haven-hero .hero__act .u-btn {
    flex: 1 1 0;
    min-height: 54px;
    padding: 14px 12px;
    font-size: 0.9375rem;
    gap: 7px;
  }
  .sec-haven-hero .hero__act .u-btn svg { width: 18px; height: 18px; }
  .sec-haven-hero .hero__tel .u-num { font-size: 0.875rem; }
}

/* Nizak telefon (375×667): slika i tipografija se još skrate, da
   naslov i dugmad ostanu iznad pregiba. */
@media (max-width: 640px) and (max-height: 700px) {
  .sec-haven-hero .hero { padding-top: calc(50vw + 18px); }
  .sec-haven-hero .hero__media,
  .sec-haven-hero .hero__scrim { height: 50vw; }
  .sec-haven-hero .hero h1 { font-size: 2.0625rem; }
  .sec-haven-hero .hero__lead { font-size: 0.9375rem; }
}

/* ============================================================
   5. USLUGE
   ============================================================ */

/* Kontejner čuva mjesto za ljepljivu bočnu traku koje u ovom
   rasporedu nema, pa sekcija ispadne pomjerena udesno. */
@media (min-width: 1140px) {
  .sec-fundament-services .u-container,
  .sec-fundament-instagram .u-container { padding-left: var(--gutter); }
}

.sec-fundament-services .u-label,
.sec-aperta-referenzen .u-label,
.sec-fernhill-about .u-label,
.sec-quiet-hours-results .u-label,
.sec-fundament-instagram .u-label,
.sec-housecall-faq .u-label,
.sec-aperta-cta .u-label {
  color: var(--c-accent-dk);
  letter-spacing: var(--ls-label);
  font-weight: 800;
}

.sec-fundament-services .svcs__intro { color: var(--c-text-muted); max-width: 56ch; }

.sec-fundament-services .svc {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
.sec-fundament-services .svc:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.sec-fundament-services .svc__ic { border-radius: var(--r-md); }
.sec-fundament-services .svc h3 { font-size: var(--fs-h4); }
.sec-fundament-services .svc__body p { color: var(--c-text-muted); }

.sec-fundament-services .svc--accent {
  background: var(--c-canvas-brand);
  border-color: var(--c-canvas-brand);
}
.sec-fundament-services .svc--accent:hover .svc__ic {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #2a2321;
}

/* ============================================================
   6. RECENZIJE
   ============================================================ */

.sec-aperta-referenzen .u-arc { background: var(--c-accent); }
.sec-aperta-referenzen .u-arc--teal { background: var(--c-accent-dk); }

.sec-aperta-referenzen .gsum {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-sm);
}
.sec-aperta-referenzen .gsum__score strong {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--c-primary-dk);
}
.sec-aperta-referenzen .gsum__link { color: var(--c-accent-dk); font-weight: 700; }

.sec-aperta-referenzen .rgroup__h { font-size: var(--fs-h4); }
.sec-aperta-referenzen .rcard {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-aperta-referenzen .rcard blockquote p { color: var(--c-text); }
.sec-aperta-referenzen .rcard__who { color: var(--c-primary-dk); font-weight: 700; }

/* ============================================================
   7. TRAKA SA SNIMKOM
   ============================================================ */

/* Pozadina trake je fotografija 1600×1066, položena — ide preko cijele
   širine ploče. Templat već klipuje (`.u-panel { overflow: hidden }`), ali
   `hidden` pravi kontejner za skrol; `clip` klipuje isto, a kontejner ne
   pravi. `overflow` nije među zaključanim svojstvima. */
.sec-nordlicht-parallax .plx { overflow: clip; }

/* Kadar: stomatolog je uz lijevu ivicu, pacijentica desno od sredine.
   Na širokom ekranu stanu oboje; na telefonu se vidi manje od polovine
   širine, pa kadar ide na pacijenticu — inače ostane njeno rame. */
.sec-nordlicht-parallax .plx__media :is(img, video) {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}
@media (max-width: 760px) {
  .sec-nordlicht-parallax .plx__media :is(img, video) { object-position: 64% 18%; }
}

/* Veo je u templatu tvrdo upisan u plavo — ovdje ide na boju brenda.
   Fotografija sada nešto nosi, pa je veo lakši nego nad snimkom: taman
   toliko da naslov i uvod imaju pun kontrast, i ni piksel više. */
.sec-nordlicht-parallax .plx__veil {
  background:
    radial-gradient(78% 96% at 50% 42%, rgba(34, 28, 26, 0.62), rgba(34, 28, 26, 0.84)),
    linear-gradient(180deg, rgba(34, 28, 26, 0.6), rgba(34, 28, 26, 0.34) 38%, rgba(34, 28, 26, 0.7));
}
.sec-nordlicht-parallax .plx { background: var(--c-canvas-brand-dp); }
.sec-nordlicht-parallax .u-kicker {
  color: var(--c-accent);
  letter-spacing: var(--ls-label);
  font-weight: 800;
}
.sec-nordlicht-parallax .plx__title { max-width: 20ch; }
.sec-nordlicht-parallax .plx__lead { color: var(--c-on-canvas-mu); max-width: 54ch; }

/* ============================================================
   8. O NAMA
   ============================================================ */

/* Okvir se prilagođava slici, ne slika okviru: fiksna visina od
   42vw pravi uspravan okvir i siječe kvadratnu fotografiju. */
.sec-fernhill-about .about__media {
  border-radius: var(--r-xl);
  border-color: var(--c-line);
}
.sec-fernhill-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 1 / 1;
}

.sec-fernhill-about .about__lead { color: var(--c-text); }
.sec-fernhill-about .about__points svg {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
.sec-fernhill-about .about__points strong { color: var(--c-primary-dk); }

.sec-fernhill-about .team__i {
  border-radius: var(--r-lg);
  border-color: var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-fernhill-about .team__i :is(img, video) {
  width: 92px; height: 92px;
  object-position: 40% 14%;
}
.sec-fernhill-about .team__i > div > span { color: var(--c-accent-dk); }
.sec-fernhill-about .team__i > div > span { line-height: 1.4; }
.sec-fernhill-about .team--one .team__i { padding: clamp(20px, 2.2vw, 30px); }

@media (max-width: 940px) {
  .sec-fernhill-about .about__media { max-width: 520px; }
}

/* ============================================================
   9. PRIJE I POSLIJE
   ============================================================ */

.sec-quiet-hours-results .res__head p { color: var(--c-text-muted); max-width: 62ch; }
.sec-quiet-hours-results .case {
  border-radius: var(--r-xl);
  border-color: var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-quiet-hours-results .case__pair :is(img, video) {
  aspect-ratio: 900 / 491;
  border-radius: var(--r-md);
}
.sec-quiet-hours-results .case__tag {
  background: var(--c-surface);
  color: var(--c-primary-dk);
  letter-spacing: 0.06em;
}
.sec-quiet-hours-results .case__tag--a { background: var(--c-accent); color: #2a2321; }

/* ============================================================
   10. INSTAGRAM
   ============================================================ */

.sec-fundament-instagram .ig__profile {
  border-radius: var(--r-pill);
  border-color: var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-xs);
}
.sec-fundament-instagram .ig__profile-ic {
  border-radius: var(--r-circle);
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
}
/* Pločica je crtana za uspravan snimak (9/16), a sve tri fotografije su
   kvadratne 640×640 — `cover` je odsijecao 44 % visine i sjekao glave.
   Okvir se prilagođava slici: 1/1 pokazuje cijelu fotografiju.
   `aspect-ratio` nije među zaključanim svojstvima. */
.sec-fundament-instagram .reel__link {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
/* Uz niži okvir zatamnjenje ispod natpisa smije biti kraće. */
.sec-fundament-instagram .reel__link::after { height: 40%; }
.sec-fundament-instagram .reel__meta strong { font-size: var(--fs-base); }
.sec-fundament-instagram .ig__head .u-head p { color: var(--c-text-muted); }

/* ============================================================
   11. PITANJA
   ============================================================ */

.sec-housecall-faq .faq__list { border-radius: var(--r-xl); }
.sec-housecall-faq .qa__t { font-family: var(--ff-display); font-weight: 700; }
.sec-housecall-faq .qa__in p { color: var(--c-text-muted); }
.sec-housecall-faq .faq__more { color: var(--c-text-muted); }
.sec-housecall-faq .faq__more a { color: var(--c-accent-dk); font-weight: 700; }

/* ============================================================
   12. TERMIN (tamna traka)
   ============================================================ */

.sec-aperta-cta .cta { background: var(--c-canvas-brand); }
.sec-aperta-cta .u-arc,
.sec-aperta-cta .u-arc--lg { background: var(--c-accent); }
.sec-aperta-cta .u-dark .u-label { color: var(--c-accent); }
.sec-aperta-cta .cta__copy p { color: var(--c-on-dark-mu); max-width: 48ch; }

.sec-aperta-cta .u-btn--white {
  --btn-bg: #ffffff;
  --btn-fg: var(--c-primary-dk);
}
.sec-aperta-cta .u-btn--white:hover { --btn-bg: #f2ede6; }
.sec-aperta-cta .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #ffffff; }
.sec-aperta-cta .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); }

.sec-aperta-cta .cta__ready { color: var(--c-on-dark-mu); }
.sec-aperta-cta .cta__ready li { color: var(--c-on-dark-mu); }
.sec-aperta-cta .cta__ready a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.sec-aperta-cta .cta__ig { color: var(--c-on-dark); }

/* ============================================================
   13. PODNOŽJE
   ============================================================ */

.sec-housecall-footer .ftr {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-line);
}
.sec-housecall-footer .ftr__logoimg {
  width: min(210px, 62vw);
  height: auto;
}
.sec-housecall-footer .ftr__blurb { color: var(--c-text-muted); }
.sec-housecall-footer .ftr__col h3 { color: var(--c-accent-dk); letter-spacing: var(--ls-label); }
.sec-housecall-footer .ftr__hours th { color: var(--c-ink); }
.sec-housecall-footer .ftr__top-btn { color: var(--c-accent-dk); }

.sec-housecall-footer .ftr__ig,
.sec-housecall-footer .ftr__map {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent-dk);
}
.sec-housecall-footer .ftr__ig svg,
.sec-housecall-footer .ftr__map svg { width: 19px; height: 19px; flex: none; }
.sec-housecall-footer .ftr__ig:hover,
.sec-housecall-footer .ftr__map:hover { color: var(--c-primary-dk); }

/* Prostor za ljepljivu traku treba samo tamo gdje traka postoji. */
@media (min-width: 721px) {
  .sec-housecall-footer .ftr { padding-bottom: clamp(36px, 4vw, 56px); }
}

/* ============================================================
   14. LEBDEĆE WHATSAPP DUGME
   Vlastiti element, ne sekcija. Jedino mjesto gdje je `fixed`
   ovdje u redu. Sklanja se dok je ljepljiva traka na ekranu,
   da se dva WhatsAppa ne preklapaju.
   ============================================================ */

.wa-fab {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  background: #0b7367;
  color: #fff;
  font-family: var(--font-display-rounded);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(11, 115, 103, 0.7), 0 2px 8px rgba(45, 37, 35, 0.18);
  transition: transform 220ms ease, background-color 160ms ease;
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab:hover { background: #085c52; transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Traka na dnu i sekcija „Termin" već nose WhatsApp — dok je bilo
   koje od to dvoje na ekranu, lebdeće dugme se sklanja. */
body.bar-on .wa-fab,
body.cta-in .wa-fab { display: none; }

@media (max-width: 720px) {
  body:has(.mobile-bar.is-on) .wa-fab { display: none; }
}

@media (max-width: 400px) {
  .wa-fab { padding: 12px 16px 12px 14px; font-size: 0.875rem; }
}

@media print {
  .wa-fab { display: none !important; }
}

/* ============================================================
   15. SIGURNOSNA MREŽA ZA OTKRIVANJE
   Ako posmatrač ne okine (snimak cijele stranice, vraćena pozicija
   skrola), sadržaj ostaje vidljiv. Ovo pravilo ima veću
   specifičnost od sekcijskog skrivenog stanja.
   ============================================================ */

html.sweep-all .sec [data-reveal],
html.sweep-all .sec [data-reveal]:not(.is-in) {
  opacity: 1 !important;
  transform: none !important;
}