/* Mobile menu (below 992px) – layouts/t4/layout/offcanvas.php + html/mod_menu/mobile.php + js/mobile-menu.js.
   Phone: full screen. From 600px: 420px sheet on the right over a dimmed page. Text only, accordion sections,
   Log in / avatar in the menu header, Contact sales + Pricing pinned at the bottom. Mockup: mockups/mobile-menu-2026-10-17.html */

/* header button */
/* button.….t4-offcanvas-toggle: beats T4's green 35px square (template.css) */
button.pxmm-toggle.t4-offcanvas-toggle { width: auto; height: auto; transition: border-color .2s ease; }
button.pxmm-toggle.t4-offcanvas-toggle, .pxmm-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; margin: 0; border-radius: var(--ds-r-pill, 999px); border: 1.5px solid var(--ds-line-strong, #d9dee5); background: #fff; color: var(--ds-navy, #050038); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; }
button.pxmm-toggle.t4-offcanvas-toggle:hover { background: #fff; color: var(--ds-navy, #050038); border-color: var(--ds-navy, #050038); }
.pxmm-toggle:focus-visible, .pxmm :focus-visible { outline: 2px solid var(--ds-green-ink, #15803d); outline-offset: 2px; }
@media (min-width: 992px) { .pxmm { display: none !important; } }

/* dialog */
.pxmm { position: fixed; inset: 0; z-index: 2147483000; }
.pxmm[hidden] { display: none; }
.pxmm-scrim { position: absolute; inset: 0; background: rgba(5, 0, 56, .42); opacity: 0; transition: opacity .25s ease; }
.pxmm-sheet { position: absolute; inset: 0 0 0 auto; width: 100%; height: 100%; height: 100dvh; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); outline: 0; }
.pxmm.is-open .pxmm-scrim { opacity: 1; }
.pxmm.is-open .pxmm-sheet { transform: none; }
@media (min-width: 600px) {
	.pxmm-sheet { width: 420px; box-shadow: -20px 0 50px -20px rgba(5, 0, 56, .35); }
}
@media (prefers-reduced-motion: reduce) {
	.pxmm-scrim, .pxmm-sheet { transition: none; }
}

.pxmm-bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--ds-line, #e7ebf0); box-sizing: content-box; }
.pxmm-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.pxmm-logo img { display: block; height: 30px; width: auto; }
.pxmm-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ds-soft, #f5f8fa); color: var(--ds-navy, #050038); cursor: pointer; }
/* Log in / avatar sit in the bar, left of the close button (they come from the module, see mobile.php) */
.pxmm-top { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: calc(max(12px, env(safe-area-inset-right)) + 52px); display: flex; align-items: center; gap: 8px; }
.pxmm-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--ds-r-pill, 999px); box-shadow: inset 0 0 0 1.5px var(--ds-line-strong, #d9dee5); color: var(--ds-navy, #050038); font-size: 15px; font-weight: 600; text-decoration: none; }
.pxmm-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-navy, #050038); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.pxmm-login:hover, .pxmm-avatar:hover { color: var(--ds-navy, #050038); box-shadow: inset 0 0 0 1.5px var(--ds-navy, #050038); }
.pxmm-avatar:hover { color: #fff; box-shadow: 0 0 0 3px var(--ds-green-soft, rgba(52, 199, 89, .14)); }

/* scroll area; the bottom bar sticks to its bottom */
.pxmm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }

.pxmm-search { position: relative; display: flex; align-items: center; margin: 0 0 6px; }
.pxmm-search svg { position: absolute; left: 14px; color: var(--ds-navy, #050038); pointer-events: none; }
.pxmm-search input { width: 100%; height: 48px; margin: 0; padding: 0 14px 0 42px; border: 0; border-radius: var(--ds-r-sm, 12px); background: var(--ds-soft, #f5f8fa); box-shadow: inset 0 0 0 1px var(--ds-line, #e7ebf0); color: var(--ds-text, #161616); font: inherit; font-size: 16px; /* 16px: iOS does not zoom */ -webkit-appearance: none; appearance: none; }
.pxmm-search input::placeholder { color: var(--ds-muted, #5b6474); opacity: 1; }
.pxmm-search input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ds-navy, #050038); background: #fff; }

.pxmm-nav { padding-bottom: 20px; }
.pxmm-sec { border-bottom: 1px solid var(--ds-line, #e7ebf0); }
.pxmm-head { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--ds-navy, #050038); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pxmm-head--link:hover { color: var(--ds-navy, #050038); }
.pxmm-chev { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-soft, #f5f8fa); transition: transform .2s ease, background-color .2s ease; }
.pxmm-chev::before { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.pxmm-head[aria-expanded="true"] .pxmm-chev { transform: rotate(180deg); background: var(--ds-navy, #050038); color: #fff; }
.pxmm-here { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-green, #34c759); }
@media (prefers-reduced-motion: reduce) { .pxmm-chev { transition: none; } }

.pxmm-panel { padding: 0 0 12px; }
.pxmm-panel[hidden] { display: none; }
.pxmm-group { margin: 10px 4px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-label, #636b78); }
.pxmm-list { list-style: none; margin: 0; padding: 0; }
.pxmm-link { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--ds-navy, #050038); font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.pxmm-link:hover, .pxmm-link:active { background: var(--ds-soft, #f5f8fa); color: var(--ds-navy, #050038); }
.pxmm-link[aria-current="page"] { background: var(--ds-green-soft, rgba(52, 199, 89, .14)); box-shadow: inset 3px 0 0 var(--ds-green, #34c759); }
.pxmm-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; color: var(--ds-green-ink, #15803d); font-size: 15px; font-weight: 600; text-decoration: none; }
.pxmm-more:hover { color: var(--ds-navy, #050038); }
.pxmm-more[aria-current="page"] { color: var(--ds-navy, #050038); }
.pxmm-arrow { font-size: 13px; }
.pxmm-badge { margin-left: 4px; padding: 2px 7px; border-radius: var(--ds-r-pill, 999px); background: var(--ds-green-soft, rgba(52, 199, 89, .14)); color: var(--ds-green-ink, #15803d); font-size: 11px; font-weight: 700; line-height: 1.4; }
.pxmm-badge--new { background: var(--ds-gold-bg, #fff4cc); color: var(--ds-gold-ink, #7a5600); }

.pxmm-foot { position: sticky; bottom: 0; z-index: 1; margin: auto calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left))); padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--ds-line, #e7ebf0); background: #fff; box-shadow: 0 -12px 24px -18px rgba(5, 0, 56, .18); }
.pxmm-btn { min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--ds-r-pill, 999px); font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; }
.pxmm-btn--line { box-shadow: inset 0 0 0 1.5px var(--ds-navy, #050038); color: var(--ds-navy, #050038); }
.pxmm-btn--line:hover { background: var(--ds-navy, #050038); color: #fff; }
.pxmm-btn--primary { background: var(--ds-green, #34c759); color: #fff; }
.pxmm-btn--primary:hover { background: var(--ds-green-hover, #2bb84f); color: #fff; }

/* while open: the page behind does not scroll (position is restored by the script) */
html.pxmm-lock, html.pxmm-lock body { overflow: hidden; }
html.pxmm-lock body { position: fixed; left: 0; right: 0; width: 100%; }

/* header below 992px: sticks to the top (the promo bar above it scrolls away), slides up while scrolling down and comes back
   on the first scroll up – the Menu button is never more than a flick away. --pxmm-topbar is set by the script. */
@media (max-width: 991.98px) {
	html #t4-header { position: sticky; top: calc(-1 * var(--pxmm-topbar, 0px)); z-index: 1020; transition: transform .25s ease; }
	#t4-header > .t4-section-inner, #t4-header header { background: #fff; }
	html.pxmm-hdr-stuck #t4-header header { box-shadow: 0 1px 0 var(--ds-line, #e7ebf0), 0 10px 24px -20px rgba(5, 0, 56, .35); }
	html.pxmm-hdr-hidden #t4-header { transform: translateY(-100%); }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
	html #t4-header { transition: none; }
}