/* Local additions. This file is not part of the skin package, so upgrades keep it. */

/* Jump-menu targets: clear the sticky header when an anchor is used.
   Smooth scrolling is done per click in header.html.tmpl, never globally:
   as a document-wide style it animates the browser's own scroll-anchoring
   corrections too, which makes the sticky header oscillate. */
.home-block[id],
.home-blocks .row[id] { scroll-margin-top: 90px; }

/* The radar tile holds a 4:3 camera image, not a wide radar frame. */
.wx-radar img { aspect-ratio: auto; min-height: 0; object-fit: contain; }

/* Jump menu: same look as the skin's dropdown, but deliberately NOT .view-menu,
   because belchertown.js intercepts clicks on ".view-menu a" and cancels them. */
.jump-menu {
    position: absolute; right: 0; top: 100%; z-index: 1000; min-width: 180px;
    margin: 6px 0 0; padding: 6px 0; list-style: none; text-align: left;
    background: var(--wx-bg); border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.jump-menu a { display: block; padding: 8px 16px; color: inherit; white-space: nowrap; text-decoration: none; }
.jump-menu a:hover, .jump-menu a:focus-visible { background: rgba(127, 127, 127, 0.12); }

/* About page: photo beside the status table, stacking on narrow screens. */
.about-outer h3 { margin: 28px 0 10px; }
.about-outer p, .about-outer li { line-height: 1.6; }
.about-top {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px; align-items: start; margin-top: 18px;
}
.about-photo img { display: block; width: 100%; height: auto; border-radius: var(--wx-radius); }
.about-caption { margin: 6px 0 0; font-size: 85%; opacity: 0.7; }
.about-status h3 { margin-top: 0; }
.about-table { width: 100%; border-collapse: collapse; font-size: 90%; }
.about-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--wx-line); vertical-align: top; }
.about-table td:first-child { opacity: 0.75; }
.about-status .about-table td:last-child { font-weight: 600; text-align: right; }
.about-sources td:last-child { font-weight: 600; }
@media (max-width: 800px) {
    .about-top { grid-template-columns: 1fr; }
}

/* ---- Phone header fixes ---------------------------------------------------
   1. logo-text.svg carries only a viewBox, so as an <img> it has an aspect
      ratio but no intrinsic size. In the narrow portrait header the flex row
      overflows, .title-area shrinks, and the skin's global img{max-width:100%}
      then collapses the logo to nothing. A definite height plus a viewport
      based max-width makes it scale down instead of disappearing.
   2. The slim state changed the bar's height on scroll. The script compensates
      with margin, the browser re-anchors the scroll position, and that pushed
      scrollY back across the 60px threshold, so the header flipped in and out
      repeatedly. Keeping the height identical when slim removes the feedback
      loop; the shadow still marks the scrolled state.                        */
@media only screen and (max-width: 767px) {
    .site-header #logo_image,
    .sticky-header .site-header.is-slim #logo_image {
        height: 30px;
        max-height: 30px;
        width: auto;
        max-width: 55vw;
        object-fit: contain;
        object-position: left center;
    }
    .site-header .title-area { min-width: 0; flex: 0 1 auto; }
    .sticky-header .site-header.is-slim .wrap { padding: 6px 16px; }
}

/* ---- Embedded maps -------------------------------------------------------
   The radar app handles its own gestures: it turns on MapLibre's cooperative
   gestures when it detects it is embedded, so a plain scroll or one-finger
   swipe moves this page, Ctrl or Command and scroll zooms, and its own full
   screen control fills the display. Nothing here should intercept that; this
   block is sizing only.                                                     */
.embed-frame { position: relative; overflow: hidden; border-radius: var(--wx-radius); }
.embed-frame > iframe { display: block; width: 100%; height: 450px; border: 0; }

@media only screen and (max-width: 767px) {
    .embed-frame > iframe { height: min(60vh, 420px); }
}