/* NORD Canvas CSS override */
/* Purpose: Custom styling for Nord University's Canvas instance with mobile and dark mode support. */

/* External Stylesheet Import */
@import 'https://nord.evaluationkit.eu/canvas/css';

/* Hide specific default Canvas messages or elements */
#no_collaborations_message p:first-of-type,
aside#right-side p:first-of-type {
    display: none;
}

/* ==========================================================================
   COLOR PALETTE & CSS VARIABLES - Using Canvas LMS Variables
   ========================================================================== */
:root {
    /* NORD Secondary Colors - Mapped to Canvas variables where possible */
    --nord-sekund1: #003D4C;   /* Mørk blå (Dark Blue) */
    --nord-sekund2: var(--ic-brand-primary, #165C7D);   /* Medium blå - Uses Canvas primary */
    --nord-sekund3: var(--ic-brand-button--secondary-bgd, #115E67);   /* Mørk turkis - Uses Canvas secondary button */
    --nord-sekund4: #007041;   /* Mørk grønn (Dark Green) */
    --nord-sekund5: #6CC24A;   /* Lys grønn (Light Green - Secondary) */
    --nord-sekund6: #94B7BB;   /* Grå blå (Grey Blue) */
    --nord-sekund7: var(--ic-link-color, #009FDF);   /* NORD Primary Colors */
    --nord-prima1: #8FD6BD;    /* Lys turkis (Light Turquoise) */
    --nord-prima2: #00B0B9;    /* Lys blå/turkis (Light Blue/Turquoise - Web Color) */
    --nord-prima3: #A9C47F;    /* NORD Contrast Colors */
    --nord-kontrast1: #EC5742; /* Rød (Red) */
    --nord-kontrast2: #FFA300; /* Basic Colors - These will be inverted by Canvas in dark mode */
    --hvit: #FFFFFF;           /* Hvit (White) - Canvas inverts this */
    --svart: #000000;          /* Text Colors - Use Canvas LMS variables for automatic dark mode support */
    --tekst-standard: var(--ic-brand-font-color-dark, #2D3B45);
    --tekst-lys: var(--ic-brand-font-color-dark-lightened-28, #636D75);
}

/* Text Color Utilities */
.nord-prima1 { color: var(--nord-prima1); } /* webfarge */
.nord-prima2 { color: var(--nord-prima2); } /* webfarge - Consider using a variable like --nord-prima2-web */
.nord-prima3 { color: var(--nord-prima3); }
.nord-sekund1 { color: var(--nord-sekund1); } /* webfarge */
.nord-sekund2 { color: var(--nord-sekund2); } /* webfarge */
.nord-sekund3 { color: var(--nord-sekund3); }
.nord-sekund4 { color: var(--nord-sekund4); }
.nord-sekund5 { color: var(--nord-sekund5); }
.nord-sekund6 { color: var(--nord-sekund6); } /* webfarge */
.nord-sekund7 { color: var(--nord-sekund7); } /* webfarge */
.nord-kontrast1 { color: var(--nord-kontrast1); } /* webfarge */
.nord-kontrast2 { color: var(--nord-kontrast2); } /* Background Color Utilities */
.nord-prima1-bg { background-color: var(--nord-prima1); } /* webfarge */
.nord-prima2-bg { background-color: var(--nord-prima2); } /* webfarge - Consider using a variable */
.nord-prima3-bg { background-color: var(--nord-prima3); }
.nord-sekund1-bg { background-color: var(--nord-sekund1); } /* webfarge */
.nord-sekund2-bg { background-color: var(--nord-sekund2); } /* webfarge */
.nord-sekund3-bg { background-color: var(--nord-sekund3); }
.nord-sekund4-bg { background-color: var(--nord-sekund4); }
.nord-sekund5-bg { background-color: var(--nord-sekund5); }
.nord-sekund6-bg { background-color: var(--nord-sekund6); } /* webfarge */
.nord-sekund7-bg { background-color: var(--nord-sekund7); } /* webfarge */
.nord-kontrast1-bg { background-color: var(--nord-kontrast1); } /* webfarge */
.nord-kontrast2-bg { background-color: var(--nord-kontrast2); } /* General Text Color Utilities */
.tekst-hvit, .hvidtekst { /* Combined .tekst-hvid and .hvidtekst */
    color: var(--hvit);
}
.sorttekst {
    color: var(--svart);
}

/* Link color overrides within specific text color contexts */
div.hvidtekst a { color: var(--hvit); } /* Links inside elements with .hvidtekst */
div.sorttekst a { color: var(--svart); } /* ID-based link coloring (use with caution, classes are more reusable) */
div#lenkhvid a {
    color: var(--hvit);
    text-decoration: none;
}
div#lenksort a {
    color: var(--svart);
    text-decoration: none;
}

/* Reference text style */
.mp-referanse {
    font-size: 80%;
    color: var(--tekst-lys); /* Example: #34495e */
}

/* Shadow utilities */
.mp-skygge { /* Multi-layered shadow */
    margin: 0.5em;
    padding: 1em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
}
.boks-skygge { /* Simple box shadow */
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

/* Border radius utilities */
.mp-liggende-aeg { /* Organic, egg-like shape */
    border-radius: 71% 29% 63% 37% / 51% 18% 82% 49%;
}
.mp-rund3015 { border-radius: 30% 15%; }
.mp-rund2040 { border-radius: 20% 40%; }
.mp-rund1530 { border-radius: 15% 30%; }
.mp-rund3060px { border-radius: 30px 60px; }
.mp-rund6px { border-radius: 6px; }
.mp-rund10px { border-radius: 10px; }
.mp-rund20px { border-radius: 20px; }
.mp-rund30px { border-radius: 30px; }

/* Thumbnail image styling */
.mp-miniatyrbilde {
    border: 1px solid rgba(0, 0, 0, 0.13); /* Light grey border */
    border-radius: 4px;
    padding: 5px;
    width: 150px;
}

/* Link style override - remove text decoration */
a.kortlenk,
div.kortlenk a {
    text-decoration: none !important; /* Use !important sparingly */
}

/* General hover effect for clickable divs */
.divklikk {
    text-decoration: none !important; /* Ensure no underline on the div if it's a link target */
    position: relative; /* Needed for the ::before pseudo-element */
}
.divklikk:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--svart);
    opacity: 0;
    transition: opacity 0.3s ease; /* Added transition for smoothness */
}
.divklikk:hover:before {
    opacity: 0.2;
    border-radius: 30px; /* Matches .kortforside border-radius */
}

/*
   POTENTIAL REFACTORING:
   Consider a base class for .kortforside, .knapforside, .kortklikk, .standardknap
   e.g., .nord-interactive-block {
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 0.8rem 1.2rem; // or make it a variable
       height: 80%;
       margin-bottom: 1.7em;
       box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
       border-radius: 30px;
   }
   Then:
   .kortforside extends .nord-interactive-block { ...specifics... }
*/

/* Card for frontpage links/info */
.kortforside {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1.2rem;
    height: 80%; /* Consider if fixed height is always desirable */
    margin-bottom: 1.7em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
    border-radius: 30px;
}
.kortforside__tal { font-size: 1.3em; } /* Number/figure in the card */
.kortforside__titel { font-size: 1em; } /* Title in the card */
.kortforside__nederst { /* Content aligned to the bottom-right of the card */
    display: block;
    padding-top: 0.7rem;
    margin-top: auto; /* Pushes to bottom */
    margin-left: auto; /* Pushes to right */
    font-size: 0.8em;
}

/* Button-like card for frontpage */
.knapforside {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1.2rem;
    height: 80%;
    margin-bottom: 1.7em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
    border-radius: 30px;
    text-align: center;
}

/* Clickable card component */
.kortklikk {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 1.2rem;
    height: 80%;
    margin-bottom: 1.7em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
    border-radius: 30px;
}
/* Hover effect for clickable cards (overlay on anchor) */
.kortklikk a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--svart);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 30px; /* Matches parent .kortklikk */
}
.kortklikk a:hover:before {
    opacity: 0.2;
}

