/*
Theme Name: Janez Polc 2025
Theme URI: https://janezpolc.si
Author: Janez Polc
Author URI: https://janezpolc.si
Description: Wordpress tema za spletno stran Janeza Polca.
Version: 1.0
Text Domain: jp
*/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
	--fs1: 10px;
	--fs2: 14px;
	--fs3: 18px;
	--fs4: 36px;
	--fs5: 72px;
	--e0: 5px;
	--e1: 10px;
	--e2: 15px;
	--e3: 30px;
	--e32: 60px;
	--e4: 90px;
	--e5: 180px;
	--e6: 360px;
	--fw1: 400;
	--fw2: 500;
	--fw3: 600;
	--fw4: 700;
	--b_c: #f3f3f3;
	--t_c: #a03052;
}

*{
	box-sizing: border-box;
}

::-moz-selection { /* Code for Firefox */
  color: var(--l_c);
  background: var(--p_c);
}

::selection {
   color: var(--l_c);
  background: var(--p_c);
}

*:focus {
	 outline: none !important;
 border: none; 
     box-shadow: 0 0 0px 4px var(--p_c);
}

 body{
	font-family: "Instrument Sans",Arial, Arial, Helvetica, sans-serif;
	font-weight: 100;
	background-color: var(--l_c);
	color: var(--d_c);
	font-size: var(--fs2);
	line-height: 1.5;
	letter-spacing: .05em;
}

html, body{
	margin:0;
	padding:0;
}

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

.mt1{	margin-top: var(--e1) }
.mt2{	margin-top: var(--e2) }
.mt3{	margin-top: var(--e3) }
.mt4{	margin-top: var(--e4) }
.mt5{	margin-top: var(--e5) }
.mt6{	margin-top: var(--e6) }

.mb1{	margin-bottom: var(--e1) }
.mb2{	margin-bottom: var(--e2) }
.mb3{	margin-bottom: var(--e3) }
.mb4{	margin-bottom: var(--e4) }
.mb5{	margin-bottom: var(--e5) }

.pt1{	padding-top: var(--e1) }
.pt2{	padding-top: var(--e2) }
.pt3{	padding-top: var(--e3) }
.pt4{	padding-top: var(--e4) }
.pt5{	padding-top: var(--e5) }

.pb1{	padding-bottom: var(--e1) }
.pb2{	padding-bottom: var(--e2) }
.pb3{	padding-bottom: var(--e3) }
.pb4{	padding-bottom: var(--e4) }
.pb5{	padding-bottom: var(--e5) }


.t_c{ color: var(--t_c)}
.t_b{ background-color: var(--t_c)}
/*type*/

.fs1{ font-size: var(--fs1) }
.fs2{ font-size: var(--fs2) }
.fs3{ font-size: var(--fs3) }
.fs4{ font-size: var(--fs4) }
.fs5{ font-size: var(--fs5) }

.fw1{ font-weight: var(--fw1) }
.fw2{ font-weight: var(--fw2) }
.fw3{ font-weight: var(--fw3) }
.fw4{ font-weight: var(--fw4) }




.source-sans-100{
	font-family: "Instrument Sans", Arial, Arial, Helvetica, sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}

.source-sans-100-italic{
	font-family: "Instrument Sans", Arial, Arial, Helvetica, sans-serif;
	font-weight: 100;
	font-style: italic;
}

/*
layout
*/


.container{
	display: block;
	width:100%;
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	position:relative;
	padding-left:var(--e4);
	padding-right:  var(--e4);
}


.fullscreen{
	width: 100%;
	height: 100vh;
	 height: 100dvh; /* Dynamic viewport height */
}

.narrow{
	width:75%;
}
.narrower{
	width:50%;
}


.grid{
	display: grid;
	grid-gap: var(--e4);
	grid-template-columns: 1fr 1fr  1fr 1fr ;
}

.columns-2{
	grid-template-columns: 1fr 1fr  ;
}
.columns-3{
	grid-template-columns: 1fr 1fr  1fr ;
}
.columns-4{
	grid-template-columns: 1fr 1fr  1fr  1fr ;
}

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

.alignright{
	text-align:right;
}

.framed{
	padding: var(--e3);
	background:var(--l_c);
	/*
	box-shadow: var(--e1) var(--e1) var(--e2) rgba(0,0,0,.09)
	*/
}

.relative{
	position:relative;
}

.povezava-naprej {
	font-weight: var(--fw2);
	color: var(--d_c);
	padding: 0;
	font-size: var(--fs4);
	height: var(--e3);
	display:inline-block;
	line-height: var(--e3);
	vertical-align: top;
	
}


