/* ******************************************************************
   MARIO WEATHER STATION
   Arkusz stylów CSS
   Wersja 1.0
   ****************************************************************** */

/* ******************************************************************
   1. ZMIENNE I PALETA KOLORÓW
   ****************************************************************** */

:root {
	color-scheme: dark;

	--kolor-tla: #0b1120;
	--kolor-panelu: #131d30;
	--kolor-karty: #293b5a;
	--kolor-obramowania: #354968;

	--kolor-pomaranczowy: #ff8500;
	--kolor-fioletowy: #4b267a;
	--kolor-fioletowy-jasny: #a855ff;

	--kolor-tekstu: #edf2f7;
	--kolor-tekstu-pomocniczego: #9baac0;

	--kolor-temperatury: #ff7a00;
	--kolor-wilgotnosci: #00bfff;
	--kolor-cisnienia: #a855ff;
	--kolor-opadow: #00e5a0;
	--kolor-wiatru: #ffe600;
	--kolor-uv: #ff4fa3;

	--szerokosc-maksymalna: 1600px;
	--odstep-sekcji: 28px;
	--odstep-kart: 16px;
	--promien-panelu: 10px;
}

/* ******************************************************************
   2. RESET I USTAWIENIA PODSTAWOWE
   ****************************************************************** */

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	padding: 0 0 76px;

	background-color: var(--kolor-tla);
	color: var(--kolor-tekstu);

	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

button,
input {
	font: inherit;
}

button {
	cursor: pointer;
}

button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--kolor-pomaranczowy);
	outline-offset: 3px;
}

p {
	overflow-wrap: anywhere;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ******************************************************************
   3. NAGŁÓWEK APLIKACJI
   ****************************************************************** */

#app-header {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 28px 20px 24px;
	text-align: center;

	background-color: var(--kolor-panelu);
	border-bottom: 3px solid var(--kolor-fioletowy);
}

#app-header .brand {
	width: 100%;
	text-align: center;
}

#app-header .brand-name {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.3em;

	margin: 0;

	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-weight: 800;
	letter-spacing: 1.5px;
	line-height: 1.3;
}

.brand-mario {
	color: var(--kolor-pomaranczowy);
}

.brand-weather {
	color: var(--kolor-tekstu);
}

.brand-station {
	color: var(--kolor-fioletowy-jasny);
}

#app-header .brand-subtitle {
	margin: 10px 0 0;

	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 3px;
}

/* ******************************************************************
   4. GŁÓWNY OBSZAR STRONY
   ****************************************************************** */

#weather-panel {
	width: 100%;
	max-width: var(--szerokosc-maksymalna);
	margin: 0 auto;
	padding: 28px 24px 36px;
}

#weather-panel h2 {
	margin: 0 0 18px;
	color: var(--kolor-tekstu);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.35;
}

#weather-panel h3 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

/* ******************************************************************
   5. PANEL LOKALIZACJI
   ****************************************************************** */

#location-panel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;

	margin-bottom: var(--odstep-sekcji);
	padding: 20px 24px;

	background-color: var(--kolor-panelu);
	border: 1px solid var(--kolor-obramowania);
	border-radius: var(--promien-panelu);
}

#location-panel h1 {
	margin: 0 0 6px;
	color: var(--kolor-pomaranczowy);
	font-size: 0.85rem;
	letter-spacing: 1px;
}

#current-location {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

#location-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min(100%, 420px);
}

#location-form label {
	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.85rem;
}

.location-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

#location-input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;

	color: var(--kolor-tekstu);
	background-color: var(--kolor-tla);

	border: 1px solid var(--kolor-obramowania);
	border-radius: 6px;
}

#location-input::placeholder {
	color: var(--kolor-tekstu-pomocniczego);
}

#location-search-button {
	flex: 0 0 auto;
	padding: 10px 18px;

	color: #0b1120;
	background-color: var(--kolor-pomaranczowy);

	border: 1px solid var(--kolor-pomaranczowy);
	border-radius: 6px;

	font-weight: 700;

	transition: background-color 0.15s ease;
}

#location-search-button:hover {
	background-color: #ffaa45;
}

