/* SinkAlert Flood - ทางหลวงน้ำท่วม/ปิดช่องจราจรของกรมทางหลวง: หมุดสามเหลี่ยมบนแผนที่ + popup (ไม่มี section บนหน้า เจ้าของสั่ง 2026-10-02)
   hw-closed = ปิดช่องจราจร (crit), hw-flood = น้ำท่วม (warn), hw-other = ภัยอื่น เช่น ดินโคลนถล่ม วาตภัย (accent) */
.hw-closed { --c: var(--crit); } .hw-flood { --c: var(--warn); } .hw-other { --c: var(--accent); }

/* ---------- หมุดสามเหลี่ยม (คลองวงกลม ถนนข้าวหลามตัด) ---------- */
.hw-pin { background: none; border: 0; cursor: pointer; }
.hw-pin i { position: absolute; left: 50%; top: 50%; width: 15px; height: 14px; transform: translate(-50%, -55%); background: var(--c);
    clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1.5px var(--core)); }
.hw-pin.hw-closed i { width: 19px; height: 17px; }
.hw-tri { display: inline-block; width: 11px; height: 10px; margin-right: 7px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.legend .hw-tri { border-radius: 0; }
.hw-legend { align-items: center; }
.hw-legend b { color: var(--strong); font-weight: 600; }
.hw-legend small { flex-basis: 100%; color: var(--faint); font-size: .8rem; }
.hw-legend.is-stale small { color: var(--warn); }
.hw-toggle { margin-left: auto; border: 1px solid var(--line-2); background: transparent; color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: .86rem; cursor: pointer; }
.hw-toggle:hover { border-color: var(--accent); }

/* ---------- popup (พื้นขาวของ Leaflet แบบเดียวกับจุดเสี่ยง .rk-pop) ---------- */
.hw-leaf .leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.hw-pop { color: #20394a; }
.hw-pop .hw-tag { display: inline-block; padding: 1px 9px; border-radius: 6px; font-size: .78rem; font-weight: 600;
    color: color-mix(in srgb, var(--c) 75%, #0b1c27); background: color-mix(in srgb, var(--c) 16%, #fff); }
.hw-pop > b { display: block; margin-top: 6px; color: #0b1c27; font-size: .98rem; line-height: 1.35; }
.hw-pop small { display: block; color: #4d6371; font-size: .8rem; line-height: 1.4; }
.hw-pop p { margin: 6px 0 0; font-size: .84rem; line-height: 1.5; }
.hw-pop .hw-lvl b { color: color-mix(in srgb, var(--c) 80%, #0b1c27); font-size: 1rem; }
.hw-pop .hw-note { color: #5a7384; font-size: .76rem; }
.hw-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hw-media a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e3ecf0; }
.hw-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-vid i { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; color: #fff; background: rgba(0, 0, 0, .5); }

@media (max-width: 640px) {
    .hw-toggle { margin-left: 0; }
}