/*
Theme Name: AfroYard
Theme URI: https://afroyard.net
Author: AfroYard
Author URI: https://afroyard.net
Description: A bold neo-brutalist comic-magazine theme for AfroYard — Your Gateway to African Entertainment. Thick borders, hard shadows, loud colors.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: afroyard
Tags: blog, news, entertainment, one-column, two-columns, right-sidebar, custom-menu, featured-images
*/

/* ---------- Self-hosted fonts ---------- */
@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/archivo-black-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
	--ink: #111111;
	--paper: #faf4ea;
	--white: #ffffff;
	--pink: #ff2da1;
	--pink-light: #ffd6ec;
	--purple: #5b4be0;
	--yellow: #ffc700;
	--green: #00b860;
	--orange: #ff6b2c;
	--muted: #6b6257;
	--font-display: 'Archivo Black', 'Arial Black', sans-serif;
	--font-body: 'Space Grotesk', 'Segoe UI', sans-serif;
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"] {
	--ink: #f2ecdd;
	--paper: #15121d;
	--white: #201b2d;
	--muted: #a89e90;
	--pink-light: #3b2136;
}
/* Elements with bright accent backgrounds keep dark text for contrast. */
html[data-theme="dark"] .skip-link:focus,
html[data-theme="dark"] .nav-menu a:hover,
html[data-theme="dark"] .btn,
html[data-theme="dark"] button,
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .pagination .page-numbers:hover,
html[data-theme="dark"] .cat-chips a:hover,
html[data-theme="dark"] .share-whatsapp,
html[data-theme="dark"] .share-whatsapp:hover,
html[data-theme="dark"] .trend-rank {
	color: #111111;
}
html[data-theme="dark"] .excerpt,
html[data-theme="dark"] .card .excerpt,
html[data-theme="dark"] .featured-card .excerpt {
	color: #c9c1b2;
}
html[data-theme="dark"] .spot { border-bottom-color: #38324a; }
html[data-theme="dark"] .site-footer { background: #0c0914; }
html[data-theme="dark"] .search-field,
html[data-theme="dark"] .comment-form input[type="text"],
html[data-theme="dark"] .comment-form input[type="email"],
html[data-theme="dark"] .comment-form input[type="url"],
html[data-theme="dark"] .comment-form textarea {
	color: var(--ink);
}

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

html {
	background: var(--ink);
	scroll-behavior: smooth;
}

body {
	margin: 22px;
	background: var(--paper);
	border: 3px solid var(--ink);
	box-shadow: 0 0 0 12px var(--pink);
	min-height: calc(100vh - 44px);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--pink); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-transform: none;
	letter-spacing: 0;
}

.container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto;
	left: 8px; top: 8px; z-index: 999; padding: 12px 18px;
	background: var(--yellow); border: 3px solid var(--ink);
	font-weight: 700; text-decoration: none;
}

/* ---------- Top bar: logo + menu ---------- */
.top-bar {
	border-bottom: 3px solid var(--ink);
	background: var(--white);
}
.top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	min-height: 74px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.site-brand { flex-shrink: 0; }
.site-title {
	font-family: var(--font-display);
	font-size: 27px;
	margin: 0;
	letter-spacing: 1px;
	text-transform: none;
	line-height: 1;
}
.site-title a { text-decoration: none; color: var(--ink); }
.site-title a:hover { color: var(--ink); }
.site-title .title-accent { color: var(--pink); }
.site-title .title-star {
	color: var(--pink);
	font-size: 0.55em;
	vertical-align: super;
	margin-right: 8px;
}
.site-logo .custom-logo-link { display: inline-block; }
.site-logo .custom-logo { max-height: 56px; width: auto; }

.menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 9px 16px;
}

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.nav-menu li { margin: 0; }
.nav-menu a {
	display: block;
	padding: 26px 13px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--ink);
}
.nav-menu a:hover { background: var(--yellow); color: var(--ink); }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { background: var(--ink); color: var(--paper); }

/* ---------- Layout ---------- */
.site-content { padding-top: 40px; padding-bottom: 56px; }
.home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 44px;
	align-items: start;
	margin-bottom: 52px;
}
.home-grid .featured-card { margin-bottom: 0; }

/* ---------- Tags / labels ---------- */
.tag {
	display: inline-block;
	background: var(--pink);
	color: #111111;
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	padding: 4px 12px;
	font-family: var(--font-display);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transform: rotate(-2deg);
	margin-bottom: 14px;
}
a.tag:hover { background: var(--yellow); color: var(--ink); }

