:root{
  --brand-primary:#d4e157;   /* SPACIAZ accent */
  --brand-hover:#e6f27a;
}

/* =========================
RESET (HEADER ONLY)
========================= */

.site-header,
.site-header *{
  box-sizing:border-box;
}

.site-header ul{
  margin:0;
  padding:0;
  list-style:none;
}

.site-header a{
  text-decoration:none;
  color:inherit;
}


/* =========================
HEADER BASE (FLOATING)
========================= */

.site-header{
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  z-index:9999;
  pointer-events:none; /* container klikitav, wrapper mitte */
}


/* =========================
FLOATING CONTAINER
========================= */

.header-inner{
  pointer-events:auto;

  width:100%;
  max-width:1320px;
  margin:0 auto;

  padding:18px 32px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:40px;

  border-radius:999px;

  /* Spaciaz style dark gradient */
  background:
linear-gradient(
  90deg,
  rgba(63,69,75,.92),
  rgba(78,86,92,.92)
);


  backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.06);
}


/* =========================
LOGO
========================= */

.header-logo{
  display:flex;
  align-items:center;
}

.logo-img{
  height:42px;
  width:auto;
}


/* =========================
NAVIGATION (CENTER)
========================= */

.header-nav{
  display:flex;
  justify-content:center;
}

/* WP menu wrapper fix */
.header-nav > div{
  width:100%;
}

.primary-menu{
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:42px;
}

/* links */

.primary-menu a{
  font-family:Montserrat, sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;

  color:#fff;
  opacity:.9;

  transition:.2s ease;
}

.primary-menu a:hover{
  opacity:.6;
}


/* =========================
RIGHT SIDE
========================= */

.header-actions{
  display:flex;
  align-items:center;
  gap:28px;
}


/* PHONE */

.header-phone{
  display:flex;
  align-items:center;
  gap:10px;

  color:#fff;
  font-size:14px;
  font-weight:500;
}

.header-phone .phone-text{
  border-bottom:2px solid rgba(255,255,255,.25);
  padding-bottom:2px;
}


/* =========================
RESPONSIVE
========================= */

@media (max-width:1024px){

  .header-nav,
  .header-phone,
  .header-cta{
    display:none;
  }

  .menu-toggle{
    display:block;
  }

  .header-inner{
    grid-template-columns:1fr auto;
  }

}

/* =========================
LOGO TEXT SYSTEM
========================= */

.site-logo-text{
  font-family:'Space Grotesk', sans-serif;

  font-size:28px;
  font-weight:700;

  letter-spacing:.06em;
  text-transform:uppercase;

  color:#fff;

  line-height:1;
  display:block;
}


/* hover feel */
.site-logo-text:hover{
  opacity:.8;
}

.header-phone .phone-text{
  border-bottom:2px solid var(--brand-primary);
}

/* =========================
LOGO COLORS
========================= */

.site-logo-text{
  font-family:'Space Grotesk', sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
}

/* HEA */
.logo-primary{
  color:var(--brand-primary);
}

/* TEENUS */
.logo-white{
  color:#fff;
}

/* FORCE WP MENU VISIBLE */

.header-nav{
  display:flex !important;
  justify-content:center;
  align-items:center;
}

.header-nav ul{
  display:flex !important;
}

.primary-menu{
  display:flex !important;
  gap:40px;
}

/* =========================
MOBILE MENU DEFAULT HIDDEN
========================= */

.mobile-menu{
  position:fixed;
  inset:0;

  display:none; /* ⭐ see puudub sul */

  background:rgba(15,20,25,.98);
  z-index:9998;
}

/* kui JS lisab classi */
.mobile-menu.active{
  display:block;
}

/* =========================
MENU UNDERLINE SYSTEM
Spaciaz style
========================= */

/* link base */

.primary-menu a{
  position:relative;
  padding-bottom:6px;
}


/* underline element */

.primary-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:0;
  height:2px;

  background:var(--brand-primary);

  transition:width .25s ease;
}


