/* ==========================================================================
   HEADER STYLES
   Desktop first (>1023px), zatim mobile/tablet override na 1023px i nize.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;

  padding: 0 var(--header-padding-x-desktop);

  border-bottom: 1px solid var(--color-border);
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: height var(--transition-fast), padding var(--transition-fast);
}

.site-header__inner {
  width: 100%;
  max-width: var(--container-width);
  height: var(--header-height-desktop);

  display: grid;
  grid-template-columns: var(--header-side-col) 1fr var(--header-side-col);
  align-items: center;
  transition: height var(--transition-fast);
}

/* Logo - kolona 1, fiksna sirina */
.site-header__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--header-side-col);
  flex-shrink: 0;
}

.site-header__logo svg {
  display: block;
  height: 48px;
  width: auto;
  transition: opacity var(--transition-fast);
}

/* Nav wraps nav-links, centriran u koloni 2 (1fr) */
.site-header__nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

/* CTA dugme - kolona 3, fiksna sirina, skroz desno */
.site-header__cta {
  grid-column: 3;
  justify-self: end;
}

.site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--fs-nav);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh-nav);
  white-space: nowrap;

  transition: color var(--transition-fast);
}

.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
  color: var(--color-white);
}

.site-header__nav-link svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast), stroke var(--transition-fast);
}

.site-header__nav-link:hover svg path {
  stroke: var(--color-white);
}

/* CTA Button */
.btn-primary {
  display: flex;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0);
  background: var(--main-blue);

  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family);
  font-size: var(--fs-btn);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-btn);
  white-space: nowrap;

  transition: background var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  opacity: 1;
}

/* Hamburger - sakriven na desktopu */
.site-header__toggle {
  display: none;
}

/* ==========================================================================
   MOBILE / TABLET  (<= 1023px)
   ========================================================================== */
@media (max-width: 1023px) {

  .site-header {
    padding: var(--header-padding-y-mobile) var(--header-padding-x-mobile);
  }

  .site-header__inner {
    height: var(--header-height-mobile);
    position: relative;
  }

  .site-header__logo svg {
    height: 32px;
  }

  /* Sakrivamo desktop nav + dugme kad je meni zatvoren na mobileu,
     prikazuju se unutar full-height overlay menija */
  .site-header__nav-wrapper {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height-mobile));

    margin-left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;

    background: var(--header-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  }

  .site-header.is-open .site-header__nav-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-header__nav {
    flex-direction: column;
    gap: 24px;
  }

  .site-header__nav-link {
    font-size: 20px;
    line-height: 28px;
  }

  /* Dugme nestaje kad je meni otvoren (po specifikaciji), prikazuje se unutar menija */
  .site-header__cta {
    display: none;
  }

  .site-header.is-open .site-header__cta {
    display: flex;
  }

  /* Hamburger */
  .site-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
  }

  .site-header__toggle svg {
    width: 32px;
    height: 32px;
    overflow: visible;
  }

  .site-header__toggle .burger-line {
    fill: var(--color-white);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    transform-box: fill-box;
    transform-origin: center;
  }

  /* Transformacija u X kad je meni otvoren */
  .site-header.is-open .burger-line--top {
    transform: translateY(5px) rotate(45deg);
  }

  .site-header.is-open .burger-line--middle {
    opacity: 0;
  }

  .site-header.is-open .burger-line--bottom {
    transform: translateY(-5px) rotate(-45deg);
  }
}


/* ==========================================================================
   LETTER "UP" ANIMATION + INLINE EDITABLE HELPERS - PRIVREMENO ISKLJUCENO
   TODO: letter-anim je duplirao tekst (npr "Features" 2x) i editable outline
   (isprekidane linije) nije bio poželjan. Vratiti/doraditi kasnije.
   ========================================================================== */

/*
.letter-anim {
  display: inline-block;
  overflow: hidden;
  height: var(--lh-nav);
  position: relative;
}

.letter-anim__wrapper {
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-letter);
}

.letter-anim__row {
  display: block;
  height: var(--lh-nav);
  line-height: var(--lh-nav);
  white-space: nowrap;
}

.site-header__nav-link:hover .letter-anim__wrapper {
  transform: translateY(calc(-1 * var(--lh-nav)));
}

.geist-editable {
  cursor: text;
  outline-offset: 4px;
  transition: outline var(--transition-fast);
}

.geist-editable:hover {
  outline: 1px dashed rgba(91, 138, 225, 0.6);
}

.geist-editable.is-editing {
  outline: 2px solid var(--main-blue);
  background: rgba(91, 138, 225, 0.08);
}
*/