/*
 * druki-pit.pl — wspólny arkusz stylów dla wszystkich stron (mobile-first).
 *
 * Tekst na jasnym tle zawsze granatowy (--primary-color); pomarańcz tylko dla akcentów (hover, ikony, przyciski).
 * Zwykły tekst (treść, lead, spis treści, stopka) zawsze 16 px (--fs-base); mniejsze tylko dymki, etykiety i przyciski.
 * System wizualny jak pitax.pl: wszystkie kolory, fonty, zaokrąglenia, odstępy i cienie pochodzą
 * z variables.css (zmienne o tych samych nazwach co w pitax.pl). W tym pliku nie ma „gołych” kolorów
 * poza przezroczystościami bieli na ciemnym tle.
 *
 * Siatka jak w Bootstrapie 5: progi sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400 px,
 * .container o szerokości 540 / 720 / 960 / 1140 / 1320 px, odstęp boczny 12px.
 *
 * Spis: 1. Podstawy i kontener  2. Przyciski, chipy, dymki  3. Nagłówek i menu  4. Baner (hero)
 *       5. Karty formularzy (strona główna)  6. Nagłówek podstrony PIT  7. Załączniki
 *       8. Artykuł (lead, spis treści, treść z CMS)  9. Stopka  10. Okno z odliczaniem  11. Pomocnicze
 */

/* 1. Podstawy i kontener ------------------------------------------------------------------------ */
:root {
    --gutter: 12px;          /* jak $grid-gutter-width / 2 w Bootstrapie */
    --header-h: 64px;
}

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

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

body {
    margin: 0;
    background: var(--white);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Linki: granat z podkreśleniem, po najechaniu pomarańcz bez podkreślenia (jak pitax.pl).
   :where() = zerowa specyficzność — przyciski, karty, chipy i menu mają własne kolory i nie zmieniają ich po najechaniu */
:where(a) {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}
:where(a:hover) {
    color: var(--secondary-color);
    text-decoration: none;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); }

[hidden] { display: none !important; }

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
/* na ciemnym tle (menu, stopka) obrys biały */
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--white); }

/* .container jak w Bootstrapie: 100% → 540 → 720 → 960 → 1140 → 1320 px */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -48px;
    z-index: 200;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--secondary-color);
    color: var(--white);
    font-weight: var(--fw-bold);
    text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

/* 2. Przyciski, chipy, dymki -------------------------------------------------------------------- */
/* Przycisk jak .cb-btn w pitax.pl: 5px zaokrąglenia, pomarańcz, hover przez przyciemnienie */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition), filter var(--transition);
}
.btn .fa { font-size: 1.15em; }

.btn--primary {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--white);
}
.btn--primary:hover { filter: var(--hover-dim); }

.btn--secondary {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);
}
/* granatowe przyciski (Rozlicz e-PIT Online, Pobierz Program PIT) po najechaniu pomarańczowe — jak załączniki */
.btn--secondary:hover { border-color: var(--secondary-color); background: var(--secondary-color); }

.btn--outline {
    border-color: var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
}
.btn--outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* duży przycisk jak .cb-darkcta__btn w pitax.pl */
.btn--lg {
    min-height: 56px;
    padding: 16px 26px;
    font-size: var(--fs-md);
}

.btn--sm {
    min-height: 38px;
    padding: 7px 12px;
    font-size: var(--fs-sm);
}

.btn--block { width: 100%; }

/* Ikona PDF z produkcji (biała, themes/drukipit/images/icon_pdf.svg) */
.btn__icon { flex: none; width: 22px; height: auto; }

/* Chip — przycisk załącznika (PIT-O, PIT-D…) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background: var(--primary-color);
    color: var(--white);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--white);
}

/* Wycofany załącznik (PIT-28A): przycisk z dymkiem wyjaśnienia */
.chip--deprecated {
    border: 1px dashed var(--primary-color);
    background: transparent;
    color: var(--primary-color);
}
.chip--deprecated .chip__name { text-decoration: line-through; }
.chip--deprecated .info-icon { flex: none; width: 14px; height: 14px; color: var(--secondary-color); }
.chip--deprecated:hover,
.chip--deprecated[aria-expanded="true"] {
    border-color: var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
}