/* ******************************************************************
   6. GŁÓWNY PANEL AKTUALNEJ POGODY
   ****************************************************************** */

#current-weather {
	display: grid;

	grid-template-columns:
		minmax(0, 0.75fr)
		minmax(0, 1.7fr)
		minmax(0, 0.75fr);

	align-items: stretch;
	gap: var(--odstep-kart);

	margin-bottom: var(--odstep-sekcji);
}

#left-weather-panel,
#right-weather-panel {
	display: flex;
	flex-direction: column;
	gap: var(--odstep-kart);
	min-width: 0;
}

.measurement-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 10px;

	min-width: 0;
	min-height: 145px;
	padding: 22px 20px;

	background-color: var(--kolor-karty);
	border: 1px solid var(--kolor-obramowania);
	border-radius: var(--promien-panelu);

	transition: border-color 0.15s ease;
}

.measurement-card:hover {
	border-color: var(--kolor-pomaranczowy);
}

.measurement-card h3 {
	display: flex;
	align-items: center;
	gap: 9px;

	color: var(--kolor-tekstu);
}

.measurement-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: currentColor;
}

.temperature-card .measurement-icon {
	color: var(--kolor-temperatury);
}

.humidity-card .measurement-icon {
	color: var(--kolor-wilgotnosci);
}

.pressure-card .measurement-icon {
	color: var(--kolor-cisnienia);
}

.precipitation-card .measurement-icon {
	color: var(--kolor-opadow);
}

.wind-card .measurement-icon {
	color: var(--kolor-wiatru);
}

.uv-card .measurement-icon {
	color: var(--kolor-uv);
}

.measurement-card p {
	margin: 0;
	overflow-wrap: anywhere;
}

.measurement-card p[id$="-value"] {
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
	font-weight: 800;
	line-height: 1.2;
}

.measurement-card p:not([id$="-value"]) {
	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.85rem;
}

.temperature-card {
	border-left: 3px solid var(--kolor-temperatury);
}

.temperature-card p[id$="-value"] {
	color: var(--kolor-temperatury);
}

#temperature-feels-like {
	color: var(--kolor-fioletowy-jasny) !important;
	font-size: 0.9rem !important;
	font-weight: 600;
}

.humidity-card {
	border-left: 3px solid var(--kolor-wilgotnosci);
}

.humidity-card p[id$="-value"] {
	color: var(--kolor-wilgotnosci);
}

.pressure-card {
	border-left: 3px solid var(--kolor-cisnienia);
}

.pressure-card p[id$="-value"] {
	color: var(--kolor-cisnienia);
}

.precipitation-card {
	border-left: 3px solid var(--kolor-opadow);
}

.precipitation-card p[id$="-value"] {
	color: var(--kolor-opadow);
}

.wind-card {
	border-left: 3px solid var(--kolor-wiatru);
}

.wind-card p[id$="-value"] {
	color: var(--kolor-wiatru);
}

.uv-card {
	border-left: 3px solid var(--kolor-uv);
}

.uv-card p[id$="-value"] {
	color: var(--kolor-uv);
}

/* ******************************************************************
   7. CENTRALNY PANEL POGODOWY
   TARCZA KOMPASU ZE WSKAZÓWKĄ
   ****************************************************************** */

#central-weather-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 100%;

	padding: 10px;

	background-color: var(--kolor-panelu);
	border: 1px solid var(--kolor-obramowania);
	border-top: 3px solid var(--kolor-pomaranczowy);
	border-radius: var(--promien-panelu);

	text-align: center;
}

/* Kontener tarczy i wskazówki */

#compass-container {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;

	min-width: 0;
	min-height: 0;

	flex: 0 1 auto;
}

/* Tarcza kompasu */

#compass-dial {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

/* Wskazówka kompasu
   Grafika SVG: viewBox 220 x 420.
   Oś obrotu grafiki znajduje się w punkcie y = 190,
   czyli na wysokości 45.238% całego SVG. */

