/* ============================================================
   MTEL FSE — GLOBALNI STILOVI
   Učitava se na SVIM stranicama.
   Sadrži: tokene, tipografiju, layout, dugmad, header, footer.
   ============================================================ */

/* ============================================================
   TOKENI
   ============================================================ */
:root{
  --navy-900:#050F20;
  --navy-800:#0A1F3D;
  --navy-700:#102949;
  --navy-600:#1B3A64;
  --navy-500:#2A4F80;

  --red:#C80815;
  --raspberry:#C72C48;
  --orange:#FFB347;

  --grey-500:#6B7A91;
  --grey-400:#8E9BB0;
  --grey-300:#B9C4D4;
  --grey-200:#DDE3EC;
  --paper:#F4F6F9;
  --white:#FFFFFF;

  --spectar:linear-gradient(45deg,#C80815 0%,#C72C48 46%,#FFB347 100%);
  --spectar-soft:linear-gradient(45deg,rgba(200,8,21,.22) 0%,rgba(199,44,72,.20) 46%,rgba(255,179,71,.18) 100%);

  --unit:8px;
  --gut:20px;
  --max:1240px;
  --r:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET / OSNOVA
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy-800);
  color:var(--white);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  h1,h2,h3,h4,
.font-pero{
  font-family:"Pero",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
  font-weight:400;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* Poništi WordPress-ov automatski razmak između top-level blokova —
   sekcije same upravljaju razmakom kroz svoj CSS. */
:where(.wp-site-blocks) > *{margin-block-start:0}

/* ============================================================
   TIPOGRAFSKA SKALA
   ============================================================ */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-400);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--spectar);flex:none;border-radius:2px}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.06}
h1{font-size:clamp(38px,9.2vw,78px)}
h2{font-size:clamp(28px,6.2vw,50px);line-height:1.1}
h3{font-size:clamp(19px,3.4vw,25px);letter-spacing:-.018em;line-height:1.22}
h4{font-size:16px;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.light{font-weight:300;letter-spacing:-.02em}
.lead{font-size:clamp(15px,3.6vw,19px);font-weight:300;line-height:1.66;color:var(--grey-300);max-width:52ch;margin:18px 0 0}
p{margin:0 0 16px}
.muted{color:var(--grey-400)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:72px 0;position:relative}
.sec-tight{padding:56px 0}
.on-paper{background:var(--paper);color:var(--navy-800)}
.on-paper .lead,.on-paper .muted{color:var(--grey-500)}
.on-paper .eyebrow{color:var(--grey-500)}
.on-night{background:var(--navy-900)}

/* 45° spectar hairline — potpis sekcijskog prelaza */
.spectar-rule{height:3px;width:100%;background:var(--spectar);opacity:.9}
.spectar-rule.thin{height:2px;opacity:.55}

/* ============================================================
   DUGMAD
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 28px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
  white-space:nowrap;
}
.btn-primary{background:var(--spectar);color:var(--white);box-shadow:0 10px 30px -12px rgba(200,8,21,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(200,8,21,.95)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.32);color:var(--white)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.07)}
.on-paper .btn-ghost{border-color:rgba(10,31,61,.28);color:var(--navy-800)}
.on-paper .btn-ghost:hover{border-color:var(--navy-800);background:rgba(10,31,61,.05)}
.btn-sm{min-height:44px;padding:0 20px;font-size:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.textlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:2px solid transparent;transition:border-color .2s,gap .2s
}
.textlink:hover{gap:13px;border-bottom-color:var(--orange)}

/* ============================================================
   PREHEADER — telefon, email, jezici (samo desktop)
   ============================================================ */
.pre-hdr{
  position:fixed;top:0;left:0;right:0;z-index:101;
  background:var(--navy-900);height:36px;
}
.pre-hdr-in{
  display:flex;align-items:center;gap:22px;height:36px;
}
.pre-hdr-item{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--grey-400);
  transition:color .2s;
}
.pre-hdr-item svg{width:13px;height:13px;flex:none}
.pre-hdr-item:hover{color:var(--white)}

.pre-hdr-lang{
  display:flex;gap:2px;margin-left:auto;
}
.lang-btn{
  padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;
  color:var(--grey-500);border-radius:6px;transition:.2s;
}
.lang-btn.on{color:var(--white);background:rgba(255,255,255,.13)}
.lang-btn:hover:not(.on){color:var(--grey-300)}

@media(max-width:420px){
  .pre-hdr-lang{display:none}

}
/* preheader nestaje na mobilnom — telefon/email dostupni unutar drawera */
/*@media(max-width:1023px){
  .pre-hdr{display:none}

}*/

/* ============================================================
   HEADER — logo, nav, CTA, hamburger
   ============================================================ */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--spectar);z-index:120}

