/**
 * ltf-weather — the course-weather module.
 * Built to the Leadville Race Series sidebar system: a gold section-header bar
 * (matching EVERY DAY HEROES / COMMUNITY), bold uppercase type, squared corners,
 * dark-on-white body.
 *
 * TYPOGRAPHY: font-family AND size match the site. The card inherits the site's
 * font stack (font-family: inherit) and its body font-size (18px on this theme),
 * then sizes everything in `em` relative to that. NOTE: this theme sets the root
 * font-size to 10px (the Total `62.5%` trick), so `rem` here would render ~40%
 * too small — that was the bug. `em` anchors to the real inherited 18px instead.
 */

.ltf-weather-card {
	--ltfw-gold: #c2a14d;       /* Leadville section-bar gold */
	--ltfw-ink: #1a1a1a;
	--ltfw-muted: #6f6f6f;
	--ltfw-line: #e3e3e3;
	--ltfw-bg: #ffffff;

	font-family: inherit;       /* match the site font */
	color: var(--ltfw-ink);
	background: var(--ltfw-bg);
	border: 1px solid var(--ltfw-line);
	width: 100%;                /* fill the rail column, matching the LIVE RESULTS block */
	box-sizing: border-box;
	/* no font-size set: inherits the site's body size (18px) so `em` below matches the site */
}

/* ---- gold section-header bar (matches the sidebar modules) ---- */
.ltf-weather-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	background: var(--ltfw-gold);
	color: #1c1c1c;
	padding: 0.55em 0.8em;
}

.ltf-weather-head-title {
	font-weight: 800;
	font-size: 1em;             /* ~18px, matches site body type */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.ltf-weather-head-loc {
	font-weight: 700;
	font-size: 0.72em;          /* ~13px */
	letter-spacing: 0.04em;
	opacity: 0.85;
	white-space: nowrap;
}

/* ---- body ---- */
.ltf-weather-body {
	padding: 0.85em 0.9em 0.7em;
}

.ltf-weather-now {
	display: flex;
	align-items: center;
	gap: 0.3em;
}

.ltf-weather-now-icon {
	width: 84px;
	height: 84px;
	flex: 0 0 auto;
	margin-left: -10px; /* OpenWeather PNGs carry transparent padding */
}

.ltf-weather-now-temp {
	font-size: 3.2em;           /* ~58px */
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
}

.ltf-weather-now-unit {
	font-size: 0.4em;
	font-weight: 700;
	color: var(--ltfw-muted);
	margin-left: 0.1em;
	vertical-align: 0.4em;
}

.ltf-weather-now-meta {
	margin-left: auto;
	text-align: right;
	min-width: 0;
}

.ltf-weather-cond {
	font-weight: 700;
	font-size: 1.05em;          /* ~19px */
	line-height: 1.2;
}

.ltf-weather-sub {
	font-size: 0.85em;          /* ~15px */
	color: var(--ltfw-muted);
	margin-top: 0.25em;
}

/* ---- today / tomorrow outlook ---- */
.ltf-weather-fc {
	display: flex;
	margin-top: 0.8em;
	border-top: 2px solid var(--ltfw-gold);
}

.ltf-weather-fc-day {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
	padding: 0.6em 0.25em 0.25em;
}

.ltf-weather-fc-day + .ltf-weather-fc-day {
	border-left: 1px solid var(--ltfw-line);
}

.ltf-weather-fc-lbl {
	font-weight: 800;
	font-size: 0.8em;           /* ~14px */
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ltfw-ink);
}

.ltf-weather-fc-icon {
	width: 56px;
	height: 56px;
}

.ltf-weather-fc-hilo {
	font-size: 1.05em;          /* ~19px */
}

.ltf-weather-fc-hilo b {
	font-weight: 800;
}

.ltf-weather-fc-hilo span {
	color: var(--ltfw-muted);
}

/* ---- footer stamp ---- */
.ltf-weather-updated {
	margin-top: 0.7em;
	font-size: 0.72em;          /* ~13px */
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ltfw-muted);
}

/* ---------------------------------------------------------------------------
 * Compact mode — opt-in via [ltf_weather compact="yes"]. Layers on top of the
 * base style (above), so removing the attribute reverts to the roomy card with
 * zero loss. Trims ~40% of the height for the sidebar so LIVE RESULTS leads.
 * ------------------------------------------------------------------------- */
