/* ==========================================================================
   Webia Weather Widget — Public Styles
   Layouts: horizontal | vertical
   Themes:  theme-light | theme-dark | theme-auto (follows prefers-color-scheme)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS custom properties — Light theme (default)
   -------------------------------------------------------------------------- */
.webia-weather-widget {
	--ww-bg:              #ffffff;
	--ww-bg-hover:        #f0f4f8;
	--ww-text:            #1a2530;
	--ww-text-secondary:  #546879;
	--ww-icon:            #2563eb;
	--ww-temp:            #1a2530;
	--ww-radius:          0;
	--ww-radius-sm:       0;
	--ww-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ww-forecast-bg:     #f8fafc;
	--ww-temp-max:        #e53e3e;
	--ww-temp-min:        #3182ce;
	--ww-transition:      220ms ease;
}

/* --------------------------------------------------------------------------
   Dark theme override
   -------------------------------------------------------------------------- */
.webia-weather-widget.theme-dark {
	--ww-bg:              #1e2d3d;
	--ww-bg-hover:        #263848;
	--ww-text:            #e8f0f7;
	--ww-text-secondary:  #8ba5be;
	--ww-icon:            #60a5fa;
	--ww-temp:            #e8f0f7;
	--ww-forecast-bg:     #172335;
	--ww-temp-max:        #fc8181;
	--ww-temp-min:        #90cdf4;
}

/* Auto: apply dark vars when OS prefers dark and no explicit theme is set */
@media (prefers-color-scheme: dark) {
	.webia-weather-widget.theme-auto {
		--ww-bg:              #1e2d3d;
		--ww-bg-hover:        #263848;
		--ww-text:            #e8f0f7;
		--ww-text-secondary:  #8ba5be;
		--ww-icon:            #60a5fa;
		--ww-temp:            #e8f0f7;
		--ww-forecast-bg:     #172335;
		--ww-temp-max:        #fc8181;
		--ww-temp-min:        #90cdf4;
	}
}

/* --------------------------------------------------------------------------
   Base widget container
   -------------------------------------------------------------------------- */
.webia-weather-widget {
	position:       relative;
	display:        inline-flex;
	align-items:    stretch;
	background:     var(--ww-bg);
	border-radius:  var(--ww-radius);
	font-family:    var(--ww-font);
	color:          var(--ww-text);
	cursor:         default;
	user-select:    none;
	outline:        none;
	z-index:        1;
}

.webia-weather-widget:focus-visible {
	outline: 2px solid var(--ww-icon);
	outline-offset: 2px;
}

/* Show forecast on hover or keyboard focus */
.webia-weather-widget:hover,
.webia-weather-widget:focus-within,
.webia-weather-widget.forecast-open {
	z-index: 100;
}

