/*
Theme Name: Elkomnettheme
Author: Matko Bajan
Description: Elkomnettheme is a theme for Elkomnet website
Requries at least : 6.4.1
Tested up to: 7.2
Requires PHP: 7.2
Version: 1.0
Lincese: GNU General Public Lincense v2 OR LATER
lICENSE uri: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: Elkomnettheme
Tags: */

/* Osnovno uređivanje ************************************/
*{
    padding:0;
    margin: 0;
    scroll-behavior: smooth;
}

.vijest-p{
  max-width:360px;
}
body {
    box-sizing: border-box;
    background-image: url('slike/background.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    font-size: 1em;
}

ul,li{
    list-style-type: none;
}

a{
    display: block;
    text-decoration: none;
    color:rgba(30, 30, 30);
}

a:hover{
    cursor:pointer;
}

img{
    display: block;
}


.container{
    max-width:1200px;
    margin:0 auto;
}
@font-face {
    font-family: 'SourceSans3';
    src: url('fonts/SourceSans3.ttf') format('truetype');
}

@font-face {
    font-family: 'SourceSans4';
    src: url('fonts/SourceSerif4.ttf') format('truetype');
}

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist.ttf') format('truetype');
}

/* Navbar */

.navbar{
    max-width: 1202px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:80px;
    background: url('slike/background.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    position: sticky;
    top: 0;
    opacity: 1;
    z-index: 3;
    
}

#n-mob{
    display: none;
}

.menu{
    display:flex;
    gap:10px;
}

.menu>li>a, .dropdown-menu>li>a{
    padding:10px;
}

.menu>li>a:hover, .dropdown-menu>li>a:hover{
    color:rgba(13, 100, 176);
}

.dropdown>a{
    display: flex;
    align-items: center;
    gap:5px;
    
}

.dropdown-menu{
    display: none;
    position: absolute;
    background: rgba(250, 250, 250);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
    width:200px; 
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dropdown:hover .dropdown-menu, .dropdown-menu:hover .dropdown-menu{
    display:block;
}

.contact-p{
    width:177px;
    text-align: right;
}

.btn{
    display: inline-block !important;
    background: rgba(13, 100, 176) !important;
    padding: 7px 37px !important;
    border: 1px solid rgba(13, 100, 176) !important;
    border-radius: 10px !important;
    color: rgba(250, 250, 250) !important;
    font-size: 0.875em !important; 
    font-family: 'Geist', sans-serif !important;   
}

.btn:hover{
    background: rgba(250, 250, 250) !important;
    transition: background 0.1s ease-in-out !important;
    color: rgba(13, 100, 176) !important;
}

/* Prva sekcija *****/

.prsi{
    max-width: 860px;
    margin:80px auto 120px auto;
    font-family: 'SourceSerif4', serif;
    font-size:1.375em;
    text-align: center;
    position: relative;
}

.prsi::before, .single::before, .poveznice-links:before, .naslov-svevijesti:before{
    content: '';
    height: 1px;
    width: 100px;
    background: rgba(13, 100, 176, 0.5);
    position: absolute;
    left:50%;
    margin-top:-50px;
    transform: translateX(-50%);
}

.prsi>p{
    margin:0;
    line-height: 2.75em;
}

.prsi-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:30px;
    margin-top: 60px;
}

.prsi-link:hover .darrow{
    margin-left:30px;
    transition: margin-left 0.3s ease-in-out;
}

/* Vijesti ******************************************/

.vijesti::before, .doc::before, .onama::before, .onama-kontakt::before{
    content: '';
    height: 1px;
    width: 100px;
    background: rgba(13, 100, 176, 0.5);
    position: absolute;
    left:50%;
    margin-top:-60px;
    transform: translateX(-50%);
}

.vijesti{
    margin-bottom: 120px;
    scroll-margin-top: 100px;
}

.sekcijah1{
    font-family: 'SourceSans3', sans-serif;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 60px;
}

.vijesti-container{
    display: flex;
    justify-content: space-between;
}

.vijest-pic-link{
    width:360px;
    overflow: hidden;
    border-radius: 10px;
    border:1px rgb(30, 30, 30, 0.1) solid;
}

.vijest-pic{
    margin: 0 auto;
    max-width: 100%;
    height:240px;
    object-fit: contain;     
}

.vijest-p:hover .vijest-pic{
    transform: scale(1.03);
    transition: transform 0.5s ease;
    transform-origin: left top;
}

.date{
    font-family: 'SourceSans3', sans-serif;
    font-size: 0.75em;
    font-weight: 600;
    text-align: center;
    padding: 5px 0 10px 0;
}

#date{
    position: relative;
    display: inline-block;
}

#date::before,
#date::after {
    content: '';
    height: 2px;
    width: 20px;
    background: rgba(13, 100, 176, 0.8);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#date::before {
    left: -30px; 
}

#date::after {
    right: -30px;
}

.vijest-title-link h1{
    font-family: 'SourceSans3', sans-serif;
    font-size:1.125em;
    font-weight: 600;
    text-align: center;
}

