/* ============================================================
   NAVIGATION — Template Factory
   ============================================================
   
   СОДЕРЖАНИЕ:
   1. HEADER BASE & VARIANTS (10 вариантов)
   2. NAVIGATION LINKS & DROPDOWNS
   3. MOBILE MENU (6 вариантов)
   4. HAMBURGER BUTTON
   5. FOOTER (8 вариантов)
   6. BREADCRUMBS
   7. PAGINATION
   8. SCROLL BEHAVIORS
   9. SKIP LINKS & ACCESSIBILITY
   
   ============================================================ */


/* ============================================================
   1. HEADER BASE & VARIANTS
   ============================================================ */

/* Base Header */
.header {
  position: relative;
  width: 100%;
  background: var(--nav-bg, var(--bg-surface));
  border-bottom: 1px solid var(--nav-border, var(--border));
  z-index: var(--z-sticky, 100);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--nav-height);
  padding: 0 var(--container-padding, 24px);
  max-width: var(--container-default, 1200px);
  margin: 0 auto;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
}

.header__logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.header__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.header__logo-tagline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: none;
}

@media (min-width: 768px) {
  .header__logo-tagline {
    display: block;
  }
}

/* Navigation Container */
.header__nav {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }
}

/* Header Actions (CTA, phone, etc.) */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header__cta {
  display: none;
}

@media (min-width: 768px) {
  .header__cta {
    display: inline-flex;
  }
}

.header__phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.header__phone i {
  color: var(--primary);
}

@media (min-width: 640px) {
  .header__phone {
    display: flex;
  }
}

/* ----------------------------------------
   nav-01: Classic Left (default)
   Logo left, nav center/right
   ---------------------------------------- */
.header--classic,
.nav-01 {
  /* Default styling */
}

/* ----------------------------------------
   nav-02: Centered Logo
   Nav left, logo center, actions right
   ---------------------------------------- */
.header--centered,
.nav-02 {
  /* Logo moves to center */
}

.header--centered .header__inner,
.nav-02 .header__inner {
  justify-content: center;
  position: relative;
}

.header--centered .header__logo,
.nav-02 .header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header--centered .header__nav,
.nav-02 .header__nav {
  margin-right: auto;
}

.header--centered .header__actions,
.nav-02 .header__actions {
  margin-left: auto;
}

/* ----------------------------------------
   nav-03: Transparent
   No background, for use over hero
   ---------------------------------------- */
.header--transparent,
.nav-03 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
}

.header--transparent .header__logo-text,
.header--transparent .nav__link,
.nav-03 .header__logo-text,
.nav-03 .nav__link {
  color: var(--text-inverted, white);
}

.header--transparent .nav__link:hover,
.nav-03 .nav__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* When scrolled, becomes solid */
.header--transparent.is-scrolled,
.nav-03.is-scrolled {
  background: var(--nav-bg, var(--bg-surface));
  border-bottom: 1px solid var(--nav-border, var(--border));
}

.header--transparent.is-scrolled .header__logo-text,
.header--transparent.is-scrolled .nav__link,
.nav-03.is-scrolled .header__logo-text,
.nav-03.is-scrolled .nav__link {
  color: var(--text-primary);
}

/* ----------------------------------------
   nav-04: Sticky
   Always sticky at top
   ---------------------------------------- */
.header--sticky,
.nav-04 {
  position: sticky;
  top: 0;
}

/* ----------------------------------------
   nav-05: Shrink on Scroll
   Reduces height when scrolling
   ---------------------------------------- */
.header--shrink,
.nav-05 {
  position: sticky;
  top: 0;
  transition: all var(--duration-normal) ease;
}

.header--shrink .header__inner,
.nav-05 .header__inner {
  transition: height var(--duration-normal) ease;
}

.header--shrink.is-scrolled .header__inner,
.nav-05.is-scrolled .header__inner {
  height: 56px;
}

.header--shrink.is-scrolled .header__logo img,
.nav-05.is-scrolled .header__logo img {
  height: 32px;
}

/* ----------------------------------------
   nav-06: With CTA Button
   Prominent CTA in header
   ---------------------------------------- */
.header--with-cta,
.nav-06 {
  /* CTA is always visible */
}

.header--with-cta .header__cta,
.nav-06 .header__cta {
  display: inline-flex;
}

@media (max-width: 640px) {
  .header--with-cta .header__cta,
  .nav-06 .header__cta {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }
}

/* ----------------------------------------
   nav-07: Mega Menu
   Large dropdown panels
   ---------------------------------------- */
.header--mega,
.nav-07 {
  /* Mega menu styling handled in dropdown section */
}

/* ----------------------------------------
   nav-08: Sidebar Style
   Vertical navigation (for dashboard/admin)
   ---------------------------------------- */
.header--sidebar,
.nav-08 {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--nav-border, var(--border));
  overflow-y: auto;
}

.header--sidebar .header__inner,
.nav-08 .header__inner {
  flex-direction: column;
  height: auto;
  padding: var(--space-6);
  gap: var(--space-8);
}

.header--sidebar .header__nav,
.nav-08 .header__nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-1);
}