/* Dymek (tooltip) — site.js przenosi go do <body> i ustawia pozycję przy wyzwalaczu */
.tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;            /* pod przyklejonym menu (50) */
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: var(--space-3) 14px;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    box-shadow: var(--shadow-dropdown);
    color: var(--white);
    font-size: var(--fs-xs);           /* dymki celowo mniejsze niż zwykły tekst */
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    text-align: left;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s, transform .12s;
}
.tooltip.is-bottom { transform: translateY(-4px); }
.tooltip.is-visible { opacity: 1; transform: none; }
.tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 12px;
    height: 12px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
.tooltip.is-top::after { bottom: -6px; }
.tooltip.is-bottom::after { top: -6px; }
.tooltip.is-detached::after { display: none; }
.tooltip strong { display: block; margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.tooltip--wide { max-width: min(440px, calc(100vw - 24px)); }
.tooltip p { margin: 0; }
.tooltip ul { margin: 6px 0 0; padding-left: 18px; }

/* 3. Nagłówek i menu ---------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--primary-color);
    color: var(--white);
    box-shadow: var(--shadow-dropdown);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-h);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    margin-right: auto;
    color: var(--white);
    text-decoration: none;
}

.site-header__logo {
    flex: none;
    width: 40px;
    height: auto;       /* sygnet pitax.pl (images/logo-pitax-sygnet.svg), proporcje 649 × 633 */
}

.site-header__tagline {
    font-size: 15px;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-wrap: balance;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    font-size: var(--fs-lg);
    cursor: pointer;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .2); }
.menu-toggle .fa-times { display: none; }
.site-header.is-open .menu-toggle .fa-bars { display: none; }
.site-header.is-open .menu-toggle .fa-times { display: inline-block; }

.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: var(--primary-color);
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: var(--shadow-dropdown);
}
.site-header.is-open .site-nav { display: block; }

.site-nav__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pozycja menu: po najechaniu i dla bieżącej strony pomarańczowe podkreślenie 5 px (jak menu pitax.pl).
   Podkreślenie jest zawsze, tylko przezroczyste — nic nie przeskakuje przy najechaniu. */
.site-nav__link {
    display: block;
    padding: 10px var(--space-3);
    color: var(--white);
    font-size: 17px;
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 5px;
    text-underline-offset: 8px;
    white-space: nowrap;
    transition: text-decoration-color var(--transition);
}
.site-nav__link:hover,
.site-nav__link.is-active {
    color: var(--white);
    text-decoration-line: underline;     /* nie skrót — skrót zerowałby grubość 5 px */
    text-decoration-color: var(--secondary-color);
}

/* Rozmiary jak na produkcji druki-pit.pl: logo 46 px, napis 17–18 px pogrubiony, menu 17 px */
@media (min-width: 576px) {
    .site-header__logo { width: 46px; }
    .site-header__tagline { font-size: var(--fs-md); }
}

