/*
Theme Name:   ArabFina
Theme URI:    https://arabfina.com
Description:  Child theme for ArabFina, built on Astra. All theme customisations live here so that updating Astra never overwrites them.
Author:       ArabFina
Template:     astra
Version:      1.2.0
Text Domain:  arabfina
*/

/* ===================================================================
   1. TOKENS
   One accent, one text colour, one spacing rhythm. Everything on the
   homepage is built from these, so a brand change is a few lines here
   rather than 40 inline style attributes in the page content.
   =================================================================== */

:root {
	/* Brand. The pink was already in use on the homepage CTAs. */
	--af-accent:        #dd277b;
	--af-accent-dark:   #b81d63;
	--af-accent-tint:   #fdf2f7;

	/* Ink. Reusing Astra's slate so the new work matches the rest. */
	--af-ink:           #1e293b;
	--af-ink-soft:      #475569;
	--af-ink-faint:     #64748b;

	/* Surfaces */
	--af-surface:       #ffffff;
	--af-surface-alt:   #f8fafc;
	--af-border:        #e2e8f0;

	/* Spacing scale (4px base) */
	--af-s1:  0.25rem;
	--af-s2:  0.5rem;
	--af-s3:  0.75rem;
	--af-s4:  1rem;
	--af-s6:  1.5rem;
	--af-s8:  2rem;
	--af-s12: 3rem;
	--af-s16: 4rem;

	/* Type scale */
	--af-text-sm:   0.875rem;
	--af-text-base: 1rem;
	--af-text-lg:   1.125rem;
	--af-text-xl:   1.375rem;
	--af-text-2xl:  1.75rem;
	--af-text-3xl:  2.25rem;

	--af-radius:    12px;
	--af-radius-sm: 8px;

	/* Readable measure. Astra ships a 1920px container, which lets body
	   text run the full width of a desktop monitor. */
	--af-measure: 1180px;
}

/* ===================================================================
   2. READABILITY
   Constrain the content column. This is the single biggest legibility
   change on the site: Arabic body copy was running to 1920px.
   =================================================================== */

.ast-container {
	max-width: var(--af-measure);
}

/* Article body gets a narrower measure again - long-form Arabic reads
   badly much beyond this. */
.single-post .entry-content > * {
	max-width: 46rem;
	margin-inline: auto;
}

.single-post .entry-content > .alignwide,
.single-post .entry-content > .alignfull,
.single-post .entry-content > figure,
.single-post .entry-content > table,
.single-post .entry-content > .wp-block-table {
	max-width: none;
}

/* Tables and wide blocks scroll rather than break the layout. */
.entry-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* ===================================================================
   3. HOMEPAGE COMPONENTS
   All scoped under .af- so nothing here can affect the other 900+
   pages until it is deliberately used.
   =================================================================== */

.af-home {
	color: var(--af-ink);
	line-height: 1.75;
}

.af-home section { margin-block: var(--af-s16); }
.af-home section:first-child { margin-block-start: var(--af-s4); }
.af-home section:has(> .af-hero),
.af-home section.af-hero { margin-block-end: var(--af-s12); }

.af-section-head {
	margin-block-end: var(--af-s8);
}

.af-section-head h2 {
	font-size: var(--af-text-2xl);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--af-s2);
	color: var(--af-ink);
}

.af-section-head p {
	margin: 0;
	color: var(--af-ink-faint);
	font-size: var(--af-text-base);
	max-width: 56ch;
}

/* --- Hero ------------------------------------------------------- */

.af-hero {
	text-align: center;
	/* Deliberately tighter than the other sections: the hero is a signpost,
	   not a destination, and at 3rem it was taking 410px of first-screen
	   space before any article was visible. */
	padding-block: var(--af-s6);
}

.af-hero h1 {
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, var(--af-text-3xl));
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 var(--af-s3);
	color: var(--af-ink);
}

.af-hero p {
	font-size: var(--af-text-lg);
	color: var(--af-ink-soft);
	max-width: 60ch;
	margin: 0 auto var(--af-s6);
}

/* --- Search ----------------------------------------------------- */

.af-search {
	max-width: 36rem;
	margin-inline: auto;
}

.af-search form {
	display: flex;
	gap: var(--af-s2);
	background: var(--af-surface);
	border: 2px solid var(--af-border);
	border-radius: 999px;
	padding: var(--af-s1);
	transition: border-color .15s ease;
}

