/*
Theme Name: Barq
Theme URI: https://barq-rs.com
Author: Barq
Author URI: https://barq-rs.com
Description: Theme for the website of the Barq centre for studies and consulting. Five separate content types (daily analysis, political analysis, situation assessment, article review, articles) in the centre's visual identity, and a front page that shows the latest headlines first. It works on phones and on desktop screens.
Version: 1.3.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Update URI: false
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: barq
Domain Path: /languages
Tags: rtl-language-support, translation-ready, custom-logo, custom-menu, editor-style, featured-images, block-styles
*/

/* stylelint-disable selector-class-pattern, no-descending-specificity -- BEM class names; component-grouped rules (D-022). */

/*
 * Class names follow BEM (block__element--modifier) throughout the theme templates, and rules are grouped by
 * component: the selector pairs flagged by no-descending-specificity target different components or are
 * deliberate specificity overrides. See docs/decisions.md D-022.
 */

/* ==========================================================
   1. Font
   ========================================================== */
@font-face {
	font-family: Cairo;
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url(assets/fonts/cairo-regular.woff2) format("woff2");
}

@font-face {
	font-family: Cairo;
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url(assets/fonts/cairo-semibold.woff2) format("woff2");
}

@font-face {
	font-family: Cairo;
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url(assets/fonts/cairo-bold.woff2) format("woff2");
}

@font-face {
	font-family: Cairo;
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url(assets/fonts/cairo-black.woff2) format("woff2");
}

/* ==========================================================
   2. Brand colours (the palette is limited to this family)
   ========================================================== */
:root {
	--navy: #123a5c;
	--navy-deep: #0b2740;
	--blue: #50a5e0;
	--blue-ink: #1f6fa8; /* Blue for text on white, with sufficient contrast. */
	--blue-soft: #9ccbec;
	--tint: #edf5fb;
	--paper: #f6fafd;
	--ink: #1a2733;
	--muted: #5c6977;
	--gray: #64707d; /* 4.5:1 or more on white, paper and tint (WCAG 1.4.3, P7-L3). */
	--hair: #e1e9f1;
	--white: #fff;

	--radius: 6px;
	--radius-lg: 10px;
	--shadow: 0 1px 2px rgba(11, 39, 64, 0.05), 0 4px 14px rgba(11, 39, 64, 0.05);
	--nav-sticky-h: calc(1.8rem + 25px); /* Height of the sticky navigation (R-08). */

	--wrap: 1240px;

	/*
	 * Reading column and article text size per text direction (D-045). Cairo's Latin letters are narrower,
	 * so left-to-right text gets a shorter column for the same characters per line.
	 * Up to 1023 px: Arabic 36rem at 20 px (66-68 characters), English 30rem at 18 px (62-66).
	 */
	--wrap-rtl: 36rem;
	--wrap-ltr: 30rem;
	--prose-rtl: 1.125rem; /* 18 px on phones. */
	--prose-ltr: 1.0625rem; /* 17 px on phones. */
	--wrap-text: var(--wrap-rtl);
	--gutter: 16px;
}

@media (min-width: 768px) {

	:root {
		--gutter: 24px;
		--prose-rtl: 1.25rem;
		--prose-ltr: 1.125rem;
	}
}

/* Desktop (D-045): Arabic 22 px in 44rem (704 px, about 75 characters), English 18 px in 34rem (544 px, 71-74). */
@media (min-width: 1024px) {

	:root {
		--wrap-rtl: 44rem;
		--wrap-ltr: 34rem;
		--prose-rtl: 1.375rem;
	}
}

/* The page direction sets the column; on articles and pages the content's own direction overrides it (below). */
:root:not([dir="rtl"]) {
	--wrap-text: var(--wrap-ltr);
}

.site-main:has(.prose[dir="rtl"]) {
	--wrap-text: var(--wrap-rtl);
}

.site-main:has(.prose[dir="ltr"]) {
	--wrap-text: var(--wrap-ltr);
}

/* Without :has(): the text itself still keeps its own line length. */
.prose[dir="rtl"] {
	max-width: var(--wrap-rtl);
}

.prose[dir="ltr"] {
	max-width: var(--wrap-ltr);
}

/* ==========================================================
   3. Product marks: one colour from the navy and blue family and one
   icon per product
   ========================================================== */
