/* =========================================================
   Drale Pedale – statična verzija (izgled prema WPAzure temi)
   ========================================================= */
:root{
  --text:#595959;
  --dark:#1b1a1a;
  --blue:#4064D7;
  --red:#f5443a;
  --bg:#f5f5f5;
  --border:#dadee0;
  --foot:#171717;
  --muted:#979797;
  --head-font:"Work Sans", Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:"Work Sans",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5;
  color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;vertical-align:middle;border:0}
a{color:var(--text);text-decoration:none;transition:.3s ease all}
a:hover{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--head-font);font-weight:600;line-height:1.5;color:var(--dark);margin:0 0 .5em}
h1{font-size:32px}h2{font-size:24px}h3{font-size:18px}h4{font-size:16px}h5{font-size:12px}
p{margin:0 0 0}
blockquote{text-align:center;background:#F3F3F3;border-left:5px solid var(--blue);margin:1em 0;padding:15px 20px}
hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.container{width:100%;max-width:1170px;margin:0 auto;padding:0 15px}

/* ---------- HEADER ---------- */
.menu-area{
  position:relative;z-index:50;width:100%;top:0;left:0;
  padding:25px 0;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .3s, padding .3s;
}
body.overlay-hdr .menu-area{position:absolute}
.menu-area.fixed{position:fixed!important;background:#1b1a1a;padding:12px 0;box-shadow:0 0 7px 5px rgba(0,0,0,.04)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{width:120px;height:60px;object-fit:contain}
#nav ul{list-style:none;margin:0;padding:0}
#nav>ul{display:flex;align-items:center}
#nav li{position:relative}
#nav>ul>li>a{display:block;padding:12px 15px;font-size:16px;color:#fff;text-transform:capitalize}
#nav>ul>li>a:hover,#nav>ul>li.active>a{color:#fff;opacity:.85}
#nav .caret{display:inline-block;margin-left:4px;font-size:12px}
#nav ul ul{
  position:absolute;top:80px;left:0;min-width:250px;background:#f5f5f5;
  visibility:hidden;opacity:0;transition:.5s ease all;
}
#nav li:hover>ul,#nav li.open>ul{visibility:visible;opacity:1;top:100%}
#nav ul ul a{display:block;padding:12px 15px;color:var(--dark);font-size:16px;border-bottom:1px solid #e9e9e9}
#nav ul ul a:hover{background:#e9e9e9}
.nav-toggle{display:none;background:none;border:1px solid #fff;padding:6px 9px;cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}
@media (max-width:991.98px){
  .nav-toggle{display:block}
  .hdr-in{flex-wrap:wrap}
  #nav{display:none;width:100%}
  #nav.open{display:block}
  #nav>ul{flex-direction:column;align-items:stretch;background:#fff}
  #nav>ul>li>a,#nav ul ul a{color:var(--dark);background:#fff;border-bottom:1px solid var(--border)}
  #nav ul ul{position:static;visibility:visible;opacity:1;display:none;min-width:0;background:#fff}
  #nav li.open>ul{display:block}
  #nav ul ul a{padding-left:30px}
  #nav .caret{position:absolute;right:15px;top:12px;width:25px;height:25px;line-height:25px;text-align:center;color:#fff;background:var(--dark)}
}

/* ---------- ELEMENTOR STRANICE ---------- */
.el-top{position:relative}
.el-sec,.el-con{position:relative;background-repeat:no-repeat}
.el-bg{background-size:cover;background-position:center}
.el-ov{position:absolute;inset:0;pointer-events:none}
.el-full{min-height:100vh}
.el-top.el-bg{display:flex;flex-direction:column;justify-content:center;transition:background-image .5s}
.el-top.el-bg>.el-box{width:100%}
.overlay-hdr #app>.el-top:first-child{padding-top:110px!important}
.el-full>.el-box{width:100%}
.el-box{position:relative;max-width:1140px;margin:0 auto;padding:0 10px}
.el-top.el-con{padding:20px 0 0}
.el-row{display:flex;flex-wrap:wrap}
.el-col{position:relative;padding:10px;min-width:0;display:flex;flex-direction:column}
.el-col.c100{flex:0 0 100%;max-width:100%}
.el-col.c66{flex:0 0 66.666%;max-width:66.666%}
.el-col.c50{flex:0 0 50%;max-width:50%}
.el-col.c33{flex:0 0 33.333%;max-width:33.333%}
.el-col.c25{flex:0 0 25%;max-width:25%}
.el-col.c20{flex:0 0 20%;max-width:20%}
.el-col.c16{flex:0 0 16.666%;max-width:16.666%}
.el-flexrow>.w{flex:1}
.w{position:relative;width:100%}
.w:not(:last-child){margin-bottom:20px}
.el-h{margin:0;padding:0}
.el-h a{color:inherit}
.txt p{margin-bottom:.9em!important}
.txt p:last-child{margin-bottom:0!important}
.w-image img{max-width:100%}
.w-image .cap{font-size:13px;text-align:center;margin-top:6px}
.btn{
  display:inline-block;background:var(--blue);color:#fff;padding:20px 40px;font-size:18px;
  border-radius:3px;line-height:1;font-family:"Rubik",sans-serif;font-weight:500
}
.btn:hover{color:#fff;filter:brightness(1.1)}
.ibox{text-align:center}
.ibox img{margin-bottom:15px;width:100%}
.ibox h3{font-size:20px;margin-bottom:8px}
.ibox h3 a{color:var(--dark)}
.ibox h3 a:hover{color:var(--blue)}
.icobox{text-align:center}
.icobox .ico{display:inline-flex;width:70px;height:70px;align-items:center;justify-content:center;font-size:34px;color:var(--blue);margin-bottom:15px}
.icobox h3{font-size:24px}
.icobox a{color:var(--blue)}
.social{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.social .so{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:#69727d;color:#fff}
.social .so svg{width:20px;height:20px;fill:#fff}
.social .so-facebook{background:#3b5998}
.social .so-youtube{background:#cd201f}
.counter{text-align:center}
.counter .num{font-size:69px;font-weight:600;color:var(--blue);line-height:1;font-family:"Rubik",sans-serif}
.counter .ctitle{font-size:19px;margin-top:6px;color:var(--dark)}
.acc details{border:1px solid #d4d4d4;margin-bottom:-1px;background:#fff}
.acc summary{cursor:pointer;padding:15px 20px;font-weight:600;color:var(--dark);list-style:none;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:20px;font-weight:400}
.acc details[open] summary::after{content:"–"}
.acc .acc-b{padding:15px 20px;border-top:1px solid #d4d4d4}
.spacer{width:100%}

/* hero na naslovnici */
.page-home .el-top:first-child{background-size:cover!important;background-attachment:fixed;background-position:center!important}
@media (hover:none){.page-home .el-top:first-child{background-attachment:scroll}}

/* carousel (Oprema) */
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 0;scrollbar-width:thin;align-items:center}
.carousel a{flex:0 0 calc(33.333% - 14px);scroll-snap-align:start;text-align:center}
.carousel img{max-height:160px;width:auto;margin:0 auto}

/* ---------- POST GRID (Essential Addons look) ---------- */
.pgrid-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.08);display:flex;flex-direction:column;overflow:hidden}
.card .media{position:relative;height:221px;overflow:hidden;background:#eee}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card .media::after{content:"→";position:absolute;inset:0;background:rgba(0,0,0,.75);color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s}
.card:hover .media::after{opacity:1}
.card .body{padding:15px;display:flex;flex-direction:column;flex:1;min-height:181px}
.card h4{font-size:16px;line-height:1.4;margin:0 0 10px}
.card h4 a{color:#303133}
.card h4 a:hover{color:#23527c}
.card .ex{font-size:14px;line-height:1.6;word-break:break-word;margin-bottom:10px}
.card .more{display:inline-block;align-self:flex-start;font-size:12px;padding:4px 10px;background:#333;color:#fff;margin-top:6px}
.card .more:hover{background:var(--blue);color:#fff}
.card time{display:block;margin-top:auto;padding-top:10px;font-size:12px;color:#999}
.loadmore-wrap{text-align:center;margin:30px 0 20px}
.loadmore{background:#29d8db;color:#fff;border:0;padding:15px 30px;font-size:15px;cursor:pointer;border-radius:3px;font-family:inherit}
.loadmore:hover{background:#2b2b2b}
@media (max-width:1024px){.pgrid-in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.pgrid-in{grid-template-columns:1fr}}

/* ---------- BLOG / POST ---------- */
.section-padding{padding:100px 0;width:100%}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}
.az-single-post .post-inner{background:#fff;border:1px solid var(--border);padding:15px}
.entry-title{font-size:24px;color:var(--dark);margin-bottom:10px}
.entry-meta{list-style:none;padding:0;margin:0 0 20px;color:#bfbfbf;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 20px}
.entry-meta a{color:#595959}
.entry-meta a:hover{color:var(--red)}
.entry-meta .lbl{margin-right:4px}
.entry-content{color:#595959;overflow-wrap:break-word}
.entry-content p{margin-bottom:1em!important}
.entry-content figure{margin:0 0 1em}
.entry-content ul,.entry-content ol{margin:0 0 1em}
.entry-content a{color:var(--blue)}
.entry-content img{height:auto}
.post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:14px}
.post-nav a{display:block;background:#fff;border:1px solid var(--border);padding:12px 15px;max-width:48%;color:var(--dark)}
.post-nav a:hover{border-color:var(--red);color:var(--red)}
.post-nav .next{text-align:right;margin-left:auto}
.post-nav small{display:block;color:#999}
.page-title{background:#fff;border:1px solid var(--border);padding:15px;margin-bottom:30px}
.page-title h1{font-size:24px;margin:0}

/* gutenberg */
.wp-block-gallery,.blocks-gallery-grid{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 1em;list-style:none}
.wp-block-gallery>figure,.wp-block-gallery .wp-block-image,.blocks-gallery-item{margin:0!important;flex:1 1 calc(25% - 8px);max-width:calc(25% - 6px);position:relative;overflow:hidden}
.wp-block-gallery.columns-2>figure{flex-basis:calc(50% - 8px);max-width:calc(50% - 4px)}
.wp-block-gallery.columns-3>figure{flex-basis:calc(33.33% - 8px);max-width:calc(33.33% - 6px)}
.wp-block-gallery.columns-5>figure{flex-basis:calc(20% - 8px);max-width:calc(20% - 7px)}
.wp-block-gallery.is-cropped figure img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.wp-block-gallery figure a{display:block;height:100%}
.wp-block-columns{display:flex;gap:2em;flex-wrap:wrap}
.wp-block-column{flex:1;min-width:200px}
.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}
.alignleft{float:left;margin:0 1em 1em 0}
.alignright{float:right;margin:0 0 1em 1em}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}

/* embedi */
.vid{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 1em;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.relive{margin:0 0 1em}
.relive iframe{width:100%;aspect-ratio:4/5;max-height:800px;border:0;display:block;background:#eee}
.relive a{font-size:13px}
.embed iframe{width:100%;min-height:400px;border:0}
.vidfile video{width:100%;max-height:80vh;background:#000}
audio{width:100%;margin:0 0 1em}

/* galerija (Photo Gallery thumbnails) */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;margin:0 0 1em}
.gal a{display:block;position:relative;overflow:hidden;padding-top:56%;background:rgba(0,0,0,.3)}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal a:hover img{transform:scale(1.08)}
@media (max-width:480px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- SIDEBAR ---------- */
.sidebar .widget{background:#fff;border:1px solid var(--border);padding:20px;margin-bottom:30px}
.sidebar h2{font-size:24px;margin:0}
.search-form label{display:block;font-weight:600;margin-bottom:8px;color:var(--dark)}
.search-row{display:flex;gap:6px}
.search-row input{flex:1;min-width:0;padding:8px 10px;border:1px solid #949494;font:inherit}
.search-row button{background:#32373c;color:#fff;border:0;padding:8px 14px;cursor:pointer;font:inherit}
.latest{list-style:none;margin:0;padding:0}
.latest li{margin-bottom:18px;overflow:hidden}
.latest img{width:150px;height:150px;object-fit:cover;display:block;margin-bottom:6px}
.latest a.t{color:var(--dark);font-weight:500}
.latest a.t:hover{color:var(--red)}

/* ---------- FOOTER ---------- */
.az-footer{background:var(--foot);color:var(--muted);padding:100px 0 50px;border-top:3px solid var(--red)}
.az-footer a{color:var(--muted)}
.az-footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.foot-about{text-align:justify}
.az-footer .widget-title{font-size:24px;color:#fff;font-weight:400;margin-bottom:30px}
.az-footer ul{list-style:none;margin:0;padding:0}
.widget_recent_entries li,.address-widget li{position:relative;padding:0 0 10px 20px;margin-bottom:15px;border-bottom:1px solid #242424}
.widget_recent_entries li::before{content:"→";position:absolute;left:0;top:0;font-size:12px;color:#626262}
.address-widget li{padding-left:0}
.widget_recent_entries .post-date{display:block;color:#fff;font-size:12px}
.az-social-icon-list{display:flex;gap:10px;margin-top:20px!important}
.az-social-icon-list a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #333;border-radius:50%}
.az-social-icon-list svg{width:16px;height:16px;fill:var(--muted)}
.az-social-icon-list a:hover svg{fill:#fff}
.copyright-section{background:#1b1a1a}
.copyright{background:#1c1c1c;padding:25px 15px;text-align:center;color:var(--muted)}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000;display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:92vw;max-height:90vh;text-align:center}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain}
.lb figcaption{color:#ccc;font-size:13px;margin-top:8px}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:48px;cursor:pointer;padding:10px 18px;line-height:1;opacity:.8}
.lb button:hover{opacity:1}
.lb-x{top:10px;right:10px}
.lb-prev{left:5px;top:50%;transform:translateY(-50%)}
.lb-next{right:5px;top:50%;transform:translateY(-50%)}

.notfound{text-align:center;padding:150px 15px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .el-h{font-size:clamp(22px,4.5vw,40px)!important;line-height:1.2!important}
  h4.el-h{font-size:20px!important}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .layout{grid-template-columns:1fr}
  .section-padding{padding:40px 0}
}
@media (max-width:767px){
  .el-col.c66,.el-col.c50,.el-col.c33,.el-col.c25,.el-col.c20,.el-col.c16{flex:0 0 100%;max-width:100%}
  .el-col:empty{display:none}
  .el-sec[style*="padding"]{padding-left:0!important;padding-right:0!important}
  .el-full{min-height:70vh}
  .foot-grid{grid-template-columns:1fr}
  .counter .num{font-size:48px}
  .carousel a{flex-basis:70%}
  .wp-block-gallery>figure,.wp-block-gallery .wp-block-image{flex-basis:calc(50% - 8px);max-width:calc(50% - 4px)}
  .post-nav{flex-direction:column}
  .post-nav a{max-width:100%}
}