/* ─── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── HEADER ─────────────────────────────────────────────*/
.site-header {
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10),
              0 2px 4px -1px rgba(0,0,0,0.06);
  padding: 0 0;
}

/* ─── CONTAINER ──────────────────────────────────────────*/
.nav-container {
  max-width: 1152px;           /* max-w-6xl  */
  margin: 0 auto;
  padding: 16px 16px 16px 16px;  /* px-4 → left; right handled per inner */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
}

/* ─── BRAND / LOGO ───────────────────────────────────────*/
.brand {
  display: flex;
  align-items: center;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-wrapper a {
  display: inline-flex;
}

#site-logo {
  height: 92px;                /* matches Tailwind h-[96px] rendered */
  transition: height 0.3s ease;
  display: block;
}

.logo-wrapper > span {
  font-size: 12px;             /* text-xs */
  color: #6b7280;              /* text-gray-500 */
}

#disc-link {
  color: #2563eb;              /* text-blue-600 */
  text-decoration: none;
}

#disc-link:hover {
  color: #1e40af;              /* hover:text-blue-800 */
}

/* ─── DESKTOP NAV WRAPPER ────────────────────────────────*/
.nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 24px; 
  margin-top: 6px;
}

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

/* ─── NAV LINKS ──────────────────────────────────────────*/
.nav-list li > a,
.nav-list li .dropdown > button {
  color: #6b7280;              /* text-gray-500 */
  text-decoration: none;
  font-size: 14px;             /* text-sm */
  font-weight: 500;            /* font-medium */
  padding: 4px 4px;            /* px-1 pt-1 */
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
  white-space: nowrap;
  margin-right: 24px;          /* space-x-6 */
}

.nav-list li > a:hover,
.nav-list li .dropdown > button:hover {
  color: #374151;              /* hover:text-gray-700 */
}

/* ─── DROPDOWN ───────────────────────────────────────────*/
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;             /* mt-1 */
  background: #ffffff;
  border-radius: 8px;          /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10),
              0 4px 6px -2px rgba(0,0,0,0.05);
  border: 1px solid #f3f4f6;  /* border-gray-100 */
  min-width: 176px;            /* w-44 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 50;
}

.resources-menu {
  min-width: 144px;            /* w-36 */
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;          /* py-2.5 px-4 */
  font-size: 14px;             /* text-sm */
  color: #4b5563;              /* text-gray-600 */
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.dropdown-menu a:first-child { border-radius: 8px 8px 0 0; } /* rounded-t-lg */
.dropdown-menu a:last-child  { border-radius: 0 0 8px 8px; } /* rounded-b-lg */

.dropdown-menu a:hover {
  background: #eff6ff;         /* hover:bg-blue-50 */
  color: #1d4ed8;              /* hover:text-blue-700 */
}

/* chevron rotation */
.chevron {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.dropdown:hover .chevron {
  transform: rotate(180deg);
}

/* ─── CTA BUTTON ─────────────────────────────────────────*/
.nav-cta .btn {
  text-decoration: none;
  color: #6b7280;
  transition: background 0.2s;
  font-weight: normal;
  font-size: 14px;
  padding: 8px 16px;
}

.nav-cta .btn-ghost {
  background: #2563eb;         /* bg-blue-600 */
  color: #ffffff;
  font-size: 14px;             /* text-sm */
  font-weight: 500;
  padding: 8px 16px;           /* px-4 py-2 */
  border-radius: 8px;          /* rounded-lg */
  margin-left: 8px;            /* ml-2 */
  white-space: nowrap;
  display: inline-block;
  height: auto;
}

.nav-cta .btn-ghost:hover {
  background: #1d4ed8;         /* hover:bg-blue-700 */
}

/* ─── MOBILE TOGGLE ──────────────────────────────────────*/
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 6px;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  align-self: center;
}

.nav-toggle:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* ─── MOBILE MENU ────────────────────────────────────────*/
.mobile-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: 8px 12px 12px;
  gap: 4px;
}

.mobile-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.mobile-menu a:hover {
  background: #f9fafb;
  color: #1f2937;
}

.mobile-menu a.active-link {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1d4ed8;
  font-weight: 500;
}

.mobile-dropdown button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.mobile-dropdown button:hover {
  background: #f9fafb;
  color: #1f2937;
}

.mobile-sub {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  gap: 2px;
  margin-top: 4px;
}

.mobile-sub a {
  padding: 6px 16px;
  font-size: 14px;
  color: #6b7280;
}

.mobile-sub a:hover {
  color: #1d4ed8;
}

.btn-mobile {
  background: #2563eb !important;
  color: #ffffff !important;
  text-align: center;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin-top: 4px;
  font-weight: 500;
}

.btn-mobile:hover {
  background: #1d4ed8 !important;
}

.hidden { display: none !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────*/
@media (max-width: 1023px) {            /* lg breakpoint = 1024px */
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-container { align-items: center; flex-wrap: wrap; }
}

@media (max-width: 1023px) {
  .mobile-menu.open { display: flex; }
}