/* MMOB – mobiel drill-down menu */ .mmob { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: #1a1a1a; overscroll-behavior: contain; } .mmob[hidden] { display: none; } /* Balk */ .mmob__bar { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; padding: 12px; padding-top: calc( 12px + env( safe-area-inset-top, 0px ) ); border-bottom: 1px solid #e5e5e5; } .mmob__search { flex: 1; margin: 0; } .mmob__search form input[type="search"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; /* voorkomt inzoomen op iOS */ background: #fff; color: inherit; } /* Ajax Search Pro: het resultatenpaneel wordt naar het eind van verplaatst en moet dus bóven het menu (z-index 99999) uitkomen. */ .asp_r, .asp_r_full, div[id^="ajaxsearchprores"] { z-index: 100001 !important; } .mmob .asp_w, .mmob div[id^="ajaxsearchpro"] { width: 100%; max-width: 100%; margin: 0; } .mmob__close { flex: 0 0 auto; width: 48px; min-height: 48px; padding: 0; border: 0; background: none; color: inherit; font-size: 30px; line-height: 1; cursor: pointer; } /* Panels */ .mmob__track { display: flex; flex: 1; min-height: 0; transition: transform 0.25s ease; will-change: transform; } .mmob__panel { background-color:#fafcff; color:var(--contrast); flex: 0 0 100%; margin: 0; padding: 0; padding-bottom: env( safe-area-inset-bottom, 0px ); list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mmob__panel[hidden] { display: none; } .mmob__panel li { display: flex; align-items: stretch; margin: 0; border-bottom: 1px solid #f0f0f0; } .mmob__panel a, .mmob__rowbtn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; } .mmob__chev { flex: 0 0 auto; width: 56px; min-height: 52px; padding: 0; border: 0; border-left: 1px solid #f0f0f0; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; } .mmob__back { flex: 1; min-height: 52px; padding: 0 16px; border: 0; background: #fafafa; color: #666; font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .mmob__all { font-weight: 600; } .mmob a:focus-visible, .mmob button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } @media ( prefers-reduced-motion: reduce ) { .mmob__track { transition: none; } } @media ( prefers-color-scheme: dark ) { .mmob:not( [data-theme="light"] ) { background: #16181c; color: #f3f3f3; } .mmob:not( [data-theme="light"] ) .mmob__bar, .mmob:not( [data-theme="light"] ) .mmob__panel li, .mmob:not( [data-theme="light"] ) .mmob__chev { border-color: #2b2f36; } .mmob:not( [data-theme="light"] ) .mmob__back { background: #1d2026; color: #aab; } .mmob:not( [data-theme="light"] ) .mmob__search form input[type="search"] { background: #1d2026; border-color: #2b2f36; color: inherit; } }