/* hover underline */

.primary-menu a:hover::after{
  width:100%;
}


/* =========================
ACTIVE MENU LINK (WP)
========================= */

/* WP current classes */

.primary-menu .current-menu-item > a::after,
.primary-menu .current_page_item > a::after,
.primary-menu .current-menu-parent > a::after,
.primary-menu .current_page_parent > a::after{
  width:100%;
}

/* =====================================================
VL24 SORA LOGO SYSTEM
Reguleeri kõik siit
===================================================== */

:root{

  /* ========= LOGO SIZE ========= */

  --logo-size:32px;
  --logo-size-scrolled:26px;
  --logo-size-mobile:24px;

  /* ========= FONT ========= */

  --logo-weight:900;
  --logo-letter-spacing:0.01em;

  /* ========= COLORS ========= */

  --logo-primary-color:var(--brand-primary);
  --logo-secondary-color:#ffffff;

  /* ========= TRANSITION ========= */

  --logo-transition:.25s ease;
}


/* =========================
LOGO BASE
========================= */

.site-logo-text{

  font-family:'Sora', sans-serif;

  font-size:var(--logo-size);
  font-weight:var(--logo-weight);
  letter-spacing:var(--logo-letter-spacing);

  text-transform:uppercase;
  line-height:1;

  display:flex;
  align-items:center;

  transition:var(--logo-transition);
}


/* =========================
COLOR SPLIT
========================= */

.logo-primary{
  color:var(--logo-primary-color);
}

.logo-white{
  color:var(--logo-secondary-color);
}


/* =========================
HOVER EFFECT
========================= */

.site-logo:hover .site-logo-text{
  opacity:.8;
}





/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .site-logo-text{
    font-size:var(--logo-size-mobile);
  }

}

/* =========================
FLOATING HEADER SIDE SPACE
========================= */

.site-header{
  padding:0 24px; /* ← kontrollib kaugust servast */
}

.header-inner{
  margin:0 auto;
  max-width:1400px; /* pill max laius */
}

/* =========================================
VL24 GLASS DROPDOWN MENU — 2026 SYSTEM
========================================= */

/* parent item */
.primary-menu li{
  position:relative;
}

/* caret icon */
.primary-menu .menu-item-has-children > a::after{
  content:"";
  display:inline-block;
  margin-left:8px;

  width:6px;
  height:6px;

  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;

  transform:rotate(45deg) translateY(-2px);
  opacity:.6;
}


/* =========================================
GLASS DROPDOWN BOX
========================================= */

.sub-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%) translateY(10px);

  min-width:220px;
  padding:12px;

  border-radius:16px;

  background:
    linear-gradient(
      180deg,
      rgba(40,45,50,.95),
      rgba(30,35,40,.95)
    );

  backdrop-filter:blur(16px);

  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 1px rgba(255,255,255,.05);

  opacity:0;
  pointer-events:none;

  transition:
    opacity .25s ease,
    transform .25s ease;

  z-index:999;
}


/* dropdown open — desktop hover */
.primary-menu li:hover > .sub-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}


/* =========================================
SUBMENU LINKS
========================================= */

.sub-menu li{
  display:block;
}

.sub-menu a{
  display:block;
  padding:12px 16px;

  border-radius:10px;

  font-size:14px;
  font-weight:500;

  color:#fff;

  transition:.2s ease;
}


/* neon hover */
.sub-menu a:hover{
  background:rgba(180,255,40,.12);
  color:var(--brand-primary);

  box-shadow:0 0 12px rgba(180,255,40,.25);
}

/* =========================================
SUBMENU HOVER BRIDGE (PRO SOLUTION)
täidab 16px gap ala
========================================= */

.primary-menu li{
  position:relative;
}

/* invisible ala parenti all */
.primary-menu li::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:18px; /* sama mis gap */

  background:transparent;
}



/* =========================================
MOBILE MODE
========================================= */