.af-search form:focus-within { border-color: var(--af-accent); }

.af-search input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	padding: var(--af-s3) var(--af-s6);
	font: inherit;
	font-size: var(--af-text-base);
	color: var(--af-ink);
	min-width: 0;
}

.af-search input[type="search"]:focus { outline: none; }

.af-search button {
	border: 0;
	background: var(--af-accent);
	color: #fff;
	border-radius: 999px;
	padding: var(--af-s3) var(--af-s8);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}

.af-search button:hover { background: var(--af-accent-dark); }

/* --- Grids ------------------------------------------------------ */

.af-grid {
	display: grid;
	gap: var(--af-s6);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.af-grid--posts {
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

/* --- Post card -------------------------------------------------- */

.af-post {
	display: flex;
	flex-direction: column;
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}

.af-post:hover {
	border-color: var(--af-accent);
	transform: translateY(-2px);
}

.af-post__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--af-surface-alt);
	overflow: hidden;
}

.af-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.af-post__body {
	padding: var(--af-s4) var(--af-s6) var(--af-s6);
	display: flex;
	flex-direction: column;
	gap: var(--af-s2);
	flex: 1;
}

.af-post__cat {
	font-size: var(--af-text-sm);
	font-weight: 700;
	color: var(--af-accent);
}

.af-post__title {
	font-size: var(--af-text-lg);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.af-post__title a {
	color: var(--af-ink);
	text-decoration: none;
}

.af-post__title a:hover { color: var(--af-accent); }

/* --- Topic card ------------------------------------------------- */

.af-topic {
	display: flex;
	flex-direction: column;
	gap: var(--af-s3);
	padding: var(--af-s6);
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background .15s ease;
}

.af-topic:hover {
	border-color: var(--af-accent);
	background: var(--af-accent-tint);
}

.af-topic__icon {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--af-accent);
	flex: none;
}

.af-topic__icon svg { width: 100%; height: 100%; display: block; }

.af-topic h3 {
	font-size: var(--af-text-lg);
	font-weight: 700;
	margin: 0;
	color: var(--af-ink);
}

.af-topic p {
	margin: 0;
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	line-height: 1.7;
}

/* --- Tools band ------------------------------------------------- */

.af-band {
	background: var(--af-surface-alt);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: var(--af-s12) var(--af-s8);
}

.af-tool {
	display: flex;
	flex-direction: column;
	gap: var(--af-s3);
	align-items: flex-start;
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	padding: var(--af-s6);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease;
}

.af-tool:hover { border-color: var(--af-accent); }

.af-tool__icon { width: 1.75rem; height: 1.75rem; color: var(--af-accent); }
.af-tool__icon svg { width: 100%; height: 100%; display: block; }

.af-tool h3 {
	font-size: var(--af-text-base);
	font-weight: 700;
	margin: 0;
	color: var(--af-ink);
}

.af-tool p {
	margin: 0;
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
}

/* --- Buttons ---------------------------------------------------- */

.af-btn {
	display: inline-block;
	background: var(--af-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: var(--af-s3) var(--af-s8);
	border-radius: var(--af-radius-sm);
	transition: background .15s ease;
}

.af-btn:hover { background: var(--af-accent-dark); color: #fff; }

.af-btn--ghost {
	background: transparent;
	color: var(--af-accent);
	border: 2px solid var(--af-border);
}

.af-btn--ghost:hover {
	background: var(--af-accent-tint);
	border-color: var(--af-accent);
	color: var(--af-accent-dark);
}

.af-more {
	text-align: center;
	margin-block-start: var(--af-s8);
}

/* --- Offer band (the one commercial ask) ------------------------ */

.af-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--af-s6);
	background: var(--af-ink);
	color: #fff;
	border-radius: var(--af-radius);
	padding: var(--af-s8) var(--af-s12);
}

.af-offer h2 {
	font-size: var(--af-text-xl);
	font-weight: 700;
	margin: 0 0 var(--af-s2);
	color: #fff;
}

.af-offer p {
	margin: 0;
	color: #cbd5e1;
	font-size: var(--af-text-base);
	max-width: 52ch;
}

.af-offer .af-btn { background: var(--af-accent); }
.af-offer .af-btn:hover { background: var(--af-accent-dark); }

