/* ==========================================================================
   Static homepage (cards design) — now shared by mobile AND desktop.
   Base rules here are mobile-first (2-column category cards, 1-column
   news list); the min-width:992px block further down only overrides
   column counts / sizing for wider screens.
   ========================================================================== */

.ahram-home {
	padding: 16px 16px 28px;
	box-sizing: border-box;
}

.ahram-hero-row__sidebar {
	margin-top: 16px;
}

.ahram-cat-cards__header {
	border-bottom: 2px solid #14264d;
	margin-top: 24px;
	margin-bottom: 0;
}

.ahram-cat-cards__title {
	display: inline-block;
	font-size: 17px;
	font-weight: 800;
	color: #14264d;
	border-bottom: 3px solid #f4a825;
	padding-bottom: 8px;
	margin: 0;
}

/* -- Category cards: image link-cards, 2-per-row on mobile -- */
.ahram-cat-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
}

.ahram-cat-cards__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 130px;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ahram-cat-cards__item:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	color: #fff;
}

.ahram-cat-cards__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.ahram-cat-cards__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 15, 35, 0.15), rgba(8, 12, 28, 0.85));
	z-index: 1;
}

.ahram-cat-cards__item span {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 10px 8px 12px;
	font-weight: 800;
	font-size: 14px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* -- Latest-news cards: single column on mobile, image on top -- */
.ahram-news-cards {
	margin-top: 28px;
}

.ahram-news-cards__header {
	border-bottom: 2px solid #14264d;
	margin-bottom: 14px;
}

.ahram-news-cards__title {
	display: inline-block;
	font-size: 17px;
	font-weight: 800;
	color: #14264d;
	border-bottom: 3px solid #f4a825;
	padding-bottom: 8px;
	margin: 0;
}

.ahram-news-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ahram-news-cards__item {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.ahram-news-cards__image-link {
	display: block;
}

.ahram-news-cards__image {
	width: 100%;
	height: 190px;
	object-fit: cover;
	display: block;
}

.ahram-news-cards__body {
	padding: 14px;
}

.ahram-news-cards__cat {
	display: inline-block;
	background: #14264d;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	text-decoration: none;
	margin-bottom: 8px;
}

.ahram-news-cards__title-link {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 8px;
}

.ahram-news-cards__title-link a {
	color: #1a56db;
	text-decoration: none;
}

.ahram-news-cards__title-link a:hover {
	color: #b91c1c;
	text-decoration: underline;
}

.ahram-news-cards__excerpt {
	font-size: 13px;
	color: #555;
	line-height: 1.6;
	margin: 0 0 10px;
}

.ahram-news-cards__date {
	display: inline-block;
	font-size: 12px;
	color: #1f2937; /* near-black — guaranteed readable */
	background: #f3f4f6; /* explicit light background so contrast never depends on surrounding context */
	padding: 2px 8px;
	border-radius: 4px;
}

.ahram-news-cards__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
	padding: 10px;
	border: 1px solid #14264d;
	border-radius: 6px;
	color: #14264d;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.ahram-news-cards__more:hover {
	background: #14264d;
	color: #fff;
}

/* ==========================================================================
   Breaking News Ticker
   ========================================================================== */

.ahram-breaking-news {
	display: flex;
	align-items: center;
	background: #b91c1c;
	color: #fff;
	overflow: hidden;
	direction: rtl;
}

.ahram-breaking-news__badge {
	flex: 0 0 auto;
	padding: 10px 16px;
	font-weight: 700;
	background: #7f1d1d;
	white-space: nowrap;
}

.ahram-breaking-news__track {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	min-height: 2.7em;
	display: flex;
	align-items: center;
}

.ahram-breaking-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100%;
}

/* One headline shown at a time; assets/js/breaking-news.js toggles
   .is-active every 4s. Fully JS-driven (no width-dependent math), so it
   behaves the same on every screen size instead of relying on a CSS
   marquee animation. */
.ahram-breaking-news__list li {
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 100%;
	padding: 10px 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(-50%) translateX(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	pointer-events: none;
}

.ahram-breaking-news__list li.is-active {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
	pointer-events: auto;
}

.ahram-breaking-news__list a {
	color: #fff;
	text-decoration: none;
}

.ahram-breaking-news__list a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.ahram-breaking-news__list li {
		transition: opacity 0.2s linear;
		transform: translateY(-50%);
	}
}

