/*--------------------------------------------------------------
  # Navigation Menu
--------------------------------------------------------------*/

.navbar {
  padding: 0;
  position: static;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin-left: 10px;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-default);
  white-space: nowrap;
  transition: background 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 16px;
  line-height: 0;
  margin-left: 5px;
  margin-right: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  background: rgba(255, 255, 255, 0.2);
}


/* ============================================================
   DESKTOP — STANDARD DROPDOWN  (level 2)
   ============================================================ */

.navbar .dropdown>ul {
  display: block;
  position: absolute;
  top: calc(100% + 30px);
  left: 10px;
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
  transition: top 0.3s, opacity 0.3s;
}

.navbar .dropdown>ul li {
  min-width: 200px;
}

.navbar .dropdown>ul a {
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #2f4d5a;
  white-space: nowrap;
  text-transform: none;
}

.navbar .dropdown>ul a i {
  font-size: 12px;
}

.navbar .dropdown>ul a:hover,
.navbar .dropdown>ul .active:hover,
.navbar .dropdown>ul li:hover>a {
  color: var(--color-secondary);
  background: none;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}


/* ============================================================
   DESKTOP — NESTED DROPDOWN  (level 3)
   Targets .dropdown-submenu which is the class used in HTML
   ============================================================ */

.navbar .dropdown-submenu>ul {
  display: block;
  position: absolute;
  top: 0;
  left: calc(100% - 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
  transition: left 0.3s, opacity 0.3s;
}

.navbar .dropdown-submenu>ul li {
  min-width: 200px;
}

.navbar .dropdown-submenu:hover>ul {
  opacity: 1;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown-submenu>ul {
    left: -90%;
  }

  .navbar .dropdown-submenu:hover>ul {
    left: -100%;
  }
}

/* ============================================================
DESKTOP — MEGAMENU
============================================================ */

.navbar .megamenu {
  position: static;
}

.megamenu {
  position: relative;
}

/* ============================================================
MEGAMENU PANEL
============================================================ */

.megamenu .multi-column {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  padding: 0px 20px;
  background: #ffffff;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

/* ============================================================
KEEP MENU OPEN
============================================================ */

.megamenu:hover .multi-column,
.megamenu .multi-column:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================================
LEFT PANEL
============================================================ */

.more-left-panel {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.more-left-panel li {
  list-style: none;
}

.more-left-panel li a {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 12px 16px;

  color: var(--color-default-light);

  transition: all 0.2s ease;
}

.more-left-panel li svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ============================================================
LEFT PANEL HOVER
============================================================ */

.more-left-panel li:hover {
  background: var(--color-secondary-light);
}

.more-left-panel li:hover a {
  color: var(--color-secondary);
}

.more-left-panel li:hover svg {
  fill: var(--color-secondary);
}

/* ============================================================
RIGHT PANEL
============================================================ */

.more-right-panel {
  padding-left: 25px;
   padding-bottom: 20px;
}

.submenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  padding: 0;
  margin: 0;
}

.submenu ul li {
  list-style: none;
  min-width: 220px;
  flex: 1;
}

.submenu ul li strong {
  display: block;

  padding-bottom: 12px;

  font-size: 15px;
  font-weight: 700;

  color: #111827;
}

.submenu ul li a {
  display: block;

  padding: 7px 0;

  color: var(--color-default-light);

  transition: color 0.2s ease;
}

.submenu ul li a:hover {
  color: var(--color-secondary);
}


/* ============================================================
   MOBILE TOGGLE BUTTON
   ============================================================ */

.mobile-nav-toggle {
  display: none;
  font-size: 28px;
  line-height: 0;
  cursor: pointer;
  color: var(--color-default);
  transition: color 0.5s;
}

@media (max-width: 1199px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}


/* ============================================================
   MOBILE — NAVBAR OPEN STATE
   Uses .navbar.navbar-mobile (double-class) to beat specificity
   of .navbar ul { display: flex } declared above
   ============================================================ */

.navbar.navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: rgba(43, 111, 142, 0.9);
  z-index: 9999;
  transition: background 0.3s;
}

.navbar.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  overflow-y: auto;
  background: #fff;
  transition: background 0.3s;
}