/* Standard button styling */
.standardknap {
    background: rgba(0, 0, 0, 0.03); /* Light grey - Canvas will invert in dark mode */
    border: 1px solid #c7cdd1; /* Grey border - Canvas will invert */
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
    font-size: 1rem;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    overflow: hidden;
    text-shadow: none;
    -webkit-user-select: none;
    user-select: none;
    height: 80%;
    margin-bottom: 1.7em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1), 7px 7px 14px rgba(0,0,0,0.3);
    border-radius: 30px;
}

/* ==========================================================================
   COMPONENT: LEARNING DESIGN PAGE (.laeringsdesign-side)
   ========================================================================== */
.laeringsdesign-side {
    font-family: 'Roboto', sans-serif; /* Specific font for this page type */
    color: var(--tekst-standard); /* Uses Canvas variable - adapts to dark mode */
    line-height: 1.6;
    max-width: 1080px; /* Content width constraint */
    margin: 0 auto 1.7em; /* Centering and bottom margin */
    padding: 0 20px 5px;
    background-color: rgba(0, 0, 0, 0.03); /* Light grey - Canvas inverts in dark mode */
}

.innledning { /* Introduction section */
    background-color: var(--nord-sekund6); /* #94B7BB - Grey Blue */
    padding: 40px 20px 50px;
    margin: 20px -20px 20px -20px; /* Negative margins to extend to container edges */
    text-align: center;
}
.innledning-tittel {
    font-size: 2.5em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.innledning-tekst {
    font-size: 1.1em;
    max-width: 800px; /* Constrain text width within intro */
    margin: 0 auto;
}

.seksjon-tittel { /* Main section title */
    font-size: 2em;
    color: var(--tekst-standard);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nord-sekund3); /* #115e67 - Dark Turquoise */
    display: inline-block; /* To make border-bottom only span text width */
}
.underseksjon-tittel { /* Sub-section title */
    font-size: 1.5em;
    color: var(--nord-sekund3);
    margin-top: 30px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--nord-sekund3);
    display: inline-block;
}
.mini-tittel { /* Smaller heading */
    font-size: 1.2em;
    color: var(--nord-sekund3);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* List of requirements */
.krav-liste .krav-element {
    background-color: rgba(0, 0, 0, 0.12); /* Lighter grey */
    border-left: 5px solid var(--nord-sekund6); /* Grey Blue accent */
    padding: 20px;
    margin-bottom: 20px;
}
.krav-liste .krav-element .underseksjon-tittel { /* Override for titles within a requirement */
    color: var(--nord-sekund3);
    margin-top: 0;
    border-bottom: none;
}

/* Custom bullet list */
.punktliste {
    list-style: none;
    padding-left: 0;
}
.punktliste-element {
    margin-bottom: 15px;
    padding-left: 30px; /* Space for custom bullet */
    position: relative;
}
.punktliste-element::before { /* Custom bullet */
    content: "•";
    position: absolute;
    left: 0;
    color: var(--nord-sekund3);
    font-size: 1.5em;
    line-height: 1; /* Adjust for vertical alignment */
}

/* Instruction and example scene boxes */
.instruksjoner,
.eksempel-scene {
    background-color: rgba(0, 0, 0, 0.12); /* Was #e0e0e0 - Dark mode compatible */
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
    border-left: 5px solid var(--nord-sekund6);
}
.eksempel-scene .punktliste { /* Ensure no default list style */
    list-style-type: none;
    padding-left: 0;
}
.eksempel-scene .punktliste-element {
    margin-bottom: 10px;
}

/* Text styling */
.uthevet-tekst { /* Emphasized text */
    color: var(--nord-sekund3);
    font-weight: bold;
}
.lenke { /* Custom link style */
    color: var(--nord-sekund7); /* #009fdf - Light Blue */
    text-decoration: none !important;
    transition: color 0.3s ease;
}
.lenke:hover {
    color: #007bff; /* Standard blue for hover, or another NORD color */
    text-decoration: underline; /* Show underline on hover */
}

/* Responsive adjustments for Learning Design Page */
@media (max-width: 768px) {
    .laeringsdesign-side {
        padding: 10px;
    }
    .innledning {
        margin: -10px -10px 20px -10px; /* Adjust negative margins */
        padding: 30px 10px;
    }
    .innledning-tittel { font-size: 2em; }
    .seksjon-tittel { font-size: 1.8em; }
    .underseksjon-tittel { font-size: 1.3em; }
    .mini-tittel { font-size: 1.1em; }
}

/* Main content container with NORD branding */
.hovedbeholder {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--nord-sekund6); /* Grey Blue */
    color: var(--nord-sekund1); /* Dark Blue text */
    border-radius: 30px;
    line-height: 1.6;
}
.tittel { /* Main title style */
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--nord-sekund1);
    text-align: center;
}
.subtekst { /* Sub-text or introductory paragraph */
    font-size: 1.2rem;
    color: var(--nord-sekund2); /* Medium Blue */
    margin-bottom: 1rem;
    text-align: center;
}

/* Introduction section within a .hovedbeholder or similar */
.intro-seksjon {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.intro-grid { /* Grid layout for introductory elements */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

/* Comparison box, often used in grids */
.sammenligning-boks {
    background: rgba(156, 180, 184, 0.1); /* Very subtle Grey Blue */
    padding: 1.2rem;
    border-radius: 15px;
    border: 1px solid rgba(156, 180, 184, 0.3);
    display: flex;
    flex-direction: column;
    margin-bottom: 1.7em; /* Default margin, overridden in grid */
}
.intro-grid .sammenligning-boks {
    height: 100%; /* Make boxes in grid same height */
    margin-bottom: 0; /* Remove bottom margin when in grid */
}
.sammenligning-tittel {
    color: #1A4149; /* Dark teal/blue */
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tekst-eksempel { /* For displaying code or text snippets */
    font-family: monospace;
    background: rgba(156, 180, 184, 0.2);
    padding: 0.5rem;
    border-radius: 8px;
    margin: 0.5rem 0;
}

/*
   POTENTIAL REFACTORING: Base class for .boks-* elements
   e.g., .nord-content-box {
       background: rgba(255, 255, 255, 0.9);
       border: 1px solid rgba(0, 176, 185, 0.2); // Consider a NORD color variable
       border-radius: 30px;
       padding: 1.5rem;
       margin-bottom: 1.7em;
   }
   .boks extends .nord-content-box {
       box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
       transition: transform 0.2s, box-shadow 0.2s; // Added box-shadow transition
   }
   .boks:hover { ... }
   .boks-enkelt extends .nord-content-box { box-shadow: 0px 10px 20px rgba(0,0,0,0.1); } // No hover
   .boks-subtle extends .nord-content-box { } // No shadow by default
   .boks-light extends .nord-content-box { box-shadow: 0px 2px 4px rgba(0,0,0,0.05); }
*/

/* General purpose content box with hover effect */
.boks {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 176, 185, 0.2); /* prima2-like color */
    border-radius: 30px;
    padding: 1.5rem;
    margin-bottom: 1.7em;
    transition: transform 0.2s, box-shadow 0.2s ease; /* Added shadow transition */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.boks:hover {
    transform: translateY(-2px);
    box-shadow: 0px 12px 25px rgba(0,0,0,0.15);
}

/* Variations of the content box */
.boks-enkelt { /* Box with shadow, no hover transform */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 176, 185, 0.2);
    border-radius: 30px;
    padding: 1.5rem;
    margin-bottom: 1.7em;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.boks-subtle { /* Box with no shadow by default */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 176, 185, 0.2);
    border-radius: 30px;
    padding: 1.5rem;
    margin-bottom: 1.7em;
}
.boks-light { /* Box with a very light shadow */
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 176, 185, 0.2);
    border-radius: 30px;
    padding: 1.5rem;
    margin-bottom: 1.7em;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.05);
}
.boks-contrast { /* Box with a different background for contrast */
    background: rgba(148, 183, 187, 0.1); /* Subtle Grey Blue */
    border: 1px solid rgba(0, 176, 185, 0.2);
    border-radius: 30px;
    padding: 1.5rem;
    margin-bottom: 1.7em;
}

