/* Mobile Navigation Dropdown Styles
   Loaded by core/navbar-new.html. Kept in its own file (separate from
   navbar-dropdown.css / navbar-new.css) so it can be uploaded to S3 and
   cache-cleared on CloudFront independently of the existing shared assets.

   Mirrors the desktop dropdowns but expands inline on tap instead of hover.
   The child links are populated from the same Hygraph navigation data. */

.mobile-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-row .mobile-nav-link {
    flex: 1 1 auto;
}

.mobile-dropdown-toggle {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 15px;
    font-size: 14px;
    line-height: 1;
}

.mobile-dropdown-toggle .arrow-rotate {
    transition: transform 0.3s ease;
}

.mobile-nav-item.open .mobile-dropdown-toggle .arrow-rotate {
    transform: rotate(180deg);
}

.mobile-dropdown-menu {
    display: none;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 0 0 20px;
}

.mobile-nav-item.open .mobile-dropdown-menu {
    display: block;
}

.mobile-dropdown-link {
    display: block;
    color: #555;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px;
    border-radius: 12px;
    transition: color 0.2s ease, background 0.2s ease;
}

.mobile-dropdown-link:hover {
    color: var(--global-colour-green);
    background: #f5f5f5;
}

/* Keep the modal a fixed size so expanding a sub-menu doesn't grow and
   re-centre it (which made the modal jump). It already has overflow-y: auto,
   so the extra links scroll inside instead. Overrides the max-height in
   navbar-new.css; this stylesheet loads after it. */
.mobile-menu-content {
    height: 80vh;
}