/* ============================================================
   FINKI – HEADER EXTRAS: page-content линкови, language toggle, mega-menu active/стилови (оригинално на крајот на main.css)
   (извадено од main.css без промени во правилата или редоследот)
   ============================================================ */

/* =========================================================
   LANGUAGE TOGGLE (MK / EN) – SMALL + HOLLOW THUMB
   ========================================================= */

/* Wrapper */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  user-select:none;
}

/* Labels */
.lang{
  color:#fff;
  opacity:.7;
  font-weight:400;
  font-size:1em;
  letter-spacing:.04em;
  transition:opacity .2s ease;
}
.lang--active{ opacity:1; }

/* Track (мал) */
.lang-toggle__track{
  width:30px;
  height:15px;
  border:1px solid #fff;
  border-radius:999px;
  position:relative;
  display:inline-block;
  flex:0 0 auto;
}

/* Thumb (шупливо кружче) */
.lang-toggle__thumb{
  width:10px;
  height:10px;
  background:transparent;
  border:1px solid #fff;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:3px;                  /* ✅ MK позиција */
  transform:translateY(-50%);
  transition:left .22s ease;
  box-sizing:border-box;
}

/* ✅ EN позиција (динамично пресметано) */
.lang-toggle[data-lang="en"] .lang-toggle__thumb{
  left: calc(100% - 10px - 3px);  /* thumb width (10px) + padding (3px) */
}





/* =========================================================
   MAIN MENU underline for active item (Max Mega Menu)
   ========================================================= */

/* Top-level links (директни деца на главниот UL) */
.mega-menu > li > a.mega-menu-link{
  border-bottom: 3px solid transparent !important; /* место за underline */
}

/* Активно само TOP level (current/ancestor) */
.mega-menu > li.mega-current-menu-item > a.mega-menu-link,
.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link,
.mega-menu > li.mega-current-page-ancestor > a.mega-menu-link,
.mega-menu > li.current-menu-item > a.mega-menu-link,
.mega-menu > li.current-menu-ancestor > a.mega-menu-link,
.mega-menu > li.current_page_ancestor > a.mega-menu-link{
  border-bottom-color:#2b92d0 !important;
}


.topbar-menu > li > a:hover{
text-decoration: none;
}

.lang-toggle,
.lang-toggle:hover,
.lang-toggle:focus,
.lang-toggle:active,
.lang-toggle .lang,
.lang-toggle .lang:hover{
  text-decoration: none !important;
}

/* индикаторот да не зема width во редот */
.mega-menu > li.mega-menu-item > a.mega-menu-link{
  position: relative !important;
}

.mega-menu > li.mega-menu-item > a.mega-menu-link .mega-indicator{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}













/* =========================================================
   MAIN MENU dropdown sizing fix (Max Mega Menu)
   ========================================================= */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{
	left: -410px;
    top: 74px;
}


























/* ============================================================
   MEGA MENU (HEADER) – Blue background + white text + bullets
   Goal: 1:1 style like screenshot
============================================================ */

/* 1) Mega menu dropdown background */
.mega-menu .mega-sub-menu {
    background: #2257ab !important;
}

/* 2) All links in mega menu = white */
.mega-menu .mega-sub-menu a {
    color: #fff !important;
}

/* Hover (optional subtle highlight) */
.mega-menu .mega-sub-menu a:hover {
    color: #E1E1E1 !important;
    background: transparent !important;
}

/* 3) Sub-menu items styling - remove border, add bullet */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    border-bottom: none;
    text-decoration: none;
    position: relative;
    padding-left: 14px; /* space for bullet */
}

/* 4) Add bullet before sub-menu links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-65%);
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* 5) First child (header/title) styling - centered with min-height */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:first-child > a.mega-menu-link {
    display: flex;
    align-items: center; /* vertical centering */
    min-height: 60px;
}













/* =========================
   SEARCH OVERLAY
========================= */

.search-overlay{
  position: fixed;
  inset: 0;
  background: rgba(44,49,121,0.85);
  z-index: 9999;

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

  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.search-overlay.is-active{
  opacity: 1;
  visibility: visible;
}

/* =========================
   SEARCH FORM (WHITE BOX)
========================= */

.search-overlay__form{
  position: relative;                 /* ✅ anchor за X */
  background: #fff;
  width: min(720px, 90vw);
  min-height: 160px; 
  padding: 40px 50px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* =========================
   CLOSE BUTTON (X)
========================= */

.search-overlay__close{
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 30px;
  background: none;
  border: 0;
  color: #757575;
  cursor: pointer;
  line-height: 1;
}

.search-overlay__close:hover{
  opacity: 0.75;
}

/* =========================
   CLOSE BUTTON (X) on search bar
========================= */

.search-overlay__input::-webkit-search-cancel-button{
  display: none;
}

/* =========================
   INPUT
========================= */

.search-overlay__input{
  flex: 1;
  border: 0;
  border-bottom: 1px solid #ccc;
  font-size: 22px;
  padding: 10px 0;
  outline: none;
}

/* =========================
   SUBMIT
========================= */

.search-overlay__submit{
  background: none;
  border: 0;
  font-size: 10px;
  cursor: pointer;
}



/*TAGS LABEL*/

.home-event-card__image,
.project-card__img {
	position: relative;
	overflow: hidden;
}

.home-event-card__tag-badge,
.project-card__tag-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;

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

	padding: 5px 9px;

	background: var(--wp--preset--gradient--midnight);
	color: #ffffff;

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
@media (max-width: 767px) {
	.home-event-card__tag-badge,
	.project-card__tag-badge {
		top: 10px;
		right: 10px;
		padding: 6px 10px;
		font-size: 10px;
		letter-spacing: 0.12em;
	}
}