/* ==========================================================================
   KHET // Navigation CSS
   TYPO3 Sitepackage: Resources/Public/Css/nav.css
   ========================================================================== */

.khet-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--khet-z-nav);
  padding: 1.75rem 2rem;
  /* Fully transparent: the footage runs edge to edge like a film frame.
     Legibility comes from the soft text-shadow below, not from a bar. */
  background: transparent;
  pointer-events: none;
  transition: padding var(--khet-transition-fast);
  /* One crisp contact shadow + one wide soft one: legible on bright sky without muddying the letters */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 14px rgba(0, 0, 0, 0.3);
}

/* Scrolled state */
.khet-nav.is-scrolled {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.khet-nav__inner {
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Logo (Left)
   -------------------------------------------------------------------------- */
.khet-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--khet-color-white);
  font-family: var(--khet-font-nav);
  font-weight: var(--khet-font-weight-nav);
  font-size: 1.125rem;
  letter-spacing: var(--khet-tracking-logo);
  text-transform: uppercase;
  transition: color var(--khet-transition-fast), text-shadow var(--khet-transition-fast);
}

/* Gold pyramid-and-sun mark beside the wordmark (inline SVG, colour via currentColor) */
.khet-nav__logo {
  gap: 0.6rem;
}

.khet-nav__mark {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--khet-color-gold-bright);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 8px rgba(var(--khet-color-gold-rgb), 0.35));
  transition: transform var(--khet-transition-normal);
}

.khet-nav__logo:hover .khet-nav__mark {
  transform: translateY(-1px);
}

.khet-nav__logo:hover {
  color: var(--khet-color-gold-bright);
  text-shadow: 0 0 16px var(--khet-color-gold-glow);
}

/* --------------------------------------------------------------------------
   Navigation Links (Center)
   -------------------------------------------------------------------------- */
.khet-nav__links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
}

.khet-nav__item {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Interpunct Separator between items */
/* Original layout: plain spaced links, no separators */

.khet-nav__link {
  text-decoration: none;
  color: var(--khet-color-white);
  font-family: var(--khet-font-nav);
  font-size: var(--khet-font-size-nav);
  font-weight: var(--khet-font-weight-nav);
  letter-spacing: var(--khet-tracking-nav);
  text-transform: uppercase;
  transition: color var(--khet-transition-fast), opacity var(--khet-transition-fast);
}

.khet-nav__link:hover {
  color: var(--khet-color-gold-bright);
  opacity: 1;
}

/* Soft shadow pool behind the place names only. It has no edges, so the nav
   still reads as transparent, but bright skies (the sun over Giza, the water
   surface off Alexandria) no longer wash the labels out. */
.khet-nav__links {
  position: relative;
}

.khet-nav__links::before {
  content: '';
  position: absolute;
  inset: -3rem -9rem;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    rgba(0, 0, 0, 0.07) 65%,
    rgba(0, 0, 0, 0.02) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Place currently on screen: bright text + thin gold underline */
.khet-nav__link {
  position: relative;
  padding: 0.35rem 0;
}

.khet-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--khet-color-gold);
  transform: scaleX(0);
  transition: transform var(--khet-transition-normal);
}

.khet-nav__link.is-active {
  color: var(--khet-color-gold-bright);
}

.khet-nav__link.is-active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   CTA Pill Button (Right)
   -------------------------------------------------------------------------- */
.khet-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--khet-font-nav);
  font-size: var(--khet-font-size-cta);
  font-weight: var(--khet-font-weight-nav);
  letter-spacing: var(--khet-tracking-nav);
  text-transform: uppercase;
  color: var(--khet-color-white);
  padding: 0.65rem 1.4rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  background-color: transparent;
  transition: border-color var(--khet-transition-fast),
              background-color var(--khet-transition-fast),
              color var(--khet-transition-fast),
              box-shadow var(--khet-transition-fast),
              transform var(--khet-transition-fast);
}

.khet-nav__cta:hover {
  border-color: var(--khet-color-gold);
  background-color: rgba(var(--khet-color-gold-rgb), 0.12);
  color: var(--khet-color-gold-bright);
  box-shadow: 0 0 20px rgba(var(--khet-color-gold-rgb), 0.25);
  transform: translateY(-1px);
}

.khet-nav__cta:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints
   Spec: Hide center links under 760px
   -------------------------------------------------------------------------- */
/* Five place names need more room than the original four links */
@media (max-width: 1080px) {
  .khet-nav__links {
    gap: 1.25rem;
  }
}

@media (max-width: 760px) {
  .khet-nav {
    padding: 1.25rem 1.25rem;
  }

  .khet-nav__links {
    display: none;
  }

  .khet-nav__cta {
    padding: 0.55rem 1.1rem;
    font-size: 0.6875rem;
  }
}