.povezava-naprej:after {
	pointer-events:none;
	content:' ';
	transform: rotate(0);
	background-image:url('svg/puscica2.svg');
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: var(--e3);
	height: var(--e3);
	font-size: var(--fs3);
	line-height: var(--fs3);
	display: inline-block;
	vertical-align: top;
	margin-left: var(--e2)
}

.bt:before{
	display: block;
	width: 100%;
	height:0px;
	content: ' ';
	border-top: 1px solid var(--d_c);
}

.gumb_cta{
	display: block;
	font-size: var(--fs4);
}

.gumb_cta:after{
	pointer-events:none;
	content:' ';
	background-image:url('svg/puscica2.svg');
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: var(--e3);
	height: var(--e3);
	font-size: var(--fs3);
	line-height: var(--fs3);
	display: inline-block;
	vertical-align: top;
	margin-left: var(--e2)
}

/*type*/

.uppercase{
	text-transform:uppercase;
}

h1,h2,h3,h4,h5{
	letter-spacing: .05em;
	line-height:1.15;
	
}

.teksti {
	font-size: var(--fs3);
}
.teksti p,
.teksti li,
.teksti ul {
	margin-bottom: var(--e2);
}

.teksti strong{
	font-weight: var(--fw3);
}

.teksti ul{
	list-style-type: "-";
	padding-left: var(--e4);
	padding-left: var(--e4);
}
.teksti ul li{
	padding-left:var(--e1)
}

.teksti h2,
.teksti h3,
.teksti h4{
	
	margin-bottom: var(--e2);
	font-weight: var(--fw3);
}

.teksti h2:first-child,
.teksti h3:first-child,
.teksti h4:first-child{
padding-top:0
}

.teksti h2{
		font-size: var(--fs4);
}
.teksti h3{
		font-size: var(--fs3);
}
.teksti h4{
	font-size: var(--fs3);
}

.teksti a{
	color: var(--d_c);
}


.teksti a:hover{
	color: var(--p_c);
}
 
/*header*/

.page-header{
	top:0;
	right:0;
	left:0;
	position:absolute;
	/*background-color: var(--l_c);*/
	font-size:0;
	z-index:2;
}

.header-frame{
	text-align:right;
	font-size:0;
	position:relative;
}


.logo{
	position:absolute;
	top:0;
	left:var(--e4);
	margin-top: 21px;
	display: inline-block;
	text-align:left;
}

.site-logo{
	height: var(--e3);
	width:auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--e1);
}

.site-title{
	display: inline-block;
	vertical-align: middle;
	font-size: var(--e2);
	line-height: var(--e2);
	font-weight: var(--fw1);
	letter-spacing: .05em;
}

.site-title a{
	color: var(--d_c):
	
}

.page-header.glava-front {
	position: relative;
}

.glava-front .logo{
	position: absolute;
	bottom: var(--e4);
	left: var(--e4);
	right: var(--e4);
	top:auto;
	width: auto;
	box-sizing: border-box;
}

.glava-front .site-title{
	font-size: var(--e4);
	line-height: var(--e4);
	font-weight: var(--fw3);
	width:auto;
	
}

.glava-front .site-logo{
	height: var(--e5);
	margin-right: var(--e3);
	width:auto;
	display: block;
	margin-bottom: var(--e3);
	vertical-align: middle;
}

/*navigacija*/

.main-navigation{
	
	width:100%;
	height:0vh;
	overflow:hidden;
	position:fixed;
	z-index:100;
	text-align:left;
	background-color:var(--l_c);
	box-sizing: border-box;
	font-size:0;
}

.main-navigation .menu-glavni-si-container{
	width:100%;
}

.main-navigation.menu_odprt{
		height:100vh;
		 height: 100dvh; /* Dynamic viewport height */
}

.main-navigation ul {
	width:100%;
	display: grid;
	grid-gap: var(--e4);
	grid-template-columns: 1fr 1fr  1fr 1fr ;
	font-size:0;}

.main-navigation ul li{
	vertical-align:top;
	display: inline-block;
	position:relative;
	font-size:0;
	box-sizing: border-box;
} 

.main-navigation ul li a{
	font-weight:400;
	display: block;
	padding:  var(--e1) 0 var(--e1) 0;
	margin:  0;
	font-size: var(--fs3);
	font-weight: var(--fw2);
	color: var(--d_c);
	box-sizing: border-box;
}

.main-navigation ul li a:hover{
	color: var(--p_c);
}

