/* ==========================================================================
   mobile-dropdown-menu.css
   Styles for the categorized mobile hamburger menu (DropDownMenuControl.ascx).
   Scoped under .mdm-* / .menu-dropdown so nothing leaks into desktop chrome.
   Moved out of the inline <style> in the control so it can be cached.
   ========================================================================== */

/* Categorized mobile menu (mdm-*) — only the areas built for mobile so far. */
.mdm-menu { padding: 4px 0 10px; }
.mdm-group {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #8a97a5;
    padding: 16px 16px 8px;
}
.mdm-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; text-decoration: none;
    border-top: 1px solid #eef1f4;
    -webkit-tap-highlight-color: transparent;
}
.mdm-group + .mdm-item { border-top: none; }
.mdm-item:active { background: #f3f6fa; }
.mdm-ico {
    flex: none; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #eef3f8; border-radius: 10px;
}
.mdm-ico svg { display: block; }
.mdm-ico img { display: block; width: 24px; height: 24px; object-fit: contain; }
/* Image icon that fills the whole tile — no blue background, no padding. */
.mdm-ico-img { background: none; padding: 0; overflow: hidden; }
.mdm-ico-img img { width: 100%; height: 100%; object-fit: cover; }
.mdm-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mdm-title { font-family: "Segoe UI", Arial, sans-serif; font-size: 17px; color: #164d7c; line-height: 1.2; }
.mdm-sub { font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; color: #8a97a5; line-height: 1.2; margin-top: 3px; }
.mdm-chev { flex: none; color: #164d7c; font-size: 22px; line-height: 1; padding-left: 8px; }
.mdm-footer { display: flex; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid #eef1f4; background: #fff; position: absolute; left: 0; right: 0; bottom: 0; }
.mdm-fbtn {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 8px; border: 1px solid #cfd8e3; border-radius: 12px; background: #fff;
    color: #164d7c; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 600;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.mdm-fbtn:active { background: #f3f6fa; }
.mdm-fbtn svg { flex: none; display: block; }
/* "Call Us" is a tel: link, so a global phone-link style can override its font/size/color.
   Pin both footer buttons (and their text) to match "Get a Quote": Segoe UI 15px / 600 / #164d7c. */
.mdm-footer .mdm-fbtn,
.mdm-footer .mdm-fbtn span {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #164d7c;
    line-height: 1;
}
/* When open, the drawer is fixed and its top is set in JS to sit just below the pinned mobile header (below the "Maps" bar); footer pinned, active view scrolls. */
.menu-dropdown.open { position: fixed; bottom: 0; height: auto; box-sizing: border-box; }
/* While the menu is open, lock the page behind it (iOS-safe: position:fixed with the
   saved scroll offset applied as `top` in JS) so swipes can't scroll-chain to the body
   — the chief cause of the inner menu not scrolling on iPhone Safari. */
body.mdm-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* While the menu is open, pin the mobile header rows to the top so the drawer stays anchored below the "Maps" bar even when the page is scrolled. */
body.mdm-open .mobile-top-header { position: fixed; top: 0; left: 0; right: 0; z-index: 130; background: #fff; }
body.mdm-open .mobile-header-nav { position: fixed; left: 0; right: 0; z-index: 130; background: #fff; } /* top set inline in JS */
.menu-dropdown.open .main-menu-selection {
    position: relative;
    height: 100%;
    /* Viewport-relative cap so the panel is bounded even when the height:100% chain
       doesn't resolve under a given master's base CSS (e.g. home.master). --mdm-top is
       refined in JS to the exact header height; 111px is the base-CSS fallback. */
    max-height: calc(100vh - var(--mdm-top, 111px));
    max-height: calc(100dvh - var(--mdm-top, 111px));
    box-sizing: border-box;
    overflow: hidden;
    /* Flex column: the active .mdm-view grows/scrolls and the footer takes real space at
       the bottom — so the last item (e.g. Finishing Options) can never hide behind the
       footer, regardless of footer height or the iOS home-indicator safe area. */
    display: flex;
    flex-direction: column;
}
.mdm-gosub { cursor: pointer; }
.mdm-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 12px 16px 6px; padding: 8px 14px;
    border: 1px solid #cfd8e3; border-radius: 10px; background: #fff;
    color: #164d7c; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mdm-back:active { background: #f3f6fa; }
.mdm-back-chev { font-size: 18px; line-height: 1; }
/* Neutralize legacy ".main-menu-selection>div" 56px-row styling for the new wrappers. */
.menu-dropdown .main-menu-selection > div.mdm-view { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 8px; border-bottom: 0; cursor: default; scrollbar-width: thin; scrollbar-color: #164d7c #e6ecf3; }
.menu-dropdown .main-menu-selection > div.mdm-view::-webkit-scrollbar { width: 8px; }
.menu-dropdown .main-menu-selection > div.mdm-view::-webkit-scrollbar-track { background: #e6ecf3; }
.menu-dropdown .main-menu-selection > div.mdm-view::-webkit-scrollbar-thumb { background: #164d7c; border-radius: 4px; }
.menu-dropdown .main-menu-selection > div.mdm-footer { position: static; flex: 0 0 auto; height: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-bottom: 0; cursor: default; justify-content: flex-start; }
.menu-dropdown .main-menu-selection > div.mdm-view:hover,
.menu-dropdown .main-menu-selection > div.mdm-view:active,
.menu-dropdown .main-menu-selection > div.mdm-footer:hover,
.menu-dropdown .main-menu-selection > div.mdm-footer:active { background: transparent; color: inherit; border-bottom: 0; }