:root {
    --bg: #f6fbf7;
    --surface: #ffffff;
    --surface-alt: #eef6ef;
    --text: #17352b;
    --muted: #58776b;
    --line: #d7e6d8;
    --primary: #2f7d5f;
    --primary-deep: #1e5b44;
    --accent: #d0b24e;
    --accent-deep: #b0912d;
    --accent-soft: #f7f0cf;
    --footer: #12382c;
    --footer-text: #f6fbf7;
    --shadow: 0 22px 54px rgba(23, 53, 43, 0.10);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(47,125,95,0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(208,178,78,0.10), transparent 22%),
        linear-gradient(180deg, #fbfefb 0%, var(--bg) 100%);
    color: var(--text);
}

p,
a,
li {
    font-size: 16px;
    line-height: 1.72;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--text);
}

/*
 * Globalne zmniejszenie typografii nagłówków względem bazowej wersji szablonu.
 * Cel: cały szablon ma wyglądać lżej, a nagłówki nie mają dominować nad treścią.
 *
 * Dla porównania względem poprzedniej wersji:
 * - h1 zostało zmniejszone o ok. 20%
 * - h2 zostało zmniejszone o ok. 20%
 * - h3 zostało zmniejszone o ok. 20%
 * - h4-h6 dostały proporcjonalnie mniejsze rozmiary, żeby zachować spójność.
 */
h1 {
    font-size: clamp(1.84rem, 3.84vw, 3.92rem);
}

h2 {
    font-size: clamp(1.44rem, 2.16vw, 2.32rem);
}

h3 {
    font-size: clamp(0.96rem, 1.44vw, 1.24rem);
}

h4 {
    font-size: clamp(0.88rem, 1.2vw, 1.08rem);
}

h5 {
    font-size: clamp(0.8rem, 1.04vw, 0.96rem);
}

h6 {
    font-size: clamp(0.74rem, 0.96vw, 0.88rem);
}

.health-topbar-wrap {
    background: rgba(248, 252, 249, 0.92);
    border-bottom: 1px solid rgba(215, 230, 216, 0.9);
    box-shadow: 0 10px 22px rgba(23, 53, 43, 0.05);
}

.health-brand {
    color: var(--primary-deep);
    font-size: 1rem;
}

.health-nav-link {
    color: var(--primary-deep);
    border: 1px solid rgba(47,125,95,0.14);
    background: rgba(255,255,255,0.7);
}

.health-nav-link:hover,
.health-nav-link.health-nav-cta {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.health-home-overlay {
    background: linear-gradient(to top, rgba(18,56,44,0.74), rgba(18,56,44,0.18));
}

.health-home-copy,
.health-readmore,
.health-tags-block,
.article-single,
.site-footer,
.health-post-card {
    background: var(--surface);
    border: 1px solid rgba(215, 230, 216, 0.9);
    box-shadow: var(--shadow);
}

.health-home-copy {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,252,249,0.94));
}

.hero-kicker,
.section-kicker,
.eyebrow {
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}

.hero-lead,
.article-intro,
.health-post-copy p,
.article-content,
.site-footer p {
    color: var(--muted);
}

.button-primary {
    background: linear-gradient(135deg, var(--primary), #41916f);
    color: #fff;
    box-shadow: 0 12px 26px rgba(47,125,95,0.22);
}

.button-primary:hover {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
}

.section-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.health-post-card:hover {
    border-color: rgba(47,125,95,0.45);
    box-shadow: 0 24px 54px rgba(23, 53, 43, 0.14);
}

.health-post-thumb {
    background-color: #ddebe1;
    position: relative;
}

.health-post-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(18,56,44,0.22), rgba(18,56,44,0));
}

.health-post-copy h3,
.health-post-copy h3 a,
.article-header h1,
.section-head h1,
.section-head h2 {
    color: var(--text);
}

.health-post-copy h3 a:hover,
.article-content a:hover,
.more-link:hover,
.tag:hover {
    color: var(--accent-deep);
}

.more-link {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1px solid rgba(208,178,78,0.24);
}

.more-link:hover {
    background: #f3e7b0;
}

.article-hero-image {
    border: 1px solid rgba(215, 230, 216, 0.95);
    background: #f8fbf8;
}

.article-content a {
    color: var(--primary);
    font-weight: 700;
}

.article-content strong {
    color: var(--primary-deep);
}

.tag {
    color: var(--primary-deep);
    background: #f7fbf7;
    border: 1px solid var(--line);
    box-shadow: 0 4px 14px rgba(23, 53, 43, 0.05);
}

.tag:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.site-footer {
    background: linear-gradient(135deg, var(--footer), #1c4f3e);
    border-color: rgba(255,255,255,0.06);
}

.site-footer p {
    color: var(--footer-text);
    opacity: 0.94;
}

#up {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 12px 26px rgba(47,125,95,0.28);
}

#up:hover {
    background: var(--accent);
}

@media (max-width: 720px) {
    p,
    a,
    li {
        font-size: 15px;
    }
}

/*
 * Dodatkowe dopasowanie kolorystyczne elementów zewnętrznych i topbaru.
 *
 * .hu-revoke-button:
 * - wymusza kolor przewodni motywu na przycisku od narzędzia cookies,
 * - background i border dostają kolor primary,
 * - !important jest celowo użyte, bo zewnętrzny skrypt zwykle ładuje własne style inline lub z wysokim priorytetem.
 *
 * .health-topbar:
 * - nadaje głównemu paskowi nawigacji kolor przewodni motywu,
 * - tekst i linki są ustawione na jasne, żeby zachować kontrast.
 */
.hu-revoke-button, #hu-cookies-save {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}
.hu-nav-item.hu-has-icon.hu-btn.hu-btn-link {
	color:var(--primary) !important;
}
.hu-revoke-button:hover,
.hu-revoke-button:focus {
    background: var(--primary-deep) !important;
    border-color: var(--primary-deep) !important;
    color: #ffffff !important;
}

.health-topbar {
    background: var(--primary) !important;
    padding-left: 20px;
    padding-right: 20px;
}

.health-site-title a,
.health-brand,
.health-nav-link {
    color: #ffffff !important;
}

.health-nav-link {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.22) !important;
}

.health-nav-link:hover,
.health-nav-link.health-nav-cta,
.health-nav-link.is-home {
    background: #ffffff !important;
    color: var(--primary-deep) !important;
    border-color: #ffffff !important;
}