/* =========================================================================
   SERVORAPRISE UNIVERSAL MENU TOGGLE
   -------------------------------------------------------------------------
   SOURCE OF TRUTH:  experience.html (the "ServoraPrise Experience" page)

   This is the single, shared definition of the ServoraPrise navigation
   toggle button. It is intended to be linked on EVERY page across the
   ecosystem so the open/close menu button behaves and animates
   identically everywhere, while still adapting to each page's own
   color palette.

   WHAT THIS COMPONENT DOES
   -------------------------------------------------------------------------
   CLOSED STATE  →  Three horizontal bars ("hamburger"), with a
                     horizontal "MENU" label beside them.

   OPEN STATE    →  The bars morph into a "+" (plus / crosshair) symbol,
                     NOT an "X". One bar rotates 90° to form the vertical
                     stroke, the middle bar stays as the horizontal
                     stroke, and the third bar fades out.

                     Simultaneously, the "MENU" label rotates from
                     horizontal to a diagonal orientation.

   HOW IT DETECTS OPEN/CLOSE
   -------------------------------------------------------------------------
   This component listens to the exact same state every ServoraPrise
   page already uses: the `menu-open` class added to <body> by each
   page's own navigation script (navigation.js / experience-nav.js /
   servoraprise-nav.js all do this already). No JavaScript changes are
   required to use this file — simply link it.

   REQUIRED MARKUP
   -------------------------------------------------------------------------
   <button class="menu-toggle" id="menu-toggle" type="button"
           aria-controls="site-nav" aria-expanded="false"
           aria-label="Open navigation">
       <span class="menu-toggle__icon" aria-hidden="true">
           <span></span>
           <span></span>
           <span></span>
       </span>
       <span class="menu-toggle__label">Menu</span>
   </button>

   THEMING
   -------------------------------------------------------------------------
   Every color/timing value below is a CSS custom property with a
   fallback chain: it first looks for a page-specific "--mt-*" override,
   then falls back to that page's own design tokens (--color-white /
   --sp-white, etc.), then to a hard-coded default. This means the
   component drops into ANY page and automatically matches that page's
   existing palette — no per-page duplication needed.

   To customize a single page without touching this file, define any
   of the following on that page's own stylesheet (highest priority):

       :root {
           --mt-color: #ffffff;
           --mt-label-color: #9a9aa8;
           --mt-duration: 450ms;
           --mt-ease: cubic-bezier(0.22, 1, 0.36, 1);
       }
   ========================================================================= */


/* -------------------------------------------------------------------------
   BUTTON CONTAINER
   ------------------------------------------------------------------------- */

.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 0.6rem;

    width: auto;
    min-width: 2.5rem;
    min-height: 2.5rem;

    padding: 0;
    border: 0;
    background: transparent;

    color: var(--mt-color, var(--color-white, var(--sp-white, #ffffff)));

    cursor: pointer;

    position: relative;
    z-index: 510;
}


/* -------------------------------------------------------------------------
   ICON WRAPPER
   ------------------------------------------------------------------------- */

.menu-toggle__icon {
    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;

    width: 24px;
    height: 24px;

    flex-shrink: 0;
}


/* -------------------------------------------------------------------------
   THE THREE BARS
   -------------------------------------------------------------------------
   Bar 1 (top)    → rotates 90° and slides to center = vertical stroke
   Bar 2 (middle) → stays put                        = horizontal stroke
   Bar 3 (bottom) → fades out
   ------------------------------------------------------------------------- */

.menu-toggle__icon > span {
    display: block;

    width: 24px;
    height: 1px;
    margin: 0;

    background: var(--mt-color, var(--color-white, var(--sp-white, #ffffff)));

    transform-origin: center;

    transition:
        transform var(--mt-duration, var(--duration-normal, var(--sp-duration-normal, 450ms)))
                   var(--mt-ease, var(--ease-standard, var(--sp-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)))),
        opacity   var(--mt-duration-fast, var(--duration-fast, var(--sp-duration-fast, 200ms))) ease;
}

.menu-toggle__icon > span:nth-child(1) {
    transform: translateY(-6px);
}

.menu-toggle__icon > span:nth-child(2) {
    transform: translateY(0);
}

.menu-toggle__icon > span:nth-child(3) {
    transform: translateY(6px);
}


/* -------------------------------------------------------------------------
   "MENU" LABEL — CLOSED STATE
   ------------------------------------------------------------------------- */

.menu-toggle__label {
    display: inline-block;

    color: var(--mt-label-color, var(--color-text-muted, var(--sp-text-muted, #9a9aa8)));

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;

    transform: rotate(0deg) translate(0, 0);
    transform-origin: left center;

    transition:
        transform var(--mt-duration, var(--duration-normal, var(--sp-duration-normal, 450ms)))
                   var(--mt-ease, var(--ease-standard, var(--sp-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)))),
        color var(--mt-duration-fast, var(--duration-fast, var(--sp-duration-fast, 200ms))) ease;
}

.menu-toggle:hover .menu-toggle__label {
    color: var(--mt-color, var(--color-white, var(--sp-white, #ffffff)));
}


/* -------------------------------------------------------------------------
   OPEN STATE — ICON MORPHS INTO A "+" (PLUS), NOT AN "X"
   ------------------------------------------------------------------------- */

body.menu-open .menu-toggle__icon > span:nth-child(1) {
    /* Slides down to the centerline, then rotates 90° to stand
       vertical — this becomes the vertical stroke of the "+". */
    transform: translateY(0) rotate(90deg);
}

body.menu-open .menu-toggle__icon > span:nth-child(2) {
    /* Stays exactly where it is — this is the horizontal stroke
       of the "+". Untouched, so the crosspoint stays centered. */
    transform: translateY(0) rotate(0deg);
}

body.menu-open .menu-toggle__icon > span:nth-child(3) {
    /* No longer needed once the "+" is formed. */
    transform: translateY(0);
    opacity: 0;
}


/* -------------------------------------------------------------------------
   OPEN STATE — LABEL ROTATES DIAGONAL
   ------------------------------------------------------------------------- */

body.menu-open .menu-toggle__label {
    transform: rotate(-45deg) translate(2px, -2px);
}


/* =========================================================================
   MOBILE VISIBILITY
   -------------------------------------------------------------------------
   By default this component is available at every viewport width so it
   can be used as the universal trigger. If a page only wants it on
   mobile (matching the current ServoraPrise breakpoint convention),
   uncomment the block below AFTER confirming the page's own nav hides
   the desktop link list at the same breakpoint.
   ========================================================================= */

/*
@media (min-width: 901px) {
    .menu-toggle {
        display: none;
    }
}
*/