/*!
Theme Name: alx
Author: alx
Description: A fast, lightweight theme built on Underscores and inspired by linuxize.com. Every archive (home included) is a 2 column x 3 row grid, every view has a floating right sidebar, and any block plugin (GenerateBlocks, Kadence, Spectra, core blocks, etc.) is fully supported. Macro-style header, self-hosted Source Sans 3, ~1 KB of vanilla JS, inline SVG icons.
Version: 1.3.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alx
Tags: blog, grid-layout, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, wide-blocks

alx is based on Underscores https://underscores.me/, (C) 2012-2024 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS
----------------------------------------------------------------
1. Tokens + local fonts
2. Base + typography (same scale as the Macro theme)
3. Header: title, primary nav, chevron submenus, search
4. Layout + floating sidebar
5. Cards + grid + pagination
6. Single post + breadcrumbs
7. Content (zero specificity, plays nice with any block plugin)
8. Widgets
9. Comments
10. Footer
11. Full width template
12. WordPress alignment + captions
--------------------------------------------------------------*/

/* 1. Tokens + local fonts
--------------------------------------------------------------*/
:root {
	--font-xs: 13px;
	--font-sm: 14px;
	--font-base: 15px;
	--font-lg: 18px;
	--font-xl: 20px;
	--font-2xl: 22px;
	--alx-primary: #2271ff;
	--alx-primary-dark: #1657d6;
	--alx-heading: #0f172a;
	--alx-text: #1e293b;
	--alx-muted: #64748b;
	--alx-border: #e2e8f0;
	--alx-soft: #f5f7fb;
	--alx-bg: #fff;
	--alx-code-bg: #0f172a;
	--alx-code-fg: #e2e8f0;

	--alx-radius: 10px;
	--alx-container: 1380px;
	--alx-content: 820px;
	--alx-sidebar: 360px;
	--alx-gap: 2rem;
	--alx-adminbar: 0px;

	--alx-font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--alx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Source Sans 3 variable, self-hosted from /fonts */
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/Source-Sans-3-Normal.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("fonts/Source-Sans-3-Italics.woff2") format("woff2");
}

.admin-bar {
	--alx-adminbar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--alx-adminbar: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar {
		--alx-adminbar: 0px;
	}
}

/* 2. Base + typography
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--alx-adminbar) + 1rem);
}

body {
	margin: 0;
	font-family: var(--alx-font);
	font-size: var(--font-base);
	line-height: 1.75;
	color: var(--alx-text);
	background: var(--alx-bg);
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 992px) {
	body {
		line-height: 1.7;
	}
}

body td,
body th {
	line-height: 2;
}

/* Heading line-height, sizes and weights (as in Macro) */
body b,
body strong,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body th,
body .widget-title,
body .read-more-link {
	font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--alx-heading);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	line-height: 1.2;
}

body h1 {
	font-size: var(--font-2xl);
}

body h2 {
	font-size: var(--font-xl);
}

body h3 {
	font-size: var(--font-lg);
}

body h4,
body h5,
body h6 {
	font-size: var(--font-base);
}

body .entry-title,
body .archive-title {
	font-size: var(--font-xl);
	font-weight: 600;
}

body .widget-title {
	margin-bottom: 10px;
	font-size: var(--font-xl);
}

/* Smaller screens (same rules as Macro) */
@media (max-width: 1023px) {
	h1 {
		font-size: var(--font-xl);
	}

	h2 {
		font-size: var(--font-lg);
	}

	h3 {
		font-size: var(--font-base);
	}

	.entry-title,
	.archive-title {
		font-size: var(--font-lg);
	}

	.comment-respond .comment-reply-title {
		font-size: var(--font-xl);
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: var(--font-lg);
	}
}

p {
	margin: 0 0 1.25em;
}

