/* Container of the header to fit reference.
           margin-inline:auto centres the pill on pages that have no body
           padding (blog.html and the article pages). index.html insets the
           container via .hero-section { padding:24px }; adding any padding
           here would stack with that and shift the bar right, so this rule
           deliberately sets no padding of its own. */
        .header-container {
            width: 100%;
            max-width: 1200px;
            margin: 10px auto 0;
        }

        /* White floating header bar with rounded corners */
        .header-bar {
            background-color: #ffffff;
            border-radius: 9999px; /* Pill shape */
            padding: 12px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between; /* Brand on the left, Menu centered in rest of space */
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        /* Left Branding Section */
        .header-left {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;
        }

        .logo-group {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #1e3a8a; /* Deep blue used for branding */
        }

        /* Logo icon sizing */
        .logo-icon {
            width: 38px;
            height: auto;
            color: #2449a5; /* The brand blue */
            overflow: visible;
        }

        .logo-text {
            font-size: 24px;
            font-weight: 800; /* Extra bold */
            color: #1c45a6;
            letter-spacing: -0.5px;
        }

        /* Vertical Divider */
        .divider {
            width: 1px;
            height: 28px;
            background-color: #e2e8f0;
        }

        /* Tagline next to Logo */
        .tagline {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.25;
            color: #2449a5;
        }

        .tagline-bold {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1px;
            color: #1c45a6;
        }

        .tagline-sub {
            font-size: 11px;
            font-weight: 500;
            color: #5575b9;
        }

        /* Middle Navigation Menu - perfectly centered in the remaining space between the brand tagline and the right wall */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 32px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Nav item wrapping for hover menu states */
        .nav-item-wrapper {
            position: relative;
            display: inline-block;
        }

        .nav-link {
            text-decoration: none;
            color: #2449a5;
            font-size: 18px; /* Increased font size for Menu items */
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 0; /* Padding area to make hover interaction extremely smooth */
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .nav-link:hover {
            color: #0b2575;
            transform: translateY(-1px);
        }

        /* Flyout Menu Stylings */
        .flyout-menu {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background-color: #ffffff;
            min-width: 200px;
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 10px 30px rgba(11, 37, 117, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(226, 232, 240, 0.8);
            transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
            z-index: 999;
            text-align: left;
        }

        /* Show flyout on hover of its parent item */
        .nav-item-wrapper:hover .flyout-menu {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(2px);
        }

        /* Inner flyout card item container */
        .flyout-item {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #1c45a6;
            padding: 8.5px 12px;
            border-radius: 10px;
            transition: background-color 0.2s ease;
        }

        .flyout-item:hover {
            background-color: #f1f7fe;
        }

        .flyout-title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 15.5px;
            font-weight: 700;
            color: #1c45a6;
            line-height: 1.2;
        }

        .flyout-desc {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 11px;
            font-weight: 500;
            color: #7b94cf;
            margin-top: 2px;
            line-height: 1;
        }

        .nav-heart {
            font-size: 24px; /* Significantly increased Heart size for Donate */
            color: #ec4899; /* Pink/rose heart to stand out beautifully */
            display: inline-block;
            line-height: 1;
        }

        /* Tablet Optimization for <= 850px width */
        @media (max-width: 850px) {
            .header-bar {
                padding: 12px 24px;
            }

            .logo-text {
                font-size: 21px; /* Slightly scaled down logo text */
            }

            .logo-icon {
                width: 32px; /* Scale down logo icon aspect ratio slightly */
            }

            .divider {
                height: 24px;
            }

            .tagline-bold, .tagline-sub {
                font-size: 10px; /* Highly optimized micro typography for tablet headers */
            }

            .nav-menu {
                gap: 20px; /* Bring mid links closer on tablet widths */
            }

            .nav-link {
                font-size: 15.5px;
            }

            .nav-heart {
                font-size: 21px;
            }
        }

        /* Mobile Optimization for <= 600px width */
        @media (max-width: 600px) {
            body {
                padding: 12px;
            }

            .header-container {
                margin-top: 4px;
            }

            .header-bar {
                border-radius: 20px; /* Switch from pill to compact card rounded corners */
                padding: 14px 16px;
                flex-direction: column;
                align-items: center;
                gap: 14px;
                text-align: center;
            }

            .header-left {
                flex-direction: column;
                gap: 10px;
                width: 100%;
                align-items: center;
            }

            .divider {
                width: 60px;
                height: 1px;
                margin: 2px 0;
            }

            .tagline {
                align-items: center;
            }

            .tagline-bold, .tagline-sub {
                font-size: 11px;
            }

            .nav-menu {
                width: 100%;
                justify-content: center;
                gap: 16px; /* Bring links closer on narrow screens */
                flex-wrap: wrap; /* Allow wrapping cleanly if screen is super thin */
            }

            .nav-link {
                font-size: 15px; /* Sized down slightly so they don't break lines */
            }

            .nav-heart {
                font-size: 18px; /* Balanced heart size for touch compatibility */
            }
        }