/* FreePDFWorld header (non-minified). Keep class names stable to avoid regressions.
   This file is designed to be cacheable and loaded on all public pages.
*/

:root {
  --fpw-gray-50:#f9fafb;
  --fpw-gray-100:#f3f4f6;
  --fpw-gray-200:#e5e7eb;
  --fpw-gray-600:#4b5563;
  --fpw-gray-700:#374151;
  --fpw-gray-800:#1f2937;
  --fpw-gray-900:#111827;
  --fpw-blue:#2563eb;
  --fpw-blue-dark:#1e40af;
}

/* Base */
.modern-header {
  background:#fff;
  position: sticky;
  top: 0;
  z-index: 99999;
  border-bottom:1px solid var(--fpw-gray-200);
  box-shadow:0 1px 3px rgba(0,0,0,.1);
  overflow: visible;
  isolation: isolate;
  /* Tablet/iOS Safari fix:
     Promote the header to its own composited layer to avoid
     dropdown panels being painted behind main content during scroll/tap. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@supports not (overflow-x: clip) {
  .modern-header { overflow: visible; }
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 60px;
  gap: 1rem;
  position: relative;
  z-index: 100000;
  width: 100%;
}

/* Ensure header paints with stable system metrics immediately (prevents layout snap on hard refresh)
   IMPORTANT: don't apply to icon glyph nodes (Font Awesome), it breaks icon rendering.
*/
.modern-header,
.modern-header button,
.modern-header a,
.modern-header summary,
.modern-header span,
.modern-header div,
.modern-header strong,
.modern-header small,
.modern-header h6 {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* IMPORTANT:
   Never set font-family on <i> icons inside the header.
   Font Awesome's CSS must control the icon font-family.
*/

/* Scoped restore for Font Awesome inside header (wins over the generic system font rules above)
   NOTE: include the core v6 selectors too (.fa-classic, .fa-sharp, etc.) to prevent icons rendering as squares.
*/
.modern-header .fa,
.modern-header .fas,
.modern-header .far,
.modern-header .fal,
.modern-header .fat,
.modern-header .fa-solid,
.modern-header .fa-regular,
.modern-header .fa-classic,
.modern-header .fa-sharp,
.modern-header .fa-sharp-solid,
.modern-header .fa-sharp-regular {
  font-family: "Font Awesome 6 Free", sans-serif !important;
}
.modern-header .fa-brands,
.modern-header .fab {
  font-family: "Font Awesome 6 Brands", sans-serif !important;
}

/* Weight mapping: .fas/.fa-solid must be 900, regular must be 400. */
.modern-header .fas,
.modern-header .fa-solid,
.modern-header .fa-classic,
.modern-header .fa-sharp,
.modern-header .fa-sharp-solid {
  font-weight: 900 !important;
}
.modern-header .far,
.modern-header .fa-regular,
.modern-header .fa-sharp-regular {
  font-weight: 400 !important;
}
.modern-header .fab,
.modern-header .fa-brands {
  font-weight: 400 !important;
}

.brand-logo{display:flex;align-items:center;text-decoration:none;color:inherit;flex-shrink:0}
.logo-svg{height:40px;width:auto;max-width:200px;display:block}

/* Logo theme switching — show light logo by default, dark logo in dark mode */
.logo-dark { display: none; }
.logo-light { display: block; }
[data-theme="dark"] .logo-dark  { display: block; }
[data-theme="dark"] .logo-light { display: none; }

/* Mobile toggle */
.mobile-toggle{display:none;flex-direction:column;background:none;border:0;cursor:pointer;padding:.5rem;gap:5px}
.mobile-toggle span{width:24px;height:2px;background:var(--fpw-gray-800);border-radius:2px;transition:all .2s ease}
.mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translateY(7px)}
.mobile-toggle.active span:nth-child(2){opacity:0}
.mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translateY(-7px)}

