/* ── The mobile header and menu for logged-out visitors ──
   Taken from UK Prenup (prenup-agreement repo, mobile-nav.css). Below the desktop
   breakpoint the bar is logo | burger, and the menu is a drawer that slides in from
   the right UNDER the header, over a dimmed page: big display-font links divided by
   hairlines, the current page marked, and a pill button. The Bootstrap collapse is
   not used on mobile.
   Logged-out pages only: base.html renders the drawer, and the .has-mobile-drawer
   class on the header wrapper, only when nobody is signed in. Signed-in pages keep
   #mainNav as their slide-in menu, so every header rule here is scoped by that class.
   Markup: base.html (.navbar-toggler, #navScrim, #mobileDrawer);
   behaviour: mobile-drawer.js. */

.nav-scrim, .mobile-drawer { display: none; }

@media (max-width: 991.98px) {
    .has-mobile-drawer #mainNav, .has-mobile-drawer .navbar-overlay { display: none !important; }

    /* The bar: solid navy, the brand at the left, the burger at the right. */
    .sticky-header-wrapper.has-mobile-drawer { --header-h: 72px; }
    .has-mobile-drawer nav.navbar { background: #003366; padding: 14px 18px; min-height: var(--header-h); }
    .has-mobile-drawer nav.navbar > .container { display: flex; align-items: center; gap: 14px; padding: 0; max-width: none; }
    .has-mobile-drawer nav.navbar .navbar-brand { margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 12px; }
    .has-mobile-drawer nav.navbar .navbar-brand .logo-img { height: 44px; width: auto; }
    body.nav-drawer-open .sticky-header-wrapper.has-mobile-drawer { position: fixed !important; top: 0; left: 0; right: 0; }


    /* The burger: the site's original three lines morphing into a cross - the
       same rules as navbar-styles-v2.css, restated here (scoped, so they win
       over mobile-fixes.css) because the landing pages load their own CSS list
       and may not include that file. */
    .has-mobile-drawer .navbar-toggler, .has-mobile-drawer .navbar-toggler:focus, .has-mobile-drawer .navbar-toggler:active {
        display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
        margin: 0 -10px 0 auto; padding: 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; cursor: pointer;
    }
    .has-mobile-drawer .navbar-toggler:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
    .has-mobile-drawer .navbar-toggler-icon {
        display: inline-block; position: relative; width: 24px; height: 18px; background: transparent; background-image: none;
    }
    .has-mobile-drawer .navbar-toggler-icon span {
        display: block; position: absolute; left: 0; width: 100%; height: 2.5px; margin: 0; border-radius: 2px;
        background: rgba(255, 255, 255, 0.9); opacity: 1; transform: none;
        transition: all 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .has-mobile-drawer .navbar-toggler-icon span:nth-child(1) { top: 0; }
    .has-mobile-drawer .navbar-toggler-icon span:nth-child(2) { top: 7px; }
    .has-mobile-drawer .navbar-toggler-icon span:nth-child(3) { top: 14px; }
    .has-mobile-drawer .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) { transform: rotate(45deg); top: 3px; left: 5px; }
    .has-mobile-drawer .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) { width: 0; opacity: 0; }
    .has-mobile-drawer .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) { transform: rotate(-45deg); top: 11px; left: 5px; }

    /* The scrim: the page dimmed below the header, behind the drawer. */
    .nav-scrim {
        display: block; position: fixed; top: var(--header-h, 72px); left: 0; right: 0; bottom: 0; z-index: 1020;
        background: rgba(0, 20, 45, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .nav-scrim.is-open { opacity: 1; pointer-events: auto; }

    /* The drawer: under the header, from the right. */
    .mobile-drawer {
        display: flex; flex-direction: column; box-sizing: border-box;
        position: fixed; top: var(--header-h, 72px); right: 0; bottom: 0; z-index: 1021;
        width: min(86vw, 380px); padding: 28px 28px 32px; overflow-y: auto; overscroll-behavior: contain;
        background: #003366; color: #fff; border-left: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
        transform: translateX(100%); visibility: hidden;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    }
    .mobile-drawer.is-open { transform: translateX(0); visibility: visible; }

    .mobile-drawer__links { list-style: none; margin: 0 0 24px; padding: 0; }
    .mobile-drawer__links li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .mobile-drawer__links li form { margin: 0; }
    .mobile-drawer__links a, .mobile-drawer__links button {
        display: block; width: 100%; position: relative; padding: 18px 0; border: 0; background: none; text-align: left;
        font-family: 'Poppins', 'Inter', sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.2;
        color: #fff; text-decoration: none; cursor: pointer;
        transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mobile-drawer__links a::before, .mobile-drawer__links button::before {
        content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; border-radius: 1px;
        background: #4fc3f7; transform: translateY(-50%); transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mobile-drawer__links a:hover, .mobile-drawer__links a:focus-visible, .mobile-drawer__links button:hover { color: #4fc3f7; padding-left: 18px; outline: none; text-decoration: none; }
    .mobile-drawer__links a:hover::before, .mobile-drawer__links a:focus-visible::before, .mobile-drawer__links button:hover::before { width: 12px; }
    .mobile-drawer__links a[aria-current="page"] { color: #4fc3f7; padding-left: 18px; }
    .mobile-drawer__links a[aria-current="page"]::before { width: 12px; }

    /* A group (More services, Resources): a row like the others that opens its own links beneath.
       No dash or indent on hover: the selectors repeat .mobile-drawer__links so they outrank the
       link rules above, or a tapped group row keeps the hover look (phones hold :hover after a tap). */
    .mobile-drawer__group-toggle { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
    .mobile-drawer__links .mobile-drawer__group-toggle::before { content: none; }
    .mobile-drawer__links .mobile-drawer__group-toggle:hover { padding-left: 0; }
    .mobile-drawer__caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .mobile-drawer__group-toggle[aria-expanded="true"] { color: #4fc3f7; }
    .mobile-drawer__group-toggle[aria-expanded="true"] .mobile-drawer__caret { transform: rotate(180deg); }
    .mobile-drawer__sub { list-style: none; margin: 0 0 10px; padding: 0 0 0 18px; border-left: 2px solid rgba(79, 195, 247, 0.45); }
    .mobile-drawer__sub[hidden] { display: none; }
    .mobile-drawer__sub li { border-bottom: 0; }
    /* .mobile-drawer__links repeated so narrow phones' bigger row size (420px query below) skips sub-links. */
    .mobile-drawer__links .mobile-drawer__sub a { font-size: 1.1rem; font-weight: 500; padding: 11px 0; }
    .mobile-drawer__sub a::before { content: none; }
    .mobile-drawer__sub a:hover { padding-left: 6px; }

    .mobile-drawer__cta {
        display: block; margin: 0 0 28px; padding: 16px; border: 1px solid #fff; border-radius: 999px; text-align: center;
        background: #fff; color: #003366; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); transition: background 0.25s ease, transform 0.25s ease;
    }
    .mobile-drawer__cta:hover { background: #eef3f9; color: #003366; text-decoration: none; transform: translateY(-2px); }

    /* Entrance: the links and the button arrive one after another. */
    .mobile-drawer__links li, .mobile-drawer__cta {
        opacity: 0; transform: translateX(16px); transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .mobile-drawer.is-open .mobile-drawer__links li, .mobile-drawer.is-open .mobile-drawer__cta { opacity: 1; transform: none; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(1) { transition-delay: 0.08s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(2) { transition-delay: 0.14s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(3) { transition-delay: 0.20s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(4) { transition-delay: 0.26s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(5) { transition-delay: 0.32s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(6) { transition-delay: 0.38s; }
    .mobile-drawer.is-open .mobile-drawer__links li:nth-child(7) { transition-delay: 0.44s; }
    .mobile-drawer.is-open .mobile-drawer__cta { transition-delay: 0.50s; }
}

/* Phones: the mark carries the brand on its own; the bar is logo | burger. */
@media (max-width: 600px) {
    .has-mobile-drawer nav.navbar .navbar-brand .navbar-brand-text { display: none; }
}
/* Narrow phones: the links a touch smaller so "Child deed poll" stays on one line. */
@media (max-width: 420px) {
    .mobile-drawer { padding: 24px 22px 28px; }
    .mobile-drawer__links a, .mobile-drawer__links button { font-size: 1.3rem; padding: 16px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer, .nav-scrim, .has-mobile-drawer .navbar-toggler-icon span, .mobile-drawer__links a, .mobile-drawer__cta { transition: none !important; }
    .mobile-drawer__links li, .mobile-drawer__cta { opacity: 1; transform: none; transition: none; }
}