/* MyWeatha v44 — iPhone safe-area / header legibility.
   iOS translucent status bar blurs content painted underneath it.
   Keep the hero interactive header BELOW the system scrim. */
@supports (-webkit-touch-callout: none) {
 @media (max-width: 520px) {
  #home .content>.mast {
   /* Keep the weather card compact; put the iPhone status-bar space ABOVE it. */
   margin-top: max(56px, env(safe-area-inset-top, 0px)) !important;
   padding-top: 28px !important;
   padding-bottom: 26px !important;
   min-height: 390px !important;
  }
  #home .content>.mast .mast-top {
   position: relative !important;
   z-index: 8 !important;
   isolation: isolate;
   filter: none !important;
   -webkit-filter: none !important;
   opacity: 1 !important;
   align-items: flex-start;
   gap: 12px;
  }
  #home .content>.mast .mast-top .brand {
   color: inherit !important;
   opacity: 1 !important;
   filter: none !important;
   -webkit-filter: none !important;
   text-shadow: 0 1px 9px rgba(0, 17, 39, .24);
  }
  #home .content>.mast .mast-top .tagline {
   filter: none !important;
   -webkit-filter: none !important;
   opacity: .9 !important;
  }
  #home .content>.mast .mast-top .tools {
   flex-shrink: 0;
  }
  #home .content>.mast .mast-top .icon-btn {
   /* Avoid iOS WebKit backdrop compositing blurring SVG strokes. */
   -webkit-backdrop-filter: none !important;
   backdrop-filter: none !important;
   background: rgba(42, 76, 127, .65) !important;
   box-shadow: inset 0 1px rgba(255,255,255,.24), 0 5px 16px rgba(0,18,46,.10) !important;
  }
 }
}
@media (max-width: 365px) {
 #home .content>.mast .mast-top .tools { gap: 7px; }
 #home .content>.mast .mast-top .icon-btn {
  width: 37px;
  height: 37px;
 }
}