.ltf-weather-card.is-compact .ltf-weather-head {
	padding: 0.4em 0.8em;
}
.ltf-weather-card.is-compact .ltf-weather-body {
	padding: 0.6em 0.8em 0.5em;
}
.ltf-weather-card.is-compact .ltf-weather-now {
	gap: 0.1em;
}
.ltf-weather-card.is-compact .ltf-weather-now-icon {
	width: 58px;
	height: 58px;
	margin-left: -8px;
}
.ltf-weather-card.is-compact .ltf-weather-now-temp {
	font-size: 2.3em;           /* ~41px (was ~58px) */
}
.ltf-weather-card.is-compact .ltf-weather-cond {
	font-size: 0.95em;
}
.ltf-weather-card.is-compact .ltf-weather-sub {
	font-size: 0.8em;
	margin-top: 0.1em;
}
.ltf-weather-card.is-compact .ltf-weather-fc {
	margin-top: 0.5em;
}
.ltf-weather-card.is-compact .ltf-weather-fc-day {
	padding: 0.4em 0.2em 0.2em;
	gap: 0;
}
.ltf-weather-card.is-compact .ltf-weather-fc-icon {
	width: 40px;
	height: 40px;
}
.ltf-weather-card.is-compact .ltf-weather-fc-lbl {
	font-size: 0.74em;
}
.ltf-weather-card.is-compact .ltf-weather-fc-hilo {
	font-size: 0.95em;
}
.ltf-weather-card.is-compact .ltf-weather-updated {
	margin-top: 0.45em;
}

/* ---------------------------------------------------------------------------
 * Horizontal strip — [ltf_weather layout="strip"]. A full-width conditions band.
 *
 * MARKUP: a native <details> (no JavaScript). <summary> holds the gold label bar
 * + the current conditions; the 3-day forecast is the disclosed content.
 *
 * WIDE columns (desktop): CSS force-shows the forecast regardless of open state,
 * so the band renders exactly as it always has — one horizontal row, no chevron,
 * nothing to click. Verified in Chrome 151 (which uses content-visibility for the
 * closed state, hence the ::details-content belt-and-braces below).
 *
 * NARROW columns (mobile, <=680px via container query): the band stacks — gold
 * bar, then current conditions — and the forecast COLLAPSES behind the bar. Tap
 * the gold bar to open. Cuts the mobile height from ~231px to ~85px while the
 * glanceable part (temp, condition, feels/wind) stays visible.
 * ------------------------------------------------------------------------- */
.ltf-weather-strip {
	--ltfw-gold: #c2a14d;
	--ltfw-ink: #1a1a1a;
	--ltfw-muted: #6f6f6f;
	--ltfw-line: #e3e3e3;
	--ltfw-bg: #ffffff;

	font-family: inherit;       /* match the site font */
	color: var(--ltfw-ink);
	background: var(--ltfw-bg);
	border: 1px solid var(--ltfw-line);
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	container-type: inline-size;  /* respond to the COLUMN width, not the viewport */
	/* no font-size set: inherits the site body size (18px) so `em` matches the site */
}
/* the plugin must not depend on the host theme's box-sizing */
.ltf-weather-strip * { box-sizing: border-box; }

/* <summary> reset — it is a layout row, not a list item */
.ltf-weather-sum {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	list-style: none;
	cursor: default;            /* wide columns: nothing to toggle */
}
.ltf-weather-sum::-webkit-details-marker { display: none; }
.ltf-weather-sum::marker { content: ""; }

/* WIDE: force the forecast visible whatever the open state (both mechanisms) */
details.ltf-weather-strip > .ltf-weather-strip-fc { display: flex; }
details.ltf-weather-strip::details-content { content-visibility: visible; block-size: auto; }

/* gold label cap */
.ltf-weather-strip-label {
	background: var(--ltfw-gold);
	color: #1c1c1c;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15em;
	padding: 0.55em 1.1em;
	flex: 0 0 auto;
}
.ltf-weather-strip-title {
	font-weight: 800;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
}
.ltf-weather-strip-loc {
	font-weight: 700;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}
.ltf-weather-chev { display: none; }   /* wide columns: no disclosure affordance */

