/*
Theme Name: WebRanking (Twenty Twenty-One Child)
Template: twentytwentyone
Description: Motyw bloga webranking.pl dopasowany do marki głównej strony.
Version: 1.0
*/

:root {
	--wr-accent: #c62f26;
	--wr-accent-dark: #a3251d;

	/* Pelna szerokosc artykulow zamiast waskiej, domyslnej kolumny Twenty Twenty-One */
	--global--width-content: 1400px;
	--global--width-wide: 1600px;
	--responsive--aligndefault-width: 1400px;
	--responsive--alignwide-width: 1600px;
	--responsive--alignfull-width: 100vw;
}

.entry-content,
.entry-content > *,
.entry-header,
.site-main article,
.page .entry-content {
	max-width: 1400px !important;
}

/* Powiazane rankingi pod artykulem */
.wr-related-rankings {
	margin: 32px 0;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #e5e0d0;
	border-radius: 8px;
}
.wr-related-rankings h3 {
	margin-top: 0;
	font-size: 17px;
}
.wr-related-rankings ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.wr-related-rankings a {
	display: block;
	padding: 8px 12px;
	background: #faf5f4;
	border-radius: 6px;
	font-size: 14px;
	text-decoration: none;
}
.wr-related-rankings a:hover {
	background: var(--wr-accent);
	color: #fff;
}

/* Górny pasek - link powrotny do serwisu głównego */
.wr-back-to-site {
	background: #1c1c1c;
	color: #fff;
	text-align: center;
	padding: 8px 12px;
	font-size: 13px;
}
.wr-back-to-site a {
	color: #fff;
	text-decoration: underline;
}

/* Logo i header */
.site-branding {
	padding: 24px 0;
}
.wp-custom-logo .custom-logo {
	max-height: 60px;
	width: auto;
}
.site-title a,
.site-title a:hover {
	color: #1c1c1c;
}

/* Akcent marki na linkach, przyciskach, elementach interaktywnych */
a {
	color: var(--wr-accent);
}
a:hover,
a:focus {
	color: var(--wr-accent-dark);
}

.entry-title a {
	color: #1c1c1c;
}
.entry-title a:hover {
	color: var(--wr-accent);
}

/* Przyciski / call to action */
.wp-block-button__link,
input[type="submit"],
button {
	background-color: var(--wr-accent) !important;
	border-color: var(--wr-accent) !important;
}
.wp-block-button__link:hover,
input[type="submit"]:hover,
button:hover {
	background-color: var(--wr-accent-dark) !important;
	border-color: var(--wr-accent-dark) !important;
}

/* Tabele porownawcze w artykulach */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}
.entry-content table th,
.entry-content table td {
	border: 1px solid #e0e0e0;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.entry-content table th {
	background: #faf5f4;
	color: #1c1c1c;
	font-weight: 700;
}
.entry-content table img {
	border-radius: 6px;
}

/* Widoczne oznaczenie linkow afiliacyjnych/sponsorowanych - delikatna ikonka */
.entry-content a[rel~="sponsored"]::after {
	content: " ↗";
	font-size: 0.85em;
	color: var(--wr-accent);
}

/* Stopka - odcisk marki */
.site-footer {
	background: #1c1c1c;
	color: #ccc;
}
.site-footer a {
	color: #fff;
}

/* Autor - box pod artykulem */
.wr-author-box {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 32px 0;
	padding: 16px 20px;
	background: #faf5f4;
	border: 1px solid #f0e3e1;
	border-radius: 8px;
	font-size: 14px;
}
.wr-author-box .wr-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--wr-accent), #1c1c1c);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex: none;
}