/* ============================================================
   Strechárovo — site layer
   Loads AFTER design-system.css a web.css.

   Účel: (1) zafixovať voľby z tweaks panelu do statického buildu,
         (2) doplniť veci, ktoré návrhový prototyp nerieši
             (mobilná navigácia, focus stavy, extrahované inline štýly).

   design-system.css a web.css sú zámerne 1:1 kópie z Claude Design
   projektu — pri ďalšom syncu ich možno prepísať bez straty čohokoľvek.
   Všetky lokálne úpravy patria sem.
   ============================================================ */

/* ============================================================
   1. ZAFIXOVANÉ VOĽBY Z TWEAKS PANELU
   Pôvodné WEB_TWEAK_DEFAULTS v prototype:
     hero: "modra"  → data-variant="modra" v index.html
     accent: "#9D7746" → zhodné s --oak, netreba prepisovať
     corners: "mekke"  → mäkký rádius scale nižšie
   ============================================================ */
:root{
  /* corners: mekke */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  /* accent: #9D7746 (Brass Gold) */
  --hero-accent:      #9D7746;
  --hero-accent-deep: #7C5D35;

  /* výška lepkavej hlavičky — používa sa pri scroll-margin */
  --topbar-h: 62px;
}

/* poistka: sticky hlavička aj pre staršie WebKit prehliadače */
.topbar{ position:-webkit-sticky; position:sticky; top:0; }

/* ============================================================
   2. EXTRAHOVANÉ INLINE ŠTÝLY Z PROTOTYPU
   ============================================================ */
.topbar .brand{ text-decoration:none; }
.topbar .brand img{ height:28px; width:auto; display:block; }

.hero .hero-photo{ background-image:url('assets/van-photo.png'); }

/* vysoký placeholder v sekcii „Prečo my“ */
.ph-tall{ min-height:440px; }

/* ============================================================
   2b. HERO — VÝŠKA
   section{padding:96px 0} z design-system.css + .inner{120/110px}
   z web.css sa sčítavali na 216px prázdna nad titulkom.
   ============================================================ */
.hero{ padding:0; }
.hero .inner{ padding-top:72px; padding-bottom:64px; }

/* odosielacie tlačidlo formulára */
.qform .btn-submit{ width:100%; justify-content:center; }

/* ============================================================
   3. KOTVY POD LEPKAVOU HLAVIČKOU
   Bez toho skáče #sluzby a spol. pod topbar.
   ============================================================ */
section[id]{ scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* ============================================================
   3b. ÚPRAVY K SÉMANTICKÝM ZMENÁM OPROTI PROTOTYPU
   ============================================================ */

/* [hidden] musí prebiť display:flex z .field (honeypot vo formulári) */
[hidden]{ display:none !important; }

/* .steps je <ol> namiesto <div> — zhoď default odrážky a padding */
.steps{ list-style:none; margin:0; padding:0; }

/* kontaktné údaje sú <a> namiesto <span> — nech vyzerajú rovnako */
.contact .clist a.v{ text-decoration:none; transition:color .16s; }
.contact .clist a.v:hover{ color:var(--hero-accent); }

/* Dlhý e-mail (strecharovo@strecharovo.sk) sa nevie zalomiť → min-content
   ľavého stĺpca pretláčal 1fr track nad šírku kontajnera a sekcia
   #kontakt pôsobila na mobile vyoseno. minmax(0,…) dovolí tracku
   zmenšiť sa, overflow-wrap dovolí hodnotám zalomiť. */
.split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:820px){
  .split{ grid-template-columns:minmax(0,1fr); }
}
.contact .clist li{ flex-wrap:wrap; }              /* hodnota, ktorá sa nezmestí vedľa labelu, spadne celá pod neho */
.contact .clist li .v{ min-width:0; overflow-wrap:anywhere; }  /* poistka pre extrémne úzke displeje */

/* Trust bar mal rovnaký problém: 2×(text + 80px padding) > šírka úzkeho
   displeja → horizontálny scroll. Tracky nech sa vedia zmenšiť a padding
   na mobile ubrať, text sa zalomí. */
@media (max-width:780px){
  .trust .wrap{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .trust .ti{ padding:28px 16px; }
}

/* .qform .field:last-of-type už trafí honeypot, nie posledné viditeľné pole */
.qform .field-last{ margin-bottom:22px; }

/* ============================================================
   4. SKIP LINK
   ============================================================ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ocean-deep); color:var(--white);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px; text-decoration:none; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* ============================================================
   5. FOCUS STAVY
   Prototyp ich nemá — bez nich je stránka neovládateľná klávesnicou.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--hero-accent);
  outline-offset:3px;
}
.hero a:focus-visible,
.contact a:focus-visible,
.wfoot a:focus-visible{
  outline-color:var(--white);
}
/* .field už má vlastný focus ring cez box-shadow → nedupluj outline */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; }

/* ============================================================
   6. MOBILNÁ NAVIGÁCIA
   design-system.css skrýva .topbar nav pod 820px a nič nedáva na jeho
   miesto. Toto je funkčná náhrada.
   ============================================================ */