/* --- Responsive ------------------------------------------------- */

@media (max-width: 782px) {
	.af-home section { margin-block: var(--af-s12); }
	.af-band { padding: var(--af-s8) var(--af-s4); }
	.af-offer { padding: var(--af-s8) var(--af-s6); }
	.af-search form { flex-wrap: wrap; border-radius: var(--af-radius); }
	.af-search input[type="search"] { flex-basis: 100%; }
	.af-search button { flex: 1; }
}

/* Placeholder for the 120 posts with no featured image, so the grid keeps
   even row heights instead of collapsing those cards. */
.af-post__thumb--empty {
	display: grid;
	place-items: center;
	background: var(--af-accent-tint);
}

.af-post__placeholder {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--af-accent);
	opacity: .45;
}

.af-post__placeholder svg { width: 100%; height: 100%; display: block; }

/* Secondary action on the dark offer band. */
.af-btn--on-dark {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .35);
	color: #fff;
}

.af-btn--on-dark:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.af-offer__actions {
	display: flex;
	gap: var(--af-s3);
	flex-wrap: wrap;
}

/* ===================================================================
   4. SITE-WIDE AESTHETIC PASS
   Astra ships a blue (#046bd2) accent while the brand uses pink
   (#dd277b). Both were in play on every page. These rules settle on
   the brand colour for anything interactive, and tidy the archive,
   sidebar and article furniture.
   =================================================================== */

:root {
	--ast-global-color-0: var(--af-accent);
	--ast-global-color-1: var(--af-accent-dark);
}

/* --- Links ------------------------------------------------------ */

.entry-content a:not(.af-btn):not(.wp-block-button__link),
.ast-archive-description a,
.widget a:hover {
	color: var(--af-accent-dark);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:not(.af-btn):not(.wp-block-button__link):hover {
	color: var(--af-accent);
}

/* --- Buttons: brand, not Astra blue ----------------------------- */

.wp-block-button__link,
.ast-button,
button[type="submit"],
input[type="submit"],
.widget .wp-block-button__link {
	background-color: var(--af-accent);
	border-color: var(--af-accent);
	border-radius: var(--af-radius-sm);
	font-weight: 700;
}

.wp-block-button__link:hover,
.ast-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--af-accent-dark);
	border-color: var(--af-accent-dark);
}

/* --- Category archive header ------------------------------------ */

.ast-archive-description {
	background: var(--af-surface-alt);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: var(--af-s8);
	margin-bottom: var(--af-s8);
}

.ast-archive-description .ast-archive-title,
.ast-archive-description h1 {
	font-size: var(--af-text-2xl);
	line-height: 1.35;
	margin-bottom: var(--af-s4);
}

.ast-archive-description p {
	line-height: 1.85;
	margin-bottom: var(--af-s4);
}

/* The merged curated links arrive as <br>-separated <strong> lines,
   because wp_filter_kses strips <ul>/<li> from term descriptions.
   Give them the rhythm of a list without the markup. */
.ast-archive-description p:last-child strong {
	display: block;
	padding: var(--af-s2) 0 var(--af-s2) 0;
	padding-inline-start: var(--af-s6);
	position: relative;
	font-weight: 600;
	border-top: 1px solid var(--af-border);
}

.ast-archive-description p:last-child strong::before {
	content: "←";
	position: absolute;
	inset-inline-start: 0;
	color: var(--af-accent);
	font-weight: 700;
}

.ast-archive-description p:last-child br { display: none; }

/* --- Archive post list ------------------------------------------ */

/* On a category archive every item repeats the category you are already
   browsing. Useful on search and the blog index, noise here. */
.archive.category .ast-taxonomy-container,
.archive.category .cat-links {
	display: none;
}

.archive .ast-article-post,
.search .ast-article-post {
	border-bottom: 1px solid var(--af-border);
	padding-bottom: var(--af-s6);
	margin-bottom: var(--af-s6);
}

.archive .ast-article-post:last-child { border-bottom: 0; }

/* Keep archive thumbnails a consistent shape rather than whatever the
   source image happens to be. */
.archive .post-thumb img,
.search .post-thumb img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	border-radius: var(--af-radius-sm);
}

.archive .entry-title,
.search .entry-title {
	font-size: var(--af-text-xl);
	line-height: 1.45;
}

