/* =========================================================
   WIDGET: WEATHER — Premium Card 2026
   Card + Compact Layout, Glassmorphism Icons,
   Gold-Gradient Separators, Dark Mode, BFSG
   BEM: kw-wt
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
.kw-wt {
	--kwl-wt-card-bg: var(--kwl-bg, #ffffff);
	--kwl-wt-card-border: var(--kwl-border, #e2e8f0);
	--kwl-wt-detail-icon-bg: color-mix(in srgb, var(--kwl-text-muted, #64748b) 8%, transparent);
	--kwl-wt-detail-icon-border: color-mix(in srgb, var(--kwl-text-muted, #64748b) 15%, transparent);
	--kwl-wt-forecast-bg: var(--kwl-bg-alt, #f7fafc);
	--kwl-wt-forecast-border: var(--kwl-border, #e2e8f0);
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
	font-family: var(--kwl-font-body);
	color: var(--kwl-text, #1a202c);
}

/* --- Card Bridge: Widget → Shared [data-kwl-card] --- */
.kw-wt[data-kwl-card] {
	--kwl-card-bg: var(--kwl-bg, #ffffff);
}

/* ---------------------------------------------------------
   2. Card Layout — Padding only (card base via [data-kwl-card])
   --------------------------------------------------------- */
.kw-wt--card {
	padding: var(--kwl-space-lg, 1.5rem);
}

/* ---------------------------------------------------------
   3. Compact Layout (Inline)
   --------------------------------------------------------- */
.kw-wt--compact {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.5rem);
}

.kw-wt--compact .kw-wt__current {
	flex-direction: row;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-bg-alt, #f7fafc);
	padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-md, 1rem);
	border-radius: var(--kwl-radius-full, 9999px);
}

.kw-wt--compact .kw-wt__info {
	flex-direction: row;
	gap: var(--kwl-space-xs, 0.25rem);
}

.kw-wt--compact .kw-wt__condition::before {
	content: "–";
	margin-right: var(--kwl-space-xs, 0.25rem);
}

.kw-wt--compact .kw-wt__details {
	padding-left: var(--kwl-space-md, 1rem);
	border-left: 1px solid var(--kwl-wt-card-border);
}

.kw-wt--compact .kw-wt__footer {
	border-top: none;
	padding-top: 0;
	padding-left: var(--kwl-space-md, 1rem);
	border-left: 1px solid var(--kwl-wt-card-border);
}

/* Compact: kein Glassmorphism-Kreis auf Icon (zu eng) */
.kw-wt--compact .kw-wt__icon[data-kwl-icon-circle] {
	--kwl-icon-size: auto;
	background: none;
	border: none;
	border-radius: 0;
}

/* ---------------------------------------------------------
   4. Current Weather
   --------------------------------------------------------- */
.kw-wt__current {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
	cursor: default;
}

.kw-wt__main {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

/* Icon-Circle Bridge: Widget → Shared [data-kwl-icon-circle] */
/* Mobile-First: kleinere Icons auf Mobilgeräten (< 481px), ab 481px volle Größe */
.kw-wt [data-kwl-icon-circle].kw-wt__icon {
	--kwl-icon-size: 52px;
	--kwl-icon-svg-size: 32px;
}

@media (min-width: 481px) {
	.kw-wt [data-kwl-icon-circle].kw-wt__icon {
		--kwl-icon-size: 64px;
		--kwl-icon-svg-size: 40px;
	}
}

.kw-wt__temp {
	font-size: var(--kwl-fsize-h2, 2rem);
	font-weight: var(--kwl-fw-bold);
	font-variant-numeric: tabular-nums;
	line-height: var(--kwl-lh-none);
	font-family: var(--kwl-font-heading);
}

.kw-wt__unit {
	font-size: 0.5em;
	font-weight: var(--kwl-fw-regular);
	vertical-align: super;
}

.kw-wt__info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.kw-wt__city {
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-body, 1rem);
}