a {
	color: var(--alx-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:where(:hover) {
	color: var(--alx-heading);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--alx-primary);
	outline-offset: 2px;
	border-radius: 3px;
}

img,
video {
	max-width: 100%;
	height: auto;
}

img {
	vertical-align: middle;
	border-radius: 10px;
}

hr {
	border: 0;
	border-top: 1px solid var(--alx-border);
	margin: 2rem 0;
}

.icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.icon--stroke {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon--fill {
	fill: currentColor;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background: var(--alx-bg);
	color: var(--alx-primary);
	font-weight: 600;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
}

/* 3. Header
   Same structure as the Macro header: title on the left, primary nav and
   the persistent search on the right. Below 1024px the search moves next
   to the title and the nav becomes its own centred row. No burger menu.
--------------------------------------------------------------*/
.site-header {
	background: var(--alx-bg);
	border-top: 2px solid var(--alx-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Header and footer run the full width of the screen. */
.site-header .site-container,
.site-footer .site-container {
	max-width: none;
}

.header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 20px;
	padding-top: 5px;
}

.site-branding {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: var(--font-lg);
	font-weight: 600;
	line-height: 1.2;
}

.site-title a {
	color: var(--alx-heading);
}

.site-title a:hover {
	color: var(--alx-primary);
	text-decoration: none;
}

.custom-logo-link {
	display: block;
}

.custom-logo {
	width: auto;
	max-height: 40px;
}

/* Search pill: icon on the left, "/" hint on the right */
.site-search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.site-header .site-search {
	order: 2;
	flex: 0 0 auto;
	width: clamp(150px, 42vw, 220px);
}

.site-search .icon {
	position: absolute;
	left: 0.8rem;
	top: 50%;
	translate: 0 -50%;
	color: var(--alx-muted);
	pointer-events: none;
}

.site-search input[type="search"] {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 2.6rem 0 2.5rem;
	border: 1px solid var(--alx-border);
	border-radius: 10px;
	background: var(--alx-soft);
	color: var(--alx-text);
	font: inherit;
	font-size: 0.9rem;
	-webkit-appearance: none;
	appearance: none;
}

.site-search input[type="search"]:focus {
	outline: 0;
	border-color: var(--alx-primary);
	background: var(--alx-bg);
	box-shadow: 0 0 0 3px rgba(34, 113, 255, 0.15);
}

.site-search kbd {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	translate: 0 -50%;
	padding: 0.2rem 0.45rem;
	border: 1px solid var(--alx-border);
	border-radius: 5px;
	background: var(--alx-bg);
	color: var(--alx-muted);
	font: 500 0.75rem/1 var(--alx-mono);
	pointer-events: none;
}

.site-search input:focus ~ kbd {
	display: none;
}

/* Primary navigation */
.main-navigation {
	position: relative;
	order: 3;
	flex: 1 0 100%;
	border-top: 1px solid #e2e8f0;
}

.main-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation li {
	display: flex;
	align-items: center;
}

.main-navigation a {
	display: block;
	padding: 0 10px;
	color: var(--alx-heading);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 35px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a {
	color: var(--alx-primary);
	text-decoration: none;
}

.main-navigation .menu-item-has-children:hover > a,
.main-navigation .menu-item-has-children:focus-within > a,
.main-navigation .menu-item-has-children.is-open > a,
.main-navigation .menu-item-has-children:hover > .submenu-toggle,
.main-navigation .menu-item-has-children:focus-within > .submenu-toggle,
.main-navigation .menu-item-has-children.is-open > .submenu-toggle {
	color: var(--alx-primary);
}

/* Chevron: sits right after the link of any item that has a submenu */
.main-navigation .menu-item-has-children > a {
	padding-right: 0;
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 35px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--alx-heading);
	cursor: pointer;
}

.submenu-toggle .icon {
	transition: rotate 0.15s;
}

.main-navigation .is-open > .submenu-toggle .icon {
	rotate: 180deg;
}

/* Submenus stay closed until their menu item or chevron is clicked or tapped. */
.main-navigation .sub-menu {
	display: none;
	position: absolute;
	left: 50%;
	top: 100%;
	z-index: 20;
	flex-direction: column;
	align-items: stretch;
	width: max-content;
	min-width: 180px;
	max-width: calc(100% - 20px);
	padding: 5px 0;
	background: var(--alx-bg);
	border: 1px solid var(--alx-border);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
	translate: -50% 0;
}

.main-navigation .sub-menu li {
	display: block;
}

.main-navigation .sub-menu a {
	padding: 8px 20px;
	line-height: normal;
}

.main-navigation li.is-open > .sub-menu {
	display: flex;
}

@media (min-width: 1024px) {
	.header-inner {
		flex-wrap: nowrap;
		padding-top: 0;
	}

	.main-navigation {
		order: 2;
		flex: 0 0 auto;
	}

	.site-header .site-search {
		order: 3;
		width: 230px;
	}

	.main-navigation ul {
		justify-content: flex-end;
	}

	.main-navigation a {
		padding: 0 10px;
		line-height: 50px;
	}

	.submenu-toggle {
		width: 24px;
		height: 50px;
	}

	.main-navigation li {
		position: relative;
	}

	.main-navigation .sub-menu {
		left: 0;
		translate: none;
		min-width: 200px;
		max-width: none;
	}

	.main-navigation .sub-menu a {
		white-space: nowrap;
	}

	/* Wide screens: hover / keyboard focus open it too. */
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		display: flex;
	}

	.main-navigation .menu-item-has-children:hover > .submenu-toggle .icon {
		rotate: 180deg;
	}
}

@media (max-width: 1023px) {
	.site-header .site-search input[type="search"] {
		height: 38px;
		padding: 0 2.4rem 0 2.3rem;
		font-size: 0.875rem;
	}

	.site-header .site-search .icon {
		left: 0.7rem;
	}

	.site-header .site-search kbd {
		right: 0.45rem;
	}

	.main-navigation .sub-menu {
		min-width: 150px;
		max-width: calc(100% - 40px);
		text-align: center;
	}

	.main-navigation .sub-menu a {
		padding: 5px 14px;
	}
}

/* Phones only: drop the "/" shortcut hint (no physical keyboard to use it).
   Tablets and desktops (768px and up) keep it — see the rule above. */
@media (max-width: 767px) {
	.site-header .site-search kbd {
		display: none;
	}

	/* Without the kbd hint there's no need for the wide right-hand
	   padding it reserved, and the pill can be a bit wider now that
	   it's the only thing sharing the row with the logo — together
	   that's enough for the "Search articles" placeholder to fit
	   without being clipped to "Search arti". */
	.site-header .site-search {
		width: clamp(190px, 50vw, 230px);
	}

	.site-header .site-search input[type="search"] {
		padding-right: 1rem;
	}

	/* Let a long site title truncate instead of squeezing the search
	   pill or wrapping onto a second line. */
	.site-title {
		overflow: hidden;
	}

	.site-title a {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media (max-width: 360px) {
	.site-title {
		font-size: var(--font-base);
	}
}

/* 4. Layout + floating sidebar
--------------------------------------------------------------*/
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-container {
	width: 100%;
	max-width: var(--alx-container);
	margin: 0 auto;
	padding: 0.15rem 0.5rem;
}

.site-layout {
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--alx-gap);
	align-content: start;
	padding: 2rem 0 3.5rem;
}

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

@media (min-width: 1024px) {
	.has-sidebar .site-layout {
		grid-template-columns: minmax(0, 1fr) var(--alx-sidebar);
	}

	/* The floating part: sticks near the top while the article scrolls. */
	.widget-area {
		position: sticky;
		top: calc(var(--alx-adminbar) + 20px);
		align-self: start;
		max-height: calc(100vh - var(--alx-adminbar) - 40px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.widget-area {
	min-width: 0;
}

/* 5. Cards + grid + pagination
--------------------------------------------------------------*/
.archive-header {
	margin-bottom: 1.5rem;
}

.archive-intro,
.no-results {
	margin-bottom: 1.5rem;
	padding: 20px;
	background: var(--alx-bg);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
}

.archive-intro .archive-header {
	margin-bottom: 0;
}

.archive-title {
	margin: 0 0 0.35rem;
	letter-spacing: -0.01em;
}

.archive-description {
	color: var(--alx-muted);
}

.archive-description p:last-child {
	margin-bottom: 0;
}

.not-found .site-search {
	max-width: 420px;
}

/* 2 columns. Six posts per page (see alx_grid_query) gives 3 rows. */
.posts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 600px) {
	.posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--alx-bg);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
	padding: 20px;
}

.card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--alx-radius);
	background: var(--alx-soft);
}

.card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 10px;
}

.card-body:first-child {
	margin-top: 0;
}

.card-title {
	margin: 0;
	font-size: var(--font-xl);
	line-height: 1.3;
}

.card-title a {
	color: var(--alx-heading);
}

.card-title a:hover {
	color: var(--alx-primary);
	text-decoration: none;
}

.card-excerpt {
	margin: 0;
	color: var(--alx-muted);
	line-height: 1.6;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.6rem;
	color: var(--alx-muted);
	font-size: var(--font-xs);
	line-height: 1.5;
}

.entry-meta a {
	color: inherit;
}

.entry-meta a:hover {
	color: var(--alx-primary);
}

.meta-sep {
	opacity: 0.6;
}

.pagination {
	margin-top: 2rem;
}

.pagination .nav-links {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
}

.page-list {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.page-prev,
.page-last {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 40px;
	padding: 0 0.85rem;
	border: 1px solid var(--alx-border);
	border-radius: 8px;
	color: var(--alx-text);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1;
}

.page-prev {
	justify-self: start;
}

.page-last {
	justify-self: end;
}

a.page-prev:hover,
a.page-last:hover {
	border-color: var(--alx-primary);
	color: var(--alx-primary);
	text-decoration: none;
}

/* Empty placeholders keep the numbers centred on the first/last page. */
.page-prev.is-empty,
.page-last.is-empty {
	padding: 0;
	border: 0;
}

@media (max-width: 599px) {
	.pagination .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.page-list {
		grid-column: 1 / -1;
		order: 3;
	}
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 40px;
	height: 40px;
	padding: 0 0.85rem;
	border: 1px solid var(--alx-border);
	border-radius: 8px;
	color: var(--alx-text);
	font-size: var(--font-sm);
	font-weight: 600;
	line-height: 1;
}

a.page-numbers:hover {
	border-color: var(--alx-primary);
	color: var(--alx-primary);
	text-decoration: none;
}

.page-numbers.current {
	background: var(--alx-primary);
	border-color: var(--alx-primary);
	color: #fff;
}

.page-numbers.dots {
	border-color: transparent;
}

/* 6. Single post + breadcrumbs
--------------------------------------------------------------*/

/* Breadcrumbs match the supplied alx theme on every screen size. */
.breadcrumbs {
	margin-bottom: 0.75rem;
	overflow: hidden;
	color: var(--alx-muted);
	font-size: 0.875rem;
	white-space: nowrap;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0.15rem 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li {
	flex: 0 0 auto;
	min-width: 0;
}

.breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.4rem;
	opacity: 0.6;
}

.breadcrumbs a {
	color: inherit;
}

.breadcrumbs a:hover {
	color: var(--alx-primary);
}

.breadcrumbs [aria-current] {
	display: inline-block;
	white-space: nowrap;
	vertical-align: bottom;
}

.entry--single {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--alx-bg);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
}

.entry-header {
	margin-bottom: 1rem;
}

.entry-title {
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

.post-thumbnail {
	margin: 0 0 2rem;
}

.post-thumbnail img {
	display: block;
	width: 100%;
	border-radius: 10px;
}

.entry-footer > * {
	margin-top: 2.25rem;
}

.section-title {
	margin: 0 0 0.85rem;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list a {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
	color: var(--alx-text);
	font-size: var(--font-sm);
}

.tag-list a:hover {
	border-color: var(--alx-primary);
	color: var(--alx-primary);
	text-decoration: none;
}

/* Author box: centred, same layout as the Macro theme */
.author-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 2.5rem auto 0;
	padding: 30px;
	background: var(--alx-soft);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
	text-align: center;
}

.author-box-avatar {
	flex-shrink: 0;
}

.author-box-avatar img {
	display: block;
	width: 100px;
	height: 100px;
	border: 4px solid var(--alx-bg);
	border-radius: 50px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
	object-fit: cover;
}

.author-box-details {
	width: 100%;
	max-width: 600px;
}

.author-box-name {
	margin: 0 0 8px;
	font-size: var(--font-lg);
	font-weight: 600;
}

.author-box-name a {
	color: var(--alx-heading);
}

.author-box-bio {
	margin: 0;
	color: var(--alx-muted);
	font-size: var(--font-sm);
	line-height: 1.8;
}

@media (max-width: 768px) {
	.author-box {
		padding: 25px 15px 20px;
	}

	.author-box-name {
		font-size: var(--font-base);
	}

	.author-box-bio {
		font-size: var(--font-xs);
		line-height: 1.7;
	}
}

.comments-area {
	margin-top: 2.5rem;
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* 7. Content
   Everything is wrapped in :where() so it has ZERO specificity: any
   block plugin's own CSS (GenerateBlocks, Kadence, Spectra, core
   blocks, etc.) always wins over these base styles automatically.
--------------------------------------------------------------*/
.entry-content {
	overflow-wrap: break-word;
}

:where(.entry-content :is(p, ul, ol, dl, blockquote, figure, pre, details)) {
	margin-top: 0;
	margin-bottom: 1.25em;
}

:where(.entry-content :is(h2, h3, h4, h5, h6)) {
	margin-top: 2em;
	margin-bottom: 0.6em;
}

:where(.entry-content :is(ul, ol)) {
	padding-left: 1.5em;
}

:where(.entry-content li) {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}

:where(.entry-content blockquote) {
	margin-left: 0;
	margin-right: 0;
	padding: 0.75rem 1.25rem;
	background: var(--alx-soft);
	border-left: 4px solid var(--alx-primary);
	border-radius: 0 var(--alx-radius) var(--alx-radius) 0;
}

:where(.entry-content blockquote > :last-child) {
	margin-bottom: 0;
}

:where(.entry-content :not(pre) > code) {
	padding: 0.1em 0.35em;
	background: var(--alx-soft);
	border: 1px solid var(--alx-border);
	border-radius: 5px;
	font-family: var(--alx-mono);
	font-size: 0.875em;
}

:where(pre) {
	overflow: auto;
	padding: 1rem 1.25rem;
	background: var(--alx-code-bg);
	color: var(--alx-code-fg);
	border-radius: var(--alx-radius);
	font: var(--font-sm) / 1.65 var(--alx-mono);
	tab-size: 4;
}

:where(pre code) {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

:where(.entry-content table) {
	width: 100%;
	border-collapse: collapse;
}

:where(.entry-content :is(th, td)) {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--alx-border);
	text-align: left;
}

:where(.entry-content th) {
	background: var(--alx-soft);
}

.entry-content .wp-block-table :is(th, td) {
	border-color: var(--alx-border);
}

.entry-content > table,
.wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

:where(.entry-content figcaption, .wp-caption-text) {
	margin-top: 0.5rem;
	color: var(--alx-muted);
	font-size: var(--font-sm);
	text-align: center;
}

.entry-content iframe {
	max-width: 100%;
}

/* 8. Widgets
--------------------------------------------------------------*/
.widget-area {
	padding: 1.25rem;
	background: var(--alx-bg);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
}

.widget {
	margin: 0 0 0.75rem;
	padding: 0 0 0.75rem;
}

.widget:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.widget > :last-child {
	margin-bottom: 0;
}

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

.widget li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--alx-border);
}

