/* Offset fixed header below WP admin bar */
body.admin-bar .site-header {
  top: 32px; /* default height of WP admin bar */
}

/* Optional: adjust inner container if needed */
body.admin-bar .site-header-inner {
  height: 100px; /* keep same height */
}

/*----------------------------------------------------*/
/* Template Header Background (pozadna headera definisanog na template fajlovima koji uređuju arhivu, kategorije i single postove i akcije (plava gradient pozadina )*/

.template-header-background {
  position: absolute;
  top: 0; /* Adjust if header has top margin */
  left: 0;
  width: 100%;
  height: 99px;
  background: linear-gradient(#004782, #3b82cd);

  z-index: -1; /* Behind the header */
}

/* Template header background offset for WP admin bar */
body.admin-bar .template-header-background {
  top: 32px; /* desktop WP admin bar height */
}

@media screen and (max-width: 782px) {
  body.admin-bar .template-header-background {
    top: 46px; /* mobile WP admin bar height */
  }

  .template-header-background {
    height: 59px;
  }
}

/*----------------------------------------------------*/

/* Override theme constraint */
.site-header,
.site-header-inner {
  max-width: 100% !important; /* ensure header wrapper is always full width */
  width: 100%;
}

/* === Header Wrapper === */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%; /* full width background */
  z-index: 1000;
  background: transparent;
  padding: 0 20px;
}

.site-header-inner {
  position: relative;
  display: flex;
  justify-content: space-between; /* logo left, menu right */
  align-items: center; /* vertical centering */
  height: 100px;
  max-width: 1240px !important; /* same as .template-container */
  box-sizing: content-box;
  border-bottom: 1px solid white;
  margin: 0 auto; /* center horizontally */
}

/*.site-header-inner::after{
  content: '';
  position: absolute;
  bottom:0;
  width: calc(100% - 40px);
  height: 1px;
  background-color: #ffffff;
}*/

/* === Elementor hero fix === */
.hero-section {
  position: relative;
  z-index: 0;
}

/* === Logo === */

.site-logo img {
  height: 30px;
  width: auto;
  display: block;
  max-width: 100%; /* prevents overflow */
  object-fit: contain; /* keeps correct proportions */
  flex-shrink: 0; /* stops flexbox from squishing the logo */
}

/* === Navigation === */
.main-navigation .main-menu-items {
  display: flex;
  flex-wrap: nowrap; /* keep items in one line */
  gap: clamp(10px, 3vw, 40px); /* flexible gap: min 10px, max 40px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .main-menu-items li a {
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: clamp(14px, 1.5vw, 16px); /* shrink smoothly, min 14px */
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  line-height: 1;
  transition: color 0.3s ease;
  white-space: nowrap; /* prevents breaking into 2 lines */
}

/* Reset nav margins that push it up */
.main-navigation {
  margin: 0;
  padding: 0;
}

.main-navigation .main-menu-items li a:hover {
  color: var(--e-global-color-accent, #ccc);
}

.main-navigation .main-menu-items li.menu-phone a::before,
.main-navigation .main-menu-items li.menu-email a::before {
  content: "";
  display: inline-block;
  width: 16px; /* adjust to your icon’s size */
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: middle;
}

/* individual icons in top menu - da ide u header.css*/
.main-navigation .main-menu-items li.menu-phone a::before {
  background-image: url("https://kielo.rs/wp-content/uploads/2025/09/phone-icon.png");
}

.main-navigation .main-menu-items li.menu-email a::before {
  background-image: url("https://kielo.rs/wp-content/uploads/2025/09/mail-icon.png");
}

/* */

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

@media (max-width: 768px) {
  .site-header {
    height: 60px !important;
  }

  .site-header-inner {
    height: 60px !important;
    /*		padding-left: 20px ;
		padding-right: 20px ;	*/
    box-sizing: border-box;
  }
  /*  .site-header-inner::after{
    width: calc(100% - 40px);
  } */

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

  .site-logo-mobile .custom-logo-link img {
		height: 25px;
		width: auto;
	}
  
  
}

@media (max-width: 575px) {
  .site-header {
    padding: 0 20px !important;
  }
}

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

/* === Hamburger menu === */
.hamburger {
  display: none; /* hide on desktop view*/
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}

.mobile-nav-head,
.mobile-nav-foot {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Show hamburger on mobile */
  .hamburger {
    display: flex;
  }

  /* Hide nav by default */
  .main-navigation {
    display: none; /* hidden until opened */
    position: absolute; /* take out of normal flow */
    left: 50%; /* center using transform */
    transform: translateX(-50%);
    top: 0; /* place directly below header */
    width: 100vw; /* full viewport width (no gutters) */
    max-width: 100vw;
    box-sizing: border-box;
    background: #004782; /* your mobile bg */
    z-index: 9999; /* above other content */
    padding: 0; /* internal padding handled inside */
    overflow-y: auto; /* allow scrolling if long */
  }

  /* Vertical list */
  .main-navigation .main-menu-items {
    flex-direction: column;
    gap: 35px;
    text-align: center;
    padding: 35px 0;
  }

  .main-navigation .main-menu-items li a {
    font-size: 24px;
    font-weight: 500;
  }

  /* Show nav when active */
  .main-navigation.active {
    display: block;
  }

  .mobile-nav-head,
  .mobile-nav-foot {
    display: flex;
    flex-direction: row;
    /* border: 2px solid green; */
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
  }
  .mobile-nav-head {
    height: 60px;
    border-bottom: 1px solid #95d22e;
  }
  .mobile-nav-foot {
    height: 80px;
    border-top: 1px solid #95d22e;
  }

  .mobile-close-button {
    cursor: pointer;
    /* margin-left: auto;  push to right side */
    display: flex;
    align-items: center;
  }

  .mobile-close-button img {
    width: 24px; /* adjust size */
    height: auto;
  }

  .mobile-nav-foot-logo-section {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }

  .mobile-nav-foot-logo-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: white;
  }
}