/* =========================================================
   Navbar CSS
   ASP.NET Core Razor Pages frontend starter

   Purpose:
   - Provide reusable navbar/header styles for business websites,
     boutique hotels, cafe/chocolate websites and small projects.
   - Use with DesignSystem/design-tokens.css.
   - Adapt logo, colors, links and CTA to the current brand.
========================================================= */

/* =========================================================
   1. Site Header
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 100);

  /* Solid background instead of backdrop-filter blur:
     blur over a sticky element forces expensive repaints on scroll. */
  background: var(--color-surface, #ffffff);
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-border, #e4e7ec) 78%, transparent);

  transition:
    background-color var(--transition-base, 220ms ease),
    border-color var(--transition-base, 220ms ease);
}

/* Scrolled shadow is faded via ::after opacity (compositor-only)
   instead of transitioning box-shadow (repaint per frame). */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));
  opacity: 0;
  transition: opacity var(--transition-base, 220ms ease);
}

.site-header.is-scrolled::after {
  opacity: 1;
}

/* =========================================================
   2. Navbar Container
========================================================= */

.navbar-custom {
  width: min(var(--container-lg, 1120px), calc(100% - 2rem));
  min-height: 76px;
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5, 1.5rem);
}

/* =========================================================
   3. Brand / Logo
========================================================= */

.navbar-brand-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);

  color: var(--color-text, #1f2933);
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1;
  text-decoration: none;
}