.is-report,
.badge--report,
.page-head--report {
	--m-bg: var(--navy);
	--m-fg: #fff;
	--m-line: var(--navy);
	--m-border: var(--navy);
}

.is-analysis,
.badge--analysis,
.page-head--analysis {
	--m-bg: var(--blue);
	--m-fg: var(--navy-deep);
	--m-line: var(--blue);
	--m-border: var(--blue);
}

.is-assessment,
.badge--assessment,
.page-head--assessment {
	--m-bg: var(--navy-deep);
	--m-fg: #fff;
	--m-line: var(--navy-deep);
	--m-border: var(--navy-deep);
}

.is-reading,
.badge--reading,
.page-head--reading {
	--m-bg: var(--tint);
	--m-fg: var(--blue-ink);
	--m-line: var(--blue-soft);
	--m-border: var(--blue-soft);
}

.is-article,
.badge--article,
.page-head--article {
	--m-bg: #fff;
	--m-fg: var(--navy);
	--m-line: var(--blue-ink);
	--m-border: var(--navy);
}

/* ==========================================================
   4. Base
   ========================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: Cairo, "Segoe UI", Tahoma, sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a {
	color: var(--blue-ink);
	text-decoration: none;
}

a:hover {
	color: var(--navy);
}

h1,
h2,
h3,
h4 {
	font-weight: 800;
	line-height: 1.4; /* Headings 1.3-1.4 (D-036). */
	color: var(--navy);
	margin: 0;
}

p {
	margin: 0 0 1em;
}

button {
	font: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--blue-ink);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Focus on dark areas: a light outline keeps 3:1 or more against navy (WCAG 1.4.11). */
.topbar :focus-visible,
.nav :focus-visible,
.about-strip :focus-visible,
.question :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--blue-soft);
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--text {
	max-width: calc(var(--wrap-text) + var(--gutter) * 2);
}

.section {
	padding-block: 32px 56px;
}

/* Legacy archive bar (D-048): navy on tint, 11:1. Printed with the page, so it never shifts the layout. */
.legacy-note {
	margin-block-end: 22px;
	padding: 10px 16px;
	background: var(--tint);
	color: var(--navy);
	border-inline-start: 4px solid var(--blue);
	border-radius: var(--radius);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
}

.ico {
	flex: none;
}

/* The arrow icon points "forward" in right-to-left text; mirror it for left-to-right languages. */
html:not([dir="rtl"]) .ico--arrow {
	transform: scaleX(-1);
}

.skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 8px;
	z-index: 100;
	background: var(--navy);
	color: #fff;
	padding: 8px 16px;
	border-radius: 6px;
}

.skip:focus {
	inset-inline-start: 8px;
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================
   5. Buttons and badges
   ========================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	border: 1.5px solid transparent;
	transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}

.btn--primary {
	background: var(--blue);
	color: var(--navy-deep);
}

.btn--primary:hover {
	background: #6bb4e6;
	color: var(--navy-deep);
}

.btn--ghost {
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.btn--ghost:hover {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.btn--ghost-dark {
	border-color: var(--hair);
	color: var(--navy);
}

.btn--ghost-dark:hover {
	border-color: var(--navy);
	color: var(--navy);
}

.btn--light {
	background: #fff;
	color: var(--navy);
}

.btn--light:hover {
	background: var(--tint);
	color: var(--navy);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-block: 1px;
	padding-inline: 10px 8px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.8;
	background: var(--m-bg);
	color: var(--m-fg);
	border: 1px solid var(--m-border);
}

a.badge:hover {
	color: var(--m-fg);
	filter: brightness(1.05);
}

/* ==========================================================
   6. Header
   ========================================================== */
.topbar {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, 0.78);
	font-size: 1rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
}

.socials.socials--top a {
	width: 28px;
	height: 28px;
	border: 0;
	color: rgba(255, 255, 255, 0.8);
}

.socials--top a:hover {
	color: var(--blue);
}

.socials--top {
	gap: 2px;
}

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--hair);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 84px;
}

/* Brand block: the mark never shrinks or crops; the text may shrink and wrap on very narrow screens
   or with a large browser font, so the header buttons always stay on screen (D-034). */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--navy);
	flex: 0 1 auto;
	min-width: 0;
}

