/*
 * Mobile navigation (the meanmenu drawer, shown below 992px).
 *
 * Linked last in site.blade.php so it wins the cascade over meanmenu.min.css,
 * style.css and responsive.css. Everything is scoped under `.mobile-menu-area`,
 * which Bootstrap's `d-lg-none` already hides on desktop -- so none of this can
 * reach the desktop header.
 *
 * The drawer markup is NOT ours: jquery.meanmenu.js clones `.mobile-menu nav`
 * into `nav.mean-nav` and generates `.meanmenu-reveal` and the `.mean-expand`
 * toggles itself. That is why this file restyles generated class names instead
 * of introducing its own, and why it cannot use flex on anything meanmenu
 * measures.
 *
 * Three `!important`s below are unavoidable and each is commented where it
 * appears: two override rules that are themselves `!important`, and one
 * overrides an inline style the plugin writes at runtime. Nothing else here
 * needs one.
 *
 * Bump the ?v= query string in site.blade.php after editing this file.
 */

.mobile-menu-area {
    --mn-green: #71b745;
    --mn-dark: #00181a;
}

/* ---------------------------------------------------------------- the bar */

/*
 * `.sticky` (style.css) is `position: fixed !important`, and every mobile
 * breakpoint in responsive.css then forces it back to `absolute !important` --
 * which takes the bar out of flow, so it sat on top of whatever the page
 * started with and scrolled away as soon as you moved. Sticky keeps it in flow
 * (nothing hides underneath it) and keeps it on screen.
 */
.mobile-menu-area.sticky {
    position: sticky !important;
    top: 0;
    /* Also !important in .sticky, and #041424 is not a brand colour. The
       wordmark on it is the black logo, which was near-invisible. */
    background: var(--mn-dark) !important;
    box-shadow: 0 6px 24px rgba(0, 24, 26, 0.18);
    /* .sticky replays slideInDown on every page load. The bar never moves now,
       so the entrance animation is just a flinch. */
    animation: none;
}

.mobile-menu-area .mean-bar {
    float: none;
    min-height: 64px;
    padding: 0;
    background: transparent;
}

/* meanmenu ships content-box plus width:90% + padding:5% arithmetic on every
   row. border-box lets the rows below use real padding and a full width. */
.mobile-menu-area .mean-bar,
.mobile-menu-area .mean-bar * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * ⚠️ Pinned to the top, never centred.
 *
 * The logo is a sibling of `.mean-bar`, not a child, so its containing block is
 * `.mobile-menu-area` -- whose height is the bar PLUS the open drawer. Centring
 * it (`top: 50%`) therefore parked the wordmark halfway down the open menu, on
 * top of the Services row. An offset from the top is the only stable anchor,
 * because it is the one edge that does not move when the drawer opens.
 */
.mobile-menu-area .mobile-header-logo {
    top: 9px;
    left: 18px;
    transform: none;
}

/* 2.07:1 artwork, so 100px reads as ~48px tall inside the 64px bar. */
.mobile-menu-area .mobile-header-logo a img {
    width: 100px;
}

/* ------------------------------------------------------------- the trigger */

.mobile-menu-area a.meanmenu-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    /* Positioned with a margin, not top/right: the plugin writes `right:0`
       inline, and the button is floated (static), so offsets would be ignored
       anyway. */
    float: right;
    margin: 10px 16px 0 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: rotate(0deg);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.3s;
}

.mobile-menu-area a.meanmenu-reveal:hover {
    background: rgba(113, 183, 69, 0.24);
}

.mobile-menu-area a.meanmenu-reveal span:not(.mn-sr) {
    width: 20px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: #fff;
    transition: width 0.3s ease;
}

/* The middle bar pulls in on hover -- the one bit of the closed trigger that
   can move, since the three bars are replaced wholesale on open. */
.mobile-menu-area a.meanmenu-reveal:hover span:nth-child(2) {
    width: 13px;
}

/*
 * The trigger's accessible name (see useThemeScripts). meanmenu overwrites the
 * button's text with whatever `meanMenuOpen` / `meanMenuClose` contain, so the
 * label has to travel inside those strings and be hidden here. Clipped rather
 * than `display: none`, which screen readers skip.
 */