.header--sidebar .nav__link,
.nav-08 .nav__link {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

.header--sidebar .nav__link:hover,
.nav-08 .nav__link:hover {
  background: var(--bg-surface-alt);
}

.header--sidebar .nav__link.is-active,
.nav-08 .nav__link.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Content offset for sidebar */
.has-sidebar {
  margin-left: 280px;
}

@media (max-width: 1024px) {
  .header--sidebar,
  .nav-08 {
    transform: translateX(-100%);
    transition: transform var(--duration-normal) ease;
  }
  
  .header--sidebar.is-open,
  .nav-08.is-open {
    transform: translateX(0);
  }
  
  .has-sidebar {
    margin-left: 0;
  }
}

/* ----------------------------------------
   nav-09: Hamburger Always
   Always show hamburger, even on desktop
   ---------------------------------------- */
.header--hamburger-always,
.nav-09 {
  /* Nav is always hidden */
}

.header--hamburger-always .header__nav,
.nav-09 .header__nav {
  display: none;
}

.header--hamburger-always .header__toggle,
.nav-09 .header__toggle {
  display: flex;
}

/* ----------------------------------------
   nav-10: Dual Row
   Top bar + main nav below
   ---------------------------------------- */
.header--dual,
.nav-10 {
  /* Two rows */
}

.header--dual .header__topbar,
.nav-10 .header__topbar {
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
}

.header--dual .header__topbar-inner,
.nav-10 .header__topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 40px;
  padding: 0 var(--container-padding, 24px);
  max-width: var(--container-default, 1200px);
  margin: 0 auto;
  font-size: var(--text-sm);
}

.header--dual .header__topbar-left,
.nav-10 .header__topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-muted);
}

.header--dual .header__topbar-right,
.nav-10 .header__topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.header--dual .header__topbar a,
.nav-10 .header__topbar a {
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header--dual .header__topbar a:hover,
.nav-10 .header__topbar a:hover {
  color: var(--primary);
}

@media (max-width: 768px) {
  .header--dual .header__topbar,
  .nav-10 .header__topbar {
    display: none;
  }
}


/* ============================================================
   2. NAVIGATION LINKS & DROPDOWNS
   ============================================================ */

/* Nav Link */
.nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--nav-link, var(--text-primary));
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--nav-link-hover, var(--primary));
  background: var(--bg-surface-alt);
}

.nav__link.is-active {
  color: var(--nav-link-active, var(--primary));
}

.nav__link i {
  font-size: 16px;
}

/* Nav Item with Dropdown */
.nav__item {
  position: relative;
}

.nav__item--has-dropdown > .nav__link::after {
  content: '\F282'; /* bi-chevron-down */
  font-family: 'bootstrap-icons';
  font-size: 12px;
  margin-left: var(--space-1);
  transition: transform var(--duration-fast) ease;
}

.nav__item--has-dropdown:hover > .nav__link::after,
.nav__item--has-dropdown.is-open > .nav__link::after {
  transform: rotate(180deg);
}

/* Standard Dropdown */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--dropdown-bg, var(--bg-elevated));
  border: 1px solid var(--dropdown-border, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--dropdown-shadow, var(--shadow-lg));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--duration-fast) ease;
  z-index: var(--z-dropdown);
}

.nav__item:hover > .nav__dropdown,
.nav__item.is-open > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.nav__dropdown-link:hover {
  background: var(--dropdown-item-hover-bg, var(--bg-surface-alt));
  color: var(--primary);
}

.nav__dropdown-link i {
  font-size: 18px;
  color: var(--text-muted);
  width: 24px;
}

.nav__dropdown-link:hover i {
  color: var(--primary);
}

.nav__dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 0;
}

/* Mega Menu Dropdown */
.nav__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 90vw;
  max-width: 1000px;
  padding: var(--space-6);
  background: var(--dropdown-bg, var(--bg-elevated));
  border: 1px solid var(--dropdown-border, var(--border));
  border-radius: var(--radius-xl);
  box-shadow: var(--dropdown-shadow, var(--shadow-lg));
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-fast) ease;
  z-index: var(--z-dropdown);
}

.nav__item:hover > .nav__mega,
.nav__item.is-open > .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-8);
}

.nav__mega-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nav__mega-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.nav__mega-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__mega-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.nav__mega-link:hover {
  background: var(--bg-surface-alt);
  color: var(--primary);
}

.nav__mega-link i {
  font-size: 18px;
  color: var(--primary);
}

.nav__mega-featured {
  padding: var(--space-5);
  background: var(--primary-soft);
  border-radius: var(--radius-lg);
}

.nav__mega-featured-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.nav__mega-featured-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}


/* ============================================================
   3. MOBILE MENU
   ============================================================ */

/* Mobile Menu Container */
.mobile-menu {
  position: fixed;
  z-index: var(--z-modal);
  background: var(--nav-bg, var(--bg-surface));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu__inner {
  padding: var(--space-6);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.mobile-menu__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.mobile-menu__close:hover {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.mobile-menu__link i {
  font-size: 20px;
  color: var(--text-muted);
}

/* Mobile Submenu */
.mobile-menu__submenu {
  display: none;
  flex-direction: column;
  padding-left: var(--space-6);
  margin-top: var(--space-1);
  gap: var(--space-1);
}

.mobile-menu__submenu.is-open {
  display: flex;
}

.mobile-menu__submenu-link {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) ease;
}

.mobile-menu__submenu-link:hover {
  background: var(--bg-surface-alt);
  color: var(--primary);
}

/* Mobile Menu Footer */
.mobile-menu__footer {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.mobile-menu__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mobile-menu__contact-item i {
  font-size: 18px;
  color: var(--primary);
  width: 24px;
}

.mobile-menu__contact-item a {
  color: inherit;
  text-decoration: none;
}

.mobile-menu__contact-item a:hover {
  color: var(--primary);
}

.mobile-menu__social {
  display: flex;
  gap: var(--space-3);
}

.mobile-menu__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-surface-alt);
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}

.mobile-menu__social-link:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* ----------------------------------------
   mob-01: Slide Right
   ---------------------------------------- */
.mobile-menu--slide-right,
.mob-01 {
  top: 0;
  right: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  transform: translateX(100%);
  transition: transform var(--duration-normal) ease;
}

.mobile-menu--slide-right.is-open,
.mob-01.is-open {
  transform: translateX(0);
}

/* ----------------------------------------
   mob-02: Slide Left
   ---------------------------------------- */
.mobile-menu--slide-left,
.mob-02 {
  top: 0;
  left: 0;
  width: 100%;
  max-width: 320px;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) ease;
}