.brand:hover {
	color: var(--navy);
}

.brand__mark {
	flex: none;
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.brand__name {
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.25; /* Was 1.15 for both lines: Arabic descenders and ascenders touched (1.1.2 defect). */
}

.brand__sub {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.site-header__search {
	margin-inline-start: auto;
	width: min(340px, 100%);
}

.site-header__tools {
	display: none;
	flex: none;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: none;
	border: 0;
	color: var(--navy);
}

.icon-btn:hover {
	background: var(--tint);
}

.nav-toggle__close {
	display: none;
}

.site-search {
	border-top: 1px solid var(--hair);
	background: var(--paper);
	padding-block: 12px;
}

/* Section navigation */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--navy);
	box-shadow: 0 2px 10px rgba(11, 39, 64, 0.12);
}

.admin-bar .nav {
	top: 32px;
}

/*
 * Anchor and skip-link targets stop below the sticky navigation (WCAG 2.4.11, R-08). --nav-sticky-h is the
 * nav's height: one line of a .nav__list link (1.8rem) plus its 11px padding twice and 3px border, so it
 * follows the reader's font size (defined in :root, section 2). Up to 900px the navigation is not sticky, so nothing
 * covers a target.
 */
@media (min-width: 901px) {

	html {
		scroll-padding-top: var(--nav-sticky-h);
	}

	html:has(> body.admin-bar) {
		scroll-padding-top: calc(var(--nav-sticky-h) + var(--wp-admin--admin-bar--height, 32px));
	}
}

.nav__inner {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scrollbar-width: none;
}

.nav__inner::-webkit-scrollbar {
	display: none;
}

.nav__home,
.nav__list a {
	display: block;
	padding: 11px 14px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
}

.nav__home:hover,
.nav__list a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.home .nav__home,
.nav__list .is-current > a,
.nav__list .current-menu-item > a,
.nav__list .current-menu-ancestor > a {
	color: #fff;
	border-bottom-color: var(--blue);
}

.nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

@media (max-width: 900px) {

	.site-header__inner {
		min-height: 66px;
	}

	.brand__mark {
		width: 40px;
		height: 40px;
	}

	.brand__name {
		font-size: 1.5rem;
	}

	.brand__sub {
		font-size: 0.875rem;
	}

	.site-header__search {
		display: none;
	}

	.site-header__tools {
		display: flex;
	}

	.topbar__date {
		font-size: 1rem;
	}

	.nav {
		position: static;
		display: none;
		box-shadow: none;
	}

	.nav-open .nav {
		display: block;
	}

	.nav-open .nav-toggle__open {
		display: none;
	}

	.nav-open .nav-toggle__close {
		display: inline;
	}

	.nav__inner {
		flex-direction: column;
		padding-block: 6px;
	}

	.nav__list {
		flex-direction: column;
	}

	.nav__home,
	.nav__list a {
		font-size: 1rem;
		padding: 12px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.home .nav__home,
	.nav__list .is-current > a {
		border-bottom-color: rgba(255, 255, 255, 0.1);
		color: var(--blue-soft);
	}
}

@media (max-width: 782px) {

	.admin-bar .nav {
		top: 0;
	}
}

.socials {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.socials a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--hair);
	color: var(--navy);
}

.socials a:hover {
	border-color: var(--blue);
	color: var(--blue-ink);
}

/* ==========================================================
   7. Search
   ========================================================== */
.search-form {
	display: flex;
	max-width: 640px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 999px;
	overflow: hidden;
}

.search-form:focus-within {
	border-color: var(--blue);
	outline: 3px solid var(--blue-ink);
	outline-offset: 2px;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 7px 16px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: none;
	outline: none;
}

.search-form__btn {
	border: 0;
	background: var(--navy);
	color: #fff;
	padding-inline: 14px;
}

.search-form__btn:hover {
	background: var(--navy-deep);
}

/* ==========================================================
   8. Branded fallback for items without a valid image (D-066)
   ========================================================== */

/* The white mark centred on dark blue, filling the frame of the real image (card 16:9, row 4:3, cover 16:9). */
.media-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--navy-deep);
	border-radius: inherit;
}

