/* rørleggervaktoslo.no - stilark. Farger og fonter fra det gamle designet. */
:root {
  --morkt: #1E2C27; --bla: #0079D0; --gronn: #6BD45E; --rod: #EC4040; --hvit: #fff; --svart: #000;
  --lys: #FAFAFA; --lys2: #F8F8F8; --grå: #e6e6e6; --tekst: #1d1d1d; --tekst-lys: #4a4a4a;
  --bredde: 1400px; --gutter: 16px; --radius: 8px; --pille: 999px;
  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-slab: "Roboto Slab", Georgia, serif;
  --skygge: 0 6px 24px rgba(0,0,0,.12);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--tekst); background: var(--hvit); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bla); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; color: var(--morkt); }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: -999px; top: 0; background: var(--morkt); color: #fff; padding: .5em 1em; z-index: 1000; }
.hopp:focus { left: 8px; }
.beholder { width: 100%; max-width: var(--bredde); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.beholder-smal { max-width: 900px; }
.sentrert { text-align: center; }

/* Knapper */
.knapp { display: inline-block; font-weight: 600; font-size: .95rem; letter-spacing: .01em; padding: .8em 1.5em; border-radius: var(--pille); text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; font-family: inherit; text-align: center; }
.knapp:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.knapp-rod { background: var(--rod); color: #fff; }
.knapp-bla { background: var(--bla); color: #fff; }
.knapp-morkt { background: var(--morkt); color: #fff; border-color: rgba(255,255,255,.4); }
.knapp-send { width: 100%; font-size: 1rem; }
.etikett { display: inline-block; background: var(--rod); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35em .9em; border-radius: var(--pille); margin-bottom: 1em; }
.knapperad { display: flex; flex-wrap: wrap; gap: .6rem .8rem; margin: .5rem 0 1rem; }
.knapperad-loddrett { flex-direction: column; }
.knapperad-loddrett .knapp { width: 100%; }
.seksjon-sentrert .knapperad { justify-content: center; }
.seksjon-sentrert { text-align: center; }

/* Topp */
.topp { background: var(--morkt); color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.topp-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.logo img { width: 64px; height: auto; }
.hovedmeny { margin-left: auto; }
.hovedmeny ul { list-style: none; margin: 0; padding: 0; }
.hovedmeny > ul { display: flex; gap: .25rem; align-items: center; }
.hovedmeny > ul > li { position: relative; }
.hovedmeny a { color: #fff; text-decoration: none; font-weight: 600; font-size: .98rem; padding: .6em .8em; display: inline-block; border-radius: 6px; }
.hovedmeny a:hover, .hovedmeny a[aria-current] { background: rgba(255,255,255,.12); }
.under-knapp { background: none; border: 0; color: #fff; width: 1.6em; height: 1.6em; cursor: pointer; vertical-align: middle; margin-left: -.5em; position: relative; }
.under-knapp::after { content: ""; position: absolute; left: 50%; top: 50%; width: .45em; height: .45em; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -70%) rotate(45deg); }
.hovedmeny ul ul { position: absolute; left: 0; top: 100%; background: #fff; min-width: 240px; border-radius: var(--radius); box-shadow: var(--skygge); padding: .4rem 0; display: none; z-index: 60; }
.hovedmeny ul ul a { color: var(--morkt); display: block; padding: .55em 1.1em; font-weight: 500; }
.hovedmeny ul ul a:hover { background: var(--lys2); }
.hovedmeny li.har-under:hover > ul, .hovedmeny li.har-under:focus-within > ul, .hovedmeny li.apen > ul { display: block; }
.meny-knapp { display: none; background: none; border: 2px solid rgba(255,255,255,.5); color: #fff; font: inherit; font-weight: 600; padding: .4em .9em; border-radius: 6px; cursor: pointer; }
.topp-vakt { white-space: nowrap; }

/* Hero */
.hero { position: relative; color: #fff; background: var(--morkt); background-image: linear-gradient(156deg, rgba(30,44,39,.97) 50%, rgba(0,0,0,.15) 100%), var(--bg-bilde, none); background-size: cover; background-position: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; }
.hero .hero-tekst h2 + .tekst { max-width: 60ch; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 480px); gap: 2.5rem; align-items: start; }
.hero-uten-skjema .hero-inner { grid-template-columns: 1fr; }
.hero-tekst .overskrift-liten { font-size: 1.1rem; opacity: .95; }
.hero-tekst .tekst a { color: #fff; }
.hero-skjema { background: var(--morkt); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 1.4rem; box-shadow: var(--skygge); }
.skjema-tittel { font-weight: 700; font-size: 1.15rem; margin: 0 0 1rem; }
.hero .hero-tekst > .knapperad, .hero .hero-tekst .kolonne > .knapperad { margin-top: 1rem; }

/* Skjema */
.kontaktskjema { display: grid; gap: .7rem; }
.kontaktskjema label { display: block; }
.kontaktskjema input[type=text], .kontaktskjema input[type=email], .kontaktskjema input[type=tel], .kontaktskjema textarea { width: 100%; font: inherit; font-size: .95rem; padding: .7em .9em; border: 1px solid #cfd6d3; border-radius: 6px; background: #fff; color: var(--tekst); }
.kontaktskjema textarea { min-height: 120px; resize: vertical; }
.kontaktskjema input:focus, .kontaktskjema textarea:focus { outline: 2px solid var(--bla); outline-offset: 1px; }
.kontaktskjema .samtykke { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; }
.kontaktskjema .samtykke input { margin-top: .3em; }
.kontaktskjema .samtykke a { color: inherit; }
.kontaktskjema .hp { position: absolute; left: -9999px; }
.recaptcha-merknad { font-size: .72rem; opacity: .7; margin: 0; }
.recaptcha-merknad a { color: inherit; }
.skjema-melding { margin: 0; font-size: .92rem; min-height: 1.2em; }
.skjema-melding.feil { color: #ffb3b3; }
.skjema-melding.ok { color: var(--gronn); }
.popup .kontaktskjema { color: var(--tekst); }
.popup .skjema-melding.feil { color: #c62828; }
.popup .skjema-melding.ok { color: #2e7d32; }
.grecaptcha-badge { visibility: hidden; }

/* Seksjoner */
.seksjon { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.seksjon + .seksjon { border-top: 1px solid #f0f0f0; }
.seksjon-morkt { background: var(--morkt); color: #fff; background-image: linear-gradient(156deg, rgba(30,44,39,.97) 50%, rgba(0,0,0,.15) 100%), var(--bg-bilde, none); background-size: cover; }
.seksjon-morkt h2, .seksjon-morkt h3 { color: #fff; }
.seksjon > .beholder > h2, .seksjon > .beholder > .overskrift-liten { text-align: center; }
.seksjon > .beholder > h2 { margin-bottom: 1.5rem; }
.overskrift-liten { font-weight: 700; font-size: 1.35rem; color: var(--morkt); margin: 0 0 1rem; }
.tekst { max-width: 72ch; }
.tekst :last-child { margin-bottom: 0; }
.tekst h3 { margin-top: 1.2em; }
.kolonner { display: grid; gap: 2.5rem; align-items: center; margin: 1.5rem 0; }
.kolonner-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kolonner-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kolonner-4, .kolonner-5, .kolonner-6 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kolonner .kolonne > .bilde img { border-radius: 12px; width: 100%; object-fit: cover; }
.kolonner .kolonne > .knapperad { margin-top: 1.2rem; }
.rutenett { display: grid; gap: 1.5rem; margin: 1rem 0; }
.rutenett-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rutenett-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rutenett-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rutenett-1 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rutenett .kolonne { background: var(--lys); border: 1px solid #eee; border-radius: 12px; padding: 1.4rem; }
.rutenett .kolonne .bilde img { border-radius: 10px; }
.rutenett .kolonne .etikett { background: var(--bla); margin: 1rem 0 0; font-size: .85rem; text-transform: none; letter-spacing: 0; }
.ikonboks .ikon, .ikon-stor { display: inline-block; width: 44px; height: 44px; color: var(--bla); margin-bottom: .6rem; }
.ikonboks .ikon svg, .ikon-stor svg { width: 100%; height: 100%; fill: currentColor; }
.ikonboks h3 { margin-bottom: .4em; }
.bilde { margin: 0; }
.ikonliste { list-style: none; padding: 0; }
.ikonliste li { padding: .3em 0; border-bottom: 1px solid #eee; }

/* Trekkspill */
.trekkspill { max-width: 900px; margin: 0 auto; text-align: left; }
.trekkspill details { border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; margin-bottom: .6rem; }
.trekkspill summary { cursor: pointer; font-weight: 600; padding: 1em 3em 1em 1.2em; list-style: none; position: relative; font-size: 1.02rem; }
.trekkspill summary::-webkit-details-marker { display: none; }
.trekkspill summary::after { content: ""; position: absolute; right: 1.3em; top: 50%; width: .55em; height: .55em; border-right: 2px solid var(--bla); border-bottom: 2px solid var(--bla); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.trekkspill details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.trekkspill .tekst { padding: 0 1.2em 1.2em; max-width: none; color: var(--tekst-lys); }

/* Innleggskort */
.kort-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; margin: 1rem 0 1.5rem; text-align: left; }
.kort { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.4rem; display: flex; flex-direction: column; }
.kort h3 { font-size: 1.15rem; }
.kort h3 a { color: var(--morkt); text-decoration: none; }
.kort h3 a:hover { color: var(--bla); }
.kort p { color: var(--tekst-lys); font-size: .95rem; flex: 1; }
.les-mer { font-weight: 600; text-decoration: none; }

/* Artikler */
.artikkel { font-size: 1.05rem; }
.artikkel img { border-radius: 10px; margin: 1.5rem auto; }
.artikkel h2 { margin-top: 1.6em; }
.artikkel h3 { margin-top: 1.3em; }
.artikkel figure { margin: 1.5rem 0; }
.meta-linje { color: var(--tekst-lys); font-size: .9rem; margin-bottom: 1.5rem; }
.hero-artikkel .hero-tekst .tekst { font-weight: 600; font-size: 1.1rem; }

/* Bunn */
.bunn { background: var(--morkt); color: #d9e0dc; padding: 3rem 0 6rem; margin-top: 2rem; font-size: .95rem; }
.bunn-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.bunn-kol img { width: 80px; margin-bottom: 1rem; }
.bunn-tittel { color: var(--rod); font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; }
.bunn ul { list-style: none; padding: 0; margin: 0; }
.bunn li { padding: .2em 0; }
.bunn a { color: #fff; text-decoration: none; }
.bunn a:hover { text-decoration: underline; }
.bunn-linje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.5rem; font-size: .85rem; }
.bunn-linje p { margin: 0; }
.betaling strong { color: #ffb3c7; }

/* Mobil-linje nederst */
.mobil-linje { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(30,44,39,.97); padding: .5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom)); gap: .4rem; box-shadow: 0 -4px 16px rgba(0,0,0,.3); }
.mobil-linje .knapp { flex: 1; padding: .7em .4em; font-size: .82rem; }

/* Popup */
.popup { border: 0; border-radius: 14px; padding: 1.6rem; width: min(520px, calc(100% - 2rem)); box-shadow: var(--skygge); color: var(--tekst); }
.popup::backdrop { background: rgba(0,0,0,.55); }
.popup h2 { font-size: 1.4rem; padding-right: 3rem; }
.popup .lukk { position: absolute; right: 1rem; top: 1rem; background: var(--lys2); border: 0; border-radius: var(--pille); padding: .4em .9em; cursor: pointer; font: inherit; font-size: .85rem; }
.popup .recaptcha-merknad { opacity: .75; }
.popup .skjema-melding { color: var(--tekst); }

/* Synlighet */
.skjul-desktop { display: none; }

@media (max-width: 1024px) {
  .skjul-desktop { display: revert; }
  .skjul-tablet { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-skjema { max-width: 560px; }
  .kolonner-2, .kolonner-3 { grid-template-columns: 1fr; }
  .rutenett-3, .rutenett-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topp-vakt { display: none; }
  .meny-knapp { display: inline-block; margin-left: auto; }
  .hovedmeny { margin-left: auto; }
  .hovedmeny > ul { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--morkt); flex-direction: column; align-items: stretch; padding: .5rem var(--gutter) 1rem; gap: 0; border-top: 1px solid rgba(255,255,255,.1); max-height: calc(100vh - 72px); overflow: auto; }
  .hovedmeny.apen > ul { display: flex; }
  .hovedmeny > ul > li > a { display: inline-block; padding: .8em .6em; font-size: 1.05rem; }
  .hovedmeny ul ul { position: static; background: transparent; box-shadow: none; min-width: 0; padding: 0 0 .5rem 1rem; }
  .hovedmeny ul ul a { color: #d9e0dc; }
  .hovedmeny ul ul a:hover { background: rgba(255,255,255,.08); }
  .hovedmeny li.har-under:hover > ul { display: none; }
  .hovedmeny li.apen > ul { display: block; }
  .mobil-linje { display: flex; }
  .bunn { padding-bottom: 6.5rem; }
}
@media (max-width: 640px) {
  .skjul-mobile { display: none; }
  body { font-size: 16px; }
  .rutenett-2, .rutenett-3, .rutenett-4 { grid-template-columns: 1fr; }
  .seksjon { padding: 2.2rem 0; }
  .hero-skjema { padding: 1.1rem; }
  .knapp { padding: .75em 1.2em; }
  .popup { padding: 1.2rem; }
}

/* Mobil-linje: kortere knapper */
.mobil-linje .knapp { font-size: .78rem; padding: .75em .3em; white-space: nowrap; }

/* xFlyt-skjema (innbygging) */
.xf-skjema { min-height: 420px; }
.xf-skjema iframe { width: 100% !important; border: 0; border-radius: 8px; background: #fff; }

/* Lys skjemaboks i hero slik at xFlyt-skjemaet blir lesbart */
.hero-skjema { background: #fff; color: var(--tekst); border-color: transparent; }
.hero-skjema .skjema-tittel { color: var(--morkt); }

/* Egils ønske 29.10.2026: gjennomsiktig, svakere hvit skjemaboks som passer på alle sider */
.hero-skjema { background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.45); }
.xf-skjema iframe { background: transparent; }

/* Nærmere originalen (QA 29.10.2026) */
.seksjon-sentrert .knapperad .knapp-bla { background: #fff; color: var(--morkt); border-color: var(--morkt); }
.seksjon-sentrert .knapperad .knapp-bla:hover { background: var(--morkt); color: #fff; }
.rutenett .kolonne:has(.ikonboks), .rutenett .kolonne:has(> .ikon-stor) { background: none; border: 0; padding: 1rem .5rem; text-align: center; }
.rutenett .kolonne:has(.ikonboks) .tekst, .rutenett .kolonne:has(> .ikon-stor) .tekst { margin: 0 auto; font-size: .95rem; color: var(--tekst-lys); }
.ikonboks .ikon, .ikon-stor { width: 56px; height: 56px; padding: 13px; border-radius: 14px; background: #e8f3fc; color: var(--bla); }
.rutenett .kolonne:nth-child(odd) .ikon, .rutenett .kolonne:nth-child(odd) .ikon-stor { background: #fdeaea; color: var(--rod); }
.rutenett .kolonne:has(> .bilde + .etikett) { background: none; border: 0; padding: 0; text-align: center; }
.rutenett .kolonne:has(> .bilde + .etikett) .etikett { background: var(--bla); }
.kort { border: 0; padding: 0 .5rem; }
.kort h3 { font-size: 1.2rem; }

/* QA-runde 29.10.2026: rapport 2 og 3 */
.hero h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: .01em; margin-bottom: .3em; }
.hero h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 700; }
.hero-artikkel h1 { font-size: clamp(2rem, 4vw, 3rem); }
.tekst h3, .artikkel h3 { font-size: 1.5rem; margin-top: 1.4em; }
.kolonne > h2:not(:first-child), .kolonne > h3:not(:first-child), .beholder > h2:not(:first-child) { margin-top: 1.4em; }
.kolonne > .knapperad, .tekst + .knapperad, .tekst + .knapp { margin-top: 1.4rem; }
.knapperad .etikett { background: #e6ebe8; color: var(--morkt); text-transform: none; letter-spacing: 0; font-size: .95rem; padding: .8em 1.5em; margin: 0; border: 2px solid transparent; line-height: 1.2; }
.hero .etikett { background: var(--rod); color: #fff; text-transform: uppercase; font-size: .78rem; padding: .35em .9em; margin-bottom: 1em; }
.rutenett .kolonne { background: none; border: 0; padding: 0; }
.rutenett .kolonne .bilde img { border-radius: 12px; }
.seksjon + .seksjon { border-top: 0; }
.xf-skjema { min-height: 0; }
.bunn { padding-bottom: 2.5rem; }
.trekkspill-punkt { border: 1px solid #e3e3e3; border-radius: 10px; padding: .6em 1em; margin: .5em 0; }
.trekkspill-punkt summary { font-weight: 600; cursor: pointer; }
@media (max-width: 1024px) { .bunn { padding-bottom: 6.5rem; } }
@media (max-width: 640px) { .rutenett-4:has(.ikonboks), .rutenett-3:has(.ikonboks) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } }
.seksjon-kontakt .hero-skjema { background: rgba(255,255,255,.78); backdrop-filter: blur(8px); }
.seksjon-kontakt .tekst a { color: #fff; }

.kolonne-knapp { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.knapp-stor { font-size: 1.05rem; padding: 1em 2em; }
.rutenett .kolonne > .overskrift-liten { font-size: 1.25rem; font-weight: 600; margin: 0 0 .4em; }

/* QA-runde 3: symmetri mot originalen */
.beholder-smal { max-width: 816px; }
.beholder-smal .tekst { max-width: none; }
.bunn { margin-top: 0; }
.seksjon-sentrert .tekst { max-width: 72ch; margin-left: auto; margin-right: auto; }
.seksjon-sentrert .kort-rutenett { text-align: left; }
.kort-rutenett { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .kort-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kort-rutenett { grid-template-columns: 1fr; } }
.kort { padding: 1.4rem; }
.tekst h2 { margin-top: 1.6em; }
.tekst > h2:first-child { margin-top: 0; }
.rutenett-2:has(img) { align-items: center; }
.kolonne:has(> h2:only-child):has(+ .rutenett) { text-align: center; }
.artikkel details { border: 1px solid #e3e3e3; border-radius: 10px; padding: .7em 1em; margin: .5em 0; }
.artikkel details summary { font-weight: 600; cursor: pointer; }
.artikkel details > div { margin-top: .6em; color: var(--tekst-lys); }

/* Logoen i toppmenyen beveger seg i 4 sekunder første gang noen kommer inn (én gang per besøk). Siden kan brukes hele tiden. */
.logo { position: relative; display: inline-block; }
.logo-beveger > img { visibility: hidden; }
.logo-lag { position: absolute; inset: 0; pointer-events: none; }
.logo-lag img, .logo-glans { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-bolge { animation: logo-bolge 4s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 52%; }
.logo-sirkel { animation: logo-sirkel 4s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 48% 42%; }
.logo-glans { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%) no-repeat; background-size: 300% 100%; -webkit-mask: url(/bilder/2025/02/or-logo.png) center / contain no-repeat; mask: url(/bilder/2025/02/or-logo.png) center / contain no-repeat; animation: logo-glans 4s ease-in-out both; }
@keyframes logo-bolge { 0% { opacity: 0; transform: rotate(-260deg) scale(.4); } 8% { opacity: 1; } 45% { transform: rotate(7deg) scale(1.05); } 55%, 100% { opacity: 1; transform: none; } }
@keyframes logo-sirkel { 0%, 25% { opacity: 0; transform: scale(.45); } 48% { opacity: 1; transform: scale(1.08); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes logo-glans { 0%, 60% { background-position: 110% 0; opacity: 1; } 90% { background-position: -10% 0; opacity: 1; } 91%, 100% { background-position: -10% 0; opacity: 0; } }