@media(max-width:1024px){

  .sub-menu{
    position:static;
    transform:none;
    opacity:1;
    pointer-events:auto;

    background:transparent;
    backdrop-filter:none;
    box-shadow:none;

    padding:10px 0 10px 18px;
    display:none;
  }

  /* open state from JS */
  .menu-item-open > .sub-menu{
display:flex !important;  }

  .primary-menu .menu-item-has-children > a::after{
    float:right;
  }

}

.primary-menu .menu-item-has-children > a::after{
  display:none !important;
}

/* ================================
NO WRAP HEADER ITEMS
================================ */

.site-header{
  min-width:0;
}

.header-inner{
  flex-wrap:nowrap;
}

.header-logo,
.header-nav,
.header-actions,
.primary-menu li,
.primary-menu a,
.header-phone,
.header-cta{
  white-space:nowrap;
}

/* =================================
AUTO SCALE SYSTEM
================================ */

.header-inner{
  gap:clamp(16px, 3vw, 40px);
}

.primary-menu{
  gap:clamp(16px, 2vw, 42px);
}

.primary-menu a{
  font-size:clamp(12px, .8vw, 14px);
}

.site-logo-text{
  font-size:clamp(20px, 1.8vw, 28px);
}

.header-phone{
  font-size:clamp(12px, .8vw, 14px);
}

/* =================================
TABLET — menu peitu, tel alles
================================ */

