/*
Theme Name: Twenty Twenty Child
Theme URL: https://dbjob.dk/
Description: Twenty Twenty Child Theme
Author: SR
Author URL: https://dbjob.dk/
Template: twentytwenty
Version: 1.0.8
Text Domain: twentytwenty-child
*/




/*
    generiske basis
    generiske
    top og footer
    leftwidget
    rightwidget
    indhold - forside
    jobsøgningsbox - simple
    jobsøgningsbox - advanced - jobagent box
    box til jobagent
    jobbox - liste af job efter søgning
    jobdetaljer
    Søgning med forslag
    jobrullator
    jobrotator


*/





/*******************************
*
*   generiske basis
*
*******************************/

:root {
    --dbjBasisBack: rgb(246,246,245);
    --dbjPrimary: rgb(109,111,100); /* brun */
    --dbjPrimarySecondary: white;
    --dbjSecondary: rgb(183,18,52);
    --dbjFooter: rgb(177,179,179);
    --dbjYellow: rgb(183,18,52);
    --dbjBokse: white;
    --dbjTxtPrimary: rgb(101,101,101);
    --dbjTxtSecondary: rgb(109,111,100);
    --contentWidth: 640px;
    --contentWiderWidth: 740px;
    --defaultFontSize: 1.3rem;
    --font-family: 'Roboto Slab', serif;
}

body.custom-background {
    background-color: var(--dbjBasisBack) !important;
}

body, input {
    font-family: var(--font-family);
    color: #58585a;
}



::placeholder {
    color:lightgray;
}
/*   body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote:before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
        color: rgb(88,88,90) !important;
    }
    
    .modal-menu a{
        padding-top: 1rem;
        padding-bottom:1rem;
    }
    
    
    
    @media (min-width:700px){
        .modal-menu > li > .ancestor-wrapper > a{
            padding-top: 1rem;
            padding-bottom:1rem;
        }
    }
    
    .primary-menu, .primary-menu .menu-item{
        margin-top:0 !important;
    }*/
/****************************************************
*
*              generiske
*
******************************************************/

h1 {
    font-size:2.4rem;
}
h2 {
    font-size: 2.1rem;
}
h3 {
    font-size: 1.8rem;
}


 #site-footer, .menu-modal, .menu-modal-inner, .search-modal-inner, .archive-header, .singular .entry-header, .singular .featured-media:before, .wp-block-pullquote:before {
    background-color: var(--dbjPrimary);
}
#site-header, .footer-nav-widgets-wrapper {
    background-color: var(--dbjPrimarySecondary) !important;
}

#site-footer {
    background-color: var(--dbjFooter) !important;
}

.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
    margin-top: 0;
}


/* links */
.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus)::first-letter, .wp-block-button.is-style-outline, a {
    color: var(--dbjPrimary) !important;
}

.modal-menu > li > .ancestor-wrapper > a {
    font-weight:normal;
    
}
.modal-menu li.current-menu-item > .ancestor-wrapper > a {
    text-decoration: none;
}

.dbj-margin {
    margin: 1em auto;
}

/* menu */
/*body:not(.overlay-header) .primary-menu > li > a, body:not(.overlay-header) .primary-menu > li > .icon, .modal-menu a, .footer-menu a, .footer-widgets a, #site-footer .wp-block-button.is-style-outline, .wp-block-pullquote::before, .singular:not(.overlay-header) .entry-header a, .archive-header a, .header-footer-group .color-accent, .header-footer-group .color-accent-hover:hover {
    color: rgb(42,131,126);
}*/
/* knapper i content */
button:not(.toggle), .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], .bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus, :root .has-accent-background-color, .comment-reply-link {
    /*color: rgb(42,131,126);*/
    background-color: var(--dbjPrimary) !important;
    border-radius: 5px;
    padding: 1em 1.7em;
    font-size: 1.2rem;
}

