/**
 * LLCU Mega Menu Styles
 *
 * Minimal CSS - only contains styles that Tailwind can't handle:
 * - Animations/keyframes
 * - Complex state transitions with visibility
 * - Pseudo-elements
 * - Z-index layering for WordPress integration
 * - Hover/active state changes
 * - Custom select arrow (background SVG)
 *
 * All static styles (colors, spacing, typography) use Tailwind classes in the template.
 *
 * @package LLCU\MegaMenu
 * @since   0.3.0
 */

/* ─── CSS Variable Fallbacks for Staging/Production ─── */
/* Define color variables in case theme doesn't provide them */
:root {
    --color-white-100: #FFFFFF;
    --color-white-200: #F8F8F8;
    --color-gray-100: #EAEAEA;
    --color-gray-200: #E0E0E0;
    --color-gray-300: #DEDEDE;
    --color-gray-400: #CCCCCC;
    --color-gray-500: #888888;
    --color-gray-600: #666666;
    --color-gray-700: #4A4A4A;
    --color-gray-800: #333333;
    --color-blue-100: #F0F7FF;
    --color-blue-400: #1A73E8;
    --color-blue-500: #004BC0;
    --color-green-100: #EDF8EC;
    --color-green-300: #4CB944;
    --color-red-100: #FEF2F2;
    --color-red-300: #EF4444;
    --color-yellow-300: #FFBE0B;
}

/* ─── Animations ─── */
@keyframes llcu-mm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── WordPress Navigation Z-Index ─── */
.site-header,
.main-navigation,
#site-navigation,
.primary-menu,
.menu-primary-container,
header.site-header {
    position: relative;
    z-index: 9998;
}

/* ─── Overlay (visibility + backdrop-filter) ─── */
.llcu-mm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.25s;
}

.llcu-mm-overlay.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

/* ─── Navigation Items ─── */
.llcu-mm-nav-item {
    position: relative;
    z-index: 9999;
}

.llcu-mm-nav-link {
    position: relative;
    z-index: 9999;
    transition: background-color 0.15s ease;
}

.llcu-mm-nav-link:hover {
    text-decoration: none;
}

.llcu-mm-nav-item.is-active .llcu-mm-nav-link {
    border-bottom: 3px solid var(--color-white-100);
}

.llcu-mm-nav-arrow {
    position: relative;
    top: -1px;
    transition: transform 0.2s ease;
}

.llcu-mm-nav-item.is-active .llcu-mm-nav-arrow {
    transform: rotate(180deg);
}

/* ─── Panel Container (visibility + transform) ─── */
.llcu-mm-panel-container {
    position: absolute;
    left: 50%;
    top: 100px;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    z-index: 9999;
    pointer-events: none;
    box-sizing: border-box;
    transform: translateX(-50%) translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.25s;
}

.llcu-mm-panel-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.llcu-mm-panel-container.is-active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0s;
}

/* ─── Panel Display Toggle ─── */
.llcu-mm-panel {
    display: none;
    background: var(--color-white-100);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-gray-100);
    border-bottom: none;
}

.llcu-mm-panel.is-active {
    display: block;
}

/* ─── Sidebar Button States ─── */
.llcu-mm-sidebar-btn {
    transition: all 0.12s ease;
}

.llcu-mm-sidebar-btn:hover,
.llcu-mm-sidebar-btn.is-active {
    background: var(--color-white-100);
    border-right-color: var(--color-blue-500);
}

.llcu-mm-sidebar-btn.is-active {
    font-weight: 700;
    color: var(--color-blue-500);
}

/* ─── Sidebar Content Toggle ─── */
.llcu-mm-sidebar-content {
    display: none;
}

.llcu-mm-sidebar-content.is-active {
    display: block;
    animation: llcu-mm-fade-in 0.15s ease;
}

/* ─── Link States ─── */
.llcu-mm-link {
    transition: all 0.15s ease;
}

.llcu-mm-link:hover {
    background: var(--color-white-200);
}

.llcu-mm-link.is-featured {
    padding: 12px 14px;
    background: var(--color-blue-100);
    border: 1px solid var(--color-gray-200);
}

.llcu-mm-link.is-featured:hover {
    background: #E8EFFC;
    border-color: var(--color-blue-500);
}

.llcu-mm-link.is-featured .llcu-mm-link-title {
    font-weight: 700;
    color: var(--color-blue-500);
}

.llcu-mm-link.is-current {
    background: var(--color-blue-100);
    border: 1px solid var(--color-blue-500);
    pointer-events: none;
}

.llcu-mm-link.is-current .llcu-mm-link-title {
    color: var(--color-blue-500);
    font-weight: 700;
}

.llcu-mm-link.is-current .llcu-mm-link-arrow {
    display: none;
}