@media (max-width:1024px){

  /* desktop menu OFF */
  .site-header .header-nav{
    display:none !important;
  }

  /* hamburger ON */
  .site-header .menu-toggle{
    display:block !important;
  }

  /* layout */
  .site-header .header-inner{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  /* tel jääb nähtavaks */
  .site-header .header-phone{
    display:flex !important;
  }

}


/* =================================
MOBILE — tel kaob
================================ */

@media (max-width:640px){

  .site-header .header-phone{
    display:none !important;
  }

}



/* =================================
MOBILE EXTRA
================================ */

@media (max-width:640px){

  /* hide phone */
  .site-header .header-phone{
    display:none !important;
  }

}

/* =================================
TABLET — menu peitu, tel + CTA alles
================================ */

@media (max-width:1024px){

  /* desktop menu OFF */
  .site-header .header-nav{
    display:none !important;
  }

  /* hamburger ON */
  .site-header .menu-toggle{
    display:block !important;
  }

  /* tel nähtav */
  .site-header .header-phone{
    display:flex !important;
  }

  /* CTA nähtav */
  .site-header .header-cta{
    display:inline-flex !important;
  }

  /* layout */
  .site-header .header-inner{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

}


/* =================================
MOBILE — tel kaob, CTA alles
================================ */

@media (max-width:640px){

  /* tel peitu */
  .site-header .header-phone{
    display:none !important;
  }

  /* CTA jääb */
  .site-header .header-cta{
    display:inline-flex !important;
  }

}

/* =================================
MOBILE AUTO SHRINK HEADER
kõik mahub ühele reale
================================ */

@media (max-width:640px){

  /* container väiksem */
  .site-header .header-inner{
    padding:10px 16px !important;
    gap:10px !important;
  }

  /* LOGO väiksem */
  .site-logo-text{
    font-size:18px !important;
    letter-spacing:.04em;
  }

  .logo-img{
    height:26px !important;
  }



  /* hamburger väiksem */
  .menu-toggle{
    transform:scale(.85);
  }

  /* tel väiksem kui kasutad */
  .header-phone{
    font-size:12px !important;
  }

  /* väldi tekstide murdumist */
  .site-header *{
    white-space:nowrap;
  }

}

/* =========================================
HEADER ACTIONS — PERFECT RIGHT ALIGN
CTA alati kõige paremas servas
========================================= */

.header-actions{
  display:flex;
  align-items:center;
  margin-left:auto; /* surub paremale */
  gap:18px;
}

/* elementide järjekord */
.header-phone{ order:1; }
.menu-toggle{ order:2; }
.header-cta{
  order:3;
  margin-left:10px;
}


/* =========================================
TABLET + MOBILE
========================================= */

@media (max-width:1024px){

  /* nav kaob */
  .header-nav{
    display:none !important;
  }

  /* CTA kõige paremas servas */
  .header-actions{
    margin-left:auto;
    justify-content:flex-end;
    width:auto;
  }

  /* CTA suru täiesti paremale */
  .header-cta{
    margin-left:auto;
  }

}

/* =========================================
VL24 CTA — CLEAN PROFESSIONAL BUTTON
NO GLASS / NO BUGS / PRODUCTION SAFE
========================================= */

.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 28px;
  border-radius:999px;

  background:linear-gradient(
    180deg,
    #d4e157,
    #a9b43a
  );

  color:#111;
  font-weight:600;
  letter-spacing:.04em;

  border:1px solid rgba(255,255,255,.15);

  transition:all .25s ease;
}

/* =========================================
VL24 CTA — RADIAL HOVER REVEAL (PRO)
cursor origin / smooth / production safe
========================================= */

.header-cta{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 28px;
  border-radius:999px;

  background:var(--brand-primary);
  color:#111;

  border:1px solid rgba(255,255,255,.15);

  transition:color .35s ease;
}


/* expand from cursor */
.header-cta:hover::before{
  transform:translate(-50%,-50%) scale(80);
}


/* text always above */
.header-cta{
  z-index:1;
}

/* =========================================
VL24 CTA — TRUE RADIAL COLOR REVEAL
production safe / text always visible
========================================= */

.header-cta{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 28px;
  border-radius:999px;

  background:var(--brand-primary);
  color:#111;

  isolation:isolate;
  transition:color .35s ease;
}

/* =========================================
VL24 CTA — TRUE RADIAL REVEAL (SMOOTH)
ümar levik / väga smooth / premium
========================================= */

.header-cta{
  position:relative;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 28px;
  border-radius:999px;

  background:var(--brand-primary);
  color:#111;

  isolation:isolate;
  transition:color .45s ease;
}


.header-cta::before{
  content:"";
  position:absolute;
  inset:-2px;

  border-radius:inherit;

  background:#1f262b;

  /* ⭐ alguses nähtamatu */
  opacity:0;

  /* ⭐ levik hiire punktist */
  clip-path:circle(0% at var(--x,50%) var(--y,50%));

  /* ⭐ smooth värvi tumenemine + levik */
  transition:
    clip-path 2s cubic-bezier(.22,1,.36,1),
    opacity 1.2s ease;

  z-index:-1;
}

.header-cta:hover::before{
  opacity:1;
  clip-path:circle(150% at var(--x,50%) var(--y,50%));
}


.header-cta:hover{
  color:#fff;
}


/* text */
.header-cta:hover{
  color:#fff;
}

/* FORCE PHONE WHITE — ICON + NUMBER */

.header-phone,
.header-phone *{
  color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
}

/* =================================
GLOBAL OVERLAY HEADER SYSTEM
header sisu peal / sticky / global
================================= */

body{
  padding-top:0 !important;
}

.site-header{
  position:fixed;
  top:20px;
  left:0;
  width:100%;
  z-index:9999;
}

/* kui tahad hero sektsioonil ilusti overlay feeli */
main,
.site-main,
.page-content{
  position:relative;
  z-index:1;
}

/* =========================================
CTA AUTO ATTENTION — MOBILE/TABLET
iga 3s subtle liikumine
========================================= */

@media (max-width:1024px){

  .header-cta{
    animation:vl24CtaPulse 4s ease-in-out infinite;
    transform-origin:center;
  }

}

@keyframes vl24CtaPulse{

  0%{
    transform:scale(1) rotate(0deg);
  }

  4%{
    transform:scale(1.06) rotate(-1deg);
  }

  8%{
    transform:scale(1.06) rotate(1deg);
  }

  12%{
    transform:scale(1);
  }

  100%{
    transform:scale(1);
  }

}

/* =========================================
VL24 HEADER — MOBILE/TABLET FIT FIX
ei puutu efekte / ainult layout
PASTA CSS FAILI LÕPPU
========================================= */

/* container võib shrinkida */
.header-inner{
  min-width:0;
}

/* logo ei tohi layouti lõhkuda */
.header-logo{
  flex:0 1 auto;
  min-width:0;
}

/* actions alati paremal */
.header-actions{
  display:flex;
  align-items:center;
  margin-left:auto;
  flex-shrink:0;
}

/* CTA võib shrinkida */
.header-cta{
  flex-shrink:0;
  white-space:nowrap;
}

/* =================================
TABLET + MOBILE LAYOUT
================================ */

@media (max-width:1024px){

  /* GRID → FLEX (üks süsteem ainult) */
  .header-inner{
    display:flex !important;
    align-items:center;
    justify-content:space-between;

    padding:clamp(8px,2vw,18px) clamp(12px,3vw,24px) !important;
    gap:12px !important;
  }

  /* nav off */
  .header-nav{
    display:none !important;
  }

  /* hamburger on */
  .menu-toggle{
    display:block !important;
  }

  /* CTA scale */
  .header-cta{
    padding:clamp(6px,1.6vw,12px) clamp(12px,3vw,20px) !important;
    font-size:clamp(12px,3vw,14px) !important;
  }

  /* logo scale */
  .site-logo-text{
    font-size:clamp(16px,4vw,22px) !important;
  }

  .logo-img{
    height:clamp(22px,5vw,32px) !important;
  }

}

/* =================================
SMALL MOBILE EXTRA TIGHT
================================ */

@media (max-width:420px){

  .header-inner{
    gap:8px !important;
    padding:8px 14px !important;
  }

  .site-logo-text{
    font-size:15px !important;
  }

  .header-cta{
    padding:6px 12px !important;
    font-size:12px !important;
  }

  .menu-toggle{
    transform:scale(.85);
  }

}

/* ==============================
MENU OVERLAY ALLA
hamburger jääb peale
============================== */

.mobile-menu{
  z-index:9990 !important;
}

/* hamburger alati kõige peal */
.menu-toggle{
  position:relative;
  z-index:10020 !important;
}

/* SVG goo render fix */
.ml-goo-svg{
  position:fixed;
  width:0;
  height:0;
  pointer-events:none;
  opacity:0;
  z-index:-1;
}

/* =========================================
VL24 LIQUID BURGER — CLEAN SYSTEM
========================================= */

/* burger nupp */
.menu-toggle.menu-liquid{
  display:none;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  z-index:100000;
}

/* mobile visible */
@media(max-width:1024px){
  .menu-toggle.menu-liquid{ display:flex; }
}

/* =========================
BURGER DOTS — 4 CORNER SYSTEM
========================= */

.menu-toggle .ml-dots{
  position:absolute;
  width:16px;
  height:16px;

  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

/* dot base */
.menu-toggle .ml-dot{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;

  transform:translate(0,0);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}


/* 4 nurka */
.menu-toggle .ml-dot:nth-child(1){ top:0; left:0; }
.menu-toggle .ml-dot:nth-child(2){ top:0; right:0; }
.menu-toggle .ml-dot:nth-child(3){ bottom:0; left:0; }
.menu-toggle .ml-dot:nth-child(4){ bottom:0; right:0; }


/* =========================
DOTS → REAL X SHAPE
========================= */

.site-header.menu-open .ml-dot:nth-child(1){
  transform:translate(5px,5px) scale(1.3);
}

.site-header.menu-open .ml-dot:nth-child(2){
  transform:translate(-5px,5px) scale(1.3);
}

.site-header.menu-open .ml-dot:nth-child(3){
  transform:translate(5px,-5px) scale(1.3);
}

.site-header.menu-open .ml-dot:nth-child(4){
  transform:translate(-5px,-5px) scale(1.3);
}

/* ===============================
FULLSCREEN GLASS MENU
=============================== */

.mobile-menu{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  backdrop-filter:blur(20px);
  background:rgba(10,20,30,.65);

  z-index:9000;
}

.mobile-menu.active{
  display:flex;
}

/* menu center */
.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:30px;
  text-align:center;
}

.mobile-nav a{
  font-size:32px;
  color:#fff;
  font-weight:600;
}

/* header peab alati overlay peal olema */
.site-header{
  z-index:100000;
}

.header-inner{
  z-index:999999 !important;
  position:relative;
}

/* täielikult peida burgeri tekst */
.menu-liquid .ml-label{
  display:none !important;
}

/* eemaldab tel + CTA mobile menüüst */
.mobile-extra{
  display:none !important;
}

/* =========================================
MOBILE MENU — CLICK FIX (NO HACKS)
overlay on päriselt peal, lingid töötavad
========================================= */

/* overlay kõige peale */
.mobile-menu{
  z-index:2000000 !important;
  pointer-events:auto !important;
}

/* header ja pill võivad jääda alla */
.site-header,
.header-inner{
  z-index:100000 !important;
}

/* hamburger peab jääma overlayst kõrgemale, et kinni panna */
.menu-toggle{
  z-index:2000001 !important;
  pointer-events:auto !important;
}

/* overlay headeri all */
.mobile-menu{
  z-index:99990 !important;
}

/* header overlayst kõrgem */
.site-header{
  z-index:100000 !important;
}

/* =========================================
SUBMENU — NO YELLOW GLOW / NO UNDERLINE
========================================= */

.sub-menu a::after{
  display:none !important;
}

.sub-menu a:hover{
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

/* =========================================
SUBMENU — CLEAN STYLE (NO GREEN / NO GLOW)
========================================= */

.sub-menu a:hover{
  background:transparent !important;
  color:#fff !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

/* =========================================
SUBMENU — vertical layout fix
========================================= */

.sub-menu{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch;
}

.sub-menu li{
  width:100%;
}

.sub-menu{
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
}

.sub-menu::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);

  width:16px;
  height:16px;

  background:rgba(40,45,50,.95);
  transform:translateX(-50%) rotate(45deg);
}

/* =========================================
APPLE STYLE MENU MOTION (CSS only)
========================================= */

.sub-menu{
  transform:translateX(-50%) translateY(14px) scale(.98);
  opacity:0;
  filter:blur(6px);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,1,.36,1),
    filter .28s ease;
  transform-origin:top center;
}

