/*
 * Panigazzi Theme — Main Stylesheet
 * Modern, minimal, editorial-first design.
 *
 * Table of Contents:
 *  1.  Reset & Base
 *  2.  Typography
 *  3.  Layout & Grid
 *  4.  Site Header / Navbar
 *  5.  Navigation
 *  6.  Posts Loop — Card & Featured
 *  7.  Single Post / Page
 *  8.  Sidebar & Widgets
 *  9.  Comments
 * 10.  Search Form
 * 11.  Pagination
 * 12.  Author Box
 * 13.  Recirculation Modules
 * 14.  Cluster Grid
 * 15.  Breadcrumbs
 * 16.  Archives
 * 17.  404
 * 18.  Site Footer
 * 19.  Advertising
 * 20.  Cookie Notice
 * 21.  Accessibility
 * 22.  Home Hub (category grid / popular list)
 * 23.  Utilities
 */

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: #1a1a1a;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
}

img, video, embed, object {
	max-width: 100%;
	height: auto;
	display: block;
}

.entry-content iframe,
.wp-block-embed iframe {
	max-width: 100%;
	display: block;
}

figure { margin: 0; }

a {
	color: #0066cc;
	text-decoration: underline;
	text-underline-offset: 3px;
}
a:hover { text-decoration: none; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
li { margin-bottom: .25rem; }

blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid #0066cc;
	background: #f7f9fc;
	font-style: italic;
	color: #444;
}
blockquote p:last-child { margin: 0; }

hr {
	border: none;
	border-top: 1px solid #e5e5e5;
	margin: 2rem 0;
}

code, kbd, samp, pre {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: .875em;
}
code {
	background: #f4f4f4;
	padding: .1em .35em;
	border-radius: 3px;
}
pre {
	background: #f4f4f4;
	padding: 1.25rem;
	overflow-x: auto;
	border-radius: 4px;
	line-height: 1.5;
	margin: 0 0 1.5rem;
}
pre code { background: none; padding: 0; }