/* --- Sidebar ----------------------------------------------------- */

.widget-area .widget {
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: var(--af-s6);
	margin-bottom: var(--af-s6);
}

.widget-area .widget-title,
.widget-area .wp-block-heading {
	font-size: var(--af-text-base);
	font-weight: 700;
	letter-spacing: .01em;
	margin-bottom: var(--af-s4);
	padding-bottom: var(--af-s3);
	border-bottom: 1px solid var(--af-border);
}

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

.widget-area li {
	padding: var(--af-s2) 0;
	line-height: 1.6;
	font-size: var(--af-text-sm);
}

.widget-area li + li { border-top: 1px solid var(--af-border); }

.widget-area a {
	color: var(--af-ink);
	text-decoration: none;
}

.widget-area a:hover { color: var(--af-accent); }

/* Sidebar search was an unstyled input beside a small blue square. */
.widget-area .wp-block-search__inside-wrapper {
	border: 2px solid var(--af-border);
	border-radius: 999px;
	padding: 2px;
	gap: 0;
}

.widget-area .wp-block-search__inside-wrapper:focus-within { border-color: var(--af-accent); }

.widget-area .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: var(--af-s2) var(--af-s4);
	font-size: var(--af-text-sm);
}

.widget-area .wp-block-search__input:focus { outline: none; }

.widget-area .wp-block-search__button {
	background: var(--af-accent);
	border: 0;
	color: #fff;
	border-radius: 999px;
	padding: var(--af-s2) var(--af-s4);
	margin: 0;
	font-size: var(--af-text-sm);
	font-weight: 700;
}

.widget-area .wp-block-search__button:hover { background: var(--af-accent-dark); }

.widget-area .wp-block-search__button.has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0;
}

.widget-area .wp-block-search__button svg {
	fill: #fff;
	width: 1.1em;
	height: 1.1em;
	min-width: 0;
	min-height: 0;
}

/* --- Article furniture ------------------------------------------- */

.single-post .entry-title {
	line-height: 1.3;
	margin-bottom: var(--af-s3);
}

.single-post .entry-content { line-height: 1.95; }

.single-post .entry-content h2 {
	margin-top: var(--af-s12);
	margin-bottom: var(--af-s4);
	line-height: 1.4;
}

.single-post .entry-content h3 {
	margin-top: var(--af-s8);
	margin-bottom: var(--af-s3);
	line-height: 1.45;
}

.single-post .post-thumb img {
	border-radius: var(--af-radius);
	width: 100%;
	height: auto;
}

/* Table of contents */
#ez-toc-container {
	background: var(--af-surface-alt);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: var(--af-s6);
	box-shadow: none;
}

#ez-toc-container a { color: var(--af-ink); text-decoration: none; }
#ez-toc-container a:hover { color: var(--af-accent); }

/* The visitor counter is site furniture, not a headline. */
.pvc-container {
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
}

/* The descriptor demoted out of the archive H1. */
.af-archive-sub {
	font-size: var(--af-text-lg);
	color: var(--af-ink-faint);
	line-height: 1.6;
	margin: calc(var(--af-s4) * -1) 0 var(--af-s4);
}

/* --- Sidebar search button -------------------------------------- */

/* The widget's button label is a single U+FE0E (variation selector), an
   invisible character - so the button rendered as a blank circle. Supply a
   real label in CSS rather than editing the widget content. */
.widget-area .wp-block-search__button {
	position: relative;
	font-size: 0;
	min-width: 4.5rem;
	padding: var(--af-s2) var(--af-s4);
}

.widget-area .wp-block-search__button::after {
	content: "بحث";
	font-size: var(--af-text-sm);
	font-weight: 700;
	color: #fff;
}

/* The widget hard-codes an inline width on the wrapper; let it fill the card. */
.widget-area .wp-block-search__inside-wrapper {
	width: 100% !important;
	max-width: 100%;
}

.widget-area .wp-block-search__label {
	display: block;
	font-size: var(--af-text-sm);
	font-weight: 700;
	margin-bottom: var(--af-s2);
}

/* --- Sidebar buttons: let long labels wrap inside the pill ------- */

.widget-area .wp-block-button__link,
.widget-area .wp-block-button {
	width: 100%;
}