.primary-menu li:hover > .sub-menu{
  opacity:1;
  pointer-events:auto;
  filter:blur(0);
  transform:translateX(-50%) translateY(0) scale(1);
}

/* itemid tulevad staggeriga */
.sub-menu li{
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22,1,.36,1);
}

.primary-menu li:hover > .sub-menu li{
  opacity:1;
  transform:translateY(0);
}

.primary-menu li:hover > .sub-menu li:nth-child(1){ transition-delay:.02s; }
.primary-menu li:hover > .sub-menu li:nth-child(2){ transition-delay:.05s; }
.primary-menu li:hover > .sub-menu li:nth-child(3){ transition-delay:.08s; }
.primary-menu li:hover > .sub-menu li:nth-child(4){ transition-delay:.11s; }


/* =================================
HEADER LOGO — REAL AUTO SHRINK SYSTEM
VL24 header structure
pane faili LÕPPU
================================ */

/* logo wrapper */
.header-logo{
  flex:0 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
}

/* logo pilt — master control */
.header-logo img,
.logo-img,
.custom-logo{
  display:block !important;

  height:42px !important;
  width:auto !important;

  /* ⭐ auto shrink kui ruumi pole */
  max-width:min(220px, 35vw) !important;

  object-fit:contain;
}


/* =========================
TABLET
========================= */

