/* ============================================================
   FINKI – BASE: reset, токени, глобални layout helpers
   (извадено од main.css без промени во правилата)
   ============================================================ */

/* ============================================================
   BASIC RESET & GLOBAL SETTINGS
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Главна ширина за содржина – desktop + tablet: ~86% */
  --layout-width: min(86vw, 1688px);
}

/* Phone: малку поширока содржина (~90% од екранот) */
@media (max-width: 768px) {
  :root {
    --layout-width: 90vw;
  }
}

body {
  background: #f5f5f5;          /* светло сива позадина */
  position: relative;
  z-index: 0;
  overflow-x: hidden;           /* да не се појавува хоризонтален scroll */
  font-family: "Fira Sans", sans-serif;
  color: #000000;
  margin: 0px;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
   GLOBAL LAYOUT HELPERS – СÈ НА ИСТА ШИРИНА КАКО HERO
   ============================================================ */
.container,
.homepage,
.topbar-inner,
.home-events__inner,
.home-projects-news__inner,
.quick-icons__inner,
.jobs-internships__inner,
.site-footer__inner {
  width: var(--layout-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Generic container ако ти треба во други темплејти */
.container {
  /* нема фиксна ширина, ја зема var(--layout-width) од горе */
}

/* ГЛАВЕН WRAPPER ЗА ПОЧЕТНАТА – hero + study-boxes + друго */
.homepage {
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

/* ============================================================
   ДЕКОРАТИВНИ ЕЛЕМЕНТИ – круг (горе лево) и линија (десно)
   Позиционирани во однос на body, не на .homepage,
   за да можат да излегуваат во белите маргини.
   ============================================================ */
.deco-circle,
.deco-line {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.deco-circle {
    top: -25vw;      /* -30rem ≈ -480px */
    left: -12.5vw;   /* -15rem ≈ -240px */
    width: 45.8vw;   /* 55rem ≈ 880px */
    height: 45.8vw;
}

.deco-line {
    top: 18.3vw;     /* 22rem ≈ 352px */
    right: 1.7vw;    /* 2rem ≈ 32px */
    rotate: 33deg;
}

/* Херото мора да биде над декорациите */
.hero {
  position: relative;
  z-index: 1;
}

/* Скриј ги декорациите на мобилен – нема бели маргини за нив */
@media (max-width: 768px) {
  .deco-circle,
  .deco-line {
    display: none;
  }
}








/* WIDER MENU */
@media (min-width: 992px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{
	width: 1000px;
    margin-left: -542;
}
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{
	margin-top: 14;}
}

/*delete duplicate menu*/
.mega-menu-toggle{
	display: none !important;
}

@media (max-width: 1024px){
  /* смени primary со твојата menu location ако е друга */
  #mega-menu-wrap-primary #mega-menu-primary{
    display: block !important;
  }
}

@media (max-width: 768px){

  /* ✅ 1) ЕДЕН scroll за целиот отворен мобилен панел */
  #mega-menu-wrap-primary{
    max-height: calc(100vh - 120px) !important; /* намести според висина на header */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ 2) Забрани submenu-a да имаат свој scroll (да нема 2 скрола) */
  #mega-menu-wrap-primary ul.mega-sub-menu{
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* ✅ 3) Ако нешто го сече панелот */
  .site-header{
    overflow: visible !important;
  }
}





a.hp-more{
	text-decoration: none;
}

a.hp-more:hover{
	color: #2b7dbd;
}



.site-banner{
  position: relative;
  height: 120px;           /* мал банер */
  background-size: cover;
  background-position: center;
  overflow: hidden;
	width: var(--layout-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.site-banner__overlay{
  position: absolute;
}

@media (max-width: 768px){
  .site-banner{ height: 90px; }
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
	font-weight: 500 !important;
}
li.mega-menu-item.mega-current-menu-item{
	font-weight: 500 !important;
}

li.mega-menu-item.mega-current-menu-ancestor{
	font-weight: 500 !important;
}

.page-content a{
  color: #2b92d0;
}
.page-content a:hover{
  text-decoration: none;
  color: #2c3179;
  transition: color 0.25s ease-in-out;
}