.mobile-menu--slide-left.is-open,
.mob-02.is-open {
  transform: translateX(0);
}

/* ----------------------------------------
   mob-03: Fullscreen
   ---------------------------------------- */
.mobile-menu--fullscreen,
.mob-03 {
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}

.mobile-menu--fullscreen.is-open,
.mob-03.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu--fullscreen .mobile-menu__inner,
.mob-03 .mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

.mobile-menu--fullscreen .mobile-menu__nav,
.mob-03 .mobile-menu__nav {
  align-items: center;
}

.mobile-menu--fullscreen .mobile-menu__link,
.mob-03 .mobile-menu__link {
  font-size: var(--text-2xl);
  font-weight: 600;
}

/* ----------------------------------------
   mob-04: Dropdown
   Slides down from header
   ---------------------------------------- */
.mobile-menu--dropdown,
.mob-04 {
  top: var(--nav-height);
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-normal) ease;
  border-bottom: 1px solid var(--border);
}

.mobile-menu--dropdown.is-open,
.mob-04.is-open {
  max-height: calc(100vh - var(--nav-height));
}

/* ----------------------------------------
   mob-05: Bottom Sheet
   ---------------------------------------- */
.mobile-menu--bottom,
.mob-05 {
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--duration-normal) ease;
}

.mobile-menu--bottom.is-open,
.mob-05.is-open {
  transform: translateY(0);
}

.mobile-menu--bottom .mobile-menu__handle,
.mob-05 .mobile-menu__handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: var(--space-3) auto 0;
}

/* ----------------------------------------
   mob-06: Overlay Centered
   ---------------------------------------- */
.mobile-menu--overlay,
.mob-06 {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}

.mobile-menu--overlay.is-open,
.mob-06.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu--overlay .mobile-menu__inner,
.mob-06 .mobile-menu__inner {
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background: var(--bg-surface);
  border-radius: var(--radius-2xl);
  overflow-y: auto;
}

/* Mobile Menu Backdrop */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}

.mobile-menu-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}


/* ============================================================
   4. HAMBURGER BUTTON
   ============================================================ */

.header__toggle,
.hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

@media (min-width: 1024px) {
  .header__toggle {
    display: none;
  }
}

.header__toggle:hover,
.hamburger:hover {
  background: var(--bg-surface-alt);
}

.hamburger__lines {
  position: relative;
  width: 24px;
  height: 18px;
}

.hamburger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all var(--duration-fast) ease;
}

.hamburger__line:nth-child(1) {
  top: 0;
}

.hamburger__line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger__line:nth-child(3) {
  bottom: 0;
}

/* Animated to X */
.hamburger.is-active .hamburger__line:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* Icon variant */
.hamburger--icon {
  font-size: 24px;
  color: var(--text-primary);
}


/* ============================================================
   5. FOOTER
   ============================================================ */

/* Base Footer */
.footer {
  background: var(--footer-bg, var(--bg-surface-alt));
  color: var(--footer-fg, var(--text-secondary));
  border-top: 1px solid var(--footer-border, var(--border));
}

.footer__inner {
  max-width: var(--container-default, 1200px);
  margin: 0 auto;
  padding: var(--section-spacing-md) var(--container-padding);
}

.footer a {
  color: var(--footer-link, var(--text-muted));
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.footer a:hover {
  color: var(--footer-link-hover, var(--primary));
}

/* Footer Logo */
.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer__logo img {
  height: 40px;
  width: auto;
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

/* Footer Description */
.footer__description {
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: var(--space-5);
}

/* Footer Navigation */
.footer__nav-title {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__nav-link i {
  font-size: 14px;
}

/* Footer Contact */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__contact-item i {
  font-size: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Footer Social */
.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-surface);
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  transition: all var(--duration-fast) ease;
}

.footer__social-link:hover {
  background: var(--primary);
  color: var(--on-primary);
}

/* Footer Bottom / Copyright */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-6);
  margin-top: var(--space-10);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}

.footer__copyright {
  color: var(--text-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__legal a {
  color: var(--text-muted);
}

/* ----------------------------------------
   ftr-01: Simple
   Logo + contact + copyright
   ---------------------------------------- */
.footer--simple,
.ftr-01 {
  text-align: center;
}

.footer--simple .footer__inner,
.ftr-01 .footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.footer--simple .footer__description,
.ftr-01 .footer__description {
  max-width: 500px;
  text-align: center;
}

/* ----------------------------------------
   ftr-02: Three Columns
   Nav + Contact + Social
   ---------------------------------------- */
.footer--three-col,
.ftr-02 {
  /* Three column grid */
}

.footer--three-col .footer__grid,
.ftr-02 .footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-12);
}

@media (max-width: 768px) {
  .footer--three-col .footer__grid,
  .ftr-02 .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ----------------------------------------
   ftr-03: Four Columns
   Mega footer with categories
   ---------------------------------------- */
.footer--four-col,
.ftr-03 {
  /* Four column grid */
}

.footer--four-col .footer__grid,
.ftr-03 .footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-12);
}

@media (max-width: 1024px) {
  .footer--four-col .footer__grid,
  .ftr-03 .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .footer--four-col .footer__grid,
  .ftr-03 .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ----------------------------------------
   ftr-04: With Map
   Footer with embedded map
   ---------------------------------------- */
.footer--with-map,
.ftr-04 {
  /* Map section */
}

.footer--with-map .footer__map,
.ftr-04 .footer__map {
  height: 200px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-8);
}

.footer--with-map .footer__map iframe,
.ftr-04 .footer__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ----------------------------------------
   ftr-05: With Newsletter
   Newsletter signup form
   ---------------------------------------- */
.footer--newsletter,
.ftr-05 {
  /* Newsletter section */
}