.sve-vijesti-p{
    text-align: center;
    margin-top: 30px;
}

/* Dokumenti *************************************************/
.doc{
    margin-bottom: 120px;
    scroll-margin-top: 100px;
}

.doc-container{
    display: flex;
    gap:60px;
}

.doc-link{
    display: flex;
    position: relative;
    align-items: center;
    background:  rgba(13, 100, 176);
    padding:20px;
    border-radius: 10px;
    width: 100%;
}

.doc-link:hover .doc-img>img{
    transform: scale(1.1);
    transition: transform 0.3s ease-in;
}

.doc-link:hover .doc-info div img{
    margin-left: 20px;
    transition: margin-left 0.3s ease-in;
}

.doc-link:hover .doc-info div p{
    margin-left: 15px;
    transition: margin-left 0.3s ease-in;
}

.doc-img {
    flex: 1;
    max-width: 33.33%;
}

.doc-img img{
    padding-left: 20px;
    height:36px;
}

.doc-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'SourceSans3', sans-serif;
    color:rgba(250, 250, 250);
}

.doc-info h3{
    font-size: 1.125em;
    font-weight: 600;
}


.doc-info div{
    display: flex;
    align-items: center;
    margin-top: 5px;
    font-size:0.875em;
    justify-content: center;
}

.doc-info div img{
    margin-left:5px;
    height: 16px;
}


/* Onama-Kontakt ************************************/

.onama-kontakt{
    display: flex;
    justify-content: space-between;
    gap:60px;
    margin-bottom: 60px;
}

.onama, .kontakt{
    flex:1;
    max-width: calc(50% - 30px);
    justify-content: center;
    text-align: center;
    scroll-margin-top: 100px;
}

.wpforms-container{
    margin:0 !important;
}

.onama p, .wpforms-field-label{
    font-family: 'SourceSans3', sans-serif;
    font-size: 1.125em;
    line-height: 1.83;
}

.wpforms-field-label{
    font-weight: 600;
}

#wpforms-38-field_1-container, #wpforms-38-field_2-container{
    padding:0;
}

/* Footer ********************************************/

footer{
    display: flex;
    justify-content: space-between;
    font-family: 'SourceSans3', sans-serif;
    font-size: 1em;
    border-top: 1px solid rgba(13, 100, 176, 0.5);
}

footer section{
    margin:30px 0 !important;
}

footer section p{
    margin-top: 10px;
}

.logo{
    text-align: center;
}

.logo a img{
    margin:0 auto;
}

.logo p{
    font-size: 0.875em;
}

.last{
    text-align: right;
}

/* Single.php *******************************************/

.single{
    display:flex;
    margin-top: 80px;
    margin-bottom: 60px;
}

.main-single {
    font-family: 'SourceSans3', sans-serif;
    flex: 9;
    min-width: 0; /* helps with text overflow/shrink issues */
}

.aside {
    font-family: 'SourceSans3', sans-serif;
    flex: 3;
    margin-left:40px;
    padding-left: 39px;
    border-left: 1px solid rgba(13, 100, 176, 0.5);
    min-width: 0;
    margin-bottom:20px;
}

.main-single h1{
    
    font-size:1.875em;
    text-align: center;
}

.date-single{
   
    margin-top: 10px;
    text-align: center;
}

.social-sharing{
    margin-top: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    font-size: 1.125em;
}

.social-sharing img{
    height: 22px;
}


.single-link-pic{
    position: relative;
    margin-top:20px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border:1px rgba(13, 100, 176, 0.8) solid;
}



