/* 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 {
    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 .trekkspill-hode::after { 
    color: #777;
}
.laerings-seksjon .trekkspill-innhold {
    border-top: 1px solid #e0e0e0;
}

.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-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;
    }
}



/*
 * Nord Formdesigner CSS Styles
 * =============================
 *
 * Kreative CSS-former for Canvas LMS
 * Inspirert av https://css-shape.com/
 *
 * INSTALLASJON:
 * Disse CSS-klassene må legges til i Canvas sin globale CSS.
 * For Nord University: Legg til i NordCanvas CSS-filen.
 *
 * BRUK:
 * Bruk Nord Formdesigner HTML-verktøyet (form-designer.html)
 * for å generere HTML-kode med riktige CSS-klasser.
 *
 * TILPASNING:
 * Hver form støtter CSS-variabler for dynamisk tilpasning:
 * - --s: Mønsterstørrelse (pattern size)
 * - --w: Bredde (width)
 * - background: Hovedfarge
 *
 */

/* ============================================
   1. BØLGEBOKS (Wavy Box)
   ============================================
   Bølget kant rundt hele boksen
*/
.nord-bolgeboks {
  --s: 20px;  /* Kontroller størrelsen på bølgen */
  --w: 360px; /* Ønsket bredde */

  width: round(var(--w), 4*var(--s));
  aspect-ratio: 1;
  padding: var(--s);
  border: var(--s) solid transparent;
  box-sizing: border-box;
  background: #00B0B9; /* Nord Prima 2 - default */
  border-radius: calc(3.5*var(--s));
  mask:
    radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px))
     var(--s) var(--s) padding-box;
  mask-size: calc(var(--s)*4) calc(var(--s)*4);

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   2. SKJELLBOKS (Scalloped Box)
   ============================================
   Skalloppkant (som skjell/bølger)