.mobile-menu-area a.meanmenu-reveal .mn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Open state. meanmenu writes text-align/text-indent/font-size inline when it
   swaps the content, so the button only has to be a sensible box for a centred
   glyph. The glyph itself is a bootstrap-icons `bi-x-lg`, passed as HTML from
   useThemeScripts in place of the plugin's capital "X". */
.mobile-menu-area a.meanmenu-reveal.meanclose {
    background: var(--mn-green);
    color: #fff;
    line-height: 1;
    /* A quarter turn carries the bars-to-cross swap, so the button reads as one
       movement rather than a hard content replacement. */
    transform: rotate(90deg);
}

/* Sized here, not by the plugin's inline 18px font-size on the parent: an icon
   font needs a little more presence than a letter did. */
.mobile-menu-area a.meanmenu-reveal.meanclose i {
    display: block;
    font-size: 20px;
    line-height: 1;
}

.mobile-menu-area a.meanmenu-reveal.meanclose:hover {
    background: #63a13b;
}

.mobile-menu-area a.meanmenu-reveal:hover span {
    background: #fff;
}

/* ----------------------------------------------------------- the drawer */

.mobile-menu-area .mean-nav {
    float: none;
    /* The trigger above is floated, so the drawer has to clear it or its rows
       would wrap around the button. */
    clear: both;
    width: 100%;
    margin-top: 0;
    background: transparent;
    /* The Services submenu alone is ~11 rows; without this the drawer runs off
       the bottom of a phone with no way to reach the last item. */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    /* Stated, not left to compute: `overflow-y: auto` alone turns overflow-x
       into `auto` too, so any row a pixel too wide becomes a sideways scroll. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-area .mean-nav > ul {
    padding-bottom: 12px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}

.mobile-menu-area .mean-nav ul li {
    float: none;
    width: 100%;
    background: transparent;
    border-top: 0;
}

/* The separator sits on the anchor, not the row: a row can also contain the
   Services submenu, and a border on the row would draw under that whole block
   instead of under its own label. */
.mobile-menu-area .mean-nav > ul > li > a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-area .mean-nav > ul > li:last-child > a {
    border-bottom: 0;
}

.mobile-menu-area .mean-nav ul li a {
    float: none;
    display: block;
    width: 100%;
    padding: 16px 68px 16px 20px;
    background: transparent;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    transition: 0.3s;
}

.mobile-menu-area .mean-nav ul li a:hover,
.mobile-menu-area .mean-nav ul li a:focus {
    background: rgba(255, 255, 255, 0.05);
    color: var(--mn-green);
}

/* ---------------------------------------------------------------- submenu */

/*
 * ⚠️ `width: auto` is the fix, not decoration.
 *
 * meanmenu sets `.mean-container .mean-nav ul { width: 100% }` on EVERY list,
 * nested ones included. Adding a left margin to indent the submenu therefore
 * made it 100% + 20px wide: the open Services list ran 20px past the drawer's
 * right edge, and because `.mean-nav` sets `overflow-y: auto` (which computes
 * overflow-x to auto as well) that turned into a sideways scroll on an open
 * submenu. Sizing it to what is left after the margin keeps it inside.
 */
.mobile-menu-area .mean-nav ul li ul {
    width: auto;
    margin: 0 0 6px 20px;
    border-left: 1px solid rgba(113, 183, 69, 0.4);
}

.mobile-menu-area .mean-nav ul li li a {
    width: 100%;
    padding: 12px 20px 12px 18px;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.68);
    font-size: 16px;
    font-weight: 500;
    opacity: 1;
}

.mobile-menu-area .mean-nav ul li li:last-child a {
    border-bottom: 0;
}

.mobile-menu-area .mean-nav ul li li a:hover {
    color: #fff;
}

/* --------------------------------------------------------- expand toggles */

.mobile-menu-area .mean-nav ul li a.mean-expand {
    /* meanmenu's own rule is `padding: 12px !important`, so matching it is the
       only way to size this as a real tap target. */
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-top: 0;
    top: 8px;
    right: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--mn-green);
    font-weight: 600;
    line-height: 1;
    transform: rotate(0deg);
    transition:
        transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1),
        background 0.3s,
        color 0.3s;
}

