/* ═══════════════════════════════════════════════════════════════════
   ASFH – BEM Navbar (extracted from style.css)
   Self-contained: hardcoded values, no external var deps
   Used on index.php while the rest of the page keeps style.v1.css
═══════════════════════════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 72px;
  display: flex;
  align-items: center;
  transition: background .25s ease, box-shadow .25s ease;
}

.navbar--transparent {
  background: transparent;
}

.navbar--solid {
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(38, 34, 98, .12);
}

.navbar__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 24px;
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.navbar__logo-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .15));
  transition: transform .2s ease;
}

.navbar__logo:hover .navbar__logo-img {
  transform: scale(1.04);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.navbar__link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}

.navbar--transparent .navbar__link {
  color: rgba(255, 255, 255, .9);
}

.navbar--transparent .navbar__link:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .15);
}

.navbar--solid .navbar__link {
  color: #1A1A2E;
}

.navbar--solid .navbar__link:hover {
  color: #E52E8A;
  background: #FFE3F6;
}

/* ── nav-right: lang + socials + burger ── */
.nav-right {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Language switch pill */
.navbar .lang-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .15);
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  transition: background .25s ease, border-color .25s ease;
}

.navbar--solid .lang-switch {
  background: #F2F2F7;
  border-color: rgba(38, 34, 98, .1);
}

.navbar .lang-switch .lang-btn {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #FFFFFF;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.navbar--solid .lang-switch .lang-btn {
  color: #6B6B80;
}

.navbar .lang-switch .lang-btn:hover {
  color: #FFFFFF;
  opacity: 1;
}

.navbar--solid .lang-switch .lang-btn:hover {
  color: #262262;
}

.navbar .lang-switch .lang-btn.active {
  background: #E52E8A;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(229, 46, 138, .3);
}

/* Dark variant (mobile menu) */
.lang-switch--dark {
  background: #F2F2F7;
  border-color: rgba(38, 34, 98, .1);
}

.lang-switch--dark .lang-btn {
  color: #6B6B80;
}

.lang-switch--dark .lang-btn:hover {
  color: #262262;
}

/* Social icons */
.navbar .social-icons {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2px;
}

.navbar .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #FFFFFF;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.navbar--solid .social-icons a {
  color: #262262;
}

.navbar .social-icons a:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-1px);
}

.navbar--solid .social-icons a:hover {
  color: #E52E8A;
  background: #FFE3F6;
}

/* Dark variant (mobile menu) */
.social-icons--dark a {
  color: #6B6B80;
  width: 36px;
  height: 36px;
}

.social-icons--dark a:hover {
  color: #E52E8A;
  background: #FFE3F6;
  transform: none;
}

/* Mobile footer row */
.navbar__mobile-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #F2F2F7;
  flex-wrap: wrap;
}

/* Mobile menu (burger) */
.navbar__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  border: none;
}

.navbar__burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.navbar--transparent .navbar__burger span {
  background: #FFFFFF;
}

.navbar--solid .navbar__burger span {
  background: #1A1A2E;
}

.navbar__mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: #FFFFFF;
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  z-index: 999;
}

.navbar__mobile.open {
  display: flex;
}

.navbar__mobile .navbar__link {
  color: #1A1A2E;
  font-size: 1rem;
  padding: 12px 16px;
}

.navbar__mobile .navbar__link:hover {
  background: #FFE3F6;
  color: #E52E8A;
}

/* ─── Navbar Dropdown ───────────────────────────────────────────── */
.navbar__item {
  position: relative;
  list-style: none;
}

.navbar__item > .navbar__link {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__item > .navbar__link::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  flex-shrink: 0;
}

.navbar__item:hover > .navbar__link::after,
.navbar__item:focus-within > .navbar__link::after {
  transform: rotate(-135deg) translateY(-2px);
}

.navbar__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(38, 34, 98, .16);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 1100;
}

.navbar__item:hover .navbar__dropdown,
.navbar__item:focus-within .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 700;
  color: #1A1A2E;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.navbar__dropdown a:hover {
  background: #FEF5ED;
  color: #E52E8A;
}

/* Mobile dropdown */
.navbar__mobile-group {
  display: flex;
  flex-direction: column;
}

.navbar__mobile-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A2E;
  cursor: pointer;
  border-radius: 8px;
  transition: background .25s ease, color .25s ease;
}

.navbar__mobile-group-label:hover {
  background: #FFE3F6;
  color: #E52E8A;
}

.navbar__mobile-group-label .chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
  flex-shrink: 0;
}

.navbar__mobile-group.open .navbar__mobile-group-label .chevron {
  transform: rotate(-135deg);
}

.navbar__mobile-submenu {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  gap: 2px;
}

.navbar__mobile-group.open .navbar__mobile-submenu {
  display: flex;
}

.navbar__mobile-submenu a {
  display: block;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 700;
  color: #6B6B80;
  border-radius: 8px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.navbar__mobile-submenu a:hover {
  background: #FEF5ED;
  color: #E52E8A;
}

/* ─── Layout offset for fixed navbar ─────────────────────────────────
   Activity bar (index) sits directly after the fixed navbar in the DOM,
   so without an offset the navbar overlays it. Push it down by nav height.
   The hero is intentionally NOT offset — the transparent navbar floats over it. */
.activity-bar {
  margin-top: 72px;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar {
    height: 64px;
  }
  .navbar__mobile {
    inset: 64px 0 0 0;
  }
  .navbar__nav {
    display: none;
  }
  .nav-right .lang-switch,
  .nav-right .social-icons {
    display: none;
  }
  .navbar__burger {
    display: flex;
  }
  .activity-bar {
    margin-top: 64px;
  }
}