.navbar.navbar-mobile a,
.navbar.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: var(--color-primary-dark);
}

.navbar.navbar-mobile a:hover,
.navbar.navbar-mobile .active,
.navbar.navbar-mobile li:hover>a {
  color: var(--color-secondary);
  background: none;
}


/* ============================================================
   MOBILE — STANDARD DROPDOWN  (level 2)
   ============================================================ */

.navbar.navbar-mobile .dropdown>ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
}

.navbar.navbar-mobile .dropdown>ul li {
  min-width: 200px;
}

.navbar.navbar-mobile .dropdown>ul a {
  padding: 10px 20px;
}

.navbar.navbar-mobile .dropdown>ul a:hover,
.navbar.navbar-mobile .dropdown>ul .active:hover,
.navbar.navbar-mobile .dropdown>ul li:hover>a {
  color: var(--color-secondary);
}

.navbar.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}


/* ============================================================
   MOBILE — NESTED DROPDOWN  (level 3)
   ============================================================ */

.navbar.navbar-mobile .dropdown-submenu>ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0 0 30px rgba(127, 137, 161, 0.25);
}

.navbar.navbar-mobile .dropdown-submenu>.dropdown-active {
  display: block;
}


/* ============================================================
   MOBILE — MEGAMENU
   ============================================================ */

.navbar.navbar-mobile .megamenu .multi-column {
  position: static;
  display: none;
  opacity: 1;
  visibility: visible;
  flex-direction: column;
  box-shadow: none;
  padding: 10px 0;
  background: #fff;
}

.navbar.navbar-mobile .megamenu>.dropdown-active {
  display: flex;
}

.navbar.navbar-mobile .megamenu ul li a,
.navbar.navbar-mobile .megamenu ul li:hover>a {
  color: var(--color-default-light);
  background: none;
}

.navbar.navbar-mobile .megamenu ul li a:hover,
.navbar.navbar-mobile .megamenu ul li .active,
.navbar.navbar-mobile .megamenu ul li .active:hover {
  color: var(--color-secondary);
}




/* =========================================
USER DROPDOWN BUTTON
========================================= */

#user-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  transition: 0.3s ease;
}

/* HOVER */

#user-dropdown:hover {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* =========================================
PROFILE IMAGE
========================================= */

.header-profile-user {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;

}

/* =========================================
NO IMAGE USER ICON
========================================= */

.header-profile-user.no-image {
  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: var(--color-primary-light);
  color: var(--color-primary);

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

  font-size: 16px;
  font-weight: 600;

  text-transform: uppercase;

  border: 2px solid var(--color-primary);
}

/* =========================================
USERNAME
========================================= */

#user-dropdown span {
  font-size: 14px;
  font-weight: 600;

  color: var(--color-primary);

  white-space: nowrap;
}

/* =========================================
DROPDOWN ICON
========================================= */

#user-dropdown i {
  font-size: 14px;
  color: var(--color-primary);
}

/* =========================================
DROPDOWN MENU
========================================= */

.dropdown-menu {
  min-width: 200px;

  border: none;
  border-radius: 12px;

  padding: 10px 0;

  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

/* =========================================
MENU ITEMS
========================================= */

.dropdown-menu .dropdown-item {
  padding: 10px 18px;

  font-size: 14px;
  font-weight: 500;

  color: var(--color-primary);

  transition: 0.2s ease;
}

/* =========================================
HOVER
========================================= */

.dropdown-menu .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-secondary);
}

/* =========================================
LOGOUT
========================================= */

.dropdown-menu .dropdown-item.text-danger:hover {
  background: rgba(220, 53, 69, 0.08);
  color: var(--color-secondary) !important;
}

/* =========================================
MOBILE VIEW
ONLY IMAGE SHOW
========================================= */