.webia-weather-widget:hover .webia-weather-forecast,
.webia-weather-widget:focus-within .webia-weather-forecast,
.webia-weather-widget.forecast-open .webia-weather-forecast {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Horizontal layout
   -------------------------------------------------------------------------- */
.webia-weather-widget.layout-horizontal .webia-weather-current {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            12px;
	padding:        12px 18px;
}

.webia-weather-widget.layout-horizontal .webia-weather-data {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            16px;
}

.webia-weather-widget.layout-horizontal .webia-weather-forecast {
	top:    100%;
	left:   0;
	right:  0;
	min-width: 100%;
}

/* --------------------------------------------------------------------------
   Vertical layout
   -------------------------------------------------------------------------- */
.webia-weather-widget.layout-vertical .webia-weather-current {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	padding:        18px 20px;
	text-align:     center;
}

.webia-weather-widget.layout-vertical .webia-weather-data {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
}

.webia-weather-widget.layout-vertical .webia-weather-forecast {
	top:       100%;
	left:      50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 240px;
}

.webia-weather-widget.layout-vertical:hover .webia-weather-forecast,
.webia-weather-widget.layout-vertical:focus-within .webia-weather-forecast,
.webia-weather-widget.layout-vertical.forecast-open .webia-weather-forecast {
	transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   Narrow layout — single-row inline strip, ~25 px tall, 2-day forecast dropdown
   -------------------------------------------------------------------------- */
.webia-weather-widget.layout-narrow {
	height: 25px;
}

.webia-weather-widget.layout-narrow .webia-weather-current {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            8px;
	padding:        0 8px;
}

.webia-weather-widget.layout-narrow .webia-weather-data {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            10px;
}

.webia-weather-widget.layout-narrow .webia-weather-icon .webia-weather-symbol {
	width:  20px;
	height: 20px;
}

.webia-weather-widget.layout-narrow .webia-weather-temp .webia-weather-value {
	font-size:   0.85rem;
	font-weight: 700;
}

.webia-weather-widget.layout-narrow .webia-weather-wind .webia-weather-value,
.webia-weather-widget.layout-narrow .webia-weather-snow .webia-weather-value {
	font-size: 0.75rem;
}

.webia-weather-widget.layout-narrow .webia-weather-icon-small .webia-weather-svg {
	width:  14px;
	height: 14px;
}

.webia-weather-widget.layout-narrow .webia-weather-forecast {
	top:       100%;
	left:      0;
	min-width: 100%;
}

.webia-weather-widget.layout-narrow .webia-weather-forecast-day {
	min-width: 56px;
	padding:   6px 6px;
}

/* --------------------------------------------------------------------------
   Weather icon (main) — FMI official SVG files via <img>
   -------------------------------------------------------------------------- */
.webia-weather-icon {
	flex-shrink: 0;
}

.webia-weather-icon .webia-weather-symbol {
	display: block;
	width:   52px;
	height:  52px;
}

/* Smaller icon in forecast dropdown */
.webia-weather-icon--sm .webia-weather-symbol {
	width:  36px;
	height: 36px;
}

/* --------------------------------------------------------------------------
   Data rows
   -------------------------------------------------------------------------- */
.webia-weather-row {
	display:     flex;
	align-items: center;
	gap:         5px;
	white-space: nowrap;
}

.webia-weather-widget .webia-weather-icon-small .webia-weather-svg {
	width:   18px;
	height:  18px;
	color:   var(--ww-text-secondary);
	stroke:  var(--ww-text-secondary);
	fill:    none;
}

.webia-weather-temp .webia-weather-value {
	font-size:   1.45rem;
	font-weight: 700;
	color:       var(--ww-temp);
	line-height: 1;
}

.webia-weather-wind .webia-weather-value,
.webia-weather-snow .webia-weather-value {
	font-size:  0.85rem;
	color:      var(--ww-text-secondary);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Forecast dropdown
   -------------------------------------------------------------------------- */
.webia-weather-forecast {
	position:   absolute;
	background: var(--ww-forecast-bg);
	border-radius: var(--ww-radius);
	padding:    12px 8px 10px;
	color:      var(--ww-text);
	z-index:    200;

	/* Hidden by default */
	opacity:        0;
	visibility:     hidden;
	transform:      translateY(4px);
	transition:     opacity var(--ww-transition),
	                visibility var(--ww-transition),
	                transform var(--ww-transition);
	pointer-events: none;
}

.webia-weather-forecast-inner {
	display:   flex;
	flex-direction: row;
	gap:       4px;
}

/* --------------------------------------------------------------------------
   Forecast day card
   -------------------------------------------------------------------------- */
.webia-weather-forecast-day {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            5px;
	padding:        8px 10px;
	border-radius:  var(--ww-radius-sm);
	background:     var(--ww-bg);
	min-width:      72px;
	flex:           1;
}

.webia-weather-forecast-date {
	font-size:   0.72rem;
	font-weight: 600;
	color:       var(--ww-text-secondary);
}

/* forecast icon size handled by .webia-weather-icon--sm above */

.webia-weather-forecast-temp {
	display:  flex;
	gap:      4px;
	font-size: 0.85rem;
	font-weight: 600;
}

.webia-weather-temp-max { color: var(--ww-temp-max); }
.webia-weather-temp-min { color: var(--ww-temp-min); }

.webia-weather-forecast-wind,
.webia-weather-forecast-snow {
	font-size: 0.75rem;
	color:     var(--ww-text-secondary);
}

/* --------------------------------------------------------------------------
   No-data / error state
   -------------------------------------------------------------------------- */
.webia-weather-no-data {
	padding: 10px 16px;
}

.webia-weather-error {
	font-size: 0.85rem;
	color:     var(--ww-text-secondary);
}

/* --------------------------------------------------------------------------
   Gutenberg editor preview
   -------------------------------------------------------------------------- */
.block-editor-block-list__block .webia-weather-widget {
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.webia-weather-widget.layout-horizontal .webia-weather-current {
		padding: 10px 12px;
		gap:     8px;
	}

	.webia-weather-widget.layout-horizontal .webia-weather-data {
		gap: 10px;
	}

	.webia-weather-icon .webia-weather-svg {
		width:  36px;
		height: 36px;
	}

	.webia-weather-forecast-inner {
		gap: 3px;
	}

	.webia-weather-forecast-day {
		min-width: 60px;
		padding:   6px 6px;
	}
}