/* ==========================================================================
   ProdUp – Delt fargepalett og stilark
   Én kilde til sannhet for farger og gjenbrukte komponenter på tvers
   av alle sider. Begge historiske variabel-navnekonvensjoner
   (--produp-* og --color-*) beholdes som aliaser, slik at eksisterende
   klassenavn i HTML-en (bg-primary, text-produp-orange, osv.) fortsatt
   fungerer uendret.
   ========================================================================== */

:root {
    /* Kanoniske ProdUp-farger */
    --produp-orange: #EA5B0B;
    --produp-blue: #1E3D58;
    --produp-lavendel: #7B5BAA;
    --produp-coral: #FF6F61;
    --produp-beige: #F5E6CC;
    --produp-gray: #808080;
    --produp-green: #56836B;
    --produp-teal: #367588;
    --produp-neutral-text: #374151;

    /* Aliaser (brukt på enkelte sider under andre navn) */
    --color-primary: var(--produp-orange);
    --color-secondary: var(--produp-blue);
    --color-accent-teal: var(--produp-teal);
    --color-accent-coral: var(--produp-coral);
    --color-accent-green: var(--produp-green);
    --color-neutral-bg: var(--produp-beige);
    --color-neutral-gray: var(--produp-gray);
    --color-neutral-text: var(--produp-neutral-text);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--produp-beige);
    color: var(--produp-blue);
}

/* --- Fargeklasser (ProdUp-navnekonvensjon) --- */
.bg-produp-orange { background-color: var(--produp-orange); }
.text-produp-orange { color: var(--produp-orange); }
.text-produp-beige { color: var(--produp-beige); }
.text-produp-gray { color: var(--produp-gray); }

/* --- Fargeklasser (generisk navnekonvensjon / alias) --- */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-secondary { color: var(--color-secondary); }
.bg-accent-green { background-color: var(--color-accent-green); }
.bg-accent-teal { background-color: var(--color-accent-teal); }
.text-accent-teal { color: var(--color-accent-teal); }
.text-accent-coral { color: var(--color-accent-coral); }
.border-accent-coral { border-color: var(--color-accent-coral); }
.text-neutral-bg { color: var(--color-neutral-bg); }

/* --- Navigasjon og layout (felles for alle sider) --- */
.nav-link.active { color: var(--produp-orange); font-weight: 700; }
.header-bg { background-color: var(--produp-blue); }
.footer-bg { background-color: var(--produp-blue); }

/* --- Tjenesteboks (forsiden) --- */
.service-box {
    background-color: var(--produp-lavendel);
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: left;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 10px 25px -5px rgba(89, 61, 136, 0.2), 0 8px 10px -6px rgba(89, 61, 136, 0.2);
    border: 2px solid transparent;
}
.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(89, 61, 136, 0.3), 0 15px 15px -10px rgba(89, 61, 136, 0.3);
    border-color: var(--produp-coral);
}
.service-box h3 { color: var(--produp-beige); font-size: 1.5rem; font-weight: 700; }
.service-box p { color: var(--produp-beige); opacity: 0.9; margin-top: 0.5rem; }

/* --- Video-container (16:9, forsiden) --- */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 0.5rem;
    border: 3px solid var(--produp-orange);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* --- Iframe-container (16:9, ProdUp-verktøyet) --- */
.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}
.iframe-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* --- Artikkel-innhold (Innsikt-sidene) --- */
.article-container p { margin-bottom: 1.25rem; line-height: 1.7; }
.article-container h3 { font-size: 1.5rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; }
.article-container h4 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.5rem; }
.article-blockquote {
    border-left: 4px solid var(--produp-orange);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.1rem;
}
.sources-list li {
    font-size: 0.9em;
    color: var(--produp-gray);
    margin-bottom: 0.5rem;
    transition: color 0.2s ease-in-out;
}
.sources-list li a:hover { color: var(--produp-orange); text-decoration: underline; }

/* --- Kontaktboks (kontakt.html) --- */
.contact-box {
    background-color: var(--color-accent-teal);
    box-shadow: 8px 8px 0px var(--color-secondary);
    transition: all 0.2s ease-out;
}
.contact-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px var(--color-secondary);
}
.form-input-custom {
    background-color: var(--color-neutral-gray);
    color: #F5E6CC;
    border: 2px solid transparent;
}
.form-input-custom::placeholder { color: #F5E6CC; opacity: 0.6; }
.form-input-custom:focus { outline: none; border-color: var(--color-primary); }