.navtoggle{
  display:none;
  width:40px; height:40px; padding:0;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(43,51,56,.2);
  border-radius:var(--r-sm); cursor:pointer; color:var(--ocean-deep);
  transition:border-color .16s, background .16s;
}
.navtoggle:hover{ border-color:var(--ocean); background:rgba(255,255,255,.5); }
.navtoggle .bars{ display:block; position:relative; width:18px; height:2px; background:currentColor; transition:background .16s; }
.navtoggle .bars::before,
.navtoggle .bars::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
  transition:transform .18s ease, top .18s ease;
}
.navtoggle .bars::before{ top:-6px; }
.navtoggle .bars::after{ top:6px; }
.navtoggle[aria-expanded="true"] .bars{ background:transparent; }
.navtoggle[aria-expanded="true"] .bars::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after{ top:0; transform:rotate(-45deg); }

/* .topbar .mnav (0-2-0) — musí prebiť .topbar nav{display:flex} z design-system.css (0-1-1) */
.topbar .mnav{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(244,241,234,.97);
  backdrop-filter:blur(12px);
}
.topbar .mnav.open{ display:block; }
/* height:auto — .topbar .wrap{height:62px} z design-system.css inak zrazí pozadie menu na jeden riadok */
.mnav .wrap{ display:flex; flex-direction:column; height:auto; padding-top:10px; padding-bottom:16px; }
.mnav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ocean-deep);
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.mnav a:last-of-type{ border-bottom:none; }
.mnav a:hover{ color:var(--hero-accent-deep); }

@media (max-width:820px){
  .navtoggle{ display:inline-flex; }
}
/* web.css pod 680px skrýva text čísla (.lbl), ale necháva osamotený štvorček .dia —
   skry celý odkaz, telefón je v mobilnom menu */
@media (max-width:680px){
  .topbar .phone{ display:none; }
}
/* pod 560px je v topbare málo miesta — CTA presúvame do mobilného menu */
@media (max-width:560px){
  .topbar .actions .btn{ display:none; }
  .topbar .actions{ gap:12px; }
}

/* ============================================================
   7. FORMULÁR — stavy validácie
   ============================================================ */
.field .req{ color:var(--hero-accent); }
.field input:user-invalid,
.field textarea:user-invalid{
  border-color:var(--err);
  box-shadow:0 0 0 3px rgba(178,58,46,.14);
}
.qform .form-note{
  margin:16px 0 0; font-size:13.5px; line-height:1.5; color:var(--steel);
}
.qform .form-note a{ color:var(--hero-accent-deep); }

/* nepovinné pole v labeli */
.field label .opt{ font-weight:400; color:var(--steel); }

/* stav po odoslaní formulára (AJAX) */
.qform .form-status{
  margin:16px 0 0; padding:12px 14px; border-radius:var(--r-sm);
  font-size:14px; line-height:1.5;
}
.qform .form-status.ok{ background:#EAF3EC; color:#2F6B3C; border:1px solid #BFDCC6; }
.qform .form-status.err{ background:#F9ECEA; color:#B23A2E; border:1px solid #E8C5C0; }
.qform .form-status.err a{ color:inherit; font-weight:600; }

/* ============================================================
   8. OBRÁZKY
   Galéria: <figure class="g"> s absolútne umiestneným obrázkom
   vypĺňa bunku gridu (min-height drží .gal .g z web.css).
   ============================================================ */
.g-img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal .g{ position:relative; margin:0; }
.gal .g .g-img{ position:absolute; inset:0; }

/* fotka dodávky v sekcii „Prečo my“ */
.about-photo{
  position:relative; margin:0; min-height:440px;
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
}
.about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* malá poznámka pod galériou */
.gal-note{
  margin:18px 0 0; text-align:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--steel);
}

/* chip s popisom cez fotku — sekcia „Prečo my“ (dodávka) */
.about-photo .imgcap{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); background:rgba(252,250,245,.92); padding:7px 11px;
  border:1px solid var(--line); border-radius:3px;
}

/* ============================================================
   9. REDUKOVANÝ POHYB
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .svc:hover{ transform:none; }
}

/* ============================================================
   9b. PODSTRÁNKA — OCHRANA OSOBNÝCH ÚDAJOV
   ============================================================ */
.legal .wrap{ max-width:760px; }
.legal h1.sec-title{ margin-bottom:28px; }
.legal h2{
  font-family:var(--display); font-size:19px; color:var(--ocean-deep);
  margin:34px 0 10px;
}
.legal p{ line-height:1.65; color:var(--ink); margin:0 0 12px; }
.legal a{ color:var(--hero-accent-deep); }
.legal-back{ margin-top:44px; }
.legal-back a{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }

/* odkaz v spodnej lište pätičky */
.wfoot .bar a{ color:inherit; }
.wfoot .bar a:hover{ color:var(--white); }

/* ============================================================
   10. TLAČ
   ============================================================ */
@media print{
  .topbar, .mnav, .navtoggle, .hero .cta, .qform{ display:none !important; }
  .hero, .contact, .wfoot, .trust{ background:#fff !important; color:#000 !important; }
  .hero h1, .contact h2.sec-title, .contact .clist li .v{ color:#000 !important; }
  .web-sec{ padding:24px 0; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}