.media-fallback .media-fallback__mark {
	width: 22%;
	min-width: 28px;
	max-width: 120px;
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

/* Single item: the same 16:9 frame as a barq-cover image across the cover width. */
.entry__cover--fallback .media-fallback {
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: var(--radius-lg);
}

/* ==========================================================
   9. Front page: latest headlines
   ========================================================== */
.lead {
	padding-block: 26px 34px;
	border-bottom: 1px solid var(--hair);
}

.lead__grid {
	display: grid;
	gap: 26px;
}

@media (min-width: 760px) {

	.lead__grid {
		grid-template-columns: 1.5fr 1fr;
	}
}

@media (min-width: 1100px) {

	.lead__grid {
		grid-template-columns: 1.65fr 1fr;
		gap: 28px;
	}
}

.mini-head {
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--navy);
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 2px solid var(--navy);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lead__list {
	display: flex;
	flex-direction: column;
}

/* ==========================================================
   10. Sections and grids
   ========================================================== */
.block {
	padding-block: 32px;
}

.block--tint {
	background: var(--paper);
	border-block: 1px solid var(--hair);
}

.block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--hair);
	position: relative;
}

.block__head::after {
	content: "";
	position: absolute;
	bottom: -2px;
	inset-inline-start: 0;
	width: 120px;
	height: 2px;
	background: var(--m-line, var(--navy));
}

.block__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	font-weight: 800;
	padding-bottom: 8px;
}

.block__title a {
	color: var(--navy);
}

.block__title a:hover {
	color: var(--blue-ink);
}

.block__icon {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--m-bg, var(--navy));
	color: var(--m-fg, #fff);
	border: 1px solid var(--m-border, var(--navy));
}

.block__all {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-weight: 700;
	font-size: 0.875rem;
	white-space: nowrap;
	padding-bottom: 8px;
}

.grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 600px) {

	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {

	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Card */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--paper);
}

/* The centre's images are designed cards with text: shown whole, uncropped, on a navy background. */
.has-thumb .card__media {
	background: var(--navy-deep);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.25s;
}

.card:hover .card__media img {
	opacity: 0.92;
}

.card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding-top: 10px;
	flex: 1;
}

.card__title {
	font-size: 1.0312rem;
	line-height: 1.4;
	font-weight: 800;
}

.card__title a {
	color: var(--navy);
}

.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__title a:hover {
	color: var(--blue-ink);
}

.card__excerpt {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
}

.card .meta {
	margin-top: auto;
	padding-top: 2px;
}

.card .badge {
	position: relative;
	z-index: 2;
}

.card--lead .card__media {
	aspect-ratio: 16 / 9;
}

.card--lead .card__body {
	gap: 8px;
	padding-top: 14px;
}

.card--lead .card__title {
	font-size: clamp(1.25rem, 2.3vw, 1.5625rem);
	line-height: 1.4;
	font-weight: 900;
}

.card--lead .card__excerpt {
	font-size: 1rem;
}

.card--row {
	flex-direction: row;
	gap: 12px;
	padding-block: 12px;
	border-bottom: 1px solid var(--hair);
	align-items: flex-start;
}

.card--row:last-child {
	border-bottom: 0;
}

.card--row .card__media {
	flex: none;
	width: 112px;
	aspect-ratio: 4 / 3;
}

.card--row .card__body {
	padding-top: 0;
	gap: 4px;
}

.card--row .card__title {
	font-size: 1rem;
	line-height: 1.4;
}

.card--row .meta {
	font-size: 1rem;
}

@media (max-width: 420px) {

	.card--row .card__media {
		width: 92px;
	}
}

.card--compact .card__body {
	padding: 0;
}

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 7px;
	color: var(--gray);
	font-size: 1rem;
	font-weight: 600;
}

.meta__author {
	color: var(--navy);
	font-weight: 700;
}

.meta__sep {
	color: var(--blue-soft);
}

/* "About the centre" strip */
.about-strip {
	background: linear-gradient(160deg, var(--navy-deep), var(--navy));
	color: rgba(255, 255, 255, 0.85);
}

.about-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
	padding-block: 28px;
}

.about-strip__mark {
	width: 56px;
	height: 56px;
	flex: none;
}

.about-strip__text {
	flex: 1 1 380px;
}