/* ─── Link Arrow Visibility ─── */
.llcu-mm-link-arrow {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.llcu-mm-link:hover .llcu-mm-link-arrow {
    opacity: 1;
}

.llcu-mm-link-arrow--external {
    opacity: 1;
}

/* ─── Badge Colors ─── */
.llcu-mm-badge--green {
    background: var(--color-green-100);
    color: var(--color-green-300);
}

.llcu-mm-badge--gold {
    background: var(--color-yellow-100);
    color: #92400e;
}

.llcu-mm-badge--red {
    background: var(--color-red-100);
    color: var(--color-red-300);
}

.llcu-mm-badge--blue {
    background: var(--color-blue-100);
    color: var(--color-blue-500);
}

/* usrec and alsopopular badges use Tailwind classes in JS */

/* ─── State Link States ─── */
.llcu-mm-state-link {
    transition: all 0.12s ease;
}

.llcu-mm-state-link:hover {
    background: var(--color-white-200);
    color: var(--color-blue-500);
}

.llcu-mm-state-link.is-active {
    background: var(--color-blue-100);
    color: var(--color-blue-500);
    font-weight: 700;
}

/* ─── State Selector States ─── */
.llcu-mm-state-selector-toggle {
    transition: all 0.15s ease;
}

.llcu-mm-state-selector-toggle:hover,
.llcu-mm-state-selector.is-open .llcu-mm-state-selector-toggle {
    border-color: var(--color-blue-500);
    background: var(--color-blue-100);
}

.llcu-mm-state-selector-toggle .llcu-mm-icon:first-child {
    color: var(--color-blue-500);
}

.llcu-mm-state-selector-toggle .llcu-mm-icon:last-child {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.llcu-mm-state-selector.is-open .llcu-mm-state-selector-toggle .llcu-mm-icon:last-child {
    transform: rotate(180deg);
}

/* ─── State Dropdown Display ─── */
.llcu-mm-state-selector.is-open .llcu-mm-state-dropdown {
    display: block;
}

.llcu-mm-state-dropdown--up {
    bottom: calc(100% + 4px);
    top: auto !important;
    left: -7px;
    right: -7px;
}

/* ─── Dropdown Item States ─── */
.llcu-mm-state-dropdown-clear {
    transition: all 0.15s ease;
}

.llcu-mm-state-dropdown-clear:hover {
    background: var(--color-red-100);
    color: var(--color-red-300);
}

.llcu-mm-state-dropdown-item {
    transition: all 0.1s ease;
}

.llcu-mm-state-dropdown-item:hover {
    background: var(--color-gray-100);
}

.llcu-mm-state-dropdown-item.is-active {
    background: var(--color-blue-100);
    color: var(--color-blue-500);
    font-weight: 600;
}

/* ─── Residency Select (custom arrow) ─── */
.llcu-mm-residency-select {
    transition: border-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888888' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}

.llcu-mm-residency-select:hover {
    border-color: var(--color-gray-400);
}

.llcu-mm-residency-select:focus {
    border-color: var(--color-blue-500);
}

/* ─── Icon Base ─── */
.llcu-mm-icon {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

/* ─── Hide existing States dropdown when mega menu is active ─── */
/* The States dropdown is an li.llcu-dropdown - hide it when mega menu items exist */
/* This CSS file only loads on mega menu target pages, so this is safe */
li.llcu-dropdown {
    display: none !important;
}

/* ─── Tailwind Color Fallbacks for Staging/Production ─── */
/* These ensure colors work even if Tailwind hasn't compiled these classes */

/* Background colors */
.bg-white-100 { background-color: #FFFFFF; }
.bg-white-200 { background-color: #F8F8F8; }
.bg-gray-100 { background-color: #EAEAEA; }
.bg-gray-300 { background-color: #DEDEDE; }
.bg-blue-100 { background-color: #F0F7FF; }
.bg-blue-400 { background-color: #1A73E8; }
.bg-blue-500 { background-color: #004BC0; }
.bg-green-100 { background-color: #EDF8EC; }
.bg-green-300 { background-color: #4CB944; }
.bg-yellow-300 { background-color: #FFBE0B; }

/* Text colors */
.text-white-100 { color: #FFFFFF; }
.text-white { color: #FFFFFF; }

/* Font weights */
.font-bold { font-weight: 700; }

/* Nav link specific - ensure white text with high specificity */
a.llcu-mm-nav-link {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.text-gray-500 { color: #888888; }
.text-gray-600 { color: #666666; }
.text-gray-700 { color: #4A4A4A; }
.text-gray-800 { color: #333333; }
.text-blue-400 { color: #1A73E8; }
.text-blue-500 { color: #004BC0; }
.text-green-300 { color: #4CB944; }

/* Border colors */
.border-white-100 { border-color: #FFFFFF; }
.border-gray-100 { border-color: #EAEAEA; }
.border-gray-200 { border-color: #E0E0E0; }
.border-gray-300 { border-color: #DEDEDE; }