/*
 * Al Arabia News — corrections only.
 *
 * The site runs the BuzzVibe demo's own design, fonts and header. Nothing here
 * restyles any of that. Every rule below repairs something the demo import left
 * broken, or does something that was explicitly asked for.
 *
 * It lives in a plugin so a theme update cannot revert it and an
 * All-in-One WP Migration export carries it along.
 */

/* ------------------------------------------------------------------ *
 * 1. Article page: no ranking numbers.
 *
 * Foxiz numbers each headline in its "What's Hot" block with a CSS counter.
 * Beside the article body those figures read as part of the story.
 * ------------------------------------------------------------------ */

.single-post [class*='counter-el']::before {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	min-width: 0 !important;
}

.single-post [class*='counter-el'] {
	counter-increment: none !important;
}

/* The counter had reserved room to its left. */
.single-post [class*='ict-'] .entry-title {
	padding-left: 0 !important;
}

/* ------------------------------------------------------------------ *
 * 2. Menu and newsletter triggers.
 *
 * The demo loaded these icons from the theme author's server, which blocks
 * hotlinking (HTTP 403), so both buttons rendered as empty boxes. They now
 * point at local SVGs; Foxiz paints them as a mask tinted by the button
 * colour, so all that is needed here is a size and a usable tap target.
 * ------------------------------------------------------------------ */

.popup-trigger-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	min-height: 40px;
	cursor: pointer;
}

.popup-trigger-svg {
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.popup-trigger-label {
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * 3. The source line the importer appends under each syndicated summary.
 * ------------------------------------------------------------------ */

.enf-source {
	margin-top: 1.6em;
	padding-top: 0.9em;
	border-top: 1px solid rgba(128, 128, 128, 0.25);
	font-size: 0.875rem;
}

.enf-source a {
	font-weight: 600;
	text-decoration: none;
}

.enf-source a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 4. Layout guards.
 *
 * Wide tables and embeds inside syndicated summaries pushed the page
 * sideways on phones. They scroll inside their own box instead.
 * ------------------------------------------------------------------ */

.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
}

.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
	max-width: 100%;
}