.footer--newsletter .footer__newsletter,
.ftr-05 .footer__newsletter {
  max-width: 400px;
}

.footer__newsletter-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.footer__newsletter-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.footer__newsletter-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--text-sm);
}

.footer__newsletter-input:focus {
  outline: none;
  border-color: var(--primary);
}

@media (max-width: 480px) {
  .footer__newsletter-form {
    flex-direction: column;
  }
}

/* ----------------------------------------
   ftr-06: Minimal Centered
   Single line, centered
   ---------------------------------------- */
.footer--minimal,
.ftr-06 {
  text-align: center;
}

.footer--minimal .footer__inner,
.ftr-06 .footer__inner {
  padding: var(--section-spacing-sm) var(--container-padding);
}

.footer--minimal .footer__content,
.ftr-06 .footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.footer--minimal .footer__bottom,
.ftr-06 .footer__bottom {
  justify-content: center;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* ----------------------------------------
   ftr-07: Dark Contrast
   Always dark regardless of theme
   ---------------------------------------- */
.footer--dark,
.ftr-07 {
  background: #0F172A;
  color: #94A3B8;
  border-top: none;
}

.footer--dark .footer__logo-text,
.footer--dark .footer__nav-title,
.footer--dark .footer__newsletter-title,
.ftr-07 .footer__logo-text,
.ftr-07 .footer__nav-title,
.ftr-07 .footer__newsletter-title {
  color: #F8FAFC;
}

.footer--dark a,
.ftr-07 a {
  color: #94A3B8;
}

.footer--dark a:hover,
.ftr-07 a:hover {
  color: #F8FAFC;
}

.footer--dark .footer__social-link,
.ftr-07 .footer__social-link {
  background: #1E293B;
  color: #94A3B8;
}

.footer--dark .footer__social-link:hover,
.ftr-07 .footer__social-link:hover {
  background: var(--primary);
  color: #0F172A;
}

.footer--dark .footer__bottom,
.ftr-07 .footer__bottom {
  border-color: #334155;
}

/* ----------------------------------------
   ftr-08: With Trust Badges
   Certifications, insurance badges
   ---------------------------------------- */
.footer--badges,
.ftr-08 {
  /* Trust badges section */
}

.footer--badges .footer__badges,
.ftr-08 .footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.footer__badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.footer__badge i {
  font-size: 24px;
  color: var(--primary);
}

.footer__badge img {
  height: 40px;
  width: auto;
}


/* ============================================================
   6. BREADCRUMBS
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--breadcrumb-fg, var(--text-muted));
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__link {
  color: var(--breadcrumb-fg, var(--text-muted));
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.breadcrumb__link:hover {
  color: var(--breadcrumb-hover-fg, var(--primary));
}

.breadcrumb__separator {
  color: var(--breadcrumb-separator, var(--text-muted));
  font-size: 12px;
}

.breadcrumb__current {
  color: var(--breadcrumb-active-fg, var(--text-primary));
  font-weight: 500;
}

/* Breadcrumb with icons */
.breadcrumb--icons .breadcrumb__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb--icons .breadcrumb__link i {
  font-size: 14px;
}

/* Breadcrumb variants */
.breadcrumb--arrows .breadcrumb__separator::before {
  content: '\F285'; /* bi-chevron-right */
  font-family: 'bootstrap-icons';
}

.breadcrumb--slashes .breadcrumb__separator::before {
  content: '/';
}

.breadcrumb--dots .breadcrumb__separator::before {
  content: '•';
}

/* Breadcrumb container */
.breadcrumb-container {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}


/* ============================================================
   7. PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--pagination-fg, var(--text-primary));
  background: var(--pagination-bg, transparent);
  border: 1px solid var(--pagination-border, var(--border));
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}

.pagination__item:hover {
  background: var(--pagination-hover-bg, var(--bg-surface-alt));
  border-color: var(--primary);
}

.pagination__item.is-active {
  background: var(--pagination-active-bg, var(--primary));
  color: var(--pagination-active-fg, var(--on-primary));
  border-color: var(--primary);
}

.pagination__item.is-disabled {
  color: var(--pagination-disabled-fg, var(--text-disabled));
  pointer-events: none;
  opacity: 0.5;
}

.pagination__item--prev,
.pagination__item--next {
  font-size: 16px;
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: var(--text-muted);
}

/* Pagination Sizes */
.pagination--sm .pagination__item {
  min-width: 32px;
  height: 32px;
  font-size: var(--text-xs);
}

.pagination--lg .pagination__item {
  min-width: 48px;
  height: 48px;
  font-size: var(--text-base);
}

/* Pagination Variants */
.pagination--rounded .pagination__item {
  border-radius: 50%;
}

.pagination--minimal .pagination__item {
  border: none;
  background: transparent;
}

.pagination--minimal .pagination__item:hover {
  background: var(--bg-surface-alt);
}

.pagination--minimal .pagination__item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Pagination with info */
.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.pagination__info {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Simple prev/next */
.pagination--simple {
  gap: var(--space-4);
}

.pagination--simple .pagination__item {
  padding: 0 var(--space-5);
}


/* ============================================================
   8. SCROLL BEHAVIORS
   ============================================================ */

/* Hide header on scroll down, show on scroll up */
.header--auto-hide {
  position: sticky;
  top: 0;
  transition: transform var(--duration-normal) ease;
}

.header--auto-hide.is-hidden {
  transform: translateY(-100%);
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--primary);
  z-index: calc(var(--z-sticky) + 1);
  transform-origin: left;
  transform: scaleX(0);
}

/* Back to top button - reuse from ui-elements or define here */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--duration-normal) ease;
  z-index: var(--z-sticky);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary-hover);
  transform: translateY(-4px);
}


/* ============================================================
   9. SKIP LINKS & ACCESSIBILITY
   ============================================================ */

