/* WeatherBot by RoxxiStudios Public Styles (optimized v3.3.1 + SEO/ADA enhancements)
   - Component-scoped, class-only selectors (no element qualifiers)
   - Predictable typography + color baseline (prevents footer/theme bleed)
   - Accessible focus states, reduced-motion fallback, high-contrast support
   - Flat specificity (optional class-doubling bumps at bottom)
*/


/* =========================
   0) CSS Reset (component scope)
   ========================= */

.roxxi-weather,
.roxxi-weather * {
	box-sizing: border-box;
}


/* =========================
   1) Theme Variables
   ========================= */

:root {
	--wb-primary: #1b3f72;
	--wb-secondary: #6799cc;
	--wb-neutral: #808285;
	--wb-light: #D3D3D3;
	--wb-dark: #1A1A1A;
	/* Focus/outline tokens */
	--wb-focus: #6799cc;
	/* fallback if currentColor unavailable */
	--wb-outline: #000000;
	--wb-outline-contrast: #ffffff;
}


/* =========================
   2) Core Wrapper
   ========================= */


/* Inherit typography safely for children */

aside.roxxi-weather,
aside.roxxi-weather[data-widget="weatherBot"] {
	display: flex;
	gap: 5px;
	width: fit-content;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: normal;
	word-break: normal;
	white-space: normal;
	background: white;
	-webkit-tap-highlight-color: transparent;
}

aside.roxxi-weather[role="region"].wb-type-badge p,
aside.roxxi-weather[role="region"].wb-type-compact p,
aside.roxxi-weather[role="region"].wb-type-inline p {
    margin: 0;
}


/* =========================
   3) Layout Groups
   ========================= */

.roxxi-weather .details,
.roxxi-weather .conditions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}


/* =========================
   4) Alignment Utilities
   ========================= */

.roxxi-weather.wb-left,
.roxxi-weather.wb-left .details,
.roxxi-weather.wb-left .conditions {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	text-align: left;
}

.roxxi-weather.wb-center,
.roxxi-weather.wb-center .details,
.roxxi-weather.wb-center .conditions {
	display: flex;
	justify-content: center;
	margin: 0 auto;
	text-align: center;
}

.roxxi-weather.wb-right,
.roxxi-weather.wb-right .details,
.roxxi-weather.wb-right .conditions {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 0 auto;
	text-align: right;
}

.roxxi-weather.wb-center:not(.wp-badge),
.roxxi-weather.wb-right:not(.wp-badge) {
	align-items: inherit;
}


/* UPDATED: Corrected selector for proper targeting */

.roxxi-weather.wb-right .wb-badge .conditions {
	display: inline-flex;
	align-items: center;
}


/* =========================
   5) Temperature & Conditions
   ========================= */

aside.roxxi-weather[role="region"] img {
	width: 20px;
}

.roxxi-weather .temp {
	display: flex;
	align-items: center;
	gap: 3px;
}

