/* Navbar container */
.navbar {
    display: flex;
    align-items: center;
    background-color: #005eb8;
    font-family: Poppins, Arial, sans-serif;
    position: relative;
    z-index: 10;
    padding: 0 10px;
}

/* Links inside the navbar */
.navbar a {
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Dropdown container */
.dropdown {
    position: relative;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: #fff;
    background-color: inherit;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 600 !important;
}

.top-link {
    font-weight: 600 !important;
}

/* Hover highlight for navbar links and dropdown buttons */
.navbar a:hover,
.dropdown:hover .dropbtn {
    background-color: #0072e0;
}

/* Dropdown content */
.dropdown-content {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    /* collapsed */
    transform-origin: top center;
    /* expand downward */
    background-color: #f9f9f9;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 99;
    padding: 0;
    /*border-top: 4px solid #fff212;*/
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
    pointer-events: none;
    /* prevents hover while hidden */
    border-radius: 10px;
}

/* Show dropdown with animation */
.dropdown:hover .dropdown-content {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
}

/* Header inside dropdown (optional section header) .dropdown-content .header { background: #fff212; padding: 10px 16px; color: #000; font-weight: bold; }*/
/* Layout inside dropdown */
.row {
    display: inline-flex;
    /* allow auto width to fit content */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
    background: transparent;
    white-space: nowrap;
    /* prevent wrapping */
}

/* Each column fits content naturally */
.column {
    flex: 0 0 auto;
    /* no forced stretching */
    /*background-color: #ccc;*/
    padding: 10px;
    box-sizing: border-box;
    min-width: 180px;
    /* consistent sizing */
}

/* Column headings */
.column h3 {
    margin-top: 0;
    margin-block-end: 0.5em !important;
    color: #005eb8;
    font-size: 18px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #fff212;
}

/* Links inside the columns */
.column a {
    color: #000;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
    padding: 10px 0;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.1s ease;
}

/* Hover effect inside dropdown */
.column a:hover {
    background-color: #ddd;
    background: #e8f1fc;
    transform: translateX(3px);
}

.link-title {
    display: block;
    color: #005eb8;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
}

.link-subtitle {
    display: block;
    color: #6c757d;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 2px;
}

.link-title, .link-subtitle {
    padding-left: 10px;
    padding-right: 10px;
}

/* Optional right-aligned call-to-action link */
.navbar .cta {
    margin-left: auto;
    background-color: #fff212;
    color: #005eb8;
    padding: 10px 16px;
    border-radius: 30px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

nav.navbar div.dropdown div.dropdown-content div.header h2 {
    display: none;
}

.column a span {
    vertical-align: middle;
}


/* === MOBILE NAVBAR TOGGLE + LAYOUT === */
@media (max-width: 900px) {

    /* Hide default desktop layout */
    .navbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        position: relative;
        padding: 0;
    }

    /* Wrap logo + toggle button on one line */
    .wp-block-group.is-layout-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding: 10px 20px;
        background-color: #005eb8;
    }

    /* Logo styling */
    .wp-block-site-title {
        font-size: 18px;
        color: #fff;
        line-height: 1;
        margin: 0;
        padding: 0;
    }

    /* Hamburger toggle button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 28px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        z-index: 1001;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #fff212;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Transform to X when open */
    .menu-toggle.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Hide menu items when closed */
    .navbar a,
    .navbar .dropdown,
    .navbar .cta {
        display: none;
        width: 100%;
        text-align: left;
    }

    /* Show when active */
    .navbar.active a,
    .navbar.active .dropdown,
    .navbar.active .cta {
        display: block;
    }

    /* When open, push logo up and show menu below */
    .navbar.active {
        padding-top: 0;
        background-color: #005eb8;
    }

    /* Logo shifts to its own line above menu */
    .navbar.active~.wp-block-group.is-layout-flex .wp-block-site-title {
        order: -1;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Dropdown content layout for mobile */
    .dropdown-content {
        position: static;
        transform: none;
        opacity: 1;
        box-shadow: none;
        background: none;
        border-radius: 0;
    }

    .dropdown-content .row {
        display: block;
        padding: 0;
    }

    .dropdown-content .column {
        display: block;
        width: 100%;
        padding: 8px 20px;
    }

    .dropdown-content .column a {
        color: #fff;
        background: none;
        padding: 6px 0;
    }

    .dropdown-content .column h3 {
        color: #fff;
    }

    /* CTA button spacing */
    .navbar .cta {
        background: #fff212;
        color: #005eb8;
        border-radius: 30px;
        margin: 10px 20px;
        text-align: center;
        font-weight: 600;
    }
}

/* === MOBILE MENU FIX — LOGO, TOGGLE, ANIMATION === */
@media (max-width: 900px) {

    /* Keep the header row clean (logo + toggle on one line) */
    .wp-block-group.is-layout-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background-color: #005eb8;
    }

    .wp-block-site-title {
        font-size: 18px;
        color: #fff;
        margin: 0;
        line-height: 1;
        flex: 1;
    }

    /* Hamburger button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 1001;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        margin: 3px 0;
        background-color: #fff212;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Animate to X when open */
    .menu-toggle.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Navbar base on mobile */
    .navbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background-color: #005eb8;
        position: relative;
        z-index: 1000;
    }

    /* Hide links when collapsed */
    .navbar a,
    .navbar .dropdown,
    .navbar .cta {
        display: none;
        width: 100%;
        text-align: left;
    }

    /* Show when open */
    .navbar.active a,
    .navbar.active .dropdown,
    .navbar.active .cta {
        display: block;
    }

    /* Dropdown layout on mobile */
    .dropdown-content {
        position: static;
        transform: none;
        opacity: 1;
        box-shadow: none;
        background: none;
        border-radius: 0;
    }

    .dropdown-content .row {
        display: block;
        padding: 0;
    }

    .dropdown-content .column {
        display: block;
        width: 100%;
        padding: 8px 20px;
    }

    .dropdown-content .column a {
        color: #fff;
        background: none;
        padding: 6px 0;
    }

    .dropdown-content .column h3 {
        color: #fff;
    }

    /* CTA stays visible and clean */
    .navbar .cta {
        background: #fff212;
        color: #005eb8;
        border-radius: 30px;
        margin: 10px 20px;
        text-align: center;
        font-weight: 600;
    }

    /* When navbar is active, push it below the logo bar */
    .navbar.active {
        margin-top: 0;
        padding-top: 10px;
    }
}

