/* Offcanvas LeftAlign layout styles. Loaded by canvas.php in this directory. */
/* ══════════════════════════════════════════════
   OFFCANVAS: stacked full-width buttons
   ══════════════════════════════════════════════ */

/* SP Page Builder gives every section, column and addon an id built from the
   timestamp at which it was created, so those ids are unique to one module on
   one site. This block used to name six of them literally, which meant it
   carried one client's page structure into every install and matched nothing
   anywhere else. The prefix selectors below do the same job for whatever
   module a site actually puts in the below-menu position — the same
   [id^="column-wrap-id-"] form the MultiRowContact header already uses. */
.offcanvas-below-menu,
.offcanvas-below-menu .sp-module,
.offcanvas-below-menu .sp-module-content,
.offcanvas-below-menu .mod-sppagebuilder,
.offcanvas-below-menu .page-content,
.offcanvas-below-menu .sppb-section,
.offcanvas-below-menu .sppb-row-container,
.offcanvas-below-menu .sppb-row,
.offcanvas-below-menu .sppb-row-column,
.offcanvas-below-menu .sppb-column,
.offcanvas-below-menu .sppb-column-addons,
.offcanvas-below-menu .sppb-addon-wrapper,
.offcanvas-below-menu .sppb-addon,
.offcanvas-below-menu [id^="column-wrap-id-"],
.offcanvas-below-menu [id^="column-id-"],
.offcanvas-below-menu [id^="sppb-addon-wrapper-"],
.offcanvas-below-menu [id^="sppb-addon-"],
.offcanvas-below-menu .sppb-addon-content,
.offcanvas-below-menu .sppb-button-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-basis: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.offcanvas-below-menu,
.offcanvas-below-menu * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.offcanvas-below-menu .sppb-addon-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* SPPB button-group buttons carry per-instance ids of the same timestamp form;
   the prefix match covers any site's, and .sppb-btn covers the rest. */
.offcanvas-below-menu .sppb-btn,
.offcanvas-below-menu [id^="btn-"] {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    box-sizing: border-box !important;
}

@media (max-width: 380px) {
    .offcanvas-below-menu .sppb-btn,
    .offcanvas-below-menu [id^="btn-"] {
        font-size: 12px !important;
        line-height: 1.2 !important;
        padding: 9px 12px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
}

/* Offcanvas panel: keep content off the right edge */
.offcanvas-menu .offcanvas-inner {
    padding-right: 24px !important;
    padding-left: 24px !important;
    box-sizing: border-box !important;
}
.offcanvas-menu .offcanvas-inner .sp-contact-info,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li > a,
.offcanvas-menu .offcanvas-inner .sp-contact-info > li > span {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}
.offcanvas-menu .offcanvas-inner .sp-contact-info > li > a {
    display: inline-block !important;
}