/*

Custom CSS for DF 2023, child theme of Blockbase.

*/

/* Variabler */
:root {
    /* lenkestrek basert på primærfarge valgt i temaet */
    --lenkestrekfarge: 110,166,125;
    --lenkeaktivfarge: 231, 141, 3;
}

body {
    font-size: clamp(1.0rem, 1.0rem + ((1vw - 0.48rem) * 0.577), 1.2rem);
}

/* Orddeling */
h2, h3, h4, h5, h6 {
    hyphens: auto;
}

/* Linjehøyde */
h2, h3, h4, h5, h6 {
    line-height: 1.7 !important;
}

/* Fikse gap over footer */
footer {
    margin-top:0px !important;
}

/* Blocks fra pods templates */
.visflere-beholder {
    justify-content: flex-end;
    column-gap:7px !important;
    margin-top:30px !important;
}
/* Rules for sizing the icon. Google Fonts Material Icons. */
.material-icons-outlined.md-18,.material-icons.md-18 { font-size: 18px; }
.material-icons-outlined.md-24,.material-icons.md-24 { font-size: 24px; }
.material-icons-outlined.md-36,.material-icons.md-36 { font-size: 36px; }
.material-icons-outlined.md-48,.material-icons.md-48 { font-size: 48px; }

/* MOBILMENY */

body {
    overflow-y:scroll;
}
/* Fikser at lukkeknappen i mobilmenyen havner der den skal bl.a. (padding-top) */
.wp-block-navigation__responsive-container {
    overflow-y: scroll !important;
    padding-top:22px !important;
    animation-timing-function: step-end !important;
}
.wp-block-navigation__container > li {
    font-size:34px !important;
    margin-bottom:24px;
}
.wp-block-navigation__submenu-container span {
    font-size:22px !important;
}
.wp-block-navigation__submenu-container {
    padding-right:37px !important;
}
/* Mobilmeny pluss- og minus-symboler */
/* Add a plus or minus symbol to the front of each main menu item */
.wp-block-navigation__container li.has-child > a.wp-block-navigation-item__content::after,
.wp-block-navigation__container li.has-child.is-open > a.wp-block-navigation-item__content::after {
    display:inline-block;
    margin-left: 3px;
    position:relative;
    top:7px;
}
.wp-block-navigation__container li.has-child > a.wp-block-navigation-item__content::after {
  font-family:'Material Icons Outlined';
  content:"\e145";
  -webkit-font-feature-settings: 'liga';
  /*content: "+";*/
}
/* Change the content of the ::before pseudo-element when the submenu is open */
.wp-block-navigation__container li.has-child.is-open > a.wp-block-navigation-item__content::after {
  font-family:'Material Icons Outlined';
  content:"\e15b";
  -webkit-font-feature-settings: 'liga';
  /*content: "-";*/
}

/* JMB 2023-12-06 moved from plugin */
.wp-block-navigation__container li.has-child > ul {
    display: none;
}


button.wp-block-navigation__responsive-container-open,
button.wp-block-navigation__responsive-container-close {
    border: 2px solid black !important;
    padding: 3px !important;
    display: flex !important;
}
@media screen and (min-width: 836px) {
    button.wp-block-navigation__responsive-container-open::before,
    button.wp-block-navigation__responsive-container-close::before {
        padding-left: 4px;
    }
    button.wp-block-navigation__responsive-container-open::before {
        content: "Meny";
        font-size: 18px;
        padding-right:5px;
    }
    button.wp-block-navigation__responsive-container-close::before {
        content: "Lukk";
        font-size: 18px;
        padding-right: 12px;
    }
}

/* LENKER */

/* standard for vanlige lenker og for mobilmeny-lenker */
a:not(.wp-block-button__link, h1.wp-block-site-title a),
.wp-block-navigation__container > li a,
.wp-block-navigation__submenu-container a {
    text-decoration-line:underline;
    text-underline-offset:0.35em !important;
    text-decoration-thickness:0.2em !important;
    text-decoration-color: rgba(var(--lenkestrekfarge),0.45) !important;
}
/* standard for lenker hover og active */
a:not(.wp-block-navigation-item__content, .wp-block-button__link, h1.wp-block-site-title a):hover,
a:not(.wp-block-navigation-item__content, .wp-block-button__link, h1.wp-block-site-title a):focus,
a:not(.wp-block-navigation-item__content, .wp-block-button__link, h1.wp-block-site-title a):active,
.wp-block-navigation__container > li a:hover,
.wp-block-navigation__container > li a:active,
.wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__submenu-container a:active {
    text-decoration-line:underline;
    text-decoration-color: rgba(var(--lenkestrekfarge),1) !important;
    outline-style: none !important;
}
/* spesifikt for mobilmeny-lenker focus */
.wp-block-navigation__container > li a:focus,
.wp-block-navigation__submenu-container a:focus {
    text-decoration-line:underline;
    /*text-underline-offset:0.35em !important;
    text-decoration-thickness:0.2em !important;*/
    text-decoration-color: rgba(var(--lenkestrekfarge),0.45);
    outline: 1px dotted darkgray !important;
}
/* Nettsidetittel i navigasjonslinje */
h1.wp-block-site-title a:hover,
h1.wp-block-site-title a:focus,
h1.wp-block-site-title a:active {
    color: rgba(var(--lenkestrekfarge),1) !important;
    outline-style: none !important;
}
/* H1 overskrifter med lenke */
h1.wp-block-site-title a {
    text-decoration: none !important;
}