/* === FINAL MOBILE HEADER ALIGNMENT FIX === */
@media (max-width: 900px) {

    /* Keep the logo and toggle always on the same line */
    .wp-block-group.is-layout-flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: #005eb8;
        padding: 12px 20px;
    }

    /* Logo stays left */
    .wp-block-site-title {
        flex: 1;
        margin: 0;
        color: #fff;
        font-size: 18px;
        line-height: 1.1;
    }

    /* Burger menu stays right */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: auto;
        position: relative;
        z-index: 1001;
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #fff212;
        border-radius: 2px;
        margin: 3px 0;
        transition: all 0.3s ease;
    }

    /* X animation */
    .menu-toggle.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    /* Navbar layout */
    .navbar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background-color: #005eb8;
    }

    /* Hide items until opened */
    .navbar a,
    .navbar .dropdown,
    .navbar .cta {
        display: none;
        width: 100%;
        text-align: left;
    }

    /* Show when active */
    .navbar.active a,
    .navbar.active .dropdown,
    .navbar.active .cta {
        display: block;
    }

    /* Keep logo and toggle visible above expanded menu */
    .navbar.active {
        padding-top: 0;
        position: relative;
    }

    /* Dropdown layout */
    .dropdown-content {
        position: static;
        transform: none;
        opacity: 1;
        box-shadow: none;
        background: none;
    }

    .dropdown-content .row {
        display: block;
        padding: 0;
    }

    .dropdown-content .column {
        display: block;
        width: 100%;
        padding: 8px 20px;
    }

    .dropdown-content .column h3 {
        color: #fff;
    }

    .dropdown-content .column a {
        color: #fff;
        background: none;
        padding: 6px 0;
    }

    /* CTA button */
    .navbar .cta {
        background: #fff212;
        color: #005eb8;
        border-radius: 30px;
        margin: 10px 20px;
        text-align: center;
        font-weight: 600;
    }
}

