/*
 * Reset minimalny + style bazowe + klasy pomocnicze (.container, .section, itd.)
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    min-height: 100%;
}

/*
 * Reset bazowy — celowo GLOBALNY i bezwarunkowy. Header i footer TIERE
 * (.site-header, .site-nav, .site-nav__list a, ikony, PL/ENG, .site-footer)
 * renderują się na KAŻDEJ stronie, łącznie ze stronami WooCommerce — więc
 * muszą mieć te same resety wszędzie, inaczej tracą swój wygląd tam, gdzie
 * <body> ma klasę `woocommerce-page` (patrz regresja: `body:not(...)` psuło
 * własną nawigację motywu na koszyku/checkout/moim koncie).
 *
 * WooCommerce nie jest tym łamany: jego krytyczny markup (tabela koszyka,
 * przyciski, nawigacja "moje konto", siatka produktów) jest stylowany przez
 * WŁASNE, bardziej specyficzne selektory WooCommerce (np. `.woocommerce
 * table.cart`, `.woocommerce a.button`), które i tak wygrywają specyficznością
 * z tymi gołymi selektorami elementów — co potwierdza zrzut ekranu koszyka
 * (tabela, kwoty, przycisk "Przejdź do płatności" wyglądają poprawnie, po
 * WooCommerce'owemu). Jedyny realny konflikt był w tle/kolorze <body> (patrz
 * niżej) — to jest naprawione bez potrzeby wyłączania czegokolwiek innego.
 */

body,
h1,
h2,
h3,
p,
figure,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    /*
     * Cream, nie ciemne — na homepage każda sekcja (.section--ink/--cream/
     * --brand) i tak jawnie ustawia własne tło, więc to tło <body> nigdy nie
     * jest tam widoczne. Ale na stronach WooCommerce NIC nie owija treści w
     * te klasy, więc dziedziczyły wprost ciemne tło body — a że --color-text
     * to ten sam odcień co --color-ink, dawało to praktycznie czarny tekst
     * na czarnym tle. Cream = bezpieczny, czytelny, jasny default wszędzie
     * poza homepage (zamiast poprzedniego białego), bez żadnej zmiany
     * wyglądu samego homepage.
     */
    background-color: var(--color-cream);
    line-height: var(--line-height-body);

    /*
     * Sticky footer — flex column on <body>, whose direct children
     * (header.php/footer.php) are always .site-header, #main.site-main,
     * .site-footer. .site-main is the one allowed to grow (below), so a
     * short page pushes .site-footer to the bottom of the viewport; a long
     * page just flows past 100vh normally. No position:fixed involved —
     * .skip-link stays position:absolute, so it's not a flex item at all.
     */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

/* Layout helpers */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
}

/*
 * Wariant "wide" — bez padding-inline, celowo: siatki produktowe/zdjęciowe
 * (PDP, archiwum sklepu) mają dotykać krawędzi tego kontenera, nie mieć
 * wewnętrzny gutter jak .container.
 */
.container--wide {
    width: 100%;
    max-width: var(--container-max-width-wide);
    margin-inline: auto;
}

.section {
    padding-block: var(--space-9);
}

/*
 * Dwie sąsiadujące .section dawały PODWÓJNY odstęp na styku (padding-bottom
 * pierwszej + padding-top drugiej) — widoczne zwłaszcza gdy obie mają to
 * samo tło (.section--cream + .section--cream), bo wtedy to jedna, za duża
 * ciągła plama koloru zamiast jednego odstępu. Kolejna sekcja traci własny
 * padding-top — odstęp na styku daje wyłącznie padding-bottom poprzedniej.
 * Pierwsza .section na stronie (nic wcześniej nie jest .section) zachowuje
 * pełny padding-top.
 */
.section + .section {
    padding-top: 0;
}

.section--ink {
    background-color: var(--color-ink);
    color: var(--color-text-inverse);
}

.section--cream {
    background-color: var(--color-cream);
    color: var(--color-ink);
}

.section--brand {
    background-color: var(--color-brand-red);
    color: var(--color-text-inverse);
}

.text-accent {
    color: var(--color-brand-red);
}

/* Utilities dostępności */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 100;
    background: var(--color-ink);
    color: var(--color-white);
    padding: var(--space-3) var(--space-5);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: var(--space-4);
}

/* Formularze: textarea na pełną szerokość kontenera */

textarea.tiere-field-full {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}