/* KART AVDELINGSSIDER */
.kartbeholder img {
    --wp--preset--font-family--noto-sans: Noto Sans;
    --wp--custom--color--foreground: var(--wp--preset--color--foreground);
    --wp--custom--body--typography--line-height: 1.6;
    color: var(--wp--custom--color--foreground);
    font-family: var(--wp--preset--font-family--noto-sans);
    font-size: clamp(0.9rem, 0.9rem + ((1vw - 0.48rem) * 0.577), 1.2rem);
    font-style: normal;
    font-weight: 400;
    line-height: var(--wp--custom--body--typography--line-height);
    -webkit-font-smoothing: antialiased;
    --wpadmin-bar--height: 32px;
    aspect-ratio: auto 1920 / 1357;
    box-sizing: border-box;
    z-index: 0;
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.kartbeskrivelse-beholder {
    
}

/* DETAILS-BLOCK */

/* Add a custom transition when opening/closing. */
/*.wp-block-details {
	transition: all 0.5s ease-in-out;
}*/

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where( :not( summary ) ) {
	margin-left: 4%;
	margin-right: 4%;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
	padding-bottom: 15px;
}

/* Base `summary` element styling. */
.wp-block-details summary {
	/*transition: all 0.5s ease-in-out;*/
	box-sizing: border-box;
	/*padding: 1.5rem;*/
	font-weight: bold;
	padding-bottom: 5px;
}

/*.wp-block-details[open] summary {
    margin-bottom: 10px;
}*/
/*.wp-block-details summary::marker {
	content: "+ ";
	font-size: 30px;
}

.wp-block-details[open] summary::marker {
	content: "– "
	font-size: 30px;
}*/

.wp-block-details summary::marker {
	content: none;
}

.wp-block-details summary::after {
	font-size: 48px;
	font-weight: 200;
	content: " +";
	/*float: right;
	text-align: right;*/
	position: relative;
	top: 0.24em;
	left:-5px;
	line-height: 4px;
}

.wp-block-details[open] summary::after {
	font-size: 48px;
	content: " –";
	top: 0.16em;
	left: -3px;
}

/* POSTLISTER */
.postliste-beholder {
    
}
.postliste,
.postliste-avdelinger {
    box-sizing:border-box;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    column-gap:1.2em;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    padding-left:0px;
}
.postliste {
    row-gap:1.7em;
}
.postliste-avdelinger {
    row-gap:3em;
}
.postliste-punkt {
    box-sizing:border-box;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    display:list-item;
}
/* Setter opp at postlister skal være i max 4 kolonner (bred skjerm) */
.postliste-punkt:nth-child(4n+1) {
    grid-column:1;
}
.postliste-punkt:nth-child(4n+2) {
    grid-column:2;
}
.postliste-punkt:nth-child(4n+3) {
    grid-column:3;
}
.postliste-punkt:nth-child(4n+4) {
    grid-column:4;
}
/* Postlister avdelinger max 3 kolonner */
.postliste-punkt-avdelinger:nth-child(3n+1) {
    grid-column:1;
}
.postliste-punkt-avdelinger:nth-child(3n+2) {
    grid-column:2;
}
.postliste-punkt-avdelinger:nth-child(3n+3) {
    grid-column:3;
}


.punktinnhold-beholder {
    
}
.punktinnhold-beholder .wp-block-post-title:not(h1,h2) {
    margin-top:0.35em;
    font-size:clamp(1.125rem, 1.125rem + ((1vw - 0.48rem) * 0.721), 1.5rem);
}
.punktinnhold-beholder .post-utdraget {
    margin-bottom:0px;
    margin-top:11px;
}
.punktinnhold-beholder p {
    margin-bottom:0px;
    margin-top:0px;
}
.punktinnhold-figure {
    position:relative;
    width:100%;
    height:0;
    padding-top: min(calc(100%*(200/300)),500px);
    margin-bottom:0px;
}
.postbilde-link {
    
}
.postbilde-link img {
    position: absolute;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Ultimate Blocks content toggle accordion */
.wp-block-ub-content-toggle-accordion:first-child {
    border-top:1px solid black !important;
}
.wp-block-ub-content-toggle-accordion {
    border-color:black !important;
    border-right:0px !important;
    border-left:0px !important;
    border-top:0px;
    border-bottom:1px solid black !important;
    margin-bottom:0px !important;
}
.wp-block-ub-content-toggle-accordion-title-wrap {
    background-color:white !important;
    padding-top:5px;
    padding-bottom:5px;
}

/* Bilder og tekstbryting */
figure.wp-block-image.alignleft {
    clear: left;
}
figure.wp-block-image.alignright {
    clear: right;
}

@media (prefers-color-scheme: dark) {
    .wp-block-ub-content-toggle-accordion-toggle-wrap span {
        color: darkgray !important;
    }
}

/* Spesielt for bredere enn 1250 px bredde */
@media only screen and (min-width: 1250px) {
    figure.wp-block-image.alignleft {
        margin-left: calc((100% - 1200px) / 2);
    }
    figure.wp-block-image.alignright {
        margin-right: calc((100% - 1200px) / 2);
    }
}

/* Nettbrett */
@media only screen and (max-width: 835px) {
    
    /* 2 kolonner for postlister*/
    .postliste-punkt:nth-child(2n+1),
    .postliste-punkt-avdelinger:nth-child(2n+1) {
        grid-column:1;
    }
    .postliste-punkt:nth-child(2n+2),
    .postliste-punkt-avdelinger:nth-child(2n+2) {
        grid-column:2;
    }
    
    
    /*  Ved 4 elementer, gjør dette at den hopper til 2 kolonner på nettbrett
        under visning av relaterte arrangementer o.l. */
    /*.postliste {
        grid-template-columns:repeat(2, 1fr);
    }*/
    
    /* Fjerne fokusmerke */
    .wp-block-navigation__container > li a:focus,
    .wp-block-navigation__submenu-container a:focus {
        outline: 0px !important;
    }
    
    /* Fikse at menyknapp og logo spretter rundt på nettbrett og mobil */
    header .wp-block-group.site-brand.is-layout-flex {
        column-gap:10px !important;
        display: flex !important;
    }
    header .wp-block-group.site-header {
        column-gap: 10px !important;
    }
    header .wp-block-site-logo {
        flex-basis:auto !important;
        margin-bottom: 0px !important;
        margin-top:0px !important;
    }
    
    /* Språk-knapp uten tekst på mobil */
    .invisible-mobile-DF {
        display: none;
    }
}



/* Mobilvisning */
@media only screen and (max-width: 600px) {
    
    /* Nettside-tittel over to linjer på mobilvisning */
    h1.wp-block-site-title {
        width: min-content;
        line-height: 1.1em;
    }
    
    /* 1 kolonne for postlister av avdelinger*/
    .postliste-avdelinger {
        display:flex;
        flex-direction:column;
    }
    .postliste-punkt-avdelinger {
        display:block;
    }
    
    /* Mobilmeny */
    .wp-block-navigation__container > li {
        font-size:28px !important;
        margin-bottom:15px;
    }
    .wp-block-navigation__submenu-container span {
        font-size:18px !important;
    }
    .wp-block-navigation__submenu-container {
    padding-right:31px !important;
    }
    
    /* Skalering av omslagsbildeblokker der skaleresmobilt er satt som ekstra klasse */
    .wp-block-cover.skaleresmobilt  {
        min-height:250px !important;
    }
    
    /* Bilder og tekstbryting */
    figure.wp-block-image{
        width: 100%;
    }
    .wp-block-image a img,
    .wp-block-image img {
        width: 100% !important;
    }
    
    /* Postlister */
    /*.postliste {
        grid-template-columns:repeat(2, 1fr);
    }*/
    .postliste,
    .postliste-avdelinger {
        grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
        column-gap:0.6em;
    }
}


/* Mobilvisning for ekstra smale skjermer (uvanlig) */
@media only screen and (max-width: 300px) {
    /* 1 kolonner for postlister*/
    .postliste-punkt:nth-child(n),
    .postliste-punkt-avdelinger:nth-child(n) {
        grid-column:1;
    }
}