.roxxi-weather .degree {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

.roxxi-weather .wb-desc {
	color: var(--wb-neutral);
}

.roxxi-weather .wb-pre,
.roxxi-weather .wb-temp,
.roxxi-weather .wb-unit {
	color: var(--wb-dark);
	margin: 0;
	font-size: inherit;
	font-weight: 600;
}

.roxxi-weather.wb-text-light .wb-pre,
.roxxi-weather.wb-text-light .wb-temp,
.roxxi-weather.wb-text-light .wb-unit {
	color: white;
}


/* =========================
   6) Variants
   ========================= */


/*** BADGE ***/

.roxxi-weather.wb-type-badge {
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	padding: 10px 12px 12px;
	border: 1px solid var(--wb-neutral);
	border-radius: 5px;
	font-size: 20px;
	width: fit-content;
}

.roxxi-weather.wb-type-badge .wb-badge {
	display: flex;
	gap: 8px;
}

.roxxi-weather.wb-type-badge .details {
	flex-direction: column;
	align-items: flex-start;
}

.roxxi-weather.wb-type-badge .conditions {
	align-items: center;
}

.roxxi-weather.wb-type-badge .temp {
	gap: 5px;
}

aside.roxxi-weather.wb-type-badge[role="region"] .wb-ico {
	width: 28px;
	height: auto;
}


/*** COMPACT ***/

.roxxi-weather.wb-type-compact {
	flex-direction: column;
	padding: 8px 10px 10px;
	border: 1px solid var(--wb-neutral);
	border-radius: 5px;
	font-size: 16px;
	width: fit-content;
}


/*** INLINE ***/

.roxxi-weather.wb-type-inline {
	display: inline-flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	background: transparent;
	border: 0;
	font-size: inherit;
	vertical-align: text-bottom;
	width: fit-content;
}


/* =========================
   7) Powered-by Line
   ========================= */

.widget.widget_roxxi_weather_widget .wb-powered,
.roxxi-weather .wb-powered {
	color: var(--wb-neutral);
	font-size: 12px;
	font-weight: 400;
	/* NEW: Reset default browser margin for the new <p> tag */
	margin: 0;
}

.roxxi-weather .wb-powered a.wb-powered-link {
	font-size: inherit;
	transition: 250ms;
}


/* Default link styles inside component (distinguished from text) */

.roxxi-weather a {
	color: var(--wb-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 250ms;
}

.roxxi-weather a:hover,
.roxxi-weather a:focus-visible {
	color: var(--wb-secondary);
}


/* Powered-by link: keep underline to avoid color-only cue */

.roxxi-weather a.wb-powered-link {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* === FIX: ensure powered-by hover/focus beats theme a:hover and adds a clearer cue === */

.roxxi-weather a.wb-powered-link:hover,
.roxxi-weather a.wb-powered-link:focus-visible {
	color: var(--wb-secondary);
	text-underline-offset: 4px;
}


/* =========================
   8) Color Utilities
   ========================= */


/* Support both wb-text-* and wb-font-* for backward compatibility */

.roxxi-weather.wb-text-light {
	color: #ffffff;
}

.roxxi-weather .wb-powered {
	padding-bottom: 2px;
}

.roxxi-weather.wb-text-light .wb-powered {
	color: var(--wb-light);
}

.roxxi-weather.wb-text-light a {
	color: inherit;
}


/* Description color adjusts for light mode cards */

.roxxi-weather.wb-text-light .wb-desc,
.roxxi-weather.wb-font-light .wb-desc {
	color: var(--wb-light);
}


/* Card backgrounds for light text variants */

.roxxi-weather.wb-type-badge.wb-text-light,
.roxxi-weather.wb-type-compact.wb-text-light {
	background: var(--wb-dark);
}


/* =========================
   9) Loading States
   ========================= */


/* Hide icon/temp/unit/desc while loading */

.roxxi-weather .conditions.wb-loading .wb-ico,
.roxxi-weather .conditions.wb-loading .wb-temp,
.roxxi-weather .conditions.wb-loading .wb-sep,
.roxxi-weather .conditions.wb-loading .wb-unit,
.roxxi-weather .conditions.wb-loading .wb-desc {
	display: none;
}


/* Show the loading message only during loading */

.roxxi-weather .conditions .wb-loading-msg {
	display: none;
}

.roxxi-weather .conditions.wb-loading .wb-loading-msg {
	display: inline;
}


/* Optional niceties */

.roxxi-weather .conditions .wb-loading-msg {
	font-size: 15px;
	margin-left: 0;
	font-style: italic;
	font-weight: 400;
	text-align: center;
	opacity: .85;
}

.roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
	content: "";
	display: inline-block;
	animation: wb-ellipsis 1.2s infinite steps(4);
	width: 1em;
	/* keeps spacing consistent */
	text-align: left;
}

@keyframes wb-ellipsis {
	0% {
		content: "";
	}
	25% {
		content: ".";
	}
	50% {
		content: "..";
	}
	75% {
		content: "...";
	}
	100% {
		content: "";
	}
}


/* Respect user motion preferences */

@media (prefers-reduced-motion: reduce) {
	.roxxi-weather .conditions.wb-loading .wb-loading-msg::after {
		animation: none;
		width: 3ch;
	}
	.roxxi-weather a {
		transition: none;
	}
}


/* =========================
   10) Focus Visibility (ADA)
   ========================= */

.roxxi-weather a:focus-visible,
.roxxi-weather button:focus-visible,
.roxxi-weather [role="button"]:focus-visible {
	outline: 3px solid currentColor;
	/* ensures >=3:1 contrast vs background */
	outline-offset: 2px;
	border-radius: 3px;
	/* subtle rounding to improve visibility on icons */
}


/* When keyboard navigating within dark cards, allow explicit contrast override if needed */

.roxxi-weather.wb-text-light a:focus-visible,
.roxxi-weather.wb-font-light a:focus-visible {
	outline-color: currentColor;
	/* still inherits white; strong on dark */
}


/* High-contrast/forced-colors support (Windows HC Mode) */

@media (forced-colors: active) {
	.roxxi-weather {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
	.roxxi-weather a {
		color: LinkText;
	}
	.roxxi-weather a:focus-visible {
		outline: 3px solid Highlight;
	}
	.roxxi-weather .wb-desc {
		color: CanvasText;
	}
}


/* =========================
   11) Responsive Adjustments
   ========================= */

@media (max-width: 480px) {
	/* UPDATED: Corrected .badge to .wb-badge to match renderer */
	.roxxi-weather.wb-type-badge .wb-badge {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}
	.roxxi-weather .wb-sep {
		display: none;
	}
}

@media (max-width: 320px) {
	.roxxi-weather.wb-type-badge,
	.roxxi-weather.wb-type-compact,
	.roxxi-weather.wb-type-inline {
		font-size: 14px;
	}
	.roxxi-weather.wb-type-inline .wb-ico {
		display: none;
	}
}


/* =========================
   12) Compat Patch
   ========================= */


/*** Badge wrapper class used by renderer ***/

.roxxi-weather.wb-type-badge .wb-badge {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	flex-wrap: wrap;
	gap: 3px;
}


/* Keep legacy utility name working (alias of wb-text-*) */

.roxxi-weather.wb-font-light * {
	color: #ffffff;
}


/*
.roxxi-weather.roxxi-weather { color: var(--wb-dark); }
.roxxi-weather.roxxi-weather a { color: var(--wb-primary); }
*/


/* --- Hard override for dark-text variant in aggressive footers --- */


/* Force container + all descendants to inherit dark text, except links */

footer .roxxi-weather.roxxi-weather.wb-text-dark,
footer .roxxi-weather.roxxi-weather.wb-text-dark *:not(a) {
	color: var(--wb-dark) !important;
}


/* Links: restore brand color explicitly */

footer .roxxi-weather.roxxi-weather.wb-text-dark a {
	color: var(--wb-primary) !important;
}


/* If links wrap icons/spans, keep them inheriting from the anchor */

footer .roxxi-weather.roxxi-weather.wb-text-dark a * {
	color: inherit !important;
}