.hdr{
  position:fixed;top:36px;left:0;right:0;z-index:100;
  transition:top .3s var(--ease),box-shadow .3s;
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(5,15,32,.9);backdrop-filter:blur(18px);
  opacity:0;transition:opacity .3s var(--ease);
}
.hdr.stuck::before{opacity:1}
.hdr.stuck{box-shadow:0 1px 0 rgba(255,255,255,.09)}

.hdr-in{
  display:flex;align-items:center;gap:16px;height:70px;
}

.logo{display:flex;align-items:center;flex:none}
.logo img{width:150px;height:auto;display:block}

/* --- Desktop nav (horizontalna) --- */
.nav{margin-left:auto;margin-right:16px}
.nav-list{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;
}
.nav-link{
  font-family:"Pero",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey-300);padding:6px 0;position:relative;transition:color .2s;
  display:block;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--spectar);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover{color:var(--white)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.active{
  background:var(--spectar);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.nav-link.active::after{transform:scaleX(1)}

/* --- CTA dugme u headeru --- */
.hdr-cta{flex:none}

/* --- Hamburger (mobilni) --- */
.burger{
  width:44px;height:44px;
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  flex:none;
}
.burger span{
  width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}

/* --- Breakpoint: ispod 1299px sakrij nav i CTA, prikaži hamburger --- */
@media(max-width:1299px){
  .nav{display:none}
  .burger{display:flex;margin-left:auto}

  .hdr-cta{
    display:flex;
    position:fixed;
    right:20px;
    bottom:20px;
    bottom:calc(20px + env(safe-area-inset-bottom));
    z-index:150;
    box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  }
  body.no-scroll .hdr-cta{display:none}
  .woocommerce-cart .hdr-cta,
  .woocommerce-checkout .hdr-cta,
  .woocommerce-account .hdr-cta{display:none}
}

/* --- Admin bar offset --- */
.admin-bar .pre-hdr{top:32px}
.admin-bar .hdr{top:68px} /* 32 admin + 36 preheader */
/*
@media(max-width:1023px){
  .admin-bar .hdr{top:32px}
  .hdr{top:0}
}
*/
@media(max-width:782px){
  .admin-bar .pre-hdr{top:46px}
  /* .admin-bar .hdr{top:46px} — vrednost za slučaj kad je preheader sakriven na mobilnom */
  .admin-bar .hdr{top:82px} /* 46 admin (mobilni admin bar) + 36 preheader */
}

/* --- Main padding-top da sadržaj ne bude iza fixed headera --- */
main.wp-block-group,
main.wp-block-group.is-layout-flow,
main.wp-block-group.is-layout-constrained{
  padding-top:106px;
}
@media(max-width:1023px){
  main.wp-block-group,
  main.wp-block-group.is-layout-flow,
  main.wp-block-group.is-layout-constrained{
    /* padding-top:70px; — vrednost za slučaj kad je preheader sakriven na mobilnom */
    padding-top:106px; /* 36 preheader + 70 header, dok je preheader vidljiv na mobilnom */
  }

}

/* ============================================================
   DRAWER — mobilni overlay meni
   ============================================================ */
.drawer{
  position:fixed;inset:0;z-index:200;
  background:var(--navy-900);
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  overflow-y:auto;
  padding:54px 20px 40px;
  visibility:hidden;
}
.drawer.open{transform:translateX(0);visibility:visible}

.drawer-close{
  position:absolute;top:18px;left:20px;
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
}
.drawer-close svg{width:20px;height:20px;display:block}
.drawer-lang{
  display:flex;gap:8px;margin-top:14px;margin-bottom:10px;
}
.drawer-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
}
.drawer-link{
  display:flex;align-items:center;gap:16px;
  padding:10px 0;
  font-family:"Pero",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;font-weight:700;color:var(--grey-300);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s,padding-left .25s var(--ease);
  position:relative;
}
.drawer-link:hover{color:var(--white);padding-left:6px}

.drawer-cta-wrap{
  margin-top:20px;
}
/* --- Ikonice ispred labele u draweru (SVG mask varijable) --- */
:root{
  --ic-onama:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='8.01'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3C/svg%3E");
  --ic-move:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  --ic-paketi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M4 9h16M9 19v2M15 19v2'/%3E%3C/svg%3E");
  --ic-tv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 18v3'/%3E%3C/svg%3E");
  --ic-video:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='13' height='14' rx='2'/%3E%3Cpath d='m16 9 5-3v12l-5-3'/%3E%3C/svg%3E");
  --ic-biz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E");
  --ic-shop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9'/%3E%3Cpath d='M4 9h16v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9Z'/%3E%3Cpath d='M9 13a3 3 0 0 0 6 0'/%3E%3C/svg%3E");
  --ic-zajednica:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M2 20c0-3.3 3.1-6 7-6s7 2.7 7 6'/%3E%3Ccircle cx='18' cy='9' r='2.4'/%3E%3Cpath d='M22 20c0-2.6-1.9-4.7-4.4-5.3'/%3E%3C/svg%3E");
  --ic-gdesmo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --ic-kontakt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.drawer-link[data-ic]::before{
  content:"";width:38px;height:38px;border-radius:10px;flex:none;
  border:1.5px solid rgba(255,255,255,.22);
  -webkit-mask-size:19px;mask-size:19px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:var(--grey-300);
}
.drawer-link[data-ic="onama"]::before    {-webkit-mask-image:var(--ic-onama);   mask-image:var(--ic-onama)}
.drawer-link[data-ic="move"]::before     {-webkit-mask-image:var(--ic-move);    mask-image:var(--ic-move)}
.drawer-link[data-ic="paketi"]::before   {-webkit-mask-image:var(--ic-paketi);  mask-image:var(--ic-paketi)}
.drawer-link[data-ic="tv"]::before       {-webkit-mask-image:var(--ic-tv);      mask-image:var(--ic-tv)}
.drawer-link[data-ic="video"]::before    {-webkit-mask-image:var(--ic-video);    mask-image:var(--ic-video)}
.drawer-link[data-ic="biz"]::before      {-webkit-mask-image:var(--ic-biz);      mask-image:var(--ic-biz)}
.drawer-link[data-ic="shop"]::before     {-webkit-mask-image:var(--ic-shop);     mask-image:var(--ic-shop)}
.drawer-link[data-ic="zajednica"]::before{-webkit-mask-image:var(--ic-zajednica);mask-image:var(--ic-zajednica)}
.drawer-link[data-ic="gdesmo"]::before   {-webkit-mask-image:var(--ic-gdesmo);   mask-image:var(--ic-gdesmo)}
.drawer-link[data-ic="kontakt"]::before  {-webkit-mask-image:var(--ic-kontakt);  mask-image:var(--ic-kontakt)}/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--navy-900);padding:52px 0 26px;font-size:14px}
.ftr-top{display:grid;gap:34px}
.ftr-col h5{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-400);margin:0 0 14px}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr-col a{color:var(--grey-300);font-weight:300;transition:color .2s}
.ftr-col a:hover{color:var(--white)}
.socials{display:flex;gap:10px}
.socials span{
  width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
  letter-spacing:.05em;color:var(--grey-400)
}
.ftr-bot{
  margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  font-size:12px;color:var(--grey-500);font-weight:300
}
.ftr-bot .legal{display:flex;flex-wrap:wrap;gap:12px 20px;margin-left:auto}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   PLACEHOLDER ZA MEDIJ
   ============================================================ */
