/*
 * Simple Weather Bar by AjB — stylesheet v1.1
 * Uses CSS custom properties set dynamically from admin settings.
 * System font stack — no external font dependencies.
 */

/* ------------------------------------------------------------------ */
/*  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;
	--swb-meta-opacity:    0.55;
	--swb-meta-font-size:  11px;
	--swb-label-opacity:   0.72;
	/* Widget / box */
	--swb-box-bg:          #1a1a2e;
	--swb-box-color:       #ffffff;
	--swb-box-font-size:   14px;
	--swb-box-temp-size:   2.4em;
	--swb-box-radius:      10px;
	--swb-box-width:       280px;
	--swb-box-min-height:  auto;
	--swb-box-padding:     18px 20px;
	--swb-box-icon-size:   36px;
	--swb-box-meta-opacity:    0.55;
	--swb-box-meta-font-size:  11px;
	--swb-box-label-opacity:   0.72;
}

/* ------------------------------------------------------------------ */
/*  Shimmer / skeleton loading animation                                */
/* ------------------------------------------------------------------ */
@keyframes swb-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

.swb-skeleton {
	display:           inline-block;
	height:            1em;
	border-radius:     4px;
	background:        linear-gradient(
		90deg,
		rgba(255,255,255,0.08) 25%,
		rgba(255,255,255,0.18) 50%,
		rgba(255,255,255,0.08) 75%
	);
	background-size:   600px 100%;
	animation:         swb-shimmer 1.4s infinite linear;
}

/* Bar shimmer — a row of skeleton blocks */
.swb-bar__shimmer {
	display:     flex;
	align-items: center;
	gap:         12px;
}

.swb-bar__shimmer .swb-skeleton--city  { width: 80px; }
.swb-bar__shimmer .swb-skeleton--icon  { width: 22px; height: 22px; border-radius: 50%; }
.swb-bar__shimmer .swb-skeleton--cond  { width: 90px; }
.swb-bar__shimmer .swb-skeleton--temp  { width: 40px; }
.swb-bar__shimmer .swb-skeleton--extra { width: 60px; }

/* Box shimmer */
.swb-box__shimmer {
	padding: 4px 0;
}

.swb-box__shimmer .swb-skeleton--icon-lg {
	width:         36px;
	height:        36px;
	border-radius: 50%;
	flex-shrink:   0;
}

.swb-box__shimmer .swb-skeleton--title { width: 100px; margin-bottom: 6px; }
.swb-box__shimmer .swb-skeleton--sub   { width:  70px; height: 0.8em; }
.swb-box__shimmer .swb-skeleton--row   { width: 100%; height: 0.85em; margin-bottom: 8px; }
.swb-box__shimmer .swb-skeleton--row:last-child { margin-bottom: 0; width: 80%; }

/* ------------------------------------------------------------------ */
/*  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;
}

#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.swb-bar--top    { position: sticky; top: 0; }
#swb-bar.swb-bar--inline.swb-bar--bottom { position: sticky; bottom: 0; }

.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;
}
.swb-bar__inner::-webkit-scrollbar { display: none; }

.swb-bar__current {
	display:     flex;
	align-items: center;
	gap:         var(--swb-gap);
	flex-shrink: 0;
}

/* City + date stacked */
.swb-bar__location {
	display:        flex;
	align-items:    center;
	gap:            6px;
	line-height:    1.2;
	flex-shrink:    0;
}
.swb-bar__location--stacked {
	flex-direction: column;
	align-items:    flex-start;
	gap:            1px;
}
.swb-bar__city {
	font-weight:    700;
	font-size:      1.05em;
	white-space:    nowrap;
	letter-spacing: 0.01em;
}
.swb-bar__date-sep {
	opacity: 0.35;
	font-size: 0.8em;
}
.swb-bar__date {
	font-size:   var(--swb-meta-font-size, 11px);
	opacity:     var(--swb-meta-opacity, 0.55);
	white-space: nowrap;
}

/* Divider */
.swb-bar__divider {
	display:     inline-block;
	width:       1px;
	height:      28px;
	background:  currentColor;
	opacity:     0.25;
	flex-shrink: 0;
}