#compass-needle {
	position: absolute;
	z-index: 1;

	left: 50%;
	top: 50%;

	display: block;

	height: 78%;
	width: auto;
	max-width: 100%;

	object-fit: contain;
	overflow: visible;

	transform-origin: 50% 45.238%;
	transform: translate(-50%, -45.238%) rotate(180deg);

	transition: transform 0.5s ease;

	user-select: none;
	pointer-events: none;
}

/* ******************************************************************
   8. RÓŻA WIATRÓW
   ****************************************************************** */

#wind-rose-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;

	width: 100%;
}

#wind-rose-panel h3 {
	color: var(--kolor-fioletowy-jasny);
	font-size: 1rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#wind-rose {
	width: min(100%, 280px);
	aspect-ratio: 1;

	background-color: transparent;
}

#wind-rose-svg {
	display: block;
	width: 100%;
	height: 100%;

	background-color: transparent;
}

#wind-rose-needle {
	transform-origin: 120px 126px;
	transition: transform 0.5s ease;
}

.wind-needle-north,
.wind-needle-north-left {
	fill: var(--kolor-pomaranczowy);
}

.wind-needle-north-right {
	fill: var(--kolor-fioletowy-jasny);
}

.wind-needle-south {
	fill: var(--kolor-karty);
	stroke: var(--kolor-obramowania);
	stroke-width: 0.8;
}

.wind-needle-center {
	fill: var(--kolor-tekstu);
	stroke: var(--kolor-tla);
	stroke-width: 2;
}

#wind-direction-value {
	margin: 0;
	color: var(--kolor-wiatru);
	font-size: 1.15rem;
	font-weight: 800;
}

#wind-direction-description {
	margin: 0;
	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.85rem;
}

#wind-speed-value {
	margin: 0;
	color: var(--kolor-wiatru);
	font-size: 1.5rem;
	font-weight: 800;
}

#weather-update-time {
	margin: auto 0 0;
	padding-top: 20px;

	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.8rem;
}

/* ******************************************************************
   9. STATUS POŁĄCZENIA Z API
   WSKAŹNIK W WIERSZU WYSZUKIWANIA LOKALIZACJI
   ****************************************************************** */

#api-status-panel {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-start;
	align-items: center;

	margin: 0;
	min-height: 34px;
}

#api-status-button {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	align-items: center;
	gap: 8px;

	min-height: 34px;
	padding: 6px 12px;

	color: var(--kolor-tekstu-pomocniczego);
	background-color: var(--kolor-panelu);

	border: 1px solid var(--kolor-obramowania);
	border-radius: 18px;
}

#api-status-icon {
	display: inline-block;
	flex: 0 0 10px;

	width: 10px;
	height: 10px;
	border-radius: 50%;

	background-color: var(--kolor-tekstu-pomocniczego);
	color: var(--kolor-tekstu-pomocniczego);

	font-size: 1rem;
	line-height: 1;
}

/* Kolor statusu może być ustawiany przez JavaScript. */
#api-status-icon[style*="color"] {
	background-color: currentColor;
}

#api-status-tooltip {
	position: absolute;
	z-index: 10;
	top: calc(100% + 6px);
	left: 0;

	width: max-content;
	max-width: min(320px, calc(100vw - 40px));
	margin: 0;
	padding: 10px 12px;

	color: var(--kolor-tekstu);
	background-color: var(--kolor-karty);

	border: 1px solid var(--kolor-obramowania);
	border-radius: 6px;

	font-size: 0.85rem;
	line-height: 1.45;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 0.15s ease,
		visibility 0.15s ease;
}

/* Widoczność komunikatu przy najechaniu, fokusie lub klasie JS. */
#api-status-panel:hover #api-status-tooltip,
#api-status-button:focus-visible + #api-status-tooltip,
#api-status-panel:focus-within #api-status-tooltip,
#api-status-tooltip.api-status-visible {
	opacity: 1;
	visibility: visible;
}

/* ******************************************************************
   10. SEKCJE PROGNOZ
   ****************************************************************** */

#hourly-forecast,
#daily-forecast {
	margin-bottom: var(--odstep-sekcji);
	padding: 24px;

	background-color: var(--kolor-panelu);
	border: 1px solid var(--kolor-obramowania);
	border-radius: var(--promien-panelu);
}