@media (min-width: 992px) {
    :root { --header-h: 72px; }
    .menu-toggle { display: none; }
    .site-nav,
    .site-header.is-open .site-nav {
        display: block;
        position: static;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .site-nav__list {
        display: flex;
        gap: 2px;
    }
    .site-header__tagline { font-size: 17px; }
    .site-nav__link { padding: var(--space-2) 11px; font-size: var(--fs-base); }
}

@media (min-width: 1200px) {
    .site-header__tagline { font-size: var(--fs-md); }
    .site-nav__list { gap: var(--space-1); }
    .site-nav__link { padding: var(--space-2) 15px; font-size: 17px; }
}

/* 4. Baner (hero) — tło na całą szerokość jak jasne sekcje pitax.pl, treść w .container --------- */
.hero {
    padding: var(--space-5) 0 var(--space-6);
    background: var(--bg-lavender);
    border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px)  { .hero { padding: var(--space-8) 0 36px; } }
@media (min-width: 1200px) { .hero { padding: var(--space-10) 0 44px; } }

/* Strona główna: jedno tło jak na produkcji (#EBEAE8 → najbliższy kolor z palety pitax.pl) */
.hero--home { background: var(--bg-lavender-alt); }

/* Załączniki i „lub Rozlicz / Program” — na tle banera, w jednym rzędzie (bez osobnego pudełka) */
.hero__panel {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.hero__panel .btn {
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}

/* Poniżej xl panel jest jednokolumnowy: przyciski Rozlicz / Program przed załącznikami,
   żeby dymek PIT-28A (pod załącznikami) niczego nie zasłaniał */
.hero__panel .cta { order: -1; }

@media (min-width: 1200px) {
    .hero__panel .cta { order: 0; }
    .hero__panel {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--space-6);
    }
}

.cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* „lub” — jak etykieta „Pobierz załączniki:” (granat, pogrubiony) */
.cta__or {
    color: var(--primary-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

/* 5. Karty formularzy (strona główna) ----------------------------------------------------------- */
/* Jak na produkcji druki-pit.pl: bez pudełek — kod formularza, obrazek kartki, POBIERZ na całą szerokość.
   Opis i podtytuł w dymku pod ⓘ, więc wszystkie kolumny mają tę samą wysokość.
   xs: 2 kolumny, sm: 3, md–lg: 4, xl–xxl: 7 w jednym rzędzie */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.form-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.form-card__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.form-card__code {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fw-extrabold);
    line-height: 1.2;
}
.form-card__code a { color: var(--primary-color); text-decoration: none; }
.form-card__code a:hover { color: var(--secondary-color); }

/* ⓘ przy kodzie — dymek z podtytułem i opisem otwiera się pod spodem, na obrazku (nie na przycisku) */
.form-card__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-round);
    background: none;
    color: var(--secondary-color);
    cursor: pointer;
    transition: background-color var(--transition);
}
/* ikona SVG (Includes/InfoIcon.ss) — wyśrodkowana co do piksela, w odróżnieniu od glifu Font Awesome */
.form-card__info .info-icon { display: block; width: 16px; height: 16px; }
.form-card__info:hover,
.form-card__info[aria-expanded="true"] { background: var(--white); }

/* kartka formularza z cieniem, jak na produkcji */
.form-card__media {
    display: block;
    border-radius: var(--radius-xs);
    background: var(--white);
    box-shadow: 0 1px 3px rgb(41 34 100 / 18%), 0 4px 12px rgb(41 34 100 / 8%);
    transition: box-shadow var(--transition), transform var(--transition);
}
.form-card__media:hover {
    box-shadow: 0 2px 6px rgb(41 34 100 / 22%), 0 10px 24px rgb(41 34 100 / 14%);
    transform: translateY(-2px);
}

.form-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 332 / 468;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius-xs);
}

.form-card .btn {
    gap: var(--space-2);
    min-height: 40px;
    padding: 8px 6px;
    font-size: var(--fs-base);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
    .form-card__code { font-size: var(--fs-md); }
}

@media (min-width: 1200px) {
    .form-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); }
}

@media (min-width: 1400px) {
    .form-grid { gap: var(--space-5); }
}

/* 6. Nagłówek podstrony PIT --------------------------------------------------------------------- */
.pager {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pager__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.pager__link:hover { border-color: var(--primary-color); background: var(--primary-color); color: var(--white); }
.pager__link .fa { font-size: 11px; }
.pager__link--next { margin-left: auto; }

.form-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "media"
        "head"
        "body";
    gap: var(--space-4);
}

.form-hero__media { grid-area: media; justify-self: center; width: 160px; }
.form-hero__head { grid-area: head; }
.form-hero__body { grid-area: body; }

.form-hero__img {
    display: block;
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--shadow-hover);
}

.form-hero__code {
    margin: 0;
    color: var(--primary-color);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
}

.form-hero__subtitle {
    margin: 6px 0 0;
    color: var(--primary-color);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

.form-hero__text {
    max-width: 720px;
    color: var(--primary-color);
    font-size: var(--fs-base);
    line-height: 1.6;
}
.form-hero__text p,
.form-hero__text ul { margin: 0 0 var(--space-2); }
.form-hero__text ul { padding-left: var(--space-5); }

.form-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.form-hero__actions > .btn--lg { flex: 1 1 100%; }

@media (min-width: 576px) {
    .form-hero__actions > .btn--lg { flex: 0 1 auto; }
    .form-hero__grid {
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-areas:
            "media head"
            "media body";
        align-items: start;
        gap: var(--space-1) var(--space-6);
    }
    .form-hero__media { width: auto; }
    .form-hero__head { align-self: end; }
    .form-hero__body { padding-top: var(--space-2); }
}

@media (min-width: 768px) {
    .form-hero__grid { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-1) var(--space-8); }
}

@media (min-width: 992px) {
    .form-hero__grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-1) var(--space-10); }
}