*/
.nord-skjellboks {
  --r: 25px; /* Radius av sirkler */
  --w: 320px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1;
  padding: calc(1.5*var(--r));
  box-sizing: border-box;
  background: #8FD6BD; /* Nord Prima 1 - default */
  mask:
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)),
    radial-gradient(farthest-side,#000 97%,#0000)
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   3. FRIMERKE (Stamp)
   ============================================
   Perforert kant som et frimerke
*/
.nord-frimerke {
  --r: 20px; /* Kontroller radius */
  --w: 300px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1.5;
  padding: var(--r);
  box-sizing: border-box;
  background: #6CC24A; /* Nord Sekund 5 - default */
  mask:
    radial-gradient(50% 50%,#0000 66%,#000 67%) round
     var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)),
    conic-gradient(#000 0 0) content-box;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   4. SIKKSAKK (Zig-Zag Box)
   ============================================
   Spisset sikk-sakk kant
*/
.nord-sikksakk {
  --s: 18px;  /* Kontroller størrelsen på spissene */
  --w: 350px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  box-sizing: border-box;
  background: #165C7D; /* Nord Sekund 2 - default */
  --_m:#0000 0 calc(2*atan(.5)),#000 0 50%;
  mask:
    repeating-conic-gradient(from atan(2) at 50% var(--s),var(--_m))
     calc(2*var(--s)) calc(-1*var(--s))/calc(4*var(--s)) 100% intersect,
    repeating-conic-gradient(from atan(-.5) at var(--s),var(--_m))
     calc(-1*var(--s)) calc(2*var(--s))/100% calc(4*var(--s));

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   5. DIAMANT (Diamond Pattern Box)
   ============================================
   Diamantmønster på kantene
*/
.nord-diamant {
  --s: 60px;  /* Kontroller størrelsen på spissene */
  --w: 350px; /* Ønsket bredde */

  width: round(var(--w), 2*var(--s));
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(.75*var(--s));
  box-sizing: border-box;
  background: #003D4C; /* Nord Sekund 1 - default */
  mask:
    conic-gradient(#000 0 0) 50%/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat,
    repeating-conic-gradient(from 45deg,#0000 0,#000 1deg 89deg,#0000 25% 50%)
     calc(var(--s)/2) 0/var(--s) var(--s);

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* Text color set dynamically by form-designer.html for WCAG 2.2 compliance */
}

/* ============================================
   6. HJØRNER (Corner Only)
   ============================================
   Ramme kun i hjørnene
*/
.nord-hjorner {
  --corner-size: 50px; /* Størrelse på hjørnene */
  --w: 350px; /* Ønsket bredde */

  border: 8px solid #EC5742; /* Nord Kontrast 1 - default */
  padding: 30px;
  width: var(--w);
  min-height: 200px;
  box-sizing: border-box;
  background: transparent content-box;
  mask:
    conic-gradient(#000 0 0) content-box,
    conic-gradient(at var(--corner-size) var(--corner-size),#0000 75%,#000 0)
    0 0/calc(100% - var(--corner-size)) calc(100% - var(--corner-size));

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
  /* No color defined - inherits Canvas default (adapts to dark mode) */
}

/* ============================================
   7. SIKKSAKK-KANT (Zig-Zag Edge)
   ============================================
   3D-effekt sikk-sakk kant på venstre eller høyre side
*/
.nord-sikksakk-kant {
  --s: 70px;  /* Kontroller størrelsen */
  --a: 90deg; /* Kontroller vinkelen */
  --d: 20px;  /* Dybden */
  --w: 100%;

  width: var(--w);
  min-height: 200px;
  padding: 40px;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* Variant: Kant på venstre side */
.nord-sikksakk-kant.sikksakk-left {
  background:
    conic-gradient(from calc(90deg - var(--a)/2) at var(--d) 50%,
      #0008,#0000 1deg calc(var(--a) - 1deg),#0004 var(--a) calc(180deg + var(--a)/2),#0008 0)
      50%/100% var(--s) #00B0B9; /* Nord Prima 2 - default */
  mask:
    conic-gradient(from calc(90deg - var(--a)/2) at left,
      #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a)) 50%/100% var(--s);
}

/* Variant: Kant på høyre side */
.nord-sikksakk-kant.sikksakk-right {
  background:
    conic-gradient(from calc(270deg - var(--a)/2) at calc(100% - var(--d)) 50%,
      #0008,#0000 1deg calc(var(--a) - 1deg),#0004 var(--a) calc(180deg + var(--a)/2),#0008 0)
      50%/100% var(--s) #00B0B9; /* Nord Prima 2 - default */
  mask:
    conic-gradient(from calc(270deg - var(--a)/2) at right,
      #0000,#000 1deg calc(var(--a) - 1deg),#0000 var(--a)) 50%/100% var(--s);
}

/* ============================================
   8. FILMSTRIPE (For bilder)
   ============================================
   Filmstripe-effekt, ideell for bilder
*/
.nord-filmstripe {
  --s: 12px; /* Kontroller størrelsen */
  --c: #222; /* Rammefarge (border og hull) - default svart som filmrull */
  --w: 350px; /* Ønsket bredde */

  width: var(--w);
  aspect-ratio: 1.25;
  background:
    conic-gradient(at 50% var(--s),var(--c) 75%,#0000 0)
    0 0/calc(2*var(--s)) calc(100% - var(--s)) padding-box;
  border: var(--s) solid var(--c);
  padding: calc(var(--s)*2.5) calc(var(--s)*1.5);
  box-sizing: content-box;
  position: relative;
  overflow: hidden;

  /* Valgfritt: Gammel film-effekt */
  /* filter: sepia(1) brightness(0.9) grayscale(.2); */
}

/* For bruk med img-tag */
.nord-filmstripe img {
  position: absolute;
  top: calc(var(--s)*2.5);
  left: calc(var(--s)*1.5);
  width: var(--w);
  height: calc(var(--w) / 1.25);
  object-fit: cover;
  display: block;
}

/* For tekst-only filmstrips uten bilder */
.nord-filmstripe:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   9. FANE (Rounded Tab)
   ============================================
   Avrundet fane, for overskrifter/titler
   Kan plasseres i 4 retninger
*/
.nord-fane {
  --r: 25px; /* Kontroller radius */
  --w: 200px; /* Bredde */

  line-height: 1.8;
  padding: 15px 25px;
  width: var(--w);
  box-sizing: border-box;

  /* Innholdsstyling */
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variant: Topp venstre */
.nord-fane.fane-top-left {
  border-right: var(--r) solid transparent;
  border-radius: var(--r) calc(2*var(--r)) 0 0/var(--r);
  mask:
    radial-gradient(var(--r) at 100% 0,#0000 98%,#000 101%)
     100% 100%/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Topp høyre */
.nord-fane.fane-top-right {
  border-left: var(--r) solid transparent;
  border-radius: calc(2*var(--r)) var(--r) 0 0/var(--r);
  mask:
    radial-gradient(var(--r) at 0 0,#0000 98%,#000 101%)
     0 100%/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Bunn venstre */
.nord-fane.fane-bottom-left {
  border-right: var(--r) solid transparent;
  border-radius: 0 0 var(--r) calc(2*var(--r))/var(--r);
  mask:
    radial-gradient(var(--r) at 100% 100%,#0000 98%,#000 101%)
     100% 0/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* Variant: Bunn høyre */
.nord-fane.fane-bottom-right {
  border-left: var(--r) solid transparent;
  border-radius: 0 0 calc(2*var(--r)) var(--r)/var(--r);
  mask:
    radial-gradient(var(--r) at 0 100%,#0000 98%,#000 101%)
     0 0/var(--r) var(--r) no-repeat,
    conic-gradient(#000 0 0) padding-box;
  background: #00B0B9 border-box; /* Nord Prima 2 - default */
}

/* ============================================
   10. RAMME (Simple Frame)
   ============================================
   Enkel ramme rundt innhold
*/
.nord-ramme {
  --w: 400px; /* Bredde */
  --border-width: 3px; /* Rammetykkelse */
  --border-radius: 8px; /* Hjørneradius */

  width: var(--w);
  min-height: 200px;
  padding: 20px;
  border: var(--border-width) solid #00B0B9; /* Nord Prima 2 - default */
  border-radius: var(--border-radius);
  box-sizing: border-box;
  background: transparent;

  /* Innholdsstyling */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  line-height: 1.6;
}

/* ============================================
   PREDEFINED SIZE VARIANTS
   ============================================
   Quick-use size classes that work without JavaScript
   Use these for simple cases where exact sizing isn't needed
*/

/* Bølgeboks sizes */
.nord-bolgeboks.liten { --s: 15px; --w: 280px; }
.nord-bolgeboks.medium { --s: 20px; --w: 360px; }
.nord-bolgeboks.stor { --s: 30px; --w: 480px; }

/* Skjellboks sizes */
.nord-skjellboks.liten { --r: 19px; --w: 260px; }
.nord-skjellboks.medium { --r: 25px; --w: 320px; }
.nord-skjellboks.stor { --r: 35px; --w: 420px; }

/* Frimerke sizes */
.nord-frimerke.liten { --r: 15px; --w: 240px; }
.nord-frimerke.medium { --r: 20px; --w: 300px; }
.nord-frimerke.stor { --r: 28px; --w: 400px; }

/* Sikksakk sizes */
.nord-sikksakk.liten { --s: 12px; --w: 280px; }
.nord-sikksakk.medium { --s: 18px; --w: 350px; }
.nord-sikksakk.stor { --s: 25px; --w: 450px; }

/* Diamant sizes */
.nord-diamant.liten { --s: 45px; --w: 280px; }
.nord-diamant.medium { --s: 60px; --w: 350px; }
.nord-diamant.stor { --s: 80px; --w: 480px; }

/* Hjørner sizes */
.nord-hjorner.liten { --corner-size: 40px; --w: 280px; }
.nord-hjorner.medium { --corner-size: 50px; --w: 350px; }
.nord-hjorner.stor { --corner-size: 65px; --w: 480px; }

/* Sikksakk-kant sizes */
.nord-sikksakk-kant.liten { --s: 50px; --w: 100%; }
.nord-sikksakk-kant.medium { --s: 70px; --w: 100%; }
.nord-sikksakk-kant.stor { --s: 95px; --w: 100%; }

/* Filmstripe sizes */
.nord-filmstripe.liten { --s: 10px; --w: 280px; }
.nord-filmstripe.medium { --s: 12px; --w: 350px; }
.nord-filmstripe.stor { --s: 16px; --w: 450px; }

/* Fane sizes */
.nord-fane.liten { --r: 18px; --w: 160px; }
.nord-fane.medium { --r: 25px; --w: 200px; }
.nord-fane.stor { --r: 32px; --w: 260px; }

/* Ramme sizes */
.nord-ramme.liten { --border-width: 2px; --w: 320px; }
.nord-ramme.medium { --border-width: 3px; --w: 400px; }
.nord-ramme.stor { --border-width: 5px; --w: 520px; }

/* ============================================
   DARK MODE KOMPATIBILITET
   ============================================
   Disse formene bruker hardkodede farger og
   vil ikke automatisk tilpasse seg dark mode.

   De er primært ment som dekorative elementer
   og ikke som innholdsbokser for tekst.

   For innholdsbokser med dark mode support,
   bruk Box Builder i stedet.
*/

/* ============================================
   RESPONSIV TILPASNING
   ============================================
   På små skjermer, reduser størrelse automatisk
*/
@media (max-width: 768px) {
  .nord-bolgeboks,
  .nord-skjellboks,
  .nord-frimerke,
  .nord-sikksakk,
  .nord-diamant,
  .nord-filmstripe {
    max-width: 100%;
    width: 100% !important;
  }

  .nord-hjorner {
    width: 100%;
    max-width: 100%;
  }

  .nord-sikksakk-kant {
    width: 100%;
  }

  .nord-ramme {
    width: 100%;
    max-width: 100%;
  }

  /* Reduce pattern sizes on mobile for better responsiveness */
  .nord-bolgeboks {
    --s: 12px; /* Smaller pattern allows tiling at narrower widths */
  }

  .nord-diamant {
    --s: 35px; /* Smaller pattern for mobile */
  }

  .nord-sikksakk {
    --s: 12px; /* Smaller zigzag pattern for mobile */
  }
}

/* ===== Contextualised Reveal Card (.kontekst-vis) ===== */
/* Used for content that requires context before viewing.  */
/* Learner reads the explanation, then chooses to reveal.  */
/* Structure: <details><summary class="kontekst-vis">...</summary><div class="kontekst-vis-innhold">...</div></details> */

details.kontekst-vis-wrapper {
    border: 1px solid #d0d7da;
    border-radius: 10px;
    overflow: hidden;
    margin: 30px 0;
    background: #fdfdfd;
}

summary.kontekst-vis {
    cursor: pointer;
    padding: 20px 25px;
    background: #f0f4f5;
    color: #003d4c;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: block;
    border-bottom: 1px solid #d0d7da;
    position: relative;
    box-sizing: border-box;
    transition: background 0.2s ease;
}

summary.kontekst-vis:hover {
    background: #e6ecee;
}

summary.kontekst-vis::-webkit-details-marker {
    display: none;
}

/* Title line with animated arrow */
.kontekst-vis-tittel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.kontekst-vis-tittel::before {
    content: '▶';
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    display: inline-block;
    flex-shrink: 0;
}

details.kontekst-vis-wrapper[open] > summary .kontekst-vis-tittel::before {
    transform: rotate(90deg);
}

/* Description text within the summary */
.kontekst-vis-beskrivelse {
    font-weight: normal;
    font-size: 0.9em;
    color: #333;
    line-height: 1.55;
    margin: 0;
    padding-left: 24px; /* Align with title text past the arrow */
}

/* Revealed content area */
.kontekst-vis-innhold {
    padding: 20px 25px;
    border-top: 1px solid #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    summary.kontekst-vis {
        padding: 15px 18px;
        font-size: 0.95rem;
    }
    .kontekst-vis-beskrivelse {
        font-size: 0.85em;
        padding-left: 20px;
    }
    .kontekst-vis-innhold {
        padding: 15px 18px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    details.kontekst-vis-wrapper {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.03);
    }
    summary.kontekst-vis {
        background: rgba(255, 255, 255, 0.05);
        color: #e0e0e0;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    summary.kontekst-vis:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    .kontekst-vis-beskrivelse {
        color: #aaa;
    }
    .kontekst-vis-innhold {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}