/* Skip to content link */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: calc(var(--z-modal) + 10);
  transition: top var(--duration-fast) ease;
}

.skip-link:focus {
  top: 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .header__nav {
    display: none;
  }
  
  .header__toggle {
    display: flex;
  }
}

@media (max-width: 768px) {
  .header__inner {
    height: 64px;
  }
  
  .header__logo img {
    height: 32px;
  }
  
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .header,
  .header--shrink .header__inner,
  .mobile-menu,
  .nav__dropdown,
  .nav__mega,
  .hamburger__line,
  .back-to-top,
  .scroll-progress {
    transition: none;
  }
}


/* ============================================================
   10. NAV-WRAPPER — Navigation via SectionRenderer
   Integration bridge: .section + .nav-wrapper = header bar.
   Slots inside: logo, nav, cta, hamburger, topbar, drawer.

   DOM structure (SectionRenderer output):
     <section class="section nav-wrapper ...">
       <div class="container">
         <div class="layout-split | layout-stacked">
           <div class="slot slot--logo">...</div>
           <div class="slot slot--nav">...</div>
         </div>
       </div>
     </section>

   Rules use .container and .layout-* as intermediaries,
   never direct child selectors from .section — those would miss.
   ============================================================ */

/* Base: nav section — border, z-index, no extra section spacing.
   padding-block: 0 сбрасывает дефолтный .section padding (64px) без !important —
   работает потому что .section.nav-wrapper специфичнее, чем .section */
.section.nav-wrapper {
  border-bottom: 1px solid var(--border);
  z-index: var(--z-sticky, 100);
  padding-block: 0;
}

/* Layout: min-height + vertical centering (actual DOM: section > .container > .layout-*) */
.section.nav-wrapper > .container > .layout-split,
.section.nav-wrapper > .container > .layout-stacked {
  min-height: var(--nav-height, 4.5rem);
  align-items: center;
}

/* Slot margin-bottom reset for nav (50-layouts adds margin to .layout-* > .slot) */
.section.nav-wrapper .slot {
  margin-bottom: 0;
}

/* Headings inside nav slots: no bottom margin, normal font-size */
.section.nav-wrapper .slot--logo .heading,
.section.nav-wrapper .slot--nav .heading,
.section.nav-wrapper .slot--cta .heading {
  margin-bottom: 0;
}

/* nav-transparent: transparent bg + white text */
.section.nav-wrapper.nav-transparent {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none;
}

.section.nav-wrapper.nav-transparent .heading,
.section.nav-wrapper.nav-transparent .list__link,
.section.nav-wrapper.nav-transparent .btn--ghost {
  color: var(--text-inverted, #fff);
}

/* nav-overlay: absolute position over hero */
.section.nav-wrapper.nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* nav-sticky: sticks to top on scroll */
.section.nav-wrapper.nav-sticky {
  position: sticky;
  top: 0;
}

/* nav-shrink: box-shadow when scrolled (JS adds .is-scrolled) */
.section.nav-wrapper.nav-shrink.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* nav-topbar: компактная полоса с контактами/соц.сетями над основным nav.
   Рендерится SectionRenderer как <div class="nav-topbar"><div class="container">. */
.section.nav-wrapper .nav-topbar {
  background-color: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Container внутри topbar — flex-строка, контент по краям */
.section.nav-wrapper .nav-topbar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  padding-block: var(--space-2);
}

/* Slot внутри topbar — inline, без margin */
.section.nav-wrapper .nav-topbar .slot {
  margin-bottom: 0;
}

/* ul.list-inline внутри topbar — горизонтальный flex */
.section.nav-wrapper .nav-topbar .list-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section.nav-wrapper .nav-topbar .list-inline li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.section.nav-wrapper .nav-topbar .list-inline a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) ease;
}

.section.nav-wrapper .nav-topbar .list-inline a:hover {
  color: var(--primary);
}

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

/* Тёмный вариант topbar (добавить nav-topbar-dark в extra_classes) */
.section.nav-wrapper.nav-topbar-dark .nav-topbar {
  background-color: rgba(0, 0, 0, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}

.section.nav-wrapper.nav-topbar-dark .nav-topbar .list-inline a {
  color: rgba(255, 255, 255, 0.65);
}

.section.nav-wrapper.nav-topbar-dark .nav-topbar .list-inline a:hover {
  color: #fff;
}

/* nav-offcanvas: drawer slot — hidden off-screen, JS toggles .is-open */
.section.nav-wrapper.nav-offcanvas .slot--drawer,
.section.nav-wrapper.nav-hamburger-always .slot--drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: var(--bg-elevated, var(--bg-surface));
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal, 1000);
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--duration-normal) ease;
  overflow-y: auto;
}

.section.nav-wrapper.nav-offcanvas .slot--drawer.is-open,
.section.nav-wrapper.nav-hamburger-always .slot--drawer.is-open {
  transform: translateX(0);
}

/* Off-canvas backdrop (injected by 16-nav.js) */
.nav-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal, 1000) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}

.nav-offcanvas-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Hamburger button: icon size */
.section.nav-wrapper .slot--hamburger .btn {
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--space-2);
}

/* List links inside nav: nowrap, compact */
.section.nav-wrapper .slot--nav .list__link,
.section.nav-wrapper .slot--topbar .list__link {
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  .header,
  .mobile-menu,
  .mobile-menu-backdrop,
  .back-to-top,
  .skip-link {
    display: none !important;
  }

  .footer {
    background: transparent;
    border-top: 1px solid #ccc;
  }

  .footer__social,
  .footer__newsletter {
    display: none;
  }
}


/* ============================================================
   11. NAV V2 — VISUAL VARIANTS (Phase 3.9v2)
   Each nav-01..10 gets a distinct visual character.
   All use .section.nav-wrapper as root.
   ============================================================ */

