/* WILA Abroad Header — widget styles
   Brand colors are CSS custom properties so each widget instance can
   override them from the Elementor Style tab without touching Tailwind's
   global config. */

.wila-header-root {
  --wila-forest: #0c3528;
  --wila-forest-dark: #07241b;
  --wila-sidebar: #082d22;
  --wila-leaf: #51aa27;
  --wila-leaf-dark: #449120;
  --wila-mint-soft: #eafaf1;
  --wila-mint-border: #bbf0d6;
  --wila-mint-text: #0f5132;
  --wila-badge-purple-bg: #ede9fe;
  --wila-badge-purple-text: #7c3aed;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

/* Color utility classes (scoped, so they never leak onto the rest of the page) */
.wila-header-root .wh-bg-forest { background-color: var(--wila-forest); }
.wila-header-root .wh-bg-forest-dark { background-color: var(--wila-forest-dark); }
.wila-header-root .wh-hover-bg-forest-dark:hover { background-color: var(--wila-forest-dark); }
.wila-header-root .wh-text-forest { color: var(--wila-forest); }
.wila-header-root .wh-hover-text-forest:hover { color: var(--wila-forest); }
.wila-header-root .wh-text-forest-soft { color: var(--wila-forest); opacity: .75; }
.wila-header-root .wh-bg-sidebar { background-color: var(--wila-sidebar); }
.wila-header-root .wh-bg-leaf { background-color: var(--wila-leaf); }
.wila-header-root .wh-hover-bg-forest-dark-active:active { background-color: var(--wila-forest-dark); }
.wila-header-root .wh-bg-mint-soft { background-color: var(--wila-mint-soft); }
.wila-header-root .wh-border-mint-border { border-color: var(--wila-mint-border); }
.wila-header-root .wh-text-mint-text { color: var(--wila-mint-text); }
.wila-header-root .wh-bg-badge-purple { background-color: var(--wila-badge-purple-bg); }
.wila-header-root .wh-text-badge-purple { color: var(--wila-badge-purple-text); }

/* Desktop Dropdown Panels */
.wila-header-root .mega-dropdown-panel {
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow:
    0 30px 65px -12px rgba(8, 35, 26, 0.22),
    0 14px 30px -8px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
}
.wila-header-root .mega-dropdown-panel.closed {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.995);
  pointer-events: none;
}
.wila-header-root .mega-dropdown-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wila-header-root .filter-pill-btn {
  background-color: #ffffff;
  border: 1px solid #e5e9ec;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  color: #374151;
  transition: all 0.15s ease;
}
.wila-header-root .filter-pill-btn:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.wila-header-root .course-card-custom {
  border-radius: 18px;
  background-color: #ffffff;
  border: 1px solid #edf1f4;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.wila-header-root .course-card-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -4px rgba(0, 0, 0, 0.09);
  border-color: #cbd5e1;
}

.wila-header-root .custom-scroll::-webkit-scrollbar { width: 5px; height: 4px; }
.wila-header-root .custom-scroll::-webkit-scrollbar-track { background: transparent; }
.wila-header-root .custom-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 9999px; }
.wila-header-root .custom-scroll::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

.wila-header-root .dest-subpanel-scroll { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
.wila-header-root .dest-subpanel-scroll::-webkit-scrollbar { width: 4px; }
.wila-header-root .dest-subpanel-scroll::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.wila-header-root .dest-subpanel-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 9999px; }
.wila-header-root .dest-subpanel-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }

.wila-header-root .no-scrollbar::-webkit-scrollbar { display: none; }
.wila-header-root .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.wila-header-root .mobile-panel {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
.wila-header-root .mobile-panel.slide-out-right { transform: translateX(100%); pointer-events: none; }
.wila-header-root .mobile-panel.slide-in-view { transform: translateX(0%); pointer-events: auto; }

.wila-header-root .wh-hidden { display: none; }