@media (max-width:1024px){

  .header-logo img,
  .logo-img,
  .custom-logo{
    height:34px !important;
    max-width:min(180px, 40vw) !important;
  }

}


/* =========================
MOBILE
========================= */

@media (max-width:640px){

  .header-logo img,
  .logo-img,
  .custom-logo{
    height:26px !important;
    max-width:min(140px, 45vw) !important;
  }

}


/* =========================
VERY SMALL PHONE
========================= */

@media (max-width:420px){

  .header-logo img,
  .logo-img,
  .custom-logo{
    height:22px !important;
    max-width:min(100px, 50vw) !important;
  }

}


/* =========================================
MOBILE SUBMENU — FORCE SHOW (NUCLEAR FIX)
PASTE AT ABSOLUTE END
========================================= */

@media (max-width:1024px){

  /* ainult mobiili overlay sees */
  #mobileMenu .sub-menu{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;

    position:static !important;
    left:auto !important;
    top:auto !important;

    transform:none !important;
    filter:none !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;

    margin:14px 0 6px !important;
    padding:0 0 0 14px !important;
  }

  #mobileMenu .sub-menu li{
    display:block !important;
    width:100% !important;
    opacity:1 !important;
    transform:none !important;
  }

  #mobileMenu .sub-menu a{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;

    font-size:14px !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;

    color:rgba(255,255,255,.78) !important;
  }

}

