/* ===========================================================
   THEME.CSS — Motyw, kolory, typografia, dark mode
   =========================================================== */

/* Fonty */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Rajdhani:wght@400;500;600&display=swap');

/* Reset podstawowy */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

html,
body {
  background: var(--page-bg);
}

/* ===========================================================
   THEME.CSS — Motyw, kolory, typografia, dark mode
   =========================================================== */

/* ===========================================================
   ZMIENNE — Light Mode
=========================================================== */
:root {
  --page-bg: #f3f4f6;
  --content-bg: #f3f4f6;

  --card-bg: #ffffff;
  --card-bg-soft: #f8fafc;

  --border-color: #e5e7eb;
  --separator-color: color-mix(in oklab, var(--border-color) 75%, var(--text-color) 25%);

  --text-color: #111827;
  --text-muted: #374151;

  --accent-color: #2563eb;
  --danger-color: #c62828;

  --footer-bg: #eef0f2;

  --shadow: 0 6px 18px rgba(15,23,42,.06);
  --transition: 0.3s ease;

  --hover-bg-soft: rgba(0,0,0,.045);
  --focus-ring: 0 0 0 3px rgba(47,115,158,.25);

  --input-bg: #f8fafc;

  --ui-box-bg: #ffffff;
  --ui-box-border: #e5e7eb;
  --ui-box-shadow: 0 8px 22px rgba(15,23,42,.05);

  --home-header-link: rgba(15, 23, 42, 0.72);
  --home-header-link-hover: rgba(15, 23, 42, 0.96);
  --home-header-link-active: #111827;
  --home-header-logo: #0f172a;
  --home-header-control-bg: transparent;
  --home-header-control-border: rgba(15, 23, 42, 0.08);
  --home-header-control-hover: rgba(15, 23, 42, 0.04);
  --home-footer-surface: var(--card-bg);
  --home-footer-surface-strong: var(--card-bg);
  --home-footer-border: var(--border-color);
  --home-footer-text: var(--text-color);
  --home-footer-muted: var(--text-muted);
}

/* ===========================================================
   TYPO SCALE — RESPONSYWNY SYSTEM ROZMIARÓW
=========================================================== */

/* Desktop default */
:root {

  /* Base text */
  --font-base: 1.075rem;
  --font-small: 0.95rem;
  --font-xs: 0.85rem;

  /* Headings */
  --heading-xl: 1.45rem;
  --heading-lg: 1.35rem;
  --heading-md: 1.2rem;
  --heading-sm: 1.05rem;

}

@media (max-width: 1024px) {

  :root {
    --heading-xl: 1.35rem;
    --heading-lg: 1.28rem;
    --heading-md: 1.15rem;

    --font-base: 1.05rem;
  }

}

@media (max-width: 768px) {

  :root {
    --heading-xl: 1.25rem;
    --heading-lg: 1.2rem;
    --heading-md: 1.1rem;

    --font-base: 1rem;
    --font-small: 0.9rem;
  }

}

/* ===========================================================
   ZMIENNE — Dark Mode
=========================================================== */
:root[data-theme="dark"] {
  --accent-color: #60a5fa;
  --page-bg: #111722;
  --content-bg: #111722;

  --card-bg: #18202e;
  --card-bg-soft: #1f2a3a;
  --border-color: #28364a;
  --separator-color: color-mix(in oklab, var(--border-color) 65%, var(--text-color) 35%);

  --text-color: #e2e8f0;
  --text-muted: #7f97b0;

  --footer-bg: #0c1018;

  --shadow: 0 6px 18px rgba(0,0,0,0.45);

  --hover-bg-soft: rgba(255,255,255,0.05);
  --focus-ring: 0 0 0 3px rgba(0,123,255,.35);

  --input-bg: #151e2b;

  /* --- UI-BOX dark --- */
  --ui-box-bg: color-mix(in oklab, #ffffff 3%, var(--card-bg));
  --ui-box-border: rgba(255,255,255,0.06);
  --ui-box-shadow: 0 10px 28px rgba(0,0,0,0.55);

  --home-header-link: rgba(226, 232, 240, 0.76);
  --home-header-link-hover: rgba(248, 250, 252, 0.94);
  --home-header-link-active: rgba(248, 250, 252, 0.98);
  --home-header-logo: rgba(248, 250, 252, 0.98);
  --home-header-control-bg: transparent;
  --home-header-control-border: rgba(255, 255, 255, 0.10);
  --home-header-control-hover: rgba(255, 255, 255, 0.05);
  --home-footer-surface: var(--card-bg);
  --home-footer-surface-strong: var(--card-bg);
  --home-footer-border: var(--border-color);
  --home-footer-text: var(--text-color);
  --home-footer-muted: var(--text-muted);
}

body.dark-mode,
body.dark-theme {
  --separator-color: color-mix(in oklab, var(--border-color) 65%, var(--text-color) 35%);
}

/* =========================================================
   GLOBAL SPACING SYSTEM
========================================================= */

:root{

  --space-xs: 10px;
  --space-sm: 18px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 72px;

}

/* ===========================================================
   TYPOGRAFIA
   =========================================================== */
body {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--text-color);
  transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4, h5, h6, .logo, .nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-color);
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }

@media (max-width: 768px) {
  h1{ font-size: 2rem; }
  h2{ font-size: 1.6rem; }
  h3{ font-size: 1.3rem; }
}

