/*
 * Rankingowator — warstwa wyglądu CAŁEJ domeny (addon dnt_rankingi).
 * Ładowana przez load-theme_dnt_rankingi.php na każdej stronie (core i addon) po CSS skórki.
 * Styluje znaczniki MOTYWU (header, menu, stopka, przyciski, formularze, wpisy bloga, okruszki, cookies).
 * Skórki (_style.css) nie ruszamy — SAFEMODE pominąłby ją przy aktualizacji.
 * Bez trybu ciemnego. Fonty: Roboto ładuje już skórka (_style-default.css) — nie dokładamy własnych.
 * Na serwerze: /assets/dnt_rankingi/dnt_rankingi_site.css
 */

/* ───────── tokeny: granat + pomarańczowy akcent (body = ponad :root skórki) ───────── */
body {
	--rk-navy: #1b2a4a;
	--rk-navy-2: #26395f;
	--rk-navy-dark: #121d35;
	--rk-orange: #f28c28;
	--rk-orange-2: #ff9f43;
	--rk-orange-dark: #b35600;   /* tekst pomarańczowy na białym (kontrast 4.9:1) */
	--rk-bg: #f5f7fb;
	--rk-line: #e3e8f0;
	--rk-text: #24324a;
	--rk-muted: #5b6b84;
	--rk-radius: 14px;
	--rk-radius-sm: 10px;
	--rk-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px -14px rgba(16, 24, 40, .22);
	--rk-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 36px -16px rgba(16, 24, 40, .30);
	--rk-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	/* zmienne skórki → paleta serwisu (kolory przycisków, linków, tła sekcji motywu) */
	--mark: var(--rk-navy);
	--mark-dark: var(--rk-navy-dark);
	--mark-light: var(--rk-navy-2);
	--mark2: var(--rk-orange);
	--mark2-dark: var(--rk-orange-dark);
	--mark2-light: var(--rk-orange-2);
	--grey-dark: var(--rk-text);
	--grey-darker: var(--rk-navy-dark);
	--grey: var(--rk-muted);
	--grey-light: #cfd7e4;
	--grey-lighter: var(--rk-bg);
	--black: #0f1a30;
	--font-family-header: var(--rk-font);
	--font-family-text: var(--rk-font);
	--font-family-header-regular: 700;
	--font-family-header-medium: 700;
	--font-family-header-bold: 700;

	font-family: var(--rk-font);
	color: var(--rk-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, h5, h6 { color: var(--rk-navy); letter-spacing: -.02em; }
h1, .h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.15; }
h2, .h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.2; }
h3, .h3 { font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.3; }
::selection { background: rgba(242, 140, 40, .28); }

