/* Varga Autóműhely — közös stíluslap. HÍRÖSWEB, 2026.
   Fontok self-hosztolva: nincs külső betöltés, nincs GDPR-adattovábbítás. */

@font-face{font-family:"Slab";src:url("fonts/robotoslab-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Slab";src:url("fonts/robotoslab-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sans";src:url("fonts/outfit-latin-ext.woff2") format("woff2");font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sans";src:url("fonts/outfit-latin.woff2") format("woff2");font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Világos az alapértelmezés. A sötét csak választható nézet. */
:root{
  --ground:#f5f6f8; --surface:#ffffff; --surface-2:#eef1f4; --line:#dde1e6;
  --ink:#16191d; --muted:#4f5762;
  --brand:#d81f2a; --brand-dark:#b0141e; --brand-ink:#ffffff; --brand-tint:#fdecee;
  --accent:#9a5c05; --ok:#1b8f4d;
  --r:16px; --r-sm:12px; --r-pill:999px;
  --shadow:0 1px 2px rgba(16,20,26,.03),0 2px 8px rgba(16,20,26,.04),0 16px 40px -12px rgba(16,20,26,.16);
  --footer-bg:#16191d; --footer-ink:#e8eaed; --footer-line:#2b3037;
}
:root[data-theme="dark"]{
  --ground:#14171b; --surface:#1c2025; --surface-2:#23282e; --line:#333941;
  --ink:#eef1f4; --muted:#a3acb7;
  --brand:#ff4d57; --brand-dark:#e03640; --brand-ink:#14171b; --brand-tint:#2a1a1c;
  --accent:#e0a54a; --ok:#4bd68a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.25),0 16px 40px -12px rgba(0,0,0,.6);
  --footer-bg:#0e1013; --footer-ink:#dfe3e8; --footer-line:#272c33;
}

/* Halvány szerelő-motívumok a háttérben, végig az oldalon.
   Nagyon alacsony átlátszóság: háttérzaj legyen, ne zavarja az olvasást.
   A sötét nézetben világosra fordítjuk, hogy ugyanúgy alig látszódjon. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("minta.svg") 0 0 repeat;background-size:760px 760px;
  opacity:.035;
}
:root[data-theme="dark"] body::before{filter:invert(1);opacity:.05}
@media(max-width:600px){body::before{background-size:520px 520px;opacity:.03}}
/* a tartalmi sávok maradjanak tiszták, hogy a szöveg alatt ne legyen minta */
header,footer,.nonstop{position:relative;z-index:1}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:"Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
h1,h2,h3{font-family:"Slab",Georgia,serif;font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.78rem;color:var(--brand)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--brand);border-radius:2px;flex:none}
section{padding:clamp(3.2rem,7.5vw,6.5rem) 0}
.sec-head{margin-bottom:2.8rem;max-width:56ch}
.sec-head h2{font-size:clamp(1.9rem,4.6vw,2.9rem);text-transform:uppercase;margin-top:.5rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--surface);padding:.8rem 1.2rem;border-radius:var(--r-sm);box-shadow:var(--shadow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1rem;padding:.95rem 1.7rem;min-height:54px;border-radius:var(--r-pill);
  border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .18s,transform .12s,border-color .18s}
.btn:active{transform:translateY(1px)}
.btn-brand{background:var(--brand);color:var(--brand-ink);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn-brand:hover{background:var(--brand-dark)}
.btn-outline{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--brand)}

header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:.7rem;padding:.65rem 0}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:42px;width:auto;display:block}
/* A logó átlátszó hátterű; sötét nézetben a világos változatát cseréljük be, nem dobozoljuk. */
:root[data-theme="dark"] .logo img[data-logo]{content:url("logo-varga-light.png")}
.spacer{flex:1}
.hours{display:none;align-items:center;gap:.45rem;font-weight:600;font-size:.9rem;color:var(--muted)}
.hours .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.tel-top{display:none;align-items:center;gap:.45rem;font-weight:700;font-size:1.08rem;text-decoration:none;white-space:nowrap}
.tel-top svg{color:var(--brand);flex:none}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;flex:none;background:var(--surface)}
.lang button{font-weight:700;font-size:.8rem;padding:.55rem .7rem;min-height:44px;background:transparent;color:var(--muted);border:0;cursor:pointer;font-family:inherit}
.lang button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);cursor:pointer}
.theme-btn svg{width:20px;height:20px}
@media(min-width:820px){.hours,.tel-top{display:inline-flex}}