.about-strip__h {
	color: #fff;
	font-size: 1.0625rem;
	margin-bottom: 2px;
}

.about-strip__text p {
	margin: 0;
	font-size: 1rem;
}

.about-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Subscribe bar (inner pages) */
.subscribe {
	background: var(--tint);
	border-top: 1px solid var(--hair);
}

.subscribe__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 22px;
}

.subscribe__h {
	color: var(--navy);
	font-size: 1.0625rem;
}

.subscribe__p {
	margin: 2px 0 0;
	font-size: 1rem;
	color: var(--muted);
}

.subscribe .btn--light {
	background: var(--navy);
	color: #fff;
}

.subscribe .btn--light:hover {
	background: var(--navy-deep);
	color: #fff;
}

/* ==========================================================
   11. Archive and page headers
   ========================================================== */
.page-head {
	position: relative;
	background: var(--paper);
	color: var(--navy);
	padding-block: 26px 22px;
	border-bottom: 1px solid var(--hair);
}

.page-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--m-line, var(--navy));
}

.page-head .wrap {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	align-items: center;
}

.page-head__icon {
	grid-row: 1 / span 2;
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--m-bg);
	color: var(--m-fg);
	border: 1px solid var(--m-border);
}

.page-head__kicker {
	font-weight: 700;
	color: var(--gray);
	font-size: 0.875rem;
	margin: 0;
	grid-column: 1 / -1;
}

.page-head__title {
	color: var(--navy);
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); /* H1: 28 px phone, 38 px desktop (D-036). */
}

.page-head__desc {
	grid-column: 2;
	max-width: 70ch;
	margin-top: 2px;
	font-size: 1rem;
	color: var(--muted);
}

.page-head--page .page-head__title,
.page-head--topic .page-head__title,
.page-head--page .page-head__desc {
	grid-column: 1 / -1;
}

.page-head__desc p {
	margin: 0;
}

/* Links in archive descriptions are underlined: their colour alone is too close to the text (WCAG 1.4.1, R-20). */
.page-head__desc a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.page-head__search {
	grid-column: 1 / -1;
	margin-top: 12px;
}

@media (max-width: 600px) {

	.page-head__desc {
		grid-column: 1 / -1;
		margin-top: 10px;
	}
}

.empty {
	text-align: center;
	color: var(--muted);
	padding: 40px 16px;
	border: 1px dashed var(--hair);
	border-radius: var(--radius-lg);
}

.empty a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Posts page filters (D-069): link chips. The year row scrolls on its own on narrow screens; the page never does. */
.archive-filters {
	display: grid;
	gap: 14px;
	margin-block-end: 18px;
}

.archive-filters__row {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.archive-filters__label {
	margin: 0;
	font-weight: 700;
	color: var(--navy);
}

.chips {
	min-width: 0;
}

.chips__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Room inside the scroller for the 3 px focus ring and its 2 px offset. */
.chips--scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 6px;
	scrollbar-width: thin;
	margin-inline: -6px;
	padding: 6px;
}

.chips--scroll .chips__list {
	flex-wrap: nowrap;
}

.chips--scroll .chips__list > li {
	flex: none;
	scroll-snap-align: start;
}

/*
 * Fade on the end edge only while chips continue beyond it: a sticky end cap. When the row fits, the cap sits after
 * the last chip over empty space; when the row overflows, it sticks to the visible end edge over the chips.
 */
.chips--scroll .chips__list::after {
	content: "";
	position: sticky;
	inset-inline-end: 0;
	flex: none;
	width: 36px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white));
}

[dir="rtl"] .chips--scroll .chips__list::after {
	background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--white));
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--hair);
	border-radius: 999px;
	background: var(--tint);
	color: var(--navy);
	font-weight: 400; /* The preloaded weight: chip widths are final at first paint, so rows never re-wrap (no layout shift). */
	line-height: 1.4;
	white-space: nowrap;
}

.chip:hover {
	border-color: var(--blue);
	color: var(--navy);
}

.chip__count {
	color: var(--gray);
	font-size: 0.875rem;
	font-weight: 400;
}