/* Nav */
.nav-menu{display:flex;align-items:center;gap:.25rem;position:relative;z-index:100001;flex-wrap: nowrap}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  color:var(--fpw-gray-700);
  text-decoration:none;
  font-size:.9375rem;
  font-weight:600;
  white-space:nowrap;
  border-radius:8px;
  transition:background .2s ease,color .2s ease;
}
.nav-link:hover{background:var(--fpw-gray-100);color:var(--fpw-blue)}
.nav-link i:first-child{font-size:1.075rem}

/* details/summary dropdowns */
.nav-item{position:relative}

/* FIX: summary is the clickable trigger in our <details> markup */
.nav-item.has-dropdown summary.nav-link{
  list-style:none;
  cursor:pointer;
}
.nav-item.has-dropdown summary.nav-link::-webkit-details-marker{display:none}

.dropdown-arrow{font-size:.75rem;margin-left:.25rem;transition:transform .2s ease}

/* FIX: open-state selector must work for <details class="nav-item has-dropdown"> */
details.nav-item.has-dropdown[open] .dropdown-arrow{transform:rotate(180deg)}

/* Dropdown content: animate in/out (keeps enterprise feel) */
.dropdown-content{
  position:absolute;
  top: calc(100% + .5rem);
  left:0;
  background:#fff;
  border:1px solid var(--fpw-gray-200);
  border-radius:12px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  min-width: 280px;
  padding: .25rem;
  z-index: 2147483640;
  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  /* iOS/Safari: ensure dropdown becomes its own layer (prevents being painted under transformed sections) */
  will-change: transform, opacity;
  -webkit-transform: translateZ(0) translateY(-10px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Default: open via details[open]
   FIX: open-state selector must work for <details class="nav-item has-dropdown">
*/
details.nav-item.has-dropdown[open] > .dropdown-content{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  -webkit-transform: translateZ(0) translateY(0);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483640;
}

/* Desktop hover-open (pointer:fine)
   <details> doesn't open on hover by itself, so we visually reveal the panel on hover/focus-within.
*/
@media (pointer: fine) {
  .modern-header details.nav-item.has-dropdown:hover > .dropdown-content,
  .modern-header details.nav-item.has-dropdown:focus-within > .dropdown-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Arrow rotation parity */
  .modern-header details.nav-item.has-dropdown:hover .dropdown-arrow,
  .modern-header details.nav-item.has-dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
  }

  /* Hover bridge: keeps dropdown open while moving pointer from summary into panel */
  .modern-header details.nav-item.has-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .6rem;
  }
}

/* Touch devices: DO NOT hover-open */
@media (pointer: coarse) {
  .modern-header details.nav-item.has-dropdown:hover > .dropdown-content,
  .modern-header details.nav-item.has-dropdown:focus-within > .dropdown-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
  }
}

