/**
 * HT Weather Widget — Intel WX-1 + WX-2 styles
 *
 * Trek page:  #ht-weather-widget  (.ht-wx-*)
 * Hub page:   #ht-region-alerts   (.ht-region-*)
 *
 * Brand: #013C1A (header/footer) · #01A347 (CTA green)
 * Loaded: conditionally on product pages (supported slugs) + hub page shortcode
 */


/* ============================================================================
   TREK PAGE — FORECAST WIDGET
   ========================================================================== */

.ht-weather-widget {
	margin: 1.5rem 0 2rem;
	font-family: inherit;
}

/* Card shell */
.ht-wx-inner {
	background: #fff;
	border: 1px solid #c8dcc8;
	border-radius: 8px;
	padding: 1rem 1.25rem 0.85rem;
	box-shadow: 0 2px 10px rgba(1, 60, 26, 0.08);
}

/* ── Alert banner ───────────────────────────────────────────────────── */
.ht-wx-alert {
	display: block;
	padding: 0.65rem 0.9rem 0.55rem;
	border-radius: 5px;
	line-height: 1.45;
	margin-bottom: 0.9rem;
}
.ht-wx-alert--green  { background: #f1f9f4; color: #1b5e20; border-left: 3px solid #43a047; }
.ht-wx-alert--yellow { background: #fffde7; color: #7a5800; border-left: 3px solid #f9a825; }
.ht-wx-alert--orange { background: #fff3e0; color: #bf360c; border-left: 3px solid #e65100; }
.ht-wx-alert--red    { background: #ffebee; color: #b71c1c; border-left: 3px solid #c62828; }
.ht-wx-alert-head    { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.ht-wx-alert-badge   { font-size: 0.88rem; line-height: 1; flex-shrink: 0; }
.ht-wx-alert-label   { font-size: 0.82rem; font-weight: 700; }
.ht-wx-alert-body    { font-size: 0.79rem; margin: 0.1rem 0 0.2rem; }
.ht-wx-alert-raw     { font-size: 0.72rem; opacity: 0.78; margin: 0 0 0.1rem; }
.ht-wx-alert-time    { font-size: 0.66rem; opacity: 0.58; margin: 0; }
.ht-wx-alert-source  { font-size: 0.63rem; opacity: 0.52; margin-top: 0.4rem; padding-top: 0.3rem; border-top: 1px solid rgba(0,0,0,0.08); }

/* ── Location tabs (mobile only — hidden on desktop via media query) ── */
.ht-wx-loc-tabs {
	display: none;
	gap: 0;
	border-bottom: 2px solid #e4ede4;
	margin-bottom: 0.65rem;
}
.ht-wx-loc-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 0.3rem 0.85rem 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: #888;
	cursor: pointer;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color 0.12s;
	font-family: inherit;
	white-space: nowrap;
}
.ht-wx-loc-tab--active {
	color: #013C1A;
	border-bottom-color: #01A347;
}
.ht-wx-loc-tab:hover:not( .ht-wx-loc-tab--active ) {
	color: #013C1A;
}

/* Hidden class: toggled by JS on mobile, overridden on desktop */
.ht-wx-loc-hidden { display: none; }

/* ── Location header row (above each strip section) ──────────────────── */
.ht-wx-loc-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}
.ht-wx-loc-icon {
	font-size: 0.9rem;
	color: #013C1A;
	flex-shrink: 0;
}
.ht-wx-loc-name {
	font-size: 0.82rem;
	font-weight: 700;
	color: #013C1A;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.ht-wx-loc-ref {
	font-size: 0.62rem;
	color: #888;
	margin-left: auto;
	background: #f0f5f0;
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	white-space: nowrap;
}

/* ── Fallback flat header (no waypoints) ──────────────────────────────── */
.ht-wx-header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.8rem;
}
.ht-wx-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: #013C1A;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.ht-wx-elev {
	font-size: 0.73rem;
	color: #555;
	background: #f0f5f0;
	padding: 0.18rem 0.5rem;
	border-radius: 3px;
}

/* ── Forecast strip ─────────────────────────────────────────────────── */
.ht-wx-strip {
	display: flex;
	gap: 0.45rem;
	overflow-x: auto;
	padding-bottom: 0.35rem;
	scrollbar-width: thin;
	scrollbar-color: #b0cdb0 transparent;
}
.ht-wx-strip::-webkit-scrollbar       { height: 4px; }
.ht-wx-strip::-webkit-scrollbar-track  { background: transparent; }
.ht-wx-strip::-webkit-scrollbar-thumb  { background: #b0cdb0; border-radius: 2px; }

/* Day card */
.ht-wx-day {
	flex: 0 0 82px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	background: #f5fbf5;
	border: 1px solid #d8ecd8;
	border-radius: 6px;
	padding: 0.5rem 0.3rem 0.45rem;
	text-align: center;
}
.ht-wx-day-date  { font-size: 0.68rem; font-weight: 700; color: #013C1A; white-space: nowrap; }
.ht-wx-day-icon  { font-size: 1.3rem; line-height: 1.1; }
.ht-wx-day-temps { font-size: 0.75rem; font-weight: 600; color: #1a1a1a; }
.ht-wx-day-precip { font-size: 0.66rem; color: #1565c0; }
.ht-wx-day-wind   { font-size: 0.66rem; color: #555; }

/* Secondary (WeatherAPI) strip — flat layout fallback only */
.ht-wx-strip--secondary .ht-wx-day {
	background: #fafafa;
	border-color: #e0e0e0;
	opacity: 0.82;
}
.ht-wx-strip--secondary .ht-wx-day-temps { font-weight: 400; color: #555; }

/* ── Desktop: base strip separator ───────────────────────────────────── */
.ht-wx-strip-section + .ht-wx-strip-section {
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px dashed #d4e8d4;
}

/* ── Amber model variation note ─────────────────────────────────────── */
.ht-wx-amber-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	color: #7a5800;
	background: #fffde7;
	border-radius: 4px;
	padding: 0.3rem 0.65rem;
	margin: 0.7rem 0 0.3rem;
}
.ht-wx-secondary-label {
	font-size: 0.67rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.25rem 0 0.2rem;
}

/* ── Model agreement (green) ─────────────────────────────────────────── */
.ht-wx-model-agree {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.68rem;
	color: #2e7d32;
	margin: 0.5rem 0 0;
}

/* ── Forecast footer ─────────────────────────────────────────────────── */
.ht-wx-footer {
	margin-top: 0.75rem;
	font-size: 0.65rem;
	color: #aaa;
	text-align: right;
	padding-top: 0.5rem;
	border-top: 1px solid #edf5ed;
}


/* ============================================================================
   CLIMATE SECTION (below forecast — no tab)
   ========================================================================== */

.ht-wx-climate-section {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 2px solid #e4ede4;
}
.ht-wx-climate-heading {
	font-size: 0.78rem;
	font-weight: 700;
	color: #013C1A;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 0.4rem;
}
.ht-wx-climate-intro {
	font-size: 0.73rem;
	color: #666;
	line-height: 1.5;
	margin: 0 0 0.65rem;
}

/* ── ht-scroll overrides for 3-column climate table inside widget ────── */
/* Override .vc_row .ht-scroll { overflow: visible } that breaks scroll    */
.ht-weather-widget .ht-scroll {
	overflow: auto !important;
	max-height: none;          /* 12-row table fits without vertical scroll  */
}
/* Override global 50/50 column-width rule (built for 2-col tables) */
.ht-weather-widget .ht-scroll table {
	table-layout: auto !important;
	min-width: 320px;
}
.ht-weather-widget .ht-scroll table th,
.ht-weather-widget .ht-scroll table td {
	width: auto !important;
}
/* Current month row wins over zebra striping */
.ht-weather-widget .ht-scroll tbody tr.ht-wx-climate-row--current td {
	background: #f0f9f4 !important;
	color: #013C1A;
	font-weight: 700;
}

/* Column sizing */
.ht-wx-climate-month {
	width: 30%;
	white-space: nowrap;
}
.ht-wx-climate-temp {
	white-space: nowrap;
	width: 35%;
	color: #444;
}
.ht-wx-climate-precip {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 35%;
}
.ht-wx-precip-val {
	white-space: nowrap;
	font-size: 0.72rem;
	color: #555;
}
.ht-wx-precip-bar {
	display: inline-block;
	height: 5px;
	background: #1565c0;
	border-radius: 2px;
	max-width: 60px;
	opacity: 0.55;
	flex-shrink: 0;
}

/* "This month" badge */
.ht-wx-now-badge {
	display: inline-block;
	background: #01A347;
	color: #fff;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.07rem 0.3rem;
	border-radius: 3px;
	vertical-align: middle;
	margin-left: 0.3rem;
	white-space: nowrap;
}

/* Climate section footers */
.ht-wx-climate-footer {
	font-size: 0.62rem;
	color: #bbb;
	margin-top: 0.55rem;
	padding-top: 0.4rem;
	border-top: 1px solid #edf5ed;
	text-align: right;
}
.ht-wx-climate-footer--links {
	border-top: none;
	padding-top: 0;
	margin-top: 0.15rem;
}


/* ── Shared disclaimer ───────────────────────────────────────────────── */
.ht-wx-disclaimer {
	font-size: 0.63rem;
	color: #b0b0b0;
	line-height: 1.55;
	border-top: 1px solid #edf5ed;
	padding-top: 0.6rem;
	margin-top: 0.75rem;
}


/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* Desktop: both location strips always visible; hide tab bar */
@media ( min-width: 481px ) {
	.ht-wx-loc-tabs { display: none; }
	.ht-wx-strip-section.ht-wx-loc-hidden { display: block !important; }
}

/* Mobile: show tab bar; respect .ht-wx-loc-hidden on inactive strip */
@media ( max-width: 480px ) {
	.ht-wx-loc-tabs  { display: flex; }
	.ht-wx-inner     { padding: 0.85rem 0.9rem 0.75rem; }
	.ht-wx-day       { flex: 0 0 72px; }
	.ht-wx-loc-header { margin-bottom: 0.4rem; }
}


/* ============================================================================
   HUB PAGE — REGIONAL ALERTS   (#ht-region-alerts)
   ========================================================================== */

.ht-region-alerts {
	margin: 1.5rem 0 2rem;
	font-family: inherit;
}
.ht-region-alerts-loading,
.ht-region-alerts-empty {
	font-size: 0.88rem;
	color: #666;
}
.ht-region-alerts-grid { /* wrapper for heading + cards + source */ }
.ht-region-alerts-heading {
	font-size: 1rem;
	font-weight: 700;
	color: #013C1A;
	margin: 0 0 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ht-region-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 0.7rem;
	margin-bottom: 0.6rem;
}
.ht-region-card {
	border-radius: 7px;
	padding: 0.85rem 1rem;
	border: 1px solid #ddd;
}
.ht-region-card--green  { background: #f1f9f4; border-color: #a5d6a7; }
.ht-region-card--yellow { background: #fffde7; border-color: #f9a825; }
.ht-region-card--orange { background: #fff3e0; border-color: #e65100; }
.ht-region-card--red    { background: #ffebee; border-color: #c62828; }
.ht-region-card-header {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
}
.ht-region-card-icon  { font-size: 1rem; flex-shrink: 0; }
.ht-region-card-name  { font-weight: 700; font-size: 0.9rem; color: #013C1A; }
.ht-region-card-badge {
	font-size: 0.71rem;
	color: #555;
	margin-left: auto;
	white-space: nowrap;
}
.ht-region-card-warnings {
	margin: 0.4rem 0 0;
	padding: 0 0 0 1.1rem;
	list-style: disc;
}
.ht-region-card-warnings li {
	font-size: 0.76rem;
	color: #444;
	line-height: 1.45;
	margin-bottom: 0.2rem;
}
.ht-region-card-more {
	font-size: 0.72rem;
	color: #888;
	list-style: none;
	margin-left: -1.1rem;
	padding-left: 0;
}
.ht-region-alerts-source {
	font-size: 0.68rem;
	color: #aaa;
	margin: 0.1rem 0 0;
}

@media ( max-width: 480px ) {
	.ht-region-cards { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 360px ) {
	.ht-region-cards { grid-template-columns: 1fr; }
}

/* ── UV index badge ──────────────────────────────────────────────────── */
.ht-wx-day-uv {
	display: inline-block;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.08rem 0.28rem;
	border-radius: 3px;
	margin-top: 0.1rem;
	white-space: nowrap;
}
.ht-wx-uv--moderate  { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.ht-wx-uv--high      { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.ht-wx-uv--very-high { background: #fce4ec; color: #c62828; border: 1px solid #f48fb1; }
.ht-wx-uv--extreme   { background: #ede7f6; color: #4a148c; border: 1px solid #ce93d8; }

/* ── Gust speed indicator ────────────────────────────────────────────── */
.ht-wx-day-gust {
	font-size: 0.63rem;
	color: #b71c1c;
	margin-top: 0.08rem;
	white-space: nowrap;
}
.ht-wx-day-gust::before { content: '⚡ '; }
.ht-wx-gust--strong { font-weight: 700; }

/* ── Monsoon annotation in climate table ────────────────────────────── */
.ht-wx-monsoon-badge {
	display: inline-block;
	font-size: 0.75rem;
	margin-left: 0.25rem;
	vertical-align: middle;
	opacity: 0.85;
	cursor: default;
}
.ht-wx-climate-row--monsoon .ht-wx-precip-val { color: #1565c0; font-weight: 600; }
.ht-wx-precip-bar--monsoon {
	background: #1976d2;
	opacity: 0.7;
}