.eye{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 30, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eye img{
    height:64px;
}

.single-link-pic:hover .eye{
    opacity: 1;
    transition: opacity 0.3s ease;
}

.single-mainpic{
    max-width: 100%;
    margin:0 auto;
    object-fit: contain;
}

.caption{
    position: absolute;
    bottom:0;
    left:0;
    margin-top:5px;
    display: flex;
    gap:8px;
    align-items: center;
    background: rgba(13, 100, 176, 0.5);
    padding: 5px 22px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 7px;
}

.caption img{
    height:18px;
    margin-bottom: 1px;
}

.image-caption{
    font-family: 'Geist', sans-serif;
    font-size: 0.875em;
    font-weight: 500;
    color: rgba(255,255,255);
}

.post-content{
    margin-top:20px;
    font-size: 1.125em;
}

.post-content p, .post-content ul{
    margin-bottom: 20px;
}

.wp-caption{
    max-width: 100%;
    overflow: hidden;
}
.wp-caption img{
    max-width: 100%;
    max-height: 597.33px;
    margin: 0 auto;
    object-fit: contain;
}

.wp-caption-text{
    margin-top: -40px;
}

.post-content p img{
    max-width: 100%;
    max-height: 597.33px;
    margin: 0 auto;
    object-fit: contain;
}

.post-content .file-link{
    margin-top: 20px;
}

.file-link {
    background: rgba(250, 250, 250);
    display: flex;
    align-items: center;
    border:1px solid rgba(13, 100, 176);
    border-radius: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.file-link:hover{
    background: rgba(13, 100, 176);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    cursor: pointer;
}

.file-link:hover a{
    color:rgba(250, 250, 250);
    transition: color 0.3s ease-in-out;
}

.file-link:last-of-type{
    margin-bottom: 0;
}

.file-link a{
    color:rgba(13, 100, 176);
    margin-top: 3px;
    width: 100%;
    padding: 8px 8px 8px 3px;
    text-decoration: none;
}

.pdf-style img, .doc-style img, .xlsx-style img, .docx-style img, .doc-style img, .xls-style img, .csv-style img, .zip-style img, .odt-style img {
    width:26px !important;
    height: 26px !important; 
    margin:0 10px 0 0;
    margin-left: 3px;
}

.najnovije{
    position: sticky;
    top:80px;
}

.najnovije h2{
    font-size:1.5em;
    margin-bottom: 20px;
    text-align: center;
}

.najnovije ul li{
    border: 1px solid rgb(30, 30, 30, 0.1);
    border-radius: 10px;
    margin-bottom: 20px;
}

.najnovije ul li:hover{
    box-shadow: 0 0 5px #888888;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.najnovije ul li a{
    padding:15px;
}

.najnovije>ul>li>a>.date-single>#date-single{
    font-size: 0.875em;
}

.najnovije-single-naslov{
    font-weight: 500;
    text-align: center;
}

.najnovije ul li:hover .najnovije-single-naslov{
    color: rgba(13, 100, 176)
}

/* Poveznice ******************************/

.poveznice-links{
    display: inline-block;
    margin-top: 80px;
    color: rgba(30, 30, 30);
    font-family: 'Geist',sans-serif;
    font-weight: 500;
    font-size: 0.875em;
}

.poveznice-links a{
    display:inline-block;
}

#poveznice-content{
    margin-top:30px !important;
    min-height: 540px;
}

/* sve-vijesti ******************************/

.grid-3{
    display:grid;
    column-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 30px;
}
.naslov-svevijesti{
    margin-top: 80px;
}

.sve-vijesti{
    min-height:530px;
}

.pagination{
    margin: 0 0 30px 0;
    grid-column: span 3;
}

.pagination a, .pagination span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
}

.page-numbers{
    background-color: rgba(13, 100, 176);
    border:1px solid rgba(13, 100, 176);
    border-radius: 1px;
    color:rgba(255,255,255);
}

.page-numbers:hover{
    background-color: rgba(255,255,255);
    color: rgba(13, 100, 176);
}

.current{
    color:white;
    background-color:rgba(13, 100, 176);
}

/* Tablet */

@media (max-width:1200px)  {

    body{
        margin: 0 30px;
    }
	
	body, .navbar{
		background-position:center -10px;
	}
    
    .navbar, .prsi, .vijesti-container{
        max-width: 100%;
    }
    
    .navbar{
        max-width: calc(100% + 2px);
    }

    #n-desktop{
        display: none;
    }

    #n-mob{
        display: flex;
    }

    #menu-mob{
        position: absolute;
        top:80px;
        font-family: 'Geist', sans-serif;
        font-weight: 500;
        display: none;
        width: 100%;
        background: rgba(250, 250, 250);
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    #menu-mob>li{
        padding:10px;
        text-align: center;
    }

    .menu-p img{
        height: 36px;
    }

    .sekcijah1{
        margin-bottom: 30px;
    }

    .vijesti-container{
        justify-content: center;
    }

    .vijest-p:nth-of-type(2), .vijest-p:nth-of-type(3) {
    display: none;
    }

    .doc-container{
        flex-direction: column;
    }
    
    .doc-link{
        width: 100%;
        margin: 0 auto;
        padding: 20px 0;
    }
	
	.doc-info{
		width:200px;
	}
	
	.doc-info h3 {
		font-size: 1em;}
	
	.doc-img img {
		height: 34px;}

    .onama-kontakt{
        flex-direction: column;
    }

    .onama, .kontakt{
        max-width: 100%;
    }

    .sve-vijesti-p{
        display: block !important;
        grid-column: span 3;
    }

    .vijest-pic-link{
        margin:0 auto;
        width: 99% !important;
    }
    
    .vijest-pic {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .pagination{
        margin: 0 auto;
    }

    .pagination{
        margin-bottom: 30px;
    }

    .single{
        display: block;
    }

    .wp-caption-text{
        margin-top: -20px;
    }

    .aside{
        margin-left: 0;
        padding-left: 0;
        border-left:0;
    }

    footer{
        display: block;
        text-align: center;
    }

    .last{
        text-align: center;
    }

    .vijest-pic-link{
        width: 100%;
        height: 100%;
    }
    
    .prsi>p{
        line-height: 2em;
    }
	
	.file-link a {
    padding: 8px 8px 8px 3px;
    font-size: 0.875em;
}