/**
 * The mmenu off-canvas menu (responsive_menu module).
 *
 * Only the bits the theme needs to correct are here; the module ships the rest.
 * The markup is built client-side by mmenu from a source list, so everything is
 * scoped to #off-canvas rather than to the source menu.
 */

/* --- Contact / Inquiry ---------------------------------------------------- */

/*
 * The menu link carries .white-btn, which is the DESKTOP treatment: a white
 * outline against the dark header bar. mmenu renders on a light panel, so that
 * button was white text on white with a transparent background — invisible
 * until the hover state painted it in. Here it is a filled button instead.
 */
#off-canvas .mm-listitem .white-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Narrower than a full-width row on purpose: it reads as a button sitting
       in the menu rather than as one more list item. */
    margin: 1.25rem 20px 1.5rem;
    padding: 11px 18px;
    border: 1px solid var(--phi-orange);
    border-radius: 8px;
    background: var(--phi-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

#off-canvas .mm-listitem .white-btn:hover,
#off-canvas .mm-listitem .white-btn:focus-visible {
    background: var(--phi-dark-600);
    border-color: var(--phi-dark-600);
    color: #fff;
}

/* mmenu draws a divider on every row and reserves space for the drill-down
   chevron. Neither belongs on a button, and the row padding would fight the
   margin set above. */
#off-canvas .mm-listitem:has(> .white-btn) {
    padding: 0;
}

#off-canvas .mm-listitem:has(> .white-btn)::after {
    display: none;
}

/* .mm-listitem__text is given a fixed row height by mmenu; the button sizes
   itself from its own padding. */
#off-canvas .mm-listitem .white-btn.mm-listitem__text {
    height: auto;
    line-height: 1.3;
}

/* --- Items with no link --------------------------------------------------- */

/*
 * A menu item pointing at <nolink> renders as a <span>, not an <a>. mmenu
 * leaves .mm-listitem__text at `color: inherit`, and what it inherits inside the
 * off-canvas panel is white, so those items were white on the light grey panel
 * and effectively invisible. Ten of them are in the menu today: System Design,
 * Maintenance Contracts, Spare Parts Supply, Company, Team and the Eco-Solutions
 * placeholders.
 *
 * The value is the one style.css sets on the links beside them, so the two want
 * changing together. Only the colour is matched, not the underline or hover:
 * these are not clickable and should not invite a tap.
 */
#off-canvas span.mm-listitem__text {
    color: #333333;
}