/* ===============================
   GLOBÁLIS SZÍNRENDSZER
=============================== */
:root {
	--c1: rgba(0, 166, 170, 1);   /* türkizkék / aqua – élénk, hűvös kékeszöld */
	--c2: rgba(55, 235, 250, 1);  /* világos ciklámen-kék / neon türkiz – világos, élénk, fluoreszkáló hatás */
	--c3: rgba(1, 52, 64, 1); /*  sötét türkizes / mély árnyalat */ 
	--c4: rgba(54, 114, 138, 1);  /* sötét türkiz / kékeszöld – mély, elegáns */
	--c5: rgba(35, 104, 111, 1);  /* még sötétebb kékeszöld / petrol – erőteljes, komoly */
	--c6: rgba(11, 159, 189, 1);     /* világos türkiz / accent */ 
}


/*	--c1: #00A6AA;  /* türkizkék / aqua – élénk, hűvös kékeszöld, figyelemfelkeltő */
/*	--c2: #37EBFA;  /* világos ciklámen-kék / neon türkiz – nagyon világos, élénk, majdnem fluoreszkáló hatás */
/*	--c3: #013440;  /*  sötét türkizes / mély árnyalat */ 
/*	--c4: #36728A;  /* sötét türkiz / kékeszöld – mély, elegáns, stabil megjelenés */
/*/	--c5: #23686F;  /* még sötétebb kékeszöld / petrol – erőteljes, komoly, földes tónus */
/*	--c6: #0B9FBD;  /*  világos türkiz / accent */ 




/* FULLSCREEN OVERLAY */
.blog-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: none;
  z-index: 9999; /* overlay maga */
}

.overlay-bg {
  position: absolute;
  inset: 0;
  /*background: var(--c6);*/
}

.overlay-content {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ===============================
   FULLSCREEN MOZGÓ SÁVOK
=============================== */
.overlay-item {
  position: relative;
  flex: 1;
  width: 100vw;              /* TELJES SZÉLESSÉG */
  margin-left: calc(50% - 50vw); /* KIKÖZÉPÍTÉS viewporthoz */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 30px 0 60px rgba(0,0,0,0.25);
  font-size: clamp(22px, 4vw, 42px);
  font-weight: bold;
  color: #fff;
  text-decoration: none;

  background: var(--bg);     /* A SÁV A HÁTTÉR */

  transform: translateX(-110%); /* TELJES PANEL MOZOG */
  opacity: 0;

  transition:
    transform .7s cubic-bezier(.7,0,.2,1),
    opacity .5s ease;
}


/* LÉPCSŐZETES ANIMÁCIÓ */
.blog-overlay.open .overlay-item:nth-child(1){transition-delay:.05s;transform:translateX(0);opacity:1;}
.blog-overlay.open .overlay-item:nth-child(2){transition-delay:.12s;transform:translateX(0);opacity:1;}
.blog-overlay.open .overlay-item:nth-child(3){transition-delay:.19s;transform:translateX(0);opacity:1;}
.blog-overlay.open .overlay-item:nth-child(4){transition-delay:.26s;transform:translateX(0);opacity:1;}
.blog-overlay.open .overlay-item:nth-child(5){transition-delay:.33s;transform:translateX(0);opacity:1;}
.blog-overlay.open .overlay-item:nth-child(6){transition-delay:.40s;transform:translateX(0);opacity:1;}

/* LEBEGŐ HAMBURGER */
/* ===== MOBIL NYÍL IKON ===== */
.overlay-toggle {
  position: fixed;
  right: 0;                 /* TAPAD A SZÉLHEZ */
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 80px;
  border-radius: 12px 0 0 12px;
  background: var(--c1);
  z-index: 9999; /* mindig fölötte */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -5px 0 20px rgba(0,0,0,.25);
}

/* Töröljük a hamburger csíkokat */
.overlay-toggle span { display:none; }

/* Nyíl ikon */
.overlay-toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(-135deg); /* → */
  transition: transform .3s ease;
}

/* Nyitott állapotban vissza nyíl */
.overlay-toggle.active::before {
  transform: rotate(45deg); /* ← */
}


@media(min-width: 1024px){
  .overlay-toggle {
    right: 20px;
    top: 120px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    transform:none;
  }
  .overlay-toggle::before { display:none; }
  .overlay-toggle span { display:block; }
}