/* ===========================================================================
   FÆLLES HEADER FOR HELE SIDEN
   ===========================================================================
   Lavet 4. september 2026.

   Foer laa toppen fem forskellige steder og saa forskellig ud fem steder:

     Forside      foto, moerk bjaelke, menupunkter som piller
     Om os        andet foto, temaets egen lyse bjaelke, rosa markering
     Kontakt os   tredje foto, temaets bjaelke
     Kurser       intet foto, fladt groent felt, centreret tekst
     Tilmelding   intet felt overhovedet - logoet stod paa lys baggrund
                  og kunne naesten ikke ses

   Her staar det ét sted. Filen indlaeses paa alle de sider, der har et
   moerkt billede oeverst, og kun dem: har en side lys baggrund i toppen,
   ville en gennemsigtig bjaelke goere logoet ulaeseligt. Hvilke sider det
   er, staar i icel-forside.php.

   BILLEDET STAAR KUN ÉT STED. Alle fem sider henter det gennem variablen
   --icel-faelles-hero, og den saettes af icel-forside.php - ikke her.

   Grunden er, at kursus-plugin'et bruger den samme variabel fra sit eget
   stilark i en anden mappe. En relativ adresse i en variabel bliver regnet
   ud i forhold til den fil, der bruger den - ikke den, der satte den - saa
   billedet blev soegt i kursus-plugin'ets mappe og fandtes ikke. PHP skriver
   derfor den fulde adresse ind, og saa er der ingen tvivl.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Menubjaelken.

   Den ligger oven paa billedet i stedet for over det, saa fotoet gaar helt
   til toppen af skaermen. Derfor er den absolut placeret, og derfor har
   hvert hero et frirum foroven paa 105 px.

   De samme vaerdier staar ogsaa som `body.home` oeverst i icel-forside-v3.css
   fra dengang, kun forsiden havde dem. De to saet er ens; det gamle kan
   fjernes, naeste gang den fil skrives om.
   --------------------------------------------------------------------------- */

body.icel-faelles-header #site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 50;
    border: 0;
    background: linear-gradient(180deg, rgba(2, 31, 23, .88), transparent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.icel-faelles-header #site-header-inner {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    height: 92px;
}

body.icel-faelles-header #site-logo #site-logo-inner { height: 92px; }

body.icel-faelles-header #site-logo #site-logo-inner a img {
    width: 290px;
    max-height: 62px;
}

body.icel-faelles-header #site-navigation-wrap { height: 92px; }

body.icel-faelles-header #site-navigation-wrap .dropdown-menu > li > a {
    height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    font-weight: 750;
    line-height: 46px;
}

/* Den side, man staar paa, og den man peger paa, faar samme markering.
   Temaet gav den ene en rosa farve og den anden ingenting. */
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > li > a:hover,
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > li > a:focus,
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > .current-menu-item > a,
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > .current_page_item > a,
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > .current-menu-ancestor > a {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* Forstoerrelsesglasset er et menupunkt for sig og skal have samme farve. */
body.icel-faelles-header #site-navigation-wrap .dropdown-menu > li.search-toggle-li > a,
body.icel-faelles-header #site-header .oceanwp-mobile-menu-icon a {
    color: rgba(255, 255, 255, .84);
}

/* ---------------------------------------------------------------------------
   Paa telefon.

   Logo og menuknap stod under hinanden: logoet var sat til at fylde hele
   bredden paa naer 54 px, og knappen faldt derfor ned paa naeste linje og
   laa oven i hero-teksten. De to staar nu side om side i en flex-raekke -
   logoet til venstre, knappen til hoejre - og saa kan de ikke braekke,
   uanset hvor langt logoet er.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    body.icel-faelles-header #site-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: calc(100% - 30px);
        height: 76px;
        padding: 0;
    }

    body.icel-faelles-header #site-logo {
        float: none;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    body.icel-faelles-header #site-logo #site-logo-inner {
        height: 76px;
        display: flex;
        align-items: center;
    }

    body.icel-faelles-header #site-logo #site-logo-inner a img {
        width: min(285px, 100%);
        max-height: 56px;
    }

    body.icel-faelles-header .oceanwp-mobile-menu-icon {
        position: static;
        float: none;
        height: auto;
        margin: 0;
    }

    body.icel-faelles-header .oceanwp-mobile-menu-icon a { line-height: 1; }
}