/* Style for the <summary> element of a <details> accordion */
.utvider,
summary.utvider { /* background: white; - Removed for dark mode compatibility */
    border: none;
    color: #1A4149; /* Dark teal/blue */
    cursor: pointer;
    font-size: 1.2rem;
    padding: 1rem;
    width: 100%;
    text-align: left;
    border-radius: 15px;
    transition: all 0.2s;
    font-weight: 500;
    position: relative; /* For icon positioning */
    display: flex; /* For aligning icon and text */
    align-items: center;
    gap: 10px; /* Space between icon and text */
    box-sizing: border-box;
    margin: 0; /* Reset margin if used on summary */
    word-wrap: break-word; /* Prevent overflow */
    overflow-wrap: break-word;
    list-style: none; /* Remove default marker for summary */
}
.utvider::-webkit-details-marker,
summary.utvider::-webkit-details-marker {
    display: none; /* Remove default marker for summary in WebKit */
}

.utvider::before { /* Plus/cross icon */
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    display: inline-block;
    width: 24px; /* Fixed width for icon alignment */
    text-align: center;
}
.boks .utvider { /* Ensure expander inside a .boks has no extra margin */
  margin: 0;
}
details[open] > .utvider::before, /* Target direct child summary */
details[open] > summary.utvider::before {
    transform: rotate(45deg); /* Rotate to form a cross when open */
}

/* Content area of the expandable section */
.innhold { /* Often used inside <details> or other wrappers */
    padding: 1.2rem;
    margin-top: 0.5rem; /* Space from the .utvider */
    border: 1px solid rgba(0, 176, 185, 0.1); /* Subtle border */
    border-radius: 30px; /* Consistent rounding */
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
}

/* Responsive adjustments for expandables */
@media (max-width: 768px) {
    .utvider, summary.utvider {
        padding: 0.8rem;
        font-size: 0.9rem; /* Slightly smaller on mobile */
    }
    .utvider::before {
        font-size: 1.2rem;
        width: 20px;
    }
    /* .innhold within details specifically for responsive */
    details .innhold { /* Or be more specific if .innhold is used elsewhere */
        padding: 0.8rem;
    }
    .boks { /* General .boks adjustments */
        padding: 1rem;
        /* box-sizing: border-box; -- Good practice, ensure it's globally set or here */
    }
}

/* ==========================================================================
   COMPONENT: METER / PROGRESS BAR
   ========================================================================== */
.maalerlinje { /* Meter track */
    background: rgba(148, 183, 187, 0.3); /* Light Grey Blue */
    border-radius: 30px; /* Fully rounded ends */
    height: 8px;
    margin: 0.5rem 0;
    overflow: hidden; /* To clip the .maalerfylling */
}
.maalerfylling { /* Meter fill/progress */
    height: 100%;
    background: #00B0B9; /* NORD Prima2 Web color */
    transition: width 0.5s ease-out; /* Animate width changes */
}

/* ==========================================================================
   COMPONENT: WORD ROW (Displaying word, meter, percentage)
   ========================================================================== */
.ordrad { /* Row container for word-related stats */
    display: flex;
    justify-content: space-between; /* Distribute items along the row */
    align-items: center;
    margin: 0.5rem 0;
    padding: 0.8rem 1.2rem;
    background: rgba(148, 183, 187, 0.1); /* Very subtle Grey Blue */
    border-radius: 30px;
    border: 1px solid rgba(0, 176, 185, 0.1); /* Subtle Prima2-like border */
}
.ordrad-ord { /* Word element */
    width: 120px; /* Fixed width for the word */
    text-align: left;
}
.ordrad-maalere { /* Meter container within the row */
    flex: 1; /* Take remaining space */
    padding: 0 20px; /* Spacing around the meter */
}
.ordrad-prosent { /* Percentage display */
    width: 50px; /* Fixed width for percentage */
    text-align: right;
}

/* ==========================================================================
   TEXT STYLES & INFO BOXES
   ========================================================================== */
.infotekst { /* Italicized informational text */
    font-size: 0.9rem;
    color: var(--nord-sekund2); /* Medium Blue */
    font-style: italic;
    margin-top: 0.5rem;
}
.lysende { /* Bright/highlighted text */
    color: #00B0B9; /* NORD Prima2 Web */
    font-weight: 500;
}
.vellykket { /* Success/positive text */
    color: var(--nord-sekund4); /* Dark Green */
    font-weight: 500;
}
.fremhevet { /* Generally highlighted text */
    color: #00B0B9; /* NORD Prima2 Web */
    font-weight: 500;
}

/* List of key points */
.nokkelpunkt {
    color: var(--nord-sekund2); /* Medium Blue */
    list-style: none;
    padding-left: 0;
}
.nokkelpunkt li {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    background: rgba(148, 183, 187, 0.1); /* Very subtle Grey Blue */
    border-radius: 15px;
}

/* Information box with accent border and custom list */
.info-boks {
    background: rgba(0, 176, 185, 0.1); /* Subtle Prima2-like background */
    padding: 1.2rem;
    border-radius: 15px;
    margin: 1.5rem 0;
    border-left: 4px solid #00B0B9; /* Prima2-like accent */
}
.info-boks ul {
    list-style-type: none;
    padding-left: 1rem; /* Indent for custom bullets */
    margin: 1rem 0;
}
.info-boks ul li {
    margin: 0.5rem 0;
    padding-left: 1.5rem; /* Space for custom bullet */
    position: relative;
}
.info-boks ul li:before { /* Custom bullet */
    content: "•";
    position: absolute;
    left: 0;
    color: #00B0B9; /* Prima2-like color */
}
.info-boks strong { /* Strong text within info-box */
    color: #1A4149; /* Dark teal/blue */
}

/* Container for video iframe and optional button */
.video-ramme-container-knapp { /* If video has an associated button below */
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 75px; /* More bottom margin to accommodate button */
    padding-left: 10px; /* Gutters */
    padding-right: 10px;
}
.video-ramme-container { /* Standard video container */
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 10px; /* Standard bottom margin */
    padding-left: 10px;
    padding-right: 10px;
}

/* Responsive video iframe wrapper with "shadow" effect */
.video-ramme {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: var(--nord-sekund6); /* "Shadow" color - Grey Blue */
    margin: 15px 0; /* Space around the shadow box */
}
.video-ramme::before { /* Creates the offset "shadow" layer */
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: -10px;
    bottom: -10px;
    background-color: var(--nord-sekund6); /* Same color as the box for solid shadow */
    z-index: 0; /* Behind the iframe */
}
.video-ramme iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 1; /* Above the shadow */
}

/* Button associated with a video */
.video-knapp {
    display: inline-block;
    padding: 12px 20px;
    float: right; /* Aligns button to the right */
    margin-top: -10px; /* Slight overlap or alignment adjustment */
    margin-right: -10px; /* Align with shadow edge */
    margin-bottom: 10px;
    background-color: var(--nord-sekund6); /* Grey Blue */
    color: var(--hvit);
    text-decoration: none !important;
    border-radius: 0px 0px 5px 5px; /* Rounded bottom corners */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    transition: background-color 0.3s, border-color 0.3s;
    text-align: center;
}
.video-knapp:hover {
    background-color: #839fa3; /* border-color: #839fa3; -- No border defined, so border-color has no effect */
    color: var(--hvit);
}

/* Custom styling for minimal audio player (likely Canvas's default) */
.min-lydspiller iframe[data-media-type="audio"] {
    height: 54px !important;
    width: 100% !important;
    background-color: #f5f5f5 !important; /* Light grey background */
    background-image: none !important; /* Remove any default bg image */
}

