/* Pragmatic mobile/tablet overrides for the recovered Duda layout. * Loaded after the cached Duda CSS so these rules win where they touch the same * properties. We use !important freely because Duda's framework does the same. */ /* Apply at all viewport sizes ----------------------------------------------- */ body { overflow-x: hidden; } img, video, iframe { max-width: 100%; height: auto; } /* Mobile (<= 767px) — phones ------------------------------------------------ */ @media (max-width: 767px) { /* Duda hard-codes .dmInner { min-width: 768px } which forces horizontal * scroll on phones. Unlock it. Same for the sticky header containers. */ .dmInner, body .dmInner, #dm .dmInner { min-width: 0 !important; width: 100% !important; } #dm .hasStickyHeader .dmInner div#desktopHeaderBox, #dm .hasStickyHeader .dmInner div.dmHeaderContainer { min-width: 0 !important; width: 100% !important; } /* Stack Duda's column wrappers vertically and let them go full width */ .dmRespColsWrapper { display: flex !important; flex-direction: column !important; flex-wrap: wrap !important; width: 100% !important; } .dmRespCol, .dmRespCol[class*="large-"], .dmRespCol[class*="medium-"], .dmRespCol[class*="small-"] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Rows: fluid, padded, no horizontal overflow */ .dmRespRow, .dmRespRow.fullBleedMode { width: 100% !important; min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* Show mobile-only elements, hide medium/large-only */ body .hide-for-large { display: block !important; } body .hide-for-medium, body .hide-for-medium-up { display: none !important; } body .show-for-small, body .show-for-small-only { display: block !important; } body .hide-for-small { display: none !important; } /* Mobile nav (DOM: .hide-for-large). site-mobile.js relocates the element * to be a direct child of so position:fixed actually anchors to * the viewport (transformed ancestors otherwise turn it into * position:absolute). When closed it sits at translateY(-200%) — well * above the viewport — and slides down to translateY(0) when body has * .mh-open. !important everywhere because Duda's CSS uses ID-qualified * selectors with !important too. */ body .main-navigation.hide-for-large { display: block !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: none !important; min-width: 0 !important; height: 100vh !important; margin: 0 !important; background: #fff !important; z-index: 2147483646 !important; transform: translateY(-200%) !important; transition: transform .35s ease !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 80px 0 32px !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; will-change: transform; } body.mh-open .main-navigation.hide-for-large { transform: translateY(0) !important; } /* Stack the menu items vertically inside the full-screen overlay */ .main-navigation.hide-for-large .unifiednav__container, .main-navigation.hide-for-large ul { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; } .main-navigation.hide-for-large .unifiednav__item-wrap { width: 100% !important; display: block !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; background: transparent !important; } .main-navigation.hide-for-large .unifiednav__item { display: block !important; padding: 16px 24px !important; width: 100% !important; box-sizing: border-box !important; color: #1c1c1c !important; background: transparent !important; text-decoration: none !important; font-size: 18px !important; line-height: 1.4 !important; } .main-navigation.hide-for-large .nav-item-text { color: inherit !important; background: transparent !important; } .main-navigation.hide-for-large .unifiednav__container_sub-nav { padding-left: 0 !important; background: #f7f7f7 !important; } .main-navigation.hide-for-large .unifiednav__container_sub-nav .unifiednav__item { font-size: 16px !important; color: #333 !important; padding-left: 40px !important; } /* Accordion: collapse submenus by default; expand when the parent

* has .mh-expanded (toggled by site-mobile.js). Override our own * earlier display:flex on `ul` selector. */ .main-navigation.hide-for-large li.mh-has-sub > ul { display: none !important; } .main-navigation.hide-for-large li.mh-has-sub.mh-expanded > ul { display: flex !important; } /* Chevron flips when expanded */ .main-navigation.hide-for-large li.mh-has-sub > a .icon-angle-down { display: inline-block !important; transition: transform .2s ease; margin-left: 6px; } .main-navigation.hide-for-large li.mh-has-sub.mh-expanded > a .icon-angle-down { transform: rotate(180deg); } /* The injected duplicate-of-parent link (the user's "first item is the * link it is" requirement). Visually distinguish it slightly. */ .main-navigation.hide-for-large li.mh-self > a { font-weight: 600 !important; color: #1654a3 !important; } .main-navigation.hide-for-large li.mh-self > a .icon { display: none !important; } /* If a different (non-mobile) main-navigation is also rendered in DOM, * hide it on phones so it can't bleed off-screen alongside our overlay. */ body .main-navigation:not(.hide-for-large) { display: none !important; } /* Hamburger button — fixed top-right, only at mobile widths */ #mh-toggle { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; background: rgba(255,255,255,.96); border: 1px solid rgba(0,0,0,.12); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 2147483647 !important; cursor: pointer; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; -webkit-tap-highlight-color: transparent; } #mh-toggle span { display: block; height: 2.5px; width: 22px; background: #1654a3; border-radius: 2px; transition: transform .22s ease, opacity .12s ease; } body.mh-open #mh-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } body.mh-open #mh-toggle span:nth-child(2) { opacity: 0; } body.mh-open #mh-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Lock scroll while overlay is open. No backdrop needed — the menu fills * the viewport. */ body.mh-open { overflow: hidden !important; } /* Headlines: scale down so they don't overflow */ h1 { font-size: 28px !important; line-height: 1.2 !important; word-wrap: break-word; } h2 { font-size: 22px !important; line-height: 1.3 !important; word-wrap: break-word; } h3 { font-size: 18px !important; line-height: 1.35 !important; } h4 { font-size: 16px !important; line-height: 1.4 !important; } /* Hero / banner: don't lock to a fixed height — let content size them */ .dmFullRowRespTmpl, [class*="hero"], [class*="banner"] { min-height: 0 !important; height: auto !important; } /* Form fields full width */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select, button { max-width: 100% !important; box-sizing: border-box !important; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select { width: 100% !important; } /* Logo in header */ .dmHeaderContainer img, .dmLogoContainer img { max-height: 60px !important; width: auto !important; } /* Fixed-attachment backgrounds break on iOS — fall back to scroll */ [style*="background-attachment:fixed"], [style*="background-attachment: fixed"] { background-attachment: scroll !important; } /* Disable any pointer-locking transforms used in animated entrances that * leave content invisible if the desktop animation runtime never fires */ [style*="visibility: hidden"][style*="opacity: 1"] { visibility: visible !important; } } /* Hide hamburger above mobile breakpoint */ @media (min-width: 768px) { #mh-toggle { display: none !important; } } /* Tablet (768–1024px) ------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .dmRespColsWrapper { flex-wrap: wrap !important; } body .hide-for-medium { display: block !important; } body .hide-for-large { display: none !important; } .main-navigation.hide-for-large .unifiednav__item { padding: 12px 14px !important; } }