/* ==========================================================================
   Hero Slider
   ========================================================================== */

.ahram-hero-slider {
	position: relative;
	width: 100%;
	max-height: 480px;
	overflow: hidden;
	direction: ltr; /* Transform math is physical LTR regardless of page direction. */
}

.ahram-hero-slider__track {
	display: flex;
	transition: transform 0.5s ease;
}

.ahram-hero-slider__slide {
	flex: 0 0 100%;
	position: relative;
	max-height: 480px;
}

.ahram-hero-slider__link {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

.ahram-hero-slider__image {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

.ahram-hero-slider__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 24px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
	direction: rtl;
	text-align: right;
}

.ahram-hero-slider__cat {
	display: inline-block;
	background: #b91c1c;
	color: #fff;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 3px;
	margin-bottom: 8px;
}

.ahram-hero-slider__title {
	color: #fff;
	font-size: 24px;
	line-height: 1.4;
	margin: 0;
}

.ahram-hero-slider__prev,
.ahram-hero-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	font-size: 24px;
	cursor: pointer;
	border-radius: 50%;
	z-index: 2;
}

.ahram-hero-slider__prev { left: 16px; }
.ahram-hero-slider__next { right: 16px; }

.ahram-hero-slider__prev:hover,
.ahram-hero-slider__next:hover {
	background: rgba(0, 0, 0, 0.7);
}

.ahram-hero-slider__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 2;
}

.ahram-hero-slider__dot {
	/* The visible dot stays a small 10x10 circle (::before), but the
	   actual clickable <button> is a full 32x32 flex box — comfortably
	   above the 24x24 minimum so no browser rounding pushes it under
	   the accessibility threshold. */
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ahram-hero-slider__dot::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
}

.ahram-hero-slider__dot.is-active::before {
	background-color: #fff;
}

@media (max-width: 782px) {
	.ahram-hero-slider,
	.ahram-hero-slider__slide,
	.ahram-hero-slider__image {
		max-height: 280px;
		height: 280px;
	}
	.ahram-hero-slider__title {
		font-size: 18px;
	}
}

/* ==========================================================================
   Homepage Category Sections
   ========================================================================== */

.ahram-homepage-sections {
	direction: rtl;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}

.ahram-section {
	padding: 24px 0;
}

.ahram-section:not(:last-child) {
	border-bottom: 4px solid #1d4ed8;
}

.ahram-section__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.ahram-section__hatch {
	flex: 1 1 auto;
	height: 14px;
	background-image: repeating-linear-gradient(
		135deg,
		#d1d5db,
		#d1d5db 2px,
		transparent 2px,
		transparent 7px
	);
}

.ahram-section__title {
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 800;
	margin: 0;
	white-space: nowrap;
	color: #111;
}

.ahram-section__title a {
	color: inherit;
	text-decoration: none;
}

.ahram-section__title a:hover {
	color: #f4a825;
}

/* -- Featured post -- */

.ahram-featured-post {
	text-align: right;
}

.ahram-featured-post__image-link {
	display: block;
}

.ahram-featured-post__image {
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border: 1px solid #e5e7eb;
	padding: 4px;
	background: #fff;
	box-sizing: border-box;
}

.ahram-featured-post__title {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	margin: 18px 0 8px;
}

.ahram-featured-post__title a {
	color: #111;
	text-decoration: none;
}

.ahram-featured-post__title a:hover {
	text-decoration: underline;
}

.ahram-featured-post__excerpt {
	font-size: 15px;
	line-height: 1.9;
	color: #374151;
	max-width: 720px;
	margin-inline-start: 0;
	margin-inline-end: auto;
	margin-bottom: 18px;
}

.ahram-featured-post__more {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-inline-start: 0;
	margin-inline-end: auto;
	background: #1d4ed8;
	color: #fff;
	padding: 6px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	box-sizing: border-box;
}

.ahram-featured-post__more:hover {
	background: #1e40af;
	color: #fff;
}

/* -- Shared meta line (date + comments) -- */

.ahram-meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	color: #4b5563; /* darkened from #9ca3af — fails WCAG AA contrast on white */
	font-size: 13px;
	margin-bottom: 14px;
}

.ahram-meta__icon {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-inline-end: 4px;
}

/* -- Sub posts list -- */

.ahram-section__subposts {
	border-top: 1px solid #eee;
	margin-top: 8px;
}

