/* ==============================================
   Verona Navbar
   Tall layout + animated underline accent
   ============================================== */

:root {
  /* Tweak these if you ever change brand colors */
  --verona-nav-accent: var(--bs-primary, #D51C29);
  --verona-nav-accent-soft: #ff6a6a;
  --verona-nav-underline-thickness: 2px;
}

/* --- Overall navbar height & padding --- */
.navbar.nav-tall {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* --- Logo styling --- */
.navbar.nav-tall .brandbar {
  display: flex;
  align-items: flex-end;
  padding-left: 0.5rem;
}

.navbar.nav-tall .brand-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}

/* --- Make sure dark navbar text is light --- */
.navbar.nav-tall.navbar-dark .navbar-brand,
.navbar.nav-tall.navbar-dark .nav-link {
  color: #f8f9fa !important;
}

/* --- Nav links --- */
.navbar.nav-tall .navbar-nav .nav-link {
  font-size: 1.05rem;
  padding: 0.4rem 0.75rem;
  position: relative;
  transition: color 0.2s ease, transform 0.15s ease;
  overflow: hidden; /* so underline stays clean inside */
}

/* --- Animated underline accent --- */
.navbar.nav-tall .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.1rem;
  height: var(--verona-nav-underline-thickness);
  background: linear-gradient(
    90deg,
    var(--verona-nav-accent),
    var(--verona-nav-accent-soft)
  );
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition:
    transform 0.25s ease-out,
    opacity 0.25s ease-out;
}

/* Hover / active / keyboard focus show the underline */
.navbar.nav-tall .navbar-nav .nav-link:hover::after,
.navbar.nav-tall .navbar-nav .nav-link:focus-visible::after,
.navbar.nav-tall .navbar-nav .nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --- Smooth text highlight on state change --- */
.navbar.nav-tall .navbar-nav .nav-link:hover,
.navbar.nav-tall .navbar-nav .nav-link:focus-visible,
.navbar.nav-tall .navbar-nav .nav-link.active {
  color: #ffffff !important;
}

/* --- Cart button tweaks --- */
.navbar.nav-tall .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4);
}

/* ---------- Mobile & Tablet adjustments ---------- */
@media (max-width: 991.98px) {
  .navbar.nav-tall .brand-logo {
    height: 48px;
  }

  .navbar.nav-tall > .container,
  .navbar.nav-tall > .container-fluid {
    align-items: center;
  }

  .navbar.nav-tall .navbar-collapse {
    margin-top: 0.5rem;
  }
}