@media (max-width: 900px) {

    /* When menu is active, hide the logo in the same header row */
    .wp-block-group.is-layout-flex:has(.navbar.active) .wp-block-site-title {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
}

/* === FIX MENU SHIFT WHEN LOGO IS HIDDEN === */
@media (max-width: 900px) {

    /* When navbar opens, hide the logo and make the header center the toggle */
    .wp-block-group.is-layout-flex:has(.navbar.active) {
        justify-content: flex-end !important;
        /* Align burger to the right */
    }

    /* Hide the logo cleanly */
    .wp-block-group.is-layout-flex:has(.navbar.active) .wp-block-site-title {
        display: none !important;
    }

    /* Ensure the navbar (menu) takes full width below */
    .navbar.active {
        width: 100%;
        text-align: left;
    }

    .link-subtitle, .link-title {
        color: #fff;
    }
}

/* === MOBILE DROPDOWN BEHAVIOUR FIX === */
@media (max-width: 900px) {

    /* Hide all dropdowns by default */
    .navbar .dropdown .dropdown-content {
        display: none !important;
        position: static;
        background: none;
        box-shadow: none;
        transform: none;
        opacity: 1;
        padding: 0;
    }

    /* Only show when the .open class is applied */
    .navbar .dropdown.open .dropdown-content {
        display: block !important;
    }

    /* Prevent shifting left/right */
    .navbar .dropdown-content .row,
    .navbar .dropdown-content .column,
    .navbar .dropdown-content .column a {
        transform: none !important;
        margin: 0;
        padding: 5px 20px;
    }

    /* Optional: adjust the column titles for clarity */
    .navbar .dropdown-content .column h3 {
        color: #fff;
        font-size: 15px;
        margin-top: 10px;
    }
}

/* === FINAL MOBILE STYLING REFINEMENTS === */
@media (max-width: 900px) {

    /* Center and resize the CTA */
    .navbar .cta {
        width: auto;
        /* shrink to content width */
        max-width: 220px;
        margin: 15px auto;
        /* center horizontally */
        display: block;
        background: #fff212;
        color: #005eb8;
        font-weight: 600;
        border-radius: 25px;
        padding: 10px 20px;
        text-align: center;
    }

    /* Rounded background for selected dropdown */
    .navbar .dropdown.open .dropbtn {
        background-color: #0072e0;
        border-radius: 10px;
        transition: background 0.3s ease;
    }

    /* Optional subtle hover on dropdown buttons */
    .navbar .dropdown .dropbtn:hover {
        background-color: #0063c2;
        border-radius: 10px;
    }
}

/* === MOBILE CTA VISIBILITY FIX === */
@media (max-width: 900px) {

    /* Hide CTA when menu is closed */
    .navbar .cta {
        display: none !important;
    }

    /* Show CTA only when menu is open */
    .navbar.active .cta {
        display: block !important;
    }
}

/* Thicken burger bars (no transform changes) */
@media (max-width: 900px) {
    .menu-toggle .bar {
        height: 4px !important;
        /* was 3px */
        margin: 4px 0 !important;
        /* keeps spacing even after thicker bars */
    }

    .menu-toggle {
        height: 24px;
        /* gives room for the thicker bars */
    }
}

/* Thicken burger bars safely */
@media (max-width: 900px) {
    .menu-toggle .bar {
        background-color: #fff212;
        height: 4px;
        /* thicker */
        width: 44px;
        /* slightly shorter for balance */
        margin: 3px 0;
        /* even spacing */
        border-radius: 2px;
        display: block;
    }

    /* make sure the toggle container allows enough height */
    .menu-toggle {
        height: auto;
        min-height: 24px;
    }
}

/* Fix X alignment after width increase */
@media (max-width: 900px) {
    .menu-toggle.open .bar:nth-child(1) {
        transform: rotate(45deg) translate(8.5px, 8.5px);
    }

    .menu-toggle.open .bar:nth-child(3) {
        transform: rotate(-45deg) translate(8.5px, -8.5px);
    }

    .menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }
}

/* Remove the default focus/active outline from the burger button */
.menu-toggle {
    outline: none !important;
    box-shadow: none !important;
}

/* Prevent any focus ring on click */
.menu-toggle:focus,
.menu-toggle:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Hide burger menu toggle on desktop */
@media (min-width: 901px) {
    .menu-toggle {
        display: none !important;
    }
}