/*
 * WOW Cha-Am v1.5 page widgets (includes/page-widgets.php):
 * WOW การ์ดลิงก์ (.wow-lc), WOW สภาพอากาศ แบบละเอียด (.wow-wxd),
 * WOW พยากรณ์รายวัน (.wow-fc), WOW พยากรณ์รายชั่วโมง (.wow-fh),
 * WOW Hero background modes, content H2 numbering (.wow-num-h2) and [wow_updated].
 * Loaded after wow-core.css; uses its design tokens.
 */

/* Coloured weather icons (two-tone strokes + soft fills) ------------------- */
.wow-wxi .wow-icon { overflow: visible; }
.wow-wxi .wow-icon--sun { color: #f59e0b; }
.wow-wxi .wow-icon--sun circle { fill: #fcd34d; }
.wow-wxi .wow-icon--cloud-sun { color: #f59e0b; }
.wow-wxi .wow-icon--cloud-sun path:last-child { stroke: #7fb0e3; fill: #eef6fe; }
.wow-wxi .wow-icon--cloud { color: #7fb0e3; }
.wow-wxi .wow-icon--cloud path { fill: #eef6fe; }
.wow-wxi .wow-icon--cloud-rain, .wow-wxi .wow-icon--cloud-drizzle { color: #2f80ed; }
.wow-wxi .wow-icon--cloud-rain path:first-child, .wow-wxi .wow-icon--cloud-drizzle path:first-child, .wow-wxi .wow-icon--cloud-fog path:first-child { stroke: #7fb0e3; fill: #eef6fe; }
.wow-wxi .wow-icon--cloud-lightning { color: #f59e0b; }
.wow-wxi .wow-icon--cloud-lightning path:first-child { stroke: #6b86c9; fill: #e9eefb; }
.wow-wxi .wow-icon--cloud-fog { color: #94a3b8; }
.wow-wxi .wow-icon--moon, .wow-wxi .wow-icon--cloud-moon { color: #6670c4; }
.wow-wxi .wow-icon--moon path { fill: #e6e8fb; }
.wow-wxi .wow-icon--cloud-moon path:first-child { stroke: #7fb0e3; fill: #eef6fe; }
.wow-wxi .wow-icon--snowflake { color: #60a5fa; }
.wow-wxi .wow-icon--droplet { color: #2f80ed; }
.wow-wxi .wow-icon--droplet path { fill: #cfe3fb; }

/* ==========================================================================
 * WOW สภาพอากาศ — แบบละเอียด (.wow-wxd)
 * ========================================================================== */
/* v1.6: no container queries (Safari/Elementor mobile height bugs): the tiles and the two panels wrap by their own width. */
.wow-wxd { width: 100%; min-width: 0; color: var(--wow-navy); }
.wow-wxd p { margin: 0; }
.wow-wxd__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; box-shadow: var(--wow-shadow); }
.wow-wxd__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wow-wxd__place { display: flex; align-items: center; gap: 10px; font: 600 1.05rem/1.3 var(--wow-font-head); color: var(--wow-navy); }
.wow-wxd__pin { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--wow-sky-soft); color: var(--wow-primary); }
.wow-wxd__pin .wow-icon { width: 18px; height: 18px; }
.wow-wxd__now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.wow-wxd__temp { display: flex; align-items: flex-start; color: var(--wow-navy); font: 700 clamp(3.6rem, 4vw + 1.6rem, 5.4rem)/.95 var(--wow-font-head); letter-spacing: -.03em; }
.wow-wxd__temp span { margin: .08em 0 0 .06em; font-size: .42em; font-weight: 600; letter-spacing: 0; }
.wow-wxd__cond { display: grid; gap: 2px; min-width: 0; }
.wow-wxd__icon { display: inline-flex; margin-bottom: 4px; }
.wow-wxd__icon .wow-icon { width: 64px; height: 64px; stroke-width: 1.6; }
.wow-wxd__label { font: 600 1.15rem/1.3 var(--wow-font-head); color: var(--wow-navy); }
.wow-wxd__feels { color: var(--wow-muted); font-size: .92rem; }
.wow-wxd__updated { display: flex; align-items: center; gap: 6px; color: var(--wow-muted); font-size: .82rem; }
.wow-wxd__updated .wow-icon { flex: none; width: 15px; height: 15px; color: var(--wow-primary); }
a.wow-wxd__more { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--wow-sky-soft); color: var(--wow-primary); font-size: .85rem; font-weight: 600; text-decoration: none; }
a.wow-wxd__more .wow-icon { width: 14px; height: 14px; }
.wow-wxd__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 125px), calc((100% - 20px) / 3)), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.wow-wxd__tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--wow-radius); background: var(--wow-bg-soft); }
.wow-wxd__ticon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--wow-primary); box-shadow: 0 2px 8px rgba(15, 46, 92, .06); }
.wow-wxd__ticon .wow-icon { width: 22px; height: 22px; }
.wow-wxd__tile--uv .wow-wxd__ticon, .wow-wxd__tile--sunrise .wow-wxd__ticon, .wow-wxd__tile--sunset .wow-wxd__ticon { color: #f59e0b; }
.wow-wxd__ttext { display: grid; gap: 1px; min-width: 0; }
.wow-wxd__tlabel { color: var(--wow-muted); font-size: .8rem; line-height: 1.3; }
.wow-wxd__tval { color: var(--wow-navy); font: 700 1.08rem/1.25 var(--wow-font-head); }
.wow-wxd__tsub { color: var(--wow-muted); font-size: .74rem; line-height: 1.3; }
/* Side by side from about 860px of card width; the divider sits in the 56px gap and is clipped
 * off the card edge once the tiles wrap below. */
.wow-wxd__card.has-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 56px; overflow: hidden; }
.wow-wxd__card.has-tiles .wow-wxd__main { flex: .9 1 280px; }
.wow-wxd__card.has-tiles .wow-wxd__tiles { position: relative; flex: 1.4 1 470px; min-width: 0; }
.wow-wxd__card.has-tiles .wow-wxd__tiles::before { content: ""; position: absolute; top: 0; bottom: 0; left: -29px; border-left: 1px solid var(--wow-line); }
@media (max-width: 400px) { .wow-wxd__card.has-tiles .wow-wxd__tiles { flex-basis: 100%; } }
.wow-wxd__card--empty { display: flex; align-items: center; gap: 14px; border-style: dashed; box-shadow: none; color: var(--wow-muted); }
.wow-wxd__card--empty .wow-wxd__icon .wow-icon { width: 44px; height: 44px; color: #93b8e6; }
.wow-wxd__msg { color: var(--wow-navy); font-weight: 600; }
body[class*="elementor-kit-"] a.wow-wxd__more { color: var(--wow-primary); text-decoration: none; }

/* ==========================================================================
 * WOW พยากรณ์รายวัน (.wow-fc) and รายชั่วโมง (.wow-fh)
 * ========================================================================== */
.wow-fc, .wow-fh { width: 100%; min-width: 0; }
.wow-fc__list { display: grid; grid-template-columns: repeat(var(--wow-fc-cols, var(--wow-fc-n, 7)), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 4px 2px 6px; list-style: none; }
.wow-fc__day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 16px 8px 14px; border: 1px solid var(--wow-line); border-radius: var(--wow-radius); background: #fff; box-shadow: 0 4px 14px rgba(15, 46, 92, .05); color: var(--wow-navy); text-align: center; }
.wow-fc__day p { margin: 0; }
.wow-fc.is-today-on .wow-fc__day.is-today { border-color: #9ccaf4; background: linear-gradient(180deg, #eaf4fd 0%, #f5faff 100%); box-shadow: 0 0 0 1px #9ccaf4, 0 8px 20px rgba(10, 108, 219, .1); }
.wow-fc__name { font: 600 .98rem/1.3 var(--wow-font-head); }
.wow-fc__date { color: var(--wow-muted); font-size: .8rem; }
.wow-fc__icon { display: inline-flex; margin: 8px 0 6px; }
.wow-fc__icon .wow-icon { width: 46px; height: 46px; stroke-width: 1.6; }
.wow-fc__temp { font: 600 1.15rem/1.2 var(--wow-font-head); white-space: nowrap; }
.wow-fc__temp b { font-weight: 700; }
.wow-fc__temp span:not(.screen-reader-text) { color: var(--wow-muted); font-weight: 500; }
.wow-fc__label { color: var(--wow-muted); font-size: .8rem; line-height: 1.35; }
.wow-fc__rain { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: #2f80ed; font-size: .82rem; font-weight: 600; }
.wow-fc__rain .wow-icon { width: 14px; height: 14px; }
.wow-fc__empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; border: 1px dashed #c4d8f2; border-radius: var(--wow-radius); background: var(--wow-bg-soft); color: var(--wow-muted); }
.wow-fc__empty .wow-icon { flex: none; width: 32px; height: 32px; color: #93b8e6; }
/* v1.6: by screen width (was a container query); per-device columns still come from --wow-fc-cols. */
@media (max-width: 800px) {
	.wow-fc:not(.is-scroll) .wow-fc__list { grid-template-columns: repeat(var(--wow-fc-cols, 4), minmax(0, 1fr)); }
	.wow-fc.is-scroll .wow-fc__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(108px, calc((100% - 36px) / 3.4)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin; }
	.wow-fc.is-scroll .wow-fc__day { scroll-snap-align: start; }
}
@media (max-width: 460px) {
	.wow-fc:not(.is-scroll) .wow-fc__list { grid-template-columns: repeat(var(--wow-fc-cols, 3), minmax(0, 1fr)); gap: 8px; }
}

.wow-fh__scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; box-shadow: var(--wow-shadow); }
.wow-fh__scroller:focus-visible { outline: 2px solid var(--wow-primary); outline-offset: 2px; }
.wow-fh__list { display: flex; gap: 0; width: max-content; min-width: 100%; margin: 0; padding: 10px; list-style: none; box-sizing: border-box; }
.wow-fh__hour { position: relative; display: flex; flex: 1 0 74px; flex-direction: column; align-items: center; gap: 6px; padding: 26px 8px 12px; border-radius: var(--wow-radius); color: var(--wow-navy); scroll-snap-align: start; text-align: center; }
.wow-fh__hour + .wow-fh__hour::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 16px; width: 1px; background: var(--wow-line); }
.wow-fh__hour.is-now { background: var(--wow-sky-soft); }
.wow-fh__hour.is-now::before, .wow-fh__hour.is-now + .wow-fh__hour::before { display: none; }
.wow-fh__day { position: absolute; top: 6px; left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--wow-primary); color: #fff; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.wow-fh__time { color: var(--wow-muted); font-size: .82rem; font-weight: 600; }
.wow-fh__hour.is-now .wow-fh__time { color: var(--wow-primary); }
.wow-fh__icon { display: inline-flex; }
.wow-fh__icon .wow-icon { width: 32px; height: 32px; stroke-width: 1.7; }
.wow-fh__temp { font: 700 1.05rem/1.2 var(--wow-font-head); }
.wow-fh__rain { display: inline-flex; align-items: center; gap: 3px; color: #7b93b3; font-size: .76rem; font-weight: 600; }
.wow-fh__rain.is-high { color: #2f80ed; }
.wow-fh__rain .wow-icon { width: 12px; height: 12px; }

/* ==========================================================================
 * WOW การ์ดลิงก์ (.wow-lc)
 * ========================================================================== */
.wow-lc { --lc-accent: var(--wow-primary); --wow-lc-min: 168px; display: grid; grid-template-columns: repeat(var(--wow-lc-cols, auto-fit), minmax(min(100%, var(--wow-lc-min)), 1fr)); gap: 18px; width: 100%; }
.wow-lc--image { --wow-lc-min: 230px; }
.wow-lc--side { --wow-lc-min: 270px; }
@media (max-width: 767px) {
	.wow-lc.has-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wow-lc-min)), 1fr)); }
	.wow-lc--icon { --wow-lc-min: 150px; gap: 12px; }
}
.wow-lc__card { --lc-c: var(--lc-accent, var(--wow-primary)); position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; box-sizing: border-box; border: 1px solid var(--wow-line); border-radius: var(--wow-radius-lg); background: #fff; box-shadow: var(--wow-shadow); color: var(--wow-text); transition: transform .2s, box-shadow .2s, border-color .2s; }
.wow-lc__card.has-link:hover { transform: translateY(-3px); box-shadow: var(--wow-shadow-lg); border-color: #cfe2f7; }
.wow-lc__card.has-link:focus-within { box-shadow: 0 0 0 3px rgba(10, 108, 219, .35), var(--wow-shadow); }
.wow-lc__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wow-lc__title { margin: 0; color: var(--wow-navy); font: 600 1.06rem/1.35 var(--wow-font-head); }
.wow-lc__link, .wow-lc__link:hover, .wow-lc__link:visited { color: inherit; text-decoration: none; }
.wow-lc__link:focus { outline: none; }
.wow-lc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.wow-lc__card .wow-lc__link::after { border-radius: var(--wow-radius-lg); }
.wow-lc__text { margin: 0; color: var(--wow-muted); font-size: .88rem; line-height: 1.55; }
.wow-lc__icon { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--lc-c) 12%, #fff); color: var(--lc-c); }
.wow-lc__icon .wow-icon { width: 28px; height: 28px; }
.wow-lc__arrow { display: grid; place-items: center; flex: none; width: 32px; height: 32px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--lc-c) 45%, #fff); border-radius: 50%; background: #fff; color: var(--lc-c); transition: background .2s, color .2s, border-color .2s; }
.wow-lc__arrow .wow-icon { width: 16px; height: 16px; }
.wow-lc__card.has-link:hover .wow-lc__arrow { border-color: var(--lc-c); background: var(--lc-c); color: #fff; }
.wow-lc__media { position: relative; overflow: hidden; background: linear-gradient(140deg, #cfe6fb 0%, #eaf4fd 100%); }
.wow-lc__media img, .wow-lc__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wow-lc__cond { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 2px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .7rem; font-weight: 600; pointer-events: none; }
.wow-lc__cond.is-on { background: #dcfce7; color: #166534; }
.wow-lc__card.is-weather-hidden { opacity: .55; border-style: dashed; }

/* Layout: ไอคอน */
.wow-lc--icon .wow-lc__card { align-items: center; gap: 14px; padding: 24px 16px 20px; text-align: center; }
.wow-lc--icon .wow-lc__body { flex: 1 1 auto; align-items: center; }
.wow-lc--icon .wow-lc__arrow { margin-top: auto; }

/* Layout: รูป + ไอคอนซ้อน */
.wow-lc--image .wow-lc__card { overflow: hidden; }
.wow-lc--image .wow-lc__media { flex: none; height: var(--wow-lc-img-h, 150px); }
.wow-lc--image .wow-lc__icon { position: relative; z-index: 1; width: 52px; height: 52px; margin: -26px 0 0 16px; background: #fff; box-shadow: 0 4px 14px rgba(15, 46, 92, .14); }
.wow-lc--image .wow-lc__icon .wow-icon { width: 24px; height: 24px; }
.wow-lc--image .wow-lc__body { flex: 1 1 auto; padding: 10px 60px 18px 18px; }
.wow-lc--image .no-icon .wow-lc__body { padding-top: 16px; }
.wow-lc--image .wow-lc__arrow { position: absolute; right: 16px; bottom: 18px; }

/* Layout: รูปด้านข้าง */
.wow-lc--side .wow-lc__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 46%); grid-template-rows: auto 1fr; grid-template-areas: "icon media" "body media"; overflow: hidden; }
.wow-lc--side .wow-lc__card.no-image { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "body"; }
.wow-lc--side .wow-lc__media { grid-area: media; min-height: var(--wow-lc-img-h, 150px); }
.wow-lc--side .wow-lc__card.no-image .wow-lc__media { display: none; }
.wow-lc--side .wow-lc__icon { grid-area: icon; width: 54px; height: 54px; margin: 18px 0 0 18px; }
.wow-lc--side .wow-lc__body { grid-area: body; padding: 12px 14px 20px 18px; }
.wow-lc--side .no-icon .wow-lc__body { padding-top: 20px; }
.wow-lc--side .wow-lc__card.has-link .wow-lc__body { padding-bottom: 54px; }
.wow-lc--side .wow-lc__arrow { position: absolute; right: 14px; bottom: 14px; z-index: 1; box-shadow: 0 2px 8px rgba(15, 46, 92, .12); }
.wow-lc--side .no-image .wow-lc__arrow { right: 16px; }

/* Elementor kit overrides (links, images). */
body[class*="elementor-kit-"] .wow-lc a.wow-lc__link { color: inherit; text-decoration: none; }
body[class*="elementor-kit-"] .wow-lc .wow-lc__media img { height: 100%; max-width: 100%; border-radius: 0; }
.elementor .wow-lc .wow-lc__media img { height: 100%; }

/* ==========================================================================
 * WOW Hero + ค้นหา: background modes
 * ========================================================================== */
.wow-hero--transparent .wow-hero__bg { background: none; }
.wow-hero--no-overlay .wow-hero__bg::after { display: none; }
/* Transparent hero inside an Elementor container: let the container's background (or slideshow) fill the height. */
.elementor-widget-wow-hero .wow-hero--transparent { background: transparent; }

/* ==========================================================================
 * Numbered H2 headings: add the class wow-num-h2 to any container (Elementor:
 * Advanced → CSS Classes) or switch on "ใส่เลขหน้าหัวข้อในเนื้อหาด้วย" in WOW สารบัญ.
 * ========================================================================== */
.wow-num-h2 { counter-reset: wow-h2; }
.wow-num-h2 h2:not(.wow-num-skip):not(.wow-toc-skip) { counter-increment: wow-h2; }
.wow-num-h2 h2:not(.wow-num-skip):not(.wow-toc-skip)::before { content: counter(wow-h2, decimal-leading-zero); display: inline-grid; place-items: center; width: 2.25em; height: 2.25em; margin: -.2em .6em 0 0; border-radius: 50%; background: var(--wow-sky-soft); color: var(--wow-primary); font: 700 .78em/1 var(--wow-font-head); vertical-align: middle; letter-spacing: 0; box-shadow: inset 0 0 0 1px #d3e6fb; }
.wow-num-h2 .wow-toc h2::before, .wow-num-h2 header h2::before, .wow-num-h2 footer h2::before { content: none; }

/* [wow_updated] */
.wow-updated { color: var(--wow-muted); font-size: .85rem; }