/* linki w treści: granat z pomarańczowym podkreśleniem */
main a:not([class]) { color: var(--rk-navy); text-decoration: underline; text-decoration-color: rgba(242, 140, 40, .7); text-decoration-thickness: 2px; text-underline-offset: 3px; }
main a:not([class]):hover { color: var(--rk-orange-dark); text-decoration-color: var(--rk-orange); }
/* przyciski-linki klocków skórki (nav > p > a) zostają przyciskami */
main nav:not([class]) a:not([class]), main nav:not([class]) a:not([class]):hover { color: #fff; text-decoration: none; }
:focus-visible { outline: 3px solid var(--rk-orange); outline-offset: 2px; }

/* ───────── header ───────── */
header.header_main { position: sticky; top: 0; z-index: 900; background: #fff; border-bottom: 1px solid var(--rk-line); box-shadow: 0 6px 18px -16px rgba(16, 24, 40, .35); }
header.header_main section { background: #fff; }
header.header_main section .center { min-height: 68px; padding-left: 1.25rem; padding-right: 1.25rem; max-width: 1240px; gap: 1.5rem; }
body header.header_main section .logo a img,
body header.header_main .logo a img { height: 38px; width: auto; max-width: 62vw; margin: .9rem 0; }
header.header_main section .logo a { display: block; }

nav.header_menu > ul { display: flex; align-items: center; gap: .25rem; }
nav.header_menu > ul > li { float: none; }
nav.header_menu > ul > li > a,
nav.header_menu > ul > li:first-child > a,
nav.header_menu > ul > li:last-child > a { padding: .55rem .95rem; border-radius: 999px; color: var(--rk-navy); font-weight: 500; font-size: 1rem; position: relative; }
nav.header_menu > ul > li:hover > a { color: var(--rk-navy); background: var(--rk-bg); }
nav.header_menu > ul > li.active > a { color: var(--rk-navy); background: rgba(242, 140, 40, .14); box-shadow: inset 0 -2px 0 var(--rk-orange); border-radius: 999px; }
nav.header_menu > ul > li:last-child > a { background: var(--rk-orange); color: var(--rk-navy-dark); font-weight: 700; margin-left: .35rem; }
nav.header_menu > ul > li:last-child:hover > a,
nav.header_menu > ul > li:last-child.active > a { background: var(--rk-orange-2); color: var(--rk-navy-dark); box-shadow: none; }

.header_menu_open { background: var(--rk-navy); color: #fff; border-radius: 10px; padding: .45rem .8rem; }
.header_menu_open .t { font-weight: 700; font-size: .85rem; letter-spacing: .06em; }
nav.header_menu_responsive { background: #fff; border-top: 1px solid var(--rk-line); }
nav.header_menu_responsive ul { padding: .5rem 1.25rem 1rem; }
nav.header_menu_responsive ul li a { padding: .85rem .25rem; color: var(--rk-navy); font-weight: 500; font-size: 1.05rem; border-bottom: 1px solid var(--rk-line); }
nav.header_menu_responsive ul li.active a,
nav.header_menu_responsive ul li:hover a { color: var(--rk-orange-dark); }

/* ───────── okruszki ───────── */
.breadcrumbs { margin: 1rem 0 0; font-size: .82rem; color: var(--rk-muted); }
main.full .breadcrumbs .center, .breadcrumbs .center { max-width: 1240px; padding: 0 1.25rem; }
.breadcrumbs a { color: var(--rk-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--rk-orange-dark); }
.breadcrumbs .fa-caret-right { font-size: .7rem; margin: 0 .25rem; color: #a3b0c4; }

/* ───────── przyciski i formularze motywu ───────── */
.button, a.button, input[type="submit"], button[type="submit"], .submit input {
	background: var(--rk-orange); color: var(--rk-navy-dark); border: 0; border-radius: 10px;
	font-weight: 700; letter-spacing: .01em; padding: .75em 1.3em; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
}
.button:hover, a.button:hover, input[type="submit"]:hover, button[type="submit"]:hover, .submit input:hover {
	background: var(--rk-orange-2); color: var(--rk-navy-dark); box-shadow: 0 8px 18px -10px rgba(242, 140, 40, .9);
}
.button_grey, a.button_grey { background: #fff; color: var(--rk-navy); border: 1px solid var(--rk-line); }
main input[type="text"], main input[type="email"], main input[type="tel"], main input[type="search"], main input[type="password"], main input[type="number"],
main textarea, main select, footer input[type="text"], footer input[type="email"] {
	border: 1px solid #cfd7e4; border-radius: 10px; padding: .7rem .85rem; font: inherit; color: var(--rk-text); background: #fff; max-width: 100%;
}
main input:focus, main textarea:focus, main select:focus { outline: none; border-color: var(--rk-orange); box-shadow: 0 0 0 3px rgba(242, 140, 40, .22); }

/* ───────── treść stron core (regulamin, kontakt, blog) ───────── */
main .text_container { color: var(--rk-text); }
main .text_container p, main .text_container li { line-height: 1.7; }
main section .text_container > section.section.bg-grey-lighter,
main .bg-grey-lighter { background-color: var(--rk-bg) !important; }
main .shadow { box-shadow: var(--rk-shadow); border-radius: var(--rk-radius); }
main .border-radius-1rem { border-radius: var(--rk-radius); }
main address { font-style: normal; }
main h1 mark, main h2 mark, main h3 mark, main .mark { color: var(--rk-orange-dark); }

/* blog: karty wpisów i strona wpisu */
.articles_wrapper { gap: 1.5rem; }
.articles_wrapper article.article_container { background: #fff; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); box-shadow: var(--rk-shadow); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.articles_wrapper article.article_container:hover { box-shadow: var(--rk-shadow-hover); transform: translateY(-2px); }
.articles_wrapper article.article_container .article_title a,
.articles_wrapper article.article_container .article_title { color: var(--rk-navy); font-weight: 700; text-decoration: none; }
.articles_wrapper article.article_container .article_photo img { display: block; width: 100%; height: auto; }
.articles_wrapper article.article_container .article_more { color: var(--rk-muted); }
body.t main h1 { color: var(--rk-navy); }
body.t main.article_container .article_info { background: var(--rk-bg); border-radius: var(--rk-radius-sm); }
body.t main.article_container .article_info::before { display: none; }

/* ───────── stopka ───────── */
footer.footer_wrapper .footer_content,
footer.footer_wrapper .footer_content.bg-grey-dark { background: var(--rk-navy) !important; color: #c9d3e6; padding: 3.5rem 0 2.5rem; }
footer.footer_wrapper .center { max-width: 1240px; padding: 0 1.25rem; }
.footer_blocks { gap: 0; justify-content: space-between; }
.footer_blocks .footer_box { padding: .5rem 1rem .5rem 0; }
.footer_blocks .footer_box { font-size: .95rem; line-height: 1.7; }
.footer_blocks .footer_box h4, .footer_blocks .footer_box .rk-footer-h { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 1rem; text-transform: none; }
.footer_blocks .footer_box a, .bg-grey-dark a { color: #e6ecf6; text-decoration: none; }
.footer_blocks .footer_box a:hover, .footer_blocks .footer_box ul li a:hover { color: var(--rk-orange-2); }
.footer_blocks .footer_box ul { list-style: none; padding: 0; margin: 0; }
.footer_blocks .footer_box p { margin: 0 0 .75rem; }
.footer_blocks .footer_box img { max-width: 220px; height: auto; }
.footer_blocks .rk-footer-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: .75rem; }
.footer_blocks .rk-footer-logo span { color: var(--rk-orange); }
.footer_credits { background: var(--rk-navy-dark); color: #9fb0cc; }
.footer_credits .center { max-width: 1240px; padding: 1rem 1.25rem; }
.footer_credits a { color: #c9d3e6; }
.footer_credits a:hover { color: var(--rk-orange-2); }
.social_widget { display: none; }

/* ───────── baner cookies ───────── */
.cookie-consent-banner { border-radius: var(--rk-radius) var(--rk-radius) 0 0; box-shadow: 0 -10px 30px -18px rgba(16, 24, 40, .45); }
.cookie-consent-banner .cookie-consent-button.btn-success { background: var(--rk-orange); color: var(--rk-navy-dark); border: 0; font-weight: 700; }
.cookie-consent-banner .cookie-consent-button.btn-success:hover { background: var(--rk-orange-2); }
.cookie-consent-banner .cookie-consent-button.btn-outline,
.cookie-consent-banner .cookie-consent-button.btn-more-options,
.cookie-consent-banner .cookie-consent-button.btn-grayscale { background: #fff; color: var(--rk-navy); border: 1px solid #cfd7e4; }

/* ───────── mobile ───────── */
@media (max-width: 1000px) {
	header.header_main section .center { min-height: 60px; }
}
@media (max-width: 800px) {
	header.header_main section .center { padding-left: 1rem; padding-right: 1rem; }
	.breadcrumbs .center, main.full .breadcrumbs .center { padding: 0 1rem; }
	footer.footer_wrapper .center, .footer_credits .center { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 600px) {
	body header.header_main section .logo a img,
	body header.header_main .logo a img { height: 30px; margin: .75rem 0; }
	.footer_credits .center { flex-direction: column; align-items: flex-start; gap: .25rem; }
}