/* Active choice: navy with white text (11.8:1), the count in light blue (6.8:1 on navy); muted counts 4.6:1 on tint. */
.chip[aria-current="true"] {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.chip[aria-current="true"] .chip__count {
	color: var(--blue-soft);
}

.chips-more {
	margin-top: 8px;
}

.chip--more {
	cursor: pointer;
	list-style: none;
}

.chip--more::-webkit-details-marker {
	display: none;
}

.chips-more[open] > .chips__list {
	margin-top: 8px;
}

.archive-status {
	margin: 0 0 18px;
	color: var(--muted);
}

.archive-status__clear {
	margin-inline-start: 8px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.pagination {
	margin-top: 32px;
}

.pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.pagination a,
.pagination span {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border-radius: 6px;
	border: 1px solid var(--hair);
	font-weight: 700;
	font-size: 0.9062rem;
	color: var(--navy);
}

.pagination .current {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.pagination a:hover {
	border-color: var(--navy);
}

/* ==========================================================
   12. Single item
   ========================================================== */
.entry__head {
	padding-block: 30px 22px;
	border-bottom: 1px solid var(--hair);
	position: relative;
}

.entry__head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--m-line);
}

.entry__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem); /* H1: 28 px phone, 38 px desktop (D-036). */
	line-height: 1.35;
	font-weight: 900;
	text-align: start;
	letter-spacing: normal;
	margin: 12px 0 8px;
}

/* The lead (dir="auto") gets the line height of its own direction (D-045); without :dir(), the page direction. */
.entry__lead {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	color: var(--muted);
	font-weight: 600;
	line-height: 1.8;
	text-align: start;
	letter-spacing: normal;
	margin-bottom: 8px;
}

:where(:root:not([dir="rtl"])) .entry__lead {
	line-height: 1.6;
}

.entry__lead:dir(rtl) {
	line-height: 1.8;
}

.entry__lead:dir(ltr) {
	line-height: 1.6;
}

.byline {
	display: flex;
	flex-direction: column;
	margin: 8px 0 4px;
	line-height: 1.45;
}

.byline__name {
	font-weight: 800;
	color: var(--navy);
	font-size: 1rem;
}

.byline__role {
	color: var(--muted);
	font-size: 1rem;
}

.entry__head .meta {
	margin-top: 6px;
	font-size: 1rem;
}

.entry__cover {
	margin: 26px auto 0;
}

/* Natural size, never upscaled: a small legacy image stays sharp and is centred in the cover area (F-3, D-031). */
.entry__cover img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-lg);
}

.entry__body {
	padding-block: 28px 48px;
}

.entry__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.question {
	background: var(--navy-deep);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 18px 20px;
	margin-bottom: 28px;
	border-inline-start: 5px solid var(--blue);
}

.question__label {
	color: var(--blue);
	font-weight: 800;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 2px;
}

.question p {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.75;
}

.source {
	background: var(--tint);
	border: 1px solid var(--blue-soft);
	border-radius: var(--radius-lg);
	padding: 16px 18px;
	margin-bottom: 28px;
}

.source__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--blue-ink);
	font-weight: 800;
	font-size: 0.875rem;
}

.source__title {
	font-weight: 800;
	color: var(--navy);
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: 4px 0 8px;
}

.source__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	font-size: 1rem;
}

.source__meta div {
	display: flex;
	gap: 6px;
}

.source__meta dt {
	color: var(--muted);
}

.source__meta dd {
	margin: 0;
	font-weight: 700;
	color: var(--ink);
}

.source__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-weight: 700;
	font-size: 0.875rem;
}

.topics {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 1rem;
}

.topics span {
	color: var(--muted);
	font-weight: 600;
}

.topics a {
	background: var(--tint);
	color: var(--navy);
	padding: 1px 12px;
	border-radius: 999px;
	font-weight: 600;
}

.topics a:hover {
	background: var(--navy);
	color: #fff;
}

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
}

.share__label {
	font-weight: 700;
	color: var(--navy);
	font-size: 0.9062rem;
}

.share ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
}

.share a,
.share button {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--hair);
	background: #fff;
	color: var(--navy);
}

.share a:hover,
.share button:hover {
	border-color: var(--blue);
	color: var(--blue-ink);
}

.share__done {
	position: absolute;
	bottom: calc(100% + 6px);
	white-space: nowrap;
	background: var(--navy);
	color: #fff;
	font-size: 0.875rem;
	padding: 2px 10px;
	border-radius: 6px;
}

