/* Weather Widget — Open-Meteo 7-day forecast
   Renders a status-row pill + click-to-open modal (mirrors the volcano /
   AQI / surf pill pattern). Scoped to .hg-weather-*. Uses px sizing
   throughout because the site base font-size is 62.5% and rem values render
   ~40% smaller than expected. */

/* ── Pill (lives inside .hg-status-pills via HGStatusPills.place) ── */

.hg-weather-pill-wrap{
  display:inline-flex;
  align-items:center;
}

.hg-weather-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  padding:8px 14px;
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#1866B4;              /* maui-blue default; island-specific overrides below */
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.3px;
  -webkit-appearance:none;
  appearance:none;
}
.hg-weather-pill:hover{opacity:.92}
.hg-weather-pill:focus{outline:2px solid #fff;outline-offset:-2px}
.hg-weather-pill-icon{font-size:15px;line-height:1}
.hg-weather-pill-icon.is-sunny{color:#ffd76a}
.hg-weather-pill-icon.is-rainy{color:#b6d7ff}
.hg-weather-pill-icon.is-cloudy{color:#e1e6ea}

/* Amber background for all islands — treats Weather as utility info
   (alongside "Free Entry" green and sky-blue "Listen"), visually distinct
   from island-scoped navigation buttons. White text on #D69E2E has ~4.6:1
   contrast. */
.hg-weather-pill-wrap .hg-weather-pill{background:#D69E2E}

/* ── Modal (populated by JS) ──────────────────────────────────── */

.hg-weather-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99998;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.hg-weather-modal.is-open{display:flex}
.hg-weather-modal-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.hg-weather-modal-card{
  position:relative;z-index:1;
  background:#fff;
  border-radius:16px;
  max-width:640px;width:100%;
  max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.hg-weather-modal-head{
  padding:18px 22px 12px;
  border-bottom:1px solid #eee;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
.hg-weather-modal-head h3{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:#222;
  line-height:1.3;
}
.hg-weather-modal-close{
  background:none;border:none;
  font-size:28px;color:#888;
  cursor:pointer;
  padding:0 6px;line-height:1;
  flex-shrink:0;
}
.hg-weather-modal-body{padding:18px 22px}
.hg-weather-modal-foot{
  padding:12px 22px 16px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

/* ── Modal body content ──────────────────────────────────────── */

.hg-weather-headline{
  display:flex;
  align-items:center;
  gap:14px;
  padding:4px 0 14px;
  border-bottom:1px solid #eceff2;
  margin-bottom:14px;
}
.hg-weather-headline-icon{
  font-size:38px;
  line-height:1;
  color:#5d6b80;            /* default: muted slate — used when tone='night' so the moon reads cool */
  flex-shrink:0;
}
.hg-weather-headline-icon.is-sunny{color:#f2a024}
.hg-weather-headline-icon.is-cloudy{color:#7a8aa0}
.hg-weather-headline-icon.is-rainy{color:#3b6ea8}
.hg-weather-headline-temp{
  font-size:44px;
  font-weight:700;
  color:#222;
  line-height:1;
}
.hg-weather-headline-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hg-weather-headline-label{
  font-size:16px;
  font-weight:600;
  color:#333;
}
.hg-weather-headline-range{
  font-size:13px;
  color:#666;
}

.hg-weather-days{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
/* Mobile: only show the next 3 days to keep the modal short */
@media (max-width:519px){
  .hg-weather-day:nth-child(n+4){display:none}
}
@media (min-width:520px){
  .hg-weather-days{grid-template-columns:repeat(4,1fr);gap:10px}
}
@media (min-width:760px){
  .hg-weather-days{grid-template-columns:repeat(7,1fr)}
}

.hg-weather-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 6px;
  background:#f8fafb;
  border:1px solid #eceff2;
  border-radius:8px;
  min-width:0;
}
.hg-weather-day-name{
  font-size:13px;
  font-weight:700;
  color:#555;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.hg-weather-day-icon{
  font-size:28px;
  line-height:1;
  margin:8px 0 6px;
  color:#f2a024;
}
.hg-weather-day-icon.is-rainy{color:#1866B4}
.hg-weather-day-icon.is-cloudy{color:#7a8894}
.hg-weather-day-temps{
  font-size:14px;
  font-weight:600;
  color:#222;
  white-space:nowrap;
}
.hg-weather-day-hi{color:#c3232f}
.hg-weather-day-lo{color:#1866B4;margin-left:4px}
.hg-weather-day-pop{
  font-size:12px;
  color:#1866B4;
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:3px;
}
.hg-weather-day-pop.is-zero{visibility:hidden}

.hg-weather-day-uv{
  margin-top:4px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  background:#7a8894;
  border-radius:10px;
  letter-spacing:.3px;
  white-space:nowrap;
}
.hg-weather-day-uv.is-uv-low{background:#1D9771}      /* green */
.hg-weather-day-uv.is-uv-mod{background:#f2a024}      /* amber */
.hg-weather-day-uv.is-uv-high{background:#F27A24}     /* orange */
.hg-weather-day-uv.is-uv-vhigh{background:#c3232f}    /* red */
.hg-weather-day-uv.is-uv-extreme{background:#6b2d8a}  /* purple */

.hg-weather-more{
  font-size:14px;
  font-weight:700;
  color:#1866B4;
  text-decoration:none;
}
.hg-weather-more:hover{text-decoration:underline}
.hg-weather-attr{
  font-size:12px;
  color:#888;
}
.hg-weather-attr a{color:#888;text-decoration:underline}
.hg-weather-attr a:hover{color:#1866B4}

/* Mobile pill refinements — tighter padding when the row wraps */
@media (max-width:600px){
  .hg-weather-pill{font-size:11px;padding:6px 10px;letter-spacing:.1px;gap:6px}
  .hg-weather-pill-icon{font-size:13px}
  .hg-weather-headline-temp{font-size:36px}
  .hg-weather-headline-label{font-size:15px}
  .hg-weather-modal-card{max-height:90vh}
  .hg-weather-modal-body{padding:16px 18px}
}
@media (max-width:380px){
  .hg-weather-pill{font-size:10px;padding:5px 8px}
  .hg-weather-pill-icon{font-size:12px}
}

/* Print: hide the pill and modal entirely — weather is time-sensitive */
@media print{
  .hg-weather-pill-wrap,
  .hg-weather-modal{display:none !important}
}