button:focus, button:hover, .button:focus, .button:hover, .faux-button:focus, .faux-button:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:focus, input[type="submit"]:hover {
    text-decoration:none;
}
/* ikoner og knapper i footer */
/*.social-icons a, #site-footer button:not(.toggle), #site-footer .button, #site-footer .faux-button, #site-footer .wp-block-button__link, #site-footer .wp-block-file__button, #site-footer input[type="button"], #site-footer input[type="reset"], #site-footer input[type="submit"] {
background-color: rgb(42,131,126);
color: white;
}*/


input[type="submit"] {
    text-transform: none;
    font-weight: normal;
}

.dbj_linkButton {
    background-color: var(--dbjPrimary);
    color: rgb(239,238,244) !important;
    padding: 0.8em 1.3em;
    text-decoration: none;
    border-radius: 5px;
}

.dbj_linkButton_Secondary {
    background-color: var(--dbjSecondary);
    color: rgb(239,238,244) !important;
    padding: 0.8em 1.3em;
    text-decoration: none;
    border-radius: 5px;
}

.dbjHeader {
    margin: 0 auto 20px;
    font-size: 3rem;
    text-align:center;
}

.dbj_headerBox {
    background-color: var(--dbjPrimary);
    width: 230px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    /*letter-spacing:1px;*/
}


.dbj_fullwidth_area {
    padding-top: 4rem;
}

.dbj_largebold {
    font-size: 18px;
    font-weight: 700;
}

.dbj_small_tm {
    margin-top:10px;
}


.dbj_whitebox {
    padding: 20px;
    background-color: var(--dbjBokse);
    font-size: 1.5rem;
}

    .dbj_whitebox input[type=email] {
        border-radius: 5px;
        padding: 1.1rem 0.8rem;
        font-size: 1.3rem;
    }
    .dbj_whitebox form div {
        padding-bottom:10px;
    }
    /*.dbj_fullwidth_area {
    width: 100%;
    max-width: 100%;
}*/
    /*.dbj_fullwidth_area .xentry-content > div {
    width: calc(100% - 8rem);
    max-width: 100%;
}*/
/****************************************************
*
*       top og footer
*
******************************************************/

.menu-item a, .footer-copyright a, .powered-by-wordpress a, .to-the-top {
    color: var(--dbjTxtSecondary) !important;
}

.primary-menu li.current-menu-item > a {
    text-decoration: none !important;
    color: var(--dbjYellow) !important;
}

    .toggle-inner .toggle-text {
        font-size: 1.8rem;
        font-weight:normal;
    }


@media (min-width: 1000px) {
    .header-toggles {
        display: none !important;
    }
}
/****************************************************
*
*       leftwidget
*
******************************************************/
.dbj_leftWidget {
    clear:both;
}

    /*------------media -------------*/
    @media only screen and (min-width: 1100px) {
        .dbj_leftWidget {
            float: right;
        }
    }
/****************************************************
*
*       rightwidget
*
******************************************************/

.dbj_rightWidget {
    margin: 1em auto;
}

/****************************************************
*
*       indhold - forside
*
******************************************************/
    /* billede i top */
    .dbj_searchBgImage {
        height: 370px;
        overflow: hidden;
    }
.dbj_searchBgImage img {
    width: 100%;
    min-width:1650px;
}
.dbj_searchBgImage .featured-media-inner {
    max-width: 100%;
    left: 0;
}


.dbj_searchBackgroundImage {
    height: 370px;
    background-position-x: center;
    background-size: cover;
    background-repeat-x: repeat;
    /*padding-top: 78px;*/
    display: flex;
    align-items: center;
}


/****************************************************
*
*       jobsøgningsbox - simple
*
******************************************************/