/* current conditions */
.ltf-weather-strip-now {
	display: flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 1.1em;
	flex: 1 1 auto;
	min-width: 0;
}
.ltf-weather-strip-icon {
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	margin-left: -8px; /* OpenWeather PNGs carry transparent padding */
}
.ltf-weather-strip-temp {
	font-size: 2.4em;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
}
.ltf-weather-strip-temp sup {
	font-size: 0.38em;
	font-weight: 700;
	color: var(--ltfw-muted);
	vertical-align: 0.7em;
	margin-left: 0.1em;
}
.ltf-weather-strip-meta {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
	min-width: 0;
}
.ltf-weather-strip-cond {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.15;
}
.ltf-weather-strip-sub {
	font-size: 0.82em;
	color: var(--ltfw-muted);
	margin-top: 0.15em;
}

/* 3-day outlook */
.ltf-weather-strip-fc {
	align-items: stretch;
	flex: 0 0 auto;
	border-left: 1px solid var(--ltfw-line);
	min-width: 0;
}
.ltf-weather-strip-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05em;
	padding: 0.45em 1.1em;
	min-width: 0;
}
.ltf-weather-strip-day + .ltf-weather-strip-day {
	border-left: 1px solid var(--ltfw-line);
}
.ltf-weather-strip-lbl {
	font-weight: 800;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.ltf-weather-strip-day img {
	width: 40px;
	height: 40px;
}
.ltf-weather-strip-hilo {
	font-size: 0.95em;
	white-space: nowrap;
}
.ltf-weather-strip-hilo b { font-weight: 800; }
.ltf-weather-strip-hilo span { color: var(--ltfw-muted); }

/* ---------------------------------------------------------------------------
 * NARROW columns — stack + collapse the forecast behind the gold bar.
 * ------------------------------------------------------------------------- */
@container (max-width: 680px) {

	/* summary becomes two stacked rows: gold bar, then current conditions */
	.ltf-weather-sum {
		display: block;
		flex: 1 0 100%;
		cursor: pointer;
	}

	/* gold bar: title left, location right, chevron at the end */
	.ltf-weather-strip-label {
		flex-direction: row;
		align-items: center;
		gap: 0.5em;
		padding: 0.3em 0.8em;
	}
	.ltf-weather-strip-title { font-size: 0.85em; letter-spacing: 0.08em; }
	.ltf-weather-strip-loc { font-size: 0.65em; margin-left: auto; }

	.ltf-weather-chev {
		display: block;
		flex: 0 0 auto;
		width: 0.42em;
		height: 0.42em;
		margin-left: 0.15em;
		border-right: 2px solid #1c1c1c;
		border-bottom: 2px solid #1c1c1c;
		transform: rotate(45deg) translateY(-0.1em);
		transition: transform 0.15s;
	}
	details[open] .ltf-weather-chev {
		transform: rotate(-135deg) translateY(-0.1em);
	}

	/* current conditions: tighter */
	.ltf-weather-strip-now { padding: 0.25em 0.8em; gap: 0.1em; }
	.ltf-weather-strip-icon { width: 48px; height: 48px; margin-left: -6px; }
	.ltf-weather-strip-temp { font-size: 1.9em; }
	.ltf-weather-strip-cond { font-size: 0.9em; }
	.ltf-weather-strip-sub { font-size: 0.75em; margin-top: 0.05em; }

	/* collapsed = hidden; open = a 3-column grid that cannot overflow */
	details.ltf-weather-strip:not([open]) > .ltf-weather-strip-fc { display: none; }
	/* Chrome 128+ wraps disclosed content in a ::details-content box, so THAT is
	 * the flex item there; older engines make the .fc itself the flex item. Give
	 * both a full-width basis, and width:100% so either nesting fills the band. */
	details.ltf-weather-strip[open]::details-content {
		flex: 1 0 100%;
		width: 100%;
	}
	details.ltf-weather-strip[open] > .ltf-weather-strip-fc {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		flex: 1 0 100%;
		width: 100%;
		border-left: none;
		border-top: 2px solid var(--ltfw-gold);
	}
	.ltf-weather-strip-day { padding: 0.3em 0.1em; gap: 0; overflow: hidden; }
	.ltf-weather-strip-day img { width: 30px; height: 30px; }
	.ltf-weather-strip-lbl { font-size: 0.66em; }
	.ltf-weather-strip-hilo { font-size: 0.8em; }
}