/* HolaRoofi saidi ülekirjutused — ÜKS fail kõigile lehtedele ja keeltele.
   Muuda siin, jooksuta deploy — kehtib kõikjal. Ajalugu: koristuspass 1 (jalus,
   08.08), koristuspass 2 (hero + scroll-CTA, 09.08), koristuspass 3 (jagatud fail, 09.08),
   hero varjuta + läbipaistev mobiilipäis (09.08 õhtu). */

/* --- JALUS: tume pruun nagu algsel v0 veebil --- */
footer { background: #241509 !important; border-top: 4px solid #F59E0B !important; }
footer, footer p, footer div, footer span, footer li { color: #EADFCF; }
footer a { color: #D9C7AE; }
footer a:hover { color: #FFFFFF; }
footer svg { color: #EADFCF; }
footer [class*="border"] { border-color: #3B2817 !important; }
footer input { background: #33220f; border-color: #4a3420 !important; color: #F5EDE4; }
/* jaluse veerupealkirjad (PRODUCT/COMPANY/...) jäävad oranžiks */
footer h3, footer h4, footer [class*="uppercase"] { color: #F59E0B !important; }
/* jaluse info-kaardid (EMAIL/LEGAL) tumedaks */
footer [class*="bg-card"], footer [class*="bg-white"], footer [class*="bg-background"],
footer [class*="bg-muted"], footer [class*="bg-secondary"] {
  background: #33220F !important; border-color: #4a3420 !important;
}
footer [class*="shadow"] { box-shadow: none !important; }

/* --- HERO: toode esiplaanile, müra maha --- */
section[class*="min-h-[100svh]"] div[class*="tracking-[0.28em]"] { display: none !important; }
section[class*="min-h-[100svh]"] div[class*="tracking-[0.26em]"] { display: none !important; }
section[class*="min-h-[100svh]"] h1 span[class*="bg-clip-text"] { background: none !important; color: #F59E0B !important; -webkit-text-fill-color: #F59E0B; }
section[class*="min-h-[100svh]"] h1 span[class*="text-foreground/30"] { display: none !important; }
section[class*="min-h-[100svh]"] div[class*="sm:flex-wrap"] { display: none !important; }
section[class*="min-h-[100svh]"] div[class*="gap-x-5"] { display: none !important; }
section[class*="min-h-[100svh]"] div[class*="blur-[160px]"] { display: none !important; }
div.pointer-events-none.absolute.bottom-10.right-6 { display: none !important; }

/* --- HERO PILT VARJUTA (KÕIK laiused, Mattis 10.08 — enne oli desktopil külggradient
   alles, nüüd sama puhas foto mis mobiilis): mõlemad gradient-kattekihid maha
   (külgmine + alumine to_top), kehtib igas keeles. Teksti loetavus ilma pildivarjuta:
   soe valge tekst + tume kuma (tumeda režiimi toonid — foto peal toimib see
   mõlemas režiimis ühtemoodi; varem oli see ainult mobiili heleda režiimi parandus). --- */
section[class*="min-h-[100svh]"] div[class*="linear-gradient(to_right"] { display: none !important; }
section[class*="min-h-[100svh]"] div[class*="linear-gradient(to_top"] { display: none !important; }
section[class*="min-h-[100svh]"] h1,
section[class*="min-h-[100svh]"] p {
  color: hsl(36 33% 97%) !important;
  text-shadow: 0 1px 2px hsl(28 47% 7% / 0.9), 0 2px 18px hsl(28 47% 7% / 0.6);
}

/* --- NAV: üks tume sisselogimisnupp (Register peidus) — kehtib igas keeles --- */
header a[href$="/register"] { display: none !important; }
header a[href$="/login"] button { background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; }

/* --- LÄBIPAISTEV PÄIS (KÕIK laiused, Mattis 10.08): riba pole niikaua, kui pole
   keritud — kerides tuleb taust tagasi (hr-scrolled klassi haldab site.js), et sisu
   peale rulludes loetav püsiks. AINULT hero-lehtedel (:has) — blogis/kontaktis jm
   algab tekst kohe päise all, seal jääb taust alati alles. --- */
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* päise tekst foto peal loetavaks: sama soe-valge + tume-kuma käsitlus mis herol.
   Katab nav-lingid, logo "Roof" poole (oranž "Hola" jääb), hamburgeri/X-i ja
   teema-/keelenupud; login-nupp on oma taustaga, teda ei puutu. */
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header a[class*="group/nav"],
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header a[class*="font-sansation"] span:not([class*="text-accent"]),
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header button[aria-controls="mobile-nav-drawer"],
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header div[class*="ml-auto"] > button,
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header div[class*="ml-auto"] > div {
  color: hsl(36 33% 97%) !important;
  text-shadow: 0 1px 2px hsl(28 47% 7% / 0.9), 0 2px 12px hsl(28 47% 7% / 0.6);
}
/* ikoonidele (svg) text-shadow ei mõju — õrn drop-shadow sama efekti jaoks */
html:not(.hr-scrolled):has(section[class*="min-h-[100svh]"]) header button svg {
  filter: drop-shadow(0 1px 2px hsl(28 47% 7% / 0.8));
}

/* --- "4 sammu" sektsioon (Sign up / Design / BOM / Order) maha: see on portaali/edasimüüja
   voog, mitte lõppkliendi oma — hübriid ajas segadusse (Mattis 09.08). DOM jääb alles (SEO). --- */
section:has(ol[class*="lg:grid-cols-4"]) { display: none !important; }

/* --- MOBIILIMENUU SAHTEL: ikoonikastid nimetuste eest maha + hamburgeril/X-il
   kast (raam+taust) maha — puhas loend, puhas nupp (Mattis 09.08) --- */
button[aria-controls="mobile-nav-drawer"] { border: 0 !important; background: transparent !important; }
#mobile-nav-drawer li > a > span[class*="size-9"] { display: none !important; }

/* --- MOBIILIMENUU LAHTI → vestlusmull (Let's talk) peitu, sulgemisel tagasi
   (Mattis 09.08). Puhas CSS: hamburgeri aria-expanded juhib :has() kaudu,
   JS-i ega hüdratsiooniriski pole. Peidab ka avatud vestlusakna (#hrc-box). --- */
html:has(button[aria-controls="mobile-nav-drawer"][aria-expanded="true"]) #hrc-btn,
html:has(button[aria-controls="mobile-nav-drawer"][aria-expanded="true"]) #hrc-box {
  display: none !important;
}

/* --- SAHTLI JALUS = päise otsus (üks tume login, Register peidus): sahtel on
   DOM-is väljaspool header'it, senine reegel ei katnud; Register paistis välja
   alles nüüd, kui mull teda enam ei varja. href$= katab kõik keeled. --- */
#mobile-nav-drawer a[href$="/register"] { display: none !important; }
#mobile-nav-drawer a[href$="/login"] button { background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; }

/* --- GALERII (Our Installations): kogu alumine juhtriba maha — nooled JA
   punktid (Mattis 10.08: "mitmes pilt" rida ära); pildi caption ('Project Photo'
   + '3/5' loendur) maha — väikesed nooled pildi peal lisab site.js (Mattis 09.08).
   Kehtib igas keeles (aria-label'id tõlkimata). NB :not(.hr-gal-arrow) on
   ELUTÄHTIS — meie pealenooled on stage'i sees sama aria-label'iga, ilma
   guard'ita peidaks reegel kogu galerii lava. Lava selektor on teadlikult LÕTV
   style*="perspective" — puudutusel/lohistusel kirjutab framer inline-stiili
   tühikutega ümber (perspective: 1100px) ja täpne string lakkas matchimast,
   galerii "läks vanaks tagasi" (10.08 õppetund). Punktinupud jäävad DOM-i
   (display:none) — site.js klikib neid endiselt (Go to slide 1 + nooleklikid). --- */
section:has(div[style*="perspective"]) div:has(> button[aria-label="Previous"]:not(.hr-gal-arrow)) { display: none !important; }
section:has(div[style*="perspective"]) div[class*="bg-card/95"] { display: none !important; }

/* --- GALERII SUUREKS DESKTOPIL (Mattis 10.08: "sama suur kui video"): aktiivkaart
   380×280 → skaleerime lava 2× (≈760×560, video on ~1024×576). Skaala, mitte
   width-ülekirjutus — Reacti 3D-transformid ja meie pealenooled püsivad täpselt
   paigas (kõik mõõdud skaleeruvad koos). Lava layout-kõrgus jääb 360px →
   margin-bottom kompenseerib üle ääre kasvava osa (560-280=280 - varu). --- */
@media (min-width: 1024px) {
  section:has(div[style*="perspective"]) div[style*="perspective"] {
    transform: scale(2) !important;
    transform-origin: 50% 0 !important;
    margin-bottom: 260px;
  }
}
/* mobiilis: juhtriba peitmine jättis galerii alla tühemiku (lava inline-kõrgus
   360px, kaart 280px) — tõmbame slack'i koomale */
@media (max-width: 1023px) {
  section:has(div[style*="perspective"]) div[style*="perspective"] {
    margin-bottom: -60px;
  }
}

/* väikesed nooled aktiivse pildi servades (kaart on 380px lai, keskel; 140px = kaardi keskkõrgus) */
.hr-gal-arrow { position: absolute; top: 140px; transform: translateY(-50%); z-index: 20;
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35);
  color: #fff; cursor: pointer; padding: 0; transition: background .2s ease; }
.hr-gal-arrow:hover { background: rgba(0,0,0,.6); }
.hr-gal-arrow svg { width: 16px; height: 16px; }
#hr-gal-prev { left: max(8px, calc(50% - 180px)); }
#hr-gal-next { right: max(8px, calc(50% - 180px)); }

/* 'Real projects' ribake pealkirja kohal liiast (Mattis 09.08) */
section:has(div[style*="perspective"]) div[class*="tracking-[0.28em]"] { display: none !important; }

/* --- Duplikaat 'Become a Partner' bänner installerite-sektsiooni lõpus (vahetult
   enne galeriid) maha — lehe lõpu CTA-sektsioonis on sama nupp niikuinii (Mattis 09.08).
   href$= katab kõik keeled (/de/partners jne). --- */
div.mx-auto.mt-12.max-w-3xl.rounded-2xl.backdrop-blur-sm:has(> a[href$='/partners']) { display: none !important; }

/* --- VIDEO: play-overlay maha — video käivitub ise scrollimisel (site.js),
   pausi/kerimise/heli annavad native controls (Mattis 09.08) --- */
section:has(video) button[aria-label="Play video"] { display: none !important; }

/* --- usaldusmärkide SVG-ikoonide värv: sama mis originaal-PNG-del (must / tumedas valge) --- */

/* Jaluse kontaktikaardid (meilikaart + aadressikaart) peidus — kontaktid elavad
   kontaktilehel vormi juures (Mattis 10.08). Jaluse Company > Contact link viib sinna. */
footer a[href^="mailto:"],
footer a[href^="mailto:"] + div { display: none !important; }

/* --- SCROLLBAR TAGASIHOIDLIKUKS: originaali oranž→teal gradient-thumb ("vikerkaar")
   asendub diskreetse ühevärvilisega — kehtib igal sisemisel kerimisalal (Mattis 10.08) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.35) !important;
  border: 2px solid hsl(var(--background)); border-radius: 5px; }

/* --- USP "Read more" alt-leht mobiilis: sisuosa kerib ilma nähtava ribata (native sheet-tunne).
   NB: drawer on drag-loogikaga — sheet'i ennast kerivaks teha EI tohi, läheb drag'iga sassi
   (tekib kummitus-kerimisala) --- */
@media (max-width: 767px) {
  div[class*="max-h-[85dvh]"] .overflow-y-auto { scrollbar-width: none; }
  div[class*="max-h-[85dvh]"] .overflow-y-auto::-webkit-scrollbar { display: none; }
}

/* --- PARTNERLEHT (Mattis 10.08, ümber 11.08): vana hero (suur pealkiri +
   statistikakaart) maha — asemele süstib site.js lühikese memo (#hr-phero):
   miks partneriks + mida partnerlus annab; partnerikaardid (#tiers) kohe selle
   järel (site.js kolib turuülevaate tiers'i taha). hr-partners klassi paneb
   site.js URL-i järgi; hero on ainus <section class="container ...">, teised
   sektsioonid on border-t plokid. DOM jääb alles (SEO). --- */
html.hr-partners main section.container { display: none !important; }

#hr-phero { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
#hr-phero .hr-ph-in { max-width: 1152px; margin: 0 auto; padding: 64px 16px 72px; }
#hr-phero .hr-ph-kicker { display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: #F59E0B;
  border: 1px solid hsl(var(--border)); border-radius: 9999px; padding: 6px 14px; }
#hr-phero h1 { margin: 18px 0 0; font-size: clamp(32px, 5vw, 46px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.08; color: hsl(var(--foreground)); }
#hr-phero .hr-ph-lead { margin: 14px 0 0; max-width: 660px; font-size: 17px;
  line-height: 1.6; color: hsl(var(--muted-foreground)); }
#hr-phero .hr-ph-memo { margin: 32px 0 0; padding: 0; list-style: none; max-width: 880px;
  display: grid; gap: 14px 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { #hr-phero .hr-ph-memo { grid-template-columns: 1fr 1fr; } }
#hr-phero .hr-ph-memo li { display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.55; color: hsl(var(--foreground) / 0.85); }
#hr-phero .hr-ph-memo svg { width: 20px; height: 20px; flex: none; margin-top: 2px;
  stroke: #F59E0B; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- #tiers "Both"-tierkaart (site.js kloonib kaardi 01 ja paneb PPA ette, Mattis
   10.08 "sarnasel kaardil enne PPA-d") — välimus tuleb klooni Tailwind-klassidest,
   siin ainult ankru-varu + PPA (4. kaart) tsentreerimine teise ritta desktopil.
   :has-guard: kui site.js süsti pole (3 kaarti), jääb algne paigutus puutumata. --- */
#hr-both { scroll-margin-top: 90px; }
@media (min-width: 1024px) {
  #tiers div[class*="grid"]:has(> #hr-both) > article:last-of-type { grid-column: 2; }
}

/* --- Usaldusmärgid (11.08.2026): üks kontsept = üks märk. Vanad PNG-ikoonid
   (eri joonepaksuse ja stiiliga segapundar) peitu; site.js paneb asemele ühtse
   SVG-märgikogu. Kui site.js ei jookse, jäävad kaardid ikoonita (mitte katki). --- */
img[src*="holaroof-house-black"], img[src*="mobile-thin-small"],
img[src*="clean-drop-black-strong"], img[src*="flame-fixed2"],
img[src*="house-hand-small"], img[src*="weather-icon-black"],
img[src*="unlock-icon-small"], img[src*="van-bold-icon"],
img[src*="monitor-settings-black-clean"] { display: none !important; }

.hr-mark { width: 2rem; height: 2rem; stroke: #F59E0B; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none; display: block; }
.hr-mark--sm { width: 1.05em; height: 1.05em; display: inline-block;
  vertical-align: -0.15em; margin-right: 0.45em; }

/* Tooteleht: kaks suunda — Retrofit ja In-roof (11.08.2026, vt site.js sama plokk) */
.hr-prodhide { display: none !important; }
#hr-products .hr-prod-lead { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }
#hr-products .hr-prod-lead h2 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
#hr-products .hr-prod-lead p { margin-top: 0.9rem; color: hsl(var(--muted-foreground)); line-height: 1.65; }
#hr-products .hr-prod-sys { display: grid; gap: 2rem; align-items: start; max-width: 64rem; margin: 0 auto 4.5rem; }
@media (min-width: 1024px) {
  #hr-products .hr-prod-sys { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  #hr-products .hr-prod-sys--rev .hr-prod-media { order: 2; }
}
#hr-products .hr-prod-media img { width: 100%; border-radius: 0.75rem; display: block; }
#hr-products .hr-prod-media img + img { margin-top: 1rem; }
#hr-products .hr-prod-cap { margin-top: 0.6rem; font-size: 0.85rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
#hr-products .hr-prod-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: hsl(var(--accent)); border: 1px solid hsl(var(--accent) / 0.45); border-radius: 999px; padding: 0.3rem 0.85rem; margin-bottom: 1rem; }
#hr-products .hr-prod-text h3 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
#hr-products .hr-prod-text > p { margin-top: 0.9rem; color: hsl(var(--muted-foreground)); line-height: 1.65; }
#hr-products .hr-prod-text ul { margin-top: 1.3rem; display: grid; gap: 0.7rem; list-style: none; padding: 0; }
#hr-products .hr-prod-text li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
#hr-products .hr-prod-chk { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem; color: hsl(var(--accent)); }
#hr-products .hr-prod-ds { display: inline-flex; gap: 0.4rem; align-items: center; margin-top: 1.4rem; font-weight: 600; color: hsl(var(--accent)); text-decoration: none; }
#hr-products .hr-prod-ds:hover { text-decoration: underline; }
#hr-products .hr-prod-cta { text-align: center; }
#hr-products .hr-prod-cta a { display: inline-block; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); font-weight: 600; border-radius: 0.6rem; padding: 0.85rem 1.7rem; }
#hr-products .hr-prod-cta a:hover { opacity: 0.9; }