/* ==========================================================================
   kg-header.css — Kalenderguiden felles header, søkefelt, nedtrekksmeny
   og brødsmulesti. LENKES INN PÅ ALLE SIDER for garantert konsistens.

   Bruker !important og harde verdier (ikke var()) med hensikt: mange sider
   har fortsatt egne, avvikende <style>-blokker i <head> som ikke skal
   trenge å fjernes for at denne skal vinne. Når/hvis de gamle
   duplikat-blokkene fjernes fra hver side over tid, fungerer siden akkurat
   likt siden dette er selve kilden til sannhet.

   Rediger KUN denne filen for å endre header/nav/brødsmulesti-utseende
   på tvers av hele siten.
   ========================================================================== */

.kg-skip {
    position: absolute !important; left: -9999px !important; top: 0 !important;
    background: #ba2d0b !important; color: #fff !important;
    padding: 10px 16px !important; border-radius: 0 0 8px 0 !important;
    z-index: 1000 !important; font-weight: 600 !important; text-decoration: none !important;
}
.kg-skip:focus { left: 0 !important; }

/* ---- Header ---- */
header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e0d5 !important;
    padding: 14px 24px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    height: auto !important;
}
.header-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 0 !important;
    height: 44px !important;
}
.logo {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.logo span { color: #ba2d0b !important; }

/* ---- Søkefelt ---- */
.header-search {
    flex: 1 1 auto !important;
    max-width: 300px !important;
    min-width: 120px !important;
    position: relative !important;
    margin: 0 8px !important;
}
.header-search input {
    width: 100% !important;
    padding: 8px 16px 8px 36px !important;
    border: 1px solid #e5e0d5 !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    background: #f7f7f5 !important;
    box-sizing: border-box !important;
    color: inherit !important;
    height: 38px !important;
}
.header-search input:focus {
    outline: none !important; border-color: #ba2d0b !important;
    background: #fff !important; box-shadow: 0 0 0 3px rgba(186,45,11,0.1) !important;
}
.header-search::before {
    content: '' !important; position: absolute !important; left: 12px !important; top: 50% !important;
    transform: translateY(-50%) !important; width: 16px !important; height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235c5c5c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") !important;
    background-size: contain !important; pointer-events: none !important;
}
@media (max-width: 768px) { .header-search { display: none !important; } }

/* ---- Hovednav ---- */
nav { display: flex !important; gap: 16px !important; align-items: center !important; }
nav > a {
    color: #1a1a1a !important; text-decoration: none !important; font-size: 0.95rem !important;
    padding: 8px 12px !important; border-radius: 6px !important; transition: background 0.2s !important;
    white-space: nowrap !important;
}
nav > a:hover { background: #f5f0e8 !important; }
.nav-aktuelt {
    background: #fdf0ed !important;
    color: #9c2409 !important;
    font-weight: 600 !important;
}
.nav-aktuelt:hover { background: #fbe0d9 !important; }
.menu-toggle {
    display: none !important; background: none !important; border: none !important;
    font-size: 1.5rem !important; cursor: pointer !important; color: #1a1a1a !important;
}

/* ---- Nedtrekksmeny ("Alle verktøy") ---- */
.nav-dropdown { position: relative !important; }
.nav-dropdown-toggle {
    background: none !important; border: none !important; color: #1a1a1a !important;
    font-size: 0.95rem !important; padding: 8px 12px !important; border-radius: 6px !important;
    cursor: pointer !important; font-family: inherit !important; text-decoration: none !important;
    display: inline-block !important; white-space: nowrap !important;
}
.nav-dropdown-toggle:hover { background: #f5f0e8 !important; }
/* Selve pilen ligger i HTML-teksten ("Alle verktøy ▾") - IKKE legg til en CSS-generert
   pil her igjen (::after), det er nøyaktig det som forårsaket dobbel-pil-bugen. */
.nav-dropdown-menu {
    display: none !important; position: absolute !important; top: 100% !important; right: 0 !important;
    background: #ffffff !important; border: 1px solid #e5e0d5 !important; border-radius: 10px !important;
    padding: 16px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; z-index: 200 !important;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.active .nav-dropdown-menu {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 8px !important;
    min-width: 480px !important;
}
.nav-dropdown-section { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.nav-dropdown-label {
    font-size: 0.75rem !important; font-weight: 600 !important; color: #6b6b6b !important;
    text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 8px 12px 0 !important;
}
.nav-dropdown-item {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 12px !important; border-radius: 6px !important; text-decoration: none !important;
    color: #1a1a1a !important; font-size: 0.9rem !important; transition: background 0.2s !important;
}
.nav-dropdown-item:hover { background: #f5f0e8 !important; }
.nav-dropdown-item span { font-size: 1.1rem !important; }
.nav-dropdown-alle {
    grid-column: 1 / -1 !important; display: block !important; text-align: center !important;
    padding: 10px !important; margin-top: 4px !important; border-top: 1px solid #e5e0d5 !important;
    font-weight: 600 !important; color: #ba2d0b !important; text-decoration: none !important;
}

@media (max-width: 900px) { .nav-dropdown-menu { min-width: 360px !important; } }
@media (max-width: 768px) {
    .menu-toggle { display: block !important; }
    nav {
        display: none !important; position: absolute !important; top: 100% !important;
        left: 0 !important; right: 0 !important; background: #ffffff !important;
        flex-direction: column !important; align-items: stretch !important;
        padding: 16px !important; border-bottom: 1px solid #e5e0d5 !important;
        gap: 4px !important;
    }
    nav.active { display: flex !important; }
    .nav-dropdown-menu {
        position: static !important; min-width: auto !important;
        box-shadow: none !important; border: none !important; padding: 0 !important;
        margin-top: 8px !important;
    }
    .nav-dropdown:hover .nav-dropdown-menu { display: none !important; }
    .nav-dropdown.active .nav-dropdown-menu {
        display: flex !important; flex-direction: column !important; grid-template-columns: none !important;
    }
}
@media (max-width: 600px) {
    .nav-dropdown-menu { grid-template-columns: 1fr !important; min-width: 260px !important; }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown.active .nav-dropdown-menu { grid-template-columns: 1fr !important; }
}

/* ---- Brødsmulesti ---- */
.breadcrumb-nav {
    background: #f5f0e8 !important;
    border-bottom: 1px solid #d4cfc6 !important;
    padding: 10px 24px !important;
}
.breadcrumb {
    max-width: 1200px !important; margin: 0 auto !important; list-style: none !important;
    padding: 0 !important; display: flex !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 4px !important; font-size: 0.85rem !important;
    color: #5c5c5c !important;
}
.breadcrumb a { color: #5c5c5c !important; text-decoration: none !important; transition: color 0.2s !important; }
.breadcrumb a:hover { color: #ba2d0b !important; }
.breadcrumb li { display: flex !important; align-items: center !important; gap: 0 !important; }
.breadcrumb li:not(:last-child)::after {
    content: '›' !important; margin: 0 8px !important; color: #a8a29a !important;
    font-size: 0.95rem !important; line-height: 1 !important; position: relative !important; top: -1px !important;
}
/* Skjul den gamle, hardkodede separator-<li> — pilen kommer nå kun fra ::after over */
.breadcrumb-sep { display: none !important; }
.breadcrumb-current { color: #1a1a1a !important; font-weight: 500 !important; }