footer{background:var(--footer-bg);color:var(--footer-ink);padding:2.8rem 0 7rem}
.fgrid{display:grid;gap:1.8rem;grid-template-columns:1fr}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}footer{padding-bottom:2.8rem}}
footer h4{font-family:"Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:#fff;margin-bottom:.7rem}
footer ul{list-style:none;display:grid;gap:.45rem;font-size:.93rem;opacity:.88}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .logo{display:inline-flex;margin-bottom:1rem}
footer .logo img{content:url("logo-varga-light.png")}
.legal{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;margin-top:2.2rem;padding-top:1.2rem;
  border-top:1px solid var(--footer-line);font-size:.84rem;opacity:.75}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:.6rem;
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:var(--surface);
  border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(16,20,26,.12)}
.callbar .btn{flex:1;min-width:0;font-size:.95rem;padding-inline:.7rem;letter-spacing:.02em;white-space:nowrap}
@media(max-width:400px){.callbar{gap:.45rem;padding-inline:.6rem}.callbar .btn{font-size:.88rem;padding-inline:.5rem;gap:.35rem}}
@media(min-width:760px){.callbar{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* --- Finom mozgás. Minden elem tiszteletben tartja a prefers-reduced-motion beállítást. --- */
/* beúszás görgetéskor */
[data-uszik]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-uszik].lat{opacity:1;transform:none}
/* a szolgáltatás-kártyák és a vélemények oldalról érkeznek, egymás után */
#services .group[data-uszik]{transform:translateX(44px)}
#services .group[data-uszik].lat{transform:none}
[data-uszik][style*="--k"]{transition-delay:calc(var(--k) * 110ms)}
@media(prefers-reduced-motion:reduce){[data-uszik]{opacity:1;transform:none;transition:none}}

/* jogi aloldalak */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,4vw,2.8rem);box-shadow:var(--shadow);margin-block:clamp(2rem,5vw,3.5rem)}
.doc h1{font-size:clamp(1.8rem,5vw,2.6rem);text-transform:uppercase;margin-bottom:.4rem}
.doc .upd{color:var(--muted);font-size:.9rem;margin-bottom:2rem}
.doc h2{font-size:1.25rem;text-transform:uppercase;margin:2rem 0 .7rem;padding-bottom:.5rem;border-bottom:2px solid var(--brand)}
.doc p,.doc li{margin-bottom:.7rem}
.doc ul,.doc ol{padding-left:1.3rem}
.doc dl{display:grid;grid-template-columns:1fr;gap:.2rem .9rem;margin:.6rem 0 1.2rem}
@media(min-width:620px){.doc dl{grid-template-columns:auto 1fr}}
.doc dt{font-weight:700;color:var(--muted)}
.doc dd{margin:0 0 .5rem}
.doc table{width:100%;border-collapse:collapse;margin:.8rem 0 1.4rem;font-size:.95rem}
.doc th,.doc td{text-align:left;padding:.7rem .8rem;border:1px solid var(--line);vertical-align:top}
.doc th{background:var(--surface-2);font-weight:700}
.doc .todo{background:var(--brand-tint);border:1px dashed var(--brand);border-radius:var(--r-sm);padding:.15rem .5rem;font-weight:700;font-size:.9rem;white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:.4rem;margin-top:2rem;font-weight:700;color:var(--brand);text-decoration:none}