.mobile-menu-area .mean-nav ul li a.mean-expand:hover,
.mobile-menu-area .mean-nav ul li a.mean-expand.mean-clicked {
    background: rgba(113, 183, 69, 0.22);
    color: #fff;
}

/*
 * The open toggle spins as its glyph swaps.
 *
 * meanmenu replaces the button's text with "+" or "-" on every click and adds
 * `.mean-clicked` when the submenu is open, so the character change is free but
 * instant. Half a turn under an overshooting easing turns that swap into one
 * movement -- and because a "+" is symmetric about 180deg, the mark that lands
 * is exactly the "-" the plugin just wrote.
 */
.mobile-menu-area .mean-nav ul li a.mean-expand.mean-clicked {
    transform: rotate(180deg);
}

/* ------------------------------------------------------------------ motion */

/*
 * The drawer's rows arrive one after another instead of all at once.
 *
 * Driven off `.meanclose`, the class meanmenu puts on the trigger while the
 * drawer is open. The trigger sits before `.mean-nav` inside `.mean-bar`, so a
 * sibling combinator reaches the rows with no :has() and no JS. jQuery's
 * slideDown still owns the height; this only fades and lifts the contents.
 */
.mobile-menu-area a.meanmenu-reveal.meanclose ~ .mean-nav > ul > li {
    animation: mn-row-in 0.34s ease both;
}

.mobile-menu-area
    a.meanmenu-reveal.meanclose
    ~ .mean-nav
    > ul
    > li:nth-child(2) {
    animation-delay: 0.04s;
}

.mobile-menu-area
    a.meanmenu-reveal.meanclose
    ~ .mean-nav
    > ul
    > li:nth-child(3) {
    animation-delay: 0.08s;
}

.mobile-menu-area
    a.meanmenu-reveal.meanclose
    ~ .mean-nav
    > ul
    > li:nth-child(4) {
    animation-delay: 0.12s;
}

.mobile-menu-area
    a.meanmenu-reveal.meanclose
    ~ .mean-nav
    > ul
    > li:nth-child(5) {
    animation-delay: 0.16s;
}

.mobile-menu-area
    a.meanmenu-reveal.meanclose
    ~ .mean-nav
    > ul
    > li:nth-child(n + 6) {
    animation-delay: 0.2s;
}

/*
 * The same treatment one level down, for the rows a `+` reveals.
 *
 * `.mean-clicked` lands on the toggle, which meanmenu appends AFTER the submenu
 * it controls -- so no sibling combinator can walk back to it and :has() is the
 * only way in. A browser without :has() drops these rules and the rows simply
 * appear with the slideDown, which is the pre-existing behaviour.
 */
.mobile-menu-area .mean-nav li:has(> a.mean-expand.mean-clicked) > ul > li {
    animation: mn-row-in 0.3s ease both;
}

.mobile-menu-area
    .mean-nav
    li:has(> a.mean-expand.mean-clicked)
    > ul
    > li:nth-child(2) {
    animation-delay: 0.03s;
}

.mobile-menu-area
    .mean-nav
    li:has(> a.mean-expand.mean-clicked)
    > ul
    > li:nth-child(3) {
    animation-delay: 0.06s;
}

.mobile-menu-area
    .mean-nav
    li:has(> a.mean-expand.mean-clicked)
    > ul
    > li:nth-child(n + 4) {
    animation-delay: 0.09s;
}

@keyframes mn-row-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Respect the setting. Every rule above is decoration, so it all goes -- the
 * toggle still turns green and the drawer still opens, just without motion.
 */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu-area a.meanmenu-reveal,
    .mobile-menu-area a.meanmenu-reveal span,
    .mobile-menu-area .mean-nav ul li a,
    .mobile-menu-area .mean-nav ul li a.mean-expand {
        transition: none;
    }

    .mobile-menu-area a.meanmenu-reveal.meanclose,
    .mobile-menu-area .mean-nav ul li a.mean-expand.mean-clicked {
        transform: none;
    }

    .mobile-menu-area a.meanmenu-reveal.meanclose ~ .mean-nav > ul > li,
    .mobile-menu-area .mean-nav li:has(> a.mean-expand.mean-clicked) > ul > li {
        animation: none;
    }
}