#hourly-forecast h2,
#daily-forecast h2 {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--kolor-fioletowy);
}

/* ******************************************************************
   11. POZIOME KARTY PROGNOZY
   ****************************************************************** */

.forecast-list {
	display: grid;
	grid-auto-columns: minmax(150px, 1fr);
	grid-auto-flow: column;
	gap: 12px;

	overflow-x: auto;
	overflow-y: hidden;

	padding: 4px 2px 14px;

	scrollbar-width: thin;
	scrollbar-color: var(--kolor-fioletowy) var(--kolor-panelu);
}

.forecast-list::-webkit-scrollbar {
	height: 8px;
}

.forecast-list::-webkit-scrollbar-track {
	background-color: var(--kolor-tla);
	border-radius: 10px;
}

.forecast-list::-webkit-scrollbar-thumb {
	background-color: var(--kolor-fioletowy);
	border-radius: 10px;
}

.forecast-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	min-width: 0;
	min-height: 180px;
	padding: 16px 12px;

	background-color: var(--kolor-karty);
	border: 1px solid var(--kolor-obramowania);
	border-radius: 8px;

	text-align: center;

	transition: border-color 0.15s ease;
}

.forecast-card:hover {
	border-color: var(--kolor-pomaranczowy);
}

.forecast-card h3 {
	color: var(--kolor-tekstu);
}

.forecast-card p {
	margin: 0;
}

.forecast-icon {
	display: grid;
	place-items: center;

	min-height: 34px;

	color: var(--kolor-pomaranczowy);
	font-size: 1.8rem;
	font-weight: 700;
}

.forecast-temperature {
	color: var(--kolor-temperatury);
	font-size: 1.25rem;
	font-weight: 800;
}

.forecast-min-temperature {
	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.9rem;
}

.forecast-precipitation {
	color: var(--kolor-wilgotnosci);
	font-size: 0.8rem;
}

.forecast-date {
	color: var(--kolor-tekstu-pomocniczego);
	font-size: 0.8rem;
}

/* ******************************************************************
   12. STOPKA
   ****************************************************************** */

#app-footer {
	position: fixed;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 1000;

	display: block;
	width: max-content;
	max-width: calc(100vw - 24px);
	margin: 0;
	padding: 8px 16px;

	background-color: var(--kolor-panelu);
	border: 1px solid var(--kolor-pomaranczowy);
	border-radius: 6px;

	text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

#app-footer p {
	margin: 0;

	color: #b8c4d8;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;

	overflow-wrap: anywhere;
}

/* ******************************************************************
   13. RESPONSYWNOŚĆ — MNIEJSZE KOMPUTERY I TABLETY
   ****************************************************************** */

@media (max-width: 1100px) {
	#weather-panel {
		padding: 22px 16px 30px;
	}

	#current-weather {
		grid-template-columns:
			minmax(0, 0.75fr)
			minmax(0, 1.7fr)
			minmax(0, 0.75fr);

		gap: 12px;
	}

	.measurement-card {
		padding: 18px 14px;
	}

	#central-weather-panel {
		padding: 10px;
	}

	#wind-rose {
		width: min(100%, 240px);
	}

	#hourly-forecast,
	#daily-forecast {
		padding: 20px;
	}
}

/* ******************************************************************
   14. RESPONSYWNOŚĆ — TABLETY W PIONIE I MAŁE EKRANY
   ****************************************************************** */

@media (max-width: 760px) {
	#app-header {
		padding: 24px 16px 20px;
	}

	#app-header .brand-name {
		gap: 0.25em;
		letter-spacing: 0.5px;
	}

	#app-header .brand-subtitle {
		letter-spacing: 2px;
	}

	#location-panel {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;

		padding: 18px;
	}

	#location-form {
		width: 100%;
	}

	#current-weather {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 12px;
	}

	#central-weather-panel {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 280px;
		padding: 10px;
	}

	#left-weather-panel {
		grid-column: 1;
		grid-row: 2;
	}

	#right-weather-panel {
		grid-column: 2;
		grid-row: 2;
	}

	.measurement-card {
		min-height: 125px;
		padding: 16px 12px;
	}

	.measurement-card p[id$="-value"] {
		font-size: 1.6rem;
	}

	#wind-rose {
		width: min(100%, 260px);
	}

	/* Status pozostaje przy wyszukiwaniu lokalizacji. */
	#api-status-panel {
		margin: 0;
	}

	#hourly-forecast,
	#daily-forecast {
		padding: 18px 14px;
	}

	.forecast-list {
		grid-auto-columns: minmax(145px, 42%);
	}
}

