/* DroneTrader primary nav + homepage house promo. Scoped to .dt-* classes, loaded after main.css. */
:root{--dt-b:#0B70C9;--dt-bd:#055B9A;--dt-bl:#EFF8FF;--dt-or:#F27C24;--dt-ord:#A84A0C;--dt-orl:#FFF3EA;--dt-ink:#1D2A38;--dt-mu:#536273;--dt-ln:#DCE6F0}

/* main.css gives header.site margin-bottom; nav row lives inside header so spacing is unchanged */
.dt-nav{border-top:1px solid var(--dt-ln);background:#fff}
.dt-nav__list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;min-height:52px}
.dt-nav__item{margin:0;padding:0}
.dt-nav__item--split{margin-left:auto}
.dt-nav__link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:10px;font-weight:800;font-size:15px;color:var(--dt-ink);text-decoration:none;transition:background .15s,color .15s}
.dt-nav__link:hover{background:var(--dt-bl);color:var(--dt-bd)}
.dt-nav__link[aria-current=page]{color:var(--dt-b);box-shadow:inset 0 -3px 0 var(--dt-b);border-radius:10px 10px 0 0}
.dt-nav__link--adv{color:var(--dt-ord);background:var(--dt-orl);box-shadow:inset 0 0 0 1.5px rgba(242,124,36,.45)}
.dt-nav__link--adv:hover{background:var(--dt-ord);color:#fff}
.dt-nav__link--adv[aria-current=page]{background:var(--dt-ord);color:#fff;box-shadow:none;border-radius:10px}
.dt-nav__ico{flex:none}
.dt-nav__link:focus-visible,.dt-menu-btn:focus-visible,.dt-mnav a:focus-visible,.dt-promo a:focus-visible{outline:3px solid var(--dt-b);outline-offset:2px}

/* mobile toggle: real button, 44px target */
.dt-menu-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-10px;margin-right:-10px;background:none;border:0;padding:0;cursor:pointer}
.dt-mnav{padding:8px 0 4px!important}
.dt-mnav ul{position:static!important;transform:none!important;padding:0!important;height:auto!important;background:none!important}
.dt-mnav li{padding:0!important}
.dt-mnav a{display:flex;align-items:center;min-height:44px;font-weight:900;color:var(--dt-ink)}
.dt-mnav a.dt-mnav__adv{margin-top:6px;padding:0 14px;border-radius:10px;color:var(--dt-ord);background:var(--dt-orl)}

/* homepage house promo */
.dt-promo{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--dt-ln),0 4px 14px rgba(25,58,90,.06);min-height:120px}
.dt-promo__art{align-self:stretch;display:flex;align-items:center;justify-content:center;padding:12px;background:linear-gradient(135deg,#0B70C9,#055B9A 75%,#193A5A)}
.dt-promo__art svg{width:100%;max-width:110px;height:auto}
.dt-promo__drone{animation:dt-hover 3.2s ease-in-out infinite}
@keyframes dt-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dt-promo__copy{padding:20px 24px}
.dt-promo__title{margin:0 0 4px;font-size:20px;line-height:1.25;font-weight:900;color:var(--dt-ink)}
.dt-promo__text{margin:0;font-size:15px;line-height:1.5;color:var(--dt-mu)}
.dt-promo__actions{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:16px 24px 16px 0}
.dt-promo__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:10px;background:var(--dt-b);color:#fff!important;font-weight:800;font-size:15px;text-decoration:none!important;white-space:nowrap;transition:background .15s}
.dt-promo__btn:hover{background:var(--dt-bd)}
.dt-promo__link{display:inline-flex;align-items:center;min-height:36px;font-size:14px;font-weight:700;color:var(--dt-b)}
@media (max-width:767px){
  .dt-promo{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:20px;border-radius:14px;min-height:0;align-items:center}
  .dt-promo__art{align-self:center;width:56px;height:56px;padding:6px;border-radius:12px}
  .dt-promo__copy{display:contents}
  .dt-promo__title{margin:0;font-size:18px;line-height:1.3}
  .dt-promo__text{grid-column:1/-1;font-size:15px}
  .dt-promo__actions{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px;padding:2px 0 0}
  .dt-promo__btn{width:100%;white-space:normal;text-align:center}
  .dt-promo__link{justify-content:center;min-height:44px;text-align:center}
}
@media (max-width:399px){
  .dt-promo{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px}
  .dt-promo__art{width:44px;height:44px;padding:4px;border-radius:10px}
  .dt-promo__title{font-size:17px}
  .dt-promo__text{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.dt-promo__drone{animation:none}.dt-nav__link,.dt-promo__btn{transition:none}}

/* Emphasis on "your" in the advertise label */
.dt-nav__lbl { display: inline; white-space: nowrap; }
.dt-nav__lbl strong { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Closed mobile menu: remove from tab order/AT (Alpine :class or plain .open fallback) */
#dt-mobile-menu:not(.open){visibility:hidden;pointer-events:none;overflow:hidden;transition:visibility 0s linear .25s}
#dt-mobile-menu.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
@media (prefers-reduced-motion:reduce){#dt-mobile-menu:not(.open){transition:none}}

/* Mobile polish 2026-10-21: compact sticky header, tablet menu, close button, scroll lock, 44px targets */
html.dt-menu-open,html.dt-menu-open body{overflow:hidden}
@media (max-width:1023px){
  header.site div.header-wrapper{padding:12px 0 14px}
  header.site div.header-wrapper img.logo{width:172px;margin-bottom:12px}
  header.site .dt-menu-cell{margin-bottom:12px;display:flex;align-items:center;justify-content:flex-end}
  .dt-menu-btn{margin-top:0;border-radius:12px;background:var(--dt-bl)}
}
/* main.css hides .mobile-menu from 768px, but the toggle shows until 1024px: keep it working on tablets */
#dt-mobile-menu.open{display:block}
@media (min-width:1024px){#dt-mobile-menu{display:none!important}}
#dt-mobile-menu > ul{padding-top:64px;transform:translateX(100%)}
#dt-mobile-menu.open > ul{transform:translateX(0)}
@media (min-width:640px){#dt-mobile-menu > ul{left:auto;width:400px;box-shadow:-12px 0 32px rgba(25,58,90,.18)}}
#dt-mobile-menu > ul > li.dt-mclose{position:absolute;top:10px;right:12px;padding:0}
.dt-mclose button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--dt-bl);color:var(--dt-ink);cursor:pointer}
.dt-mclose button:hover{background:#DCEEFD}
.dt-mclose button:focus-visible{outline:3px solid var(--dt-b);outline-offset:2px}
#dt-mobile-menu > ul > li.dt-mcat{padding:0}
#dt-mobile-menu > ul > li.dt-mcat > a{display:flex;align-items:center;min-height:44px;color:var(--dt-ink)}
#dt-mobile-menu > ul > li.dt-mcat > a:focus-visible{outline:3px solid var(--dt-b);outline-offset:-3px}
/* "See newest ads" style section links: bigger tap area, same layout */
.text-right.flex-grow > a.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0;padding:0 2px}
/* panel width + narrow-phone wrap for the advertise item; no default focus ring on the auto-focused close button */
@media (max-width:639px){#dt-mobile-menu > ul{left:auto;width:min(340px,88vw)}}
.dt-mnav a.dt-mnav__adv{padding:8px 14px}
.dt-mnav a.dt-mnav__adv .dt-nav__lbl{white-space:normal}
.dt-mclose button:focus{outline:none}
.dt-mclose button:focus-visible{outline:3px solid var(--dt-b);outline-offset:2px}