/* Felles stil for hele dops.no (sak 27025, 2026-10-25). Lastes fra #/footer.hash. Samler det som før lå som
 * style-attributter i footeren og som stil-blokker skriptene la inn selv, så alt ligger i én CSS-fil. */

/* ---- Footer ----------------------------------------------------------------------------------------------- */
.ft-ikon { margin-right: 8px; }
.ft-partner { border: 1px solid rgb(102,102,102); }
/* Bunnlinjen holdes på én linje også på mobil (© · pil opp · Powered by docly) */
.ft-bunn { flex-wrap: nowrap; }
/* Mindre luft mellom kolonnene; ytterkantene beholder vanlig avstand, så linja flukter med resten av footeren */
.ft-bunn > .col-auto:not(:first-child) { padding-left: 8px; }
.ft-bunn > .col-auto:not(:last-child) { padding-right: 8px; }
.ft-bunn > .col-auto:first-child { white-space: nowrap; }
.ft-bunn > .col-auto:last-child { white-space: nowrap; display: flex; align-items: center; }
.ft-docly { margin-left: 5px; height: 20px; width: auto; }
.cookiealert { opacity: .8; }

/* ---- Glans på knappene ved trykk på mobil (knapp-glans.js) -------------------------------------------------- */
.btn-secondary.glans::after, .btn-primary.glans::after, .btn-info.glans::after { left: 130%; transition: left .5s ease-out; }

/* ---- Glød-ord (glod-ord.js) ------------------------------------------------------------------------------- */
.glod-ord.hel { white-space: nowrap; } /* ordet eller uttrykket holdes samlet på én linje */
.glod-ord .gb.on, .glod-ord.ferdig { -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 1200px 100%; background-repeat: repeat-x; }
/* Mønsteret gjentar seg hver 1200 px (speilet), så hele perioden må rulles, ellers hakker den ved hver runde */
.glod-ord .gb.on { background-position: var(--o, 0px) 0; }
.glod-ord .gb.rull { animation: glod-rull 12s linear infinite; }
@keyframes glod-rull { from { background-position: var(--o, 0px) 0; } to { background-position: calc(var(--o, 0px) - 1200px) 0; } }

/* ---- Glimt i o-en i logoen (logo-glimt.js) ---------------------------------------------------------------- */
.logo-glimt { position: absolute; pointer-events: none; z-index: 2; }
.logo-glimt .lg-skinn { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.logo-glimt .lg-skinn::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; transform: rotate(20deg) translateX(0); opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0)); }
.logo-glimt .lg-stjerne { position: absolute; right: -14%; top: -14%; width: 46%; height: 46%; opacity: 0; transform: scale(0) rotate(0deg); }
.logo-glimt .lg-stjerne::before, .logo-glimt .lg-stjerne::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 2px;
    background: radial-gradient(closest-side, rgba(255,255,255,1), rgba(255,240,220,.6) 45%, rgba(255,200,150,0)); }
.logo-glimt .lg-stjerne::before { width: 100%; height: 14%; transform: translate(-50%, -50%); }
.logo-glimt .lg-stjerne::after { width: 14%; height: 100%; transform: translate(-50%, -50%); }
.logo-glimt.glimt .lg-skinn::before { animation: lg-sveip .9s cubic-bezier(.4,0,.2,1) forwards; }
.logo-glimt.glimt .lg-stjerne { animation: lg-stjerne 1s ease-out .45s forwards; }
@keyframes lg-sveip { 0% { opacity: 0; transform: rotate(20deg) translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(20deg) translateX(420%); } }
@keyframes lg-stjerne { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(45deg); } 100% { opacity: 0; transform: scale(.2) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) { .glod-ord .gb.rull { animation: none; } }

/* ---- Tidligere style-attributter i felles maler (header, meny, logorad, skjemabar) -------------------------- */
.navbar .logo { height: 3em; }
.dm-minside-ikon { opacity: .5; height: 1em; margin-top: -4px; }
.logo-rad-bilde { width: 100%; max-height: 90px; }
.skjemabar-inn { z-index: 1; }
.skjemabar-kol { margin-top: -5em; }

/* ---- Rolig inntoning av brødtekst (reveal.js, sak 27025, 2026-10-25) ----------------------------------------
 * Avsnitt, lister og mellomoverskrifter glir bare et lite stykke og litt raskere enn kort og bilder. Med 28 px og 0,7 s
 * per avsnitt ble lange tekster urolige; nå kommer teksten inn som en rolig flyt. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-reveal-auto]:is(p, ul, ol, h3) { transform: translateY(10px); transition-duration: .55s; }
    [data-reveal-auto]:is(p, ul, ol, h3).is-visible { transform: none; }
}

/* ---- Hero på tjenestesidene: linjene kommer inn etter hverandre ved lasting ------------------------------------
 * Starter nesten usynlig (ikke helt usynlig), så overskriften fortsatt regnes som synlig fra første bilde (LCP). */