.widget li:first-child {
	padding-top: 0;
}

.widget li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.widget a {
	color: var(--alx-text);
}

.widget a:hover {
	color: var(--alx-primary);
}

.widget .site-search input[type="search"] {
	background: var(--alx-bg);
}

/* Block widgets (the default in current WordPress): match the classic look. */
.widget :is(.wp-block-heading, .wp-block-search__label) {
	display: block;
	margin: 0 0 10px;
	color: var(--alx-heading);
	font-size: var(--font-xl);
	font-weight: 600;
	line-height: 1.2;
}

.widget .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.widget .wp-block-search__input {
	min-width: 0;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--alx-border);
	border-radius: 10px;
	background: var(--alx-bg);
	color: var(--alx-text);
	font: inherit;
	font-size: var(--font-sm);
}

.widget .wp-block-search__input:focus {
	outline: 0;
	border-color: var(--alx-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 255, 0.15);
}

.widget .wp-block-search__button {
	margin: 0;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 8px;
	background: var(--alx-primary);
	color: #fff;
	font: inherit;
	font-size: var(--font-sm);
	font-weight: 600;
	cursor: pointer;
}

.widget .wp-block-search__button:hover {
	background: var(--alx-primary-dark);
}

.widget :is(.wp-block-latest-posts__list, .wp-block-latest-comments, .wp-block-categories-list, .wp-block-archives-list) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 9. Comments
--------------------------------------------------------------*/
.comments-area {
	margin-top: 2rem;
}

