:root{

    --clr-mid:#9d9d9d;
    --clr-dark:#000;
    --clr-light:#fff;
    --clr-keyboard-focus:rgba(173, 216, 230, 0.75);
    --clr-shadow:rgb(0 0 0 / 25%);
    --clr-pop: #9acd32;
    --standard-margin:0.5rem;

    --header-background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);
    --header-background-image-active:linear-gradient(to top,#3c3c3c 0,#222 100%);
    --clr-header-menu-inactive: var(--clr-mid);
    --clr-header-menu-active: var(--clr-light);
}
* { 
    box-sizing: border-box;
}
html, body {
    min-height: calc( 100vh - calc(2em + calc(2 * var(--standard-margin)) ));
    padding: 0;
    margin:0;
}

/*lower specificity*/
a:where(:link,:active,:visited,:hover){color:inherit;text-decoration: none;}
main a { color: var(--clr-pop); }
main a:hover, main a:focus-visible { text-decoration:underline var(--clr-dark);}

/*** hamburger button ***/
.nav-toggle {position: absolute !important;top: -9999px !important;left: -9999px !important;}
.nav-toggle-label {position: absolute;top: 0;left: 0;margin-left: 1em;height: 100%;display: flex;align-items: center; color:var(--clr-header-menu-inactive);}
.nav-toggle-label::after{content:'\2630';}

.mainnav nav {opacity: 0;height:calc(2em + calc(2 * var(--standard-margin)) );}
.nav-toggle:checked ~ .nav-toggle-label { color:var(--clr-header-menu-active); }
.nav-toggle:checked ~.nav-toggle-label::after {content:'\00d7';font-size: 2rem;}
.nav-toggle:checked ~ nav {opacity: 1;}

/*** Actually hide the menu so it doesn't get rendered invisibly infront of content ***/
.nav-toggle ~ nav ul { display:none; }
.nav-toggle:checked ~ nav ul { display:flex;}

/*** "accessibility" ***/
.nav-toggle:focus-visible ~ .nav-toggle-label {outline: 2px solid var(--clr-keyboard-focus);background-image: var(--header-background-image-active);}
a:focus-visible {outline: 2px solid var(--clr-keyboard-focus); }

.skip-to-content {transform: translateY(-100%);position: absolute;top: 0;left: 50%;padding: var(--standard-margin);z-index:2;}
.skip-to-content:focus-within {transform: translateY(0%);text-transform: uppercase;color: var(--clr-dark);background-color: var(--clr-pop);border-radius: 0 0 var(--standard-margin) var(--standard-margin);}

/* TODO: find ud af en måde at slippe af med ul li for a neden for, specificiteten er iriterende! */

.mainnav ul :is(li,li.active) a:focus-visible{ box-shadow:inset 0 3px 9px var(--clr-shadow); color: var(--clr-pop); }


/*** menu styling ***/
.mainnav{position:fixed;top:0;left:0;right:0;background-image:var(--header-background-image);}
.mainnav a,.mainnav a:where(:visited)  {/*text-align: center;*/ color:var(--clr-header-menu-inactive); text-shadow:0 -1px 0 var(--clr-shadow);display:inline-block;height: calc(100% - calc(2 * var(--standard-margin)));padding: var(--standard-margin);line-height: 2em;text-transform: uppercase;width: 100%;}
.mainnav + * {margin-top:calc(2em + calc(2 * var(--standard-margin)) );}
.mainnav ul { display: flex; flex-wrap: nowrap;padding: 0 0 0 calc(2em + calc(2 * var(--standard-margin)) );margin: 0;align-items: flex-end;flex-direction: column; background-image:var(--header-background-image);}
.mainnav ul li {list-style: none;height: 100%; width:100%;}
.mainnav ul li.active {  color:var(--clr-header-menu-active);}
.mainnav ul li.active a { color: inherit; }
.mainnav ul li a:hover { color:var(--clr-pop);}

/*** submenus ***/
.mainnav .submenu {background-image:none;padding-left: 2em;}
.mainnav .submenu li {list-style: '\232a';color: var(--clr-header-menu-inactive);}

/*** menu "logo" ***/

.logo {
    position: fixed;
    top: calc(2 * var(--standard-margin));
    right: var(--standard-margin);
    color: var(--clr-light);
}


/*** content styling ***/

#maincontent {display: flex;flex-wrap: wrap;}

.frame-default {padding: var(--standard-margin);}
p {padding: var(--standard-margin);}

/*** popup styling ***/

:target[data-popup] {
    position: fixed;
    inset: 0;
    height: 100%;
    width:100%;
    overflow: auto;
    margin: 0;
    padding: calc(var(--standard-margin)*4);
}
*[data-popup] .close{display:none;
    /*crappy styling - do better :P*/
    position: absolute;
    right: var(--standard-margin);
    top: var(--standard-margin);
    font-size: 2rem;
    border: 1px solid;
    border-radius: 2rem;
    width: 2.5rem;
    text-align: center;
}
:target[data-popup] .close{display:initial;}


/*:has() is not yet widely supported, is here for when it is - ignore until then?*/
body:has( :target[data-popup] ) {overflow:hidden;}

/*** tab / harmonika styling ***/
summary { background: var(--clr-pop);padding: var(--standard-margin);}

/*** opskrift styling ***/
.opskrift{padding: var(--standard-margin);width: 100%; background: var(--clr-light);}
.opskrift h3 { padding: var(--standard-margin); background: var(--clr-pop); color: var(--clr-dark);}


/*** desktop stuff ***/
@media screen and (min-width: 800px) {
    .mainnav nav { opacity: 1;}
    .nav-toggle ~ nav ul { display:flex; }
    .nav-toggle,.nav-toggle-label { display:none; }
    .mainnav ul{flex-direction: row;}
    .mainnav ul li{display:block;width:fit-content;}

    .mainnav .submenu {display: none;}
    
    /*.mainnav li:focus-within .submenu , .mainnav li:hover .submenu, .mainnav a:focus-visible ~ .submenu 
    replaced with the below: */
    .mainnav :is( li:focus-within, li:hover, a:focus-visible ) .submenu {display: flex; position: absolute; flex-direction: column;align-items: flex-start;padding: var(--standard-margin); background-image:var(--header-background-image); }
    .submenu li {width: 100%;}
    .opskrift{width:50%;}
    /* :target[data-popup]{
        max-width: 800px;
        left: calc( calc( 100vw - 800px ) / 2 );
        border:1px solid var(--clr-pop);
        box-shadow: 0em 3em 5em var(--clr-dark);
    }       */
}

/*** very wide displays ***/
@media screen and (min-width: 1200px) {
    #maincontent{
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
    }
    :target[data-popup]{
        max-width: 1200px;
        left: calc( calc( 100vw - 1200px ) / 2 );
        border:1px solid var(--clr-pop);
        box-shadow: 0em 3em 5em var(--clr-dark);
    }      
}

/*** tiny displays ***/
@media screen and (max-width: 250px) {
    .logo { display:none; }
}