/*
# ═══════════════════════════════════════════════════════════
# Fajl: site.css · Verzija: 1.0.0 · Datum: 08.10.2026
# Autor: Damir Radulić — RiNET <damir@rinet.one>
# Lokacija: /var/www/haccp/assets/site.css (izvor: /opt/rinet-sites/haccp/assets/site.css)
# Svrha: s818 — izgled javne stranice haccp.rinet.one (svijetla i tamna tema, bez vanjskih fontova i slika).
# Zavisi od: build.py (HTML) · Cron/Service: static (nginx)
# ═══════════════════════════════════════════════════════════
*/
:root{--bg:#f4f1ea;--card:#fffdf8;--ink:#17231f;--mut:#5d6a65;--line:#ddd6c8;--acc:#0b5f5a;--deep:#0a2f2c;--mint:#9fe3d6;--red:#b3261e;--green:#13703f;--r:16px}
@media (prefers-color-scheme:dark){:root{--bg:#0e1614;--card:#17221f;--ink:#e9efe9;--mut:#a3b3ab;--line:#293832;--acc:#57c2b6;--deep:#081c1a;--red:#ff8a7e;--green:#74d69e}}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,6vw,4.1rem);font-weight:800}h2{font-size:clamp(1.5rem,3.4vw,2.3rem);margin-bottom:.6rem}h3{font-size:1.05rem;margin-bottom:.35rem}
p{margin:.4rem 0}a{color:var(--acc)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:.5rem;z-index:9}
.sp{flex:1}
.nav{position:sticky;top:0;z-index:5;display:flex;gap:1rem;align-items:center;padding:.7rem max(1rem,4vw);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;gap:.5rem;align-items:center;font-weight:800;color:var(--ink);text-decoration:none}.logo span{font-weight:400;color:var(--mut)}.logo img{border-radius:8px}
.nav nav{display:flex;gap:1.1rem}.nav nav a{color:var(--mut);text-decoration:none;font-size:.93rem;font-weight:600}.nav nav a:hover{color:var(--acc)}
.lang{font-weight:700;text-decoration:none;font-size:.9rem;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem}
@media (max-width:860px){.nav nav{display:none}}
@media (max-width:520px){.nav{gap:.5rem;padding-inline:.8rem}.logo span{display:none}.nav .btn{padding:.5rem .8rem;min-height:40px}.phone{transform:none}}
main{overflow-x:clip}
.btn{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:700;background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:12px;padding:.7rem 1.15rem;min-height:46px;text-decoration:none;cursor:pointer}
@media (prefers-color-scheme:dark){.btn{color:#08201d}}
.btn.ghost{background:transparent;color:var(--acc);border-color:var(--line)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
main>section{padding:clamp(2.5rem,7vw,5rem) max(1rem,4vw);max-width:1200px;margin:0 auto}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.lead{font-size:1.2rem;color:var(--mut);max-width:38em;margin-top:1rem}.ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.phone{justify-self:center;width:min(320px,86vw);background:var(--deep);border-radius:38px;padding:14px;box-shadow:0 30px 60px -20px rgba(10,47,44,.45);transform:rotate(2deg)}
.scr{background:var(--bg);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:10px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.1rem;border-left:5px solid var(--green)}
.pc small{color:var(--mut);font-size:.72rem}.pc b{font-size:1.5rem;font-variant-numeric:tabular-nums}.pc span{font-size:.78rem;color:var(--mut)}.pc em{font-style:normal;font-weight:700;color:var(--green)}
.pc.bad{border-left-color:var(--red)}.pc.bad b,.pc.bad em{color:var(--red)}
.pc.capa{background:var(--deep);border:0;color:#fff}.pc.capa b{font-size:.95rem;color:var(--mint)}.pc.capa span{color:#cfe6e1}
.pain{background:var(--deep);color:#eaf4f1;border-radius:var(--r);max-width:1100px!important}
.pain ul{margin:1rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.pain li{border-top:2px solid var(--mint);padding-top:.7rem;color:#cfe6e1}
.sub{color:var(--mut);margin-bottom:1.3rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mod,.std,.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}
.mod p,.std p,.sec p{color:var(--mut);font-size:.94rem}
.std h3{color:var(--acc)}
.band{max-width:none!important;background:var(--card);border-block:1px solid var(--line)}.band>*{max-width:1200px;margin-inline:auto}
.steps{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:1.4rem}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.3rem}.steps li::before{content:counter(s);width:2.4rem;height:2.4rem;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800}
.steps span{color:var(--mut);font-size:.95rem}
.disc{margin-top:1.2rem;font-size:.9rem;color:var(--mut);border-left:3px solid var(--line);padding-left:.8rem;max-width:60em}
.soon p{color:var(--mut);max-width:52em}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem}@media (max-width:900px){.contact{grid-template-columns:1fr}}
form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
form .wide{grid-column:1/-1}@media (max-width:560px){form{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--mut)}
input,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;min-height:46px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.fnote{font-size:.8rem;color:var(--mut);margin:0}#leadmsg{margin:0;font-weight:600}#leadmsg.ok{color:var(--green)}#leadmsg.err{color:var(--red)}
footer{padding:2rem max(1rem,4vw);border-top:1px solid var(--line);color:var(--mut);font-size:.85rem;text-align:center}
#consent{position:fixed;inset:auto 1rem 1rem 1rem;max-width:560px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:0 10px 40px rgba(0,0,0,.2);z-index:9;font-size:.9rem}
#consent div{display:flex;gap:.5rem;margin-top:.6rem}
.doc{max-width:760px;margin:0 auto;padding:3rem 1rem}.doc h1{font-size:2rem}.doc h2{font-size:1.2rem;margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone{transform:none}}