/*
 * scbt-mobile-nav.css — the mobile navigation controls.
 * Part of plg_system_scbtbrand. Loaded only when the "Mobile navigation" param is
 * on; switch that off to stop sending it. Do not edit on the server; edit the
 * source in development/scbtbrand-color/ and reinstall.
 *
 * ---------------------------------------------------------------------------
 * WHAT IT SOLVES
 *
 * The hamburger sits hard against the right edge of the screen, which is where a
 * thumb overshoots and where phone browsers claim the back-swipe gesture. Taps
 * miss it. Measured off the reference screenshot (_dev/image.png, 377px wide):
 * the icon occupies columns 361-376 — its right edge is on the last column, so
 * the gap is zero.
 *
 * The arithmetic behind that, because it is not obvious where the gap went:
 *
 *   features/menu.php:48   emits  <a id="offcanvas-toggler"
 *                                    class="offcanvas-toggler-right d-block d-lg-none">
 *                                 around a bare <i class="fa fa-bars">.
 *   template.css:1452-56   display:block; height:90px; line-height:90px;
 *                          font-size:20px
 *   template.css:1593-96   float:right; margin-left:20px  — and NO margin-right.
 *
 * A display:block float shrink-wraps, so the box is the glyph's own width, about
 * 17.5px, by the full 90px header height. Its right edge then lands at exactly
 *
 *     viewport - header_padding_x
 *
 * because #sp-menu's 15px Bootstrap column padding and the .row's -15px margin
 * cancel each other out. So the branding plugin's own "Header side padding" is
 * the only thing that was ever holding the icon off the edge, and with it at 0
 * there is nothing at all.
 *
 * ---------------------------------------------------------------------------
 * FOUR THINGS NOT TO TIDY AWAY
 *
 * 1. margin-right, NOT padding-right. Padding would grow the box towards the
 *    very edge it is trying to leave, and slide the glyph left inside a box that
 *    still touches the screen. Margin moves the whole box inwards and leaves its
 *    size exactly as it was — which is the point: the icon and its tap target
 *    are deliberately unchanged here, only the gap is new. If taps still miss
 *    after this, widening the box is the next step and it is a separate decision.
 *
 * 2. The media query is doing real work, it is not belt and braces. The toggler
 *    carries `d-block d-lg-none` only under menu_type=mega, which is what this
 *    site runs. Under mega_offcanvas (features/menu.php:37) it has no responsive
 *    class at all and is visible at every width, and this query is what keeps the
 *    change mobile-only either way. 991.98px is Bootstrap 4's own max-width
 *    convention, so this block and the min-width:992px blocks in the other sheets
 *    can never both apply.
 *
 * 3. `.offcanvas-toggler-right` is in the selector on purpose. With
 *    offcanvas_position=left the toggler is emitted by features/logo.php:50 with
 *    `offcanvas-toggler-left` and floated the other way; a right-hand inset there
 *    would push it AWAY from the logo it belongs beside.
 *
 * 4. There is nothing to beat on specificity, so there is no !important. Stock
 *    sets margin-left and never margin-right, and (1,1,0) here against
 *    `body.ltr #offcanvas-toggler.offcanvas-toggler-right` at (0,2,1) is ample
 *    for a property nothing else declares.
 *
 * ---------------------------------------------------------------------------
 * THE INSET IS ADDITIVE
 *
 * The final gap is  header_padding_x + this value, because the two act on
 * different boxes: the padding moves the container's content edge, this moves the
 * float inside it. Raising the side padding later will therefore widen this gap
 * too, which is stated in the field's own description.
 *
 * WHAT IT COSTS. A margin on a float counts towards its container's shrink-to-fit
 * width, so #sp-menu grows by this much. With the two-logo header on, #sp-menu is
 * `flex: 0 0 auto` and #sp-logo2 is the flexible column, so the second logo gives
 * up exactly this many pixels on a narrow phone — it scales down rather than
 * distorting, because scbt-header-logos.css caps it with max-width:100% and
 * object-fit:contain. preview.html reports that width so the cost is visible
 * before it ships.
 *
 * Custom properties are emitted by the plugin from its params. The var() carries a
 * literal fallback so the sheet still renders correctly if that inline <style> is
 * ever missing.
 * ---------------------------------------------------------------------------
 */

@media (max-width: 991.98px) {

	#offcanvas-toggler.offcanvas-toggler-right {
		margin-right: var(--scbt-mnav-inset, 12px);
	}
}