/* Design tokens, reset, layout primitives and shared components. */

:root {
	--c-navy: #0d0b52;
	--c-accent: #162eb7;
	--c-accent-light: #5070e5;
	--c-green: #76ce40;
	--c-panel: #f7f7f7;
	--c-divider: #eaeaea;
	--c-border: #dddddd;
	--c-red: #f20d46;
	--c-amber: #dd9933;
	--c-text: #111111;
	--c-muted: #767676;
	--c-crumb: #969696;
	--c-bg: #ffffff;

	--f-ui: 'Oxygen', Verdana, Geneva, sans-serif;
	--f-head: 'Roboto', 'Oxygen', sans-serif;
	--f-body: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Oxygen', Roboto, sans-serif;
	--f-arabic: 'Amiri', serif;

	--container: 1200px;
	--gutter: 20px;
	--gap: 10px;
	--sidebar: 320px;
	--shadow-row: 0 2px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1018px) {
	:root { --sidebar: 220px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 21px;
	-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-head);
	font-weight: 400;
	color: var(--c-text);
	margin: 0 0 0.5em;
	line-height: 1.3;
}
p { margin: 0 0 1.4em; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto;
	top: 8px; left: 8px; z-index: 1000;
	padding: 8px 16px; background: #fff; color: var(--c-navy);
}

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* Layout */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
@media (max-width: 767px) {
	:root { --gutter: 16px; }
}

.band { background: var(--c-panel); }

/* Main column + fixed-width sidebar (Newspaper 2/3 + 320px). */
.layout-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sidebar);
	gap: 0 40px;
}
.layout-sidebar > .sidebar { position: sticky; top: 70px; align-self: start; }
@media (max-width: 1018px) { .layout-sidebar { gap: 0 20px; } }
@media (max-width: 767px) {
	.layout-sidebar { grid-template-columns: 1fr; }
	.layout-sidebar > .sidebar { position: static; }
}

.site-main { padding-bottom: 40px; }

/* Block title: Newspaper block template 4 (filled label with arrow). */
.block-title {
	--bt-color: var(--c-navy);
	display: flex;
	border-bottom: 2px solid var(--bt-color);
	margin-bottom: 26px;
}
.block-title--center { justify-content: center; }
.block-title__text {
	position: relative;
	margin: 0;
	padding: 0 12px;
	background: var(--bt-color);
	color: #fff;
	font-family: var(--f-ui);
	font-size: 13px;
	font-weight: 700;
	line-height: 29px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.block-title__text::after {
	content: '';
	position: absolute;
	left: 12px;
	bottom: -8px;
	border: 4px solid transparent;
	border-top-color: var(--bt-color);
}
.block-title__text a { color: inherit; }
@media (max-width: 1018px) {
	.block-title__text { font-size: 11px; letter-spacing: 0; }
}

/* Category chip */
.cat-chip {
	--chip-bg: var(--c-navy);
	display: inline-block;
	padding: 3px 6px 4px;
	background: var(--chip-bg);
	color: #fff;
	font-family: var(--f-ui);
	font-size: 10px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}
.cat-chip:hover { color: #fff; background: var(--c-accent); }

/* Post meta */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-family: var(--f-ui);
	font-size: 11px;
	line-height: 1.3;
	color: var(--c-muted);
}
.post-meta a { color: var(--c-text); font-weight: 700; }
.post-meta__views { margin-left: 4px; }

/* Breadcrumbs */
.breadcrumbs {
	font-family: var(--f-ui);
	font-size: 11px;
	line-height: 1.4;
	color: var(--c-crumb);
}
.breadcrumbs a { color: var(--c-crumb); }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs-band { background: var(--c-panel); padding: 10px 0; }

/* Buttons */
.btn {
	display: inline-block;
	padding: 10px 24px;
	background: var(--c-navy);
	color: #fff;
	font-family: var(--f-ui);
	font-size: 13px;
	line-height: 1.4;
	border: 0;
}
.btn:hover { background: var(--c-accent); color: #fff; }
.btn--block { display: block; text-align: center; }

/* Load more */
.load-more { margin-top: 20px; text-align: center; }
.load-more__btn {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid var(--c-divider);
	color: var(--c-text);
	font-family: var(--f-ui);
	font-size: 12px;
}
.load-more__btn:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.load-more__btn.is-loading { opacity: 0.5; pointer-events: none; }

/* Numbered pagination */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.pagination .page-numbers {
	min-width: 32px;
	padding: 6px 10px;
	border: 0;
	background: var(--c-panel);
	color: var(--c-text);
	font-family: var(--f-ui);
	font-size: 13px;
	text-align: center;
}
.pagination .page-numbers.current { background: var(--c-navy); color: #fff; }
.pagination a.page-numbers:hover { background: var(--c-accent); color: #fff; }

/* Ads */
.ad { text-align: center; margin-bottom: 20px; }
.ad__title {
	display: block;
	margin-bottom: 6px;
	font-family: var(--f-ui);
	font-size: 9px;
	color: #a7a7a7;
	text-transform: uppercase;
}
.ad__img { margin-inline: auto; }

/* Widgets (block widgets in the td-default sidebar) */
.widget { margin-bottom: 30px; }
.widget h3, .widget-title { font-family: var(--f-ui); font-size: 15px; font-weight: 700; color: var(--c-navy); }
.widget ul { margin: 0; padding-left: 18px; }
.widget li { margin-bottom: 6px; }

/* Arabic paragraphs */
p[dir="rtl"] {
	font-family: var(--f-arabic);
	font-size: 1.5em;
	line-height: 2;
}