.share__done:empty {
	opacity: 0;
	pointer-events: none;
}

/*
 * Password form of a protected item (core markup) in the theme's control style (D-070): the field like the other
 * form fields (border 3:1 or more, WCAG 1.4.11), the button like .btn--primary, at least 44 px tall. Field and
 * button share a row when there is room and stack on phones.
 */
.post-password-form p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 12px;
}

.post-password-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 15rem;
	max-width: 24rem;
	color: var(--navy);
	font-weight: 700;
}

.post-password-form input[type="password"] {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--gray);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
}

.post-password-form input[type="password"]:focus {
	border-color: var(--blue-ink);
}

.post-password-form input[type="submit"] {
	min-height: 44px;
	padding: 8px 24px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--blue);
	color: var(--navy-deep);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.post-password-form input[type="submit"]:hover {
	background: #6bb4e6;
}

/* ==========================================================
   13. Long text
   ========================================================== */

/*
 * Reading comfort (D-036, D-045) follows the content's own direction, not the site language:
 * right-to-left 18 / 20 / 22 px (phone / 768 px / 1024 px), line height 1.8; left-to-right 17 / 18 / 18 px,
 * line height 1.6 (sizes in :root). Aligned to the start edge, never justified: browsers justify
 * Arabic by stretching spaces, not by kashida (CSS Text 3, 7.2.1).
 */
.prose {
	font-size: var(--prose-rtl);
	line-height: 1.8;
	text-align: start;
	letter-spacing: normal;
	font-variant-ligatures: normal;
}

/* Without :dir(): the dir attribute from barq_content_dir_attr(), else the page direction. */
.prose[dir="ltr"],
:where(:root:not([dir="rtl"])) .prose:not([dir]) {
	font-size: var(--prose-ltr);
	line-height: 1.6;
}

/* With :dir() (separate rules: a browser that does not know a selector drops the whole rule). */
.prose:dir(rtl) {
	font-size: var(--prose-rtl);
	line-height: 1.8;
}

.prose:dir(ltr) {
	font-size: var(--prose-ltr);
	line-height: 1.6;
}

.prose > * {
	margin-block: 0 1.5em;
}

.prose p,
.prose li {
	hyphens: none;
}

/*
 * Legacy justified text renders start-aligned (D-046). Imported content can still carry justification as
 * an inline style, an align attribute or the block class; the content itself is not changed. !important
 * only wins over an inline style attribute.
 */
.prose [style*="text-align: justify" i],
.prose [style*="text-align:justify" i],
.prose [align="justify" i],
.prose .has-text-align-justify {
	text-align: start !important;
}

/* Heading scale (D-036): H2 21 / 25 px, H3 19 / 21 px, H4 18 px; line height 1.4. */
.prose h2 {
	font-size: 1.3125rem;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--m-line, var(--blue));
	line-height: 1.4;
}

.prose h3 {
	font-size: 1.1875rem;
	margin-top: 1.4em;
	margin-bottom: 0.4em;
}

.prose h4 {
	font-size: 1.125rem;

	margin-top: 1.2em;
}

@media (min-width: 768px) {

	.prose h2 {
		font-size: 1.5625rem;
	}

	.prose h3 {
		font-size: 1.3125rem;
	}
}

.prose a {
	text-decoration: underline;
	text-decoration-color: var(--blue-soft);
	text-underline-offset: 4px;
}

.prose a:hover {
	text-decoration-color: var(--navy);
}

.prose strong {
	color: var(--navy);
	font-weight: 800;
}

.prose ul,
.prose ol {
	padding-inline-start: 1.3em;
}

.prose li {
	margin-bottom: 0.45em;
}

.prose li::marker {
	color: var(--blue-ink);
	font-weight: 700;
}

.prose small {
	color: var(--gray);
	font-size: max(1rem, 0.8em);
}