/* ---------- Featured post ---------- */
.featured-card { margin-bottom: 48px; text-align: center; }
.featured-card .thumb {
	display: block;
	border: 3px solid var(--ink);
	box-shadow: 10px 10px 0 var(--ink);
	margin-bottom: 28px;
	background: var(--white);
}
.featured-card .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.featured-card .entry-title {
	font-size: 34px;
	margin: 10px auto 14px;
	max-width: 620px;
	text-transform: none;
	letter-spacing: 0;
}
.featured-card .entry-title a { text-decoration: none; }
.featured-card .entry-title a:hover { color: var(--pink); }
.featured-card .excerpt {
	max-width: 560px;
	margin: 0 auto 12px;
	color: #3d382f;
	font-size: 15px;
}
.entry-meta {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--muted);
}
.entry-meta .meta-dot { color: var(--pink); margin: 0 4px; }

/* ---------- Section title ---------- */
.section-title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 20px;
	margin: 0 0 26px;
}
.section-title::after {
	content: "";
	flex: 1;
	height: 5px;
	background: var(--ink);
}
.section-title span {
	background: var(--ink);
	color: var(--paper);
	padding: 6px 14px;
	box-shadow: 4px 4px 0 var(--pink);
}

/* ---------- Post cards ---------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
/* Grids inside a narrow main column (archives, search) get 2 columns. */
.main-column .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-grid:empty { display: none; }
.card {
	background: var(--white);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	flex-direction: column;
}
.card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 10px 10px 0 var(--ink);
}
.card .thumb { display: block; border-bottom: 3px solid var(--ink); }
.card .thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.thumb-fallback {
	aspect-ratio: 16 / 10;
	background: repeating-linear-gradient(-45deg, var(--pink) 0 22px, var(--yellow) 22px 44px, var(--purple) 44px 66px);
	border-bottom: 3px solid var(--ink);
}
.card-body { padding: 18px 20px 20px; }
.card .tag { box-shadow: 2px 2px 0 var(--ink); margin-bottom: 12px; font-size: 10px; padding: 3px 9px; }
.card .entry-title { font-size: 17px; margin-bottom: 10px; }
.card .entry-title a { text-decoration: none; }
.card .entry-title a:hover { color: var(--pink); }
.card .excerpt { font-size: 14px; color: #3d382f; margin: 0 0 12px; }
.card .entry-meta { font-size: 11px; }

/* ---------- Trending ---------- */
.trending-section { margin-bottom: 52px; }
.trending-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.trend-card {
	position: relative;
	background: var(--white);
	border: 3px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trend-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--ink);
}
.trend-rank {
	position: absolute;
	top: -14px;
	left: -12px;
	z-index: 2;
	background: var(--yellow);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	font-family: var(--font-display);
	font-size: 14px;
	padding: 4px 9px;
	transform: rotate(-5deg);
}
.trend-thumb { display: block; }
.trend-thumb img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-bottom: 3px solid var(--ink);
}
.trend-body { padding: 13px 15px 15px; }
.trend-title {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}
.trend-title a { text-decoration: none; }
.trend-title a:hover { color: var(--pink); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 90;
	width: 54px;
	height: 54px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	border-width: 3px;
}
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Back to top ---------- */
.back-to-top {
	position: fixed;
	bottom: 26px;
	right: 82px;
	z-index: 90;
	width: 54px;
	height: 54px;
	background: var(--yellow);
	color: var(--ink);
	border: 3px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	border-radius: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, box-shadow .1s;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { box-shadow: 5px 5px 0 var(--ink); }

/* ---------- Sidebar ---------- */
.sidebar .widget { margin-bottom: 44px; }
.widget-title {
	font-size: 17px;
	letter-spacing: 2px;
	border-bottom: 4px solid var(--ink);
	padding-bottom: 10px;
	margin-bottom: 6px;
}
.widget-title em { font-style: normal; color: var(--pink); }

.spot {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 2px solid #e5d9c6;
}
.spot:last-child { border-bottom: 0; }
.spot-cat {
	display: block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-decoration: none;
	margin-bottom: 4px;
}
.spot-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 5px; line-height: 1.35; }
.spot-title a { text-decoration: none; }
.spot-title a:hover { color: var(--pink); }
.spot .entry-meta { font-size: 10px; }
.spot-thumb { flex-shrink: 0; }
.spot-thumb img {
	width: 66px; height: 66px; object-fit: cover;
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}