.entry-content pre {
	overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 5. Masthead: keep the wordmark inside its own slot.
 *
 * A mark wider than the room the header's flex row gives it does not clip —
 * it overflows and lands on the first menu item. The sizing itself is set in
 * the widget (240px against a six-item menu); this is the guard that stops
 * any future mark spilling out of the slot.
 * ------------------------------------------------------------------ */

.the-logo,
.logo-wrap {
	max-width: 100%;
}

/*
 * !important is doing real work here. Elementor writes the widget's own
 * max-width at a higher specificity than any selector this file can reach, so
 * without it the mark keeps its full width and overflows the box the flex row
 * actually gave it.
 */
.the-logo img,
.logo-wrap img {
	max-width: 100% !important;
	height: auto;
	object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * 6. Search icon.
 *
 * Foxiz always renders <span class="search-icon-svg"> and relies on a
 * generated mask rule to give it a glyph. That rule is not being emitted,
 * so the span painted as a plain white block in the masthead. The glyph is
 * inlined here: no file to fetch and nothing to 404.
 * ------------------------------------------------------------------ */

.search-icon-svg {
	-webkit-mask-image: var(--aan-search-icon);
	mask-image: var(--aan-search-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

:root {
	--aan-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ *
 * 7. Mobile bar breathing room.
 *
 * The demo's mark was one line, so Foxiz lets the mobile logo run the full
 * height of the bar. Ours is two lines and taller, which left the red block
 * touching both edges. A little padding recentres it without changing the
 * bar's own design.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

	.header-mobile .mbnav {
		padding-top: 7px;
		padding-bottom: 7px;
	}

	.header-mobile .mobile-logo-wrap img {
		height: auto;
		max-height: 44px;
	}
}

/* ------------------------------------------------------------------ *
 * 8. The lead story card.
 *
 * The demo lays a plain white panel over the picture with no elevation, an
 * italic category line and a dashed rule. It reads flat next to the rest of
 * the page. This gives the panel real depth, turns the category into the
 * brand's own red label, and replaces the dash with a solid accent rule.
 *
 * Scoped to .block-overlay-flex, which is only ever the lead slot, so the
 * ordinary cards keep the demo's styling exactly.
 * ------------------------------------------------------------------ */

.block-overlay-flex .overlay-inner {
	/* The theme paints white through background-image; this only sits under it. */
	background-color: #fff;
	border-top: 4px solid var(--g-color, #ff1a1b);
	border-radius: 3px;
	padding: 38px 44px 42px;
	box-shadow:
		0 1px 2px rgba(19, 38, 61, 0.06),
		0 14px 30px -10px rgba(19, 38, 61, 0.18),
		0 36px 68px -28px rgba(19, 38, 61, 0.22);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.block-overlay-flex .p-wrap:hover .overlay-inner {
	transform: translateY(-4px);
	box-shadow:
		0 1px 2px rgba(19, 38, 61, 0.07),
		0 20px 40px -12px rgba(19, 38, 61, 0.22),
		0 48px 88px -32px rgba(19, 38, 61, 0.26);
}

/* Category: an italic sentence becomes a spaced red label. */
.block-overlay-flex .p-categories {
	margin-bottom: 14px;
}

.block-overlay-flex .p-categories .p-category {
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.16em;
	color: var(--g-color, #ff1a1b);
}

/* At 55px the demo's -3.3px tracking closes the letters up too far. */
.block-overlay-flex .entry-title {
	line-height: 1.06;
	letter-spacing: -0.018em;
}

/* A short solid rule instead of the dashed one. */
.block-overlay-flex .p-divider {
	width: 52px;
	height: 3px;
	padding: 0;
	margin: 20px 0 16px;
	border: 0;
	border-radius: 2px;
	background: var(--g-color, #ff1a1b);
}

.block-overlay-flex .p-divider::before,
.block-overlay-flex .p-divider::after {
	display: none;
}

.block-overlay-flex .entry-summary {
	font-size: 16px;
	line-height: 1.65;
}

/* A slow, small zoom on the picture; the panel stays put above it. */
.block-overlay-flex .p-featured {
	overflow: hidden;
	border-radius: 3px;
}

.block-overlay-flex .p-featured img {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
	will-change: transform;
}

.block-overlay-flex .p-wrap:hover .p-featured img {
	transform: scale(1.04);
}

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

	.block-overlay-flex .overlay-inner,
	.block-overlay-flex .p-featured img {
		transition: none;
	}

	.block-overlay-flex .p-wrap:hover .overlay-inner,
	.block-overlay-flex .p-wrap:hover .p-featured img {
		transform: none;
	}
}

/* On a phone the panel is full width, so the deep shadow only muddies it. */
@media (max-width: 767px) {

	.block-overlay-flex .overlay-inner {
		padding: 26px 24px 28px;
		box-shadow: 0 8px 20px -8px rgba(19, 38, 61, 0.2);
	}

	/*
	 * The theme hides the summary on phones, which leaves the accent rule as the
	 * last thing in the panel — its bottom margin then stacked on the panel's own
	 * padding and opened a band of empty white.
	 */
	.block-overlay-flex .p-divider:last-child,
	.block-overlay-flex .entry-summary.mobile-hide {
		margin-bottom: 0;
	}

	.block-overlay-flex .p-divider {
		margin: 16px 0 0;
	}

	.block-overlay-flex .entry-summary {
		font-size: 15px;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Touch targets in the mobile bar.
 *
 * Foxiz sizes the search and menu triggers to their glyphs — measured at
 * 29x19 and 34x16 on a phone, well under the 44px both Apple and Google
 * ask for. The icons keep their size; only the hit area grows.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {

	.header-mobile .navbar-right > a.mobile-menu-trigger,
	.header-mobile .mobile-toggle-wrap > a.mobile-menu-trigger,
	.header-mobile .navbar-left > a,
	.header-mobile .mobile-search-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* The row already reserves height; keep the two buttons from colliding. */
	.header-mobile .navbar-right {
		display: flex;
		align-items: center;
		gap: 2px;
	}
}

/* ------------------------------------------------------------------ *
 * 10. Footer links, matched to the masthead.
 *
 * Both already use Rajdhani, but the footer sat at 18px / 500 with no case
 * change while the header runs 25px / 700 lowercase with -1px tracking, so
 * the two read as different type systems. The footer now follows the header,
 * stepping down on narrower screens where 25px in a column is too heavy.
 *
 * Scoped through .footer-wrap rather than the template's own id class, so it
 * survives the footer being rebuilt or re-imported under a new post id.
 * ------------------------------------------------------------------ */

.footer-wrap .sidebar-menu > li > a,
.footer-wrap .sidebar-menu > li > a > span {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -1px;
	text-transform: lowercase;
}

/* Bigger type needs the rows to breathe, or the underlines crowd together. */
.footer-wrap .sidebar-menu > li > a {
	padding-top: 4px;
	padding-bottom: 7px;
}

@media (max-width: 1024px) {

	.footer-wrap .sidebar-menu > li > a,
	.footer-wrap .sidebar-menu > li > a > span {
		font-size: 22px;
	}
}

@media (max-width: 767px) {

	.footer-wrap .sidebar-menu > li > a,
	.footer-wrap .sidebar-menu > li > a > span {
		font-size: 20px;
	}
}

/* ------------------------------------------------------------------ *
 * 11. Footer legal strip.
 *
 * The demo ended the footer on a slab of near-white beneath the dark
 * footer body, and put two unrelated things on it: a second copy of the
 * masthead — the logo already opens the footer directly above — hard left,
 * and a centred line of body serif at 0.7 opacity. The colour change read
 * as a seam between two pages rather than as the end of one, and neither
 * element lined up with anything.
 *
 * The strip now closes the footer instead of interrupting it: same ground,
 * divided by a hairline, notice on the left, legal links on the right. Type
 * moves to the site's existing micro-label tier — Oswald, the family the
 * article meta already uses — so the bar reads as chrome, not as prose.
 *
 * The logo and the links themselves are handled in PHP (AAN_Footer), which
 * clears the duplicate logo and fills the strip's menu from the legal pages
 * that actually exist.
 *
 * --aan-footer-ground has to track the Elementor footer container's own
 * background; that colour is the one thing the two halves share. Both are
 * fixed in light and dark alike, so the muted tones below hold in either.
 * ------------------------------------------------------------------ */

.footer-wrap {
	--aan-footer-ground: #0b1016;
	--aan-footer-rule: rgba(255, 255, 255, 0.1);
	--aan-footer-muted: #7d8794;
	--aan-footer-link: #b9c2ce;
	background-color: var(--aan-footer-ground);
}

/* The theme paints this band on its own; one ground for the whole footer. */
.footer-wrap .footer-inner.footer-has-bg {
	background-color: transparent;
}

/*
 * A rule inside the content column, not a full-bleed band, so the division
 * lines up with the columns above it. Foxiz drops its own border when the
 * footer is an Elementor template, which is how this footer is built.
 */
.footer-wrap .footer-copyright .copyright-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 40px;
	padding: 20px 0 22px;
	border-top: 1px solid var(--aan-footer-rule);
}

.footer-wrap .footer-copyright .copyright {
	margin: 0;
	font-family: var(--meta-family);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--aan-footer-muted);
	opacity: 1;
}

.footer-wrap .footer-copyright .copyright-menu {
	display: flex;
	align-items: center;
	gap: 6px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-flow: row wrap;
}

/*
 * Foxiz separates these with a 4px square at 0.2 opacity. On the dark ground
 * it reads as a speck rather than as a divider, and its own margins sat on top
 * of the gap above, so the spacing between links came out uneven. Spacing
 * alone does the separating.
 */
.footer-wrap .footer-copyright .copyright-menu > li:before {
	display: none;
}

/* Small caps with open tracking: the standard tier for a legal row, and
   distinct enough from the lowercase section columns above to read as a
   different kind of link rather than as more of the same. */
.footer-wrap .footer-copyright .copyright-menu a {
	font-family: var(--meta-family);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aan-footer-link);
	transition: color 0.18s ease;
}

.footer-wrap .footer-copyright .copyright-menu a:hover {
	color: var(--g-color);
}

.footer-wrap .footer-copyright .copyright-menu a:focus-visible {
	outline: 2px solid var(--g-color);
	outline-offset: 3px;
}

/* Foxiz already reverses the stack here, which puts the links above the
   notice; all that is missing is room to tap them. */
@media (max-width: 767px) {

	.footer-wrap .footer-copyright .copyright-inner {
		gap: 10px;
		padding: 18px 0 24px;
		justify-content: center;
	}

	.footer-wrap .footer-copyright .copyright-menu {
		justify-content: center;
		gap: 0 28px;
	}

	.footer-wrap .footer-copyright .copyright-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 34px;
	}
}