@media (min-width: 1400px) {
    .form-hero__grid { grid-template-columns: 220px minmax(0, 1fr); }
}

/* 7. Załączniki ----------------------------------------------------------------------------------- */
.attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.attachments__label {
    flex: 1 1 100%;
    color: var(--primary-color);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

@media (min-width: 576px) {
    .attachments__label { flex: 0 0 auto; margin-right: var(--space-1); }
}

.form-hero .attachments {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* 8. Artykuł (lead, spis treści, treść z CMS) ---------------------------------------------------- */
.article { padding: var(--space-8) 0 48px; }

@media (min-width: 768px)  { .article { padding: 48px 0 var(--section-y); } }
@media (min-width: 1200px) { .article { padding: 64px 0; } }

.article__grid {
    display: grid;
    gap: var(--space-10);
}

.article__aside { display: none; }

@media (min-width: 992px) {
    .article__grid--aside { grid-template-columns: 200px minmax(0, 1fr); }
    .article__aside { display: block; }
    /* Wzór formularza z przyciskiem „Rozlicz e-PIT Online” — przewija się razem ze stroną */
    .article__sticky {
        position: sticky;
        top: calc(var(--header-h) + var(--space-6));
        display: grid;
        gap: 14px;
    }
    .article__sticky img {
        display: block;
        width: 100%;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        background: var(--white);
    }
    .article__cta {
        gap: var(--space-2);
        padding: 10px;
        font-size: var(--fs-sm);
    }
    /* Podstrona PIT: kolumna wyrównana z kolumną obrazka w nagłówku (200 / 220 px + 40 px) */
    .page--form .article__grid--aside { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-10); }
}

@media (min-width: 1400px) {
    .page--form .article__grid--aside { grid-template-columns: 220px minmax(0, 1fr); }
    .article__cta { font-size: 15px; }
}

.article__main {
    min-width: 0;
    max-width: 820px;
    overflow-wrap: break-word;
}

.article__title {
    margin: 0 0 var(--space-5);
    color: var(--primary-color);
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    line-height: 1.2;
    text-wrap: balance;
}

/* Lead — wstęp pod H1 (pole „Lead” w CMS) */
.article__lead {
    margin: 0 0 28px;
    color: var(--primary-color);
    font-size: var(--fs-base);
    line-height: var(--lh-text);
}
.article__lead p { margin: 0 0 var(--space-3); }
.article__lead p:last-child { margin-bottom: 0; }
.article__lead a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.article__lead a:hover { color: var(--secondary-color); text-decoration: none; }

/* Spis treści — tworzony automatycznie z nagłówków H2 treści; zwykła lista numerowana ze zwykłymi linkami */
.toc { margin: 0 0 var(--space-10); }
.toc__title {
    margin: 0 0 var(--space-2);
    color: var(--primary-color);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
}
.toc__list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: decimal outside;
    color: var(--primary-color);
    line-height: 1.6;
}
.toc__list li { margin: 0 0 .25rem; padding-left: .25rem; }
.toc__list li:last-child { margin-bottom: 0; }
.toc__link {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.toc__link:hover { color: var(--secondary-color); text-decoration: none; }

/* Treść z CMS — rytm i typografia jak .blank-rte w pitax.pl:
   nagłówek „przykleja się” do treści, którą opisuje (duży odstęp od góry, mały od dołu) */
.article__body {
    --rte-space: 1.25rem;
    --rte-list-space: 0.875rem;
    --rte-h2-top: 3rem;
    --rte-h3-top: 2.25rem;
    --rte-h4-top: 1.75rem;

    color: var(--primary-color);
    font-size: var(--fs-base);
    line-height: var(--lh-text);
}

.article__body h2,
.article__body h3,
.article__body h4 {
    color: var(--primary-color);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    text-wrap: balance;
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.article__body h2 { margin: var(--rte-h2-top) 0 1rem; font-size: var(--fs-h2); }
.article__body h3 { margin: var(--rte-h3-top) 0 .75rem; font-size: var(--fs-h3); }
.article__body h4 { margin: var(--rte-h4-top) 0 .5rem; font-size: var(--fs-h4); }
.article__body h2 + h3,
.article__body h3 + h4 { margin-top: 1rem; }

.article__body p { margin: 0 0 var(--rte-space); }
.article__body strong,
.article__body b { font-weight: var(--fw-bold); }

.article__body ul,
.article__body ol { margin: 0 0 var(--rte-list-space); padding-left: 1.5rem; }
.article__body ul { list-style: disc outside; }
.article__body ol { list-style: decimal outside; }
.article__body li { margin: 0 0 .25rem; padding-left: .25rem; line-height: 1.6; }
.article__body li::marker { color: inherit; }       /* punktor w kolorze tekstu, nie akcentu */
.article__body li:last-child { margin-bottom: 0; }
.article__body ul + h2,
.article__body ol + h2 { margin-top: calc(var(--rte-h2-top) - .5rem); }

.article__body a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article__body a:hover { color: var(--secondary-color); text-decoration: none; }

.article__body blockquote {
    margin: 2rem 0;
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 4px solid var(--secondary-color);
    color: var(--primary-color);
    font-size: var(--fs-base);
}

.article__body img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: var(--radius-md); }

.article__body table {
    width: 100%;
    margin: 0 0 var(--rte-space);
    border-collapse: collapse;
    font-size: var(--fs-base);
}
.article__body th,
.article__body td { padding: 10px var(--space-3); border: 1px solid var(--border-light); text-align: left; vertical-align: top; }
.article__body th { background: var(--bg-lavender); font-weight: var(--fw-bold); }
.article__body tbody tr:nth-child(even) td { background: var(--bg-light-purple); }

.article__body hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border-light); }

