/* ============ NAVBAR (condensed) ============ */
:root {
  --nav-h: 88px;
}

.navbar,
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

html {
  scroll-padding-top: var(--nav-h) !important;
}

body {
  padding-top: var(--nav-h);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Brand */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 56px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
  transition: transform .2s ease;
}

.logo-text:hover {
  transform: scale(1.05);
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 600;
}

.nav-links ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  padding: 4px 6px;
  font-size: .95rem;
  transition: color .25s ease;
}

.nav-links a:hover {
  color: var(--accent-color);
}

.nav-links a.active {
  color: var(--accent-color);
  font-weight: 700;
  border-bottom: 2px solid var(--accent-color);
}

/* CTA button */
.nav-cta {
  background: linear-gradient(90deg, var(--accent-color), #4cc9ff);
  color: #052a41 !important;
  font-weight: 800;
  padding: .55rem .9rem;
  border-radius: .7rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* “More” dropdown (accessible details/summary) */
.more details {
  position: relative;
}

.more summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more[open] summary,
.more summary:hover {
  color: var(--accent-color);
}

.more .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.more .dropdown a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
}

.more .dropdown a:hover {
  background: rgba(0, 0, 0, .04);
  color: var(--accent-color);
}

/* Divider before CTA */
.sep {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, .12);
}

/* Language */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: .8rem;
  font-weight: 600;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 4px 8px;
  font-size: .95rem;
  cursor: pointer;
  transition: all .25s ease;
}

.lang-btn.active {
  color: var(--accent-color);
  font-weight: 700;
  text-shadow: 0 0 6px var(--accent-color);
}

.lang-divider {
  opacity: .5;
  color: var(--text);
}

/* Mobile */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text);
  margin-left: auto;
}

@media (max-width: 980px) {
  .hide-sm {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  #navLinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
  }

  #navLinks.show {
    display: block !important;
  }

  #navLinks ul {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .more .dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .sep {
    display: none;
  }
}

/* --- compact primary, bold CTA --- */
.nav-cta {
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--accent-color);
  color: #052a41 !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.nav-cta:hover {
  filter: brightness(1.05);
}

/* --- More dropdown --- */
.nav-more {
  position: relative;
}

.more-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  padding: 4px 6px;
  font-weight: 600;
}

.more-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: none;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  padding: .6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  z-index: 1000;
}

.more-menu a {
  display: block;
  padding: .5rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}

.more-menu a:hover {
  background: rgba(0, 0, 0, .05);
}

.nav-more:hover .more-menu,
.nav-more:focus-within .more-menu {
  display: block;
}

.nav-more:hover .more-btn,
.nav-more:focus-within .more-btn {
  color: var(--accent-color);
}

/* mobile drawer: the existing .nav-toggle logic will add .show */
@media (max-width: 960px) {
  .nav-links ul {
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
  }

  .nav-more {
    width: 100%;
  }

  .more-menu {
    position: static;
    display: none;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin-top: .25rem;
  }

  .nav-more:focus-within .more-menu {
    display: block;
  }

  .nav-cta {
    align-self: flex-start;
  }
}