/* ==========================================================================
   Desktop header dropdowns (News, Media Services)
   One source of truth for the dropdown look on every page. Selectors are
   scoped to .nav-desktop so they outrank the older .dropdown-menu rules in
   main.css / responsive.css / index.php without needing !important.
   ========================================================================== */

@media (min-width: 992px) {

    .nav-desktop .dropdown-item {
        position: relative;
    }

    /* Chevron */
    .nav-desktop .dropdown-item > .nav-link i.fa-chevron-down {
        font-size: 10px;
        margin-left: 5px;
        transition: transform 0.25s ease, color 0.2s;
    }
    .nav-desktop .dropdown-item:hover > .nav-link,
    .nav-desktop .dropdown-item:focus-within > .nav-link { color: var(--maroon, #800000); }
    .nav-desktop .dropdown-item:hover > .nav-link i.fa-chevron-down,
    .nav-desktop .dropdown-item:focus-within > .nav-link i.fa-chevron-down {
        transform: rotate(180deg);
        color: var(--maroon, #800000);
    }

    /* Panel */
    .nav-desktop .dropdown-menu {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        z-index: 1100;
        min-width: 240px;
        max-width: min(520px, 92vw);
        padding: 8px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        box-shadow:
            0 24px 48px -12px rgba(15, 23, 42, 0.18),
            0 4px 12px -4px rgba(15, 23, 42, 0.08);
        white-space: normal;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
        will-change: auto;
        backface-visibility: visible;
    }

    /* Long menus (Media Services) become two columns */
    .nav-desktop .dropdown-menu:has(> a:nth-child(6)) {
        grid-template-columns: repeat(2, minmax(210px, 1fr));
        min-width: 460px;
    }

    /* Hover bridge across the gap, so the menu doesn't close on the way down */
    .nav-desktop .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
        width: auto;
        background: transparent;
    }

    /* Caret */
    .nav-desktop .dropdown-menu::after {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 12px;
        height: 12px;
        background: #fff;
        border-left: 1px solid rgba(15, 23, 42, 0.08);
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 3px 0 0 0;
        transform: translateX(-50%) rotate(45deg);
    }

    /* Open: mouse hover or keyboard focus */
    .nav-desktop .dropdown-item:hover > .dropdown-menu,
    .nav-desktop .dropdown-item:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }

    /* Items */
    .nav-desktop .dropdown-menu a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        color: #1e293b;
        text-decoration: none;
        white-space: nowrap;
        background: transparent;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .nav-desktop .dropdown-menu a:hover,
    .nav-desktop .dropdown-menu a:focus-visible {
        background: #fdf2f2;
        color: var(--maroon, #800000);
        outline: none;
    }
    .nav-desktop .dropdown-menu a:focus-visible {
        box-shadow: inset 0 0 0 2px var(--maroon, #800000);
    }

    /* Cancel the header's underline effect (.nav-desktop a::after) inside the panel */
    .nav-desktop .dropdown-menu a::after { content: none; display: none; }

    /* Icon chip (Font Awesome glyph chosen by link target) */
    .nav-desktop .dropdown-menu a::before {
        content: "\f105";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        background: #f1f5f9;
        color: #64748b;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .nav-desktop .dropdown-menu a:hover::before,
    .nav-desktop .dropdown-menu a:focus-visible::before {
        background: var(--maroon, #800000);
        color: #fff;
    }

    /* News */
    .nav-desktop .dropdown-menu a[href*="politics"]::before      { content: "\f66f"; } /* landmark */
    .nav-desktop .dropdown-menu a[href*="business"]::before      { content: "\f201"; } /* chart-line */
    .nav-desktop .dropdown-menu a[href*="sports"]::before        { content: "\f1e3"; } /* futbol */
    .nav-desktop .dropdown-menu a[href*="lifestyle"]::before     { content: "\f004"; } /* heart */
    .nav-desktop .dropdown-menu a[href*="entertainment"]::before { content: "\f008"; } /* film */

    /* Media Services */
    .nav-desktop .dropdown-menu a[href*="#photography"]::before  { content: "\f030"; } /* camera */
    .nav-desktop .dropdown-menu a[href*="#production"]::before   { content: "\f03d"; } /* video */
    .nav-desktop .dropdown-menu a[href*="#broadcasting"]::before { content: "\f519"; } /* tower-broadcast */
    .nav-desktop .dropdown-menu a[href*="#brand-intel"]::before  { content: "\f0eb"; } /* lightbulb */
    .nav-desktop .dropdown-menu a[href*="#digital-media"]::before{ content: "\f109"; } /* laptop */
    .nav-desktop .dropdown-menu a[href*="#ngo"]::before          { content: "\f4c4"; } /* handshake-angle */
    .nav-desktop .dropdown-menu a[href*="#community"]::before    { content: "\f0c0"; } /* users */
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .nav-desktop .dropdown-menu,
    .nav-desktop .dropdown-item > .nav-link i.fa-chevron-down { transition: none; }
}