.widget-area .wp-block-button__link {
	display: block;
	text-align: center;
	white-space: normal;
	line-height: 1.5;
	padding: var(--af-s3) var(--af-s4);
	box-sizing: border-box;
}

.widget-area .wp-block-buttons {
	display: grid;
	gap: var(--af-s3);
}

/* H1 supplied to pages that had none. */
.af-page-title {
	font-size: var(--af-text-2xl);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--af-s6);
	color: var(--af-ink);
}

/* ===================================================================
   5. ARTICLE TEMPLATE
   919 of the 922 URLs are articles, so this is the page that matters
   most. Astra's defaults left the meta line, table of contents, post
   navigation and related posts unstyled.
   =================================================================== */

/* --- Entry header ----------------------------------------------- */

.single-post .entry-header { margin-bottom: var(--af-s6); }

.single-post .entry-meta,
.single-post .entry-meta * {
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	font-weight: 400;
	line-height: 1.7;
}

.single-post .entry-meta a {
	color: var(--af-ink-soft);
	text-decoration: none;
	font-weight: 600;
}

.single-post .entry-meta a:hover { color: var(--af-accent); }

/* The visitor counter sat on its own line, right-aligned, competing with
   the heading below it. Fold it in with the rest of the meta. */
.single-post .pvc-container {
	display: inline-flex;
	align-items: center;
	gap: var(--af-s1);
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	margin: 0 0 var(--af-s6);
}

/* --- Featured image --------------------------------------------- */

.single-post .post-thumb-img-content img,
.single-post .ast-single-post-featured-section img {
	border-radius: var(--af-radius);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- Table of contents ------------------------------------------ */

#ez-toc-container {
	background: var(--af-surface-alt);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	padding: var(--af-s6);
	box-shadow: none;
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}

#ez-toc-container .ez-toc-title {
	font-size: var(--af-text-base);
	font-weight: 700;
	color: var(--af-ink);
}

#ez-toc-container ul { margin: var(--af-s3) 0 0; }

#ez-toc-container li {
	margin: 0;
	padding: var(--af-s2) 0;
	line-height: 1.7;
}

#ez-toc-container li + li { border-top: 1px solid var(--af-border); }

#ez-toc-container a {
	color: var(--af-ink-soft);
	text-decoration: none;
	font-size: var(--af-text-sm);
}

#ez-toc-container a:hover { color: var(--af-accent); }

/* --- Post navigation (previous / next) --------------------------- */

.single-post .post-navigation,
.single-post .ast-single-post-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--af-s4);
	margin-block: var(--af-s12);
	max-width: 46rem;
	margin-inline: auto;
	border-top: 1px solid var(--af-border);
	padding-top: var(--af-s8);
}

.single-post .post-navigation a,
.single-post .ast-single-post-navigation a {
	display: flex;
	flex-direction: column;
	gap: var(--af-s2);
	padding: var(--af-s4);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius-sm);
	text-decoration: none;
	color: var(--af-ink);
	transition: border-color .15s ease;
}

.single-post .post-navigation a:hover,
.single-post .ast-single-post-navigation a:hover { border-color: var(--af-accent); }

.single-post .post-navigation p,
.single-post .ast-single-post-navigation p {
	margin: 0;
	font-size: var(--af-text-sm);
	font-weight: 600;
	line-height: 1.6;
}

/* --- Related posts ----------------------------------------------- */

.ast-single-related-posts-container {
	background: var(--af-surface-alt);
	border-top: 1px solid var(--af-border);
	padding-block: var(--af-s12);
	margin-top: var(--af-s12);
}

.ast-related-posts-title-section { margin-bottom: var(--af-s8); }

.ast-related-posts-title {
	font-size: var(--af-text-2xl);
	font-weight: 700;
	margin: 0;
	color: var(--af-ink);
}

.ast-related-posts-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--af-s6);
}

.ast-related-post {
	background: var(--af-surface);
	border: 1px solid var(--af-border);
	border-radius: var(--af-radius);
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
	margin: 0;
	padding: 0;
	width: auto;
}

.ast-related-post:hover {
	border-color: var(--af-accent);
	transform: translateY(-2px);
}

.ast-related-post .ast-related-posts-inner-section { padding: 0; }

/* Astra serves 150x150 square thumbnails here; crop them to the same
   shape the homepage and archive cards use. */