.navbar-brand-custom:hover {
  color: var(--color-primary, #1f3a5f);
  text-decoration: none;
}

.navbar-logo {
  width: auto;
  max-width: 160px;
  max-height: 48px;
  object-fit: contain;
}

.navbar-logo-mark {
  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--color-text-light, #ffffff);
  background: var(--color-primary, #1f3a5f);
  border-radius: var(--radius-lg, 1rem);

  font-weight: var(--weight-bold, 700);
}

/* Real circular Romm badge. */
.navbar-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.navbar-brand-text {
  display: grid;
  gap: 0.125rem;
}

.navbar-brand-name {
  color: var(--color-text, #1f2933);
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-bold, 700);
}

.navbar-brand-subtitle {
  color: var(--color-secondary, #649ea1);
  font-family: var(--font-tagline, serif);
  font-style: italic;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
}

/* =========================================================
   4. Navigation Links
========================================================= */

.navbar-nav-custom {
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.5rem);

  margin: 0;
  padding: 0;

  list-style: none;
}

.navbar-link-custom {
  position: relative;

  display: inline-flex;
  align-items: center;

  color: var(--color-text, #1f2933);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  line-height: 1;
  text-decoration: none;

  transition: color var(--transition-base, 220ms ease);
}

.navbar-link-custom:hover,
.navbar-link-custom.active {
  color: var(--color-primary, #1f3a5f);
  text-decoration: none;
}

.navbar-link-custom::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55rem;

  width: 100%;
  height: 2px;

  background: var(--color-primary, #1f3a5f);
  border-radius: var(--radius-full, 999px);

  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base, 220ms ease);
}

.navbar-link-custom:hover::after,
.navbar-link-custom.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* =========================================================
   5. Navbar Actions
========================================================= */

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.navbar-cta {
  white-space: nowrap;
}

/* =========================================================
   6. Top Bar
========================================================= */

.topbar-custom {
  background: var(--color-primary, #1f3a5f);
  color: var(--color-text-light, #ffffff);
  font-size: var(--text-sm, 0.875rem);
}

.topbar-container {
  width: min(var(--container-lg, 1120px), calc(100% - 2rem));
  min-height: 40px;
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
}

.topbar-list {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);

  margin: 0;
  padding: 0;

  list-style: none;
}

.topbar-link {
  color: color-mix(in srgb, #ffffff 88%, transparent);
  text-decoration: none;
}

.topbar-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

/* =========================================================
   7. Transparent Header Variant
========================================================= */

.site-header.header-transparent {
  position: absolute;
  left: 0;
  right: 0;

  background: transparent;
  border-bottom-color: transparent;
}

.site-header.header-transparent::after {
  display: none;
}

.site-header.header-transparent .navbar-brand-custom,
.site-header.header-transparent .navbar-brand-name,
.site-header.header-transparent .navbar-link-custom {
  color: var(--color-text-light, #ffffff);
}

.site-header.header-transparent .navbar-brand-subtitle {
  color: color-mix(in srgb, #ffffff 76%, transparent);
}

.site-header.header-transparent .navbar-link-custom::after {
  background: var(--color-text-light, #ffffff);
}

.site-header.header-transparent.is-scrolled {
  position: sticky;
  background: var(--color-surface, #ffffff);
  border-bottom-color: var(--color-border, #e4e7ec);
}

.site-header.header-transparent.is-scrolled .navbar-brand-custom,
.site-header.header-transparent.is-scrolled .navbar-brand-name,
.site-header.header-transparent.is-scrolled .navbar-link-custom {
  color: var(--color-text, #1f2933);
}

.site-header.header-transparent.is-scrolled .navbar-brand-subtitle {
  color: var(--color-text-muted, #667085);
}

.site-header.header-transparent.is-scrolled .navbar-link-custom::after {
  background: var(--color-primary, #1f3a5f);
}

/* =========================================================
   8. Mobile Toggle
========================================================= */

.navbar-toggle {
  display: none;

  width: 44px;
  height: 44px;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-text, #1f2933);
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: var(--radius-full, 999px);
}

.navbar-toggle-lines {
  position: relative;

  width: 18px;
  height: 12px;

  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

.navbar-toggle-lines span {
  display: block;
  width: 100%;
  height: 2px;

  background: currentColor;
  border-radius: var(--radius-full, 999px);

  transition:
    transform var(--transition-base, 220ms ease),
    opacity var(--transition-base, 220ms ease);
}

.navbar-toggle.is-active .navbar-toggle-lines span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.navbar-toggle.is-active .navbar-toggle-lines span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.is-active .navbar-toggle-lines span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* =========================================================
   9. Mobile Menu
========================================================= */

.mobile-nav-panel {
  display: none;
}

.mobile-nav-list {
  display: grid;
  gap: var(--space-2, 0.5rem);

  margin: 0;
  padding: 0;

  list-style: none;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0.875rem 1rem;

  color: var(--color-text, #1f2933);
  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: var(--radius-lg, 1rem);

  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--color-primary, #1f3a5f);
  background: var(--color-primary-light, #e8eef6);
  text-decoration: none;
}

.mobile-nav-actions {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
}

/* =========================================================
   10. Language Switcher
========================================================= */

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  padding: 0.25rem;

  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: var(--radius-full, 999px);
}

.language-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 36px;
  min-height: 32px;
  padding: 0.4rem 0.7rem;

  border-radius: var(--radius-full, 999px);

  color: var(--color-text-muted, #667085);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  text-decoration: none;
  text-transform: uppercase;
}

.language-link:hover,
.language-link.active {
  color: var(--color-text-light, #ffffff);
  background: var(--color-primary, #1f3a5f);
  text-decoration: none;
}

/* =========================================================
   11. Admin Topbar / Sidebar Helpers
========================================================= */

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 100);

  min-height: 64px;
  padding-inline: var(--space-5, 1.5rem);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);

  background: var(--admin-surface, #ffffff);
  border-bottom: 1px solid var(--admin-border, #e5e7eb);
}

.admin-topbar-title {
  margin: 0;
  color: var(--admin-text, #111827);
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--weight-bold, 700);
}

.admin-sidebar {
  background: var(--admin-sidebar, #111827);
  color: var(--admin-sidebar-text, #e5e7eb);
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);

  padding: 0.75rem 1rem;

  color: color-mix(
    in srgb,
    var(--admin-sidebar-text, #e5e7eb) 84%,
    transparent
  );
  border-radius: var(--radius-sm, 0.5rem);

  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  text-decoration: none;
}

.admin-sidebar-link:hover,
.admin-sidebar-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

/* =========================================================
   12. Responsive
========================================================= */

@media (max-width: 1024px) {
  .navbar-nav-custom,
  .navbar-actions {
    display: none;
  }

  .navbar-toggle {
    display: inline-flex;
  }

  /* Animated with transform + opacity (compositor-only) instead of
     max-height, which forces layout of the whole page on every frame. */
  .mobile-nav-panel {
    display: block;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: var(--color-surface, #ffffff);
    border-bottom: 1px solid var(--color-border, #e4e7ec);
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(16, 24, 40, 0.08));

    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity var(--transition-base, 220ms ease),
      transform var(--transition-base, 220ms ease),
      visibility 0s linear var(--transition-base, 220ms);
  }

  .mobile-nav-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--transition-base, 220ms ease),
      transform var(--transition-base, 220ms ease),
      visibility 0s;
  }

  .mobile-nav-inner {
    width: min(var(--container-lg, 1120px), calc(100% - 2rem));
    margin-inline: auto;
    padding-block: var(--space-4, 1rem);
  }

  .site-header.header-transparent .navbar-toggle {
    color: var(--color-text, #1f2933);
  }
}

@media (max-width: 768px) {
  .topbar-custom {
    display: none;
  }

  .navbar-custom {
    min-height: 68px;
  }

  .navbar-logo {
    max-width: 132px;
    max-height: 42px;
  }

  .navbar-brand-subtitle {
    display: none;
  }
}

@media (max-width: 480px) {
  .navbar-custom,
  .mobile-nav-inner,
  .topbar-container {
    width: min(100% - 1.25rem, var(--container-lg, 1120px));
  }

  .navbar-brand-name {
    font-size: var(--text-sm, 0.875rem);
  }
}

/* =========================================================
   13. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .navbar-link-custom,
  .navbar-link-custom::after,
  .navbar-toggle-lines span,
  .mobile-nav-panel {
    transition: none !important;
  }
}