/* mod_smhiseaforecast – SMHI:s sjöväderprognos (stil som mod_vivastation) */
.smhi-sea {
  --sea-blue: #00508c;
  --sea-head-bg: #e6f4fb;
  --sea-border: #b8c7d4;
  --sea-muted: #5a6670;
  container-type: inline-size;
  font-family: inherit;
  color: inherit;
}
.smhi-sea *, .smhi-sea *::before, .smhi-sea *::after { box-sizing: border-box; }
.smhi-sea h3, .smhi-sea h4, .smhi-sea p { margin: 0; }

/* Karta + panel: bredvid varandra när det får plats, annars under varandra */
.smhi-sea .smhi-sea-top { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container (min-width: 640px) {
  .smhi-sea .smhi-sea-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}

/* Karta */
.smhi-sea .smhi-sea-mapwrap { border-radius: 6px; overflow: hidden; border: 1px solid var(--sea-border); border-top: 3px solid var(--sea-blue); background: var(--sea-head-bg); }
.smhi-sea .smhi-sea-map { width: 100%; aspect-ratio: 520 / 448; min-height: 260px; background: var(--sea-head-bg); z-index: 0; font: inherit; }
.smhi-sea .smhi-sea-map .leaflet-control-attribution { font-size: .7rem; }
.smhi-sea .smhi-sea-map .leaflet-interactive:focus { outline: none; }
.smhi-sea-tip { font: inherit; font-size: .85rem; }

/* Panel */
.smhi-sea .smhi-sea-panel { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.smhi-sea .smhi-sea-label { font-weight: 600; margin-bottom: -.4rem; }
.smhi-sea .smhi-sea-select { width: 100%; padding: .45rem .5rem; border: 1px solid var(--sea-border); border-radius: 4px; background: #fff; font: inherit; color: inherit; }
.smhi-sea .smhi-sea-select:focus-visible { outline: 3px solid #45b9f2; outline-offset: 1px; }
.smhi-sea .smhi-sea-wind { font-size: .9rem; }

.smhi-sea .smhi-sea-forecast,
.smhi-sea .smhi-sea-overview { background: var(--sea-head-bg); border-radius: 6px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.smhi-sea .smhi-sea-forecast[hidden] { display: none; }
.smhi-sea .smhi-sea-forecast h3,
.smhi-sea .smhi-sea-overview h3 { font-size: 1.25rem; color: var(--sea-blue); line-height: 1.25; }
.smhi-sea .smhi-sea-sub { font-weight: 600; font-size: .9rem; }
.smhi-sea .smhi-sea-updated { font-size: .85rem; color: var(--sea-muted); }

.smhi-sea .smhi-sea-error,
.smhi-sea .smhi-sea-stale { background: #fdecea; color: #8a1f11; border-radius: 6px; padding: .75rem 1rem; }
.smhi-sea .smhi-sea-stale { background: #fff4e5; color: #6b3d00; font-size: .9rem; padding: .5rem .75rem; }

/* Alla områden */
.smhi-sea .smhi-sea-all { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.smhi-sea .smhi-sea-all-title { font-size: 1.35rem; color: var(--sea-blue); }
.smhi-sea .smhi-sea-item { border-left: 3px solid var(--sea-blue); padding-left: .75rem; }
.smhi-sea .smhi-sea-item h4 { font-size: 1.05rem; margin-bottom: .2rem; }

.smhi-sea .smhi-sea-source { font-size: .75rem; margin-top: 1rem; }

/* Ljus bakgrundskarta i VivaStation-stil: OpenStreetMap i dämpade blå toner */
.smhi-sea .smhi-sea-map.is-light .leaflet-tile-pane { filter: grayscale(1) sepia(.25) hue-rotate(165deg) saturate(1.6) brightness(1.08) contrast(.82); }
.smhi-sea .smhi-sea-map .leaflet-control-zoom { border: 1px solid var(--sea-border); box-shadow: none; }
.smhi-sea .smhi-sea-map .leaflet-control-zoom a { color: var(--sea-blue); }
.smhi-sea .smhi-sea-map .leaflet-control-zoom a:hover { background: var(--sea-head-bg); }
.smhi-sea .smhi-sea-map .leaflet-control-attribution { background: rgba(255,255,255,.8); }
.smhi-sea .smhi-sea-map .leaflet-control-attribution a { color: var(--sea-blue); }

/* Varningsfärger (som SMHI:s varningsskala) */
.smhi-sea { --warn-YELLOW: #ffd400; --warn-ORANGE: #ff8a00; --warn-RED: #e3001b; --warn-MESSAGE: #9fb6c8; }
.smhi-sea .smhi-sea-lvl-YELLOW { --warn: var(--warn-YELLOW); }
.smhi-sea .smhi-sea-lvl-ORANGE { --warn: var(--warn-ORANGE); }
.smhi-sea .smhi-sea-lvl-RED { --warn: var(--warn-RED); }
.smhi-sea .smhi-sea-lvl-MESSAGE { --warn: var(--warn-MESSAGE); }
.smhi-sea .smhi-sea-tri { fill: var(--warn, var(--warn-MESSAGE)); stroke: #1d1d1b; stroke-width: 1; stroke-linejoin: round; }
.smhi-sea .smhi-sea-wicon { display: inline-flex; width: 1.25rem; height: 1.15rem; flex: none; }
.smhi-sea .smhi-sea-wicon svg, .smhi-sea .smhi-sea-marker svg { width: 100%; height: 100%; display: block; overflow: visible; }
.smhi-sea .smhi-sea-marker { background: none; border: 0; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* Varningar i panelen */
.smhi-sea .smhi-sea-warnings { display: flex; flex-direction: column; gap: .6rem; }
.smhi-sea .smhi-sea-warnings[hidden] { display: none; }
.smhi-sea .smhi-sea-warnings h3 { font-size: 1.1rem; color: var(--sea-blue); }
.smhi-sea .smhi-sea-warnings.is-empty { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.smhi-sea .smhi-sea-nowarn { font-size: .9rem; color: var(--sea-muted); }
.smhi-sea .smhi-sea-nowarn::before { content: "✓ "; color: #2e7d32; font-weight: 700; }
.smhi-sea .smhi-sea-wcard { border: 1px solid var(--sea-border); border-left: 6px solid var(--warn); border-radius: 6px; padding: .65rem .85rem; background: #fff; display: flex; flex-direction: column; gap: .3rem; }
.smhi-sea .smhi-sea-whead { display: flex; align-items: center; gap: .4rem; }
.smhi-sea .smhi-sea-wlevel { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.smhi-sea .smhi-sea-wcard h4 { font-size: 1rem; }
.smhi-sea .smhi-sea-wtime, .smhi-sea .smhi-sea-wareas { font-size: .85rem; color: var(--sea-muted); }
.smhi-sea .smhi-sea-wcard details { font-size: .9rem; }
.smhi-sea .smhi-sea-wcard summary { cursor: pointer; color: var(--sea-blue); font-weight: 500; }
.smhi-sea .smhi-sea-wdesc { margin-top: .45rem; }
.smhi-sea .smhi-sea-wdesc h5 { margin: 0 0 .15rem; font-size: .85rem; }
.smhi-sea .smhi-sea-wdesc p { white-space: pre-line; }
.smhi-sea .smhi-sea-wlink { font-size: .8rem; }
.smhi-sea .smhi-sea-wlink a, .smhi-sea .smhi-sea-source a { color: var(--sea-blue); }

/* Varningsmärken i listan över alla områden */
.smhi-sea .smhi-sea-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 .3rem; }
.smhi-sea .smhi-sea-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .1rem .5rem .1rem .3rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 22%, #fff); border: 1px solid var(--warn); }
.smhi-sea .smhi-sea-badge .smhi-sea-wicon { width: 1rem; height: .95rem; }