/* Felles for bransjeeksemplene fra Bits & Bytes. Farger, skrift og særpreg ligger i tema.css.
   Variabler tema.css setter: --bakgrunn --tekst --tekst-2 --hoved --hoved-tekst --aksent --flate --linje --tittel --brod --radius --maks */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bakgrunn);color:var(--tekst);font-family:var(--brod);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--tittel);margin:0;line-height:1.1}
p{margin:0 0 1em}
.wrap{max-width:var(--maks,1160px);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
:focus-visible{outline:3px solid var(--aksent);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Demobanner fra Bits & Bytes (nøytralt, ikke kundens profil) */
.demo{background:#F4F4F5;color:#52525B;font:500 .8125rem/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border-bottom:1px solid #E4E4E7}
.demo .wrap{display:flex;gap:16px;justify-content:space-between;align-items:center;padding-top:7px;padding-bottom:7px}
.demo a{color:#3F3F46;white-space:nowrap}

/* Topp og meny */
.topp{position:sticky;top:0;z-index:30;background:var(--topp-bakgrunn,var(--bakgrunn));border-bottom:1px solid var(--linje)}
.topp .wrap{display:flex;align-items:center;gap:24px;height:72px}
.merke{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.merke svg{width:40px;height:40px;flex:none}
.meny{display:flex;gap:4px;margin-left:auto}
.meny a{text-decoration:none;padding:8px 12px;border-radius:999px}
.meny a:hover{background:var(--flate)}
.meny a[aria-current=page]{background:var(--flate);font-weight:600}
.meny-knapp{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer;color:inherit}
.meny-knapp svg{width:28px;height:28px}

/* Knapper */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 1rem/1 var(--brod);text-decoration:none;border-radius:var(--knapp-radius,999px);padding:16px 24px;border:2px solid transparent;cursor:pointer}
.knapp svg{width:19px;height:19px;flex:none}
.knapp-hoved{background:var(--hoved);color:var(--hoved-tekst)}
.knapp-hoved:hover{filter:brightness(1.08)}
.knapp-strek{border-color:currentColor;background:transparent}
.knapp-lys{background:var(--bakgrunn);color:var(--tekst);border-color:var(--linje)}
.knapp-liten{padding:11px 18px;font-size:.95rem}
.knapp[disabled]{opacity:.6;cursor:wait}

/* Plassholder til ekte bilde kommer */
.plassholder{display:grid;place-items:center;min-height:240px;background:repeating-linear-gradient(135deg,var(--flate) 0 14px,var(--bakgrunn) 14px 28px);border:1px dashed var(--linje);color:var(--tekst-2);font-size:.9rem;text-align:center;padding:16px}
.plassholder span{background:var(--bakgrunn);padding:4px 12px;border-radius:999px}

/* Skjema */
.skjema{display:grid;gap:18px}
.skjema-ingress{margin:0;color:var(--tekst-2)}
.skjema-felt{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.felt{display:grid;gap:6px}
.felt-hel{grid-column:1/-1}
.felt label{font-weight:600;font-size:.95rem}
.felt label em{font-style:normal;font-weight:400;color:var(--tekst-2)}
.felt small{color:var(--tekst-2);font-size:.88rem}
.felt input,.felt textarea,.felt select{font:inherit;font-size:1rem;padding:13px 14px;border:1px solid var(--felt-kant,#B9B4AC);border-radius:var(--felt-radius,8px);background:#fff;color:var(--tekst);width:100%}
.felt textarea{resize:vertical;line-height:1.5}
.felt input:focus,.felt textarea:focus,.felt select:focus{outline:3px solid var(--aksent);outline-offset:1px;border-color:var(--tekst)}
.felt [aria-invalid=true]{border-color:#B42318;background:#FFF6F5}
.felt-robot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skjema-feil{color:#B42318;font-weight:600;margin:0}
.skjema-feil:empty{display:none}
.skjema .knapp-hoved{justify-self:start}
.skjema-takk{padding:22px;border-radius:var(--radius);background:var(--flate)}
.skjema-takk:focus{outline:none}
.skjema-takk-tittel{font-family:var(--tittel);font-size:1.4rem;margin:0 0 6px}
.skjema-takk p:last-child{margin:0;color:var(--tekst-2)}

/* Åpningstider (fylles fra databasen når de er satt) */
.tider{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tider li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted var(--linje);padding-bottom:6px}
.tider .avvik{color:var(--aksent);font-weight:600}

/* Bunn */
.bunn{background:var(--bunn-bakgrunn,var(--tekst));color:var(--bunn-tekst,rgba(255,255,255,.8));padding:56px 0 28px;font-size:.98rem}
.bunn .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.bunn .merke{margin-bottom:12px}
.bunn h2{font-family:var(--brod);font-size:.95rem;font-weight:600;margin-bottom:10px;color:var(--bunn-tittel,#fff)}
.bunn ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bunn a{text-decoration:none}
.bunn a:hover{text-decoration:underline}
.levert{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:16px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.875rem;opacity:.75}

.mobilrad{display:none}

@media (max-width:980px){
  .meny,.topp-knapp{display:none}
  .meny-knapp{display:block}
  .topp.apen .meny{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--bakgrunn);padding:8px clamp(16px,4vw,40px) 20px;border-bottom:1px solid var(--linje);box-shadow:0 20px 30px -20px rgba(0,0,0,.25)}
  .topp.apen .meny a{padding:14px 8px;font-size:1.15rem;border-radius:0;border-bottom:1px solid var(--linje);background:none}
  .bunn .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{padding-bottom:76px}
  .topp .wrap{height:64px}
  .topp.apen .meny{top:64px}
  .demo-ekstra{display:none}
  .skjema-felt{grid-template-columns:1fr}
  .skjema .knapp-hoved{justify-self:stretch}
  .bunn .wrap{grid-template-columns:1fr}
  .mobilrad{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--bakgrunn);border-top:1px solid var(--linje);box-shadow:0 -8px 24px -12px rgba(0,0,0,.25)}
  .mobilrad .knapp{padding:15px 10px}
}
@media (pointer:coarse){.felt input,.felt textarea,.felt select{font-size:16px!important}}