MediaWiki:Common.css

/* Umieszczony tutaj kod CSS zostanie zastosowany we wszystkich skórkach */
/* === WikiZagłębie — Inter (body) + Inter Tight (head) — self-host === */
/* 1) Deklaracje @font-face (warianty variable, WOFF2) */
@font-face {
  font-family: "Inter";
  src: url("/resources/fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("ttf");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/resources/fonts/inter-tight/InterTight-VariableFont_wght.ttf") format("ttf");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* 2) Zmienne i zastosowanie */
:root{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-size-base: 16px;
  --lh-base: 1.65;
}

.mw-body, .mw-parser-output, .skin-vector-2022 .vector-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Nagłówki — czytelne, lekko zagęszczone */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.skin-vector-2022 .vector-body h1, .skin-vector-2022 .vector-body h2, .skin-vector-2022 .vector-body h3 {
  font-family: var(--font-head);
  letter-spacing: .1px;
  line-height: 1.25;
}

/* Drobne ujednolicenia */
.mw-body p { margin: .6em 0; }
.mw-body li { margin: .2em 0; }
pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ===============================
   WikiZagłębie — typografia Strona_główna
   Zakłada Inter (body) + Inter Tight (head) z poprzedniego kroku.
   =============================== */

/* Scope: all */
body .mw-parser-output {
  --wz-head-ls: .1px;    /* lekkie zagęszczenie nagłówków */
  --wz-head-lh: 1.25;    /* wysokość linii w nagłówkach */
  --wz-body-lh: 1.65;    /* wysokość linii w treści */
  --wz-card-rad: 10px;   /* promień obłych narożników w boxach */
  --wz-card-pad: 14px;   /* padding wewnątrz sekcji */
}

/* Podstawowe prowadzenie tekstu */
body .mw-parser-output {
  line-height: var(--wz-body-lh);
}
body .mw-parser-output p { margin: .6em 0; }
body .mw-parser-output li { margin: .2em 0; }

/* Skala nagłówków (responsywna) */
body .mw-parser-output h1 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: var(--wz-head-lh);
  letter-spacing: var(--wz-head-ls);
  margin: 0 0 .4em 0;
}
body .mw-parser-output h2 {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.8rem);
  line-height: var(--wz-head-lh);
  letter-spacing: var(--wz-head-ls);
  margin: 0 0 .35em 0;
}
body .mw-parser-output h3 {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: var(--wz-head-ls);
  margin: .8em 0 .3em;
}

/* BOX-y sekcji (Szablon:SekcjaDIV)
   — jeśli zaktualizowałeś szablon wg wcześniejszej wersji, dodaj w nim klasę `class="sekcjaDIV"` na zewnętrznym <div>.
   — poniższe reguły upiększają i porządkują typografię w środku.
*/
body .mw-parser-output .sekcjaDIV {
  border-radius: var(--wz-card-rad);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.03);
  overflow: visible; /* pewność, że nic się nie „przewija” wewnątrz */
  margin: 0 0 12px 0;
}

/* Nagłówek boxu — ujednolicenie odstępów, gdy h2 jest pierwszym elementem */
body .mw-parser-output .sekcjaDIV > div:first-child h2,
body .mw-parser-output h2[id$="Head"] {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .4em .6em;
  border: 0;
}

/* Treść boxu — spójny padding */
body .mw-parser-output .sekcjaDIV > div:not(:first-child) {
  padding: var(--wz-card-pad);
}

/* Gdy szablon nie ma klasy .sekcjaDIV:
   - ułóżmy bezpiecznie „niebieskie” kontenery na SG (zachowując promień i odstępy) */
body .mw-parser-output > div[style*="background: #C6DEFE"],
body .mw-parser-output > div[style*="background:#C6DEFE"] {
  border-radius: var(--wz-card-rad);
  margin-bottom: 12px;
}

/* Odstęp między nagłówkiem boxu a treścią (kiedy HTML układa się bez klasy) */
body .mw-parser-output h2[id$="Head"] + * {
  margin-top: .25rem;
}

/* Mini-poprawki typograficzne elementów wiki */
body .thumb .thumbcaption { font-size: .92em; line-height: 1.45; }
body table { font-size: .98em; }
body .wikitable th, 
body .wikitable td { padding: .4em .6em; }

/* Responsywność — drobne zwiększenie interlinii na wąskich ekranach */
@media (max-width: 768px) {
  body.page-Strona_główna .mw-parser-output { line-height: 1.7; }
  body.page-Strona_główna .mw-parser-output h1 { margin-bottom: .35em; }
}

/* tekst w logo */
#p-logo-text {
	display: block;
}
#p-logo-text #p-banner {
	display: block;
}
#p-logo-text #p-banner::after {
    content: 'Encyklopedia Zagłębia Dąbrowskiego';
    font-size: 0.4em;
    display: block;
    letter-spacing: 0.05em;
}
/* wyłączenie logo graficznego */
#p-logo {
	display: none;
}
/* ukrycie kategorii automatycznych */
.mw-hidden-catlinks { display: none !important; }

/* wyszukiwanie - aktualne podkreślone */
/* Uniwersalnie w portletach (sidebarach) */
.search-types li.current > a,
#search > div.mw-search-profile-tabs > div.search-types > ul > li.current > a {
  font-weight: 700;
  text-decoration: underline;
  text-underline: 1px solid;
}
/* Infobox – podstawowe style */
table.infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    width: 300px;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    font-size: 90%;
    line-height: 1.5em;
}

table.infobox td,
table.infobox th {
    vertical-align: top;
    padding: 3px 6px;
}

table.infobox th {
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}
@media screen and (max-width: 600px) {
    table.infobox {
        float: none;
        width: 100% !important;
        margin: 0 0 1em 0;
    }
}