.ast-related-post-featured-section img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.ast-related-post .related-entry-header,
.ast-related-post .entry-header {
	padding: var(--af-s4) var(--af-s6) var(--af-s6);
	margin: 0;
}

.ast-related-post-title {
	font-size: var(--af-text-base);
	font-weight: 700;
	line-height: 1.55;
	margin: 0;
}

.ast-related-post-title a {
	color: var(--af-ink);
	text-decoration: none;
}

.ast-related-post-title a:hover { color: var(--af-accent); }

.ast-related-post .entry-meta,
.ast-related-post .ast-related-post-excerpt { display: none; }

@media (max-width: 782px) {
	.single-post .post-navigation,
	.single-post .ast-single-post-navigation { grid-template-columns: 1fr; }
}

/* Related posts without a featured image (120 of the 922 posts have none)
   get the same tinted placeholder the homepage cards use, so the row keeps
   even heights. Astra omits the has-post-thumbnail class on those. */
.ast-related-post:not(.has-post-thumbnail)::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--af-accent-tint);
}

/* ===================================================================
   6. FOOTER
   =================================================================== */

.af-footer {
	color: var(--af-ink);
	padding-block: var(--af-s12) var(--af-s8);
	/* Astra renders this row full-width; align it with the content column
	   so the brand text is not flush against the viewport edge. */
	max-width: var(--af-measure);
	margin-inline: auto;
	padding-inline: var(--af-s6);
	box-sizing: border-box;
}

.af-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--af-s8);
	align-items: start;
}

.af-footer__name {
	font-size: var(--af-text-xl);
	font-weight: 800;
	margin: 0 0 var(--af-s2);
	color: var(--af-ink);
}

.af-footer__tag {
	margin: 0 0 var(--af-s4);
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	line-height: 1.8;
	max-width: 40ch;
}

.af-footer__col h2 {
	font-size: var(--af-text-base);
	font-weight: 700;
	margin: 0 0 var(--af-s4);
	color: var(--af-ink);
}

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

.af-footer__col li { padding: var(--af-s1) 0; }

.af-footer a {
	color: var(--af-ink-soft);
	text-decoration: none;
	font-size: var(--af-text-sm);
	line-height: 1.9;
}

.af-footer a:hover {
	color: var(--af-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.af-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-s2) var(--af-s4);
}

.af-footer__social a {
	font-size: var(--af-text-sm);
	font-weight: 600;
	color: var(--af-ink-soft);
}

.af-footer__base {
	margin-top: var(--af-s8);
	padding-top: var(--af-s6);
	border-top: 1px solid var(--af-border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--af-s4);
	align-items: baseline;
	justify-content: space-between;
}

/* On a site about money, the "this is not advice" line is not decoration. */
.af-footer__disclaimer {
	margin: 0;
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	line-height: 1.8;
	max-width: 80ch;
	flex: 1 1 28rem;
}

.af-footer__copy {
	margin: 0;
	font-size: var(--af-text-sm);
	color: var(--af-ink-faint);
	white-space: nowrap;
}

/* Astra pads footer widgets heavily; the footer supplies its own rhythm. */
.site-footer .footer-widget-area .widget,
.site-footer .widget_block {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 921px) {
	.af-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--af-s8) var(--af-s6); }
	.af-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 544px) {
	.af-footer__grid { grid-template-columns: 1fr; }
	.af-footer__copy { white-space: normal; }
}

/* ===================================================================
   7. HEADER
   =================================================================== */

/* The logo sat flush against the site title — the title's right edge and the
   logo's left edge were both at 1214px. The identity block is inline-flex, so
   a gap works in both directions without juggling inline-start/end. */
.ast-site-identity {
	gap: var(--af-s4);
}

.ast-site-identity .site-title,
.ast-site-identity .site-description {
	margin: 0;
}

/* Social icons were in a 98px-wide block container, so five inline items
   wrapped into a ragged 2 + 2 + 1 stack. One row, centred on the header. */
.ast-header-social-1-wrap,
.ast-header-social-wrap {
	width: auto;
}

.header-social-inner-wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--af-s3);
	width: auto;
}

.header-social-inner-wrap .ast-builder-social-element {
	margin: 0;
	flex: none;
}

.header-social-inner-wrap svg {
	width: 1.05em;
	height: 1.05em;
}