/* Hovedmenyen: nedtrekkene som et lyst panel i det gamle uttrykket (hvit bakgrunn, mørk tekst, små hjørner), med moderne
 * ikoner, undertekster og myke effekter (sak 27025, 2026-10-24). Det mørke glasspanelet ble for mye på undersidene.
 * Desktop (fra 992 px): panelet glir mykt ned, innholdet glir inn etter tur, og menyen lukkes med et lite
 * opphold så den ikke forsvinner når pekeren går skrått ned mot den. Mobil: lenkene vises i lista som før. */

/* ---- Felles innhold ------------------------------------------------------------------------- */
.dm-head { margin: 0 0 .6rem; padding: 0 .85rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dm-item { display: flex; align-items: flex-start; gap: .9rem; padding: .65rem .85rem; border-radius: 3px; text-decoration: none !important; }
.dm-item b { display: block; font-size: 1.04rem; font-weight: 600; line-height: 1.25; }
.dm-item small { display: block; font-size: .86rem; line-height: 1.35; margin-top: .1rem; }
.dm-ico { flex: none; width: 40px; height: 40px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }
.dm-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Desktop: glasspanelet ----------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Panelet plasseres mot høyre kant av menyen (header-containeren), ikke under hvert menypunkt */
    .navbar .navbar-collapse, .navbar .navbar-nav, header .navbar-nav .dm-nav { position: static; }
    /* Menypunktet beholder sin egen plassering, så understreken blir under ordet og ikke over hele menylinjen */
    header .navbar-nav .dm-nav > .nav-link { position: relative; }
    /* Understreken under menypunktet blir stående så lenge panelet er åpent, i samme gradient som panelkanten */
    header .navbar-nav .dm-nav:hover > .nav-link::before, header .navbar-nav .dm-nav:has(:focus-visible) > .nav-link::before { opacity: 1; transition: opacity .25s; background: linear-gradient(90deg, rgb(240,128,60), rgb(204,74,21)); }
    header .navbar-nav:hover .dm-nav:not(:hover) > .nav-link::before { opacity: 0; transition: opacity .15s; }
    header .navbar-nav .dropdown-menu.dm {
        display: block !important; position: absolute; left: auto !important; right: 1rem !important; top: calc(100% - 10px) !important; margin: 0; padding: 1.6rem; border: 0; border-radius: 4px;
        color: rgb(35,35,35); text-align: left; background: rgb(255,255,255);
        box-shadow: 0 24px 60px -18px rgba(17,24,39,.28), 0 0 0 1px rgba(17,24,39,.07);
        opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top right;
        transition: opacity .25s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s;
        transition-delay: .15s, .15s, .35s; }
    /* Ingen strek i toppen av panelet: den ble dobbel med understreken under menypunktet */
    header .navbar-nav .dropdown-menu.dm::after { display: none; }
    /* Ingen usynlig bro: den dekket menypunktene og holdt feil panel åpent. Det korte lukkeoppholdet under (0,15 s) dekker
       den lille avstanden ned til panelet, og et annet menypunkt lukker panelet umiddelbart. */
    header .navbar-nav .dropdown-menu.dm::before { display: none; }
    header .navbar-nav .dm-nav:hover > .dropdown-menu.dm, header .navbar-nav .dm-nav:has(:focus-visible) > .dropdown-menu.dm {
        opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }
    /* Rask bytting mellom menypunkter: et annet menypunkt lukker det forrige panelet umiddelbart, og panelet som er i bruk,
       ligger øverst. Lukkeoppholdet gjelder bare når pekeren forlater menyen helt. */
    header .navbar-nav:hover .dm-nav:not(:hover) > .dropdown-menu.dm { opacity: 0; visibility: hidden; transform: translateY(-6px); transition-delay: 0s, 0s, 0s; transition-duration: .15s, .15s, 0s; pointer-events: none; }
    header .navbar-nav .dm-nav:hover > .dropdown-menu.dm { z-index: 1002; }
    header .navbar-nav .dropdown-menu.dm { z-index: 1001; }
    .dm-smal { width: 660px; }
    .dm-bred { width: 1060px; max-width: calc(100% - 2rem); }
    .dm-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; }
    .dm-bred .dm-grid { grid-template-columns: 1fr 1fr 260px; grid-auto-flow: row; }
    .dm-head { color: rgb(120,124,133); }
    .dm-item { color: rgb(35,35,35) !important; transition: background .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); position: relative; }
    .dm-item small { color: rgb(107,114,128); }
    .dm-ico { color: rgb(204,74,21); background: rgb(250,243,239); box-shadow: none; transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
    .dm-item::after { content: "→"; position: absolute; right: .75rem; top: 50%; transform: translate(-6px, -50%); opacity: 0; color: rgb(204,74,21); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
    .dm-item:hover, .dm-item:focus-visible { background: rgb(246,246,247); }
    .dm-item:hover .dm-ico, .dm-item:focus-visible .dm-ico { color: rgb(255,255,255); background: rgb(204,74,21); box-shadow: 0 6px 14px -6px rgba(204,74,21,.7); }
    .dm-item:hover::after, .dm-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
    /* Det fremhevede kortet */
    .dm-kort { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; padding: 1.1rem; border-radius: 3px; min-height: 100%;
        color: rgb(255,255,255) !important; text-decoration: none !important;
        background: radial-gradient(90% 65% at 88% 8%, rgba(122,60,255,.42), transparent 62%), radial-gradient(85% 60% at 0% 100%, rgba(255,106,61,.38), transparent 62%), radial-gradient(60% 50% at 100% 100%, rgba(255,61,139,.22), transparent 60%), rgb(24,24,30);
        box-shadow: 0 14px 30px -18px rgba(17,24,39,.6), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
    .dm-kort::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0; }
    .dm-kort:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(17,24,39,.7); }
    .dm-kort:hover::after { animation: dm-sveip 1.1s ease-out; }
    /* Stjernestøv i kortet som glimter mens menyen er åpen */
    .dm-kort::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
        background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent), radial-gradient(1.3px 1.3px at 78% 12%, rgba(255,236,210,.9), transparent),
            radial-gradient(1px 1px at 64% 44%, rgba(255,255,255,.8), transparent), radial-gradient(1.2px 1.2px at 30% 62%, rgba(255,226,176,.85), transparent),
            radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.8), transparent), radial-gradient(1.4px 1.4px at 46% 86%, rgba(255,200,220,.85), transparent),
            radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.7), transparent), radial-gradient(1.1px 1.1px at 94% 36%, rgba(255,255,255,.75), transparent); }
    .dm-nav:hover .dm-kort::before { animation: dm-glimt 3.2s ease-in-out infinite alternate; }
    /* Prototype-illustrasjonen: et lite vindu der en peker klikker på knappen, og skjermen bytter til neste side.
       Animasjonene settes bare mens menyen er åpen, så de starter fra begynnelsen hver gang. */
    .dm-proto { position: relative; display: block; height: 116px; margin: .8rem 0 auto; border-radius: 4px; overflow: hidden;
        background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px -14px rgba(0,0,0,.8); }
    .dm-proto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; background:
        radial-gradient(2.5px 2.5px at 9px 6.5px, rgba(255,138,128,.9) 99%, transparent), radial-gradient(2.5px 2.5px at 17px 6.5px, rgba(255,207,122,.9) 99%, transparent),
        radial-gradient(2.5px 2.5px at 25px 6.5px, rgba(143,211,166,.9) 99%, transparent), rgba(255,255,255,.06); }
    .dm-proto i { position: absolute; display: block; border-radius: 2px; }
    .dm-proto .b1 { left: 10px; top: 22px; width: 52%; height: 6px; background: rgba(255,255,255,.55); }
    .dm-proto .b2 { left: 10px; top: 34px; width: 74%; height: 4px; background: rgba(255,255,255,.22); }
    .dm-proto .b3 { left: 10px; top: 43px; width: 46%; height: 4px; background: rgba(255,255,255,.22); }
    .dm-proto .knapp { left: 10px; top: 58px; width: 58px; height: 17px; border-radius: 3px; background: rgb(204,74,21); box-shadow: 0 4px 12px -4px rgba(255,106,61,.8); }
    .dm-proto .knapp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 1.5px solid rgba(255,226,176,.9); opacity: 0; }
    .dm-proto .kort1, .dm-proto .kort2 { top: 22px; height: 80px; width: calc(50% - 15px); border-radius: 3px; opacity: 0; transform: translateX(14px);
        background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .dm-proto .kort1 { left: 10px; } .dm-proto .kort2 { right: 10px; }
    /* Innhold i kortene på neste side: et bildefelt i varme farger og to tekstlinjer */
    .dm-proto .kort1::before, .dm-proto .kort2::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 38px; border-radius: 2px;
        background: linear-gradient(135deg, rgba(255,181,71,.75), rgba(255,106,61,.7) 50%, rgba(255,61,139,.65)); }
    .dm-proto .kort2::before { background: linear-gradient(135deg, rgba(122,60,255,.7), rgba(82,205,255,.6)); }
    .dm-proto .kort1::after, .dm-proto .kort2::after { content: ""; position: absolute; left: 5px; top: 50px; width: 70%; height: 14px;
        background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) 0 0 / 100% 4px no-repeat, linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) 0 9px / 75% 3px no-repeat; }
    .dm-proto .peker { position: absolute; left: 0; top: 0; width: 15px; height: 15px; transform: translate(150px, 100px); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
    .dm-nav:hover .dm-proto .peker { animation: dm-peker 4.2s cubic-bezier(.45,.05,.25,1) infinite; }
    .dm-nav:hover .dm-proto .b1, .dm-nav:hover .dm-proto .b2, .dm-nav:hover .dm-proto .b3 { animation: dm-ut 4.2s ease infinite; }
    .dm-nav:hover .dm-proto .knapp { animation: dm-knapp 4.2s ease infinite; }
    .dm-nav:hover .dm-proto .knapp::after { animation: dm-ring 4.2s ease-out infinite; }
    .dm-nav:hover .dm-proto .kort1 { animation: dm-inn 4.2s cubic-bezier(.2,.8,.2,1) infinite; }
    .dm-nav:hover .dm-proto .kort2 { animation: dm-inn2 4.2s cubic-bezier(.2,.8,.2,1) infinite; }
    .dm-kort-tag { flex: none; align-self: flex-start; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 2px; color: rgb(255,255,255); background: rgb(204,74,21); }
    .dm-kort b { margin-top: .9rem; }
    .dm-kort b { font-size: 1.3rem; line-height: 1.2; }
    .dm-kort span { font-size: .92rem; line-height: 1.4; opacity: .9; }
    .dm-kort strong { font-size: .96rem; margin-top: .3rem; }
    .dm-kort strong i { font-style: normal; display: inline-block; transition: transform .3s ease; }
    .dm-kort:hover strong i { transform: translateX(4px); }
    .dm-alle { display: inline-flex; align-items: center; gap: .4rem; margin: 1rem 0 0 .85rem; font-size: .94rem; font-weight: 600; color: rgb(204,74,21) !important; text-decoration: none !important; }
    .dm-alle i { font-style: normal; transition: transform .3s ease; }
    .dm-alle:hover i { transform: translateX(4px); }
    /* Innholdet tones inn etter tur når panelet åpnes. Bare opacity: med glidning i tillegg så teksten ut til å vrikke. */
    .dm .dm-head, .dm .dm-item, .dm .dm-alle { opacity: 0; transition: opacity .3s ease, background .25s ease; }
    .dm .dm-kort { opacity: 0; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
    .dm-nav:hover .dm .dm-head, .dm-nav:hover .dm .dm-item, .dm-nav:hover .dm .dm-kort, .dm-nav:hover .dm .dm-alle,
    .dm-nav:has(:focus-visible) .dm .dm-head, .dm-nav:has(:focus-visible) .dm .dm-item, .dm-nav:has(:focus-visible) .dm .dm-kort, .dm-nav:has(:focus-visible) .dm .dm-alle { opacity: 1; }
    .dm-col > :nth-child(1) { transition-delay: .04s; } .dm-col > :nth-child(2) { transition-delay: .07s; } .dm-col > :nth-child(3) { transition-delay: .10s; }
    .dm-col > :nth-child(4) { transition-delay: .13s; } .dm-col > :nth-child(5) { transition-delay: .16s; } .dm-col > :nth-child(6) { transition-delay: .19s; }
    .dm-col > :nth-child(7) { transition-delay: .22s; }
    .dm .dm-kort { transition-delay: .18s; } .dm .dm-alle { transition-delay: .26s; }
    /* Når pekeren står over et punkt, skal det reagere med en gang */
    .dm-nav:hover .dm .dm-item:hover { transition-delay: 0s; }
}
@keyframes dm-sveip { to { background-position: -60% 0; } }
@keyframes dm-glimt { from { opacity: .35; } to { opacity: .8; } }
/* Pekeren går til knappen (0–35 %), klikker (38–44 %), skjermen bytter (46–88 %), og alt starter på nytt */
@keyframes dm-peker { 0% { transform: translate(150px, 100px); opacity: 0; } 8% { opacity: 1; } 35% { transform: translate(38px, 64px); } 38% { transform: translate(38px, 64px) scale(.82); } 44% { transform: translate(38px, 64px) scale(1); }
    80% { transform: translate(64px, 98px); opacity: 1; } 90%, 100% { transform: translate(150px, 100px); opacity: 0; } }
@keyframes dm-knapp { 0%, 37% { filter: none; opacity: 1; transform: none; } 40% { filter: brightness(1.35); transform: scale(.95); } 45% { filter: brightness(1.15); transform: none; opacity: 1; } 52%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes dm-ring { 0%, 38% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(4.5); } }
@keyframes dm-ut { 0%, 44% { opacity: 1; transform: none; } 52%, 90% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: none; } }
@keyframes dm-inn { 0%, 48% { opacity: 0; transform: translateX(14px); } 58%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes dm-inn2 { 0%, 54% { opacity: 0; transform: translateX(14px); } 64%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-8px); } }

/* ---- Mobil: lenkene i lista, uten panel og kort ----------------------------------------------- */
@media (max-width: 991.98px) {
    .dropdown-menu.dm { background: transparent; border: 0; box-shadow: none; padding: 0 0 .5rem; }
    .dm-head { margin-top: .75rem; opacity: .6; }
    .dm-item { padding: .4rem .75rem; color: inherit !important; }
    .dm-item small, .dm-ico { display: none; }
    .dm-kort { display: block; margin: .5rem .75rem; padding: .7rem .9rem; border-radius: 3px; color: #fff !important; text-decoration: none !important; background: rgb(204,74,21); }
    .dm-kort > * { display: block; } .dm-kort-tag, .dm-kort span { display: none; }
    .dm-proto { display: none !important; }
    .dm-alle { display: block; padding: .4rem .75rem; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
    header .navbar-nav .dropdown-menu.dm, .dm .dm-head, .dm .dm-item, .dm .dm-kort, .dm .dm-alle { transition: none !important; transform: none !important; }
    .dm-kort:hover::after, .dm-kort::before, .dm-proto, .dm-proto * { animation: none !important; }
}