/* ******************************************************************
   15. RESPONSYWNOŚĆ — TELEFONY
   ****************************************************************** */

@media (max-width: 480px) {
	body {
		font-size: 15px;
		padding-bottom: 68px;
	}

	#app-header {
		padding: 20px 12px 18px;
	}

	#app-header .brand-name {
		font-size: 1.55rem;
		letter-spacing: 0;
	}

	#app-header .brand-subtitle {
		font-size: 0.75rem;
		letter-spacing: 1.5px;
	}

	#weather-panel {
		padding: 16px 10px 24px;
	}

	#location-panel {
		margin-bottom: 18px;
		padding: 15px 12px;
	}

	#current-location {
		font-size: 0.95rem;
	}

	#location-form {
		flex-direction: column;
	}

	/* Status i pole tekstowe pozostają w pierwszym wierszu.
	   Przycisk wyszukiwania może znaleźć się poniżej. */
	.location-search {
		flex-wrap: wrap;
	}

	#api-status-panel {
		flex: 0 0 auto;
	}

	#api-status-button {
		gap: 6px;
		padding: 6px 9px;
		font-size: 0.85rem;
	}

	#location-input {
		flex: 1 1 120px;
	}

	#location-search-button {
		flex: 0 0 100%;
		width: 100%;
	}

	#current-weather {
		gap: 10px;
		margin-bottom: 22px;
	}

	#central-weather-panel {
		min-height: 240px;
		padding: 8px;
	}

	#central-weather-panel > h2 {
		font-size: 1.25rem;
	}

	#wind-rose {
		width: min(100%, 230px);
	}

	.measurement-card {
		min-height: 115px;
		gap: 8px;
		padding: 14px 10px;
	}

	.measurement-card h3 {
		font-size: 0.85rem;
	}

	.measurement-card p[id$="-value"] {
		font-size: 1.4rem;
	}

	.measurement-card p:not([id$="-value"]) {
		font-size: 0.75rem;
	}

	#hourly-forecast,
	#daily-forecast {
		margin-bottom: 20px;
		padding: 16px 10px;
	}

	#hourly-forecast h2,
	#daily-forecast h2 {
		font-size: 1.2rem;
	}

	.forecast-list {
		grid-auto-columns: minmax(135px, 65%);
		gap: 10px;
	}

	.forecast-card {
		min-height: 170px;
		padding: 14px 10px;
	}

	#api-status-tooltip {
		max-width: calc(100vw - 32px);
	}

	#app-footer {
		bottom: 8px;
		max-width: calc(100vw - 16px);
		padding: 7px 10px;
	}

	#app-footer p {
		font-size: 0.65rem;
	}
}

/* ******************************************************************
   16. OGRANICZENIE ANIMACJI NA ŻĄDANIE UŻYTKOWNIKA
   ****************************************************************** */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}
/* ******************************************************************
   17. PORYWY WIATRU — MNIEJSZY NAPIS I INNY KOLOR
   ****************************************************************** */

#wind-gusts-value {
	color: #7dd3fc !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	line-height: 1.4;
}
/* ******************************************************************
   18. WIDOCZNOŚĆ — CZYTELNY WIERSZ BEZ OSOBNEGO TŁA
   ****************************************************************** */

#visibility-value {
	margin-top: 8px !important;
	padding: 0 !important;

	color: #ff8500 !important;
	background: transparent !important;

	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	font-size: 0.95rem !important;
	font-weight: 700 !important;
	line-height: 1.5;

	text-shadow: none !important;
}