.comment-respond {
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--alx-soft);
	border: 1px solid var(--alx-border);
	border-radius: var(--alx-radius);
}

.comment-respond > :last-child,
.comment-form > :last-child {
	margin-bottom: 0;
}

.comments-title,
.comment-reply-title {
	font-size: var(--font-xl);
}

.comment-reply-title {
	margin-top: 0;
}

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

.comment-list .children {
	margin-left: 1.25rem;
}

.comment-body {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--alx-border);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-bottom: 0.5rem;
	font-size: var(--font-xs);
	color: var(--alx-muted);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.comment-author .avatar {
	border-radius: 10px;
}

.comment-author .fn {
	color: var(--alx-heading);
	font-weight: 600;
	font-style: normal;
}

.comment-metadata a {
	color: inherit;
}

.reply a {
	font-size: var(--font-xs);
	font-weight: 600;
}

.comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--font-lg);
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--alx-border);
	border-radius: 8px;
	background: var(--alx-bg);
	color: var(--alx-text);
	font: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: 0;
	border-color: var(--alx-primary);
	box-shadow: 0 0 0 3px rgba(34, 113, 255, 0.15);
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.form-submit .submit {
	padding: 0.65rem 1.4rem;
	border: 0;
	border-radius: 8px;
	background: var(--alx-primary);
	color: #fff;
	font: inherit;
	font-size: var(--font-base);
	font-weight: 600;
	cursor: pointer;
}