.ahram-sub-post {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

.ahram-sub-post__image-link {
	flex: 0 0 auto;
}

.ahram-sub-post__image {
	width: 92px;
	height: 70px;
	object-fit: cover;
	border: 1px solid #e5e7eb;
	display: block;
}

.ahram-sub-post__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ahram-sub-post__title {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
}

.ahram-sub-post__title a {
	color: #1d4ed8;
	text-decoration: none;
}

.ahram-sub-post__title a:hover {
	text-decoration: underline;
}

.ahram-sub-post .ahram-meta {
	justify-content: flex-start;
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.ahram-section__title {
		font-size: 18px;
	}
	.ahram-featured-post__title {
		font-size: 19px;
	}
	.ahram-featured-post__image {
		max-height: 260px;
	}
	.ahram-sub-post__image {
		width: 76px;
		height: 58px;
	}
	.ahram-sub-post__title {
		font-size: 15px;
	}
}

/* ==========================================================================
   Cairo font — applied site-wide, overriding GeneratePress's default stack.
   !important is needed here because GeneratePress sets font-family on many
   elements (entry-content, widgets, nav...) with selectors more specific
   than a plain "body" rule, so those were winning over our font choice.
   ========================================================================== */

body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, blockquote,
.entry-title, .entry-content, .entry-content p,
.entry-meta, .entry-summary,
.site-title, .site-description,
.widget, .widget-title, .widget ul, .widget li,
.main-navigation, .main-navigation a,
.comment-content, .comment-author, .comment-form label,
.site-footer, .site-footer a,
.ahram-section__title,
.ahram-featured-post__title,
.ahram-featured-post__excerpt,
.ahram-sub-post__title,
.ahram-hero-slider__title,
.ahram-featured-post__more {
	font-family: 'Cairo', 'Tahoma', sans-serif !important;
}

/* ==========================================================================
   Site logo & header positioning — deliberately left to the theme's own
   native Customizer controls (Appearance > Customize > الشكل العام, and
   the "Style" settings for the mobile menu icon) instead of CSS overrides.
   Only the site title/tagline text stays hidden below, since the logo
   image replaces it.
   ========================================================================== */

.site-title,
.site-description,
.main-title {
	display: none !important;
}

@media (max-width: 782px) {
	.site-logo img,
	.header-image.is-logo-image {
		max-height: 76px !important;
		max-width: 280px !important;
	}
	.site-header .inside-header {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Trim the white space above the header and the gap between the logo
	   row and the menu-icon/search row below it, per user request. */
	body {
		margin-top: 0 !important;
	}
	#page,
	#masthead,
	.site-header {
		margin-top: 0 !important;
	}
	.site-header .inside-header {
		padding-top: 10px !important;
		padding-bottom: 4px !important;
	}
	.main-navigation .inside-navigation {
		padding-top: 0 !important;
		padding-bottom: 6px !important;
	}
}

/* ==========================================================================
   Single article page
   ========================================================================== */

/* Featured image — full-bleed edge-to-edge within the article box, and
   taller/bigger than GP's default, closer to Sahifa's look. */
.single .featured-image {
	margin-left: -40px;
	margin-right: -40px;
	width: calc(100% + 80px);
}

.single .featured-image img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	display: block;
}

@media (max-width: 782px) {
	.single .featured-image {
		margin-left: -30px;
		margin-right: -30px;
		width: calc(100% + 60px);
	}
	.single .featured-image img {
		max-height: 320px;
	}
}

/* Tags — rounded pill style */
.tags-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.tags-links a {
	display: inline-block;
	background: #eef2ff;
	color: #1d4ed8;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.tags-links a:hover {
	background: #1d4ed8;
	color: #fff;
}

/* Author box, appended after the article content */
.ahram-author-box {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 32px;
	padding: 20px;
	background: #f7f8fa;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	direction: rtl;
	text-align: right;
}

.ahram-author-box__avatar img {
	border-radius: 50%;
	display: block;
}

.ahram-author-box__body {
	display: flex;
	flex-direction: column;
}

.ahram-author-box__label {
	font-size: 12px;
	color: #4b5563; /* darkened from #9ca3af — fails WCAG AA contrast on the box's light background */
	margin-bottom: 2px;
}

.ahram-author-box__name {
	font-size: 17px;
	font-weight: 700;
	color: #111;
	text-decoration: none;
	margin-bottom: 6px;
}

.ahram-author-box__name:hover {
	text-decoration: underline;
}

.ahram-author-box__bio {
	font-size: 14px;
	color: #4b5563;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 782px) {
	.ahram-author-box {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}
}

/* ==========================================================================
   Footer — full column layout (about + categories + quick links + social)
   ========================================================================== */

html body .site-footer {
	border-top: 3px solid #f4a825;
}

html body .site-footer,
html body .site-footer .copyright-bar,
html body .site-footer .inside-site-info,
html body .site-footer .site-info,
html body .site-footer #site-generated-copyright {
	background-color: #0d1b3a !important;
}