/* =====================================================
MOBILE MENU — LEFT TEXT / RIGHT ARROW (NO JS)
Submenu ALWAYS visible
PASTE AT END
===================================================== */
@media (max-width:1024px){

  /* menu block */
  #mobileMenu .mobile-nav{
    width:min(380px, 92vw) !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    align-items:stretch !important;
    text-align:left !important;
  }

  /* top row */
  #mobileMenu .mobile-nav > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    padding:16px 16px !important;

    border-radius:16px !important;
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.08) !important;

    font-family:Montserrat,sans-serif !important;
    font-size:18px !important;
    font-weight:600 !important;
    letter-spacing:-0.01em !important;
    text-transform:none !important;

    color:#fff !important;
  }

  /* remove any older pseudo dividers */
  #mobileMenu .mobile-nav > li > a::after{ display:none !important; }

  /* arrow ONLY when has children */
  #mobileMenu .mobile-nav > li.menu-item-has-children > a::before{
    content:"";
    width:8px; height:8px;
    flex:0 0 auto;
    border-right:2px solid rgba(255,255,255,.55);
    border-bottom:2px solid rgba(255,255,255,.55);
    transform:rotate(45deg); /* ▼ feel */
    margin-left:14px;
  }

  /* no arrow for items without submenu */
  #mobileMenu .mobile-nav > li:not(.menu-item-has-children) > a::before{
    content:none !important;
  }

  /* SUBMENU — always visible, clearly different */
  #mobileMenu .mobile-nav .sub-menu{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;

    margin:10px 0 2px !important;
    padding:0 0 0 22px !important;

    border-left:1px solid rgba(255,255,255,.10) !important;
  }

  #mobileMenu .mobile-nav .sub-menu a{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding:10px 12px !important;
    border-radius:12px !important;

    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;

    color:rgba(255,255,255,.72) !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.06) !important;
  }

  #mobileMenu .mobile-nav .sub-menu a::after{
    content:"↗";
    opacity:.55;
    font-size:12px;
  }

  #mobileMenu .mobile-nav .sub-menu a:hover{
    color:var(--brand-primary) !important;
    border-color:rgba(212,225,87,.22) !important;
    background:rgba(212,225,87,.08) !important;
  }
}

/* MOBILE MENU ROW LAYOUT: text left, arrow right */
#mobileMenu .mobile-nav > li > a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
}

/* submenu arrow button always on right */
#mobileMenu .mobile-nav > li.has-sub > a{
  padding-right:54px !important; /* ruum noolele */
  position:relative !important;
}

#mobileMenu .vl24-subtoggle{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* =========================================
FIX — MOBILE SUBMENU REMOVE DESKTOP BACKGROUND
ainult mobile overlay sees
========================================= */

