/* MAYDAY MIND · Corporate Branding Patch v1.2.0
   Integrates the supplied MM logo system across header, landing, footer, PWA and offline UI. */

:root{
  --mm-brand-cyan:#12c9f3;
  --mm-brand-green:#72ef22;
  --mm-brand-navy:#040e1c;
}

/* ---------- Global header brand ---------- */
.brand.mm-brand{
  gap:10px;
  min-width:0;
  letter-spacing:0;
}
.mm-brand-mark{
  width:36px;
  height:36px;
  flex:0 0 36px;
  object-fit:contain;
  filter:drop-shadow(0 0 9px rgba(18,201,243,.23)) drop-shadow(0 0 11px rgba(114,239,34,.14));
}
.mm-brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.mm-brand-wordmark{
  width:154px;
  max-width:32vw;
  height:auto;
  display:block;
}
.mm-brand-tagline{
  margin-top:2px;
  color:#7897a8;
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mm-brand:hover .mm-brand-mark{filter:drop-shadow(0 0 13px rgba(18,201,243,.38)) drop-shadow(0 0 14px rgba(114,239,34,.24))}

/* ---------- Landing lockup ---------- */
.landing-brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  padding:8px 12px 8px 8px;
  border:1px solid rgba(103,232,249,.13);
  border-radius:14px;
  background:linear-gradient(100deg,rgba(7,22,33,.72),rgba(7,22,33,.25));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
}
.landing-brand-lockup .mm-lock-mark{
  width:42px;
  height:42px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(18,201,243,.22));
}
.landing-brand-lockup .mm-lock-wordmark{width:min(190px,45vw);height:auto;display:block}
.landing-brand-lockup .mm-lock-sub{
  display:block;
  margin-top:3px;
  color:#6f91a0;
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ---------- Radar: brand becomes part of the instrument ---------- */
.landing-radar{isolation:isolate}
.landing-radar-logo{
  position:absolute;
  z-index:3;
  width:41%;
  height:auto;
  left:50%;
  top:50%;
  transform:translate(-50%,-45%);
  opacity:.22;
  pointer-events:none;
  filter:drop-shadow(0 0 17px rgba(18,201,243,.17)) drop-shadow(0 0 22px rgba(114,239,34,.12));
  mix-blend-mode:screen;
}
.landing-radar-card:hover .landing-radar-logo{opacity:.30;filter:drop-shadow(0 0 21px rgba(18,201,243,.25)) drop-shadow(0 0 25px rgba(114,239,34,.18))}
.landing-radar-card .radar-aircraft{display:none}

/* ---------- Branded status label below the radar ---------- */
.mm-radio-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:7px;
  color:#668999;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.mm-radio-brand img{width:18px;height:18px;object-fit:contain;opacity:.88}
.mm-radio-brand b{color:#87aaba;font-weight:800}

/* ---------- Branded CTA watermark ---------- */
.landing-cta-brandmark{
  position:absolute!important;
  z-index:1!important;
  width:240px;
  height:240px;
  object-fit:contain;
  right:4%;
  top:50%;
  transform:translateY(-50%);
  opacity:.055;
  pointer-events:none;
  filter:grayscale(.05) saturate(1.2);
}
.landing-cta-box:hover .landing-cta-brandmark{opacity:.08}

/* ---------- Footer ---------- */
.mm-footer-brand{display:flex;align-items:center;gap:14px;min-width:230px}
.mm-footer-brand .mm-footer-mark{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(18,201,243,.15))}
.mm-footer-brand .mm-footer-wordmark{display:block;width:210px;max-width:42vw;height:auto}
.mm-footer-brand .mm-footer-copy{display:flex;flex-direction:column;gap:3px}
.mm-footer-brand .mm-footer-mini{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#668b9b;font-weight:800}

/* ---------- Offline UI ---------- */
.offline-brand-lockup{display:inline-flex;align-items:center;gap:10px;color:#fff}
.offline-brand-lockup img:first-child{width:44px;height:44px;object-fit:contain}
.offline-brand-lockup img:last-child{width:190px;max-width:55vw;height:auto}

/* ---------- Authenticated screens: subtle brand continuity ---------- */
.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(18,201,243,.22),rgba(114,239,34,.16),transparent);
  pointer-events:none;
}

@media(max-width:720px){
  .mm-brand-mark{width:32px;height:32px;flex-basis:32px}
  .mm-brand-wordmark{width:132px;max-width:39vw}
  .mm-brand-tagline{display:none}
  .landing-brand-lockup{margin-bottom:14px}
  .landing-brand-lockup .mm-lock-mark{width:36px;height:36px}
  .landing-brand-lockup .mm-lock-wordmark{width:min(165px,49vw)}
  .landing-cta-brandmark{width:180px;height:180px;right:-18px}
  .mm-footer-brand .mm-footer-wordmark{width:190px;max-width:60vw}
}

@media(max-width:460px){
  .mm-brand-copy{display:none}
  .mm-brand-mark{width:38px;height:38px;flex-basis:38px}
  .landing-brand-lockup .mm-lock-sub{display:none}
  .landing-radar-logo{width:44%}
  .mm-footer-brand{min-width:0}
  .mm-footer-brand .mm-footer-mark{width:42px;height:42px}
  .mm-footer-brand .mm-footer-wordmark{width:178px;max-width:64vw}
}

@media(prefers-reduced-motion:reduce){
  .landing-radar-logo,.landing-cta-brandmark{transition:none!important}
}

/* MAYDAY MIND · responsive brand refinement v1.2.2 */
@media(max-width:460px){
  /* Keep a compact wordmark visible instead of leaving an isolated icon. */
  .mm-brand-copy{display:flex!important}
  .mm-brand-mark{width:34px!important;height:34px!important;flex-basis:34px!important}
  .mm-brand-wordmark{width:108px!important;max-width:31vw!important}
  .mm-brand-tagline{display:none!important}
}
@media(max-width:350px){
  .mm-brand-wordmark{width:94px!important;max-width:29vw!important}
  .mm-brand-mark{width:31px!important;height:31px!important;flex-basis:31px!important}
}