/* ============================================================
   AboutDigitalCameras.com — Navigation Styles (Version C)
   /css/nav.css
   ============================================================ */

/* ── Main Nav Bar ────────────────────────────────────────── */
/* .main-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--gutter-lg);
  height:          var(--nav-height);
  background:      var(--clr-nav-bg);
  border-bottom:   1px solid var(--clr-nav-border);
  position:        sticky;
  top:             0;
  z-index:         var(--z-nav);
  transition:      background var(--transition-base),
                   border-color var(--transition-base);
  gap: 1rem;
} */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 160px; */
  gap: 40px;
}
/* .main-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* Top/Bottom: 12px | Right: 16px | Bottom: 12px | Left: 160px */
  padding: 12px 16px 12px 145px; 
  gap: 40px;
} */


/* ── Logo ────────────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  margin:0;
}


.nav-logo img {
  height:   130px;
  width:    auto;
  display:  block;
}

/* ── Nav Links List ──────────────────────────────────────── */
.nav-links {
  flex: initial;
  display: flex;
  gap: 20px;
  /*flex: 1;*/
  justify-content: center;
  margin:0;
  padding:0;
}

.nav-links__item a {
  display:       inline-block;
  font-size:     var(--text-sm);
  font-weight:   var(--fw-medium);
  color:         var(--clr-nav-text);
  text-decoration: none;
  padding:       var(--space-2) var(--space-1);
  border-bottom: 2px solid transparent;
  transition:    color var(--transition-base),
                 border-color var(--transition-base);
}

.nav-links__item a:hover {
  color:        var(--clr-nav-text-hover);
  border-color: var(--clr-primary);
  text-decoration: none;
}

/* Active / current page */
.nav-links__item--active a {
  color:        var(--clr-primary);
  border-color: var(--clr-primary);
  font-weight:  var(--fw-bold);
}

/* ── Right Controls (hamburger + dark toggle) ────────────── */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /*margin-left: auto;*/
  margin: 0;
}


/* ── Dark Mode Toggle ────────────────────────────────────── */
.dark-toggle {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         38px;
  height:        38px;
  border-radius: var(--radius-md);
  background:    #e5e5e5;
  border:        none;
  cursor:        pointer;
  font-size:     1.1rem;
  line-height:   1;
  transition:    background var(--transition-base),
                 color var(--transition-base);
  flex-shrink:   0;
}

.dark-toggle:hover {
  background: var(--clr-border-muted);
}

/* ── Hamburger / Nav Toggle ──────────────────────────────── */
.nav-toggle {
  display:        none; /* hidden on desktop */
  flex-direction: column;
  justify-content: space-between;
  width:          36px;
  height:         28px;
  padding:        4px;
  background:     #e5e5e5;
  border:         none;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     background var(--transition-base);
}

.nav-toggle__bar {
  display:       block;
  width:         100%;
  height:        2px;
  background:    var(--clr-text);
  border-radius: 2px;
  transition:    transform var(--transition-base),
                 opacity var(--transition-base);
}

/* Animated open state */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
  margin:    var(--space-4) 0;
  font-size: var(--text-sm);
  color:     var(--clr-text-muted);
}

.breadcrumbs__list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.breadcrumbs__item {
  display:     flex;
  align-items: center;
}

.breadcrumbs__item a {
  color:           var(--clr-link);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.breadcrumbs__item a:hover {
  text-decoration: underline;
}

.breadcrumbs__item [aria-current="page"] {
  color:       var(--clr-text-muted);
  font-weight: var(--fw-medium);
}

.breadcrumbs__sep {
  margin:  0 var(--space-2);
  color:   var(--clr-text-light);
  font-size: 0.85em;
  user-select: none;
}

/* ── Mobile Navigation (≤ 900px) ─────────────────────────── */
@media (max-width: 900px) {
  .main-nav {
    flex-wrap:  wrap;
    padding:    var(--space-3) var(--gutter);
    height:     auto;
    row-gap:    0;
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex;
  }

  /* Full-width dropdown */
  .nav-links {
    display:        none;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-2);
    width:          100%;
    padding:        var(--space-4) 0;
    border-top:     1px solid var(--clr-border);
    background:     var(--clr-nav-bg);
    /* Slide-down animation */
    overflow:       hidden;
    max-height:     0;
    transition:     max-height var(--transition-slow);
  }

  .nav-links.open {
    display:    flex;
    max-height: 600px;
  }

  .nav-links__item {
    width: 100%;
  }

  .nav-links__item a {
    display:  block;
    width:    100%;
    padding:  var(--space-3) var(--space-2);
    font-size: var(--text-base);
    border-bottom: none;
    border-radius: var(--radius-sm);
  }

  .nav-links__item a:hover {
    background: var(--clr-bg-muted);
    border-bottom: none;
  }

  .nav-links__item--active a {
    background:  var(--clr-primary-light);
    color:       var(--clr-primary);
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .main-nav {
    padding: var(--space-3) var(--space-4);
  }

  .nav-logo img {
    height: 32px;
  }
}
@media (min-width: 1200px) {
  .main-nav {
    padding: 0.75rem 1rem !important;
  }
}