/* Mobile menu layout */
@media (max-width: 992px) {
  .mobile-toggle{display:flex;z-index:100002}
  .nav-menu{
    position:fixed;
    top:60px;
    left:-100%;
    width:100%;
    height:calc(100vh - 60px);
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:1rem;
    overflow:auto;
    transition:left .25s ease;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
  }
  .nav-menu.active{left:0}
  .nav-link{width:100%;justify-content:space-between;padding:1rem .75rem}

  /* dropdowns become static accordion panels */
  .dropdown-content{
    position:static;
    box-shadow:none;
    border:1px solid var(--fpw-gray-200);
    margin:.5rem 0 .75rem;
    padding:.5rem;
    border-radius:12px;
    display: none; /* closed by default */
    opacity: 1;   /* avoid fade logic on mobile */
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  /* FIX: open-state selector for accordion panels */
  details.nav-item.has-dropdown[open] > .dropdown-content{ display:block; }

  /* IMPORTANT: disable hover-open on touch */
  @media (pointer: coarse) {
    details.has-dropdown:hover > .dropdown-content{display:none}
  }
}

/* Prevent layout shift when icons/fonts swap (keeps nav widths stable) */
.nav-link, .dropdown-link { line-height: 1.2; }

/* On small screens, make dropdown-accordion panels show for details[open] */
@media (max-width: 992px) {
  details.nav-item.has-dropdown[open] > .dropdown-content { display: block; }
}

/* Dropdown link items: ensure consistent colors and the secondary text line is visible */
.dropdown-link{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.85rem 1rem;
  color:var(--fpw-gray-800);
  text-decoration:none;
  border-radius:10px;
}
.dropdown-link:hover{background:var(--fpw-gray-50);color:var(--fpw-gray-900)}

.link-text{min-width:0}
.link-text strong{display:block;color:var(--fpw-gray-900);font-weight:700;line-height:1.2}
.link-text small{
  display:block;
  color:var(--fpw-gray-600);
  font-size:.75rem;
  line-height:1.2;
  margin-top:.125rem;
}

/* Compact mega-menu items: make sure the subtext isn't clipped/missing */
.dropdown-link.compact .link-text strong{font-size:.875rem}
.dropdown-link.compact .link-text small{font-size:.75rem}

/* Prevent misalignment when FA icons don't load or when text wraps */
.link-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.link-icon i{font-size:1.05rem;line-height:1}

/* Compact links used in mega menus */
.dropdown-link.compact{padding:.6rem .75rem;gap:.75rem}
.dropdown-link.compact .link-icon{width:36px;height:36px}

/* Mega menu layouts (simplified but compatible) */
.mega-menu-horizontal{min-width:580px;max-width:640px;padding:1rem}
.mega-menu-all{min-width:700px;max-width:760px;padding:1rem}
.mega-categories{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mega-all-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

@media (max-width: 992px) {
  .mega-menu-horizontal,.mega-menu-all{min-width:100%;max-width:100%}
  .mega-categories,.mega-all-grid{grid-template-columns:1fr}
}

/* Focus styles */
.nav-link:focus-visible, .dropdown-link:focus-visible, .mobile-toggle:focus-visible{
  outline:3px solid var(--fpw-blue);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce) {
  *{transition:none !important;animation:none !important}
}

/* ==========================================
   MORE MENU (9-dot) + Layout
   ========================================== */

.more-menu-trigger{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.nine-dot-icon{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:3px;
  width:20px;
  height:20px;
  padding:2px;
}
.nine-dot-icon span{
  width:4px;
  height:4px;
  border-radius:50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  transition: transform .2s ease, background .2s ease;
  transform: none;
}

@media (pointer: fine) {
  .more-menu-trigger:hover .nine-dot-icon span{
    background: linear-gradient(135deg,#2563eb 0%, #1e40af 100%);
    transform: scale(1.15);
  }
}

/* Touch/tablet: disable the hover animation; keep a stable pressed/active state instead.
   This prevents the "middle dots moving weird" effect seen on iPad Safari/Chrome. */
@media (pointer: coarse) {
  .more-menu-trigger:hover .nine-dot-icon span{ transform: none; }
  .more-menu-trigger:active .nine-dot-icon span{ transform: none; }

  /* When the More menu is open (JS adds .active), use a subtle uniform scale, not per-dot motion */
  .more-menu-dropdown.active .nine-dot-icon span{
    background: linear-gradient(135deg,#2563eb 0%, #1e40af 100%);
    transform: scale(1.05);
  }
}

.more-text-mobile,
.more-arrow-mobile{display:none}

.more-menu-dropdown > .dropdown-content{
  right:0;
  left:auto;
}

.more-menu-content{
  min-width: 820px;
  max-width: 820px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.more-menu-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}

.more-menu-column{
  padding: 1.5rem;
  background: #fff;
  border-right: 1px solid var(--fpw-gray-200);
  min-height: 360px;
}
.more-menu-column:last-child{border-right:0}

.more-menu-title{
  font-size: .875rem;
  font-weight: 800;
  color: var(--fpw-gray-900);
  margin:0 0 1rem 0;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--fpw-gray-200);
  display:flex;
  align-items:center;
  gap:.5rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.more-menu-title i{color: var(--fpw-blue)}

/* Coming soon cards */
.coming-soon-items{display:flex;flex-direction:column;gap:1rem}
.coming-soon-item{
  display:flex;
  align-items:flex-start;
  gap:.875rem;
  padding:.875rem;
  background: linear-gradient(135deg,#fef3c7 0%, #fde68a 100%);
  border:1px solid #fcd34d;
  border-radius: 10px;
  position:relative;
}
.coming-soon-icon{
  width:40px;height:40px;
  background:#fff;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f59e0b;
  flex-shrink:0;
}
.coming-soon-text{flex:1;position:relative;padding-right:3.5rem}
.coming-soon-text strong{display:block;color:#78350f;font-size:.875rem;margin-bottom:.25rem}
.coming-soon-text small{display:block;color:#92400e;font-size:.75rem;line-height:1.3}
.badge-soon{
  position:absolute;
  top:0;
  right:0;
  background: linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;
  font-size:.625rem;
  padding:.25rem .5rem;
  border-radius:6px;
  font-weight:800;
  white-space:nowrap;
}

/* Team column */
.team-column{background: linear-gradient(135deg,#f0f9ff 0%, #e0f2fe 100%)}
.team-members{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
.team-member{
  display:flex;
  align-items:center;
  gap:.875rem;
  padding:.75rem;
  border-radius:10px;
  background:#fff;
  border:1px solid #bae6fd;
  text-decoration:none;
  color: inherit;
}
.team-member:hover{border-color: var(--fpw-blue); box-shadow:0 8px 18px rgba(37,99,235,.18)}
.team-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--fpw-blue)}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background: linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.team-info strong{display:block;color:var(--fpw-blue-dark);font-size:.875rem;margin-bottom:.125rem}
.team-info small{display:block;color:#64748b;font-size:.75rem}
.view-all-team{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem;
  border-radius:8px;
  border:2px solid var(--fpw-blue);
  color: var(--fpw-blue);
  text-decoration:none;
  font-weight:700;
  font-size:.875rem;
}
.view-all-team:hover{background: var(--fpw-blue); color:#fff}

/* Nested submenu (desktop hover) */
.submenu-item{position:relative;margin-bottom:.5rem}
.submenu-trigger{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  background: var(--fpw-gray-50);
  border-radius:8px;
  color: var(--fpw-gray-700);
}
.submenu-trigger i:first-child{color: var(--fpw-blue); width:20px; text-align:center}
.submenu-arrow{margin-left:auto;color:#9ca3af}
.submenu-content{
  position:absolute;
  right:100%;
  top:0;
  margin-right:.5rem;
  min-width: 200px;
  background:#fff;
  border:1px solid var(--fpw-gray-200);
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform: translateX(10px);
  transition: all .18s ease;
  z-index: 100004;
}
@media (pointer: fine) {
  .submenu-item.has-submenu:hover .submenu-content{
    opacity:1;
    visibility:visible;
    transform: translateX(0);
  }
}
.submenu-link{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.625rem .875rem;
  border-radius:8px;
  color: var(--fpw-gray-700);
  text-decoration:none;
}
.submenu-link:hover{background:#f0f9ff;color:var(--fpw-blue-dark)}
.submenu-link i{color: var(--fpw-blue); width:18px; text-align:center}

.admin-link-menu{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  border-radius:8px;
  background: linear-gradient(135deg,#2563eb 0%, #1e40af 100%);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  margin-top:1rem;
}

/* Force white text inside; protects against global span/link color overrides */
.admin-link-menu,
.admin-link-menu span,
.admin-link-menu i{
  color:#fff !important;
}

.admin-link-menu:hover{background: linear-gradient(135deg,#1e40af 0%, #1e3a8a 100%);color:#fff}

/* Mobile: more menu becomes single column, show 'More' label */
@media (max-width: 992px) {
  .more-text-mobile,.more-arrow-mobile{display:inline}
  .more-menu-content{min-width:100%;max-width:100%;border-radius:12px}
  .more-menu-grid{grid-template-columns:1fr}
  .more-menu-column{min-height:auto;border-right:0;border-bottom:1px solid var(--fpw-gray-200);padding:1.25rem 1rem}
  .more-menu-column:last-child{border-bottom:0}

  /* mobile submenu as accordion (JS toggles .active on .has-submenu) */
  .submenu-content{
    position: static;
    margin: .5rem 0 0 0;
    box-shadow: none;
    transform: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .25s ease, opacity .18s ease;
  }
  .submenu-item.has-submenu.active .submenu-content{
    max-height: 400px;
    opacity: 1;
    visibility: visible;
    padding: .5rem;
  }
}

/* Language selector flag emoji rendering.
   On some Windows setups, forcing system-ui everywhere can pick a font without emoji glyphs.
   This stack biases toward emoji fonts while remaining safe cross-platform.
*/
.modern-header .current-language-flag,
.modern-header .lang-flag,
.modern-header .flag-icon {
  font-family: "Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif;
  font-variant-emoji: emoji;
  line-height: 1;
}

/* iOS Safari specific hardening: when the engine supports -webkit-touch-callout,
   we additionally force a paint containment boundary for dropdown panels so they
   stay above page content even if sections use transforms/backdrop-filter. */
@supports (-webkit-touch-callout: none) {
  /* Keep sticky behavior via standard 'position: sticky' above; avoid non-standard values that break validators. */
  .modern-header .dropdown-content {
    position: absolute;
    /* create a new stacking context for the panel itself */
    isolation: isolate;
  }
}
/* =============================================================================
   HEADER / NAV — DARK THEME OVERRIDES
   Appended here so [data-theme="dark"] beats the light-mode selectors above.
   ============================================================================= */
/* ---- Header bar ---- */
[data-theme="dark"] .modern-header {
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
/* ---- Nav links ---- */
[data-theme="dark"] .nav-link {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .nav-link:hover {
  background: #334155 !important;
  color: #60a5fa !important;
}
/* Mobile hamburger lines */
[data-theme="dark"] .mobile-toggle span {
  background: #cbd5e1 !important;
}
/* ---- Mobile full-screen drawer ---- */
@media (max-width: 992px) {
  [data-theme="dark"] .nav-menu {
    background: #1e293b !important;
  }
  [data-theme="dark"] .nav-item {
    border-bottom-color: #334155 !important;
  }
  /* Accordion dropdown panel */
  [data-theme="dark"] .dropdown-content {
    background: #1a2742 !important;
    border-color: #334155 !important;
  }
}
/* ---- Desktop dropdown panels ---- */
[data-theme="dark"] .dropdown-content {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -2px rgba(0,0,0,0.3) !important;
}
/* ---- Dropdown link items ---- */
[data-theme="dark"] .dropdown-link {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .dropdown-link:hover {
  background: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .link-text strong { color: #f1f5f9 !important; }
[data-theme="dark"] .link-text small  { color: #94a3b8 !important; }
/* ---- Mega menu section titles ---- */
[data-theme="dark"] .mega-menu-title,
[data-theme="dark"] .category-title {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: #f1f5f9 !important;
  border-left-color: #60a5fa !important;
}
[data-theme="dark"] .mega-menu-title i,
[data-theme="dark"] .category-title i { color: #60a5fa !important; }
/* ---- More-menu columns ---- */
[data-theme="dark"] .more-menu-column {
  background: #1e293b !important;
  border-right-color: #334155 !important;
}
[data-theme="dark"] .more-menu-title {
  color: #f1f5f9 !important;
  border-bottom-color: #334155 !important;
}
/* ---- Coming soon items — hardcoded light yellow gradient above ---- */
[data-theme="dark"] .coming-soon-item {
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(217,119,6,0.08) 100%) !important;
  border-color: rgba(251,191,36,0.25) !important;
}
[data-theme="dark"] .coming-soon-icon        { background: #334155 !important; }
[data-theme="dark"] .coming-soon-text strong { color: #fcd34d !important; }
[data-theme="dark"] .coming-soon-text small  { color: #fbbf24 !important; }
/* ---- Team column — hardcoded light blue gradient above ---- */
[data-theme="dark"] .team-column {
  background: linear-gradient(135deg, #0f1f3a 0%, #0d1b2e 100%) !important;
}
/* Team member cards inside more-menu — hardcoded background:#fff above */
[data-theme="dark"] .more-menu-column .team-member {
  background: #334155 !important;
  border-color: #1e3a5f !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .more-menu-column .team-info strong { color: #93c5fd !important; }
[data-theme="dark"] .more-menu-column .team-info small  { color: #94a3b8 !important; }
[data-theme="dark"] .view-all-team {
  background: #1e293b !important;
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}
[data-theme="dark"] .view-all-team:hover {
  background: #60a5fa !important;
  color: #0f172a !important;
}
/* ---- Submenu trigger (help / languages nested) ---- */
[data-theme="dark"] .submenu-trigger {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .submenu-trigger:hover {
  background: #475569 !important;
  color: #f1f5f9 !important;
}
/* ---- Submenu panel (nested dropdown) — hardcoded background:#fff above ---- */
[data-theme="dark"] .submenu-content {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .submenu-link {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .submenu-link:hover {
  background: #334155 !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .submenu-link i { color: #60a5fa !important; }
/* ---- Language selector — quick-pill in nav ---- */
/* Trigger pill — hardcoded light-blue gradient in header-modern.jsp inline style */
[data-theme="dark"] .language-selector-trigger {
  background: #334155 !important;
  border-color: #475569 !important;
}
[data-theme="dark"] .language-selector-trigger:hover {
  background: #475569 !important;
  border-color: #64748b !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .current-language-code { color: #93c5fd !important; }
/* Language dropdown panel — hardcoded background:white in header-modern.jsp */
[data-theme="dark"] .language-selector-menu {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5) !important;
}
/* Scrollable grid */
[data-theme="dark"] .language-selector-grid { background: #1e293b !important; }
[data-theme="dark"] .language-selector-grid::-webkit-scrollbar-track { background: #334155 !important; }
[data-theme="dark"] .language-selector-grid::-webkit-scrollbar-thumb { background: #475569 !important; }
/* Individual option rows — hardcoded hover:light-blue-gradient in header-modern.jsp */
[data-theme="dark"] .language-selector-option       { color: #e2e8f0 !important; }
[data-theme="dark"] .language-selector-option:hover { background: #334155 !important; }
[data-theme="dark"] .language-selector-option.active {
  background: rgba(96,165,250,0.15) !important;
  border-left-color: #60a5fa !important;
}
[data-theme="dark"] .language-selector-option .lang-flag           { background: #334155 !important; }
[data-theme="dark"] .language-selector-option .lang-details strong { color: #f1f5f9 !important; }
[data-theme="dark"] .language-selector-option .lang-details small  { color: #94a3b8 !important; }
[data-theme="dark"] .language-selector-option.active .lang-details strong { color: #93c5fd !important; }
/* Footer strip at bottom of language panel — hardcoded #f9fafb in header-modern.jsp */
[data-theme="dark"] .language-selector-footer {
  background: #0f172a !important;
  border-top-color: #334155 !important;
}
[data-theme="dark"] .language-selector-footer small { color: #94a3b8 !important; }
/* More-menu language list scrollbar */
[data-theme="dark"] .language-menu::-webkit-scrollbar-track { background: #334155 !important; }
[data-theme="dark"] .language-menu::-webkit-scrollbar-thumb { background: #475569 !important; }
[data-theme="dark"] .language-menu .submenu-link       { color: #cbd5e1 !important; }
[data-theme="dark"] .language-menu .submenu-link:hover { background: #334155 !important; color: #60a5fa !important; }
[data-theme="dark"] .language-menu .submenu-link.active {
  background: rgba(96,165,250,0.12) !important;
  border-left-color: #60a5fa !important;
  color: #93c5fd !important;
}