/* den omgivende div */
.dbj_jobSearchBox {
    margin: 0 auto;
    width: var(--contentWidth);
    background-color: var(--dbjPrimary);
    padding: 20px;
    /*opacity: 0.95;*/
    border-radius: 5px;
    min-height:121px;
}

    .dbj_jobSearchBox form {
        display: flex;
        column-gap: 10px;
        justify-content: space-between;
    }

        .dbj_jobSearchBox form > div {
            flex-grow:1;
        }
            .dbj_jobSearchBox form > div:last-of-type {
                flex-grow: unset;
            }

/* søgeknappen */
.dbj_jobSearchBox form input[type="submit"] {
    background-color: var(--dbjSecondary) !important;

}


    .dbj_jobSearchBox input[type="text"] {
        border-radius: 5px;
        padding: 1.1rem 0.8rem;
        font-size: 1.3rem;
        
    }

.dbj_miniTxt, .dbj_miniTxt a {
    font-size: 1.2rem;
    color: var(--dbjBokse) !important;
    text-align: left;
}
    .dbj_miniTxt a {
        text-decoration:none;
    }

.dbj_faneblad {
    position: relative;
    top:-20px;
}
    .dbj_faneblad > div {
        position: absolute;
        bottom:0;
        display: flex;
        column-gap: 5px;
    }

    .dbj_faneblad .dbj_faneblad_active {
        padding: 10px 20px;
        border-radius: 5px 5px 0 0;
        background-color: var(--dbjPrimary);
        cursor:pointer;
    }

    .dbj_faneblad .dbj_faneblad_inactive {
        padding: 10px 20px;
        border-radius: 5px 5px 0 0;
        background-color: var(--dbjBokse);
        /*opacity: 0.8;*/
        color: black;
        cursor: pointer;
    }

.dbj_faneomr_js {
    position:relative;
}

    .dbj_faneomr_js .dbj_absolute {
        position: absolute;
        background-color: var(--dbjPrimary);
        width: var(--contentWidth);
        padding: 0px 20px 20px;
        left: -20px;
        border-radius: 5px;
    }
/*------------media -------------*/
@media only screen and (max-width: 640px) {
    .dbj_jobSearchBox {
        width: 100%;
    }
    .dbj_jobSearchBox form {
        flex-direction:column;
    }
}


/****************************************************
*
*       jobsøgningsbox - advanced
*       jobagent box
*
******************************************************/

.dbj_boxtype_advanced, .dbj_jobagentBox {
    padding: 20px;
    width: 230px;
    border-radius: 5px;
}

.dbj_boxtype_advanced {
    background-color: var(--dbjPrimary);
    text-transform: uppercase;
    /*letter-spacing:1px;*/
    font-weight: 700;
}


    /* søgeknappen */
    .dbj_boxtype_advanced form input[type="submit"] {
        background-color: var(--dbjSecondary) !important;
    }


    .dbj_boxtype_advanced input[type="text"] {
        border-radius: 5px;
        padding: 1.1rem 0.8rem;
        font-size: 1.3rem;
    }

    .dbj_boxtype_advanced form {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 10px;
    }

    .dbj_boxtype_advanced form > div {
        width: 100%;
    }

    .dbj_boxtype_advanced header {
        font-size: var(--defaultFontSize);
        width: 100%;
        text-align: center;
        color: var(--dbjBokse);
    }

/*------------media -------------*/
@media only screen and (max-width: 1100px) {
    .dbj_boxtype_advanced, .dbj_jobagentBox {
        width: 100%;
        max-width: var(--contentWiderWidth);
        margin: 0 auto;
    }
    .dbj_boxtype_advanced header {
        display: none;
    }

    .dbj_boxtype_advanced form {
            flex-direction: row;
            justify-content:center;
    }
       
}
@media only screen and (max-width: 400px) {
        .dbj_boxtype_advanced form {
            flex-direction: column;
        }
}

/****************************************************
*
*       box til jobagent
*
******************************************************/

.dbj_jobagentBox {
    background-color: var(--dbjYellow);
}
        
