/* HNPS Mobile Finish 1.0.0
   Intentionally narrow: exact Newlaithes Site Tools classes only.
   Desktop is unchanged. */

.hnps-mobile-top,
.hnps-mobile-nav-scrim,
.hnps-mobile-drawer-head,
.hnps-mobile-drawer-search,
.hnps-mobile-drawer-utilities,
.hnps-mobile-related {
    display: none;
}

@media (max-width: 900px) {
    :root {
        --hnps-mobile-purple: #35155d;
        --hnps-mobile-purple-2: #48266a;
        --hnps-mobile-green: #28783b;
        --hnps-mobile-line: #e8e2eb;
        --hnps-mobile-ink: #2d2930;
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* --------------------------------------------------------------
       HEADER
       -------------------------------------------------------------- */

    .hnps-utility-links {
        display: none !important;
    }

    .hnps-header-search {
        display: none !important;
    }

    .hnps-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: .45rem !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .hnps-language-toggle,
    .hnps-nav-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }

    .hnps-nav-toggle {
        display: grid !important;
        place-items: center !important;
        border: 0 !important;
        background: var(--hnps-mobile-purple) !important;
        color: #fff !important;
        font-size: 0 !important;
        line-height: 1 !important;
        cursor: pointer;
    }

    .hnps-nav-toggle::before {
        content: "";
        width: 20px;
        height: 14px;
        background:
            linear-gradient(currentColor,currentColor) 0 0/20px 2px no-repeat,
            linear-gradient(currentColor,currentColor) 0 6px/20px 2px no-repeat,
            linear-gradient(currentColor,currentColor) 0 12px/20px 2px no-repeat;
    }

    .hnps-mobile-sticky-row {
        position: sticky !important;
        top: 0 !important;
        z-index: 99990 !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 1px 0 rgba(53,21,93,.10) !important;
    }

    /* The old full-width mobile nav host becomes zero-height. */
    .hnps-mobile-nav-host {
        min-height: 0 !important;
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .hnps-primary-nav-wrap {
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* --------------------------------------------------------------
       STANDARD MOBILE DRAWER
       -------------------------------------------------------------- */

    .hnps-primary-nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 999999 !important;
        display: block !important;
        width: min(90vw, 410px) !important;
        max-width: 410px !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 1rem calc(1.2rem + env(safe-area-inset-bottom)) !important;
        background: var(--hnps-mobile-purple) !important;
        color: #fff !important;
        box-shadow: -14px 0 40px rgba(20,10,34,.25) !important;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .2s ease, visibility .2s ease;
    }

    body.hnps-mobile-menu-open {
        overflow: hidden !important;
    }

    body.hnps-mobile-menu-open .hnps-primary-nav {
        transform: translateX(0);
        visibility: visible;
    }

    .hnps-mobile-nav-scrim {
        position: fixed;
        inset: 0;
        z-index: 999998;
        background: rgba(18,10,27,.48);
    }

    body.hnps-mobile-menu-open .hnps-mobile-nav-scrim {
        display: block;
    }

    .hnps-mobile-drawer-head {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        margin: 0 -1rem;
        padding: max(.55rem, env(safe-area-inset-top)) 1rem .55rem;
        background: var(--hnps-mobile-purple);
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .hnps-mobile-drawer-head strong {
        font-size: 1.1rem;
    }

    .hnps-mobile-drawer-close {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 999px;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 1.7rem;
        line-height: 1;
        cursor: pointer;
    }

    .hnps-mobile-drawer-search {
        display: grid;
        grid-template-columns: minmax(0,1fr) 48px;
        width: 100%;
        height: 50px;
        margin: .9rem 0 .75rem;
        overflow: hidden;
        border-radius: 12px;
        background: #fff;
    }

    .hnps-mobile-drawer-search input {
        appearance: none;
        width: 100%;
        min-width: 0;
        height: 50px;
        margin: 0 !important;
        padding: 0 .9rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: var(--hnps-mobile-ink) !important;
        box-shadow: none !important;
        font: inherit !important;
        font-size: 16px !important;
    }

    .hnps-mobile-drawer-search input::placeholder {
        color: #777;
        opacity: 1;
    }

    .hnps-mobile-drawer-search button {
        display: grid;
        place-items: center;
        width: 48px;
        height: 50px;
        padding: 0;
        border: 0;
        background: #fff;
        color: var(--hnps-mobile-purple);
        cursor: pointer;
    }

    .hnps-mobile-drawer-search svg {
        width: 22px;
        height: 22px;
    }

    .hnps-nav-item {
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    .hnps-nav-item:last-of-type {
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .hnps-nav-link {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 24px !important;
        align-items: center !important;
        column-gap: .7rem !important;
        min-height: 52px !important;
        padding: .72rem .15rem !important;
        color: #fff !important;
        background: transparent !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .hnps-nav-item.is-current > .hnps-nav-link {
        color: #cceacc !important;
    }

    .hnps-nav-caret {
        width: 13px !important;
        height: 9px !important;
        margin: 0 !important;
        justify-self: center !important;
        align-self: center !important;
        transition: transform .18s ease;
    }

    .hnps-nav-item.is-mobile-open > .hnps-nav-link .hnps-nav-caret {
        transform: rotate(180deg);
    }

    .hnps-mega {
        position: static !important;
        display: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: rgba(255,255,255,.07) !important;
        box-shadow: none !important;
    }

    .hnps-nav-item.is-mobile-open > .hnps-mega {
        display: block !important;
    }

    .hnps-mega-inner {
        display: block !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: .35rem .4rem .55rem !important;
    }

    .hnps-mega-intro {
        display: none !important;
    }

    .hnps-mega-columns,
    .hnps-mega-list {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hnps-mega-list li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .hnps-mega-list a {
        display: block !important;
        padding: .63rem .65rem !important;
        border-radius: 8px !important;
        color: rgba(255,255,255,.94) !important;
        text-decoration: none !important;
        font-size: .95rem !important;
        line-height: 1.25 !important;
    }

    .hnps-mega-list a[aria-current="page"] {
        background: #fff !important;
        color: var(--hnps-mobile-purple) !important;
        font-weight: 700 !important;
    }

    .hnps-mobile-drawer-utilities {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
        padding-top: .9rem;
    }

    .hnps-mobile-drawer-utilities a {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: .4rem .72rem;
        border: 1px solid rgba(255,255,255,.24);
        border-radius: 999px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: .87rem;
        font-weight: 600;
    }

    /* --------------------------------------------------------------
       INTERNAL PAGE HERO
       -------------------------------------------------------------- */

    .hnps-breadcrumbs.hnps-mobile-breadcrumbs {
        margin: 0 0 .55rem !important;
        padding: 0 !important;
    }

    .hnps-breadcrumbs.hnps-mobile-breadcrumbs a {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        color: #5c2b83 !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        font-size: .95rem !important;
        line-height: 1.2 !important;
    }

    .hnps-mobile-page-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 1rem !important;
        padding-bottom: 1.15rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .hnps-mobile-page-hero .wp-block-spacer {
        display: none !important;
    }

    .hnps-mobile-page-hero h1 {
        margin-top: .55rem !important;
        margin-bottom: 0 !important;
        font-size: clamp(2.15rem, 9vw, 3rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -.035em !important;
    }

    /* --------------------------------------------------------------
       REPLACE "IN THIS SECTION" WITH RELATED AT THE END
       -------------------------------------------------------------- */

    .hnps-mobile-section-column {
        display: none !important;
    }

    .hnps-mobile-content-column {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hnps-mobile-related {
        display: block;
        margin: 2.25rem 0 0;
        padding: 1.2rem 0 0;
        border-top: 1px solid var(--hnps-mobile-line);
    }

    .hnps-mobile-related h2 {
        margin: 0 0 .35rem !important;
        color: var(--hnps-mobile-purple) !important;
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
    }

    .hnps-mobile-related a {
        display: grid;
        grid-template-columns: minmax(0,1fr) 18px;
        align-items: center;
        gap: .65rem;
        min-height: 46px;
        padding: .7rem 0;
        border-bottom: 1px solid #eee9f1;
        color: #47206c !important;
        text-decoration: none !important;
        font-size: .97rem;
        line-height: 1.25;
    }

    .hnps-mobile-related a span:last-child {
        justify-self: end;
        font-size: 1.35rem;
        line-height: 1;
    }

    /* --------------------------------------------------------------
       FOOTER: keep useful identity/contact only
       -------------------------------------------------------------- */

    .hnps-mobile-footer-hide {
        display: none !important;
    }

    .hnps-footer-grid {
        grid-template-columns: 1fr !important;
    }

    /* --------------------------------------------------------------
       BACK TO TOP
       -------------------------------------------------------------- */

    .hnps-mobile-top {
        position: fixed;
        right: 1rem;
        bottom: calc(5.3rem + env(safe-area-inset-bottom));
        z-index: 99990;
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--hnps-mobile-purple);
        color: #fff;
        box-shadow: 0 8px 24px rgba(25,12,41,.22);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        cursor: pointer;
    }

    .hnps-mobile-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .hnps-mobile-top svg {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .hnps-primary-nav,
    .hnps-nav-caret,
    .hnps-mobile-top {
        transition: none !important;
    }
}


/* HNPS Mobile Finish 1.0.1 — three narrowly targeted final corrections */
@media (max-width: 900px) {
    /* JS marks any legacy utility items that are rendered outside the expected wrapper. */
    .hnps-mobile-utility-hide {
        display: none !important;
    }

    /* Once moved to body, the drawer sits above the scrim and is fully interactive. */
    body > .hnps-primary-nav {
        z-index: 1000001 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body > .hnps-mobile-nav-scrim {
        z-index: 1000000 !important;
    }

    body.hnps-mobile-menu-open > .hnps-primary-nav,
    body.hnps-mobile-menu-open > .hnps-primary-nav * {
        pointer-events: auto !important;
    }

    /* Hide the old contextual navigation wherever the original markup places it. */
    .hnps-mobile-old-section-nav,
    .hnps-mobile-old-section-column {
        display: none !important;
    }

    .hnps-mobile-full-content-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* HNPS Mobile Finish 1.0.2 — final navigation polish only */
@media (max-width: 900px) {

    /* The native Site Tools contextual menu is not used on mobile.
       Its links are reproduced as Related beneath the page content. */
    main .hnps-section-menu,
    .hnps-section-menu {
        display: none !important;
    }

    /* Guarantee the section-menu column disappears and content takes full width. */
    .hnps-mobile-section-column {
        display: none !important;
    }

    .hnps-mobile-content-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Centre the three hamburger strokes mathematically within the circle. */
    .hnps-nav-toggle {
        position: relative !important;
        display: block !important;
    }

    .hnps-nav-toggle::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        background: currentColor !important;
        border-radius: 2px !important;
        box-shadow:
            0 -6px 0 currentColor,
            0  6px 0 currentColor !important;
        transform: translate(-50%, -50%) !important;
    }
}


/* HNPS Mobile Finish 1.0.6 — hide homepage Discover section on mobile */
@media (max-width: 900px) {
    .hnps-discover-mobile-hidden {
        display: none !important;
    }
}