/* --- nav-01: Classic White — border bottom, CTA button ---
   White background, subtle border, links + CTA button right.
   CTA slot visible always. Shadow on scroll via nav-sticky. */
.section.nav-wrapper.nav-v2-01 {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.section.nav-wrapper.nav-v2-01.is-scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border-bottom-color: transparent;
}

/* --- nav-02: Centered Logo — stacked layout, border bottom row ---
   Logo row centered. Nav links row below, pill background on hover. */
.section.nav-wrapper.nav-v2-02 {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.section.nav-wrapper.nav-v2-02 > .container > .layout-stacked {
  padding-block: var(--space-3) var(--space-1);
}
/* Logo slot fills full width, centered */
.section.nav-wrapper.nav-v2-02 .slot--logo {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Nav slot centered */
.section.nav-wrapper.nav-v2-02 .slot--nav {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: var(--space-2);
}

/* --- nav-03: Glass / Blur — white+transparent over hero, backdrop blur ---
   Transparent start, frosted glass effect on scroll. White links. */
.section.nav-wrapper.nav-v2-03 {
  backdrop-filter: none;
  transition: background-color var(--duration-normal) ease,
              backdrop-filter var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease;
}
.section.nav-wrapper.nav-v2-03.is-scrolled {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 2px 16px rgba(0,0,0,.1);
}
/* White text when transparent */
.section.nav-wrapper.nav-v2-03:not(.is-scrolled) .heading,
.section.nav-wrapper.nav-v2-03:not(.is-scrolled) .list__link,
.section.nav-wrapper.nav-v2-03:not(.is-scrolled) .btn {
  color: var(--text-inverted, #fff);
}
/* Dark text once scrolled */
.section.nav-wrapper.nav-v2-03.is-scrolled .heading,
.section.nav-wrapper.nav-v2-03.is-scrolled .list__link,
.section.nav-wrapper.nav-v2-03.is-scrolled .btn {
  color: var(--text-primary);
}

/* --- nav-04: Dark Corporate — dark bg, light links ---
   Dark full-width bar. White links. Sticky. */
.section.nav-wrapper.nav-v2-04 {
  background: #111827 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #e5e7eb;
}
.section.nav-wrapper.nav-v2-04 .heading,
.section.nav-wrapper.nav-v2-04 .list__link,
.section.nav-wrapper.nav-v2-04 .btn--ghost {
  color: #e5e7eb;
}
.section.nav-wrapper.nav-v2-04 .list__link:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-md);
}
.section.nav-wrapper.nav-v2-04 .nav-burger .bar {
  background: #e5e7eb;
}

/* --- nav-05: Blur Sticky White — backdrop-filter sticky ---
   Sticky, white with blur effect. Slightly transparent. */
.section.nav-wrapper.nav-v2-05 {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-normal) ease;
}
.section.nav-wrapper.nav-v2-05.is-scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
/* Shrink: reduce nav height on scroll */
.section.nav-wrapper.nav-v2-05.is-scrolled > .container > .layout-split,
.section.nav-wrapper.nav-v2-05.is-scrolled > .container > .layout-stacked {
  min-height: 3.5rem;
  transition: min-height var(--duration-normal) ease;
}

/* --- nav-06: Accent Color — primary bg, white links ---
   Brand-colored full nav. White text. No border. */
