/*
 * Simple Weather Bar by AjB — stylesheet
 * Uses CSS custom properties set dynamically from admin settings.
 * Fonts: system-safe stack — no Google Fonts dependency.
 */

/* ------------------------------------------------------------------ */
/*  CSS custom property defaults                                        */
/* ------------------------------------------------------------------ */
:root {
	--swb-height:      48px;
	--swb-bg:          #1a1a2e;
	--swb-color:       #ffffff;
	--swb-font-size:   14px;
	--swb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--swb-icon-size:   22px;
	--swb-gap:         14px;
	--swb-z:           9999;
	--swb-temp-size:   1.35em;
}

/* ------------------------------------------------------------------ */
/*  Weather Bar                                                         */
/* ------------------------------------------------------------------ */
#swb-bar {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	min-height:      var(--swb-height);
	background:      var(--swb-bg);
	color:           var(--swb-color);
	font-family:     var(--swb-font-family);
	font-size:       var(--swb-font-size);
	line-height:     1.3;
	z-index:         var(--swb-z);
	box-sizing:      border-box;
	padding:         6px 20px;
}

/* Fixed positioning */
#swb-bar.swb-bar--fixed.swb-bar--top {
	position: fixed;
	top:      0;
	left:     0;
	right:    0;
}

#swb-bar.swb-bar--fixed.swb-bar--bottom {
	position: fixed;
	bottom:   0;
	left:     0;
	right:    0;
}

#swb-bar.swb-bar--inline {
	position: relative;
}

/* Inner content row */
.swb-bar__inner {
	display:         flex;
	align-items:     center;
	gap:             var(--swb-gap);
	flex-wrap:       nowrap;
	justify-content: center;
	width:           100%;
	max-width:       1400px;
	overflow-x:      auto;
	scrollbar-width: none; /* Firefox */
}

.swb-bar__inner::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Current weather block */
.swb-bar__current {
	display:     flex;
	align-items: center;
	gap:         var(--swb-gap);
	flex-shrink: 0;
}

/* Location: city + date stacked */
.swb-bar__location {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	line-height:    1.2;
	flex-shrink:    0;
}

.swb-bar__city {
	font-weight:  700;
	font-size:    1.05em;
	white-space:  nowrap;
	letter-spacing: 0.01em;
}

.swb-bar__date {
	font-size:  0.78em;
	opacity:    0.75;
	white-space: nowrap;
}

/* Vertical divider between location and weather */
.swb-bar__divider {
	display:      inline-block;
	width:        1px;
	height:       28px;
	background:   currentColor;
	opacity:      0.25;
	flex-shrink:  0;
}

/* Temperature — larger and same visual height as location block */
.swb-bar__temp {
	font-size:   var(--swb-temp-size);
	font-weight: 700;
	white-space: nowrap;
	line-height: 1;
	flex-shrink: 0;
}

.swb-bar__condition {
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.swb-bar__item {
	white-space: nowrap;
	flex-shrink: 0;
	opacity:     0.9;
}

/* Dot separator between fields */
.swb-bar__sep {
	display:     inline-block;
	width:       4px;
	height:      4px;
	border-radius: 50%;
	background:  currentColor;
	opacity:     0.35;
	flex-shrink: 0;
	vertical-align: middle;
}

/* Vertical divider before forecast */
.swb-bar__fore-divider {
	display:     inline-block;
	width:       1px;
	height:      32px;
	background:  currentColor;
	opacity:     0.2;
	flex-shrink: 0;
	margin:      0 4px;
}

/* 3-day forecast strip */
.swb-bar__forecast {
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-shrink: 0;
}

.swb-bar__fore-day {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2px;
	flex-shrink:    0;
}

.swb-bar__fore-label {
	font-size:   0.75em;
	opacity:     0.75;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.swb-bar__fore-temp {
	font-size:   0.85em;
	font-weight: 700;
}

/* Loading / error */
.swb-bar__loading,
.swb-bar__error {
	opacity:    0.7;
	font-style: italic;
}

/* Body spacer */
.swb-bar-spacer {
	display: block;
	width:   100%;
}

/* ------------------------------------------------------------------ */
/*  Weather Box (shortcode / widget)                                    */
/* ------------------------------------------------------------------ */
.swb-box {
	background:    var(--swb-bg);
	color:         var(--swb-color);
	font-family:   var(--swb-font-family);
	font-size:     var(--swb-font-size);
	border-radius: 10px;
	padding:       18px 20px;
	box-sizing:    border-box;
	/* Remove the full-width stretch that caused the big empty box */
	display:       inline-block;
	width:         100%;
	max-width:     320px;
}

.swb-box__header {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin-bottom: 14px;
}

.swb-box__header-text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.swb-box__condition {
	font-size:   1.05em;
	font-weight: 600;
}

.swb-box__city {
	font-size:   0.9em;
	font-weight: 700;
	opacity:     0.9;
}

.swb-box__date {
	font-size: 0.78em;
	opacity:   0.65;
}

.swb-box__data {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.swb-box__item {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	border-bottom:   1px solid rgba(255,255,255,0.1);
	padding-bottom:  7px;
}

.swb-box__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.swb-box__label {
	opacity:   0.72;
	font-size: 0.88em;
}

.swb-box__value {
	font-weight: 700;
}

/* 3-day forecast in box */
.swb-box__forecast {
	display:         flex;
	justify-content: space-between;
	margin-top:      14px;
	padding-top:     12px;
	border-top:      1px solid rgba(255,255,255,0.15);
	gap:             6px;
}

.swb-box__fore-day {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	flex:           1;
}

.swb-box__fore-label {
	font-size:      0.72em;
	opacity:        0.72;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.swb-box__fore-temp {
	font-size:   0.85em;
	font-weight: 700;
}

/* Loading / error in box */
.swb-box__loading,
.swb-box__error {
	opacity:    0.7;
	font-style: italic;
	text-align: center;
	padding:    12px 0;
	display:    block;
}

/* ------------------------------------------------------------------ */
/*  Icons                                                               */
/* ------------------------------------------------------------------ */
.swb-icon {
	width:       var(--swb-icon-size);
	height:      var(--swb-icon-size);
	flex-shrink: 0;
	display:     inline-block;
	vertical-align: middle;
}

.swb-icon--default svg {
	width:  var(--swb-icon-size);
	height: var(--swb-icon-size);
	fill:   none;
	stroke: var(--swb-color);
}

/* ------------------------------------------------------------------ */
/*  Admin page styles                                                   */
/* ------------------------------------------------------------------ */
.swb-admin-wrap h1 {
	margin-bottom: 4px;
}

.swb-section {
	background:    #fff;
	border:        1px solid #c3c4c7;
	border-radius: 4px;
	padding:       16px 24px 20px;
	margin-bottom: 20px;
}

.swb-section h2 {
	margin-top:     0;
	padding-top:    0;
	border-bottom:  1px solid #eee;
	padding-bottom: 8px;
	margin-bottom:  12px;
}

/* ------------------------------------------------------------------ */
/*  Accessibility / print                                               */
/* ------------------------------------------------------------------ */
@media print {
	#swb-bar,
	.swb-bar-spacer {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#swb-bar,
	.swb-box {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	#swb-bar   { border-bottom: 1px solid ButtonText; }
	.swb-box   { border: 1px solid ButtonText; }
}

/* Mobile — allow scroll on very small screens */
@media (max-width: 480px) {
	#swb-bar {
		padding: 6px 12px;
	}
	.swb-bar__city {
		font-size: 0.95em;
	}
	.swb-box {
		max-width: 100%;
	}
}