/* ==========================================================================
   TV TOOLS - GLOBAL SYSTEM STYLES (Industrial Pop V8.1)
   ========================================================================== */

/* FEILSØKING: Fjern /* foran neste linje for å sjekke om filen laster. */
/* body { border: 5px solid red !important; } */

:root {
    /* --- INDUSTRIAL POP PALETTE --- */
    --tv-deep-slate: #2C3E50;
    --tv-industrial-amber: #F39C12;
    --tv-technical-mint: #1ABC9C;
    --tv-paper-white: #ECF0F1;

    /* --- MAPPED COLORS --- */
    --tv-primary: var(--tv-deep-slate);
    --tv-accent: var(--tv-industrial-amber);
    --tv-accent-secondary: var(--tv-technical-mint);

    /* Statusfarger */
    --tv-success: var(--tv-technical-mint);
    --tv-warning: var(--tv-industrial-amber);
    --tv-error: #e74c3c;

    /* --- NØYTRALE FARGER --- */
    --tv-bg: var(--tv-paper-white);
    --tv-card-bg: #ffffff;
    --tv-text: var(--tv-deep-slate);
    --tv-text-muted: #64748B;
    --tv-border: rgba(44, 62, 80, 0.12);
    
    /* Legacy / Compatibility Mappings */
    --tv-primary-light: #EEF2FF; /* Beholdes for pill-hover effekter inntil videre */
    --tv-bg-pill: var(--tv-paper-white);
    --tv-white: #FFFFFF;

    /* Squircle radius */
    --tv-radius-card: 16px;
    --tv-radius-sm: 12px;
}

/* ==========================================================================
   1. INFO MENY
   ========================================================================== */
@media (min-width: 1025px) {
    .header-menu-2 > ul > li > a {
        background-color: var(--tv-bg-pill) !important;
        color: var(--tv-text-muted) !important;
        padding: 6px 14px !important;
        border-radius: 50px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        height: auto !important;
        margin: 0 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        font-family: 'Barlow', system-ui, sans-serif !important;
    }

    .header-menu-2 > ul > li > a:hover {
        background-color: var(--tv-industrial-amber) !important;
        color: var(--tv-deep-slate) !important;
    }
}

/* ==========================================================================
   2. HOVEDMENY (Blocksy - Nå med synlige piller)
   ========================================================================== */
@media (min-width: 1025px) {
    
    /* Vi bruker 'header' foran for å øke spesifisiteten (vinne over temaet) */
    header .ct-header-menu > ul > li > a,
    header .ct-header-menu .ct-menu-link {
        /* Pille-utseende */
        background-color: var(--tv-bg-pill) !important;
        border-radius: 50px !important; 
        
        /* Reset Blocksy */
        box-shadow: none !important;
        border: 1px solid transparent !important;
        text-decoration: none !important;
        
        /* Layout */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 42px !important;       /* Fast høyde */
        padding: 0 24px !important;    /* Bredde */
        margin: 0 4px !important;      /* Avstand */
        
        /* Tekst */
        color: var(--tv-text) !important;
        font-size: 14px !important;
        font-weight: 700 !important; /* Industrial Pop bold */
        font-family: 'Barlow', system-ui, sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s ease !important;
    }

    /* Hover & Aktiv - Industrial Amber Pille */
    header .ct-header-menu > ul > li > a:hover,
    header .ct-header-menu > ul > li.current-menu-item > a,
    header .ct-header-menu > ul > li.current-menu-ancestor > a {
        background-color: var(--tv-industrial-amber) !important;
        color: var(--tv-deep-slate) !important;
        transform: translateY(-1px);
        box-shadow: 0 3px 0 rgba(0,0,0,0.1) !important; /* Hard shadow */
    }
    
    /* Fjern bakgrunn på indre elementer som kan ødelegge formen */
    header .ct-header-menu > ul > li > a * {
        background: transparent !important;
    }
}

/* ==========================================================================
   3. DROPDOWN (Heiset kraftig opp)
   ========================================================================== */
@media (min-width: 1025px) {
    
    .sub-menu {
        /* Flytter menyen OPP. Juster dette tallet hvis den treffer feil */
        margin-top: -25px !important; 
        
        padding-top: 25px !important; /* Broen må være like høy som løftet */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        overflow: visible !important;
        min-width: 240px !important;
    }

    /* Utseende på selve listen */
    .sub-menu li {
        background: var(--tv-white);
        width: 100% !important;
        position: relative;
        z-index: 100;
        border-left: 2px solid var(--tv-deep-slate);
        border-right: 2px solid var(--tv-deep-slate);
    }

    /* Runde hjørner på boksen */
    .sub-menu > li:first-child { 
        border-top-left-radius: 12px !important; 
        border-top-right-radius: 12px !important;
        border-top: 2px solid var(--tv-deep-slate);
        padding-top: 6px;
    }
    .sub-menu > li:last-child { 
        border-bottom-left-radius: 12px !important; 
        border-bottom-right-radius: 12px !important;
        border-bottom: 2px solid var(--tv-deep-slate);
        box-shadow: 0 4px 0 rgba(0,0,0,0.15); /* Hard shadow */
        padding-bottom: 6px;
    }

    /* Linker (Full bredde) */
    .sub-menu li a {
        color: var(--tv-text) !important;
        padding: 12px 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        font-family: 'Barlow', system-ui, sans-serif !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        margin: 0 !important;
        text-transform: none !important;
        height: auto !important;
    }

    .sub-menu li a:hover {
        background-color: var(--tv-paper-white) !important;
        color: var(--tv-deep-slate) !important;
        padding-left: 28px !important;
    }
}

/* ==========================================================================
   4. DIVERSE (Rydding)
   ========================================================================== */
@media (max-width: 1024px) {
    .mobile-menu li a {
        font-size: 16px !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid var(--tv-border);
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        font-family: 'Barlow', system-ui, sans-serif !important;
    }
    .ct-offcanvas-content { padding: 0 !important; }
}

/* Skjul Blocksy-elementer */
.ct-header-socials,
.ct-header-menu i.fa-angle-down, 
.header-menu-2 i.fa-angle-down,
.ct-menu-link::before,
.ct-menu-link::after {
    display: none !important;
}

/* Import Barlow globally if not present */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&display=swap');