.section.nav-wrapper.nav-v2-06 {
  background: var(--primary) !important;
  border-bottom: none;
}
.section.nav-wrapper.nav-v2-06 .heading,
.section.nav-wrapper.nav-v2-06 .list__link,
.section.nav-wrapper.nav-v2-06 .btn,
.section.nav-wrapper.nav-v2-06 .btn--ghost {
  color: var(--on-primary, #fff);
}
.section.nav-wrapper.nav-v2-06 .list__link:hover {
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  color: #fff;
}
.section.nav-wrapper.nav-v2-06 .nav-burger .bar {
  background: var(--on-primary, #fff);
}
/* Outline CTA button on accent bg */
.section.nav-wrapper.nav-v2-06 .btn--primary {
  background: var(--on-primary, #fff);
  color: var(--primary);
  border-color: var(--on-primary, #fff);
}
.section.nav-wrapper.nav-v2-06 .btn--primary:hover {
  background: transparent;
  color: var(--on-primary, #fff);
}

/* --- nav-07: Ultra Minimal — no background, logo + 3-4 links only ---
   Maximum whitespace, no border, super clean.  */
.section.nav-wrapper.nav-v2-07 {
  background: transparent !important;
  border-bottom: none;
}
.section.nav-wrapper.nav-v2-07 .list__link {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
}
.section.nav-wrapper.nav-v2-07 .list__link:hover {
  background: none;
  color: var(--primary);
}
.section.nav-wrapper.nav-v2-07 .heading {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: .02em;
}

/* --- nav-08: Three-col with Phone CTA ---
   White. Three columns: logo | nav | phone button.
   Phone is prominent CTA, different from button variant. */
.section.nav-wrapper.nav-v2-08 {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
/* Phone link in cta slot */
.section.nav-wrapper.nav-v2-08 .slot--cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.section.nav-wrapper.nav-v2-08 .slot--cta a:hover {
  color: var(--primary-hover, var(--primary));
  text-decoration: underline;
}
.section.nav-wrapper.nav-v2-08 .slot--cta i {
  font-size: 1.1em;
}

/* --- nav-09: Always Hamburger — logo + burger only ---
   All screen sizes show hamburger. No visible nav links.
   Gradient dark background. */
.section.nav-wrapper.nav-v2-09 {
  border-bottom: none;
}
/* Hide the nav slot links completely */
.section.nav-wrapper.nav-v2-09 .slot--nav {
  display: none !important;
}

/* --- nav-10: Dual Row --- topbar styling already handled by base rules ---
   Topbar with muted bg. Main nav three-col. Light bg. */
.section.nav-wrapper.nav-v2-10 {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.section.nav-wrapper.nav-v2-10 .nav-topbar {
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border);
}


/* ============================================================
   12. NAV V2 — BURGER BUTTON (auto-injected by JS)
   .nav-burger wrapper injected into .section.nav-wrapper
   for navs without an explicit hamburger slot.
   ============================================================ */

/* Shared burger wrapper */
.nav-burger {
  display: none;                /* hidden on desktop by default */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  transition: background var(--duration-fast) ease;
}

.nav-burger:hover {
  background: rgba(0,0,0,.06);
}

/* Show burger on mobile */
@media (max-width: 1023px) {
  .nav-burger {
    display: flex;
  }
}

/* Hide desktop nav links when mobile */
@media (max-width: 1023px) {
  .section.nav-wrapper:not(.nav-v2-09) .slot--nav .list--inline,
  .section.nav-wrapper:not(.nav-v2-09) .slot--nav ul {
    display: none;
  }
}

/* ---- burger-classic: 3 lines, no animation ---- */
.nav-burger--classic .bar,
.nav-burger--cross .bar,
.nav-burger--dots .dot,
.nav-burger--minimal .bar {
  display: block;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-fast) ease,
              opacity var(--duration-fast) ease,
              top var(--duration-fast) ease,
              bottom var(--duration-fast) ease,
              width var(--duration-fast) ease;
}

/* Classic: 3 bars */
.nav-burger--classic .burger-icon {
  position: relative;
  width: 22px;
  height: 16px;
}
.nav-burger--classic .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
}
.nav-burger--classic .bar:nth-child(1) { top: 0; }
.nav-burger--classic .bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger--classic .bar:nth-child(3) { bottom: 0; }

/* Classic open = no animation, just show X via CSS */
.nav-burger--classic.is-open .bar:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.nav-burger--classic.is-open .bar:nth-child(2) { opacity: 0; }
.nav-burger--classic.is-open .bar:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* ---- burger-cross: 3 lines → smooth X ---- */
.nav-burger--cross .burger-icon {
  position: relative;
  width: 22px;
  height: 16px;
}
.nav-burger--cross .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
}
.nav-burger--cross .bar:nth-child(1) { top: 0; }
.nav-burger--cross .bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-burger--cross .bar:nth-child(3) { bottom: 0; }

.nav-burger--cross.is-open .bar:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.nav-burger--cross.is-open .bar:nth-child(2) { opacity: 0; width: 0; }
.nav-burger--cross.is-open .bar:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* ---- burger-dots: 3x3 grid → X ---- */
.nav-burger--dots .burger-icon {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-template-rows: repeat(3, 5px);
  gap: 3px;
  width: 23px;
  height: 23px;
}
.nav-burger--dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
/* On open: collapse dots into X pattern */
.nav-burger--dots.is-open .dot:nth-child(1) { transform: translate(8px, 8px) rotate(45deg) scaleX(2.4); border-radius: 1px; }
.nav-burger--dots.is-open .dot:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger--dots.is-open .dot:nth-child(3) { transform: translate(-8px, 8px) rotate(-45deg) scaleX(2.4); border-radius: 1px; }
.nav-burger--dots.is-open .dot:nth-child(4) { opacity: 0; transform: scaleY(0); }
.nav-burger--dots.is-open .dot:nth-child(5) { transform: scale(0); opacity: 0; }
.nav-burger--dots.is-open .dot:nth-child(6) { opacity: 0; transform: scaleY(0); }
.nav-burger--dots.is-open .dot:nth-child(7) { transform: translate(8px, -8px) rotate(-45deg) scaleX(2.4); border-radius: 1px; }
.nav-burger--dots.is-open .dot:nth-child(8) { opacity: 0; transform: scaleX(0); }
.nav-burger--dots.is-open .dot:nth-child(9) { transform: translate(-8px, -8px) rotate(45deg) scaleX(2.4); border-radius: 1px; }

/* ---- burger-minimal: 2 lines → X (the user favorite) ---- */
/* Default state: 2 parallel horizontal lines */
.nav-burger--minimal .burger-icon {
  position: relative;
  width: 22px;
  height: 14px;
}
.nav-burger--minimal .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
}
.nav-burger--minimal .bar:nth-child(1) { top: 4px; }
.nav-burger--minimal .bar:nth-child(2) { bottom: 4px; }

/* Open: the 2 lines rotate and spread apart → X */
.nav-burger--minimal.is-open .bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-burger--minimal.is-open .bar:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}


/* ============================================================
   13. NAV V2 — MOBILE MENUS (mm-01..05)
   Auto-injected by JS or pulled from slot--mobile-menu.
   All use .nav-mobile-menu as root class + type modifier.
   ============================================================ */

/* Shared mobile menu base */
.nav-mobile-menu {
  position: fixed;
  z-index: var(--z-modal, 1000);
  background: var(--bg-surface);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile-menu__inner {
  padding: var(--space-6);
}

/* Close button inside mobile menus */
.nav-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}
.nav-mobile-menu__close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.nav-mobile-menu__close-btn:hover {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}

/* Nav links list inside mobile menus */
.nav-mobile-menu ul,
.nav-mobile-menu .list--inline,
.nav-mobile-menu .list--vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-mobile-menu .list__link,
.nav-mobile-menu a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav-mobile-menu .list__link:hover,
.nav-mobile-menu a:hover {
  background: var(--primary-soft, rgba(var(--primary-rgb, 59,130,246),.1));
  color: var(--primary);
}

/* Dark variant — for dark navs (mm-04-dark, etc.) */
.nav-mobile-menu--dark {
  background: #111827;
  color: #e5e7eb;
}
.nav-mobile-menu--dark .list__link,
.nav-mobile-menu--dark a {
  color: #e5e7eb;
}
.nav-mobile-menu--dark .list__link:hover,
.nav-mobile-menu--dark a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-mobile-menu--dark .nav-mobile-menu__close-btn {
  color: #9ca3af;
}
.nav-mobile-menu--dark .nav-mobile-menu__close-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Accent variant — for accent-bg navs */
.nav-mobile-menu--accent {
  background: var(--primary);
  color: var(--on-primary, #fff);
}
.nav-mobile-menu--accent .list__link,
.nav-mobile-menu--accent a {
  color: var(--on-primary, #fff);
}
.nav-mobile-menu--accent .list__link:hover,
.nav-mobile-menu--accent a:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.nav-mobile-menu--accent .nav-mobile-menu__close-btn {
  color: rgba(255,255,255,.7);
}

/* Overlay (backdrop) injected by JS */
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: calc(var(--z-modal, 1000) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}
.nav-mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---- mm-01: Slide Down — expands below navbar ---- */
.nav-mobile-menu--slide-down {
  top: var(--nav-height, 4.5rem);
  left: 0;
  right: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: none;
  transition: max-height var(--duration-normal) cubic-bezier(.4,0,.2,1),
              box-shadow var(--duration-fast) ease;
}
.nav-mobile-menu--slide-down.is-open {
  max-height: calc(100vh - var(--nav-height, 4.5rem));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.nav-mobile-menu--slide-down .nav-mobile-menu__inner {
  padding: var(--space-3) var(--space-4) var(--space-6);
}

/* ---- mm-02: Drawer Left — slides in from left ---- */
.nav-mobile-menu--drawer-left {
  top: 0;
  left: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform var(--duration-normal) cubic-bezier(.4,0,.2,1);
  box-shadow: none;
}
.nav-mobile-menu--drawer-left.is-open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
}

/* ---- mm-03: Drawer Right — slides in from right ---- */
.nav-mobile-menu--drawer-right {
  top: 0;
  right: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  transform: translateX(100%);
  transition: transform var(--duration-normal) cubic-bezier(.4,0,.2,1);
  box-shadow: none;
}
.nav-mobile-menu--drawer-right.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}

/* ---- mm-04: Fullscreen — covers entire viewport ---- */
.nav-mobile-menu--fullscreen {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}
.nav-mobile-menu--fullscreen.is-open {
  opacity: 1;
  visibility: visible;
}
.nav-mobile-menu--fullscreen .nav-mobile-menu__inner {
  width: 100%;
  max-width: 480px;
  text-align: center;
}
.nav-mobile-menu--fullscreen ul,
.nav-mobile-menu--fullscreen .list--inline,
.nav-mobile-menu--fullscreen .list--vertical {
  align-items: center;
  gap: var(--space-2);
}
.nav-mobile-menu--fullscreen .list__link,
.nav-mobile-menu--fullscreen a {
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 600;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
}
/* Staggered entry animation for fullscreen links */
.nav-mobile-menu--fullscreen li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.nav-mobile-menu--fullscreen.is-open li {
  opacity: 1;
  transform: translateY(0);
}
.nav-mobile-menu--fullscreen.is-open li:nth-child(1) { transition-delay: .05s; }
.nav-mobile-menu--fullscreen.is-open li:nth-child(2) { transition-delay: .10s; }
.nav-mobile-menu--fullscreen.is-open li:nth-child(3) { transition-delay: .15s; }
.nav-mobile-menu--fullscreen.is-open li:nth-child(4) { transition-delay: .20s; }
.nav-mobile-menu--fullscreen.is-open li:nth-child(5) { transition-delay: .25s; }
.nav-mobile-menu--fullscreen.is-open li:nth-child(6) { transition-delay: .30s; }

/* Close button top-right for fullscreen */
.nav-mobile-menu--fullscreen .nav-mobile-menu__close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  margin: 0;
}

/* ---- mm-05: Fade Overlay — centered card, fade-in ---- */
.nav-mobile-menu--fade-overlay {
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) ease,
              visibility var(--duration-normal) ease;
}
.nav-mobile-menu--fade-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.nav-mobile-menu--fade-overlay .nav-mobile-menu__inner {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  width: 90%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl, 0 25px 50px rgba(0,0,0,.25));
  transform: scale(.95);
  transition: transform var(--duration-normal) ease;
}
.nav-mobile-menu--fade-overlay.is-open .nav-mobile-menu__inner {
  transform: scale(1);
}


