/* =============================================================
   MYA777 — shared chrome: utility top bar + route-map prefooter
   Depends on mya777-design-system.css tokens (queued before this file).
   ============================================================= */

/* ---- utility top bar ---- */
.mk-topbar{
  position:sticky; top:0; z-index:45; background:rgba(255,255,255,0.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--mk-border);
  box-shadow:var(--mk-shadow-sm);
}
.mk-topbar .mk-container{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap;
}
.mk-topbar__brand{
  display:inline-flex; align-items:center; gap:9px; font-weight:800;
  font-size:19px; letter-spacing:-0.02em; color:var(--mk-ink); text-decoration:none;
}
.mk-topbar__brand img{ width:32px; height:32px; border-radius:9px; object-fit:contain; }
.mk-topbar__brand:hover{ text-decoration:none; color:var(--mk-coral-deep); }
.mk-topbar__nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mk-topbar__nav a{
  font-size:14px; font-weight:600; color:var(--mk-ink-soft);
  padding:7px 12px; border-radius:var(--mk-radius-pill); white-space:nowrap;
}
.mk-topbar__nav a:hover{ background:var(--mk-bg-alt); color:var(--mk-ink); text-decoration:none; }
.mk-btn-sm{ font-size:14px; padding:9px 18px; }
@media (max-width:900px){
  .mk-topbar__nav{ display:none; }
  .mk-topbar .mk-container{ gap:10px; }
}
@media (max-width:560px){
  .mk-topbar__brand span{ font-size:17px; }
  .mk-btn-sm{ padding:8px 14px; font-size:13px; }
}

/* ---- route-map prefooter ---- */
.mk-prefooter{
  background:var(--mk-bg-alt); border-top:1px solid var(--mk-border);
  padding:48px 0 30px; font-family:var(--mk-font-ui); margin-top:40px;
}
.mk-prefooter__brandrow{ margin-bottom:26px; }
.mk-prefooter__brandname{
  margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-0.01em; color:var(--mk-ink);
}
.mk-prefooter__tagline{
  margin:0; font-size:14px; color:var(--mk-muted); max-width:74ch; line-height:1.7;
}
.mk-prefooter__grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:26px;
  padding-bottom:30px; border-bottom:1px solid var(--mk-border);
}
.mk-prefooter__coltitle{
  margin:0 0 10px; font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--mk-gold-deep);
}
.mk-prefooter__col ul{ list-style:none; margin:0; padding:0; }
.mk-prefooter__col li{ margin-bottom:7px; }
.mk-prefooter__col a{ font-size:14px; color:var(--mk-ink-soft); line-height:1.5; }
.mk-prefooter__col a:hover{ color:var(--mk-coral-deep); }
.mk-prefooter__legal{ padding-top:22px; }
.mk-prefooter__legal p{
  font-size:13px; line-height:1.75; color:var(--mk-muted); margin:0 0 8px; max-width:96ch;
}
.mk-prefooter__note{ font-weight:600; color:var(--mk-ink-soft); }
.mk-prefooter__socialrow{
  padding:24px 0; margin-bottom:2px; border-bottom:1px solid var(--mk-border);
}
.mk-prefooter__socialrow .mk-prefooter__social{ margin:0; }
.mk-prefooter__socialnote{
  font-size:13px; line-height:1.75; color:var(--mk-muted); margin:12px 0 0; max-width:96ch;
}
.mk-prefooter__addr{ font-style:normal; }
@media (max-width:980px){ .mk-prefooter__grid{ grid-template-columns:repeat(3,1fr); gap:22px; } }
@media (max-width:640px){ .mk-prefooter__grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:400px){ .mk-prefooter__grid{ grid-template-columns:1fr; } }