.main-navigation ul ul{
	display: block;
}

.main-navigation ul ul li{
	display: block;
	width: 100%;
}
.main-navigation ul ul li a{
	font-weight: var(--fw1);
}


.main-navigation ul li.lang-item.current-lang{
	display: none;
	
}

.main-navigation ul li.lang-item a{
}

.nav-gumb{
	display: block;
	position: fixed;
	z-index: 101;
	top: var(--e3);
	right: var(--e3);
	width: var(--e3);
	height: var(--e3);
	cursor: pointer;
}
.nav-gumb:before,
.nav-gumb:after{
	display: block;
	content:' ';
	height:1px;
	width:100%;
	background: var(--d_c);
	margin-bottom: var(--e0);
}

.nav-gumb.menu_close:after{
	height:0;
}


/*front*/

.link-front{
	font-weight: var(--fw2);
	text-transform: uppercase;
	color: var(--d_c);
	padding: 0;
	font-size: 0;
	width: var(--e3);
	height: var(--e3);
}

.link-front:after{
	pointer-events:none;
	content:' ';
	transform: rotate(0);
	background-image:url('svg/puscica2.svg');
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: var(--e3);
	height: var(--e3);
	font-size: var(--fs3);
	line-height: var(--fs3);
	display: block;
}

.link-front:hover:After{
	transform: rotate(360deg);
}

/*storitve-fornt*/
.ena-storitev{
	display: flex;
	flex-direction: column;
}

.ena-storitev:nth-child(even){
}

.ena-storitev .link-front{
	margin-top: auto;
	align-self: flex-end;
}

.ena-storitev a:hover{
	color: var(--p_c)
}

/*projekti front*/

.en-projekt{}
.en-projekt img{
	width: 100%;
	height: auto;
}

/*stranke front*/

.stranke .grid{
	
	grid-template-columns: 1fr 1fr  1fr 1fr  1fr 1fr ;
}

.ena-stranka.swiper-slide {
	display: flex; 
	align-items: center;
	justify-content: center;
}
.ena-stranka a{
	display: block;
	width:100%;height:auto;
}
.ena-stranka img{
	width:100%;
	height:auto;
}

.stranke .swiper-button-next{
	width: var(--e3);
	height: var(--e3);
	right:0;
	background-color: var(--l_c);
	padding: var(--e2);
	box-sizing:  content-box;
	border-radius: 50% 0 0 50%;
}

.stranke  .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
	content: ' ';
}

.stranke  .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
	content: ' ';
	display: block;
	background-image:url('svg/puscica2.svg');
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: var(--e3);
	height: var(--e3);
	font-size: var(--fs3);
	line-height: var(--fs3);
}

.en-sodelavec-teksti{
	 grid-column: span 2;    /* same concept, but for rows */
}

.en-sodelavec-slika{
	position:relative;
}

.en-sodelavec-slika a{
display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.en-sodelavec img{
	max-height: var(--e4);
	width:auto;
}

/*arhiv rpojektov*/

.seznam_projektov{
	grid-template-columns: 1fr 1fr  1fr 1fr  1fr 1fr 1fr 1fr ;
}

.seznam_projektov .izpostavljen{
	 grid-column: span 2;  
}

/*single post page*/

.related-storitve {
	grid-template-columns: 1fr 1fr  1fr 1fr  1fr  1fr   1fr  1fr ;
}

.related-storitve li{
	display: flex;
	flex-direction: column;
}

.related-storitve a{
	color: var(--d_c);
	font-size: var(--fs3);
	font-weight: var(--fw2);
	width:100%;
}

.related-storitve li span{
	
	align-self: flex-end;
	pointer-events: none;
  content: ' ';
  background-image: url('svg/puscica2.svg');
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: var(--e3);
  height: var(--e3);
  font-size: var(--fs3);
  line-height: var(--fs3);
  display: block;
  margin-top: var(--e2);
  margin-left: auto;
}

/*kontakt*/
.jp_kontakt{}
.jp_kontakt a{
	color: var(--d_c);
}
.jp_kontakt span{
	display: block;
}
.jp_kontakt .p_o_tel{
	margin-top: var(--e2)
}

/*footer*/

footer .p_o{
	
	display: block;
}

.p_o_kontakti, .p_o_banka {
	margin-top: var(--e2)
}

.p_o_kontakti span{
  display: block;
}

.aut{
	font-style:italic;
}

footer a{
	color: var(--d_c);
	font-weight: var(--fw2)
}

footer a:hover{
	color: var(--p_c)
}