/*
Theme Name: برق — Barq
Theme URI: https://barq-rs.com
Author: برق للدراسات والاستشارات
Author URI: https://barq-rs.com
Description: قالب موقع برق للدراسات والاستشارات — خمسة أنواع محتوى منفصلة (تقرير الرصد اليومي، التحليل اليومي، تقدير موقف، قراءة في مقال، المقالات) بالهوية البصرية للمركز، بواجهة تحريرية تعرض أحدث العناوين أولاً، متجاوب مع الهاتف والحاسوب.
Version: 1.2.0
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
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: each product is recognisable at a glance
   (colours from the navy/blue family only, plus 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 (step 4). */
.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. Image placeholders (items without an image), deliberately quiet
   ========================================================== */
.ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	background-color: var(--paper);
	color: var(--gray);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='65' viewBox='0 0 56 65'%3E%3Cpath d='M28 2 54 17v31L28 63 2 48V17z' fill='none' stroke='%23123A5C' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 56px 65px;
	border: 1px solid var(--hair);
	border-radius: inherit;
}

.ph__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--m-bg);
	color: var(--m-fg);
	border: 1px solid var(--m-border);
}

.card--row .ph__icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.ph__label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--muted);
}

/* ==========================================================
   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;
	}

	.monitor {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {

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

	.monitor {
		grid-column: auto;
	}
}

.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;
}

/* Daily monitoring column */
.monitor {
	border: 1px solid var(--hair);
	border-top: 4px solid var(--navy);
	border-radius: var(--radius);
	background: var(--paper);
	padding: 14px 16px 16px;
	align-self: start;
}

.monitor__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: var(--navy);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--hair);
}

.monitor__head a {
	color: inherit;
}

.monitor__today {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hair);
	color: var(--ink);
}

.monitor__today:hover {
	color: var(--ink);
}

.monitor__today:hover .monitor__title {
	color: var(--blue-ink);
}

.monitor__date {
	font-size: 1rem;
	color: var(--gray);
	font-weight: 600;
}

.monitor__title {
	font-weight: 800;
	color: var(--navy);
	font-size: 1rem;
	line-height: 1.4;
}

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

.monitor__more {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--blue-ink);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
}

.monitor__list {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
}

.monitor__list a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--hair);
	color: var(--muted);
	font-size: 1rem;
}

.monitor__list a span {
	color: var(--navy);
	font-weight: 700;
}

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

.monitor__all {
	display: block;
	text-align: center;
	margin-top: 12px;
	padding: 6px;
	border-radius: var(--radius);
	background: var(--navy);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
}

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

/* ==========================================================
   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__more {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 0.875rem;
}

.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--lead.no-thumb .card__body {
	background: var(--paper);
	border: 1px solid var(--hair);
	border-top: 4px solid var(--m-line);
	border-radius: var(--radius);
	padding: 24px 24px 20px;
	gap: 12px;
}

.card--lead.no-thumb .card__title {
	font-size: clamp(1.375rem, 2.6vw, 1.8125rem);
}

.card--lead.no-thumb .card__excerpt {
	font-size: 1rem;
	line-height: 1.8;
	text-align: start;
}

.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);
}

/* Monitoring report list */
.report-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.report-list a {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: var(--radius);
	color: var(--ink);
	transition: border-color 0.2s;
}

.report-list a:hover {
	border-color: var(--navy);
	color: var(--ink);
}

.report-list__date {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 66px;
	min-height: 64px;
	border-radius: 6px;
	background: var(--navy);
	color: #fff;
	line-height: 1.2;
	text-align: center;
	padding: 6px;
}

.report-list__d {
	font-size: 1.5rem;
	font-weight: 900;
}

.report-list__m {
	font-size: 0.875rem;
	font-weight: 600;
	opacity: 0.85;
}

.report-list__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.report-list__title {
	font-weight: 800;
	color: var(--navy);
	font-size: 1rem;
	line-height: 1.4;
}

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

.report-list__arrow {
	margin-inline-start: auto;
	color: var(--blue-ink);
	flex: none;
}

@media (max-width: 560px) {

	.report-list__arrow {
		display: none;
	}

	.report-list a {
		gap: 12px;
	}
}

.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;
}

/* ==========================================================
   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;
	}
}