﻿@charset "UTF-8";
/* Consolidated from inline <style> in _HeaderPartial.cshtml -> W3C-valid + CSP-clean. Order/cascade preserved. */

    /* GIGW 1.4.3: the logo links and the mobile accessibility toggle inherit Bootstrap's
       default link blue (#0d6efd) = 4.32:1 on the white header. The logo anchors wrap
       only <img>s (no visible text) and the toggle is mobile-only, so darkening to the
       header's dark teal (#0a4660 ≈ 8:1 on white) is visually neutral and clears the
       contrast check. Visible menu links keep their own .menu-link colour below. */
    header.bg-white .container a:has(> img),
    header.bg-white a.Govlogo-link,
    #popdowntoggle_mobile,
    #popdowntoggle_mobile .bi {
        color: var(--nav-bg, #095a6f) !important; /* theme-aware; always dark enough */
    }

    /* District-selector popover: the ">>" angle icons inherit #0d6efd (4.32:1 on the
       white popover). Darken the popover links + icons to the same dark teal. */
    #districtPopoverContent a.dropdown-item,
    #districtPopoverContent a.dropdown-item i {
        color: var(--nav-bg, #095a6f) !important; /* theme-aware; always dark enough */
    }

    /* Default nav link style */
    .menu-link {
        position: relative;
        color: #000; /* normal black text */
        font-weight: 400; /* normal text */
        padding-bottom: 4px; /* space for underline */
        text-decoration: none;
    }

        /* Hover + Active color and bold */
        .menu-link:hover,
        .menu-link.active {
            color: #b1004c !important; /* pink color */
            font-weight: 1000; /* bold text on hover/active */
        }

        /* Underline animation */
        .menu-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2px;
            width: 0;
            background-color: #b1004c; /* underline color */
            transition: width 0.3s ease;
        }

        /* Show underline on hover + active */
        .menu-link:hover::after,
        .menu-link.active::after {
            width: 100%;
        }


    /*   mark {
        background: orange;
        color: black;
    }*/

    mark {
        background: yellow;
    }

        mark.current {
            background: orange;
        }
