/*
Theme Name: DIGITAL HOUSE BOARD 
Author: Portalworks
Version: 1.0.1
*/
/***********************************
              FONTS
***********************************/

/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/poppins-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/poppins-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/***********************************
            ROOT
***********************************/

:root {
    --font-primary: "Poppins", sans-serif;
    --primary-color: #1E1E1E;
}

/***********************************
        PRE-DEFINED
***********************************/

a{
    text-decoration: none;
    color: var(--primary-color);

    &:hover{
        color: var(--primary-color);
    }

    &:focus{
        color: var(--primary-color);
    }
}

.brlbs-cmpnt-container img{
	max-width: 135px !important;
}

#BorlabsCookieEntranceA11YHeadline{
	font-size: 14px;
}

.container {
    --bs-gutter-x: 2.5rem;
}

ul{
    padding-left: 24px;
}

.section-404{
	min-height: 400px;
}

#wp-admin-bar-wp-logo, #wp-admin-bar-comments{
    display: none !important;
}

.btn{
    margin-top: 50px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #3D3D3D1A;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;

    &:hover{
        background: #3D3D3D1A;
        color: var(--primary-color);
    }
}

.editor{

    & a{
        color: var(--primary-color);
        text-decoration: underline;

        &:hover{
            color: var(--primary-color);
        }

        &:focus{
            color: var(--primary-color);
        }
    }

    & h1, h2, h3, h4, h5, h6{
        margin-bottom: 24px;
        font-size: 24px;
        line-height: 1.5;
        font-weight: 700;
    }

    & img{
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        border-radius: 10px;
        margin-bottom: 40px;
    }

    .wp-caption{
        margin-bottom: 40px;
        max-width: 100%;
        height: auto;
        width: auto;

        & img{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0px;
        }
    }

    & p, ul, ol{
        font-size: 18px;
        line-height: 1.5;
        color: var(--primary-color);
        margin-bottom: 40px;

        &.wp-caption-text{
            background: #3D3D3D1A;
            font-size: 14px;
            padding: 14px 20px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            text-transform: uppercase;
            margin: 0px;
        }

        &:last-child{
            margin-bottom: 0px;
        }
    }

    &.editor2{

        & p, ul, ol{
            margin-bottom: 24px;
        }

        & li{
            margin-bottom: 0px;
        }
    }
}

/***********************************
        BODY AND HTML
***********************************/

body{
    font-family: var(--font-primary);
    color: var(--primary-color);
}

/***********************************
        HEADER
***********************************/

header{
    min-height: 67px;

    & .img-box{
        height: 27px;
        width: 175px;
        display: inline-block;
        
        & img{
            max-width: 100%;
            max-height: 100%;
            height: auto;
            width: auto;
            object-fit: contain;
        }
    }

    & .img-home-box{
        width: 27px;
        height: 27px;
        right: calc(var(--bs-gutter-x) * .5);
        top: 50%;
        transform: translateY(-50%);

        & img{
            max-width: 100%;
            max-height: 100%;
            height: auto;
            width: auto;
            min-height: 27px;
            object-fit: contain;
        }

        & .text{
            font-size: 18px;
            font-weight: 500;
            padding-left: 10px;
        }
    }
}

/***********************************
        HERO
***********************************/

.hero-section{

    & .text-block{
        min-height: 100px;
        z-index: 2;
        color: #fff;
        font-size: 20px;
        letter-spacing: -0.6px;
        font-weight: 700;
        border-radius: 10px;

        & .text{
            z-index: 3;
            max-width: 960px;
        }
    }

    & .background-overlay{
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #3D3D3DCC;
        z-index: 1;
        border-radius: 10px;
    }

    & .img-box{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;

        & img{
            object-fit: cover;
            width: 100%;
            height: 100%;
            border-radius: 10px;

            &.first-image{
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    &.hero-single{

        & .background-overlay{
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        & .img-box{

            & img{
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        & .image-second{

            & img{
                border-top-right-radius: 0;
                border-top-left-radius: 0;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }
    }
}

/***********************************
        NEWS 
***********************************/

.news-section{
    padding-top: 30px;
    padding-bottom: 70px;

    & a{

        & .text-block{
            padding-top: 20px;
            padding-bottom: 20px;
            border-top: 1px solid #EBEAEA;

            & .text{
                font-weight: 400;
                line-height: 1.3;
                font-size: 20px;
            }
        }

        &:first-child{

            & .text-block{
                border-top: none;
            }
        }
    } 
}

/***********************************
        SINGLE BLOCK
***********************************/

.news-single-section{
    padding-top: 50px;
    padding-bottom: 70px;
}

/***********************************
        FOOTER
***********************************/

footer{

    & .content-box{
        border-top: 1px solid #EBEAEA;
        padding-top: 10px;
        padding-bottom: 12px;

        & .rights-text{
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        & ul{
            gap: 10px;
            list-style-type: none;
            font-size: 14px;
            font-weight: 500;
        }
    }
}

/***********************************
        RESPONSIVE
***********************************/

@media only screen and (min-width: 568px){
	
	.brlbs-cmpnt-container img{
		max-width: 100% !important;
	}

	#BorlabsCookieEntranceA11YHeadline{
		font-size: calc(var(--dialog-font-size)*1.5);
	}
}

@media only screen and (min-width: 992px){
/****************
    PRE-DEFINED
****************/
    .container {
        --bs-gutter-x: 1.5rem;
    }

    .btn{
        margin-top: 100px;

        &:hover{
            background: var(--primary-color);
            color: #fff;
        }
    }
	.section-404{
		min-height: 600px;
	}
/****************
    HEADER
****************/
    header{
        min-height: 107px;

        & .img-box{
            height: 44px;
            width: 280px;
        }

        & .img-home-box{
            right: unset;
            left: 50%;
            top: 50%;
            width: 44px;
            height: 44px;
            transform: translate(-50%, -50%);

            & img{
                max-width: 100%;
                max-height: 100%;
                height: auto;
                width: auto;
                min-height: 44px;
                object-fit: contain;
            }
        }
    }
/****************
    HERO
****************/

    .hero-section{

        & .text-block{
            min-height: 330px;
            font-size: 32px;
            letter-spacing: -1px;
        }
		
		&.preview-home-page{
			
			& .text-block{
				min-height: 200px;
			}
		}

        &.hero-single{

            & .text-block.image-second{
                min-height: 500px;
            }
        }
    }

/****************
    NEWS
****************/

    .news-section{
        padding-top: 100px;
        padding-bottom: 100px;

        & a{

            & .text-block{
                padding-top: 37px;
                padding-bottom: 37px;

                & .text{
                    font-size: 28px;
                }
            }
        }
    }

/****************
    FOOTER
****************/

    footer{
        
        .content-box{
            padding-top: 30px;
            padding-bottom: 45px;
        }
        
        ul{
            gap: 10px;
            list-style-type: none;
            font-size: 14px;
        }
    }
}

@media only screen and (min-width: 1400px){
/****************
    PRE-DEFINED
****************/
    .container{
        max-width: 1144px;
    }

    .container-header{
        max-width: 1304px;
    }

    .container-hero{
        max-width: 1444px;
    }
}