table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1.5rem;
}
th, td {
	border: 1px solid #e5e5e5;
	padding: .625rem .875rem;
	text-align: left;
}
th { background: #f7f7f7; font-weight: 600; }

/* ==========================================================================
   2. Typography Tokens & Scale
   ========================================================================== */

:root {
	/* Modular scale — minor third (1.2) with clamp for fluid sizing */
	--text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	--text-md:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--text-lg:   clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
	--text-xl:   clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
	--text-2xl:  clamp(2.25rem, 2rem + 1.5vw, 3.5rem);

	/* Weights */
	--font-normal:  400;
	--font-medium:  500;
	--font-semibold: 600;
	--font-bold:    700;

	/* Leading */
	--leading-tight: 1.2;
	--leading-snug:  1.35;
	--leading-normal: 1.6;

	/* Related content palette */
	--related-accent: #f59b23;
	--related-bg: #fff7eb;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .75rem;
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: #111;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }
h5 { font-size: var(--text-sm); }
h6 { font-size: var(--text-xs); }

/* ==========================================================================
   3. Layout & Grid
   ========================================================================== */

.site-container {
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.site-content { padding: 2.5rem 0; }

.content-area {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

.layout-full { display: block; }

.site-main {
	flex: 1 1 0;
	min-width: 0;
}

.entry-aside {
	flex: 0 0 30%;
	max-width: 30%;
	min-width: 220px;
	position: sticky;
	/* Must clear the sticky site header (authority bar ~24px + logo/nav
	   row ~80px + 1px border ≈ 105px measured). --panigazzi-ad-sticky-offset
	   is never actually defined anywhere in this theme, so it always fell
	   back to its default (96px) — 9-15px short of the real header height,
	   which is exactly why this tucked under the header on scroll. Using a
	   dedicated, correctly-measured header-height variable instead of
	   reusing the ad's (unset) token, with a safety margin for wrapped
	   header rows on narrower desktop widths. */
	top: calc(var(--panigazzi-header-height, 112px) + 1rem);
}

@media (max-width: 48rem) {
	.content-area { flex-direction: column; }
	.entry-aside { flex: none; max-width: 100%; min-width: 0; width: 100%; position: static; }
}

/* ==========================================================================
   4. Site Header / Navbar
   ========================================================================== */

.site-header {
	background: #ffffff;
	border-bottom: 1px solid #e5e5e5;
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Authority bar — thin strip above the logo that signals editorial authority */
.site-header__authority {
	background: #111;
	color: #fff;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .04em;
}
.site-header__authority-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .4rem 0;
	gap: .5rem;
}
.site-header__tagline {
	font-weight: 500;
	color: #ccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.site-header__updated {
	color: #999;
	white-space: nowrap;
	flex-shrink: 0;
}
@media (max-width: 480px) {
	.site-header__updated { display: none; }
}

.site-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: .75rem;
	padding: .75rem 0;
	min-height: 56px;
}

.site-logo {
	flex-shrink: 0;
}

.site-logo img {
	height: 40px;
	width: auto;
}

.site-title-link {
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.site-title-link:hover { color: #0066cc; }

.site-header__search {
	flex-shrink: 0;
	margin-left: auto;
}
.site-header__search .search-form__field { width: 160px; }

/* ==========================================================================
   5. Navigation
   ========================================================================== */

.site-nav {
	flex: 1;
	min-width: 0;
	overflow: visible;
}

.site-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}

.site-nav__menu .menu-item a,
.site-nav__link {
	display: block;
	padding: .4rem .65rem;
	color: #333;
	text-decoration: none;
	font-size: .8125rem;
	font-weight: 400;
	border-radius: 0;
	transition: color .15s;
	white-space: nowrap;
}
.site-nav__menu .menu-item a:hover { color: #0066cc; }
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-page-ancestor > a { color: #0066cc; font-weight: 600; }

/* Dropdown */
.site-nav__menu .menu-item-has-children { position: relative; }
.site-nav__menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	min-width: 200px;
	box-shadow: 0 4px 16px rgba(0,0,0,.1);
	z-index: 200;
	padding: .5rem 0;
	list-style: none;
	margin: 0;
}
.site-nav__menu .menu-item-has-children:hover > .sub-menu,
.site-nav__menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.site-nav__menu .sub-menu a { padding: .5rem 1rem; }

/* Hamburger */
.site-nav__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: .5rem;
	flex-direction: column;
	gap: 5px;
}
.site-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #1a1a1a;
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}

/* Stacked header on desktop: logo centred, nav full-width below.
   Universal: works with a 2-word logo, a long site name, or an image.
   Works with 3 nav items or 15. */
@media (min-width: 901px) {
	.site-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		padding: .875rem 0 0;
		gap: 0;
		min-height: unset;
		position: relative;
	}
	.site-logo {
		flex: 0 0 100%;
		text-align: center;
		padding-bottom: .75rem;
	}
	.site-header__search {
		position: absolute;
		right: 0;
		top: 1rem;
		margin-left: 0;
	}
	.site-nav {
		flex: 0 0 100%;
		border-top: 1px solid #e5e5e5;
	}
	.site-nav__menu {
		padding: .375rem 0;
	}
}

/* Collapse nav to hamburger on mobile/tablet — matches navigation.js resize threshold */
@media (max-width: 900px) {
	.site-nav { flex: 0 0 auto; margin-left: auto; position: relative; }
	.site-nav__toggle { display: flex; }
	.site-nav__menu {
		display: none;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		position: absolute;
		top: 100%;
		right: 0;
		left: auto;
		min-width: 220px;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-top: none;
		box-shadow: 0 4px 16px rgba(0,0,0,.1);
		padding: .75rem 0;
		z-index: 200;
		white-space: normal;
	}
	.site-nav__menu.is-open { display: flex; }
	.site-nav__menu .menu-item a { padding: .5rem 1.25rem; }
	.site-nav__menu .current-menu-item > a { font-weight: 700; }
	.site-nav__menu .sub-menu { position: static; border: none; box-shadow: none; padding-left: 1rem; }
	.site-header__search { display: none; }
}

/* ==========================================================================
   6. Posts Loop — Card & Featured
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
	margin-top: 1.75rem;
}

/* Featured post */
.loop-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 2rem;
}

@media (min-width: 640px) {
	.loop-featured { grid-template-columns: 3fr 2fr; align-items: center; }
}

.loop-featured__image-link { display: block; }
.loop-featured__image { width: 100%; height: auto; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.loop-featured__cat {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #0066cc;
	text-decoration: none;
	margin-bottom: .5rem;
}
.loop-featured__title { font-size: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: .75rem; line-height: 1.25; }
.loop-featured__title a { color: inherit; text-decoration: none; }
.loop-featured__title a:hover { color: #0066cc; }
.loop-featured__excerpt { color: #555; font-size: .9375rem; margin-bottom: 1rem; }

/* Card */
.loop-card {
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	transition: box-shadow .2s, transform .2s;
	background: #fff;
}
.loop-card:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,.1);
	transform: translateY(-2px);
}
.loop-card__image-link { display: block; }
.loop-card__image { width: 100%; height: 180px; object-fit: cover; }
.loop-card__body { padding: 1.125rem; flex: 1; display: flex; flex-direction: column; }
.loop-card__cat {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #0066cc;
	text-decoration: none;
	margin-bottom: .4rem;
}
.loop-card__title { font-size: 1rem; margin-bottom: .5rem; line-height: 1.35; }
.loop-card__title a { color: inherit; text-decoration: none; }
.loop-card__title a:hover { color: #0066cc; }
.loop-card__excerpt { font-size: .875rem; color: #666; flex: 1; margin-bottom: .75rem; }
.loop-card__date { font-size: .8rem; color: #999; }

/* List */
.loop-list { padding: 1.25rem 0; border-bottom: 1px solid #e5e5e5; }
.loop-list__inner { display: flex; gap: 1.25rem; align-items: flex-start; }
.loop-list__image-link { flex-shrink: 0; }
.loop-list__image { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; }
.loop-list__title { font-size: 1.0625rem; margin-bottom: .25rem; }
.loop-list__title a { color: inherit; text-decoration: none; }
.loop-list__title a:hover { color: #0066cc; }
.loop-list__excerpt { font-size: .875rem; color: #666; margin: .5rem 0 0; }

/* ==========================================================================
   7. Single Post / Page
   ========================================================================== */

.single-post .entry-header,
.single-page .entry-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e5e5e5;
}

/* Breadcrumbs sit above the title in single posts */
.single-post .entry-header .breadcrumbs,
.single-page .entry-header .breadcrumbs {
	order: -1;
	margin-bottom: .75rem;
	margin-top: 0;
}

/* Ensure header children stack in correct order */
.single-post .entry-header,
.single-page .entry-header {
	display: flex;
	flex-direction: column;
}

.single-post .entry-header .entry-title,
.single-page .entry-header .entry-title {
	order: 0;
}

.single-post .entry-header .entry-subtitle,
.single-page .entry-header .entry-subtitle {
	order: 1;
}

.single-post .entry-header .entry-meta,
.single-page .entry-header .entry-meta {
	order: 2;
}

.entry-title { margin-bottom: .75rem; }

.entry-subtitle {
	font-size: 1.1875rem;
	color: #555;
	margin-bottom: 1rem;
	line-height: 1.5;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	font-size: .875rem;
	color: #777;
}
.entry-meta a { color: inherit; text-decoration: none; }
.entry-meta a:hover { color: #0066cc; }
.entry-meta__sep { color: #ccc; }
.entry-meta .entry-date { font-weight: 500; }
.entry-meta .entry-date.updated { color: #888; font-weight: 400; }
.entry-reading-time { color: #888; }

.entry-content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: #222;
}
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 2rem; }
.entry-content img { border-radius: 6px; }
.entry-content figcaption { font-size: .8125rem; color: #888; text-align: center; margin-top: .5rem; }

.post-thumbnail { margin-bottom: 1.75rem; }
.post-thumbnail__image { width: 100%; border-radius: 8px; }

.entry-tags { margin-top: 1.5rem; font-size: .875rem; }
.entry-tags a {
	display: inline-block;
	background: #f0f0f0;
	color: #444;
	border-radius: 3px;
	padding: .2rem .6rem;
	text-decoration: none;
	margin-right: .25rem;
	margin-bottom: .25rem;
}
.entry-tags a:hover { background: #0066cc; color: #fff; }

.entry-read-more {
	font-size: .875rem;
	font-weight: 600;
	color: #0066cc;
	text-decoration: none;
}

/* ==========================================================================
   8. Sidebar & Widgets
   ========================================================================== */

.widget { margin-bottom: 2rem; }
.widget-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid #0066cc;
}

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
	padding: .375rem 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: .9375rem;
}
.widget ul li:last-child { border: none; }
.widget ul li a { color: #1a1a1a; text-decoration: none; }
.widget ul li a:hover { color: #0066cc; }

.panigazzi-sidebar-related {
	border: 1px solid #e8e8e8;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(0,0,0,.05);
	padding: 1.35rem 1.5rem;
	margin-bottom: 2rem;
}
.panigazzi-sidebar-related__title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #111;
}
.panigazzi-sidebar-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.panigazzi-sidebar-related__item {
	display: grid;
	grid-template-columns: auto auto 1fr;
	gap: .65rem;
	align-items: center;
}
.panigazzi-sidebar-related__index {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--related-bg);
	color: var(--related-accent);
	font-weight: 700;
	font-size: .85rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.panigazzi-sidebar-related__media {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}
.panigazzi-sidebar-related__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.panigazzi-sidebar-related__body { min-width: 0; }
.panigazzi-sidebar-related__link {
	color: #111;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.35;
}
.panigazzi-sidebar-related__link:hover { color: var(--related-accent); }

/* ==========================================================================
   9. Comments
   ========================================================================== */

.comments-area { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e5e5; }

.comments-title {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.comment-list { list-style: none; padding: 0; margin: 0; }

.comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid #f0f0f0;
}
.comment-meta { display: flex; align-items: center; gap: .875rem; margin-bottom: .75rem; flex-wrap: wrap; }
.comment-author .avatar { border-radius: 50%; flex-shrink: 0; }
.comment-author .fn a { color: #111; text-decoration: none; font-weight: 600; }
.comment-metadata a { font-size: .8125rem; color: #999; text-decoration: none; }
.comment-content { font-size: .9375rem; }
.reply { margin-top: .75rem; font-size: .875rem; }
.children { padding-left: 1.5rem; list-style: none; }
.comment-awaiting-moderation { font-size: .8125rem; color: #999; display: block; }
.comment-reply-title { font-size: 1.125rem; margin-top: 2rem; margin-bottom: 1rem; }
.comment-form label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .25rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
}
.comment-form textarea { min-height: 100px; resize: vertical; }
.comment-form input[type="submit"] {
	background: #0066cc;
	color: #fff;
	border: none;
	padding: .625rem 1.5rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
}
.comment-form input[type="submit"]:hover { background: #0055aa; }

/* ==========================================================================
   10. Search Form
   ========================================================================== */

.search-form__inner {
	display: flex;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	overflow: hidden;
}
.search-form__field {
	flex: 1;
	padding: .5rem .75rem;
	border: none;
	font-size: .9375rem;
	font-family: inherit;
	outline: none;
}
.search-form__submit {
	background: #f5f5f5;
	border: none;
	border-left: 1px solid #d0d0d0;
	padding: .5rem .75rem;
	cursor: pointer;
	color: #555;
	display: flex;
	align-items: center;
}
.search-form__submit:hover { background: #e5e5e5; }

/* ==========================================================================
   10.5 Forms — content & CF7
   ========================================================================== */

.entry-content form input[type="text"],
.entry-content form input[type="email"],
.entry-content form input[type="tel"],
.entry-content form input[type="url"],
.entry-content form input[type="number"],
.entry-content form input[type="password"],
.entry-content form select,
.entry-content form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="password"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: .65rem .9rem;
	border: 1.5px solid #d0d0d0;
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	color: #1a1a1a;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.entry-content form input[type="text"]:focus,
.entry-content form input[type="email"]:focus,
.entry-content form input[type="tel"]:focus,
.entry-content form input[type="url"]:focus,
.entry-content form input[type="number"]:focus,
.entry-content form input[type="password"]:focus,
.entry-content form select:focus,
.entry-content form textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #0066cc;
	box-shadow: 0 0 0 3px rgba(0,102,204,.1);
}
.entry-content form textarea,
.wpcf7-form textarea { resize: vertical; min-height: 140px; }

.entry-content form label,
.wpcf7-form label {
	display: block;
	font-size: .9375rem;
	font-weight: 500;
	color: #333;
	margin-bottom: .35rem;
}

.entry-content form input[type="submit"],
.entry-content form button[type="submit"],
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
	display: inline-block;
	background: #0066cc;
	color: #fff;
	border: none;
	padding: .7rem 2rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s;
}
.entry-content form input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover { background: #0055aa; }

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.navigation.pagination {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}
.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .75rem;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	font-size: .875rem;
	text-decoration: none;
	color: #1a1a1a;
}
.nav-links a:hover { background: #f0f4ff; border-color: #0066cc; color: #0066cc; }
.nav-links .current { background: #0066cc; border-color: #0066cc; color: #fff; }
.nav-links .dots { border: none; background: none; }

/* ==========================================================================
   12. Author Box
   ========================================================================== */

.author-box {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.5rem;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	margin-bottom: 2rem;
	background: #f9f9f9;
}
.author-box__avatar { border-radius: 50%; flex-shrink: 0; }
.author-box__name { font-weight: 700; color: #111; text-decoration: none; display: block; margin-bottom: .4rem; }
.author-box__name:hover { color: #0066cc; }
.author-box__bio { font-size: .9375rem; color: #555; margin: 0; }

/* ==========================================================================
   13. Recirculation Modules
   ========================================================================== */

.panigazzi-inline-related {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	border: 1px solid rgba(245,155,35,.25);
	border-left: 6px solid var(--related-accent);
	background: var(--related-bg);
	box-shadow: 0 18px 45px rgba(245,155,35,.15);
}
.panigazzi-inline-related__media {
	flex: 0 0 150px;
	border-radius: 14px;
	overflow: hidden;
}
.panigazzi-inline-related__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 16 / 9;
}
.panigazzi-inline-related__body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
}
.panigazzi-inline-related__eyebrow {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--related-accent);
}
.panigazzi-inline-related__title {
	font-size: 1.1rem;
	line-height: 1.4;
	font-weight: 650;
	color: #111;
	text-decoration: none;
}
.panigazzi-inline-related__title:hover { color: var(--related-accent); }
.panigazzi-inline-related__cta {
	font-size: 1.5rem;
	color: var(--related-accent);
	background: #fff;
	border-radius: 999px;
	padding: .2rem .55rem;
	box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
@media (max-width: 640px) {
	.panigazzi-inline-related { flex-direction: column; align-items: flex-start; }
	.panigazzi-inline-related__media { width: 100%; }
	.panigazzi-inline-related__cta { align-self: flex-end; }
}

.panigazzi-related-footer { margin: 3rem 0 2.5rem; }
.panigazzi-related-footer__inner {
	border: 1px solid #ebebeb;
	border-radius: 20px;
	padding: 2rem 2.25rem;
	background: linear-gradient(180deg, #ffffff 0%, #fff9f1 100%);
	box-shadow: 0 25px 55px rgba(0,0,0,.06);
}
.panigazzi-related-footer__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .78rem;
	font-weight: 700;
	color: var(--related-accent);
	margin-bottom: 1.25rem;
}
.panigazzi-related-footer__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.panigazzi-related-footer__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.04);
	background: #fff;
	text-decoration: none;
	color: #111;
	font-weight: 600;
	line-height: 1.4;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.panigazzi-related-footer__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 35px rgba(0,0,0,.08);
	border-color: rgba(245,155,35,.4);
	color: var(--related-accent);
}
.panigazzi-related-footer__text { flex: 1; }
.panigazzi-related-footer__icon {
	font-size: 1.2rem;
	color: var(--related-accent);
}

/* ==========================================================================
   14. Cluster Grid
   ========================================================================== */

.cluster-title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	font-weight: 700;
}

/* Card (grid) layout */
.cluster-card {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* Fixed-column overrides */
.cluster-cols-1 { grid-template-columns: 1fr; }
.cluster-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cluster-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cluster-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 48rem) {
	.cluster-cols-2,
	.cluster-cols-3,
	.cluster-cols-4 { grid-template-columns: 1fr; }
}

/* List layout */
.cluster-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ==========================================================================
   15. Breadcrumbs
   ========================================================================== */

.breadcrumbs {
	font-size: .8125rem;
	color: #888;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem;
}
.breadcrumbs a { color: #888; text-decoration: none; }
.breadcrumbs a:hover { color: #0066cc; }
.breadcrumbs span { margin: 0 .2rem; }
.breadcrumbs__sep { color: #ccc; font-size: .75rem; }
.breadcrumbs__current { color: #555; }

/* ==========================================================================
   16. Archives
   ========================================================================== */

.archive-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e5e5e5;
}
.archive-title { margin-bottom: .5rem; }
.archive-description { font-size: .9375rem; color: #666; }
.archive-extra-description {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #f0f0f0;
	font-size: .9375rem;
	color: #555;
}

/* ==========================================================================
   17. 404
   ========================================================================== */

.error-404 { text-align: center; padding: 3rem 1rem; }
.error-404 .page-title { font-size: clamp(2rem, 6vw, 4rem); color: #e5e5e5; }
.error-404 .page-content { max-width: 480px; margin: 0 auto; }
.error-404 .search-form { margin-top: 1.5rem; }

/* ==========================================================================
   18. Site Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid #e5e5e5;
	margin-top: 2.5rem;
}

.footer-main {
	padding: 2.5rem 0;
	border-bottom: 1px solid #e5e5e5;
}

/* Recirculation engine — more posts to keep users engaged */
.footer-recirculation {
	padding: 2.5rem 0;
	border-bottom: 1px solid #e5e5e5;
}
.footer-recirculation__title {
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #333;
	margin-bottom: 1.25rem;
}
.footer-recirculation__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
.footer-recirculation__card {
	min-width: 0;
}
.footer-recirculation__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.footer-recirculation__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: .5rem;
}
.footer-recirculation__headline {
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
	color: #111;
	margin: 0;
}
.footer-recirculation__link:hover .footer-recirculation__headline { color: #0066cc; }
@media (max-width: 768px) {
	.footer-recirculation__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.footer-recirculation__grid { grid-template-columns: 1fr; }
}

/* Sticky bottom ad slot */
.footer-ad-slot {
	position: sticky;
	bottom: 0;
	z-index: 90;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	padding: .5rem 0;
	text-align: center;
}

.footer-main__inner {
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}

.footer-main__brand { flex-shrink: 0; min-width: 160px; }
.footer-main__brand img { max-height: 48px; width: auto; }
.footer-main__brand .site-title-link { font-size: 1.25rem; }

.footer-widgets__grid {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 2rem;
}

.footer-main .widget { margin-bottom: 0; }

.footer-main .widget-title {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #333;
	margin-bottom: .875rem;
	padding-bottom: 0;
	border-bottom: none;
}

.footer-main .widget ul { list-style: none; padding: 0; margin: 0; }
.footer-main .widget ul li {
	padding: .25rem 0;
	border-bottom: none;
	font-size: .875rem;
}
.footer-main .widget ul li a { color: #666; text-decoration: none; }
.footer-main .widget ul li a:hover { color: #0066cc; }

.footer-col__menu { list-style: none; padding: 0; margin: 0; }
.footer-col__menu li { padding: .2rem 0; font-size: .875rem; }
.footer-col__menu li a { color: #666; text-decoration: none; }
.footer-col__menu li a:hover { color: #0066cc; }

@media (max-width: 48rem) {
	.footer-main__inner { flex-direction: column; gap: 2rem; }
}

.footer-bottom {
	padding: .875rem 0;
}
.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.footer-bottom__credit { font-size: .875rem; color: #777; margin: 0; }
.footer-bottom__credit a { color: inherit; text-decoration: none; }

.footer-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
}
.footer-nav__menu a { font-size: .875rem; color: #777; text-decoration: none; }
.footer-nav__menu a:hover { color: #0066cc; }

/* ==========================================================================
   19. Advertising
   ========================================================================== */

.panigazzi-ad {
	text-align: center;
	margin: 1.5rem 0;
	overflow: hidden;
	min-height: 0;
}
.panigazzi-ad:empty { display: none; }
.panigazzi-ad ins.adsbygoogle[data-ad-status="unfilled"],
.panigazzi-ad ins.adsbygoogle:empty {
	display: block;
	height: 0 !important;
	min-height: 0 !important;
}
.panigazzi-ad--block { display: block; width: 100%; min-height: 0; }
.panigazzi-ad--reserved { min-height: clamp(64px, 11vw, 120px); }
.panigazzi-ad--sticky-sidebar {
	position: sticky;
	top: var(--panigazzi-ad-sticky-offset, 96px);
	min-height: clamp(64px, 11vw, 120px);
}
@supports (container-type: inline-size) {
	.panigazzi-ad { min-height: clamp(48px, 9vw, 90px); }
	.panigazzi-ad ins.adsbygoogle[data-ad-status="unfilled"],
	.panigazzi-ad ins.adsbygoogle:empty { min-height: 0 !important; }
}
.panigazzi-ad__label {
	display: block;
	margin-bottom: .35rem;
	color: #888;
	font-size: .6875rem;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.panigazzi-ad.hide-on-mobile { display: none; }
}
@media (min-width: 769px) {
	.panigazzi-ad.hide-on-desktop { display: none; }
}
@media (max-width: 1023px) {
	.panigazzi-ad--sticky-sidebar { display: none; }
}

/* Lazy-loaded ad placeholder — keeps layout stable before activation */
.panigazzi-ad--lazy {
	position: relative;
	min-height: clamp(64px, 11vw, 120px);
}
.panigazzi-ad--lazy::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		#f7f7f7,
		#f7f7f7 8px,
		#f0f0f0 8px,
		#f0f0f0 16px
	);
	z-index: 0;
}
.panigazzi-ad--lazy > .panigazzi-ad__label {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   20. Cookie Notice
   ========================================================================== */

.cookie-notice {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #1a1a1a;
	color: #fff;
	z-index: 9999;
	padding: 1rem 0;
	border-top: 3px solid #0066cc;
}
.cookie-notice__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.cookie-notice__text { margin: 0; font-size: .9rem; flex: 1; }
.cookie-notice__btn {
	background: #0066cc;
	color: #fff;
	border: none;
	padding: .5rem 1.25rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
}
.cookie-notice__btn:hover { background: #0055aa; }

/* ==========================================================================
   21. Accessibility
   ========================================================================== */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.screen-reader-text:focus {
	background: #fff;
	clip: auto;
	display: block;
	font-size: .875rem;
	font-weight: 700;
	height: auto;
	left: .3rem;
	outline: 2px solid #0066cc;
	padding: 1rem 1.5rem;
	top: .3rem;
	width: auto;
	z-index: 9999;
}

.skip-link { position: absolute; top: 0; left: 0; z-index: 9999; }

:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; }

/* ==========================================================================
   22. Share Buttons
   ========================================================================== */

.entry-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 2rem 0 1.5rem;
	padding: 1.25rem 0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.entry-share__label {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #888;
	margin-right: .25rem;
}

.share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .4rem .9rem;
	border-radius: 4px;
	font-size: .8125rem;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity .15s, transform .1s;
	white-space: nowrap;
	line-height: 1;
}
.share-btn:hover { opacity: .85; transform: translateY(-1px); }
.share-btn:active { transform: translateY(0); }

.share-btn--whatsapp { background: #25d366; color: #fff; }
.share-btn--twitter  { background: #000; color: #fff; }
.share-btn--facebook { background: #1877f2; color: #fff; }
.share-btn--linkedin { background: #0a66c2; color: #fff; }
.share-btn--copy     {
	background: #f0f0f0;
	color: #333;
	border-color: #ddd;
}
.share-btn--copy:hover { background: #e4e4e4; opacity: 1; }
.share-btn--copy:disabled { opacity: .6; cursor: default; transform: none; }

@media (max-width: 32rem) {
	.entry-share { gap: .4rem; }
	.share-btn { padding: .4rem .7rem; font-size: .75rem; }
}

/* ==========================================================================
   22b. Back to Top
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 90;
	width: 2.5rem;
	height: 2.5rem;
	background: #0066cc;
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	transition: background .15s, transform .15s;
}
.back-to-top:hover { background: #0055aa; transform: translateY(-2px); }
.back-to-top[hidden] { display: none; }

@media (max-width: 48rem) {
	.back-to-top { bottom: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
}

/* ==========================================================================
   23. Table of Contents (TOC)
   ========================================================================== */

.panigazzi-toc {
	background: #f7f9fc;
	border: 1px solid #e0e8f0;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
	font-size: .9375rem;
}

.panigazzi-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}

.panigazzi-toc__title {
	font-weight: 700;
	font-size: .9375rem;
	color: #111;
}

.panigazzi-toc__toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: .2rem .4rem;
	border-radius: 3px;
	color: #555;
	display: flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
}
.panigazzi-toc__toggle:hover { background: #e8eff8; }

.panigazzi-toc__toggle-glyph {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1rem !important;
	height: 1rem !important;
	border: 0 !important;
	background: transparent !important;
	color: #333 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	transform: rotate(0deg);
	transition: transform .2s;
}
.panigazzi-toc__toggle[aria-expanded="false"] .panigazzi-toc__toggle-glyph {
	transform: rotate(-90deg);
}
.panigazzi-toc__toggle-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 1rem !important;
	height: 1rem !important;
	border: 0 !important;
	background: transparent !important;
	color: #333 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	transform: none !important;
}
.panigazzi-toc__toggle-icon::before {
	content: "⌄";
}

.panigazzi-toc__list {
	margin: 0;
	padding-left: 1.5rem;
	list-style: decimal;
}

.panigazzi-toc__item {
	padding: .2rem 0;
	margin-bottom: 0;
	line-height: 1.45;
}
.panigazzi-toc__item a {
	color: #0066cc;
	text-decoration: none;
}
.panigazzi-toc__item a:hover { text-decoration: underline; }

.panigazzi-toc__sub {
	list-style: lower-alpha;
	padding-left: 1.25rem;
	margin: .25rem 0;
}

.panigazzi-toc__item--h3 {
	font-size: .875rem;
	color: #555;
}

.panigazzi-toc__item--h3 > a {
	font-size: .875rem;
	color: #555;
}

.panigazzi-toc__list a.is-active,
.panigazzi-toc__sub  a.is-active {
	color: #0066cc;
	font-weight: 700;
}

@media (max-width: 48rem) {
	.panigazzi-toc { font-size: .875rem; }
}

/* ==========================================================================
   22. Home Hub (category grid / popular list)
   ========================================================================== */

.home-hero {
	background: linear-gradient(180deg, #fafbfd 0%, #fff 100%);
	border-bottom: 1px solid #e5e5e5;
	padding: 2.75rem 0 2.25rem;
	text-align: center;
}

.home-hero__title {
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	margin: 0 0 .625rem;
	color: #111;
}

.home-hero__tagline {
	font-size: 1.05rem;
	color: #555;
	max-width: 40rem;
	margin: 0 auto 1.5rem;
}

.home-hero__search {
	max-width: 32rem;
	margin: 0 auto;
}

.home-section {
	padding: 2.5rem 0;
}

.home-section + .home-section {
	border-top: 1px solid #e5e5e5;
}

.home-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1.25rem;
}

.home-section__head h2 {
	font-size: 1.3rem;
	margin: 0;
	color: #111;
}

/*
 * Category grid — 5 selectable styles (Customizer: Panigazzi → Home Category
 * Grid → Card style). Every style shares the same base .cat-card rules below
 * and only overrides layout via its `.cat-card--*` modifier, so per-site
 * choice never requires editing PHP/CSS — see inc/customizer/sections/home-hub.php
 * and template-parts/loops/loop-category.php.
 */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

.cat-grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-grid--cols-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (min-width: 64rem) {
	.cat-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.cat-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.cat-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Compact-chip always fills the row with small cards, regardless of the columns setting. */
.cat-grid--compact-chip {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (min-width: 64rem) {
	.cat-grid--compact-chip { grid-template-columns: repeat(5, 1fr); }
}

/* Base card — shared by every style. */
.cat-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: #111;
	border: 1px solid #e5e5e5;
	border-radius: 1rem;
	overflow: hidden;
	background: #fff;
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}

.cat-card:hover {
	border-color: #0066cc;
	box-shadow: 0 12px 28px rgba(0, 102, 204, .12);
	transform: translateY(-3px);
}

.cat-card:hover .cat-card__image-el {
	transform: scale(1.04);
}

.cat-card__image {
	display: block;
	width: 100%;
	overflow: hidden;
	background: #f0f0f0;
}

.cat-card__image-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.cat-card__body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.cat-card__title {
	font-weight: 700;
	line-height: 1.25;
	color: #111;
}

.cat-card__count {
	font-size: .85rem;
	color: #888;
	font-weight: 500;
}

/* --- Style: large-vertical (default) — image on top, full width, vertical stack. --- */
.cat-card--large-vertical .cat-card__image { aspect-ratio: 16 / 10; }
.cat-card--large-vertical .cat-card__body { padding: 1.125rem 1.25rem 1.375rem; }
.cat-card--large-vertical .cat-card__title { font-size: 1.2rem; }

/* --- Style: compact-chip — small square image, horizontal row, no border radius on image. --- */
.cat-card--compact-chip {
	flex-direction: row;
	align-items: center;
	gap: .875rem;
	border-radius: .75rem;
	padding: .75rem;
}
.cat-card--compact-chip .cat-card__image {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: .625rem;
}
.cat-card--compact-chip .cat-card__body { padding: 0; }
.cat-card--compact-chip .cat-card__title { font-size: .98rem; }

/* --- Style: medium-side — fixed-height row, image ~40% on the left. --- */
.cat-card--medium-side {
	flex-direction: row;
	height: 6.875rem;
}
.cat-card--medium-side .cat-card__image {
	flex: 0 0 40%;
	height: 100%;
}
.cat-card--medium-side .cat-card__body {
	flex: 1;
	min-width: 0;
	justify-content: center;
	padding: 1rem 1.125rem;
}
.cat-card--medium-side .cat-card__title { font-size: 1.05rem; }

/* --- Style: overlay — full-bleed image, title/count in a white text block over a gradient. --- */
.cat-card--overlay {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: .875rem;
}
.cat-card--overlay .cat-card__image-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cat-card--overlay .cat-card__overlay {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 1rem 1.125rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: .125rem;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
}
.cat-card--overlay .cat-card__title { font-size: 1.15rem; color: #fff; }
.cat-card--overlay .cat-card__count { color: #e5e5e5; }

/* --- Style: icon-only — no image at all, an initial-letter badge instead. --- */
.cat-card--icon-only {
	flex-direction: row;
	align-items: center;
	gap: .875rem;
	border-radius: .75rem;
	padding: 1rem 1.125rem;
}
.cat-card__icon {
	flex: 0 0 auto;
	width: 2.875rem;
	height: 2.875rem;
	border-radius: .625rem;
	background: #eef3fb;
	color: #0066cc;
	font-weight: 700;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cat-card--icon-only .cat-card__body { padding: 0; }
.cat-card--icon-only .cat-card__title { font-size: 1rem; }

/* Popular list */
.popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e5e5e5;
	border-radius: .75rem;
	overflow: hidden;
}

.popular-list__item + .popular-list__item {
	border-top: 1px solid #e5e5e5;
}

.popular-list__link {
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .875rem 1.125rem;
	text-decoration: none;
	color: #111;
}

.popular-list__link:hover {
	background: #f7f7f7;
}

.popular-list__rank {
	flex: 0 0 auto;
	width: 2rem;
	text-align: center;
	font-weight: 800;
	font-size: 1.4rem;
	color: #f0f0f0;
	-webkit-text-stroke: 1px #888;
}

.popular-list__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.popular-list__link-title {
	font-size: .94rem;
	font-weight: 500;
	line-height: 1.35;
}

.popular-list__cat {
	font-size: .78rem;
	color: #888;
}

@media (max-width: 40rem) {
	.cat-grid:not(.cat-grid--compact-chip) { grid-template-columns: 1fr; }
	.cat-grid--compact-chip { grid-template-columns: repeat(2, 1fr); }
	.cat-card--large-vertical .cat-card__title,
	.cat-card--overlay .cat-card__title { font-size: 1.05rem; }
	.cat-card--medium-side { height: auto; flex-direction: column; }
	.cat-card--medium-side .cat-card__image { flex: none; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   23. Utilities
   ========================================================================== */

.no-results { text-align: center; padding: 2rem 0; }
.page-links { font-size: .875rem; margin-top: 1.5rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .8125rem; color: #888; text-align: center; margin-top: .5rem; }
.alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }
.alignwide  { margin-left: -2rem; margin-right: -2rem; }
.alignfull  { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; }

@media (max-width: 48rem) {
	.alignleft, .alignright { float: none; margin: 0 0 1rem; }
	.alignwide  { margin-left: 0; margin-right: 0; }
	.alignfull  { margin-left: 0; margin-right: 0; }
}