.article__body > :first-child { margin-top: 0; }
.article__body > :last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
    /* ciaśniejszy rytm na małych ekranach (jak .blank-rte w pitax.pl) */
    .article__body {
        --rte-space: 1rem;
        --rte-list-space: .75rem;
        --rte-h2-top: 2.25rem;
        --rte-h3-top: 1.75rem;
        --rte-h4-top: 1.375rem;
    }
    .article__body ul,
    .article__body ol { padding-left: 1.25rem; }
    .article__body table { display: block; overflow-x: auto; }
}

/* 9. Stopka ------------------------------------------------------------------------------------- */
.site-footer {
    background: var(--primary-color);
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-base);
    line-height: 1.65;
}

.site-footer__notice {
    margin: 0;
    padding: 22px var(--gutter);
    background: var(--bg-lavender-alt);
    color: var(--primary-color);
    font-size: clamp(1rem, .9rem + .6vw, 1.375rem);
    font-weight: var(--fw-semibold);
    line-height: 1.45;
    text-align: center;
}

.site-footer__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.site-footer__disclaimer {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, .9);
    text-align: center;
}

.site-footer__content p { margin: 0 0 var(--space-3); }
/* na ciemnym tle ta sama zasada co w treści, tylko biały zamiast granatu */
.site-footer a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--secondary-color); text-decoration: none; }

.site-footer__copy {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--fs-base);
}

@media (max-width: 575.98px) {
    .site-footer__notice br,
    .site-footer__disclaimer br { display: none; }
}

/* 10. Okno z odliczaniem („Termin rozliczenia PIT mija za…”) ----------------------------------- */
.modal { display: none; }

@media (min-width: 992px) {
    .modal.is-visible {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
        z-index: 100;
        padding: var(--gutter);
        overflow: auto;
        background: rgb(41 34 100 / 72%);
    }
}

.modal__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding: var(--space-10) var(--space-8) var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-dropdown);
    text-align: center;
}

.modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-round);
    background: var(--bg-lavender);
    color: var(--primary-color);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.modal__close:hover { background: var(--bg-lavender-alt); }

.modal__link { color: inherit; text-decoration: none; }
.modal__title { margin: 0 0 var(--space-4); color: var(--primary-color); font-size: var(--fs-section); font-weight: var(--fw-extrabold); }
.modal__countdown { display: block; width: 454px; max-width: 100%; margin: 0 auto var(--space-5); }
.modal__subtitle { margin: 0 0 var(--space-2); color: var(--primary-color); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.modal__text { margin: 0 auto var(--space-6); max-width: 420px; color: var(--primary-color); }
.modal__more { margin: var(--space-4) 0 0; color: var(--primary-color); }

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

/* Program PIT to instalator .exe dla Windows — na telefonach nie pokazujemy (jak na starej stronie) */
@media (max-width: 767.98px) {
    .hide-mobile { display: none !important; }
}