/* ==========================================================================
   UTILITY: HOVER EFFECTS
   ========================================================================== */
.sirkel-hover { /* Simple scale hover effect, likely for circular elements */
    transition: transform 0.3s;
}
.sirkel-hover:hover {
    transform: scale(1.1); /* Enlarge on hover */
}

/* Main container for the chat demo or component */
.nord-beholder { /* Could be a more generic name if used elsewhere */
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.blackbox-tittel { /* Title for the "blackbox" chat section */
    text-align: center;
    color: var(--nord-sekund1); /* Dark Blue */
    margin-bottom: 1.5rem;
    font-size: 2em;
}

/* Chat message container */
.nord-chatbeholder {
    max-width: 600px; /* Constrain chat width */
    margin: 0 auto; /* Center chat */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between messages */
}

/* Individual message bubble wrapper (holds avatar and message) */
.nord-meldingsbeholder {
    display: flex;
    align-items: flex-start; /* Align avatar and bubble to the top */
    position: relative; /* For chat bubble tail positioning */
}
.nord-meldingsbeholder.bruker { /* User's message - avatar on right */
    flex-direction: row-reverse; /* Reverses order of avatar and bubble */
}

/* Avatar style */
.nord-avatar {
    background-color: var(--nord-sekund1); /* Dark Blue */
    color: var(--hvit);
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular avatar */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 10px; /* Space around avatar */
    flex-shrink: 0; /* Prevent avatar from shrinking */
}

/* Message bubble style */
.nord-melding {
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 80%; /* Prevent bubble from taking full width */
    line-height: 1.4;
    font-size: 1em;
    position: relative; /* For chat bubble tail */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow */
}
.nord-meldingsbeholder.bruker .nord-melding { /* User's message bubble color */
    background: #e0f7fa; /* Light cyan */
}
.nord-meldingsbeholder.ki .nord-melding { /* AI's message bubble color */
    background: #fff9c4; /* Light yellow */
}

/* Chat bubble tails */
.nord-meldingsbeholder.bruker .nord-melding::after,
.nord-meldingsbeholder.ki .nord-melding::after {
    content: "";
    position: absolute;
    top: 10px; /* Align with top of bubble */
    width: 0;
    height: 0;
    border: 10px solid transparent; /* Triangle shape */
}
.nord-meldingsbeholder.bruker .nord-melding::after { /* Tail for user bubble */
    right: -20px; /* Position tail outside the bubble on the right */
    border-left-color: #e0f7fa; /* Match user bubble color */
}
.nord-meldingsbeholder.ki .nord-melding::after { /* Tail for AI bubble */
    left: -20px; /* Position tail outside the bubble on the left */
    border-right-color: #fff9c4; /* Match AI bubble color */
}

/* "Blackbox" style message (symbol + text box) */
.nord-meldingsbeholder.svartboks {
    display: flex;
    align-items: center; /* Center symbol and text box vertically */
}
.nord-svartboks-symbol { /* The black box with a symbol (e.g., '?') */
    background: #333; /* Dark grey */
    color: var(--hvit);
    width: 100px;
    height: 100px;
    border-radius: 10px 0 0 10px; /* Rounded left corners */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5); /* Stronger shadow */
}
.nord-svartboks-tekst { /* Text box attached to the symbol box */
    border: 2px solid var(--svart);
    padding: 15px;
    border-radius: 0 10px 10px 0; /* Rounded right corners */
    font-size: 0.9em;
    line-height: 1.4;
    background: var(--hvit);
    color: var(--nord-sekund1); /* Dark Blue text */
    flex-grow: 1; /* Allow text box to take available width */
}

/* Responsive adjustments for Chat Interface */
@media (max-width: 640px) {
    .nord-melding {
        max-width: 90%; /* Allow bubbles to be a bit wider */
    }
    .nord-meldingsbeholder.svartboks { /* Stack symbol and text box on small screens */
        flex-direction: column;
    }
    .nord-svartboks-symbol,
    .nord-svartboks-tekst { /* Full rounding when stacked */
        border-radius: 10px;
        width: 100%; /* Take full width */
    }
    .nord-svartboks-tekst {
        margin-top: 10px; /* Space when stacked */
    }
}

/* Main container for the taxonomy levels */
.taksonomi-beholder {
    position: relative; /* Crucial for absolute positioning of levels and arrow */
    width: 100%;
    max-width: 1200px;
    height: 350px; /* Adjust based on content and number of levels */
    margin: 30px auto;
    box-sizing: border-box;
    background: var(--hvit); /* border: 1px solid #ccc; -- Optional border for the container */
    z-index: 0; /* Base layer */
}