html body .site-footer,
html body .site-footer a,
html body .site-footer .copyright-bar,
html body .site-footer .copyright-bar a,
html body .site-footer .inside-site-info,
html body .site-footer .inside-site-info a,
html body .site-footer .site-info,
html body .site-footer .site-info a,
html body .site-footer #site-generated-copyright,
html body .site-footer #site-generated-copyright a {
	color: #ffffff !important;
}

.site-footer a:hover {
	color: #f4a825 !important;
}

.ahram-footer {
	background: #14264d;
}

.ahram-footer__inner {
	margin: 0 auto;
	padding: 40px 20px 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
}

.ahram-footer__col {
	text-align: center;
}

.ahram-footer__title {
	color: #f4a825;
	font-size: 16px;
	margin: 0 0 14px;
}

.ahram-footer__about-text {
	color: #e5e7eb;
	font-size: 14px;
	line-height: 1.9;
	margin: 0;
}

.ahram-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 16px;
	text-align: start;
}

.ahram-footer__links li {
	margin-bottom: 10px;
}

.ahram-footer__links a {
	color: #e5e7eb;
	text-decoration: none;
	font-size: 14px;
}

.ahram-footer__links a:hover {
	color: #f4a825;
	text-decoration: underline;
}

.ahram-footer__hint {
	color: #9ca3af; /* lightened from #6b7280 — borderline-fails WCAG AA contrast on the dark navy footer */
	font-size: 12px;
	margin-top: 10px;
}

.ahram-footer__social {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.ahram-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #e5e7eb;
}

.ahram-footer__social-link:hover {
	background: #f4a825;
	color: #14264d;
}

