/* SEQ Weather new home page ([seqweather_front_page]).
   A light, dense dashboard: white cards on a pale page, one blue accent, a dark photo hero, a red warning bar.
   Reuses map-test.css for the map pieces (popups, camera panel, radar timeline, place pills) and sets the page layout here.
   The theme's own header is hidden on this page because the page prints its own (logo, menu, search, login). */

body.seqwmt-home-page .seq-site-header,
body.seqwmt-home-page .seq-page-header { display: none; }
body.seqwmt-home-page .seq-main { padding-block: 12px 40px; }
body.seqwmt-home-page { background: #eef2f6; }

.seqwmt-app.seqwmt-home {
  --seqwmt-w: 100%;
  --sf-bg: #eef2f6;
  --sf-card: #ffffff;
  --sf-line: #dde5ec;
  --sf-ink: #14232f;
  --sf-muted: #5d7183;
  --sf-blue: #1769d6;
  --sf-blue-dark: #0e4fa8;
  --sf-red: #d12d2d;
  --sf-navy: #0b2a4a;
  width: auto;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  color: var(--sf-ink);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
.seqwmt-home a { text-decoration: none; }
.seqwmt-home h1, .seqwmt-home h2, .seqwmt-home h3 { margin: 0; font-family: inherit; }
.sf-muted { color: var(--sf-muted); font-size: 13px; }
.sf-fine { margin: 8px 0 0; color: var(--sf-muted); font-size: 12.5px; }
.sf-empty { color: var(--sf-muted); }

/* ---------- cards ---------- */
.sf-card { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(20, 35, 47, .05); min-width: 0; }
.sf-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sf-card-head h2 { font-size: 17px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sf-card-head h2 small { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--sf-muted); }
.sf-link { margin-left: auto; color: var(--sf-blue); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sf-link:hover { text-decoration: underline; }
.sf-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sf-muted); }
.sf-live i { width: 8px; height: 8px; border-radius: 50%; background: #e23d3d; }
.sf-btn { display: inline-block; padding: 10px 18px; border-radius: 6px; font-weight: 700; font-size: 14.5px; border: 2px solid transparent; }
.sf-btn-blue { background: var(--sf-blue); color: #fff; }
.sf-btn-blue:hover { background: var(--sf-blue-dark); }
.sf-btn-line { border-color: rgba(255, 255, 255, .85); color: #fff; }
.sf-btn-line:hover { background: rgba(255, 255, 255, .14); }

/* ---------- header ---------- */
.sf-head { display: flex; align-items: center; gap: 22px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 10px; padding: 8px 18px; }
.sf-logo { flex: none; display: block; }
.sf-logo img { display: block; height: 56px; width: auto; }
.sf-nav { flex: 1 1 auto; min-width: 0; }
.sf-nav-list { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
.sf-nav-list a { color: var(--sf-ink); font-weight: 600; font-size: 14.5px; }
.sf-nav-list a:hover, .sf-nav-list .current-menu-item > a { color: var(--sf-blue); }
.sf-search { flex: 0 0 250px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--sf-line); border-radius: 8px; padding: 7px 12px; background: #f7f9fb; }
.sf-search svg { width: 18px; height: 18px; fill: var(--sf-muted); flex: none; }
.sf-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--sf-ink); outline: 0; }
.sf-account { display: flex; align-items: center; gap: 12px; flex: none; }
.sf-login { color: var(--sf-ink); font-weight: 600; font-size: 14.5px; }
.sf-login:hover { color: var(--sf-blue); }
.sf-join { background: var(--sf-blue); color: #fff; padding: 9px 18px; border-radius: 6px; font-weight: 700; font-size: 14.5px; }
.sf-join:hover { background: var(--sf-blue-dark); }

/* ---------- town strip ---------- */
.sf-strip { display: flex; align-items: center; gap: 12px; background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 10px; padding: 8px 18px; }
.sf-strip-towns { display: flex; flex: 1; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sf-strip-towns::-webkit-scrollbar { display: none; }
.sf-town { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border: 0; background: none; font: inherit; color: var(--sf-ink); cursor: pointer; border-radius: 8px; }
.sf-town:hover { background: #f1f5f9; }
.sf-town-icon svg { width: 30px; height: 30px; display: block; }
.sf-town-name { font-size: 14px; color: #3c5163; }
.sf-town strong { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sf-updated { flex: none; color: var(--sf-muted); font-size: 12.5px; }

/* ---------- warning bar ---------- */
.sf-alert { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-radius: 10px; color: #fff; background: var(--sf-red); font-size: 15px; }
.sf-alert[hidden] { display: none; }
.sf-alert-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 50%; font-weight: 900; font-size: 15px; }
.sf-alert-badge { flex: none; font-size: 15px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.sf-alert-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-alert-btn { flex: none; color: #fff; font-weight: 700; white-space: nowrap; }
.sf-alert.is-watch { background: #d9741a; }
.sf-alert.is-calm { background: #1f7a4d; }
.sf-alert.is-unknown { background: #5d6f80; }

/* ---------- grids ---------- */
.sf-grid { display: grid; gap: 14px; min-width: 0; }
.sf-grid > * { min-width: 0; }
.sf-grid-top { grid-template-columns: 1.55fr 1fr; }
.sf-grid-map { grid-template-columns: 2.2fr 1fr; }
.sf-grid-two { grid-template-columns: 1fr 1fr; }
.sf-grid-news { grid-template-columns: 1.55fr 1fr; }
.sf-grid-readers { grid-template-columns: minmax(0, 1fr); }

/* ---------- hero ---------- */
.sf-hero { position: relative; display: flex; align-items: flex-end; min-height: 300px; border-radius: 10px; overflow: hidden; color: #fff; background: #0e2742 linear-gradient(135deg, #16385c, #0a1e33) center / cover no-repeat; }
.sf-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 14, 26, .82) 0%, rgba(5, 14, 26, .55) 55%, rgba(5, 14, 26, .15) 100%); }
.sf-hero-text { position: relative; padding: 26px 28px; max-width: 560px; display: grid; gap: 10px; }
.sf-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd0ff; }
.sf-hero h1 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.sf-hero p { margin: 0; font-size: 16px; line-height: 1.5; color: #e6eef5; }
.sf-hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.sf-hero small { color: #b9cad9; font-size: 12.5px; }

/* ---------- location card ---------- */
.sf-place-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sf-pin svg { width: 20px; height: 20px; fill: var(--sf-blue); display: block; }
.sf-place-head strong { font-size: 20px; font-weight: 800; }
.sf-place-head a { margin-left: auto; font-size: 13px; color: var(--sf-blue); font-weight: 600; }
.sf-place-body { display: grid; grid-template-columns: 1fr 138px; gap: 4px 14px; }
.sf-place-now { grid-column: 1; display: flex; align-items: center; gap: 12px; }
.sf-place-icon svg { width: 64px; height: 64px; display: block; }
.sf-place-now b { display: block; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.sf-place-now small { color: var(--sf-muted); font-size: 13.5px; }
.sf-eta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); border-left: 3px solid #5aa0f0; font-size: 14px; line-height: 1.35; }
.sf-eta[hidden] { display: none; }
.sf-eta em { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #cfe3f5; font-size: 10.5px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sf-eta.is-soon { border-left-color: #f2a077; background: rgba(242, 160, 119, .14); font-weight: 600; }
.sf-eta.is-rain { border-left-color: #5aa0f0; background: rgba(90, 160, 240, .18); font-weight: 600; }
.sf-eta.is-unsure { border-left-color: #f6d77a; }
.sf-eta.is-quiet { border-left-color: rgba(255, 255, 255, .28); color: #b9cde0; font-size: 13px; }
.sf-place-rows { grid-column: 1; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 8px 0 0; font-size: 14px; }
.sf-place-rows dt { display: flex; align-items: center; gap: 8px; color: var(--sf-muted); }
.sf-place-rows dt svg { width: 17px; height: 17px; color: #6b8fb3; flex: none; }
.sf-place-rows dd { margin: 0; text-align: right; font-weight: 700; }
.sf-place-radar { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: start; gap: 4px; color: var(--sf-ink); }
#sf-mini-map { width: 138px; height: 138px; border-radius: 8px; overflow: hidden; background: #dfe8ef; }
.sf-place-radar strong { font-size: 14px; }
.sf-place-radar span { font-size: 12.5px; color: var(--sf-blue); font-weight: 600; }

/* ---------- map ---------- */
.sf-map-card { padding-bottom: 10px; display: flex; flex-direction: column; }
.sf-map-stage { position: relative; border-radius: 8px; overflow: hidden; flex: 1 1 auto; min-height: 400px; display: block; } /* the map grows to the height of the column beside it, so the card has no empty space */
.sf-map { position: absolute; inset: 0; height: auto; }
.sf-layer-buttons { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.sf-layer-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(8, 20, 34, .78); color: #fff; font: 600 13.5px "Segoe UI", system-ui, sans-serif; cursor: pointer; backdrop-filter: blur(4px); }
.sf-layer-btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.sf-layer-btn.is-on { background: var(--sf-blue); border-color: #5aa0f0; }
.sf-layer-btn:hover { border-color: #fff; }
.sf-map-foot { margin-top: 8px; color: #5a6f82; }
.sf-map-foot .seqwmt-map-legend strong { color: #3c5163; }
.sf-map-foot .seqwmt-map-credit { display: none; } /* the notes and data credits live in the page footer instead */
.sf-side { display: grid; gap: 14px; align-content: start; }
.sf-quick ul { list-style: none; margin: 0; padding: 0; }
.sf-quick li { border-top: 1px solid var(--sf-line); }
.sf-quick li:first-child { border-top: 0; }
.sf-quick a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: var(--sf-ink); font-weight: 600; font-size: 15px; }
.sf-quick a svg { width: 22px; height: 22px; fill: var(--sf-blue); flex: none; }
.sf-quick a i { margin-left: auto; font-style: normal; color: #9aa9b6; font-size: 20px; }
.sf-quick a:hover { color: var(--sf-blue); }

/* ---------- forecast ---------- */
.sf-forecast-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.sf-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.sf-tab { padding: 7px 14px; border: 0; border-radius: 6px; background: transparent; font: 600 14px "Segoe UI", system-ui, sans-serif; color: #3c5163; cursor: pointer; }
.sf-tab:hover { background: #eef3f8; }
.sf-tab.is-on { background: var(--sf-blue); color: #fff; }
.sf-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sf-day { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border: 1px solid var(--sf-line); border-radius: 8px; text-align: center; background: #fafcfe; }
.sf-day.is-today { border-color: var(--sf-blue); background: #f0f6ff; }
.sf-day b { font-size: 13.5px; }
.sf-day-icon svg { width: 38px; height: 38px; display: block; }
.sf-day strong { font-size: 20px; font-weight: 800; color: #d6561a; letter-spacing: -.02em; }
.sf-day-lo { color: #3c5163; font-size: 14px; }
.sf-day-rain { color: #2a6db3; font-size: 12.5px; font-weight: 600; min-height: 18px; }
.sf-chart-card { border: 1px solid var(--sf-line); border-radius: 8px; padding: 12px 14px 6px; background: #fff; }
.sf-chart-card h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.sf-chart-card h3 span { color: var(--sf-muted); text-transform: none; letter-spacing: 0; font-weight: 600; }
#sf-chart { display: block; width: 100%; height: auto; }

/* ---------- storm potential + observations ---------- */
.sf-storm-table table { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.sf-storm-table th { font-weight: 700; color: #3c5163; text-align: center; font-size: 12.5px; }
.sf-storm-table th.sf-storm-name { text-align: left; color: var(--sf-ink); font-size: 14px; font-weight: 700; white-space: nowrap; padding-right: 6px; }
.sf-storm-table td { padding: 0; text-align: center; }
.sf-band { display: block; padding: 6px 2px; border-radius: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.sf-obs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sf-obs-card { border: 1px solid var(--sf-line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; background: #fcfdfe; }
.sf-obs-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sf-obs-top strong { font-size: 14.5px; }
.sf-obs-icon svg { width: 30px; height: 30px; display: block; }
.sf-obs-temp { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.sf-obs-card dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 4px 0 0; font-size: 12.5px; }
.sf-obs-card dt { color: var(--sf-muted); }
.sf-obs-card dd { margin: 0; font-weight: 700; text-align: right; }
.sf-obs-card small { color: var(--sf-muted); font-size: 11.5px; margin-top: 2px; }

/* ---------- news ---------- */
.sf-news-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.sf-news-lead { position: relative; display: block; min-height: 300px; border-radius: 8px; overflow: hidden; color: #fff; background: #0e2742; }
.sf-news-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-news-lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(4, 12, 22, .88)); }
.sf-news-lead-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: 16px 18px; }
.sf-news-lead-text b { justify-self: start; background: #d12d2d; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.sf-news-lead-text strong { font-size: 22px; line-height: 1.2; }
.sf-news-lead-text > span { font-size: 14px; color: #dce6ef; }
.sf-news-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.sf-news-list li { border-top: 1px solid var(--sf-line); }
.sf-news-list li:first-child { border-top: 0; }
.sf-news-list a { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 10px 0; color: var(--sf-ink); }
.sf-news-list a:not(:has(img)) { grid-template-columns: 1fr; }
.sf-news-list img { width: 74px; height: 56px; object-fit: cover; border-radius: 4px; background: #cfd8e0; }
.sf-news-list strong { display: block; font-size: 14.5px; line-height: 1.3; }
.sf-news-list small { color: var(--sf-muted); font-size: 12.5px; }
.sf-news-list a:hover strong { color: var(--sf-blue); }

/* ---------- live across SEQ ---------- */
.sf-cam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-cam { position: relative; display: block; padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: #0d1f33; cursor: pointer; color: #fff; text-align: left; }
.sf-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(3, 10, 20, .85)); }
.sf-cam-live { position: absolute; z-index: 1; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.sf-cam-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; }
.sf-cam-caption { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 26px; display: grid; }
.sf-cam-caption strong { font-size: 13.5px; line-height: 1.2; }
.sf-cam-caption small { font-size: 12px; opacity: .85; }
.sf-cam-chaser { background: linear-gradient(135deg, #1a3b5e, #0a1b2d); display: flex; align-items: flex-end; }

/* ---------- readers + prepare ---------- */
.sf-readers-row { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 8px; align-items: stretch; }
.sf-readers-row img { width: 100%; height: 100%; min-height: 110px; max-height: 130px; object-fit: cover; border-radius: 6px; display: block; }
.sf-readers-cta { display: grid; align-content: center; gap: 4px; padding: 10px 14px; border-radius: 6px; background: #eaf3ff; color: var(--sf-ink); }
.sf-readers-cta svg { width: 26px; height: 26px; fill: var(--sf-blue); }
.sf-readers-cta strong { font-size: 14.5px; line-height: 1.25; }
.sf-readers-cta span { font-size: 12.5px; color: var(--sf-blue); font-weight: 600; }
.sf-prepare-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sf-prepare-row a { display: grid; justify-items: center; gap: 3px; padding: 14px 8px; border: 1px solid var(--sf-line); border-radius: 8px; text-align: center; color: var(--sf-ink); background: #fcfdfe; }
.sf-prepare-row a:hover { border-color: var(--sf-blue); }
.sf-prepare-row svg { width: 34px; height: 34px; fill: #d6561a; }
.sf-prepare-row a:nth-child(2) svg { fill: var(--sf-blue); }
.sf-prepare-row a:nth-child(3) svg { fill: #1f8f5c; }
.sf-prepare-row strong { font-size: 14px; line-height: 1.2; }
.sf-prepare-row span { font-size: 12.5px; color: var(--sf-muted); }

/* ---------- business directory + ads ---------- */
.sf-biz-body { min-height: 40px; }
.sf-ad { margin: 0 auto; max-width: 100%; text-align: center; }
.sf-ad-wide { width: 100%; }
.sf-side .sf-ad { background: var(--sf-card); border: 1px solid var(--sf-line); border-radius: 10px; padding: 8px; }
.sf-note { margin: 0; text-align: center; color: var(--sf-muted); font-size: 12.5px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .sf-head { flex-wrap: wrap; }
  .sf-nav { order: 3; flex: 1 1 100%; }
  .sf-search { flex: 1 1 200px; }
  .sf-grid-top, .sf-grid-map, .sf-grid-two, .sf-grid-news, .sf-grid-readers, .sf-forecast-body { grid-template-columns: minmax(0, 1fr); }
  .sf-readers-row { grid-template-columns: repeat(2, 1fr); }
  .sf-readers-cta { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .seqwmt-app.seqwmt-home { padding: 0 10px; }
  .sf-strip { flex-wrap: wrap; }
  .sf-alert { flex-wrap: wrap; }
  .sf-map { height: 320px; }
  .sf-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-news-body, .sf-prepare-row { grid-template-columns: 1fr; }
  .sf-cam-grid { grid-template-columns: 1fr; }
  .sf-place-body { grid-template-columns: 1fr; }
  .sf-place-radar { grid-column: 1; grid-row: auto; }
  .sf-hero { min-height: 260px; }
}

/* The theme sets its own display font and size on headings; the page's card headings keep the design's. */
.seqwmt-app.seqwmt-home .sf-card-head h2 { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .04em !important; line-height: 1.25 !important; text-transform: uppercase; color: var(--sf-ink); }
.seqwmt-app.seqwmt-home .sf-hero h1 { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important; letter-spacing: -.02em; }
.seqwmt-app.seqwmt-home .sf-chart-card h3, .seqwmt-app.seqwmt-home .sf-biz h3 { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }

/* ---------- the main menu: its own row under the logo, search and login ---------- */
.sf-head { flex-wrap: wrap; row-gap: 0; padding-bottom: 0; }
.sf-logo { margin-right: auto; }
.sf-nav { order: 3; flex: 1 1 100%; margin: 6px -18px 0; border-top: 1px solid var(--sf-line); padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.sf-nav::-webkit-scrollbar { display: none; }
.sf-nav-list { display: flex; flex-wrap: nowrap; gap: 0; }
.sf-nav-list li { flex: none; }
.sf-nav-list a { display: block; padding: 13px 18px 11px; font-size: 14.5px; font-weight: 600; color: #34495b; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s, background .15s; }
.sf-nav-list a:hover { color: var(--sf-blue); background: #f3f7fc; border-bottom-color: #bcd5f5; }
.sf-nav-list .current-menu-item > a, .sf-nav-list .current_page_item > a { color: var(--sf-blue); border-bottom-color: var(--sf-blue); }
@media (max-width: 700px) { .sf-nav-list a { padding: 12px 13px 10px; font-size: 14px; } }

/* ---------- daily risks ---------- */
button.sf-day { font: inherit; color: inherit; cursor: pointer; }
button.sf-day:hover { border-color: #9fc2ee; }
.sf-risks-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 3px; }
.sf-risk { padding: 2px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.sf-risk-fire::before { content: '\1F525'; margin-right: 3px; font-size: .95em; }
.sf-risk-low { color: #2d7a46; font-size: 11px; font-weight: 700; }
.sf-risks { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: 8px; background: #fbfdff; display: grid; gap: 6px; }
.sf-risks:empty { display: none; }
.sf-risks-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sf-risks-head strong { font-size: 15.5px; }
.sf-risks-head span { color: var(--sf-muted); font-size: 14px; }
.sf-risks .sf-risk { font-size: 12.5px; padding: 4px 9px; border-radius: 4px; }
.sf-risks .sf-risks-chips { justify-content: flex-start; gap: 6px; }
.sf-risks p { margin: 0; font-size: 14px; }
.sf-risks-facts { color: #3c5163; }
.sf-risks-conf { color: var(--sf-muted); font-size: 13px; }
.sf-risks .sf-fine { margin: 2px 0 0; }
@media (max-width: 700px) { .sf-risk { font-size: 10px; padding: 2px 4px; } }

/* ---------- advertisement spots ---------- */
.sf-ad-placeholder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-height: 90px; padding: 10px 16px; border: 2px dashed #b5c3d1; border-radius: 10px; background: repeating-linear-gradient(135deg, rgba(20, 35, 47, .03) 0 10px, transparent 10px 20px); color: var(--sf-muted); font-size: 13px; text-align: center; }
.sf-ad-placeholder strong { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6f8396; }
.sf-side .sf-ad-placeholder { min-height: 250px; flex-direction: column; justify-content: center; border-radius: 10px; }
.sf-ad.seq-ad-slot { margin-inline: auto; }

/* ================= graphic header and hero (second design) ================= */
.seqwmt-app.seqwmt-home { max-width: 1280px; }
.sf-head { position: relative; overflow: hidden; border: 0; border-radius: 12px; color: #fff; padding: 10px 22px 0;
  background:
    radial-gradient(circle at 88% 20%, rgba(75, 170, 255, .30), transparent 38%),
    repeating-radial-gradient(circle at 88% 20%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 34px),
    linear-gradient(115deg, #06182f 0%, #0a2b52 55%, #0c3f73 100%); }
.sf-head > * { position: relative; }
.sf-logo img { height: 54px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.sf-nav { border-top: 1px solid rgba(255, 255, 255, .16); margin: 8px -22px 0; padding: 0 14px; }
.sf-nav-list a { color: #e5f0fb; border-bottom: 3px solid transparent; }
.sf-nav-list a:hover { color: #fff; background: rgba(255, 255, 255, .1); border-bottom-color: #6cc0ff; }
.sf-nav-list .current-menu-item > a, .sf-nav-list .current_page_item > a { color: #fff; border-bottom-color: #4db3ff; }
.sf-search { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
.sf-search svg { fill: #bcd6ee; }
.sf-search input { color: #fff; }
.sf-search input::placeholder { color: #bcd6ee; opacity: 1; }
.sf-login { color: #fff; }
.sf-login:hover { color: #9fd3ff; }
.sf-join { background: #1792ff; }
.sf-join:hover { background: #0e7ae0; }

/* the hero: a full-width photo with the weather card over its right-hand side */
.sf-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: end; gap: 22px; min-height: 400px; padding: 28px; border-radius: 12px; }
.sf-hero::before { background: linear-gradient(90deg, rgba(4, 12, 24, .86) 0%, rgba(4, 12, 24, .5) 52%, rgba(4, 12, 24, .12) 100%); }
.sf-hero > * { position: relative; }
.sf-hero-text { padding: 0; max-width: 620px; align-self: end; }
.sf-hero h1 { font-size: clamp(34px, 4.6vw, 56px); }
.sf-hero p { font-size: 17px; }
.sf-hero .sf-place { align-self: start; color: #fff; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(6, 18, 34, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sf-hero .sf-place-head a { color: #8fd0ff; }
.sf-hero .sf-pin svg { fill: #6cc0ff; }
.sf-hero .sf-place-now small { color: #b9cde0; }
.sf-hero .sf-place-rows dt { color: #b9cde0; }
.sf-hero .sf-place-rows dt svg { color: #7fb4e6; }
.sf-hero .sf-place-radar { color: #fff; }
.sf-hero .sf-place-radar span { color: #8fd0ff; }
.sf-hero #sf-mini-map { border: 1px solid rgba(255, 255, 255, .25); }
@media (max-width: 1100px) { .sf-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; } .sf-hero .sf-place { max-width: 440px; } }
@media (max-width: 700px) { .sf-head { padding-inline: 14px; } .sf-nav { margin-inline: -14px; } .sf-hero { padding: 18px; } .sf-hero .sf-place { max-width: none; } }

/* small fixes: the little radar map keeps its credit as a line of text, not an opened box; a smaller hero headline; readings stay on one line */
#sf-mini-map .maplibregl-ctrl-attrib { display: none; }
.sf-credit { color: var(--sf-muted); font-size: 10.5px; }
.sf-hero .sf-credit { color: #9db6cc; }
.sf-hero h1 { font-size: clamp(30px, 3.6vw, 46px); }
.sf-place-rows dd { white-space: nowrap; }

/* ---------- "Be storm ready": the strip along the bottom ---------- */
.sf-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 24px; border-radius: 12px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle at 12% 0%, rgba(75, 170, 255, .28), transparent 40%), repeating-radial-gradient(circle at 92% 120%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 30px), linear-gradient(115deg, #06182f, #0a2b52 60%, #0c3f73); }
.sf-ready-text { flex: 1 1 260px; }
.seqwmt-app.seqwmt-home .sf-ready h2 { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.01em; color: #fff; text-transform: none; }
.sf-ready p { margin: 4px 0 0; color: #bcd6ee; font-size: 15px; }
.sf-ready-links { display: flex; flex-wrap: wrap; gap: 10px; flex: 2 1 520px; }
.sf-ready-links a { flex: 1 1 190px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); transition: background .15s, border-color .15s; }
.sf-ready-links a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
.sf-ready-links svg { width: 30px; height: 30px; flex: none; fill: #6cc0ff; }
.sf-ready-links a:nth-child(1) svg { fill: #ff7a5c; }
.sf-ready-links a:nth-child(3) svg { fill: #5fd69a; }
.sf-ready-links span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.sf-ready-links strong { font-size: 15px; }
.sf-ready-links small { color: #b6cde2; font-size: 12.5px; }
.sf-ready-links i { font-style: normal; font-size: 22px; color: #9db8d0; }

/* ---------- the thin utility menu above the header (Privacy, Dr. Moose, Contact, About ...) ---------- */
.sf-utility { display: flex; justify-content: flex-end; padding: 0 6px; }
.sf-utility-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 20px; list-style: none; margin: 0; padding: 0; }
.sf-utility-list a { color: #4b6275; font-size: 13px; font-weight: 600; }
.sf-utility-list a:hover { color: var(--sf-blue); text-decoration: underline; }

/* ---------- slimmer top area ---------- */
.sf-utility-list a { font-size: 12.5px; line-height: 1.2; }
.sf-utility { padding-block: 0; margin-bottom: -4px; }
.sf-head { padding: 6px 20px 0; gap: 16px; }
.sf-logo img { height: 40px; }
.sf-search { padding: 5px 12px; }
.sf-join, .sf-login { font-size: 14px; }
.sf-join { padding: 6px 16px; }
.sf-nav { margin: 6px -20px 0; padding: 0 12px; }
.sf-nav-list a { padding: 8px 16px 6px; font-size: 14px; border-bottom-width: 2px; }
@media (max-width: 700px) { .sf-head { padding-inline: 12px; } .sf-nav { margin-inline: -12px; } .sf-nav-list a { padding: 8px 12px 6px; } }

/* ---------- the Dr.Moose / Privacy utility bar: tight to the header, no air above or below ---------- */
body.seqwmt-home-page .seq-main { padding-top: 0; }
body.seqwmt-home-page .seq-main > *:first-child { margin-top: 0; }
.seqwmt-app.seqwmt-home > .sf-utility { padding: 0 6px; margin: 0 0 -10px; line-height: 1; min-height: 0; }
.sf-utility-list { gap: 0 18px; }
.sf-utility-list li { line-height: 1; margin: 0; padding: 0; }
.sf-utility-list a { display: block; padding: 4px 0 3px; font-size: 12px; line-height: 1.1; }

/* ---------- bigger logo (the header band grows by about 14px) ---------- */
.sf-logo img { height: 54px; }
@media (max-width: 700px) { .sf-logo img { height: 46px; } }

/* ================= fold-down menus ================= */
/* The header's picture moves to a layer of its own so the band no longer has to clip its contents: the fold-downs hang below it. */
.sf-head { overflow: visible; background: none; z-index: 40; }
.sf-head::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 88% 20%, rgba(75, 170, 255, .30), transparent 38%),
    repeating-radial-gradient(circle at 88% 20%, rgba(255, 255, 255, .07) 0 1px, transparent 1px 34px),
    linear-gradient(115deg, #06182f 0%, #0a2b52 55%, #0c3f73 100%); overflow: hidden; }
.sf-head > * { z-index: 1; }
.sf-nav { overflow: visible; }
.sf-nav-list li { position: relative; }
.sf-nav-list .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 8px; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); opacity: .8; transition: transform .15s; }
.sf-nav-list .menu-item-has-children.is-open > a::after { transform: translateY(0) rotate(-135deg); }
.sf-nav-list .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 250px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--sf-line); border-radius: 0 0 10px 10px; box-shadow: 0 14px 30px rgba(6, 24, 47, .35); z-index: 60; }
.sf-nav-list li:hover > .sub-menu, .sf-nav-list li:focus-within > .sub-menu, .sf-nav-list li.is-open > .sub-menu { display: block; }
.sf-nav-list .sub-menu a { display: block; padding: 9px 12px; border: 0; border-radius: 6px; color: var(--sf-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sf-nav-list .sub-menu a:hover { background: #eaf3ff; color: var(--sf-blue); }
.sf-menu-toggle { display: none; }
@media (max-width: 900px) {
  .sf-menu-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font: 700 14px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
  .sf-menu-toggle span { width: 16px; height: 2px; background: #fff; box-shadow: 0 -5px #fff, 0 5px #fff; }
  .sf-nav { display: none; margin: 8px -12px 0; padding: 0 8px 8px; }
  .sf-head.is-open .sf-nav { display: block; }
  .sf-nav-list { flex-direction: column; }
  .sf-nav-list li { flex: none; }
  .sf-nav-list a { padding: 11px 12px; border-bottom: 0; }
  .sf-nav-list .sub-menu { position: static; display: none; min-width: 0; margin: 0 0 4px 14px; padding: 2px 0; background: rgba(255, 255, 255, .08); border: 0; border-radius: 8px; box-shadow: none; }
  .sf-nav-list li:hover > .sub-menu, .sf-nav-list li:focus-within > .sub-menu { display: none; }
  .sf-nav-list li.is-open > .sub-menu { display: block; }
  .sf-nav-list .sub-menu a { color: #e5f0fb; white-space: normal; padding: 9px 12px; }
  .sf-nav-list .sub-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* ---------- desktop: a big logo that spans both header rows (the band stays the same height) ---------- */
@media (min-width: 1101px) {
  .sf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 260px auto; grid-template-areas: "logo . search account" "logo nav nav nav"; align-items: center; column-gap: 18px; row-gap: 0; padding: 6px 20px 0; }
  .sf-logo { grid-area: logo; align-self: center; margin: 0 14px 6px 0; }
  .sf-logo img { height: 84px; }
  .sf-search { grid-area: search; flex: none; width: auto; }
  .sf-account { grid-area: account; }
  .sf-nav { grid-area: nav; margin: 0 -20px 0 0; padding: 0 12px 0 0; align-self: end; }
}

/* the credits line, small and out of the way at the very bottom */
.sf-credits { margin: 0; text-align: center; color: #7b8d9c; font-size: 11px; line-height: 1.4; }

/* ---------- the "send us your severe weather content" promo ---------- */
.sf-promo { display: block; width: 100%; max-width: 940px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--sf-line); box-shadow: 0 4px 16px rgba(20, 35, 47, .12); line-height: 0; transition: transform .15s, box-shadow .15s; }
.sf-promo:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 35, 47, .2); }
.sf-promo img { display: block; width: 100%; height: auto; }

/* ---------- readers' photos around the "send us your content" banner ---------- */
.sf-readers-around { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 3.7fr) minmax(110px, 1fr); gap: 10px; align-items: stretch; }
.sf-readers-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.sf-readers-side img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; border-radius: 8px; display: block; }
.sf-readers-around .sf-promo { max-width: none; margin: 0; border-radius: 10px; }
@media (max-width: 900px) {
  .sf-readers-around { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-readers-around .sf-promo { grid-column: 1 / -1; order: -1; }
  .sf-readers-side { display: contents; }
  .sf-readers-side img { aspect-ratio: 4 / 3; height: auto; }
}

/* ================= the SEQ Weather watermark must stay visible on reader photos ================= */
/* It is in each photo's bottom-left corner: crops anchor to that corner, and nothing is laid over it. */
.sf-readers-side img, .sf-news-list img, .sf-news-lead img { object-position: left bottom; }
/* the news lead: the photo sits whole at the top, the headline below it (it used to sit over the photo and its gradient) */
.sf-news-lead { min-height: 0; display: grid; align-content: start; background: #f7fafc; color: var(--sf-ink); border: 1px solid var(--sf-line); }
.sf-news-lead img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.sf-news-lead::after { display: none; }
.sf-news-lead-text { position: static; padding: 14px 16px 16px; }
.sf-news-lead-text strong { color: var(--sf-ink); }
.sf-news-lead-text > span { color: var(--sf-muted); }
/* camera tiles: the label and LIVE mark go along the top so the "VIA SEQWEATHER.COM" mark on the still stays clear at the bottom-left */
.sf-cam::after { background: linear-gradient(rgba(3, 10, 20, .8), transparent 55%); }
.sf-cam-live { top: 8px; bottom: auto; }
.sf-cam-caption { top: 26px; bottom: auto; }
/* no hero photo: the same dark graphic as the header */
.sf-hero.is-plain { background: radial-gradient(circle at 80% 30%, rgba(75, 170, 255, .30), transparent 40%), repeating-radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 36px), linear-gradient(115deg, #06182f 0%, #0a2b52 55%, #0c3f73 100%); }
.sf-hero.is-plain::before { display: none; }

/* the promo banner stands alone (reader photos are shown in the news) */
.sf-readers-around { display: block; }
.sf-readers-around .sf-promo { max-width: 940px; margin: 0 auto; }

/* membership badge next to My account */
.sf-badge { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-badge-up { background: #1792ff; }
.sf-badge-up:hover { background: #0e7ae0; color: #fff; }

/* ---------- Australia's extremes ---------- */
/* Plain on purpose: the same white card as the rest of the page, ruled rows, figures lined up. */
.sf-extremes .sf-card-head p { margin: 2px 0 0; }
.sf-extremes .sf-card-head { align-items: flex-start; }
.sf-extremes-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.sf-extremes-live { font-size: 13px; color: var(--sf-muted); }
.sf-extremes-live i { display: none; }
.sf-extremes-switch { display: inline-flex; border: 1px solid var(--sf-line); border-radius: 6px; overflow: hidden; }
.sf-extremes-switch button { padding: 5px 12px; border: 0; background: #fff; color: var(--sf-ink); font: 600 13px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.sf-extremes-switch button.is-on { background: var(--sf-ink); color: #fff; }
.sf-extremes-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 22px; }
.sf-extreme { min-width: 0; }
.sf-extreme h3 { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--sf-ink); font-size: 13px; text-transform: none; letter-spacing: 0; }
.sf-extreme ol { margin: 0; padding: 0; list-style: none; }
.sf-extreme li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--sf-line); font-size: 13.5px; }
.sf-extreme li i { font-style: normal; color: var(--sf-muted); font-size: 12px; }
.sf-extreme-who { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-extreme-who strong { font-weight: 600; }
.sf-extreme-who small { margin-left: 5px; font-size: 11.5px; color: var(--sf-muted); }
.sf-extreme li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-extreme li:first-child b { color: var(--sf-blue); }
@media (max-width: 1100px) { .sf-extremes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 700px) { .sf-extremes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .sf-extremes-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- header rings that slowly radiate outward, like a radar echo ---------- */
@property --sf-ring { syntax: "<length>"; inherits: false; initial-value: 0px; }
.sf-head::before {
  background:
    radial-gradient(circle at 88% 20%, rgba(75, 170, 255, .30), transparent 38%),
    repeating-radial-gradient(circle at 88% 20%, transparent var(--sf-ring), rgba(255, 255, 255, .10) calc(var(--sf-ring) + 1px), transparent calc(var(--sf-ring) + 2px), transparent calc(var(--sf-ring) + 38px)),
    linear-gradient(115deg, #06182f 0%, #0a2b52 55%, #0c3f73 100%);
  animation: sf-ring-out 9s linear infinite;
}
@keyframes sf-ring-out { to { --sf-ring: 38px; } }
@media (prefers-reduced-motion: reduce) { .sf-head::before { animation: none; } }

/* ---------- the radar sweep: an arm turning about the rings' centre, and blips that glow as it passes (all driven by front-page.js) ---------- */
.sf-blips { --sf-arm: 0deg; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 12px; }
.sf-blips::before { content: ""; position: absolute; left: 88%; top: 20%; width: 1800px; height: 1800px; margin: -900px 0 0 -900px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 305deg, rgba(109, 255, 176, .05) 305deg, rgba(109, 255, 176, .20) 357deg, rgba(190, 255, 220, .55) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, #000 45%, transparent 72%); mask-image: radial-gradient(circle, #000 0, #000 45%, transparent 72%);
  transform: rotate(var(--sf-arm)); }
/* Supercell echoes as they look on radar: a violet-blue fringe, green and yellow body, red and magenta core, a hook at the south-west end. Each one lights as the
   arm passes it and then fades away like the screen's glow (assets/img/echo-supercell-*.png, front-page.js sets the brightness). */
.sf-blips i { position: absolute; background: center / contain no-repeat; opacity: 0; } /* position, size and brightness are set by front-page.js */
.sf-blips i.e-1 { background-image: url("../img/echo-supercell-1.png"); }
.sf-blips i.e-2 { background-image: url("../img/echo-supercell-2.png"); }
.sf-blips i.e-3 { background-image: url("../img/echo-supercell-3.png"); }
.sf-blips i.e-4 { background-image: url("../img/echo-supercell-4.png"); }
.sf-blips i.e-5 { background-image: url("../img/echo-supercell-5.png"); }
.sf-blips i.e-6 { background-image: url("../img/echo-supercell-6.png"); }
.sf-blips i.e-7 { background-image: url("../img/echo-supercell-7.png"); }
.sf-blips i.e-8 { background-image: url("../img/echo-supercell-8.png"); }
.sf-blips i.e-9 { background-image: url("../img/echo-supercell-9.png"); }
.sf-blips i.e-10 { background-image: url("../img/echo-supercell-10.png"); }
@media (prefers-reduced-motion: reduce) { .sf-blips { display: none; } }

/* the menu must never be cut off at the header's edge: tighter spacing as the screen narrows, and wrap rather than clip as a last resort */
@media (min-width: 901px) { .sf-nav-list { flex-wrap: wrap; } .sf-nav-list a { padding-inline: clamp(6px, 1.05vw, 16px); } }
@media (min-width: 901px) and (max-width: 1320px) { .sf-nav-list > li > a { font-size: 13px; } }
@media (min-width: 1101px) and (max-width: 1200px) { .sf-nav-list > li > a { font-size: 12.5px; padding-inline: 5px; } }

/* ---------- animated weather icons (front page only: the map's many small pills stay still) ---------- */
.seqwmt-home .wx-rays { transform-box: view-box; animation: wx-spin 26s linear infinite; } /* turns about the sun's own centre, set inline on each group */
.seqwmt-home .wx-sun { transform-box: fill-box; transform-origin: center; animation: wx-pulse 4.5s ease-in-out infinite; }
.seqwmt-home .wx-cloud { animation: wx-drift 7s ease-in-out infinite alternate; }
.seqwmt-home .wx-drop { animation: wx-fall 1.15s linear infinite; }
.seqwmt-home .wx-drop:nth-child(2) { animation-delay: -.38s; }
.seqwmt-home .wx-drop:nth-child(3) { animation-delay: -.77s; }
.seqwmt-home .wx-drop:nth-child(4) { animation-delay: -.2s; }
.seqwmt-home .wx-bolt { animation: wx-flash 5.5s linear infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-pulse { 50% { transform: scale(1.09); } }
@keyframes wx-drift { from { transform: translateX(-.6px); } to { transform: translateX(.7px); } }
@keyframes wx-fall { 0% { transform: translateY(-1.6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(2.2px); opacity: 0; } }
@keyframes wx-flash { 0%, 62%, 100% { opacity: 1; } 66% { opacity: .2; } 70% { opacity: 1; } 74% { opacity: .35; } 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seqwmt-home .wx-rays, .seqwmt-home .wx-sun, .seqwmt-home .wx-cloud, .seqwmt-home .wx-drop, .seqwmt-home .wx-bolt { animation: none; } }

/* ---------- more obvious: faster, bigger movement ---------- */
.seqwmt-home .wx-rays { animation: wx-spin 9s linear infinite; }
.seqwmt-home .wx-sun { animation: wx-pulse 2.6s ease-in-out infinite; filter: drop-shadow(0 0 1.6px rgba(245, 179, 1, .9)); }
.seqwmt-home .wx-cloud { animation: wx-drift 4.2s ease-in-out infinite alternate; }
.seqwmt-home .wx-drop { animation: wx-fall .8s linear infinite; }
.seqwmt-home .wx-drop:nth-child(2) { animation-delay: -.26s; }
.seqwmt-home .wx-drop:nth-child(3) { animation-delay: -.53s; }
.seqwmt-home .wx-drop:nth-child(4) { animation-delay: -.13s; }
.seqwmt-home .wx-bolt { animation: wx-flash 3.4s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wx-pulse { 50% { transform: scale(1.2); } }
@keyframes wx-drift { from { transform: translate(-1.5px, .5px); } to { transform: translate(1.6px, -.5px); } }
@keyframes wx-fall { 0% { transform: translateY(-2.4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(3.6px); opacity: 0; } }
@keyframes wx-flash { 0%, 55%, 100% { opacity: 1; transform: scale(1); filter: none; } 58% { opacity: .1; } 62% { opacity: 1; transform: scale(1.35); filter: drop-shadow(0 0 2.5px #ffe27a); } 66% { opacity: .2; transform: scale(1); } 72% { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 3px #fff3b0); } 82% { opacity: 1; transform: scale(1); filter: none; } }

/* ---------- storm icon: three bolts that fire at different moments, lighting the cloud as they do ---------- */
.seqwmt-home .wx-bolt { animation: wx-strike 3.6s linear infinite; opacity: .55; transform-box: fill-box; transform-origin: top center; }
.seqwmt-home .wx-bolt.wx-b2 { animation-delay: 1.2s; }
.seqwmt-home .wx-bolt.wx-b3 { animation-delay: 2.4s; }
.seqwmt-home .wx-storm-cloud { animation: wx-drift 4.2s ease-in-out infinite alternate, wx-skylight 3.6s linear infinite; }
@keyframes wx-strike { 0%, 12%, 40%, 100% { opacity: .5; transform: scale(1); filter: none; } 14% { opacity: 1; transform: scale(1.45); filter: drop-shadow(0 0 2.5px #ffe27a); } 17% { opacity: .15; transform: scale(1); } 20% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 3px #fff3b0); } 28% { opacity: .8; transform: scale(1.1); } }
/* the cloud lights up three times a cycle, once for each bolt (bolts start 1.2 s apart in a 3.6 s cycle: bursts at 14%, 47% and 80%) */
@keyframes wx-skylight { 0%, 12%, 24%, 45%, 57%, 78%, 90%, 100% { filter: none; } 14%, 20% { filter: drop-shadow(0 0 2px #ffe27a) brightness(1.08); } 47%, 53% { filter: drop-shadow(0 0 2px #ffe27a) brightness(1.08); } 80%, 86% { filter: drop-shadow(0 0 2px #ffe27a) brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .seqwmt-home .wx-storm-cloud { animation: none; } }

/* ---------- the Paid member chip: gold, with a slow glint across it ---------- */
.sf-badge-paid { position: relative; overflow: hidden; padding: 3px 11px 3px 9px; color: #3a2500; font-weight: 800; letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255, 244, 190, .6);
  background: linear-gradient(135deg, #fff1a6 0%, #f4c542 32%, #d9971a 62%, #f7d75e 100%);
  border: 1px solid #fff0a0; box-shadow: 0 0 0 1px rgba(122, 78, 0, .45), 0 2px 8px rgba(245, 179, 1, .45), inset 0 1px 0 rgba(255, 255, 255, .7); }
.sf-badge-paid::before { content: "\2605"; margin-right: 5px; font-size: 11px; color: #7a4e00; }
.sf-badge-paid::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: sf-glint 4.5s ease-in-out infinite; }
@keyframes sf-glint { 0%, 55% { left: -40%; } 85%, 100% { left: 125%; } }
@media (prefers-reduced-motion: reduce) { .sf-badge-paid::after { animation: none; display: none; } }

/* ---------- chip heights, the phone header's bottom edge, and the silver "Ad free" chip for free members ---------- */
.sf-badge { display: inline-flex; align-items: center; height: 22px; padding-block: 0; line-height: 1; box-sizing: border-box; }
.sf-badge-paid { padding: 0 11px 0 9px; }
@media (max-width: 900px) { .sf-head { padding-bottom: 12px; } } /* the account row is the last row of the header on a phone: keep it clear of the edge */
.sf-badge-free { position: relative; overflow: hidden; padding: 0 11px; color: #1f2933; font-weight: 800; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  background: linear-gradient(135deg, #fbfcfd 0%, #cdd4db 34%, #94a0ac 64%, #e6ebf0 100%);
  border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(60, 72, 84, .45), 0 2px 8px rgba(190, 205, 220, .4), inset 0 1px 0 rgba(255, 255, 255, .85); }
.sf-badge-free::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); animation: sf-glint 5.5s ease-in-out infinite 1.5s; }
.sf-badge-free:hover { color: #0b141b; filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .sf-badge-free::after { animation: none; display: none; } }
.sf-badge-paid::before { content: none; } /* the chip reads "SEQWeather +": the plus is the brand, so no star */
.sf-badge-paid { padding: 0 11px; font-size: 13px; }

/* ---------- Log in drop-down under the button ---------- */
.sf-account { position: relative; }
.sf-login-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 290px; max-width: calc(100vw - 32px); padding: 16px; color: var(--sf-ink); background: #fff; border: 1px solid var(--sf-line); border-radius: 12px; box-shadow: 0 16px 36px rgba(6, 24, 47, .4); }
.sf-login-pop[hidden] { display: none; }
.sf-login-pop::before { content: ""; position: absolute; top: -7px; right: 28px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--sf-line); border-top: 1px solid var(--sf-line); transform: rotate(45deg); }
.sf-login-pop form { display: grid; gap: 10px; }
.sf-login-pop label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; }
.sf-login-pop input[type="text"], .sf-login-pop input[type="password"] { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #c3d0dc; border-radius: 8px; font: 400 15px "Segoe UI", system-ui, sans-serif; color: var(--sf-ink); background: #fff; }
.sf-login-pop input:focus { outline: 2px solid var(--sf-blue); outline-offset: 1px; }
.sf-login-pop .sf-login-remember { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.sf-login-go { padding: 10px; border: 0; border-radius: 8px; background: #1792ff; color: #fff; font: 700 15px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.sf-login-go:hover { background: #0e7ae0; }
.sf-login-go:disabled { opacity: .7; cursor: default; }
.sf-login-error { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fde8e8; color: #8a1c1c; font-size: 13px; }
.sf-login-links { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-size: 13px; }

/* the password reset view inside the log in drop-down */
.sf-login-pop [hidden] { display: none !important; }
.sf-reset { display: grid; gap: 10px; }
.sf-reset p { margin: 0; }
.sf-reset-lead { font-size: 13px; color: #53677a; }
.sf-reset form { display: grid; gap: 10px; }
.sf-reset-done { padding: 8px 10px; border-radius: 8px; background: #e3f6ea; color: #14612f; font-size: 13px; }

/* the menu scales with the screen so all seven items stay on one row (the earlier fixed steps left a gap around 1270-1400 px) */
@media (min-width: 901px) {
  .sf-nav-list > li > a { font-size: clamp(12.5px, 1.02vw, 14px); padding-inline: clamp(5px, 0.8vw, 12px); }
}

/* the log in box must sit above the menu row that is drawn after it */
.sf-head > .sf-account { z-index: 30; }
.sf-login-pop { z-index: 80; }
.sf-badge-paid { font-size: 12.5px; }

/* ---- My places (saved places, members) ---- */
.sf-myplaces { margin: 16px 0; padding: 16px 18px; }
.sf-myplaces[hidden] { display: none; }
.sf-place-intro { margin: 8px 0; color: var(--sf-muted, #5b6770); font-size: .95rem; }
.sf-place-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sf-place-add, .sf-place-join, .sf-place-login { font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 14px; min-height: 40px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.sf-place-join { background: #0b5cad; border-color: #0b5cad; color: #fff; }
.sf-place-msg { margin: 6px 0; font-size: .9rem; color: #b32121; }
.sf-place-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sf-place-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; }
.sf-place-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sf-place-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sf-place-btn { font: inherit; font-size: .8rem; padding: 6px 10px; min-height: 32px; border-radius: 6px; border: 1px solid rgba(127, 127, 127, .45); background: transparent; color: inherit; cursor: pointer; }
.sf-place-btn.is-danger { color: #b32121; }
.sf-place-btn[hidden] { display: none; }
.sf-place-line { font-size: .92rem; }
.sf-place-eta { font-size: .85rem; color: var(--sf-muted, #5b6770); }
.sf-place-eta.is-rain { color: #0b5cad; font-weight: 600; }
.sf-place-eta.is-soon { color: #c75a00; font-weight: 600; }

/* ---- the shared site header (printed by the theme on every page; see class-seqweather-site-header.php) ---- */
.seqwmt-sitehead { position: relative; z-index: 2000; margin-top: 12px; margin-bottom: 14px; }
.seqwmt-sitehead .seq-ad-slot { margin: 0; }
.sf-place-search { display: flex; gap: 8px; margin: 10px 0; }
.sf-place-input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; min-height: 40px; border: 1px solid var(--sf-line, #dde5ec); border-radius: 8px; background: #fff; color: inherit; }