/* Diagonal arrow representing progression */
.diagonal-pil {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px; /* Thickness of the arrow line */
    background: teal; /* Arrow color */
    transform-origin: left bottom; /* Rotate around bottom-left corner */
    transform: rotate(-6deg); /* Angle of the arrow (adjust as needed) */
}
.diagonal-pil::after { /* Arrowhead */
    content: "";
    position: absolute;
    right: -10px; /* Position at the end of the line */
    top: -8px;  /* Adjust for vertical alignment with the line */
    border-left: 10px solid teal; /* Arrowhead shape and color */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

/* Individual box for each taxonomy level */
.taksonomi-nivaa {
    position: absolute; /* Positioned along the diagonal arrow */
    width: 18%; /* Approx. 5 boxes fit well */
    min-width: 120px; /* Minimum width for readability */
    border: 1px solid #666; /* Border for the box */
    border-radius: 4px;
    background-color: #f9f9f9; /* Light background for the box */
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    z-index: 1; /* Ensure boxes are above the arrow */
}
.taksonomi-nivaa h2 { /* Title within each level box */
    margin-top: 0;
    background-color: #dbefff; /* Header background color */
    padding: 8px;
    border-radius: 3px;
    font-size: 1em;
}
.handlingsliste { /* List of action verbs or descriptors */
    list-style: none;
    padding-left: 1em; /* Indent for custom bullets */
    margin: 0;
    text-align: left;
}
.handlingsliste li::before {
    content: "• "; /* color: #555; - Removed, uses Canvas default */ /* Bullet color */
}

/* Positioning for 5 taxonomy levels (adjust 'left' and 'bottom' for desired staggered effect) */
.taksonomi-nivaa:nth-child(1) { left: 0%; bottom: 50px; }
.taksonomi-nivaa:nth-child(2) { left: 20%; bottom: 80px; }
.taksonomi-nivaa:nth-child(3) { left: 40%; bottom: 110px; }
.taksonomi-nivaa:nth-child(4) { left: 60%; bottom: 140px; }
.taksonomi-nivaa:nth-child(5) { left: 80%; bottom: 170px; }

/* Container for descriptions/images below the taxonomy levels */
.beskrivelse-beholder {
    display: flex;
    justify-content: space-between; /* Distribute description boxes evenly */
    max-width: 1200px;
    margin: -60px auto 0; /* Negative top margin to overlap/align with taxonomy */
    position: relative; /* To ensure it's part of the flow but can be z-indexed if needed */
    z-index: 1; /* Typically above the arrow if it extends too low */
}
.beskrivelse-nivaa { /* Individual description box */
    width: 18%; /* Match width of .taksonomi-nivaa */
    min-width: 120px;
    text-align: center;
    /* z-index: 1; -- Already on .beskrivelse-beholder is usually enough */
}
.beskrivelse-nivaa p { /* Text description */
    font-style: italic;
    background-color: #f9f9f9;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    min-height: 80px; /* Ensure consistent height */
}
.beskrivelse-nivaa img { /* Image associated with the level */
    display: block;
    margin: 10px auto 0; /* Space above image, centered */
    max-width: 80px;
    max-height: 120px; /* Constrain image size */
    height: auto;
}

/* Text labels along the diagonal arrow */
.pil-etikett-venstre,
.pil-etikett-hoyre {
    position: absolute;
    transform: rotate(-6deg); /* Match arrow rotation */
    transform-origin: left bottom;
    font-weight: bold;
    color: teal; /* Match arrow color */
    font-size: 0.9em;
    z-index: 0; /* Typically behind taxonomy boxes */
}
.pil-etikett-venstre { /* Label at the start of the arrow */
    left: 0;
    bottom: 0;
    transform: rotate(-6deg) translate(20px, 30px); /* Adjust positioning */
}
.pil-etikett-hoyre { /* Label at the end of the arrow */
    right: 0; /* Start from right edge */
    bottom: 4.5em; /* Adjust vertical position */
    transform: rotate(-6deg) translate(-50%, 0px); /* Center relative to its own width */
    transform-origin: right bottom; /* Rotate around its own right bottom */
}

/* References section for the taxonomy */
.referanser {
    margin-top: 30px;
    font-size: 0.9em;
    max-width: 1200px; /* Consistent width */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments for Taxonomy */
@media (max-width: 768px) {
    .taksonomi-beholder {
        height: auto; /* Allow height to be determined by content */
    }
    .taksonomi-nivaa { /* Stack levels vertically */
        position: static; /* Remove absolute positioning */
        width: 90%; /* Take most of the width */
        margin: 0 auto 20px; /* Center and add bottom margin */
    }
    .beskrivelse-beholder { /* Stack description boxes vertically */
        flex-direction: column;
        margin-top: 0; /* Reset negative margin */
    }
    .beskrivelse-nivaa {
        width: 90%; /* Take most of the width */
        margin: 0 auto 20px; /* Center and add bottom margin */
    }
    /* Hide arrow and labels on small screens as they don't make sense for stacked layout */
    .diagonal-pil,
    .pil-etikett-venstre,
    .pil-etikett-hoyre {
        display: none;
    }
}


/* ==========================================================================
   COMPONENT: MODULE OVERVIEW / HEADER
   ========================================================================== */
.modul-overskrift { /* Decorative header for modules or sections */
    position: relative; /* For pseudo-element positioning */
    background: linear-gradient(135deg, var(--nord-sekund1), #005670); /* Dark Blue gradient */
    color: white;
    padding: 40px;
    border-radius: 20px;
    margin: 20px 0;
    overflow: hidden; /* To clip the corner decoration */
}
.modul-overskrift::after { /* Decorative corner element */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.1); /* Semi-transparent white */
    border-radius: 0 0 0 150px; /* Creates a curved corner shape */
}
.modul-overskrift h1 {
    margin: 0;
    font-size: 2.2em;
    position: relative; /* Ensure text is above pseudo-element */
    z-index: 1;
}
.modul-overskrift p {
    font-size: 1.2em;
    margin: 15px 0 0 0;
    max-width: 800px; /* Constrain text width */
    position: relative; /* Ensure text is above pseudo-element */
    z-index: 1;
}

/* Header for the AI course page */
.ki-kurs-header {
    background: linear-gradient(135deg, var(--nord-sekund1) 0%, var(--nord-sekund2) 100%); /* NORD blue gradient */
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative; /* For decorative pseudo-element */
    overflow: hidden; /* To clip decoration */
}
.ki-kurs-header h1 {
    font-size: 2.2em;
    margin-bottom: 15px;
}
.ki-kurs-header p {
    font-size: 1.1em;
    max-width: 80%; /* Constrain intro text width */
}
.ki-kurs-header::after { /* Decorative corner element, similar to .modul-overskrift */
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 0 150px;
}

/* Grid for informational boxes in AI course */
.ki-kurs-info {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 30px;
    margin-bottom: 40px;
}
.ki-kurs-box { /* background: white; - Removed for dark mode compatibility */
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
}
.ki-kurs-box h3 {
    color: var(--nord-sekund1); /* Dark Blue */
    border-bottom: 2px solid var(--nord-prima1); /* Light Turquoise accent */
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.3em;
}

/* General content styling within AI course page */
.ki-kurs-content {
    margin-bottom: 40px;
}
.ki-kurs-content p {
    margin-bottom: 15px; /* Standard paragraph spacing */
}

/* Grid layout for AI course modules */
.ki-moduler-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin: 40px 0;
}
.ki-modul { /* Individual module card */
    border-radius: 10px;
    overflow: hidden; /* Clip contents to rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
    display: flex;
    flex-direction: column; /* Stack header, body, footer */
    height: 100%; /* Ensure cards in a row are same height if content varies */
    transition: transform 0.3s ease;
}
.ki-modul:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}
.ki-modul-header { /* Header of the module card */
    padding: 20px;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 1.2em;
    /* Background color applied via .ki-prioritet-* classes */
}
.ki-modul-body { /* background: white; - Removed for dark mode compatibility */
    padding: 20px;
    flex-grow: 1; /* Allow body to take available space */
    display: flex;
    flex-direction: column; /* For aligning footer */
}
.ki-modul-status { /* Status indicator (e.g., Available, Coming Soon) */
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 0.9em;
    font-weight: bold;
}
.ki-status-available {
    background-color: #e3f9e9; /* Light green */
    color: var(--nord-sekund4); /* Dark Green text */
}
.ki-status-coming {
    background-color: rgba(0, 0, 0, 0.03); /* Light grey */
    /* Grey text */
}
.ki-modul-description {
    margin-bottom: 15px;
}
.ki-modul-footer { /* Footer of the module card, usually for a button */
    margin-top: auto; /* Push to bottom of card body */
    text-align: center;
}
.ki-modul-button { /* Button style for module links */
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--nord-sekund7); /* Light Blue */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.ki-modul-button:hover {
    background-color: var(--nord-sekund2); /* Medium Blue on hover */
}
.ki-modul-button.disabled { /* Disabled state for button */
    background-color: #ccc; /* Grey */
    cursor: not-allowed;
}

/* Priority-based background colors for module headers */
.ki-prioritet-1 { background-color: var(--nord-sekund1); } /* Dark Blue */
.ki-prioritet-2 { background-color: var(--nord-sekund4); } /* Dark Green */
.ki-prioritet-3 {
    background-color: var(--nord-kontrast2); /* Orange */
    color: var(--nord-sekund1); /* Dark Blue text for contrast on orange */
}

/* Footer section for AI course page */
.ki-kurs-footer {
    background: rgba(0, 0, 0, 0.03); /* Light grey */
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
}
.ki-kurs-footer p {
    margin-bottom: 10px;
}

/* Responsive adjustments for AI Course elements */
@media (max-width: 768px) {
    .ki-kurs-info {
        grid-template-columns: 1fr; /* Stack info boxes */
    }
    .ki-kurs-header p {
        max-width: 100%; /* Allow text to use full width */
    }
}

/* Base overrides for jQuery UI Tabs to remove default styling */
.noborder .ui-widget-content {
    border: none !important;
    background: transparent !important;
}
.noborder .ui-tabs {
    padding: 0 !important;
    border: none !important;
}
.noborder .ui-tabs .ui-tabs-nav { /* Tab navigation bar */
    border-bottom: 1px solid #ddd !important; /* Separator line */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    background: transparent !important;
    padding-left: 0 !important;
}