@media (max-width:1024px){

  /* ainult mobile menu sees */
  #mobileMenu .sub-menu{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    box-shadow:none !important;
    border:0 !important;

    /* eemaldab desktop glass feeli */
  }

  /* eemaldab selle rombi/kolmnurga ülevalt */
  #mobileMenu .sub-menu::before{
    display:none !important;
    content:none !important;
  }

}

/* =========================================
MOBILE OVERLAY SUBMENU — TOGGLE FIX (NO DESKTOP TOUCH)
PASTE ABSOLUTE END OF header.css
========================================= */
@media (max-width:1024px){

  /* 1) MOBILE MENU SUBMENU on vaikimisi peidus */
  #mobileMenu .mobile-nav li > .sub-menu{
    display:none !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* remove desktop diamond only inside mobile overlay */
  #mobileMenu .mobile-nav li > .sub-menu::before{
    display:none !important;
    content:none !important;
  }

  /* 2) Kui JS paneb .menu-item-open, siis näita submenu */
  #mobileMenu .mobile-nav li.menu-item-open > .sub-menu{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin:10px 0 2px !important;
    padding:0 0 0 22px !important;
  }

  /* 3) Kindluse mõttes: ära lase desktop “blur/opacity/transform” animatsioonidel mobile overlay’s mõjutada */
  #mobileMenu .mobile-nav li > .sub-menu,
  #mobileMenu .mobile-nav li > .sub-menu li{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }
}


/* =====================================================
VL24 MOBILE LANGUAGE SWITCHER — FULL FLAG CIRCLES
RESET VERSION (overrides everything)
===================================================== */

@media (max-width:1024px){

  /* container */
  .mobile-menu .mobile-lang{
    width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    margin-top:28px !important;
    padding-top:20px !important;

    border-top:1px solid rgba(255,255,255,.12) !important;
  }

  /* remove any previous styling */
  .mobile-menu .mobile-lang *,
  .mobile-menu .mobile-lang ul,
  .mobile-menu .mobile-lang li{
    background:none !important;
    box-shadow:none !important;
    border:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* flags row */
  .mobile-menu .mobile-lang ul{
    display:flex !important;
    gap:18px !important; /* ⭐ spacing ringide vahel */
    justify-content:center !important;
  }

  /* flag link = circle */
  .mobile-menu .mobile-lang a{
    display:block !important;

    width:52px !important;
    height:52px !important;

    border-radius:50% !important;
    overflow:hidden !important;

    transform:none !important;
    transition:transform .2s ease !important;
  }

  /* flag fills entire circle */
  .mobile-menu .mobile-lang img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
    display:block !important;
  }

  /* hover */
  .mobile-menu .mobile-lang a:hover{
    transform:scale(1.08) !important;
  }

  /* active language ring */
  .mobile-menu .mobile-lang .current-lang a,
  .mobile-menu .mobile-lang .pll-current-lang a{
    outline:2px solid var(--brand-primary) !important;
    outline-offset:2px !important;
  }

}

@media (max-width:1024px){
  .mobile-menu .mobile-lang{
    border-top:none !important;
    padding-top:0 !important;
  }
}

/* =================================
REMOVE BULLETS FROM POLYLANG FLAGS
================================= */

.mobile-menu .mobile-lang ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}

.mobile-menu .mobile-lang li{
  list-style:none !important;
}

/* =================================
SPACE BETWEEN MOBILE FLAGS
================================= */

.mobile-menu .mobile-lang ul{
  display:flex !important;
  gap:14px !important; /* ← MUUDA siin spacing */
}

/* safety kui gap ei rakendu */
.mobile-menu .mobile-lang li{
  margin:0 7px !important;
}

/* =================================
HD FLAGS — POLYLANG SAFE VERSION
================================= */

/* Eesti */
.mobile-lang .lang-item-et img{
  content:url("https://flagcdn.com/w80/ee.png");
}

/* English */
.mobile-lang .lang-item-en img{
  content:url("https://flagcdn.com/w80/gb.png");
}

/* Russian */
.mobile-lang .lang-item-ru img{
  content:url("https://flagcdn.com/w80/ru.png");
}