/* lc-weather-nav.css — desktop-only header weather chip + Windy-style dropdown.
   Guarded by min-width:960px so nothing renders on mobile. */

.lc-weather { display: none; }

@media (min-width: 960px) {
  .lc-weather {
    display: inline-flex;
    position: relative;
    align-items: center;
    margin-left: 12px;
  }

  .lc-weather__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    text-decoration: none;
    color: inherit;                 /* inherit the navbar's text color */
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
  }
  .lc-weather__chip:hover,
  .lc-weather.is-open .lc-weather__chip {
    background: rgba(120, 130, 145, 0.14);
  }
  .lc-weather__chip-icon { display: inline-flex; }
  .lc-weather__chip-icon svg { display: block; width: 22px; height: 22px; }
  .lc-weather__chip-temp { font-weight: 600; font-size: 15px; }

  /* ---- panel (Windy-style dark glass) ---- */
  .lc-weather__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 24px);
    padding: 16px;
    border-radius: 14px;
    background: rgba(17, 24, 33, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    color: #eaf1f8;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    z-index: 1050;
  }
  .lc-weather.is-open .lc-weather__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .16s ease, transform .16s ease;
  }
  /* hover bridge so moving from chip to panel doesn't cross a dead gap */
  .lc-weather__panel::before {
    content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
  }

  .lc-weather__head { display: flex; align-items: center; gap: 12px; }
  .lc-weather__head-icon svg { width: 44px; height: 44px; display: block; }
  .lc-weather__temp { font-size: 30px; font-weight: 700; line-height: 1; }
  .lc-weather__cond { font-size: 13px; color: #b9c6d3; margin-top: 2px; }
  .lc-weather__loc  { font-size: 12px; color: #8a99a8; margin-top: 1px; }

  .lc-weather__meta {
    display: flex; gap: 8px;
    margin: 14px 0;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .lc-weather__meta-cell { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: center; }
  .lc-weather__meta-val { font-size: 14px; font-weight: 600; }
  .lc-weather__meta-key { font-size: 11px; color: #8a99a8; text-transform: uppercase; letter-spacing: .04em; }

  .lc-weather__strip { display: flex; gap: 6px; }
  .lc-weather__day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .lc-weather__day-dow { font-size: 12px; color: #b9c6d3; }
  .lc-weather__day-icon svg { width: 26px; height: 26px; display: block; }
  .lc-weather__day-hl { font-size: 11px; color: #eaf1f8; white-space: nowrap; }

  /* ---- live radar ----
     The frame grammar is the site's existing one (.lcm-wx-radar in the mega
     menu): flat, square, a hairline inset rule and a hard black corner tag.
     Only the values change for a dark panel — the shape is not a new idea.
     The frame is empty until the panel is deliberately opened; lc-weather-nav.js
     builds the iframe then, so a hover on the navbar never loads a map. */
  .lc-weather__radar {
    position: relative;
    height: 168px;                 /* ~16:10 across the panel's 268px of content */
    margin-top: 14px;
    overflow: hidden;
    background: #0d151d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    /* The motion kernel paints its waiting veil on --lc-bg and marks it with
       --lc-rose; point both at this panel so nothing flashes white or pink. */
    --lc-bg: #0d151d;
    --lc-rose: #6cb6ef;
    color: #8a99a8;
  }
  /* Windy anchors its logo, overlay picker, zoom buttons, play bar and legend
     to the edges of its own viewport. Rendering the frame larger than the
     window it shows through pushes all of that out of sight, so what is left
     is the weather rather than somebody else's interface. The overhang is
     symmetric, so the location the map is centred on stays centred. The
     controls are not lost — "Full forecast" underneath is the full instrument. */
  .lc-weather__radar { --lcw-crop-y: 98px; --lcw-crop-x: 58px; }
  .lc-weather__radar iframe {
    position: absolute;
    left: calc(-1 * var(--lcw-crop-x));
    top: calc(-1 * var(--lcw-crop-y));
    width: calc(100% + 2 * var(--lcw-crop-x));
    height: calc(100% + 2 * var(--lcw-crop-y));
    border: 0; display: block;
    pointer-events: none;          /* a picture, not a control surface */
  }
  .lc-weather__radar-tag {
    position: absolute; left: 0; top: 0;
    z-index: 8;                    /* above the kernel's pending veil (6) */
    background: #000; color: #fff;
    font-size: 9px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
    padding: 5px 9px;
    pointer-events: none;
  }

  .lc-weather__geo {
    display: block; width: 100%;
    margin-top: 14px; padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 9px;
    background: rgba(255,255,255,0.05); color: #eaf1f8;
    font-size: 13px; cursor: pointer;
    transition: background-color .15s ease;
  }
  .lc-weather__geo:hover { background: rgba(255,255,255,0.12); }

  .lc-weather__link {
    display: block; margin-top: 12px; text-align: center;
    padding: 9px 10px; border-radius: 9px;
    background: rgba(108, 182, 239, 0.16);
    color: #cfe6fb; text-decoration: none; font-size: 13px; font-weight: 600;
    transition: background-color .15s ease;
  }
  .lc-weather__link:hover { background: rgba(108, 182, 239, 0.28); }

  /* degraded: no data — hide temp/panel detail, keep the icon link to /weather/ */
  .lc-weather--degraded .lc-weather__chip-temp,
  .lc-weather--degraded .lc-weather__meta,
  .lc-weather--degraded .lc-weather__strip { display: none; }
}