/* Individual tab styling */
.noborder .ui-tabs .ui-tabs-nav li {
    margin: 0 5px 0 0 !important; /* Spacing between tabs */
    border-radius: 5px 5px 0 0 !important; /* Rounded top corners */
    border: 1px solid #ddd !important; /* Default border */
    border-bottom: none !important; /* Remove bottom border for inactive tabs */
    transition: all 0.3s ease !important;
}
.noborder .ui-tabs .ui-tabs-nav li a { /* Tab link styling */
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

/* Color-coded tabs based on 'aria-controls' attribute */
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="open"] {
    background: linear-gradient(to bottom, #f9fff9 80%, #27ae60) !important; /* Green gradient */
    border-top: 3px solid #27ae60 !important; /* Green top accent */
}
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="limited"] {
    background: linear-gradient(to bottom, #fffef7 80%, #b7a400) !important; /* Yellow/Gold gradient */
    border-top: 3px solid #b7a400 !important; /* Yellow/Gold top accent */
}
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="confidential"] {
    background: linear-gradient(to bottom, #fff9f9 80%, #e74c3c) !important; /* Red gradient */
    border-top: 3px solid #e74c3c !important; /* Red top accent */
}
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="strictly"] {
    background: linear-gradient(to bottom, #f9f9f9 80%, #7f8c8d) !important; /* Grey gradient */
    border-top: 3px solid #7f8c8d !important; /* Grey top accent */
}

/* Active tab highlighting */
.noborder .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px !important; /* Overlap bottom border of nav */
    padding-bottom: 1px !important; /* Effectively make it part of the content area */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1) !important; /* Active tab color is handled by the [aria-controls] specific styles */
}

/* Tab link text colors (matching their respective accents) */
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="open"] a { color: #27ae60 !important; }
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="limited"] a { color: #b7a400 !important; }
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="confidential"] a { color: #e74c3c !important; }
.noborder .ui-tabs .ui-tabs-nav li[aria-controls="strictly"] a { color: #7f8c8d !important; }

/* Hover effects for inactive tabs */
.noborder .ui-tabs .ui-tabs-nav li:not(.ui-tabs-active):hover {
    transform: translateY(-3px) !important; /* Slight lift on hover */
    box-shadow: 0 3px 5px rgba(0,0,0,0.1) !important; /* Subtle shadow on hover */
}

/* ==========================================================================
   UTILITY: VERTICAL TEXT
   ========================================================================== */
.vertikaltekst {
    writing-mode: vertical-rl; /* Text flows vertically from right to left */
    transform: rotate(180deg); /* Rotates the vertically written text to be upright */
    color: #fff; /* Example: white text */
    font-family: 'Georgia', serif; /* Example: serif font */
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8; /* Slight transparency */
}



/* === GRUNNLEGGENDE FANE-STILER (delt av både horisontale og vertikale) === */
.faner-beholder {
    margin: 25px 0;
    font-family: system-ui, -apple-system, sans-serif;
}

.faneliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fane {
    display: inline-block;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.95em;
    border: none;
    outline: none;
}

.fane:focus {
    outline: 2px solid var(--nord-sekund6);
    outline-offset: 2px;
}

.fanepanel {
    /* background: white; - Removed for dark mode compatibility */
    border-radius: 8px;
}

.fanepanel h2,
.fanepanel h3,
.fanepanel h4 {
    color: var(--nord-sekund1);
    margin-top: 0;
    margin-bottom: 15px;
}

.fanepanel p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.fanepanel ul,
.fanepanel ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.fanepanel li {
    margin-bottom: 6px;
}

/* === HORISONTALE RENE FANER === */
.horisontale-rene .faneliste {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border: none;
}

.horisontale-rene .fane {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--nord-sekund2);
    transition: all 0.3s ease;
}

.horisontale-rene .fane:hover {
    background: rgba(148, 183, 187, 0.2);
    transform: translateY(-1px);
    color: var(--nord-sekund1);
}

.horisontale-rene .fane.aktiv {
    background: var(--nord-sekund1);
    color: var(--hvit);
    box-shadow: 0 2px 8px rgba(0, 61, 76, 0.3);
}

.horisontale-rene .fanepanel {
    padding: 25px;
    /* background: white; - Removed for dark mode compatibility */
    border: 1px solid rgba(0, 0, 0, 0.08); /* Was #e9ecef - Dark mode compatible */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* === VERTIKALE RENE FANER === */
.vertikale-rene {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 25px;
    /* background: white; - Removed for dark mode compatibility */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08); /* Was #e9ecef - Dark mode compatible */
    min-height: 350px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.vertikale-rene .faneliste {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
    margin: 0;
    border: none;
    gap: 6px;
}

.vertikale-rene .fane {
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--nord-sekund2);
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    display: block;
}

.vertikale-rene .fane:hover {
    background: rgba(148, 183, 187, 0.15);
    padding-left: 22px;
    color: var(--nord-sekund1);
}

.vertikale-rene .fane.aktiv {
    background: var(--nord-sekund1);
    color: var(--hvit);
    font-weight: 600;
    position: relative;
}

.vertikale-rene .fane.aktiv::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid var(--nord-sekund1);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.vertikale-rene .fane-innhold {
    padding: 30px;
}

.vertikale-rene .fanepanel {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}


/* === RESPONSIV DESIGN === */
@media (max-width: 768px) {
    /* Vertikale faner blir horisontale på mobil */
    .vertikale-rene {
        grid-template-columns: 1fr;
    }
    
    .vertikale-rene .faneliste {
        flex-direction: row;
        overflow-x: auto;
        padding: 15px;
        gap: 8px;
        background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
        scrollbar-width: thin;
        scrollbar-color: var(--nord-sekund6) #f8f9fa;
    }
    
    .vertikale-rene .faneliste::-webkit-scrollbar {
        height: 6px;
    }
    
    .vertikale-rene .faneliste::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
    }
    
    .vertikale-rene .faneliste::-webkit-scrollbar-thumb {
        background: var(--nord-sekund6);
        border-radius: 3px;
    }
    
    .vertikale-rene .fane {
        white-space: nowrap;
        min-width: 120px;
        text-align: center;
        padding: 12px 16px;
    }
    
    .vertikale-rene .fane:hover {
        padding-left: 16px; /* Tilbakestill venstre padding-endring på mobil */
    }
    
    .vertikale-rene .fane.aktiv::after {
        display: none; /* Skjul pil på mobil */
    }
    
    .vertikale-rene .fane-innhold {
        padding: 20px;
    }
    
    /* Horisontale faner stables vertikalt på små skjermer */
    .horisontale-rene .faneliste {
        flex-direction: column;
        gap: 6px;
        padding: 8px;
    }
    
    .horisontale-rene .fane {
        text-align: center;
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .horisontale-rene .fanepanel,
    .vertikale-rene .fane-innhold {
        padding: 15px;
    }
    
    .vertikale-rene {
        min-height: 300px;
    }
    
    .faner-beholder {
        margin: 15px 0;
    }
}

/* === TILGJENGELIGHETS-FORBEDRINGER === */
.fane:focus-visible {
    outline: 2px solid var(--nord-sekund6);
    outline-offset: 2px;
}

.fanepanel:focus {
    outline: 1px solid var(--nord-sekund6);
    outline-offset: -1px;
}

/* Høy kontrast modus støtte */
@media (prefers-contrast: high) {
    .horisontale-rene .fane.aktiv,
    .vertikale-rene .fane.aktiv {
        border: 2px solid currentColor;
    }
    
    .horisontale-rene .fanepanel,
    .vertikale-rene .fanepanel {
        border: 2px solid currentColor;
    }
}



/* === GRUNNLEGGENDE TREKKSPILL-STILER === */
.trekkspill-beholder {
    margin: 25px 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.trekkspill-element {
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1); /* background: #fff; - Removed for dark mode compatibility */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.trekkspill-hode {
    background: linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02)); /* Was #f8f9fa to #ffffff - Dark mode compatible */
    border: none;
    /* color: #003d4c; - Removed, uses Canvas default */
    cursor: pointer;
    font-size: 1.2rem;
    padding: 20px 25px;
    width: 100%;
    text-align: left;
    font-weight: 600;
    list-style: none; 
    display: flex;
    align-items: center;
    gap: 15px; 
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
    box-sizing: border-box;
}

.trekkspill-hode::-webkit-details-marker,
.trekkspill-hode::marker {
    display: none;
}