/****************************************************
*
*       jobbox - liste af job efter søgning
*
******************************************************/
.dbj_joblist_main {
    display: flex;
    justify-content: center;
    gap: 20px;
}

    .dbj_joblist_main >div {
        flex:1;
    }

.dbj_jobJobliste {
    margin: 1em auto;
    width: var(--contentWiderWidth);
}


.dbj_jobbox {
    display:flex;
    margin-bottom:20px;
}

.dbj_jobbox div {
    background-color: var(--dbjBokse);
    
}

    /* logo */
.dbj_joblogo {
    padding: 20px;
    min-width: 150px;
    order: 2;
    /*background-color: red !important;*/
    flex-basis: content;
}
    .dbj_joblogo img{
        max-width:110px; /*dbj_joblogo - padding */
    }

    /* jobindhold */
.dbj_jobbet {
    flex-grow: 1;
    font-size: 1.3rem;
    padding: 20px;
}

    .dbj_jobbet div {
        margin-bottom:15px;
    }

    

.dbj_jobHeadline a{
    text-decoration: none;
    text-transform: uppercase;
    color: var(--dbjTxtPrimary) !important;
    font-weight: bold;
}

.dbj_jobHeadline {
    display:block;
    font-size:1.7rem;
}

.dbj_paginationNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dbj_paginationNavigation .dbj_nav {
        width: 40px;
    }

    .dbj_paginationNavigation .cls-1 {
        fill: #fff;
    }

    .dbj_paginationNavigation .cls-1, .cls-2 {
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 2.13px;
    }
    .dbj_paginationNavigation .cls-2 {
        fill: none;
    }

/*------------media -------------*/
@media only screen and (max-width: 1100px) {
    .dbj_joblist_main, .dbj_jobbox {
        /*background-color: red;*/
        flex-direction: column;
    }

    .dbj_joblist_main {
        align-items: stretch;
    }

    
}
@media only screen and (max-width: 640px) {
    

    .dbj_jobJobliste {
        width: 100%;
    }
}

/****************************************************
*
*       jobdetaljer
*
******************************************************/

.dbj_jobdetails {
    padding: 20px;
    background-color: var(--dbjBokse);
    font-size: 1.3rem;
}

    .dbj_jobdetails .dbj_jobdetailsLogo {
        margin: 20px 0;
        max-height: 200px;
        height: 80px
    }
/****************************************************
*
*       Søgning med forslag
*
******************************************************/
.suggestionsList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .suggestionsList li {
        margin:unset;
    }

    .suggestionsList li a {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
    }

    .suggestionsList li {
        display: none;
    }

        .suggestionsList li a:hover:not(.header) {
            background-color: #a5a3a3;
        }
/************/
    .autocomplete {
        /*the container must be positioned relative:*/
        position: relative;
        display: inline-block;
    }
.autocomplete-items {
    font-size: 1.3rem;
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    text-align:left;
}
    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

    .autocomplete-items div:hover {
        /*when hovering an item:*/
        background-color: #e9e9e9;
    }
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #82a6a0 !important;
    color: #ffffff;
}


/****************************************************
*
*       jobrullator
*
******************************************************/

.dbj_jobrullator a {
    text-decoration:none;
}

.dbj_jobrullator .item {
    height: 210px;
    width: 250px;
    background-color: white;
    padding: 20px;
}
    .dbj_jobrullator .item > div {
        overflow: hidden;
        height: 170px;
    }

.dbj_jobrullator .item a {
    color: var(--dbjTxtPrimary) !important;
    text-transform: uppercase;
}

    .dbj_jobrullator .item img {
        max-height:70px;
        width:auto;
        max-width:210px;
    }
    
/****************************************************
*
*       jobrotator
*
******************************************************/
#jobrotator {
max-width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#jobrotator2 > div {
    margin: 0 0 20px;
    width: 230px;
    padding: 20px;
    background-color: white;
}
#jobrotator2 a {
    text-decoration:none;
}
#jobrotator2 img {
    margin:0 auto;
}