/* ===============================
   HEADER BASE
=============================== */

.site-header{
  position: fixed;
    isolation: isolate;
  z-index: 99999;

  top:0;
  left:0;
  width:100%;
  z-index:1500;

  /* START: täiesti läbipaistev */
  background: transparent;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow: none;

  transition:
    background .35s ease,
    backdrop-filter .35s ease,
    box-shadow .35s ease;
}


/* ===============================
   INNER
=============================== */

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  height:80px;

  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad);
  width:100%;
}


/* ===============================
   NAV
=============================== */

.main-nav{
  display:flex;
  align-items:center;
  gap:40px;
}

.main-menu{
  display:flex;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
}

.main-menu a{
  color:#fff;
  font-weight:500;
  text-decoration:none;
  letter-spacing:.02em;
  position:relative;
}

.main-menu a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#ffb347;
  transition:.3s;
}

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


.header-phone{
  color:#fff;
  font-weight:500;
  opacity:.85;
}


/* ===============================
   HAMBURGER (3 DOT)
=============================== */

.menu-toggle{
  display:none;
  width:44px;
  height:44px;

  border:1px solid rgba(255,255,255,.3);
  border-radius:10px;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);

  cursor:pointer;

  align-items:center;
  justify-content:center;
  gap:5px;
}

.menu-toggle span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:white;
}


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

.mobile-menu{
  position:fixed;
  top:0;
  right:-100%;

  width:100%;
  height:100vh;

  background:rgba(15,23,42,.92);
  backdrop-filter:blur(18px);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  transition:.4s ease;
}

.mobile-menu.open{
  right:0;
}

.mobile-nav{
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}

.mobile-nav li{
  margin:18px 0;
}

.mobile-nav a{
  font-size:22px;
  color:#fff;
  text-decoration:none;
}

.mobile-phone{
  margin-top:40px;
  color:#fff;
  opacity:.7;
}


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

@media(max-width:1024px){

  /* peida logo kõrval menüü */
  .primary-nav{
    display:none;
  }

  /* näita hamburgerit */
  .menu-toggle{
    display:flex;
  }

}

/* ===============================
   HEADER LOGO IMAGE
=============================== */

.header-logo{
  height:24px;          /* sama tunne nagu referentsil */
  width:auto;

  display:block;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.4))
    drop-shadow(0 0 8px rgba(255,220,160,.18));

  transition:all .3s ease;
}


/* hover glow */
.site-logo:hover .header-logo{
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.5))
    drop-shadow(0 0 14px rgba(255,200,120,.35));
}

/* ===============================
   HEADER STRUCTURE
=============================== */

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

.header-right{
  display:flex;
  align-items:center;
  gap:20px;
}


/* ===============================
   PRIMARY MENU (logo kõrval)
=============================== */

.primary-nav{}

.primary-menu{
  display:flex;
  gap:26px;
  list-style:none;
  margin:0;
  padding:0;
}

.primary-menu a{
  color:#fff;
  font-weight:500;
  text-decoration:none;
  opacity:.9;
}

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

.primary-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.menu-toggle {
 display: flex;
}

/* =====================================
   CLEAN DOT → X ANIMATION (2026)
===================================== */

.menu-toggle{
  position: relative;
  width: 44px;
  height: 44px;

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

  cursor: pointer;
}

/* All dots */
.menu-toggle span{
  position: absolute;

  width: 6px;
  height: 6px;

  background: #fff;
  border-radius: 50%;

  transition:
    transform .45s cubic-bezier(.4,0,.2,1),
    opacity .25s ease;
}

/* CLOSED: 3 dots */
.menu-toggle span:nth-child(1){
  transform: translateX(-10px);
}

.menu-toggle span:nth-child(2){
  transform: translateX(0);
}

.menu-toggle span:nth-child(3){
  transform: translateX(10px);
}

.menu-toggle span:nth-child(4),
.menu-toggle span:nth-child(5){
  opacity: 0;
}


/* OPEN → X */

.menu-toggle.active span:nth-child(2){
  opacity: 0;
}

.menu-toggle.active span:nth-child(1){
  transform: translate(-7px,-7px);
}

.menu-toggle.active span:nth-child(3){
  transform: translate(7px,-7px);
}

.menu-toggle.active span:nth-child(4){
  opacity: 1;
  transform: translate(-7px,7px);
}

.menu-toggle.active span:nth-child(5){
  opacity: 1;
  transform: translate(7px,7px);
}

/* =====================================
   WORKING DOT → X (FIXED)
===================================== */