/* Generic Pseudo-element Icon Styling (applied to ::before or ::after) */
.trekkspill-hode::before,
.trekkspill-hode::after {
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trekkspill-tittel {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.trekkspill-innhold {
    /* background-color: #fff; - Removed for dark mode compatibility */
    padding: 25px 30px;
    border-top: 1px solid #f0f2f3;
    animation: gliNed 0.3s ease-out;
    text-align: left;
}

.trekkspill-innhold p {
    margin-top: 0;
    /* Default paragraph color */
    line-height: 1.6;
}
.trekkspill-innhold p:last-child {
    margin-bottom: 0;
}
.trekkspill-innhold p + p { /* color: #666; - Removed, uses Canvas default */
    font-size: 0.95em;
}


/* === SECTION HEADER STYLING (used by FAQ, Learning, Resources) === */
.seksjons-header {
    text-align: center;
    margin-bottom: 25px;
}
.seksjons-header h3 {
    /* color: #003d4c; - Removed, uses Canvas default */
    font-size: 1.6em;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.seksjons-header p {
    /* color: #666; - Removed, uses Canvas default */
    margin: 0;
    font-size: 1.1em;
}
.seksjons-header .header-ikon { /* For emojis/icons in section headers */
    font-size: 1.2em; /* Adjust as needed */
}


/* === STANDARD NORD TREKKSPILL === */
.nord-trekkspill:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.nord-trekkspill .trekkspill-hode::before { /* Icon for Standard Nord */
    content: '▼';
    background: #94b7bb;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.8em; 
    order: -1; /* Place before title if title is direct child */
    margin-right: 15px; /* Ensure gap if .trekkspill-tittel is not used and text is direct */
}
/* If .trekkspill-tittel is present, the main gap on .trekkspill-hode handles spacing */
.nord-trekkspill .trekkspill-hode {
    gap: 0; /* Reset gap if icon is directly next to title span */
}
.nord-trekkspill .trekkspill-hode::before {
     margin-right: 15px; /* Explicit margin for icon */
}


.nord-trekkspill[open] .trekkspill-hode::before {
    transform: rotate(180deg);
    background: #003d4c !important;
}

.nord-trekkspill[open] .trekkspill-hode {
    background: linear-gradient(135deg, #e8f2f5, #f0f7ff) !important;
    border-bottom-color: #d0dae0 !important;
}

/* === FAQ TREKKSPILL === */
.sporsmal-element:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.sporsmal-element .trekkspill-hode {
    background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
    font-size: 1.1rem;
    padding: 18px 22px;
    font-weight: 500;
    gap: 12px; /* Gap between number and title */
}
        
.sporsmal-nummer {
    background: #165c7d;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: bold;
    flex-shrink: 0;
}

.sporsmal-element .trekkspill-hode::after { /* Icon for FAQ */
    content: '+';
    color: #94b7bb;
    font-size: 1.5rem; 
    font-weight: 300; 
    display: inline-block;
    margin-left: auto; 
    padding-left: 10px; 
}

.sporsmal-element[open] .trekkspill-hode::after {
    transform: rotate(45deg);
    /* color: #003d4c !important; - Removed, uses Canvas default */
}

.sporsmal-element[open] .trekkspill-hode {
    background: linear-gradient(135deg, rgba(0,176,185,0.1), rgba(0,176,185,0.03)) !important; /* Was #e8f2f5 to #ffffff - Dark mode compatible */
}

.sporsmal-element .trekkspill-innhold {
    padding: 20px 25px 20px 58px; 
    /* color: #555; - Removed, uses Canvas default */
    line-height: 1.6;
}

/* === LÆRINGS-TREKKSPILL === */
.laerings-seksjon:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.laerings-seksjon .trekkspill-hode {
    /* font-size, padding, font-weight already set in general .trekkspill-hode */
    gap: 15px; /* Gap between main icon and title container */
    border-left: 4px solid; /* Color set by nth-child */
}
        
.seksjon-ikon { /* Main icon for the learning section (book, microscope) */
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em; 
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
        
.laerings-tittel-beholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.laerings-hovedtittel {
    font-size: 1em; 
    margin-bottom: 2px;
    display: block;
    font-weight: 600; /* Match header */
}
.laerings-undertittel {
    font-size: 0.75em; 
    font-weight: 400;
    display: block;
}

.laerings-seksjon .trekkspill-hode::after { /* Expand icon for Learning */
    content: '⊕';
    font-size: 1.6rem; 
    font-weight: normal; 
    display: inline-block;
    margin-left: auto; 
    padding-left: 10px; 
}

.laerings-seksjon[open] .trekkspill-hode::after {
    transform: rotate(45deg);
}

.laerings-seksjon[open] .seksjon-ikon {
    transform: scale(1.1);
}

.laerings-seksjon .trekkspill-innhold .innhold-boks {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks h4 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.laerings-seksjon .trekkspill-innhold .innhold-boks ul {
    margin: 0;
    padding-left: 20px;
    /* color: #555; - Removed, uses Canvas default */
}
.laerings-seksjon .trekkspill-innhold .innhold-boks li {
    margin-bottom: 5px;
}


/* Default (first, or if only one) */
.laerings-seksjon .trekkspill-hode { 
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    border-left-color: #777;
    /* color: #333; - Removed, uses Canvas default */
}
.laerings-seksjon .seksjon-ikon { 
    background: #777;
}
.laerings-seksjon .laerings-undertittel {
    /* color: #555; - Removed, uses Canvas default */ 
}
.laerings-seksjon .trekkspill-hode::after { 
    color: #777;
}
.laerings-seksjon .trekkspill-innhold {
    border-top: 1px solid #e0e0e0;
}
.laerings-seksjon .trekkspill-innhold h4 {
    /* color: #333; - Removed, uses Canvas default */
}
.laerings-seksjon .trekkspill-innhold .innhold-boks {
    background: rgba(0, 0, 0, 0.03); /* Was #f5f5f5 - Dark mode compatible */
}


/* Green Theme (if it's the second .laerings-seksjon in its container) */
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-hode { /* Assuming first is the intro */
    background: linear-gradient(135deg, #e8f5e8, #f8f9fa);
    border-left-color: #4caf50;
    color: #2e7d32;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .seksjon-ikon {
    background: #4caf50;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .laerings-undertittel {
    color: #4caf50;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-hode::after {
    color: #4caf50;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold {
     border-top: 1px solid #e8f5e8;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold h4 {
    color: #2e7d32;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(1) .trekkspill-innhold .innhold-boks {
    background: #f0f8f0;
}

/* Blue Theme (if it's the second .laerings-seksjon) */
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-hode {
    background: linear-gradient(135deg, #e3f2fd, #f8f9fa);
    border-left-color: #2196f3;
    color: #1565c0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .seksjon-ikon {
    background: #2196f3;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .laerings-undertittel {
    color: #2196f3;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-hode::after {
    color: #2196f3;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold {
     border-top: 1px solid #e3f2fd;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold h4 {
    color: #1565c0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(2) .trekkspill-innhold .innhold-boks {
    background: #f0f7ff;
}

/* Orange Theme (if it's the third .laerings-seksjon) */
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-hode {
    background: linear-gradient(135deg, rgba(255,165,0,0.1), rgba(0,0,0,0.03)); /* Was #fff3e0 to #f8f9fa - Dark mode compatible */
    border-left-color: #ff9800;
    color: #e65100;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .seksjon-ikon {
    background: #ff9800;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2);
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .laerings-undertittel {
    color: #ff9800;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-hode::after {
    color: #ff9800;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold {
     border-top: 1px solid #fff3e0;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold h4 {
    color: #e65100;
}
.laerings-seksjoner > .laerings-seksjon:nth-child(3) .trekkspill-innhold .innhold-boks {
    background: rgba(255,165,0,0.05); /* Was #fffbf0 - Dark mode compatible */
}

/* === RESSURS-TREKKSPILL === */
.ressurs-element:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.ressurs-element .trekkspill-hode {
    font-size: 1.1rem;
    padding: 16px 20px;
    font-weight: 600;
    gap: 12px; /* Gap between main icon and title */
}

.ressurs-ikon { /* Main icon for resource item */
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em; /* Emoji/char size */
    color: white;
    flex-shrink: 0;
}

.ressurs-element .trekkspill-hode::after { /* Toggle icon for Resource */
    content: '⊞'; /* Square plus symbol */
    font-size: 1.2em; 
    display: inline-block;
    margin-left: auto;
    padding-left: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.ressurs-element[open] .trekkspill-hode::after {
    transform: rotate(90deg);
}



.ressurs-element .trekkspill-innhold .ressurs-lenkeliste {
    display: grid;
    gap: 10px;
}
.ressurs-element .trekkspill-innhold a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05); /* Was #f8f9fa - Dark mode compatible */
    border-radius: 6px;
    text-decoration: none!important;
    transition: all 0.3s ease;
    /* Default link color */
}
.ressurs-element .trekkspill-innhold a:hover {
    background: #e9ecef !important;
    transform: translateX(5px);
}
.ressurs-element .trekkspill-innhold .lenke-ikon {
    font-size: 1.2em;
    flex-shrink: 0;
}

/* Default (first, or if only one) */
.ressurs-element .trekkspill-hode {
    background: linear-gradient(135deg, #f5f5f5, #e9e9e9);
    /* color: #333; - Removed, uses Canvas default */
}
.ressurs-element .ressurs-ikon {
    background: #888;
}
.ressurs-element .trekkspill-hode::after {
    color: #888;
}
.ressurs-element .trekkspill-innhold {
    border-top-color: #f5f5f5;
}
.ressurs-element .trekkspill-innhold a {
    /* color: #333; - Removed, uses Canvas default */
}


.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-hode { /* Pensum - Green */
    background: linear-gradient(135deg, rgba(76,175,80,0.08), rgba(76,175,80,0.02)); /* Was #f0f8f0 to #ffffff - Dark mode compatible */
    color: #2e7d32;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .ressurs-ikon {
    background: #4caf50;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-hode::after {
    color: #4caf50;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-innhold {
    border-top-color: #f0f8f0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(1) .trekkspill-innhold a {
    color: #2e7d32;
}

.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-hode { /* Videoer - Blue */
    background: linear-gradient(135deg, rgba(0,176,185,0.08), rgba(0,176,185,0.02)); /* Was #f0f7ff to #ffffff - Dark mode compatible */
    color: #1565c0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .ressurs-ikon {
    background: #2196f3;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-hode::after {
    color: #2196f3;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-innhold {
    border-top-color: #f0f7ff;
}
.ressurs-trekkspill > .ressurs-element:nth-child(2) .trekkspill-innhold a {
    color: #1565c0;
}

.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-hode { /* Verktøy - Orange */
    background: linear-gradient(135deg, rgba(255,165,0,0.08), rgba(255,165,0,0.02)); /* Was #fffbf0 to #ffffff - Dark mode compatible */
    color: #e65100;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .ressurs-ikon {
    background: #ff9800;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-hode::after {
    color: #ff9800;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-innhold {
    border-top-color: #fffbf0;
}
.ressurs-trekkspill > .ressurs-element:nth-child(3) .trekkspill-innhold a {
    color: #e65100;
}


/* === ANIMASJONER === */
@keyframes gliNed {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIV DESIGN === */
@media (max-width: 768px) {
    .trekkspill-hode {
        padding: 15px 18px !important;
        font-size: 1.1rem !important;
    }
    .trekkspill-hode::before, 
    .trekkspill-hode::after { /* General responsive icon size */
        font-size: 1.3rem; 
    }
    .nord-trekkspill .trekkspill-hode::before { /* Specific for standard icon */
        width: 28px;
        height: 28px;
        font-size: 0.7em;
    }
    .seksjon-ikon { 
        width: 36px !important;
        height: 36px !important;
        font-size: 1.2em !important;
    }
    .sporsmal-nummer {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7em !important;
    }
    .ressurs-ikon {
        width: 28px !important;
        height: 28px !important;
        font-size: 1em !important;
    }
    .trekkspill-innhold {
        padding: 20px 22px !important;
    }
    .trekkspill-beholder {
        margin: 15px 0;
    }
}

/* === TILGJENGELIGHET === */
.trekkspill-element:focus-within {
    /* Assuming --nord-sekund6 is #94B7BB or similar defined in :root if available */
    outline: 2px solid var(--nord-sekund6, #94B7BB); 
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .trekkspill-element {
        border: 2px solid currentColor;
    }
    .trekkspill-hode {
        border-bottom: 1px solid currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trekkspill-element,
    .trekkspill-hode::before,
    .trekkspill-hode::after,
    .seksjon-ikon,
    .ressurs-ikon {
        transition: none;
    }
    .nord-trekkspill:hover,
    .sporsmal-element:hover,
    .laerings-seksjon:hover,
    .ressurs-element:hover {
        transform: none;
    }
    .trekkspill-innhold {
        animation: none;
    }
}


/* Mobile: Enhanced spacing and readability */
@media (max-width: 768px) {
    /* Reduce padding on all containers */
    .laeringsdesign-side {
        padding: 0 15px 5px;
    }

    .innledning {
        padding: 30px 15px 40px;
        margin: 15px -15px 15px -15px;
    }

    /* Improve heading sizes for mobile */
    .innledning-tittel {
        font-size: 2em;
    }

    .seksjon-tittel {
        font-size: 1.6em;
    }

    .underseksjon-tittel {
        font-size: 1.25em;
    }

    /* Better card spacing on mobile */
    .kortforside,
    .knapforside,
    .kortklikk {
        padding: 0.6rem 1rem;
        margin-bottom: 1.2em;
    }

    /* Improve box padding on mobile */
    .boks,
    .boks-enkelt,
    .boks-subtle,
    .boks-light {
        padding: 1rem;
        margin-bottom: 1.2em;
    }

    /* Better accordion spacing on mobile */
    .trekkspill-element {
        margin-bottom: 10px;
    }

    .trekkspill-hode {
        padding: 14px 16px;
        font-size: 1rem;
    }

    .trekkspill-innhold {
        padding: 16px 18px;
    }

    /* Improve tab navigation on mobile */
    .horisontale-rene .fane {
        padding: 10px 14px;
        font-size: 0.85em;
    }

    .horisontale-rene .fanepanel {
        padding: 18px;
    }

    /* Better module header on mobile */
    .modul-overskrift,
    .ki-kurs-header {
        padding: 25px 20px;
    }

    .modul-overskrift h1,
    .ki-kurs-header h1 {
        font-size: 1.8em;
    }

    /* Touch-friendly buttons and links */
    .standardknap,
    .ki-modul-button {
        min-height: 44px; /* iOS touch target minimum */
        padding: 12px 16px;
    }

    /* Better video player on mobile */
    .video-ramme-container,
    .video-ramme-container-knapp {
        margin-bottom: 40px;
    }
}

/* Mobile Small: Extra compact for very small screens */
@media (max-width: 480px) {
    /* Even more compact spacing */
    .laeringsdesign-side {
        padding: 0 10px 5px;
    }

    .innledning {
        padding: 20px 10px 30px;
        margin: 10px -10px 10px -10px;
    }

    .innledning-tittel {
        font-size: 1.6em;
    }

    .seksjon-tittel {
        font-size: 1.4em;
    }

    /* Stack grid columns on very small screens */
    .grid-container {
        display: block !important;
    }

    .grid-column {
        width: 100% !important;
        margin-bottom: 15px;
    }

    /* Smaller module grid */
    .ki-moduler-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================================== */
@media (prefers-contrast: high) {
    .boks,
    .boks-enkelt,
    .boks-subtle,
    .boks-light,
    .trekkspill-element,
    .kortforside,
    .kortklikk {
        border-width: 2px;
    }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}