.text-small {
  font-size: var(--font-small);
}

.text-xs {
  font-size: var(--font-xs);
}

.text-muted {
  color: var(--text-muted);
}

/* ===========================================================
   LINKI
   =========================================================== */
a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}
a:hover { opacity: .85; }

/* ===========================================================
   IKONY / AVATAR
   =========================================================== */
.user-avatar, .user-icon {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}
.user-avatar:hover, .user-icon:hover {
  background: var(--hover-bg-soft);
}

/* Header fallback avatar only. Real user photos keep their original colors. */
:root[data-theme="dark"] .site-header-avatar--default,
html[data-theme="dark"] .site-header-avatar--default,
body.dark-mode .site-header-avatar--default,
body.dark-theme .site-header-avatar--default,
body.theme-dark .site-header-avatar--default {
  mix-blend-mode: normal !important;
  filter: invert(1) brightness(1.15) contrast(0.95) !important;
  opacity: 0.92;
}

/* ===========================================================
   HEADER / FOOTER
   =========================================================== */
.site-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
}

.site-footer {
  padding: 40px 0;
  text-align: center;
  background: var(--footer-bg);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* =========================================================
   PAGE END SPACING
   Zapobiega przyklejaniu ostatniej sekcji do stopki
========================================================= */

.main-content,
.landing-page{
  padding-bottom: var(--space-xl);
}

@media (max-width:768px){
  .main-content,
  .landing-page{
    padding-bottom: var(--space-lg);
  }
}

/* ===========================================================
   GLOBALNE POLA FORMULARZY — jedna wersja!
   =========================================================== */
input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 1rem;
  box-sizing: border-box;
  transition: background .25s, border-color .25s, color .25s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: var(--focus-ring);
}

/* usuwanie migotania podczas zmiany trybu D/L */
html,
body,
.main-content,
.section-full,
.section-wide,
.section-user,
.ui-box,
input,
select,
textarea {
  transition:
    background-color .35s ease,
    background .35s ease,
    color .25s ease,
    border-color .25s ease;
}

/* ===========================================================
   ICONY MOTYWU (SŁOŃCE / KSIĘŻYC)
   =========================================================== */

/* DARK MODE — słońce jasne */
:root[data-theme="dark"] #sunIcon {
  filter: brightness(3) invert(1) contrast(1.1);
  opacity: 1;
}

/* LIGHT MODE — słońce normalne */
:root:not([data-theme="dark"]) #sunIcon {
  filter: none;
  opacity: 1;
}

/* DARK MODE — księżyc lekko przygaszony */
:root[data-theme="dark"] #moonIcon {
  filter: brightness(0.8);
  opacity: 0.9;
}

/* LIGHT MODE — księżyc wyciszony */
:root:not([data-theme="dark"]) #moonIcon {
  filter: brightness(0.4);
  opacity: 0.7;
}

/* ============================================================
   LIGHTBOX — ukryj header i toolbary gdy otwarty
============================================================ */

body:has(#globalLightbox.gl-open) .site-header,
body:has(#globalLightbox.gl-open) header,
body:has(#globalLightbox.gl-open) .tb-sticky,
body:has(#globalLightbox.gl-open) .tb-mobile-top,
body:has(#globalLightbox.gl-open) .tb-mobile-options {
  display: none !important;
}

/* =========================
   BASE PAGE BACKGROUND
========================= */

html {
  background: var(--page-bg);
}

body {
  background: var(--page-bg);
}


/* =========================================================
   GLOBAL — REMOVE TEXT SELECTION ON UI ELEMENTS
========================================================= */

/* UI / navigation / buttons / links */
a,
button,
.app-sidebar,
.app-sidebar * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* =========================================================
   LINK RESET FOR UI CARDS
========================================================= */

.card-link,
.card-link:visited{
  color: inherit;
  text-decoration: none;
}

.card-link:hover{
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   CONTENT — ALLOW TEXT SELECTION
========================================================= */

.main-content,
.main-content *,
.article,
.article *,
.content,
.content * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* =========================================================
   GLOBAL TEXT SELECTION STYLE
========================================================= */

/* Light mode */
::selection {
  background: rgba(47, 115, 158, 0.25); /* accent soft */
  color: #020617;
}

/* Dark mode */
:root[data-theme="dark"] ::selection {
  background: rgba(56, 189, 248, 0.35);
  color: #f8fafc;
}

/* =========================================================
   GLOBAL SECTION HEADINGS
========================================================= */

.section > .layout-container > h2:first-child,
.section-wide > .layout-container-wide > h2:first-child{
  text-align: center;
  margin: 30px 0 30px 0;
  font-size: 2rem;
}

/* Strony z hero-small ale bez banera avatara (legal, plans itp.)
   — zmniejszony górny margines bo hero-small + padding sekcji już dają odstęp */
.legal-page > .layout-container > h2:first-child{
  margin-top: -15px;
}

@media (max-width: 768px){
  .legal-page > .layout-container > h2:first-child{
    margin-top: -5px;
  }
}

@media (max-width: 768px){
  .section > .layout-container > h2:first-child,
  .section-wide > .layout-container-wide > h2:first-child{
    margin: 15px 0 20px 0;
    font-size: 1.4rem;
  }
}