@media (max-width: 991px) {

  #user-dropdown {
    padding: 4px;
    gap: 0;
  }

  /* HIDE NAME */

  #user-dropdown span,
  #user-dropdown i {
    display: none !important;
  }

  .header-profile-user,
  .header-profile-user.no-image {
    width: 36px;
    height: 36px;
  }

  .dropdown-menu {
    min-width: 180px;
  }

}
/* =========================================================
HEADER SEARCH
========================================================= */

.header-search {
  position: relative;
  min-width: 0;
}

/* =========================================================
HEADER ROW SIZING
The header is one non-wrapping flex row. The nav width is
content-driven (menu items come from the DB), so the nav is the
part allowed to shrink; the login button never is.
========================================================= */

#header #navbar {
  min-width: 0;
}

#header .get-started-btn {
  flex-shrink: 0;
  margin-left: 12px;
}

/* =========================================================
SEARCH WRAPPER
========================================================= */

.header-search-wrapper {
  position: relative;
  z-index: 99;
}

/* =========================================================
SEARCH FORM
========================================================= */

.header-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  transition: all 0.25s ease;
}

.header-search-form:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.08);
}

/* =========================================================
SEARCH ICON
========================================================= */

.header-search-icon {
  width: 50px;
  height: 46px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-search-icon i {
  font-size: 18px;
  color: #6b7280;
}

/* =========================================================
SEARCH INPUT
========================================================= */

.header-search-form input {
  flex: 1;
  height: 46px;
  border: none;
  outline: none;
  background: transparent;
  padding-right: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.header-search-form input::placeholder {
  color: #9ca3af;
}

/* =========================================================
SEARCH CLOSE
========================================================= */

.header-search-close {
  width: 46px;
  height: 46px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-search-close i {
  font-size: 16px;
  color: #111827;
}

/* =========================================================
SEARCH RESULTS
========================================================= */

.header-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 9999;
  display: none;
}

/* =========================================================
RESULT ITEM
========================================================= */

.header-search-results .list-group-item {
  border: none;
  background: transparent;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-search-results .list-group-item:hover {
  background: #f8fafc;
}

/* =========================================================
RESULT TEXT
========================================================= */

.header-search-results .list-group-item span:first-child {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
RESULT CATEGORY
========================================================= */

.result-category {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 30px;
  background: rgba(59,130,246,0.08);
  color: var(--color-primary);
  white-space: nowrap;
}

/* =========================================================
HEADER SEARCH BUTTON
========================================================= */

.header-icon-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.header-icon-btn:hover {
  background: rgba(0,0,0,0.05);
}

.header-icon-btn i {
  font-size: 20px;
  color: var(--color-primary);
}

/* =========================================================
DESKTOP
========================================================= */

@media (min-width: 1200px) {

  /* Allow the search to give space back to the nav instead of overflowing
     the header row. Desktop only — below this the search is an icon that
     opens a full-screen overlay. */
  .header-search {
    flex: 0 1 32rem;
  }

  .header-search-wrapper {
    display: flex !important;
    align-items: center;
    margin-left: 24px;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    height: auto !important;
  }

  .header-search-form {
    width: 32rem;
    max-width: 100%;
    height: 3rem;
    overflow: visible;
  }

  /* Between the desktop breakpoint and a wide screen there is not enough
     room for a 32rem search box next to the full nav. */
  @media (max-width: 1500px) {
    .header-search-form {
      width: 22rem;
    }
  }

  .header-search-close {
    display: none;
  }

  .header-icon-btn {
    display: none !important;
  }

  .header-search-results {
    display: none;
  }
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 1199px) {

  .header-search-wrapper {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 2100;
  }

  .header-search-wrapper.active {
    opacity: 1;
    visibility: visible;
  }

  .header-search-form {
    width: 100%;
    padding: 14px;
    border-radius: 0;
    border: none;
    background: #ffffff;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .header-search-wrapper.active .header-search-form {
    transform: translateY(0);
  }

  .header-search-icon,
  .header-search-close {
    width: 46px;
    height: 46px;
    background: #f3f4f6;
  }

  .header-search-icon {
    border-radius: 12px 0 0 12px;
  }

  .header-search-close {
    border-radius: 0 12px 12px 0;
  }

  .header-search-form input {
    height: 46px;
    padding: 0 14px;
    background: #f3f4f6;
    font-size: 15px;
  }

  .header-search-results {
    top: 76px;
    left: 14px;
    width: calc(100% - 28px);
    border-radius: 14px;
  }

  .header-icon-btn {
    display: flex;
  }
  
  #header #navbar {
  order: -1 !important;
  margin-left: 0 !important;
  margin-right: 0.5rem;
}


}
/* ===== Header dropdowns (user menu + notification bell) ===== */
.header-user-dropdown { position: relative; }
.header-notif { position: relative; margin-right: 0.4rem; }

/* User menu */
.header-user-dropdown .dropdown-menu {
  position: absolute; top: 100%; right: 0; left: auto;
  margin-top: 6px; min-width: 200px; z-index: 1050;
}

/* Bell button + badge */
.header-notif-btn { position: relative; background: transparent; border: none; padding: 6px 8px; line-height: 1; }
.header-notif-btn i { font-size: 22px; color: var(--color-primary); }
.header-notif-count { position: absolute; top: 2px; right: 2px; background: var(--color-secondary); color: #fff; font-size: 10px; line-height: 1; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }

/* Bell menu + items */
.header-notif-menu { position: absolute; top: 100%; right: 0; left: auto; width: 320px; max-width: calc(100vw - 30px); max-height: 400px; overflow-y: auto; padding: 8px 0; margin-top: 8px; z-index: 1050; }
.header-notif-title { padding: 4px 14px 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--color-primary); border-bottom: 1px solid #eee; }
.header-notif-empty { padding: 16px 14px; text-align: center; color: #888; font-size: 13px; }
.header-notif-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; text-decoration: none; color: #333; transition: background 0.2s ease; }
.header-notif-item:hover { background: #f5f7fa; }
.header-notif-img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.header-notif-body { display: flex; flex-direction: column; min-width: 0; }
.header-notif-item-title { font-size: 13px; font-weight: 600; color: #111; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.header-notif-text { font-size: 12px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Show when open (JS toggles .show) */
.header-user-dropdown .dropdown-menu.show,
.header-notif .dropdown-menu.show { display: block; }

/* Mobile: fixed panels so nothing is clipped / off-screen */
@media (max-width: 991px) {
  .header-user-dropdown .dropdown-menu {
    position: fixed; top: 92px; right: 12px; left: auto;
    width: 220px; max-width: calc(100vw - 24px); margin-top: 0;
  }
}
@media (max-width: 767px) {
  .header-notif-menu {
    position: fixed; top: 92px; left: 12px; right: 12px;
    width: auto; max-width: none; max-height: 65vh; margin-top: 0;
  }
}
/* ============================================================
   MOBILE DRAWER  (< 1200px)
   Slides in from the left. Replaces the old .navbar-mobile
   full-screen overlay. Search, notifications and login stay in
   the header bar.
   ============================================================ */

.drawer-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-right: 10px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: var(--color-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-toggle svg {
  width: 22px;
  height: 22px;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 37, 64, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
}

.site-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 2001;
  width: 86%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 6px 0 30px rgba(10, 37, 64, 0.18);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overscroll-behavior: contain;
}

.site-drawer.open {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f5;
  flex: 0 0 auto;
}

.drawer-logo img {
  max-height: 2.5rem;
}

.drawer-close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: #f5f7fa;
  color: var(--color-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

.drawer-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 32px;
}

.drawer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-nav a {
  display: block;
  padding: 13px 18px;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-default);
  text-decoration: none;
}

.drawer-nav a:hover {
  color: var(--color-primary);
  background: #f7f9fc;
}

/* Parent row: label navigates, chevron expands. */
.drawer-row {
  display: flex;
  align-items: center;
}

.drawer-row a {
  flex: 1 1 auto;
  min-width: 0;
}

.drawer-sub-toggle {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-default-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.drawer-sub-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.drawer-nav li.expanded > .drawer-row .drawer-sub-toggle svg {
  transform: rotate(180deg);
}

.drawer-sub {
  display: none;
  background: #fafbfd;
  border-left: 2px solid var(--color-primary-light, #e5e7eb);
  margin-left: 18px;
}

.drawer-nav li.expanded > .drawer-sub {
  display: block;
}

.drawer-sub a {
  font-weight: 600;
  font-size: 14px;
  padding: 11px 16px;
}

.drawer-sub .drawer-sub a {
  font-weight: 500;
  font-size: 13.5px;
}

@media (max-width: 1199px) {

  .drawer-toggle {
    display: flex;
  }

  /* The desktop nav is fully replaced by the drawer below this width. */
  #header #navbar {
    display: none;
  }
}

@media (min-width: 1200px) {

  .drawer-overlay,
  .site-drawer {
    display: none;
  }
}

/* =========================================================
HEADER ROW — FLUID SIZING (fixes nav / login overlap)

The desktop nav appears at >=1200px, but its items were fixed at
font-size:16px + padding:8px 16px + white-space:nowrap, and the
search box was a fixed 22rem. Added up, the row needs roughly
1420px. Between 1200px and that width the items could not shrink,
so the last ones ("Blogs", "Explore") painted over the notification
bell and the Login button.

#header #navbar already had min-width:0, which let the nav BOX
shrink — but the <ul> inside it still could not, so the content
simply overflowed its box.

Everything below scales smoothly between 1200px and 1600px and
stops at the original values from 1600px up, so wide screens look
exactly as before. overflow is deliberately NOT used: the
dropdowns are absolutely positioned inside .navbar li and clipping
the nav would cut them off.
========================================================= */

@media (min-width: 1200px) {

  /* Shrink priority. The earlier rule let the NAV be the flexible part, but
     shrinking the nav box does nothing when its items are white-space:nowrap
     — the content just spills out of the box and over whatever follows. That
     is the overlap. Now the nav is sized by the clamps below and never
     shrinks; the search box absorbs the slack instead. */
  #header #navbar {
    flex: 0 0 auto;
    min-width: 0;
  }

  #header #navbar > ul {
    flex-wrap: nowrap;
    min-width: 0;
  }

  /* 13px at 1200px -> 16px at 1600px, then held. */
  .navbar a,
  .navbar a:focus {
    font-size: clamp(13px, 0.25rem + 0.75vw, 16px);
    padding-left: clamp(8px, -16px + 2vw, 16px);
    padding-right: clamp(8px, -16px + 2vw, 16px);
    margin-left: clamp(4px, -14px + 1.5vw, 10px);
  }

  .navbar a i,
  .navbar a:focus i {
    font-size: clamp(13px, 0.25rem + 0.75vw, 16px);
    margin-left: 2px;
    margin-right: 2px;
  }

  /* The search was already shrinkable (flex: 0 1 32rem, and the form has
     max-width:100%), so it only needs a floor — without one it can be
     squeezed to nothing before the nav gives up any space at all. */
  .header-search {
    min-width: 12rem;
  }

  /* These sit to the right of the nav and must never be squashed or
     overlapped — they are the controls that were being covered. */
  #header .header-notif,
  #header .header-user-dropdown,
  #header .get-started-btn {
    flex-shrink: 0;
  }

  .get-started-btn {
    margin-left: clamp(8px, -28px + 3vw, 30px);
  }
}

/* NOTE: this comfortably fits the six current menu items with room to
   spare. The menu is admin-driven, so if many more are added and the row
   tightens again, raise the drawer breakpoint (the two @media blocks
   above this one) from 1199/1200 to, say, 1399/1400 so the drawer covers
   the widths where the full nav no longer fits. */