.kw-wt__condition {
	font-size: var(--kwl-fsize-caption, 0.875rem);
	color: var(--kwl-text-muted, #64748b);
}

/* ---------------------------------------------------------
   5. Details (Humidity + Wind) — Glassmorphism Detail-Icons
   --------------------------------------------------------- */
.kw-wt__details {
	display: flex;
	gap: var(--kwl-space-md, 1rem);
}

.kw-wt__detail {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	cursor: default;
}

.kw-wt__detail-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: var(--kwl-text-muted, #64748b);
	background: var(--kwl-wt-detail-icon-bg);
	border-radius: var(--kwl-radius-full, 9999px);
	border: 1px solid var(--kwl-wt-detail-icon-border);
}

.kw-wt__detail-icon svg {
	width: 16px;
	height: 16px;
}

.kw-wt__detail-val {
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--kwl-text-muted, #64748b);
}

/* ---------------------------------------------------------
   6. Forecast (3-Tage) — Gold-Gradient Separator
   --------------------------------------------------------- */
.kw-wt__forecast {
	padding-top: var(--kwl-space-md, 1rem);
	position: relative;
}

.kw-wt__forecast::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--kwl-accent, #BD9B5C), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent), transparent);
	border-radius: 1px;
}

/* Mobile-First: 1-Spalte + horizontales Layout als Basis, ab 481px 3-Spalten + vertikales Layout */
.kw-wt__forecast-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-wt__forecast-day {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem);
	border-radius: var(--kwl-radius-md, 8px);
	background: var(--kwl-wt-forecast-bg);
	border: 1px solid var(--kwl-wt-forecast-border);
	cursor: default;
	transition: box-shadow var(--kwl-transition), transform var(--kwl-transition), border-color var(--kwl-transition);
}

@media (min-width: 481px) {
	.kw-wt__forecast-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.kw-wt__forecast-day {
		flex-direction: column;
		justify-content: flex-start;
	}
}

@media (hover: hover) {
	.kw-wt__forecast-day:hover {
		box-shadow: var(--kwl-shadow-md);
		transform: translateY(-2px);
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, var(--kwl-wt-forecast-border));
	}
}

.kw-wt__forecast-day:active {
	transform: scale(0.97);
}

.kw-wt__forecast-label {
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-text, #1a202c);
}

.kw-wt__forecast-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kwl-accent, #BD9B5C);
}

.kw-wt__forecast-icon svg {
	width: 28px;
	height: 28px;
}

.kw-wt__forecast-temps {
	display: flex;
	gap: var(--kwl-space-xs, 0.25rem);
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-variant-numeric: tabular-nums;
}

.kw-wt__forecast-max {
	font-weight: var(--kwl-fw-bold);
}

.kw-wt__forecast-min {
	color: var(--kwl-text-muted, #64748b);
}

/* ---------------------------------------------------------
   7. Footer — Gold-Gradient Separator
   --------------------------------------------------------- */
.kw-wt__footer {
	padding-top: var(--kwl-space-sm, 0.5rem);
	position: relative;
}

.kw-wt__footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, var(--kwl-accent, #BD9B5C), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent), transparent);
}

.kw-wt__updated {
	font-size: var(--kwl-fsize-caption, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--kwl-text-muted, #64748b);
}

/* ---------------------------------------------------------
   8. Accessibility: Focus
   --------------------------------------------------------- */
.kw-wt__current:focus-visible,
.kw-wt__detail:focus-visible,
.kw-wt__forecast-day:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-radius-sm, 4px);
}

/* ---------------------------------------------------------
   9. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-wt {
		--kwl-wt-forecast-bg: var(--kwl-bg-alt, #2d3748);
		--kwl-wt-forecast-border: var(--kwl-border, #4a5568);
		--kwl-wt-detail-icon-bg: color-mix(in srgb, var(--kwl-text-muted, #a0aec0) 8%, var(--kwl-bg, #1a202c));
		--kwl-wt-detail-icon-border: color-mix(in srgb, var(--kwl-text-muted, #a0aec0) 12%, var(--kwl-border, #4a5568));
		color: var(--kwl-text, #f7fafc);
	}

	.kw-wt--compact .kw-wt__current {
		background: var(--kwl-bg-alt, #2d3748);
	}

	.kw-wt--compact .kw-wt__details,
	.kw-wt--compact .kw-wt__footer {
		border-left-color: var(--kwl-border, #4a5568);
	}

	.kw-wt__condition {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-wt__detail-icon {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-wt__detail-val {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-wt__forecast-label {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-wt__forecast-min {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-wt__updated {
		color: var(--kwl-text-muted, #a0aec0);
	}

	@media (hover: hover) {
		.kw-wt__forecast-day:hover {
			border-color: rgba(189, 155, 92, 0.3);
		}
	}

	.kw-wt__current:focus-visible,
	.kw-wt__detail:focus-visible,
	.kw-wt__forecast-day:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* ---------------------------------------------------------
   10. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-wt__forecast-day {
		transition: none;
	}

	.kw-wt__forecast-day:active,
	.kw-wt__forecast-day:hover {
		transform: none;
	}
}