/* ============================================================
   14. NAV V2 — DROPDOWN MENUS (desktop hover + mobile tap)
   .nav-has-children on list items → JS injects .nav-chevron.
   ============================================================ */

/* Dropdown trigger */
.nav-item--has-children {
  position: relative;
}

.nav-chevron {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  font-size: 11px;
  transition: transform var(--duration-fast) ease;
  pointer-events: none;
}

.nav-item--has-children.is-open > a .nav-chevron,
.nav-item--has-children:hover > a .nav-chevron {
  transform: rotate(180deg);
}

/* Desktop dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated, var(--bg-surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--duration-fast) ease,
              visibility var(--duration-fast) ease,
              transform var(--duration-fast) ease;
  z-index: var(--z-dropdown, 200);
  pointer-events: none;
}

.nav-item--has-children:hover > .nav-dropdown,
.nav-item--has-children.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Dropdown links */
.nav-dropdown li { list-style: none; }
.nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: var(--bg-surface-alt);
  color: var(--primary);
}

/* Mobile: dropdown becomes inline accordion */
@media (max-width: 1023px) {
  .nav-item--has-children > .nav-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding: 0 0 0 var(--space-4);
    background: transparent;
    pointer-events: auto;
  }
  .nav-item--has-children.is-open > .nav-dropdown {
    display: block;
  }
}