.ph{
  position:relative;background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.26);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.on-paper .ph{background:rgba(10,31,61,.035);border-color:rgba(10,31,61,.24)}
.ph-tag{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-400);text-align:center;padding:10px;line-height:1.5
}
.var{
  font-weight:700;color:var(--orange);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.on-paper .var{color:var(--red)}

/* ============================================================
   TABLET  ≥ 720px
   ============================================================ */
@media(min-width:720px){
  :root{--gut:36px}
  .sec{padding:96px 0}
  .ftr-top{grid-template-columns:1.6fr 1fr 1fr 1fr}
}

/* ============================================================
   DESKTOP  ≥ 1024px
   ============================================================ */
@media(min-width:1024px){
  .hdr-in{height:82px;gap:34px}
  .nav{display:flex;gap:30px;margin-right:auto}
  .logo{margin-right:0}
  .hdr .btn{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .split-lead{position:sticky;top:110px}
}

@media(min-width:1300px){
  :root{--gut:0px}
  .wrap{padding:0 24px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
/* Shop — stilizacija Product Collection grida */
.page-shop-test .wp-block-woocommerce-product-collection {
  display: grid;
  gap: 28px;
}

.page-shop-test .wc-block-product-template .product {
  border: 1px solid var(--grey-200);
  border-radius: var(--r);
  padding: 20px;
  background: var(--white);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.page-shop-test .wc-block-product-template .product:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(10,31,61,.35);
}

.page-shop-test .wc-block-components-product-image img {
  border-radius: 8px;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: var(--paper);
  padding: 12px;
}

.page-shop-test .wc-block-components-product-title,
.page-shop-test .wp-block-post-title {
  font-family: "Pero", sans-serif;
  font-weight: 700;
  color: var(--navy-800);
  font-size: 17px;
  margin: 14px 0 6px;
}

.page-shop-test .price,
.page-shop-test .wc-block-components-product-price {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--red);
  font-size: 15px;
}

.page-shop-test .wp-block-woocommerce-product-button .wp-block-button__link {
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 22px;
}

.page-shop-test .wp-block-woocommerce-product-button .wp-block-button__link:hover {
  background: var(--navy-800);
}