.btn, button, input[type="submit"] {
	display: inline-block;
	background: var(--yellow);
	color: var(--ink);
	border: 2px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink);
	padding: 11px 22px;
	font-family: var(--font-display);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ink);
	color: var(--ink);
}
.btn:active, button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Category chips */
.cat-chips { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 16px; }
.cat-chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}
.cat-chips a:hover { background: var(--yellow); color: var(--ink); transform: translate(-1px, -1px); }
.cat-chips .chip-dot {
	width: 10px; height: 10px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	display: inline-block;
}

/* ---------- Archive / page banner ---------- */
.page-banner { margin-bottom: 36px; }
.page-banner .tag { transform: rotate(-1.5deg); }
.page-banner h1 { font-size: 34px; margin-bottom: 8px; }
.page-banner .banner-tag {
	font-size: 26px;
	padding: 10px 22px;
	box-shadow: 6px 6px 0 var(--ink);
	margin: 6px 0 18px;
	letter-spacing: 1px;
}
.page-banner .archive-description { color: var(--muted); max-width: 640px; }

/* ---------- Single post / page ---------- */
.single-article { max-width: 780px; margin: 0 auto; }
.single-header { text-align: center; margin: 10px auto 40px; }
.page .single-header h1 { font-size: 36px; max-width: 680px; margin: 8px auto 16px; }
.single-header .tag { margin-bottom: 20px; }
.single-title {
	font-size: 38px;
	line-height: 1.3;
	max-width: 700px;
	margin: 0 auto 22px;
}
.single-title span {
	padding: 0;
}
.single-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--muted);
}
.single-meta .meta-dot { color: var(--pink); }
.single-thumb {
	border: 3px solid var(--ink);
	box-shadow: 10px 10px 0 var(--ink);
	margin: 0 0 40px;
	background: var(--white);
}
.single-thumb img { width: 100%; }

.entry-content { font-size: 17px; }
.entry-content p { margin: 0 0 1.4em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content a { color: var(--pink); font-weight: 600; }
.entry-content a:hover { color: var(--purple); }
.entry-content img {
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	margin: 1em 0;
	height: auto;
}

/* Figures + captions (image blocks and classic captions) */
.entry-content figure { margin: 2.2em 0; }
.entry-content figure img { margin: 0; width: 100%; }
.entry-content figcaption,
.entry-content .wp-caption-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	text-align: center;
	padding-top: 12px;
}
.entry-content .alignleft,
.entry-content .alignright { max-width: 46%; margin-top: 6px; }
.entry-content figure.alignleft img,
.entry-content figure.alignright img { width: 100%; }

/* Embeds: YouTube & friends get the comic frame and stay responsive */
.entry-content iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	background: #000;
	margin: 0.4em 0 1em;
}
.entry-content .wp-block-embed { margin: 2.2em 0; }
.entry-content .wp-block-embed iframe { margin: 0; }
.entry-content video,
.entry-content .wp-video {
	width: 100% !important;
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
	margin: 1em 0;
}

/* Galleries */
.entry-content .wp-block-gallery,
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 2.2em 0;
}
.entry-content .gallery .gallery-item { margin: 0; }
.entry-content .wp-block-gallery figure { margin: 0; }
.entry-content blockquote {
	margin: 1.8em 0;
	padding: 20px 24px;
	background: var(--white);
	border: 3px solid var(--ink);
	border-left: 12px solid var(--pink);
	box-shadow: 6px 6px 0 var(--ink);
	font-weight: 600;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--muted); text-align: center; padding-top: 6px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }

.post-tags { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.post-tags a {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
	background: var(--white); padding: 5px 10px; text-decoration: none;
}
.post-tags a:hover { background: var(--pink-light); }

/* Share bar */
.share-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 18px 20px;
	background: var(--white);
	border: 3px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink);
}
.share-label {
	font-family: var(--font-display);
	font-size: 13px;
	margin-right: 4px;
}
.share-btn {
	display: inline-block;
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	padding: 8px 15px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.share-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.share-whatsapp { background: #25d366; color: var(--ink); }
.share-whatsapp:hover { color: var(--ink); }
.share-x { background: var(--ink); color: var(--paper); }
.share-x:hover { color: var(--paper); }
.share-facebook { background: #1877f2; color: var(--white); }
.share-facebook:hover { color: var(--white); }

/* Related stories */
.related-section {
	margin-top: 56px;
	border-top: 3px solid var(--ink);
	padding-top: 40px;
}

/* Comments wrapper on single posts */
.comments-wrap { max-width: 780px; margin: 0 auto; }

/* Post navigation */
.post-navigation { margin-top: 48px; border-top: 3px solid var(--ink); padding-top: 24px; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 20px; }
.post-navigation a { text-decoration: none; font-weight: 700; max-width: 46%; }
.post-navigation a:hover { color: var(--pink); }

/* ---------- Pagination ---------- */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pagination .page-numbers {
	display: inline-block;
	background: var(--white);
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	padding: 9px 16px;
	font-weight: 800;
	text-decoration: none;
}
.pagination .page-numbers.current { background: var(--pink); color: var(--white); }
.pagination .page-numbers:hover { background: var(--yellow); color: var(--ink); }

/* ---------- Comments ---------- */
.comments-area { margin-top: 56px; border-top: 3px solid var(--ink); padding-top: 32px; }
.comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comment-list .comment {
	background: var(--white);
	border: 3px solid var(--ink);
	box-shadow: 5px 5px 0 var(--ink);
	padding: 20px;
	margin-bottom: 24px;
}
.comment-list .children { list-style: none; margin: 20px 0 0; padding-left: 24px; }
.comment-author { font-weight: 800; }
.comment-metadata { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.comment-metadata a { color: var(--muted); text-decoration: none; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.search-field {
	width: 100%;
	border: 2px solid var(--ink);
	background: var(--white);
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	margin-bottom: 14px;
}
.comment-form textarea { min-height: 140px; }

/* ---------- Search form ---------- */
.search-form { display: flex; gap: 12px; }
.search-form .search-field { margin-bottom: 0; flex: 1; }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding: 60px 0; }
.error-404 .error-code {
	font-family: var(--font-display);
	font-size: 130px;
	line-height: 1;
	color: var(--pink);
	text-shadow: 8px 8px 0 var(--ink);
	margin-bottom: 24px;
}
.error-404 .search-form { max-width: 460px; margin: 28px auto 0; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--ink);
	color: #d8d2c6;
	margin-top: 30px;
	border-top: 3px solid var(--ink);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 52px 0 40px;
}
.site-footer h4 {
	color: var(--yellow);
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 16px;
}
.site-footer p { font-size: 14px; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #d8d2c6; text-decoration: none; font-size: 14px; font-weight: 600; }
.site-footer a:hover { color: var(--pink); }
.footer-bottom {
	border-top: 2px solid #333;
	padding: 20px 0;
	text-align: center;
	font-size: 13px;
}
.footer-bottom .heart { color: var(--pink); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.menu-toggle { display: inline-flex; }
	.main-nav { display: none; width: 100%; }
	.main-nav.open { display: block; padding-bottom: 16px; }
	.nav-menu {
		flex-direction: column;
		background: var(--paper);
		border: 3px solid var(--ink);
		box-shadow: 5px 5px 0 var(--ink);
	}
	.nav-menu li + li { border-top: 2px solid var(--ink); }
	.nav-menu a { padding: 13px 16px; }
	.home-grid { grid-template-columns: 1fr; }
	.sidebar { border-top: 3px solid var(--ink); padding-top: 36px; }
	.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.main-column .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	body { margin: 12px; box-shadow: 0 0 0 7px var(--pink); }
	.container { padding: 0 18px; }
	.site-title { font-size: 23px; }
	.post-grid, .main-column .post-grid, .trending-grid { grid-template-columns: 1fr; }
	.theme-toggle { bottom: 18px; right: 18px; width: 46px; height: 46px; font-size: 20px; }
	.back-to-top { bottom: 18px; right: 72px; width: 46px; height: 46px; font-size: 22px; }
	.featured-card .entry-title { font-size: 25px; }
	.single-header h1 { font-size: 26px; }
	.single-title { font-size: 26px; }
	.footer-grid { grid-template-columns: 1fr; }
	.entry-content .alignleft,
	.entry-content .alignright { float: none; max-width: 100%; margin-left: 0; margin-right: 0; }
	.entry-content .wp-block-gallery,
	.entry-content .gallery { grid-template-columns: 1fr; }
	.error-404 .error-code { font-size: 84px; }
}