/* Temperature */
.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 */
.swb-bar__sep {
	display:       inline-block;
	width:         4px;
	height:        4px;
	border-radius: 50%;
	background:    currentColor;
	opacity:       0.35;
	flex-shrink:   0;
	vertical-align: middle;
}

/* Forecast divider */
.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;
}

.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-box-bg);
	color:         var(--swb-box-color);
	font-family:   var(--swb-font-family);
	font-size:     var(--swb-box-font-size);
	border-radius: var(--swb-box-radius);
	padding:       var(--swb-box-padding);
	box-sizing:    border-box;
	width:         var(--swb-box-width);
	min-height:    var(--swb-box-min-height);
	max-width:     100%;
	overflow:      hidden;
}

/* Box header */
.swb-box__header {
	margin-bottom: 14px;
}

/* Location meta line: "Killarney · Mon 3 Jun" */
.swb-box__meta {
	font-size:      var(--swb-box-meta-font-size, 0.85em);
	font-weight:    500;
	opacity:        var(--swb-box-meta-opacity, 0.55);
	letter-spacing: 0.02em;
	margin-bottom:  8px;
	display:        flex;
	align-items:    center;
	gap:            5px;
	flex-wrap:      wrap;
}

/* Stacked variant — each part on its own line */
.swb-box__meta--stacked {
	flex-direction: column;
	gap:            2px;
	align-items:    flex-start;
}

/* Centred stacked meta for centred layouts */
.swb-box--layout-b .swb-box__meta--stacked,
.swb-box--layout-d .swb-box__meta--stacked {
	align-items: center;
}

