/* Local Mobile Drug Testing - global site CSS (v1, Phase 2)
   Loaded by wp-content/novamira-sandbox/lmdt-site.php. Design tokens live in Elementor global variables. */

:root {
  --lmdt-header-h: 88px;
  --lmdt-bottom-bar-h: 64px;
}
html, body { overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Focus: visible, high-contrast, everywhere */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0F2744; outline-offset: 3px; border-radius: 4px;
}
.lmdt-dark a:focus-visible, .lmdt-dark button:focus-visible, .lmdt-dark summary:focus-visible,
.lmdt-header.is-transparent a:focus-visible, .lmdt-header.is-transparent button:focus-visible { outline-color: #FFFFFF; }

/* Skip link (Hello Elementor renders it; make sure it is visible on focus) */
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 12px 16px; background: #0F2744; color: #fff; border-radius: 8px; }

/* ---------- Flex row children ----------
   V4 nested flex containers default to width:100%; inside a row that overflows. */
.row > .e-flexbox-base, .row > .e-div-block-base, .row > .e-grid-base { width: auto; }
.row > .e-flexbox-base:not(.icon-circle) { flex: 1 1 0%; min-width: 0; }
.lmdt-header-inner .e-flexbox-base { width: auto; }
.lmdt-header-inner > .lmdt-nav { flex: 1 1 0%; min-width: 0; }
.card-feature-light > .e-flexbox-base:not(.icon-circle), .card-person > .e-flexbox-base:not(.icon-circle), .lmdt-timeline > * > .e-flexbox-base { flex: 1 1 0%; min-width: 0; width: auto; }
.icon-circle { flex: 0 0 auto; width: 56px; }
.card-person > .icon-circle, .card-feature-light > .icon-circle { width: 56px; }

/* ---------- Header ---------- */
/* The Elementor location wrapper is what sticks; the inner <header> carries the visual state. */
.elementor-location-header { position: sticky; top: 0; z-index: 900; }
.lmdt-header { background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(15,39,68,0.06); transition: background-color .2s ease, box-shadow .2s ease; }
.lmdt-header .lmdt-header-inner { transition: min-height .2s ease; }
.lmdt-header.is-scrolled .lmdt-header-inner { min-height: 72px !important; }
@media (max-width: 767px) { .lmdt-header.is-scrolled .lmdt-header-inner { min-height: 60px !important; } }
.lmdt-header.is-scrolled { box-shadow: 0 8px 24px -12px rgba(15,39,68,0.18); }
.lmdt-logo-light { display: none; }

/* Transparent over the homepage hero (body.lmdt-dark-hero set by PHP on the front page) */
body.lmdt-dark-hero .elementor-location-header { position: fixed; left: 0; right: 0; top: 0; }
body.lmdt-dark-hero .lmdt-header.is-transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
@media (max-width: 1024px) {
  body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-icon-light { background-color: rgba(255,255,255,0.14); border-radius: 999px; padding: 12px; width: 44px !important; height: 44px !important; }
  body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-icon-light + * , body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-icon-dark + .lmdt-phone-icon-light { box-shadow: none; }
}
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-logo-dark { display: none; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-logo-light { display: block; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-wordmark { color: #fff; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-nav .menu-item > a,
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-number { color: #fff; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-label { color: #14B8A6; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-icon-dark { display: none !important; }
body.lmdt-dark-hero .lmdt-header.is-transparent .lmdt-phone-icon-light { display: block !important; }
.lmdt-phone-icon-light { display: none !important; }
body.lmdt-dark-hero .lmdt-header.is-transparent .elementor-menu-toggle { color: #fff; }

/* Nav menu (Elementor Pro nav-menu widget) */
.lmdt-nav .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; }
.lmdt-nav .elementor-nav-menu--main .elementor-item { font-family: Inter, sans-serif; font-weight: 500; font-size: 15px; color: #0F2744; padding: 10px 11px; white-space: nowrap; }
.lmdt-nav .elementor-nav-menu--main .elementor-item:hover, .lmdt-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #0F766E; }
.lmdt-nav .elementor-nav-menu--main .elementor-item.elementor-item-active::after { background: #14B8A6; }
.lmdt-nav .elementor-nav-menu--dropdown { background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(15,39,68,0.22); border: 1px solid #E2E8F0; overflow: hidden; }
.lmdt-nav .elementor-nav-menu--dropdown a { font-family: Inter, sans-serif; font-size: 15px; color: #0F2744; padding: 12px 20px; }
.lmdt-nav .elementor-nav-menu--dropdown a:hover { background: #F8FAFC; color: #0F766E; }
.lmdt-nav .elementor-nav-menu--main .elementor-nav-menu--dropdown { min-width: 320px; margin-top: 12px; }
.lmdt-nav .elementor-menu-toggle { width: 44px; height: 44px; border-radius: 999px; color: #0F2744; }
.lmdt-nav .elementor-menu-toggle:hover, .lmdt-nav .elementor-menu-toggle.elementor-active { color: #0F766E; }
/* Mobile dropdown panel: full-width fixed overlay under the header (Elementor's stretch logic
   positions it relative to the nav widget, which sits at the far right of a flex header). */
@media (max-width: 1024px) {
  .lmdt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; left: 0 !important; right: 0 !important; top: 72px !important; width: 100% !important; max-height: calc(100vh - 72px); overflow-y: auto; margin: 0 !important; transform: none !important; background: #fff; border-radius: 0 0 20px 20px; box-shadow: 0 24px 48px -16px rgba(15,39,68,0.28); z-index: 899; padding: 8px 0 16px; }
  .lmdt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container li { border: 0; }
}
@media (max-width: 767px) {
  .lmdt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { top: 64px !important; max-height: calc(100vh - 64px); }
}
.lmdt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container a { padding: 14px 24px; font-size: 17px; font-weight: 600; }
.lmdt-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu a { padding-left: 40px; font-size: 15px; font-weight: 500; }

/* Footer menus (Elementor Pro nav-menu widget, vertical) */
.lmdt-footer-menu .elementor-nav-menu--main .elementor-item { font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; color: #CBD5E1; padding: 8px 0; line-height: 1.4; }
.lmdt-footer-menu .elementor-nav-menu--main .elementor-item:hover, .lmdt-footer-menu .elementor-nav-menu--main .elementor-item:focus { color: #FFFFFF; text-decoration: underline; text-decoration-color: #14B8A6; text-underline-offset: 4px; }
.lmdt-footer-menu .elementor-nav-menu--layout-horizontal .elementor-item { padding: 8px 12px; }
.lmdt-footer-menu .elementor-nav-menu--layout-horizontal .elementor-item:first-child { padding-left: 0; }
.lmdt-footer-menu .elementor-menu-toggle { display: none; }
.lmdt-footer-menu nav.elementor-nav-menu--dropdown { display: none; }

/* Hero headline accent line */
.lmdt-hero h1 em { font-style: normal; color: #14B8A6; }

/* Mobile bottom action bar */
.lmdt-bottom-bar { display: none !important; }
@media (max-width: 1024px) {
  .lmdt-bottom-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -8px 24px -12px rgba(15,39,68,0.2); }
  body:not(.page-request-testing) { padding-bottom: calc(var(--lmdt-bottom-bar-h) + env(safe-area-inset-bottom)); }
  body.page-request-testing .lmdt-bottom-bar { display: none !important; }
  body.lmdt-menu-open .lmdt-bottom-bar { display: none !important; }
}

/* ---------- Hero ---------- */
.lmdt-hero { position: relative; isolation: isolate; }
.lmdt-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lmdt-hero-media img, .lmdt-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lmdt-hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,39,68,0.86) 0%, rgba(15,39,68,0.72) 45%, rgba(15,39,68,0.40) 100%); }
@media (max-width: 767px) { .lmdt-hero-overlay { background: linear-gradient(180deg, rgba(15,39,68,0.82) 0%, rgba(15,39,68,0.78) 100%); } }

/* Teal glow on navy sections */
.lmdt-glow { position: relative; overflow: hidden; }
.lmdt-glow::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; right: -20vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,0.16) 0%, rgba(20,184,166,0) 60%); pointer-events: none; }

/* ---------- Process timeline ---------- */
.lmdt-timeline { position: relative; }
.lmdt-timeline::before { content: ""; position: absolute; left: 22px; right: 22px; top: 46px; height: 2px; background: #E2E8F0; transform-origin: left center; }
@media (max-width: 1024px) { .lmdt-timeline::before { left: 46px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; transform-origin: top center; } }
@media (max-width: 767px) { .lmdt-timeline::before { left: 46px; } }
.lmdt-timeline.is-visible::before { animation: lmdt-draw .7s ease-in-out both; }
@keyframes lmdt-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1024px) { @keyframes lmdt-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } } }

/* ---------- Snap-scroll rows on mobile ---------- */
@media (max-width: 767px) {
  .lmdt-snap { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -24px; padding: 4px 24px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lmdt-snap::-webkit-scrollbar { display: none; }
  .lmdt-snap > * { flex: 0 0 82vw; scroll-snap-align: start; }
  .lmdt-scroll-row { display: flex !important; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -24px; padding: 0 24px 8px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .lmdt-scroll-row::-webkit-scrollbar { display: none; }
  .lmdt-scroll-row > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- Test selector ---------- */
.lmdt-sel-step { display: none !important; }
.lmdt-sel-step.is-active { display: flex !important; }
.lmdt-sel-opt { cursor: pointer; text-align: left; justify-content: flex-start; }
.lmdt-sel-opt[aria-pressed="true"] { border-color: #14B8A6 !important; background: #CCFBF1 !important; }
.lmdt-sel-result { display: none !important; }
.lmdt-sel-result.is-active { display: flex !important; }
.lmdt-sel-dot { width: 10px; height: 10px; border-radius: 999px; background: #CBD5E1; transition: background .2s, transform .2s; }
.lmdt-sel-dot.is-done { background: #14B8A6; }
.lmdt-sel-dot.is-current { background: #F97316; transform: scale(1.3); }
.lmdt-sel-back { display: none; }
.lmdt-sel-back.is-visible { display: inline-flex; }

/* ---------- Accordion ---------- */
.lmdt-faq details { border-bottom: 1px solid #E2E8F0; }
.lmdt-faq summary { list-style: none; }
.lmdt-faq summary::-webkit-details-marker { display: none; }
.lmdt-faq details[open] .lmdt-faq-icon { transform: rotate(45deg); }
.lmdt-faq .lmdt-faq-icon { transition: transform .25s ease; }

/* ---------- Reveal helpers (used with Elementor Interactions; degrade to visible) ---------- */
.lmdt-word { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.lmdt-words.is-visible .lmdt-word { opacity: 1; transform: none; }
html.lmdt-reduced-motion .lmdt-word { opacity: 1; transform: none; transition: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .lmdt-timeline::before { transform: none !important; }
}

/* ---------- Misc ---------- */
.lmdt-map { width: 100%; height: auto; display: block; }
.lmdt-portrait { aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 767px) { .lmdt-portrait-wrap { max-width: 70%; margin: 0 auto; } }
.lmdt-cv-auto { content-visibility: auto; contain-intrinsic-size: 1px 800px; }
