/* Shared mobile layout for Hurricane Feed */
html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img{max-width:100%}
.leaflet-container img,.leaflet-container svg,.leaflet-container canvas{max-width:none}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
nav,.top{padding-top:env(safe-area-inset-top,0px)}
footer{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}

.menu{
  display:none;width:42px;height:42px;flex:none;margin-left:auto;
  border-radius:10px;border:1px solid var(--line,rgba(120,160,220,.16));
  background:var(--panel,#101a2e);cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;padding:0;color:var(--ink,#eaf1ff);
}
.menu span{display:block;width:16px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .16s}
nav.open .menu span:first-child,.top.open .menu span:first-child{transform:translateY(3.3px) rotate(45deg)}
nav.open .menu span:last-child,.top.open .menu span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

@media (max-width:860px){
  .menu{display:inline-flex}
  .hide-narrow{display:none !important}
  nav .wrap,.top .wrap{position:relative;gap:12px}
  nav .navlinks,.top .navlinks{
    display:none;
    position:absolute;left:12px;right:12px;top:calc(100% + 6px);
    flex-direction:column;gap:2px;margin:0;
    background:rgba(12,19,34,.97);border:1px solid var(--line,rgba(120,160,220,.16));
    border-radius:14px;padding:8px;box-shadow:0 22px 50px -18px #000;z-index:80;
  }
  nav.open .navlinks,.top.open .navlinks{display:flex}
  nav .navlinks a,.top .navlinks a{display:block;padding:12px 14px;border-radius:10px;margin-left:0}
  .navmore .drop{position:static;box-shadow:none;border:0;padding:0 0 0 8px;background:transparent}
  .navmore .drop a{padding:10px 14px}
  .navtools:not(:has(:not(.hide-narrow))){display:none}
  .wrap{padding-left:16px;padding-right:16px}
  .brand .strand,.brand .tag{display:none}
  .refresh .lbl{display:none}
  .refresh{padding:8px 10px}
}

@media (max-width:600px){
  .ticker{font-size:11px}
  .ticker .wrap{gap:12px}
  header.hero,header{padding-top:28px}
  .alertstrip{flex-wrap:wrap;align-items:flex-start}
  .alertstrip a{margin-left:0;white-space:normal}
  .storms{grid-template-columns:1fr}
  .desk-cta{align-items:flex-start}
  .desk-cta .go{margin-left:0}
  .prep{flex-direction:column;gap:10px;padding:16px}
  .tile .foot{flex-wrap:wrap;gap:6px}
  .tile:hover{transform:none}
  h2{overflow-wrap:anywhere}
  .kicker,.eyebrow,.meta{overflow-wrap:anywhere}
  article{padding-left:16px;padding-right:16px}
  .meta-grid{grid-template-columns:1fr}
}

@media (max-width:420px){
  .brand{font-size:17px}
  nav .wrap{height:54px}
}