@media (min-width: 768px) {
	.ahram-footer__col {
		text-align: right;
	}

	.ahram-footer__social {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   DESKTOP LAYOUT (min-width: 992px)
   First pass at giving the same GeneratePress child theme a Sahifa-style
   desktop skin: boxed/centered page, navy+gold header accent, and
   two-column arrangements for the homepage sections and the article
   sidebar. Nothing below touches mobile — it's all inside the min-width
   media query, so phones keep the exact layout tested and confirmed
   earlier. Colors/spacing are a first approximation from reference
   screenshots and expected to need a round of adjustment.
   ========================================================================== */

@media (min-width: 992px) {

	/* -- Boxed page against a light grey background -- */
	body {
		background: #eef1f5;
	}

	#page {
		max-width: 1100px;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
	}

	/* -- Header: same boxed width as the nav bar / #page, instead of a
	      full-bleed white band across the whole screen -- */
	.site-header {
		max-width: 1100px;
		margin: 0 auto;
	}

	/* -- Nav bar: navy background, gold underline, matching the logo's
	      brand colors -- */
	.main-navigation {
		background: #14264d;
		border-bottom: 3px solid #f4a825;
		max-width: 1100px;
		margin: 0 auto;
	}

	.main-navigation a {
		color: #fff !important;
	}

	/* -- Menu items: don't shrink or wrap their text — the actual
	      flex/order/alignment is now forced via inline style from PHP
	      (see ahram_gp_force_primary_menu_alignment in functions.php),
	      confirmed working; this just keeps each item's natural width so
	      overflow items scroll horizontally instead of wrapping to a
	      second line (which used to push the search icon down). -- */
	html body .main-navigation ul#primary-menu > li {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* -- Footer: same boxed width as the rest of the page, instead of a
	      full-bleed navy band across the whole screen -- */
	.site-footer,
	.ahram-footer {
		max-width: 1100px;
		margin: 0 auto;
	}

	/* -- Copyright line reset: displays fine on mobile but was reported
	      invisible on desktop specifically. Most likely cause: GP's
	      copyright bar assumes a full-bleed viewport-width parent, and
	      some internal width/position/overflow value breaks once the
	      footer became a boxed 1100px column instead. Force it back to
	      a plain, fully visible block regardless of what GP's own CSS
	      is doing internally. -- */
	html body .site-footer .copyright-bar,
	html body .site-footer .inside-site-info,
	html body .site-footer .site-info {
		display: block !important;
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		opacity: 1 !important;
		visibility: visible !important;
		text-align: center !important;
		padding: 14px 16px !important;
		box-sizing: border-box !important;
	}

	/* -- Shared boxed width for the custom homepage/article blocks -- */
	.ahram-breaking-news,
	.ahram-article-layout,
	.ahram-home {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	/* -- Static/boxed homepage: hero row (slider + up to two small
	      widget boxes) then full-width category cards + a few latest
	      news cards below. Nothing here runs the full page height
	      anymore — matches the compact Sahifa-style reference design
	      instead of the earlier wide full-height sidebar layout. -- */
	.ahram-home {
		padding: 20px 16px 32px;
		box-sizing: border-box;
	}

	.ahram-hero-row {
		display: flex;
		gap: 20px;
		align-items: stretch;
	}

	.ahram-hero-row--no-sidebar {
		display: block;
	}

	.ahram-hero-row .ahram-hero-slider,
	.ahram-hero-row .ahram-hero-slider__slide,
	.ahram-hero-row .ahram-hero-slider__image {
		width: 100%;
		height: 380px;
		max-height: 380px;
	}

	.ahram-hero-row .ahram-hero-slider {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ahram-hero-row__sidebar {
		flex: 0 0 260px;
		width: 260px;
		overflow-y: auto;
		margin-top: 0;
	}

	.ahram-breaking-news__track {
		height: 40px;
		min-height: 40px;
	}

	.ahram-homepage-sidebar__widget {
		background: #f7f8fa;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		padding: 14px;
		margin-bottom: 16px;
	}

	.ahram-homepage-sidebar__widget-title {
		font-size: 15px;
		font-weight: 700;
		margin: 0 0 10px;
		color: #14264d;
	}

	/* -- Category cards: 4-per-row at desktop width instead of 2 -- */
	.ahram-cat-cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		margin-top: 24px;
	}

	.ahram-cat-cards__item {
		height: 120px;
	}

	.ahram-cat-cards__item span {
		padding: 12px 10px 14px;
		font-size: 16px;
	}

	/* -- Latest-news cards: 3-per-row at desktop width instead of 1 -- */
	.ahram-news-cards {
		margin-top: 32px;
	}

	.ahram-news-cards__header {
		margin-bottom: 16px;
	}

	.ahram-news-cards__title {
		font-size: 18px;
	}

	.ahram-news-cards__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.ahram-news-cards__image {
		height: 160px;
	}

	.ahram-news-cards__title-link {
		font-size: 15px;
	}

	.ahram-section__body {
		display: flex;
		gap: 32px;
	}

	.ahram-featured-post {
		flex: 1 1 60%;
		min-width: 0;
	}

	.ahram-section__subposts {
		flex: 1 1 40%;
		min-width: 0;
		border-top: 0;
		margin-top: 0;
	}

	/* -- Content column between two optional sidebars (right + left),
	      matching the homepage's arrangement. Plain "row" (not
	      row-reverse) is correct here: in RTL, source-order-first already
	      renders on the right, so row-reverse was actually flipping it to
	      the left — that was the bug that put the article sidebar on the
	      wrong side. -- */
	.ahram-article-layout {
		display: flex;
		flex-direction: row;
		gap: 28px;
		align-items: flex-start;
		padding: 0 16px;
	}

	.ahram-article-layout__main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ahram-article-layout__sidebar--right {
		flex: 0 0 240px;
		width: 240px;
		max-width: 240px;
	}

	.ahram-article-layout__sidebar--left {
		flex: 0 0 300px;
		width: 300px;
		max-width: 300px;
	}

	.ahram-article-sidebar__module {
		background: #f7f8fa;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		padding: 16px;
		margin-bottom: 20px;
		overflow: hidden; /* contain any widget content, e.g. a manually
		                      float:left'd image pasted into a text/HTML
		                      widget, so it can't escape into the article
		                      text next to it */
	}

	.ahram-article-sidebar__module::after {
		content: "";
		display: table;
		clear: both;
	}

	.ahram-article-sidebar__module img {
		float: none !important;
		display: block;
		max-width: 100%;
		height: auto;
	}

	.ahram-article-sidebar__module-title {
		font-size: 15px;
		font-weight: 700;
		margin: 0 0 14px;
		padding-bottom: 10px;
		border-bottom: 2px solid #f4a825;
		color: #14264d;
	}

	.ahram-related-posts {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ahram-related-posts__item + .ahram-related-posts__item {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid #e5e7eb;
	}

	.ahram-related-posts__link {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: #111;
	}

	.ahram-related-posts__image {
		width: 64px;
		height: 48px;
		object-fit: cover;
		flex: 0 0 auto;
		border: 1px solid #e5e7eb;
	}

	.ahram-related-posts__title {
		font-size: 13px;
		line-height: 1.5;
		font-weight: 600;
	}

	.ahram-related-posts__link:hover .ahram-related-posts__title {
		color: #1d4ed8;
	}
}

/* ==========================================================================
   Single article: title color (matches the logo's gold/orange) + a
   slightly smaller size, and smaller in-content H2 subheadings.
   ========================================================================== */

.single .entry-title {
	color: #f4a825;
	font-size: 26px;
	line-height: 1.25;
	text-align: right;
}

/* Justify body paragraphs so both edges line up evenly instead of a
   ragged "long line / short line" look. Uses !important because some
   imported/generated articles carry inline center-alignment styles on
   individual paragraphs that would otherwise override this. Headings
   stay right-aligned (the natural RTL reading start), not justified. */
.single .entry-content p {
	text-align: justify !important;
	text-align-last: right;
}

.single .entry-content h2,
.single .entry-content h3 {
	text-align: right !important;
}

.single .entry-content h2 {
	font-size: 20px;
	font-weight: 800;
	color: #111827; /* near-black, so it stands out clearly from body text */
	line-height: 1.5;
	margin-top: 28px;
}

@media (min-width: 992px) {
	.single .entry-title {
		font-size: 30px;
	}

	.single .entry-content h2 {
		font-size: 24px;
	}
}

/* ==========================================================================
   Mobile: full-bleed (edge-to-edge) breaking news bar + article image/
   title/body, instead of sitting inside GeneratePress's default padded
   container. Uses a viewport-breakout (100vw) so it works regardless of
   whatever padding the ancestor container has. Body text keeps a small
   16px gutter for readability; the colored bar + featured image go all
   the way to the screen edge.
   ========================================================================== */

@media (max-width: 991px) {

	.ahram-breaking-news {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.single .inside-article {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.single .entry-header,
	.single .entry-content {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   Single article: hide the "by [author]" byline next to the date in the
   top meta line (date stays, author name removed) — pure CSS, safe.
   ========================================================================== */

.single .entry-meta .byline {
	display: none;
}

/* ==========================================================================
   Category / tag archive listing pages (صفحة الأقسام)
   - Page title: same orange as the single article title, boxed like the
     gray share/print box under the article title.
   - Category intro/description: boxed the same way, right under the title.
   - Featured image on the listing: a light frame around the thumbnail.
   - "اقرأ المزيد" link appended to any excerpt the PHP force-trims.
   NOTE: .page-title / .post-image are GeneratePress's own class names —
   if any of these don't visually take effect on your site, tell me and
   I'll adjust the selector to match the actual markup.
   ========================================================================== */

.category .page-title,
.tag .page-title,
.archive .page-title {
	display: inline-block;
	color: #f4a825;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.4;
	background: #f3f4f6;
	border-right: 4px solid #f4a825;
	border-radius: 6px;
	padding: 10px 16px;
	margin-bottom: 10px;
}

.ahram-archive-intro {
	background: #f3f4f6;
	border-right: 4px solid #f4a825;
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0 0 24px;
	color: #374151;
	font-size: 15px;
	line-height: 1.8;
}

.category .post-image img,
.tag .post-image img,
.archive .post-image img {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 4px;
	background: #fff;
}

/* Each post's own title in the archive loop (not the page's H1) — same
   orange/size as the single article title. */
.category article .entry-title,
.tag article .entry-title,
.archive article .entry-title {
	font-size: 20px;
	line-height: 1.35;
}

.category article .entry-title a,
.tag article .entry-title a,
.archive article .entry-title a {
	color: #f4a825 !important;
}

.ahram-archive-readmore {
	color: #f4a825;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.ahram-archive-readmore:hover {
	text-decoration: underline;
}

@media (min-width: 992px) {
	.category .page-title,
	.tag .page-title,
	.archive .page-title {
		font-size: 26px;
	}
}