.menu-toggle{
  position: relative;
  width: 44px;
  height: 44px;

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

/* all dots */
.menu-toggle span{
  position: absolute;

  width: 6px;
  height: 6px;

  background: #fff;
  border-radius: 50%;

  transition: all .4s ease;
}

/* CLOSED STATE (3 dots) */
.menu-toggle span:nth-child(1){
  transform: translateX(-10px);
  opacity:1;
}

.menu-toggle span:nth-child(2){
  transform: translateX(0);
  opacity:1;
}

.menu-toggle span:nth-child(3){
  transform: translateX(10px);
  opacity:1;
}

.menu-toggle span:nth-child(4),
.menu-toggle span:nth-child(5){
  opacity:0;
  transform: translate(0,0);
}


/* OPEN STATE → X */

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(1){
  transform: translate(-8px,-8px);
  opacity:1;
}

.menu-toggle.active span:nth-child(3){
  transform: translate(8px,-8px);
  opacity:1;
}

.menu-toggle.active span:nth-child(4){
  opacity:1;
  transform: translate(-8px,8px);
}

.menu-toggle.active span:nth-child(5){
  opacity:1;
  transform: translate(8px,8px);
}

/* FORCE MENU BUTTON ABOVE OVERLAY */

.menu-toggle{
  position: relative;
  z-index: 2000;
}


.mobile-menu{
  z-index: 1000;
}

/* =====================================
   HEADER MENU GROUP (REFERENCE STYLE)
===================================== */

.menu-group{
  display: flex;
  align-items: center;

  background: transparent;

  border: 1.4px solid rgba(255,255,255,.7);
  border-radius: 8px; /* nagu pildil */

  overflow: hidden; /* oluline: hoiab nurgad sirged */

  box-shadow:
    0 6px 18px rgba(0,0,0,.28);
}


/* buttons base */

.menu-group button{
  height: 36px;

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

  background: transparent;
  border: 0;

  cursor: pointer;

  transition: background .25s ease;
}


/* LEFT: DOT BUTTON (WIDER) */

.menu-toggle{
  width: 70px; /* laiem nagu näidisel */
}


/* RIGHT: DOC BUTTON (SQUARE) */

.menu-secondary{
  width: 40px;
}


/* divider */

.menu-group button + button{
  border-left: 1px solid rgba(255,255,255,.45);
}


/* hover (very subtle) */

.menu-group button:hover{
  background: rgba(255,255,255,.04);
}


/* ============================
   DOT STYLE (GRADIENT)
============================ */

.menu-toggle span{
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f6ddb4 100%
  );

  opacity: .95;
}


/* space between dots */

.menu-toggle{
  gap: 12px;
}


/* ============================
   DOC ICON
============================ */

.menu-secondary svg{
  opacity: .9;

  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.4))
    drop-shadow(0 0 6px rgba(255,210,140,.25));

  transition: .25s ease;
}

.menu-secondary:hover svg{
  opacity: 1;
  transform: scale(1.05);
}

/* =====================================
   LOGO SEPARATOR LINE
===================================== */

.header-left{
  position: relative;
}

/* vertical line after logo */

.site-logo{
  position: relative;
  padding-right: 26px; /* ruum joonele */
  margin-right: 0px;
}

.site-logo::after{
  content: "";

  position: absolute;
  top: 50%;
  right: 0;

  width: 1px;
  height: 32px; /* PIKEM */

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.75) 25%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.75) 75%,
    rgba(255,255,255,.15) 100%
  );

  transform: translateY(-50%);
}

/* =====================================
   HEADER TEXT SHADOW (REFERENCE)
===================================== */

/* Main menu links */
.primary-menu a,
.main-menu a,
.header-phone{

  text-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 0 6px rgba(0,0,0,.15);
}

.primary-menu a:hover,
.main-menu a:hover,
.header-phone:hover{

  text-shadow:
    0 2px 4px rgba(0,0,0,.6),
    0 0 8px rgba(0,0,0,.2);
}

/* =====================================
   CLICKABLE PHONE LINK
===================================== */

.header-phone{
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.header-phone:hover{
  text-decoration: none;
  opacity: .9;
}

/* =====================================
   HEADER PHONE BADGE
===================================== */

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

  text-decoration: none;
  color: #fff;

  font-weight: 500;
}


/* circle icon */

.phone-icon{
  width: 28px;
  height: 28px;

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

  border: 1.2px solid rgba(255,255,255,.6);
  border-radius: 50%;

  box-shadow:
    0 3px 10px rgba(0,0,0,.25);

  transition: .25s ease;
}


/* icon size */

.phone-icon svg{
  width: 14px;
  height: 14px;

  opacity: .9;
}


/* hover */

.header-phone:hover .phone-icon{
  background: rgba(255,255,255,.08);
  transform: scale(1.05);
}

.site-header.scrolled{
  background: rgba(32,34,52,0.55);

  backdrop-filter: blur(4px) saturate(200%) brightness(110%);
  -webkit-backdrop-filter: blur(4px) saturate(200%) brightness(110%);

  box-shadow:
    0 10px 30px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* FIX header glass stacking */

body{
  position: relative;
  z-index: 0;
}

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