.prose blockquote {
	margin-inline: 0;
	padding: 14px 18px;
	background: var(--paper);
	border-inline-start: 4px solid var(--blue);
	border-start-start-radius: var(--radius);
	border-end-start-radius: var(--radius);
	color: var(--navy);
	font-weight: 600;
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

.prose blockquote cite {
	display: block;
	font-size: max(1rem, 0.85em);
	color: var(--muted);
	font-style: normal;
	margin-top: 6px;
}

.prose hr {
	border: 0;
	height: 1px;
	background: var(--hair);
	margin-block: 2em;
}

.prose figure {
	margin-inline: 0;
}

.prose img {
	border-radius: var(--radius);
}

.prose figcaption {
	font-size: 1rem;
	color: var(--gray);
	text-align: start;
	margin-top: 6px;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: max(1rem, 0.88em);
	font-variant-numeric: tabular-nums;
	display: block;
	overflow-x: auto;
}

.prose th,
.prose td {
	border: 1px solid var(--hair);
	padding: 7px 11px;
	text-align: start;
}

.prose th {
	background: var(--tint);
	color: var(--navy);
}

.prose .note,
.prose .is-style-note {
	background: var(--tint);
	border-radius: var(--radius);
	padding: 12px 16px;
	font-size: max(1rem, 0.9em);
	color: var(--muted);
}

/* ==========================================================
   14. About page
   ========================================================== */
.offer {
	display: grid;
	gap: 14px;
}

@media (min-width: 700px) {

	.offer {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {

	.offer {
		grid-template-columns: repeat(3, 1fr);
	}
}

.offer__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--hair);
	border-top: 3px solid var(--m-line);
	border-radius: var(--radius);
	padding: 18px;
	color: var(--ink);
	transition: border-color 0.2s;
}

.offer__item:hover {
	border-color: var(--m-border);
	color: var(--ink);
}

.offer__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--m-bg);
	color: var(--m-fg);
	border: 1px solid var(--m-border);
	margin-bottom: 4px;
}

.offer__name {
	font-weight: 800;
	font-size: 1.0312rem;
	color: var(--navy);
}

.offer__desc {
	color: var(--muted);
	font-size: 1rem;
	text-align: start;
}

/* ==========================================================
   15. 404
   ========================================================== */
.notfound {
	padding-block: 56px;
	text-align: center;
}

.notfound__code {
	font-size: 4.5rem;
	font-weight: 900;
	color: var(--blue-ink); /* Large text 3:1 or more (axe color-contrast; was 2.69:1). */
	line-height: 1;
	margin-bottom: 6px;
}

.notfound__title {
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem);
	margin-bottom: 6px;
}

.notfound .search-form {
	margin: 18px auto;
}

/* ==========================================================
   16. Footer
   ========================================================== */
.site-footer {
	background: var(--navy-deep);
	color: rgba(255, 255, 255, 0.75);
	padding-top: 40px;
	font-size: 1rem;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
	color: var(--blue);
}

.site-footer__grid {
	display: grid;
	gap: 30px;
	padding-bottom: 32px;
}

@media (min-width: 800px) {

	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
		gap: 48px;
	}
}

.site-footer .brand,
.site-footer .brand:hover {
	color: #fff;
}

.site-footer .brand__sub {
	color: rgba(255, 255, 255, 0.65);
}

.site-footer .brand__mark {
	width: 42px;
	height: 42px;
}

.site-footer .brand__name {
	font-size: 1.5rem;
}

.site-footer__about p {
	margin: 12px 0 16px;
	max-width: 52ch;
	text-align: start;
}

.site-footer__h {
	color: #fff;
	font-size: 1rem;
	margin-bottom: 10px;
}

.site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.socials--footer a {
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.socials--footer a:hover {
	border-color: var(--blue);
	color: var(--blue);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	padding-block: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================
   17. Block alignment
   ========================================================== */
.alignwide {
	margin-inline: calc(-1 * min(120px, 6vw));
	max-width: none;
}

.alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-block-image.alignwide img,
.wp-block-image.alignfull img {
	width: 100%;
}

.wp-element-caption {
	font-size: 1rem;
	color: var(--gray);
	text-align: start;
}

.wp-block-button__link {
	background: var(--navy);
	color: #fff;
	border-radius: 999px;
	padding: 8px 20px;
	font-weight: 700;
}

.wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--hair);
}

/* ==========================================================
   18. Print
   ========================================================== */
@media print {

	.topbar,
	.site-header,
	.nav,
	.site-footer,
	.subscribe,
	.share,
	.entry__actions,
	.block,
	.about-strip {
		display: none !important;
	}

	body {
		font-size: 12pt;
	}
}