@media (prefers-reduced-motion: no-preference) {
    .tj-hero-tekst > * { animation: tj-inn .75s cubic-bezier(.2,.8,.2,1) both; }
    .tj-hero-tekst > :nth-child(1) { animation-delay: .05s; } .tj-hero-tekst > :nth-child(2) { animation-delay: .12s; }
    .tj-hero-tekst > :nth-child(3) { animation-delay: .2s; } .tj-hero-tekst > :nth-child(4) { animation-delay: .28s; }
    .tj-hero-tekst > :nth-child(5) { animation-delay: .36s; } .tj-hero-tekst > :nth-child(6) { animation-delay: .44s; }
}
@keyframes tj-inn { from { opacity: .01; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* «Les mer →» i oversiktskortene på /kunstig-intelligens/ og /portaler/ (sak 27025) */
.kort-les-mer { color: rgb(196,67,15); }

/* Knapperad i hero på /kunstig-intelligens/ og /portaler/: side om side så lenge de får plass (sak 27025) */
.hero-knapper { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-knapper .btn { padding-left: 1.75rem; padding-right: 1.75rem; }

/* ---- Banneret over footeren: kontorbildet fra Røa, tonet (sak 27025, 2026-10-24; felles for alle sider fra 2026-10-25, Kontorbanner.hash) ----------------------------
 * Jevn mørk tone over hele bildet, uten gradient, så sitatet leses godt. Bildet dempes litt i farge, så det ikke
 * konkurrerer med teksten. */
/* Fast høyde: lavere enn før (608 px). Bildet ligger absolutt i seksjonen, så høyden må settes her. */
.kontor-seksjon { position: relative; height: 420px; }
@media (max-width: 767.98px) { .kontor-seksjon { height: 320px; } }
/* Jevn tone over hele bildet, pluss en myk, mørkere flate midt på bak sitatet så teksten leses godt */
.kontor-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 48% 62% at 50% 50%, rgba(20,22,30,.55), rgba(20,22,30,0) 100%), rgba(20,22,30,.66); }
.kontor-banner > .container { position: relative; z-index: 1; }
/* Dempet farge, men skarpt: uskarphet fikk bildet til å se ut som dårlig kvalitet */
.kontor-banner > [id^="jarallax-container"] > * { filter: saturate(.5); }
/* Sitatet i banneret over footeren: samme uttrykk som sitatet under teamet på Om oss-siden (stort anførselstegn
 * over, midtstilt, rolig og stor tekst), men hvit tekst på bildet (sak 27025, 2026-10-24). */
.kontor-sitat { max-width: 46rem; margin: 0 auto; text-align: center; color: rgb(255,255,255); }
.kontor-sitat::before { content: "\201C"; display: block; height: 2.3rem; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; color: rgb(242,101,52); }
.kontor-sitat blockquote { margin: 0; }
.kontor-sitat p { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 24px rgba(0,0,0,.55); }

/* Penselstrøk under glød-ordet, som vokser i samme takt som bokstavene får farge (sak 27025, 2026-10-25): bredt, avrundet og svakt, i samme
 * fargeovergang, så det leses som en markering og ikke som en lenke. Feies inn fra venstre. */
.glod-ord { position: relative; z-index: 0; }
.glod-ord::after { content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .34em; z-index: -1; border-radius: .25em; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,181,71,.32), rgba(255,106,61,.26) 50%, rgba(255,61,139,.24));
    transform: scaleX(0) rotate(-1deg); transform-origin: left center; transition: transform var(--strek-tid, .8s) linear; }
.glod-ord.strek::after { transform: scaleX(1) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) { .glod-ord::after { transition: none; } }

/* Bilderutenett i stedet for slideshow (sak 27025, 2026-10-25): ett bilde midtstilt, to eller tre side om side, fire i
 * 2x2. Runde hjørner og myk skygge; bildene vises hele, uten piler og uten skript. Brukes på tjenestesidene og DevOps. */
.bilderutenett { display: grid; gap: 1.4rem; }
.bilderutenett.antall-1 { max-width: 820px; margin: 0 auto; }
.bilderutenett.antall-2 { grid-template-columns: repeat(2, 1fr); }
.bilderutenett.antall-3 { grid-template-columns: repeat(3, 1fr); }
.bilderutenett.antall-4 { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
@media (max-width: 767.98px) { .bilderutenett.antall-2, .bilderutenett.antall-3, .bilderutenett.antall-4 { grid-template-columns: 1fr; } }
.bilderute { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,24,39,.06), 0 24px 50px -30px rgba(17,24,39,.5); }
.bilderute img { display: block; width: 100%; height: auto; }

/* Prototypesiden: bestillingsskjemaet følger med når man ruller på stor skjerm, og hopp til skjemaet lander under menyen (sak 27025) */
@media (min-width: 992px) { .proto-skjema { position: sticky; top: 6.5rem; } }
#bestill { scroll-margin-top: 6.5rem; }

/* Vannrett overflyt klippes med clip i stedet for hidden (sak 27025): hidden på html og body gjør body til en egen
 * rullebeholder, og da virker ikke position: sticky noe sted på siden (f.eks. bestillingsskjemaet på /prototype). */
html, body { overflow-x: clip; }

/* Tre Bootstrap-verktøyklasser som malene bruker, men som er fjernet fra bundle.css ved minifiseringen (sak 27025):
 * «Les mer» nederst i kortene, knapper som brytes pent og ikoner som ikke klemmes. */
.mt-auto { margin-top: auto !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }