/* =========================================================
   Tuliszow.pl — motywy sezonowe
   ========================================================= */

html {
  color-scheme: light;
}

/* WIOSNA */
html[data-season="spring"] {
  --season-bg-top: #dff4ff;
  --season-bg-middle: #eff9e6;
  --season-bg-bottom: #fff6e7;

  --season-glow-1: rgba(255, 191, 210, .42);
  --season-glow-2: rgba(151, 215, 113, .34);

  --surface: rgba(255, 255, 255, .82);
  --surface-secondary: rgba(247, 255, 239, .88);

  --text-main: #30452b;
  --text-muted: #667660;

  --accent-main: #78b95a;
  --accent-secondary: #f2a9bd;
  --accent-soft: #dcefcf;

  --border-main: rgba(89, 132, 72, .17);
  --shadow-main: 0 22px 60px rgba(94, 137, 76, .14);

  --hero-overlay-start: rgba(239, 249, 230, .92);
  --hero-overlay-middle: rgba(239, 249, 230, .56);
  --hero-overlay-end: rgba(239, 249, 230, .08);

  --button-text: #27451f;
  --theme-color: #9bd47b;
}

/* LATO */
html[data-season="summer"] {
  --season-bg-top: #cceeff;
  --season-bg-middle: #f4f7d3;
  --season-bg-bottom: #fff5d8;

  --season-glow-1: rgba(255, 216, 101, .58);
  --season-glow-2: rgba(117, 192, 87, .30);

  --surface: rgba(255, 255, 255, .82);
  --surface-secondary: rgba(255, 249, 229, .88);

  --text-main: #344523;
  --text-muted: #69795b;

  --accent-main: #efb63f;
  --accent-secondary: #79b75a;
  --accent-soft: #fff0b9;

  --border-main: rgba(129, 115, 49, .16);
  --shadow-main: 0 22px 60px rgba(160, 128, 50, .15);

  --hero-overlay-start: rgba(255, 249, 229, .91);
  --hero-overlay-middle: rgba(255, 249, 229, .52);
  --hero-overlay-end: rgba(255, 249, 229, .06);

  --button-text: #584315;
  --theme-color: #f2c65c;
}

/* JESIEŃ */
html[data-season="autumn"] {
  --season-bg-top: #f3d6ae;
  --season-bg-middle: #f7e4c7;
  --season-bg-bottom: #efe0cb;

  --season-glow-1: rgba(205, 103, 48, .32);
  --season-glow-2: rgba(232, 174, 79, .36);

  --surface: rgba(255, 248, 236, .86);
  --surface-secondary: rgba(250, 232, 207, .90);

  --text-main: #503826;
  --text-muted: #806852;

  --accent-main: #c86c36;
  --accent-secondary: #d7a23e;
  --accent-soft: #f3d8b5;

  --border-main: rgba(135, 80, 43, .18);
  --shadow-main: 0 22px 60px rgba(120, 73, 40, .16);

  --hero-overlay-start: rgba(250, 232, 207, .93);
  --hero-overlay-middle: rgba(250, 232, 207, .58);
  --hero-overlay-end: rgba(250, 232, 207, .08);

  --button-text: #4f301f;
  --theme-color: #cb7a43;
}

/* ZIMA */
html[data-season="winter"] {
  --season-bg-top: #cfe6f4;
  --season-bg-middle: #edf5fa;
  --season-bg-bottom: #f7fafc;

  --season-glow-1: rgba(170, 217, 244, .44);
  --season-glow-2: rgba(210, 231, 243, .55);

  --surface: rgba(250, 253, 255, .86);
  --surface-secondary: rgba(235, 246, 252, .91);

  --text-main: #284252;
  --text-muted: #637985;

  --accent-main: #65a9cf;
  --accent-secondary: #91c9df;
  --accent-soft: #dceff8;

  --border-main: rgba(75, 125, 151, .17);
  --shadow-main: 0 22px 60px rgba(69, 116, 141, .14);

  --hero-overlay-start: rgba(238, 248, 253, .94);
  --hero-overlay-middle: rgba(238, 248, 253, .61);
  --hero-overlay-end: rgba(238, 248, 253, .10);

  --button-text: #1f4357;
  --theme-color: #8ec7e3;
}

/* GŁÓWNE TŁO */

body {
  background:
    radial-gradient(
      circle at 8% 4%,
      var(--season-glow-1),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 7%,
      var(--season-glow-2),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      var(--season-bg-top) 0%,
      var(--season-bg-middle) 42%,
      var(--season-bg-bottom) 100%
    ) !important;

  color: var(--text-main) !important;
  transition:
    background .45s ease,
    color .35s ease;
}

/* TYPOGRAFIA */

h1,
h2,
h3,
h4,
.brand,
.temp,
.today-title,
.fact .value {
  color: var(--text-main) !important;
}

p,
.lead,
.condition,
.source,
.mini-source,
.today-subtitle,
.mapbox .coords,
footer {
  color: var(--text-muted) !important;
}

a {
  color: var(--accent-main);
}

a:hover {
  color: var(--text-main);
}

/* HEADER */

header {
  position: relative;
}