.swb-box__meta-dot {
	opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/*  Box size presets                                                    */
/* ------------------------------------------------------------------ */
/*
 * Presets set the temperature display size and default padding only.
 * Icon size and font size are admin-controlled — they are applied as
 * inline styles on the element (from PHP and JS) so they always win.
 * Presets must NOT redefine --swb-box-icon-size or --swb-box-font-size
 * because a class-level CSS var beats a :root var but loses to inline style,
 * and the PHP render path only has the :root var (no inline style for font).
 */
.swb-box--preset-compact  { --swb-box-temp-size: 1.8em; --swb-box-padding: 12px 14px; }
.swb-box--preset-standard { --swb-box-temp-size: 2.4em; --swb-box-padding: 18px 20px; }
.swb-box--preset-featured { --swb-box-temp-size: 3em;   --swb-box-padding: 24px 26px; }

/* ------------------------------------------------------------------ */
/*  Hero row layouts                                                    */
/* ------------------------------------------------------------------ */

/* Shared hero base */
.swb-box__hero {
	display:     flex;
	align-items: center;
	gap:         12px;
}

/* Layout A — text left, icon right */
.swb-box__hero--icon-right {
	justify-content: space-between;
	align-items:     flex-start;
}
.swb-box__hero--icon-right .swb-box__hero-text {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	flex:           1;
	min-width:      0;
}
.swb-box__hero--icon-right .swb-icon,
.swb-box__hero--icon-right .swb-icon--default {
	flex-shrink: 0;
	max-width:   40%;
}

/* Layout B & D — stacked centred */
.swb-box__hero--stacked {
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	text-align:     center;
}
.swb-box__hero--stacked .swb-icon,
.swb-box__hero--stacked .swb-icon--default {
	max-width:  60%;
	max-height: 80px;
}

/* Layout C — icon left, text right */
.swb-box__hero--icon-left {
	align-items: flex-start;
	gap:         14px;
}
.swb-box__hero--icon-left .swb-box__hero-text {
	display:        flex;
	flex-direction: column;
	gap:            4px;
	flex:           1;
	min-width:      0;
}
.swb-box__hero--icon-left .swb-icon,
.swb-box__hero--icon-left .swb-icon--default {
	flex-shrink: 0;
	max-width:   40%;
}

/* Centred meta for stacked (B/D) layouts — handled by .swb-box__meta--stacked above */

/* No-icon variant: temp and condition inline with baseline alignment */
.swb-box__hero--text {
	align-items: baseline;
	gap:         10px;
}

/* Big temperature */
.swb-box__temp-big {
	font-size:   var(--swb-box-temp-size, 2.4em);
	font-weight: 500;
	line-height: 1;
	flex-shrink: 0;
	display:     block;
}

/* Condition text */
.swb-box__condition {
	font-size:  13px;
	color:      var(--swb-box-color, currentColor);
	opacity:    0.7;
	display:    block;
}

/* Icon block: icon centred, condition centred below */
.swb-box__icon-block {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            4px;
	flex-shrink:    0;
}

.swb-box__icon-block .swb-icon,
.swb-box__icon-block img,
.swb-box__icon-block svg {
	width:      var(--swb-box-icon-size, 32px) !important;
	height:     var(--swb-box-icon-size, 32px) !important;
	max-width:  var(--swb-box-icon-size, 32px);
	max-height: var(--swb-box-icon-size, 32px);
	object-fit: contain;
	display:    block;
}

.swb-box__icon-block .swb-box__condition {
	font-size:  11px;
	text-align: center;
	max-width:  80px;
	line-height: 1.3;
}

/* Data rows — top border acts as separator from header */
.swb-box__data {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	border-top:     1px solid rgba(128,128,128,0.25);
	margin-top:     12px;
	padding-top:    12px;
}

.swb-box__item {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	border-bottom:   1px solid rgba(128,128,128,0.15);
	padding-bottom:  6px;
}
.swb-box__item:last-child { border-bottom: none; padding-bottom: 0; }
.swb-box__label { opacity: var(--swb-box-label-opacity, 0.72); }
.swb-box__value { font-weight: 700; }

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

.swb-box__fore-day {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            3px;
	flex:           1;
}
.swb-box__fore-label {
	font-size:      0.70em;
	opacity:        0.70;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.swb-box__fore-temp {
	font-size:   0.82em;
	font-weight: 700;
}

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

/* ------------------------------------------------------------------ */
/*  Icons — CRITICAL: inherit colour from parent so they work          */
/*  in both dark bar and dark/light widget backgrounds                  */
/* ------------------------------------------------------------------ */
.swb-icon {
	width:          var(--swb-icon-size);
	height:         var(--swb-icon-size);
	flex-shrink:    0;
	display:        inline-block;
	vertical-align: middle;
}

/* SVG icons inherit the text colour of whatever contains them */
.swb-icon--default,
.swb-icon--default svg {
	display: inline-block;
	width:   var(--swb-icon-size);
	height:  var(--swb-icon-size);
}

.swb-icon--default svg {
	display:      block;         /* removes inline baseline gap */
	fill:         none;
	stroke:       currentColor;  /* ← inherits --swb-color or --swb-box-color */
	stroke-width: 2;
}

/*
 * JS-path icons are <img src="...svg"> — external SVGs cannot use
 * currentColor via CSS. We use a CSS var --swb-icon-filter (set from
 * PHP based on the chosen text colour) so icons match the text colour
 * automatically on both dark and light backgrounds.
 */
#swb-bar .swb-icon[src] {
	filter: var(--swb-icon-filter, brightness(0) invert(1));
}
.swb-box .swb-icon[src] {
	filter: var(--swb-box-icon-filter, brightness(0) invert(1));
}

/* ------------------------------------------------------------------ */
/*  Shortcode alignment wrapper                                         */
/* ------------------------------------------------------------------ */
.swb-shortcode-wrap {
	width:    100%;
	overflow: hidden; /* prevent box overflow from causing page scroll */
}

/* ------------------------------------------------------------------ */
/*  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:  16px;
	margin-top:     0;
}

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

/* Tighter fields table */
.swb-fields-table { width: 100%; border-collapse: collapse; }
.swb-fields-table thead th {
	text-align:    left;
	font-weight:   600;
	padding:       4px 8px 8px;
	border-bottom: 1px solid #ddd;
	font-size:     0.85em;
	color:         #555;
}
.swb-fields-table tbody tr:hover { background: #f9f9f9; }
.swb-fields-table tbody td {
	padding:       6px 8px;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}
.swb-fields-table tbody tr:last-child td { border-bottom: none; }

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

@media (prefers-reduced-motion: reduce) {
	.swb-skeleton { animation: none; }
}

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

@media (max-width: 480px) {
	#swb-bar  { padding: 6px 12px; }
	.swb-box  { width: 100%; max-width: 100%; }
}