/* Reset list styling */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;              /* Makes the menu horizontal */
    gap: 1rem;                  /* Spacing between menu items */
    align-items: center;
    font-size: 1em;
    font-family: "Raleway", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

/* Top-level menu links & buttons */
.nav-list > li > a,
.nav-list > li > button {
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0.7rem 1rem;
    color: #fff;
    min-height: 40px;
}

.nav-list > li > a:hover,
.nav-list > li > button:hover {
    background: #E3F8FD;
    border-radius: 2px;
    color: black;
}

.nav-list > li > a:focus,
.nav-list > li > button:focus {
    background: #E3F8FD;
    border-radius: 4px;
    color: #283364;
}

/* Position submenu */
.has-submenu {
    position: relative;
}

.has-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0.05rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: #50ABE4;
    border: 1px solid #E3F8FD;
    border-radius: 2px;
    /*min-width: 150px;*/
}

.has-submenu ul li a {
    display: block;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    color: white;
    text-decoration: none;
}

.has-submenu ul li a:hover {
    background: #E3F8FD;
    color: black;
    text-decoration: none;
}
.has-submenu ul li a:focus {
    background: #E3F8FD;
    color: #283364;
    text-decoration: none;
}

/* Use [hidden] attribute to hide menu when not expanded */
.has-submenu ul[hidden] {
    display: none;
}

/* Base style for submenu toggles */
.nav-list .has-submenu > button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;              /* space between label and arrow */
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}


/* SVG-based chevron as a pseudo-element */
.nav-list .has-submenu > button::after {
    content: "";
    inline-size: 0.8em;        /* logical width */
    block-size: 0.8em;         /* logical height */
    background-color: currentColor;
    /* Use CSS mask with an inline SVG for a sharp, scalable icon */
    -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='black' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/>\
  </svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='black' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/>\
  </svg>") no-repeat center / contain;
    transition: transform 150ms ease;
    transform-origin: 50% 50%;
}

/* Rotate to point up when expanded */
.nav-list .has-submenu > button[aria-expanded="true"]::after {
    transform: rotate(180deg) translateY(-1px);
}

.nav-home {
    /*margin-top: 2rem;*/
    min-height: 40px;
    background-color: #283364;
    color: #fff;
    display: flex;
}

/* Optional: respect reduced motion settings */
@media (prefers-reduced-motion: reduce) {
    .nav-list .has-submenu > button::after {
        transition: none;
    }
}

/* =========================================================
   Responsive navigation + hamburger toggle (appended)
   ========================================================= */

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: none;
    border: 1px solid #E3F8FD;
    border-radius: 4px;
    color: #fff;
    padding: 0.5rem 0.75rem;
    min-height: 40px;
    cursor: pointer;
    font: inherit;
}

.nav-toggle::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/></svg>") no-repeat center / contain;
}

.nav-toggle[aria-expanded="true"]::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z'/></svg>") no-repeat center / contain;
}

.nav-home {
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
}

@media (max-width: 768px) {

    /* Make the nav bar a vertical stack with no extra spacing */
    .nav-home {
        flex-direction: column;      /* stack children: brand, toggle, menu */
        align-items: stretch;        /* make children stretch full width */
        justify-content: flex-start; /* top-aligned */
        gap: 0;                      /* remove extra spacing */
        padding-inline: 0;           /* optional: remove side padding for a flush look */
    }

    /* Make the hamburger full-width and visually part of the menu */
    .nav-toggle {
        order: 2;                    /* brand (1), toggle (2), menu (3) — adjust if needed */
        display: inline-flex;
        width: 100%;
        margin: 0;
        border: 0;                   /* remove border for cleaner look */
        border-bottom: 1px solid #E3F8FD;  /* subtle divider above the menu items */
        background: #283364;         /* match the nav bar color */
        color: #fff;
        justify-content: flex-start; /* icon+label align left */
        padding: 0.75rem 1rem;       /* make it a good tap target */
    }

    /* Ensure the menu sits directly beneath the toggle, full-width */
    .nav-list {
        order: 3;
        margin: 0.75rem 0 0.75rem 1.25rem;
        width: 100%;
        border-top: 0;               /* divider is already on the toggle */
        display: none;               /* stays hidden until toggled */
        flex-direction: column;
        gap: 1.25rem;
        background: #283364;         /* same background for seamless look */
        padding-block: 0.25rem;
        align-items: flex-start;
    }

    /* Reveal the menu when the toggle is expanded (same sibling rule) */
    .nav-toggle[aria-expanded="true"] + .nav-list {
        display: flex;
        justify-content: flex-start;
    }

    /* Make items full-width and compact */
    .nav-list > li > a,
    .nav-list > li > button {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
        min-height: 44px;
        border-radius: 0;
        justify-content: flex-start;

    }

    /* Submenus remain inline on mobile */
    .has-submenu { position: static; }
    .has-submenu ul {
        position: static;
        background: #50ABE4;
        border: none;
        border-radius: 0;
        margin: 0 0 0.5rem 0;
        padding: 0.25rem 0;
    }

    /* Submenu items also left‑aligned */
    .has-submenu ul li a {
        text-align: left;
        justify-content: flex-start;
    }

}


/*.nav-toggle { display: flex; flex-direction: column;}

.nav-list {
    position: static;
    display: none;
    flex-direction: column;
    gap: 1rem;
    background: #283364;
    border-top: 1px solid #E3F8FD;
    padding-block: 0.25rem;
    width: 100%;
}

.nav-toggle[aria-expanded="true"] + .nav-list { display: flex; }

.nav-list > li > a,
.nav-list > li > button {
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    min-height: 44px;
    border-radius: 0;
}

.has-submenu { position: static; }
.has-submenu ul {
    position: static;
    background: #50ABE4;
    border: none;
    border-radius: 0;
    margin: 0 0 0.5rem 0;
    padding: 0.25rem 0;
}
.has-submenu ul[hidden] { display: none; }

.has-submenu ul li a {
    padding: 0.5rem 1rem;
    white-space: normal;
}
}*/

@media (min-width: 769px) {
    .nav-list {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        width: auto;
        background: transparent;
        border: 0;
    }

    .nav-toggle { display: none; }

    .has-submenu { position: relative; }
    .has-submenu ul {
        position: absolute;
        top: 100%;
        left: 0;
        background: #50ABE4;
        border: 1px solid #E3F8FD;
        border-radius: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle::before { transition: none; }
}