.logo {
  color: var(--button-text) !important;
  background:
    linear-gradient(
      135deg,
      var(--accent-main),
      var(--accent-secondary)
    ) !important;

  box-shadow: 0 12px 30px var(--season-glow-1) !important;
}

nav a {
  color: var(--text-muted) !important;
}

nav a:hover {
  color: var(--text-main) !important;
}

/* HERO */

.hero {
  position: relative;
  min-height: 480px;

  background:
    linear-gradient(
      95deg,
      var(--hero-overlay-start) 0%,
      var(--hero-overlay-middle) 46%,
      var(--hero-overlay-end) 100%
    ),
    url("/assets/img/tuliszow-krajobraz.png")
      center center / cover no-repeat,
    linear-gradient(
      180deg,
      var(--season-bg-top),
      var(--season-bg-bottom)
    ) !important;

  border-color: var(--border-main) !important;
  box-shadow: var(--shadow-main) !important;
  transition:
    background .45s ease,
    box-shadow .35s ease;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 86% 16%,
      var(--season-glow-1),
      transparent 22%
    );
}

.hero-content {
  position: relative;
  z-index: 1;

  color: var(--text-main) !important;
  background: var(--surface) !important;
  border-color: var(--border-main) !important;
  box-shadow: var(--shadow-main) !important;

  backdrop-filter: blur(8px);
}

/* KARTY I MODUŁY */

.card,
.weather,
.mapbox,
.pill,
.day,
.live-item,
.today-hero,
.aqi-badge,
.cookie-box,
.cookie-modal,
.cookie-option {
  color: var(--text-main) !important;

  background:
    linear-gradient(
      180deg,
      var(--surface),
      var(--surface-secondary)
    ) !important;

  border-color: var(--border-main) !important;
  box-shadow: var(--shadow-main) !important;

  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.card p,
.pill,
.day .name,
.live-item,
.cookie-box p,
.cookie-modal p,
.cookie-option span {
  color: var(--text-muted) !important;
}

.weather-icon,
.today-date-big {
  color: var(--button-text) !important;

  background:
    linear-gradient(
      135deg,
      var(--accent-main),
      var(--accent-secondary)
    ) !important;

  box-shadow: 0 12px 28px var(--season-glow-1) !important;
}

/* FORMULARZ */

.contact-form input,
.contact-form textarea {
  color: var(--text-main) !important;
  background: var(--surface) !important;
  border-color: var(--border-main) !important;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-muted) !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-main) !important;
  box-shadow: 0 0 0 3px var(--season-glow-1) !important;
  outline: none;
}

.contact-form button,
.cookie-accept {
  color: var(--button-text) !important;

  background:
    linear-gradient(
      135deg,
      var(--accent-main),
      var(--accent-secondary)
    ) !important;

  box-shadow: 0 12px 26px var(--season-glow-1) !important;
}

.cookie-reject,
.cookie-settings,
.cookie-footer-button {
  color: var(--text-main) !important;
  background: var(--surface) !important;
  border-color: var(--border-main) !important;
}

/* =========================================================
   PRZEŁĄCZNIK PÓR ROKU
   ========================================================= */

.season-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 7px;
  padding: 7px;
  margin: 12px 0 4px;

  border: 1px solid var(--border-main);
  border-radius: 18px;

  background: var(--surface);
  box-shadow: 0 10px 28px rgba(30, 45, 25, .08);
  backdrop-filter: blur(10px);
}

.season-switcher-label {
  padding: 0 8px;

  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.season-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;

  color: var(--text-muted);
  background: transparent;

  border: 1px solid transparent;
  border-radius: 12px;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform .16s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.season-button:hover {
  color: var(--text-main);
  background: var(--surface-secondary);
  border-color: var(--border-main);
  transform: translateY(-1px);
}

.season-button[aria-pressed="true"] {
  color: var(--button-text);

  background:
    linear-gradient(
      135deg,
      var(--accent-main),
      var(--accent-secondary)
    );

  border-color: transparent;
  box-shadow: 0 7px 18px var(--season-glow-1);
}

.season-button-icon {
  font-size: 16px;
  line-height: 1;
}

/* Delikatne elementy dekoracyjne */

html[data-season="spring"] .hero::after {
  content: "🌸";
}

html[data-season="summer"] .hero::after {
  content: "☀️";
}

html[data-season="autumn"] .hero::after {
  content: "🍂";
}

html[data-season="winter"] .hero::after {
  content: "❄️";
}

.hero::after {
  position: absolute;
  right: 24px;
  top: 22px;
  z-index: 1;

  font-size: 38px;
  opacity: .78;

  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .12));
  pointer-events: none;
}

/* MOBILE */

@media (max-width: 860px) {
  .hero {
    min-height: 520px;

    background:
      linear-gradient(
        180deg,
        var(--hero-overlay-end) 0%,
        var(--hero-overlay-start) 92%
      ),
      url("/assets/img/tuliszow-krajobraz.png")
        center center / cover no-repeat,
      linear-gradient(
        180deg,
        var(--season-bg-top),
        var(--season-bg-bottom)
      ) !important;
  }

  .season-switcher-label {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .season-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-switcher-label {
    grid-column: 1 / -1;
  }

  .season-button {
    width: 100%;
  }

  .hero::after {
    right: 16px;
    top: 16px;
    font-size: 30px;
  }
}