/**
 * Meta Navigation Styles
 *
 * Additional styles for the meta navigation system
 */

/* Dropdown animations and positioning */
#meta-navigation .meta-nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.15s ease-out,
        visibility 0.15s ease-out,
        transform 0.15s ease-out;
}

#meta-navigation .has-dropdown.is-open .meta-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown arrow rotation */
#meta-navigation .meta-nav-chevron svg {
    transition: transform 0.2s ease-in-out;
}

#meta-navigation .has-dropdown.is-open .meta-nav-chevron svg {
    transform: rotate(180deg);
}

/* Remove default focus outline for buttons to match original FSA styling */
#meta-navigation [data-meta-nav-toggle]:focus {
    outline: none;
}

/* Dropdown container styling to match valantic.com */
#meta-navigation .meta-nav-dropdown > div {
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /*border: 1px solid #e5e7eb;*/
    /*border-radius: 12px;*/
    background: #ffffff;
    /*padding: 32px;*/
    padding-top: 2.5rem;
    padding-bottom: 64px;
    width: 100%;
    min-height: 450px;
}

/* Level 1 navigation styling */
#meta-navigation .nav-level1-item {
    margin-bottom: 0px;
}

#meta-navigation .nav-level1-item.active {
    background-color: #f8fafc;
    border-radius: 8px;
}

#meta-navigation .nav-level1-item button,
#meta-navigation .nav-level1-item a {
    padding: 0.625rem 1rem 0.625rem 1rem;
    /*border-radius: 8px;*/
    transition: all 0.15s ease;
    font-weight: 500;
    /*color: #374151;*/
}

#meta-navigation .nav-level1-item button:hover,
#meta-navigation .nav-level1-item a:hover {
    /*background-color: #f1f5f9;*/
    /*color: #1e293b;*/
}

/* Column headers */
#meta-navigation [data-nav-column] .font-semibold.uppercase {
    font-size: 11px;
    font-weight: 600;
    /*letter-spacing: 0.05em;*/
    margin-bottom: 20px;
}

/* Article content styling */

.bg-svg-nav-red {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url\(%23a\)%22%3E%3Cpath%20d%3D%22m18.037%208.25-6.875%206.875L4.287%208.25%22%20stroke%3D%22%23FF4B4B%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M.162%200h22v22h-22z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E);
}

.aria-selected\:text-white[aria-selected=true] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.aria-selected\:bg-black[aria-selected=true] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 12 42 / var(--tw-bg-opacity));
}

#meta-navigation .article-content {
    overflow-y: auto;
    /*border-radius: 0.5rem;*/
    padding: 0 16px 16px 16px;
}

#meta-navigation .article-content > div:has(img) {
    margin: 0 -16px 16px;
}
#meta-navigation .article-content img {
    width: 100%;
    height: auto;
    /*border-radius: 8px;*/
    margin-bottom: 16px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

#meta-navigation .article-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 12px;
}

#meta-navigation .article-content div {
    /*color: #6b7280;*/
    line-height: 1.6;
    /*margin-bottom: 16px;*/
    /*font-size: 14px;*/
}

#meta-navigation .article-content p {
    /*color: #6b7280;*/
    line-height: 1.6;
    /*margin-bottom: 16px;*/
    /*font-size: 14px;*/
}

#meta-navigation .article-content a {
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding: 0;
    text-transform: uppercase;
    gap: 4px;
}

#meta-navigation .article-content a:hover {
    opacity: 0.64;
}
#meta-navigation .article-content .article-arrow::before {
    content: '';
    width: 19px;
    height: 14px;
    transform: translate(0, 2px);
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%209.597h18.563%22%20stroke%3D%22url(%23a)%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m11.969%202%207.594%207.594-7.594%207.594%22%20stroke%3D%22url(%23b)%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%22-8.281%22%20y1%3D%229.595%22%20x2%3D%22-8.28%22%20y2%3D%229.812%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4B4B%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF744F%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%228.172%22%20y1%3D%229.312%22%20x2%3D%2220.143%22%20y2%3D%2215.528%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23FF4B4B%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF744F%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 19px 14px;
    flex-shrink: 0;
    display: inline-block;
}

/* Statement content styling */
#meta-navigation .statement-content {
    max-height: 380px;
    overflow-y: auto;
    padding-right: 8px;
}

#meta-navigation .statement-content h3 {
    font-weight: 700;
    line-height: 1.156;
}

#meta-navigation .statement-content p {
    /*color: #6b7280;*/
    line-height: 1.6;
}

/* Level 2 subcategories styling */
#meta-navigation [data-nav-column='2'] a {
    /*border-radius: 6px;*/
    transition: all 0.15s ease;
    /*color: #374151;*/
    /*font-weight: 500;*/
}
#meta-navigation [data-nav-column='2'] a:hover {
    /*background-color: #f1f5f9;*/
    /*color: #1e293b;*/
}

/* Column borders */
#meta-navigation [data-nav-column='2'],
#meta-navigation [data-nav-column='3'] {
    border-left: 1px solid #e5e7eb;
    padding-left: 32px;
}

/* Mobile responsiveness */
@media (max-width: 1359px) {
    #meta-navigation {
        display: none;
    }
    #meta-navigation-wrapper {
        display: none;
    }
}


/* High contrast mode support */
@media (prefers-contrast: more) {
    #meta-navigation [data-meta-nav-dropdown] {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #meta-navigation [data-meta-nav-dropdown],
    #meta-navigation [data-meta-nav-toggle] svg {
        transition: none;
    }
}

/* Loading state */
#meta-navigation.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Error state */
#meta-navigation.error {
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
}

/* Success state for cache refresh */
#meta-navigation.refreshed {
    background-color: #f0fdf4;
    border-left: 4px solid #22c55e;
    transition: background-color 0.3s ease-in-out;
}

/* Mobile drilldown panels */
#meta-navigation-mobile .meta-nav-mobile-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f7f7f7;
    /* ensure the panel paints above underlying content */
    isolation: isolate;

    position: relative;
    inset: auto;
    z-index: auto;
    transform: none;
    transition: none;
}

/* Tailwind's .hidden class is global; make sure our panels still show when JS removes it */
#meta-navigation-mobile .meta-nav-mobile-panel.hidden {
    display: none;
}

/* Visible state (no animation) */
#meta-navigation-mobile .meta-nav-mobile-panel:not(.hidden) {
    display: block;
}