.form-submit .submit:hover {
	background: var(--alx-primary-dark);
}

/* 10. Footer (full width; centred on smaller screens)
--------------------------------------------------------------*/
.site-footer {
	padding: 1rem;
	background: var(--alx-soft);
	border-top: 1px solid var(--alx-border);
	color: var(--alx-muted);
	font-size: var(--font-sm);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	color: var(--alx-muted);
}

.footer-navigation a:hover,
.footer-navigation .current-menu-item > a {
	color: var(--alx-primary);
}

@media (max-width: 768px) {
	.footer-inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.footer-navigation ul {
		justify-content: center;
	}
}

/* 11. Full width template
--------------------------------------------------------------*/
.no-sidebar .site-layout {
	max-width: none;
	padding: 0;
}

/* Plain content keeps a readable measure; any block using the core
   wide/full alignment (alignwide/alignfull) is left alone. */
.no-sidebar .entry-content > :where(:not(.alignwide):not(.alignfull)) {
	max-width: var(--alx-content);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.no-sidebar .entry-content > .alignwide {
	max-width: var(--alx-container);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.no-sidebar .entry-content > .alignfull {
	max-width: none;
}

/* 12. WordPress alignment + captions
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin: 0.25rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.25rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin: 0 auto;
	clear: both;
}

.has-sidebar .entry-content .alignwide,
.has-sidebar .entry-content .alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-block-image img {
	height: auto;
}

.sticky,
.bypostauthor {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}