/*
 * 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 type and colour.
 *
 * Two separate faults, both from the demo.
 *
 * Colour: the footer body is painted near-black by the Elementor template,
 * but the theme was still running its light colour scheme over it, so every
 * word came out #282828 on #0b1016 — a contrast ratio of about 1.3:1, which
 * is not a dim link, it is an invisible one. Switching the scheme fixes the
 * inherited case; the values below are explicit because the demo also wrote
 * colours onto individual widgets, and those beat an inherited scheme.
 *
 * Type: the link columns ran at 25px / 700 / lowercase with -1px tracking —
 * sized to match the BuzzVibe masthead this site no longer uses. Beside the
 * current header, which is Inter 16px / 500 in sentence case, they read as a
 * different site. The columns now follow the masthead, as asked, and the
 * headings sit a tier above them in small caps so a column still has a top.
 *
 * Scoped through .footer-wrap rather than the template's own id class, so
 * this survives the footer being rebuilt under a new post id.
 * ------------------------------------------------------------------ */

.footer-wrap {
	--aan-footer-heading: #ffffff;
	--aan-footer-body: #98a3b1;
}

/* --- headings: the top of a column --- */

/* Foxiz wraps the label in a bare <span> inside the h4, and that span
   inherits the near-black the whole footer was stuck on, so colouring the
   heading alone leaves the visible text unchanged. */
.footer-wrap .heading-title,
.footer-wrap .heading-title > span,
.footer-wrap .heading-inner .heading-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aan-footer-heading);
}

/* --- link columns: the masthead's own settings --- */

.footer-wrap .sidebar-menu > li > a,
.footer-wrap .sidebar-menu > li > a > span {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--aan-footer-link);
}

.footer-wrap .sidebar-menu > li > a {
	padding-top: 3px;
	padding-bottom: 3px;
	transition: color 0.18s ease;
}

.footer-wrap .sidebar-menu > li > a:hover,
.footer-wrap .sidebar-menu > li > a:hover > span,
.footer-wrap .sidebar-menu > li > a:focus-visible {
	color: var(--aan-footer-heading);
}

/* --- the brand paragraph and the newsletter note --- */

.footer-wrap .elementor-widget-text-editor,
.footer-wrap .elementor-widget-text-editor p,
.footer-wrap .wpcf7 p,
.footer-wrap .newsletter-note,
.footer-wrap .footer-newsletter-text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--aan-footer-body);
}

.footer-wrap .elementor-widget-text-editor a,
.footer-wrap .wpcf7 a {
	color: var(--aan-footer-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * The "Popular sections:" strip. Foxiz builds it as .qlinks-inner holding
 * .qlink elements that also carry .h5 — so the links inherit heading colour,
 * which on this ground is the same near-black everything else was.
 */

.footer-wrap .qlinks-inner,
.footer-wrap .qlinks-header,
.footer-wrap .qlinks-inner > span {
	font-size: 13px;
	color: var(--aan-footer-body);
}

.footer-wrap .qlinks-inner .qlink,
.footer-wrap .qlinks-inner .qlink a,
.footer-wrap .qlinks-inner a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--aan-footer-link);
	transition: color 0.18s ease;
}

.footer-wrap .qlinks-inner .qlink a:hover,
.footer-wrap .qlinks-inner a:hover {
	color: #ffffff;
}

/* --- social row --- */

/* The Elementor social widget renders into .e-social-holder. */
.footer-wrap .social-list a,
.footer-wrap .footer-social-list a,
.footer-wrap .e-social-holder a {
	color: var(--aan-footer-link);
	transition: color 0.18s ease;
}

.footer-wrap .social-list a:hover,
.footer-wrap .footer-social-list a:hover,
.footer-wrap .e-social-holder a:hover {
	color: var(--aan-footer-heading);
}

/*
 * The subscribe field is a light control on a dark ground; left at the
 * theme's defaults it renders as a white slab with invisible placeholder
 * text. A hairline box on the footer's own ground keeps it legible and
 * stops it dominating the column.
 */

.footer-wrap .wpcf7-form input[type="email"],
.footer-wrap .wpcf7-form input[type="text"] {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--aan-footer-rule);
	color: #ffffff;
}

.footer-wrap .wpcf7-form input::placeholder {
	color: var(--aan-footer-muted);
	opacity: 1;
}

.footer-wrap .wpcf7-form input[type="email"]:focus {
	border-color: var(--aan-footer-link);
	outline: none;
}

/* --- narrower screens --- */

@media (max-width: 1024px) {

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

/*
 * On a phone the columns stack, so the link rows become the primary way
 * through the footer and need to be thumb-sized rather than merely readable.
 */
@media (max-width: 767px) {

	.footer-wrap .sidebar-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding-top: 0;
		padding-bottom: 0;
	}
}

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

/* ------------------------------------------------------------------ *
 * 12. The article page.
 *
 * Two measured problems, both about reading rather than layout.
 *
 * Size: body copy ran 15px up to 1024px and 16px above it. A news page is
 * read start to finish, not scanned like the front page, and 15px over a
 * 722px column put the measure at 96 characters a line — past the 45-85
 * band where the eye reliably finds the next line. Raising the type is the
 * fix that costs nothing: the column keeps its width, the measure comes
 * down to the mid-eighties, and the page reads as a publication rather
 * than as a feed.
 *
 * Rhythm: the theme sets 1.6 line height, which is tight for 17px prose.
 * 1.75 with real space between paragraphs gives the column somewhere to
 * breathe, and the difference is what separates a story page that looks
 * considered from one that looks generated.
 *
 * Everything here is scoped to .single-post, so archives and the front page
 * keep their own denser settings.
 * ------------------------------------------------------------------ */

.single-post .entry-content p,
.single-post .entry-content li {
	font-size: 17px;
	line-height: 1.75;
}

.single-post .entry-content p {
	margin-bottom: 1.35em;
}

/* The standfirst under the headline: one step up, so the eye starts there. */
.single-post .entry-summary,
.single-post .entry-summary p {
	font-size: 19px;
	line-height: 1.6;
}

/* Subheads inside a story need air above them, not merely bold weight. */
.single-post .entry-content h2,
.single-post .entry-content h3 {
	margin-top: 1.7em;
	margin-bottom: 0.6em;
}

.single-post .entry-content blockquote {
	line-height: 1.6;
}

/*
 * The source credit the importer appends. It is attribution, not prose, so it
 * steps down to the meta tier and separates itself from the story above with a
 * rule rather than by sitting in the paragraph flow.
 */
.single-post .entry-content p > a[href^="http"]:only-child {
	text-underline-offset: 3px;
}

@media (max-width: 767px) {

	.single-post .entry-content p,
	.single-post .entry-content li {
		font-size: 16px;
		line-height: 1.7;
	}

	.single-post .entry-summary,
	.single-post .entry-summary p {
		font-size: 17px;
	}
}

/* ------------------------------------------------------------------ *
 * 13. The masthead search.
 *
 * The field used to be the fourth widget in the left column, behind the
 * logo, the menu and the bell. An Elementor column lays out as a wrapping
 * flex row, and the search is a fixed width, so it never fit beside the
 * other three and dropped onto a line of its own beneath the logo — a whole
 * extra row that existed only to hold it. It now sits in the right column of
 * the top line, with the social icons closing the row after it, which is the
 * arrangement in the reference.
 *
 * Two things have to be said explicitly.
 *
 * The wrapper is made a flex row so the field lines up with the logo beside
 * it rather than sitting on the text baseline — but a flex child shrinks to
 * its content by default, so .elementor-widget-container is told to take the
 * width it was given. Without that the field renders at about 240px inside a
 * 380px slot and clips its own placeholder.
 *
 * And the split has to clear what the left column actually needs. Measured
 * at the narrowest width the theme still draws this masthead (1025px), the
 * logo, menu and bell come to 854px against a 1010px content width — no
 * slack at all. 70/30 holds from 1280px up, where the content width is
 * pinned at 1260px. Between the two the column widens and the wordmark steps
 * down to 150px; it is a two-line mark, so it loses height, not legibility.
 * Below 1025px the phone masthead takes over with its own search control.
 * ------------------------------------------------------------------ */

.header-wrap .elementor-widget-foxiz-search-icon {
	display: flex;
	align-items: center;
	margin-left: auto;
}

/* A flex child shrinks to content unless it is told otherwise. */
.header-wrap .elementor-widget-foxiz-search-icon > .elementor-widget-container {
	flex: 1 1 auto;
	width: 100%;
}

.header-wrap .elementor-widget-foxiz-search-icon .header-search-form,
.header-wrap .elementor-widget-foxiz-search-icon .rb-search-form,
.header-wrap .elementor-widget-foxiz-search-icon .search-form-inner {
	width: 100%;
}

/* The row: field first, icons after it, both centred against the logo. */
.header-wrap .elementor-top-section:first-of-type > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.header-wrap .elementor-widget-foxiz-social-list {
	flex: 0 0 auto;
}

/*
 * The follow widgets have been removed from every template, so the field has
 * the right-hand column to itself. This stays as a backstop: re-importing a
 * demo would put a social row back into the masthead, and it would push the
 * search field off the right edge before anyone noticed.
 */
.header-wrap .elementor-widget-foxiz-social-list,
.header-wrap .elementor-widget-foxiz-social-follower,
.header-wrap .header-social-list,
.header-mobile .social-list,
.footer-wrap .elementor-widget-foxiz-social-list,
.footer-wrap .elementor-widget-foxiz-social-follower,
.footer-wrap .header-social-list,
.footer-wrap .footer-social-list,
.social-follower,
.socials-counter {
	display: none !important;
}

@media (min-width: 1025px) and (max-width: 1279px) {

	.header-wrap .elementor-top-section:first-of-type > .elementor-container > .elementor-column:first-child {
		width: 78%;
	}

	.header-wrap .elementor-top-section:first-of-type > .elementor-container > .elementor-column:last-child {
		width: 22%;
	}

	.header-wrap .the-logo img {
		max-width: 150px !important;
	}

	.header-wrap .elementor-widget-foxiz-search-icon {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------------------ *
 * 14. The article page: one column, one measure.
 *
 * The template builds a story from three containers of three different
 * widths, and at 1440px they landed like this:
 *
 *     headline block   860px, text starting at x=283
 *     featured picture 1385px, starting at x=20
 *     body text        702px, starting at x=401
 *
 * Three left edges and three measures on one page. The picture was almost
 * twice the width of the words under it, so it read as the subject and the
 * reporting as its caption; and with nothing sharing an edge the eye had to
 * find the start of the line three times on the way down.
 *
 * Everything now sits on one column, 720px of text. Bringing the picture down
 * to that width is the change that does most of the work: it stops competing
 * with the headline, and the page reads as one piece rather than a banner with
 * notes beneath it. 720px at the 17px set in section 12 is about 83 characters
 * a line, inside the 45-85 band where the eye reliably finds the next line.
 *
 * The arithmetic, so the three agree exactly:
 *
 *     .s-ct carries 30px of padding a side, so 720 + 60 = 780 for the column;
 *     the header containers carry 20px a side, so 720 + 40 = 760.
 *
 * Both centre, so all three text edges land on the same x.
 *
 * The theme sets .s-ct to a fixed 840px and gives it an explicit left margin,
 * which is why these two declarations have to be emphatic — they are replacing
 * a computed width, not a default.
 * ------------------------------------------------------------------ */

.single-post {
	--aan-measure: 720px;
	--aan-rail: 104px;
}

.single-post .single-header .rb-small-container,
.single-post .single-header .rb-wide-container {
	max-width: calc(var(--aan-measure) + 40px);
	margin-inline: auto;
}

.single-post .s-ct {
	max-width: calc(var(--aan-measure) + 60px) !important;
	margin-inline: auto !important;
	position: relative;
}

/* The picture fills the column exactly, never more. */
.single-post .s-feat img,
.single-post .s-feat picture,
.single-post .featured-lightbox-trigger img {
	width: 100%;
	height: auto;
}

/* --- vertical rhythm: the page's only structure is its spacing --- */

.single-post .single-header .rb-small-container {
	padding-bottom: 26px;
}

.single-post .entry-title {
	margin-bottom: 18px;
}

.single-post .single-header .rb-wide-container {
	padding-bottom: 34px;
}

/* The caption is a note about the picture, not part of the story. */
.single-post .s-feat-caption,
.single-post .featured-caption,
.single-post figcaption {
	margin-top: 10px;
	font-family: var(--meta-family);
	font-size: 13px;
	line-height: 1.5;
	color: var(--sub-color, #6b7280);
	text-align: left;
}

/*
 * The byline avatar was 60px against 13px type — taller than the two lines of
 * text beside it. At 40px it sits inside the meta row instead of setting its
 * height.
 */
.single-post .single-meta .meta-avatar img,
.single-post .smeta-in .meta-avatar img {
	width: 40px;
	height: 40px;
}

/* --- the share rail, moved into the margin --- */

/*
 * The rail is an inline flex sibling of the article body and was taking 108px
 * off its left — that is where the body's third left edge came from. Lifting
 * it out of the flow gives the column back and leaves the rail where a reader
 * expects it. It carries the class "show-mobile" at every width, so that class
 * cannot be used to tell the two cases apart; the window width can.
 */
@media (min-width: 1200px) {

	.single-post .s-ct-inner {
		display: block;
	}

	.single-post .l-shared-sec-outer {
		position: absolute;
		top: 0;
		left: calc(var(--aan-rail) * -1);
		width: 78px;
		margin: 0;
	}

	.single-post .e-ct-outer {
		width: 100%;
	}
}

/*
 * Between 768px and 1199px there is no margin left to put the rail in, and
 * leaving it in the flow pushes the body off the column again — at 1024px that
 * measured 891px of text, about 105 characters a line, well past the point
 * where the eye starts losing its place.
 *
 * So the rail goes at those widths and the column keeps its measure. Nothing
 * is lost: the same controls sit above the story and again at its end, which
 * is where a reader on a narrower screen reaches for them anyway.
 */
@media (min-width: 768px) and (max-width: 1199px) {

	.single-post .l-shared-sec-outer {
		display: none;
	}

	.single-post .s-ct-inner {
		display: block;
	}

	/*
	 * The header containers pad 20px a side and .s-ct pads 30px. Once both
	 * stop being centred in spare room and start meeting the window edge,
	 * that 10px difference shows up as the body sitting proud of the
	 * headline above it. Same padding, same max-width, same edge.
	 */
	.single-post .s-ct {
		max-width: calc(var(--aan-measure) + 40px) !important;
		padding-inline: 20px;
	}
}

/* On a phone the column is the screen, and the theme already handles that. */
@media (max-width: 767px) {

	.single-post {
		--aan-measure: 100%;
	}

	.single-post .s-ct {
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------------------ *
 * 15. Share controls, in the site's own colours.
 *
 * Foxiz paints each share button in its network's brand colour. That reads
 * as intended while Facebook blue and X black are in the row; with those
 * removed, what is left is a teal "copy link" and a bright blue "print" —
 * two colours belonging to nothing, sitting under a navy masthead.
 *
 * They become quiet controls: a hairline on the page's own ground, and the
 * accent only on hover, where it means something.
 * ------------------------------------------------------------------ */

.single-post .share-action.icon-copy,
.single-post .share-action.icon-print,
.single-post .share-action.icon-email,
.single-post .share-action.native-share-trigger {
	background-color: transparent;
	color: var(--body-fcolor, #1a1a1a);
	border: 1px solid var(--flex-gray-15, rgba(0, 0, 0, 0.12));
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.single-post .share-action.icon-copy:hover,
.single-post .share-action.icon-print:hover,
.single-post .share-action.icon-email:hover,
.single-post .share-action.native-share-trigger:hover {
	background-color: var(--g-color);
	border-color: var(--g-color);
	color: #ffffff;
}

/* The wider "Share This Article" row uses filled pills; same treatment. */
.single-post .e-shared-sec .share-action,
.single-post .rbbsl .share-action {
	background-color: transparent;
	color: var(--body-fcolor, #1a1a1a);
	border: 1px solid var(--flex-gray-15, rgba(0, 0, 0, 0.12));
}

.single-post .e-shared-sec .share-action:hover,
.single-post .rbbsl .share-action:hover {
	background-color: var(--g-color);
	border-color: var(--g-color);
	color: #ffffff;
}

/*
 * The rail in the margin was a white card with a shadow, which on a white
 * page is a box drawn around nothing. A hairline is enough to group it.
 */
@media (min-width: 1200px) {

	.single-post .l-shared-sec {
		background-color: transparent;
		box-shadow: none;
		border: 1px solid var(--flex-gray-15, rgba(0, 0, 0, 0.1));
		border-radius: 10px;
	}
}

/* ------------------------------------------------------------------ *
 * 16. The sticky masthead.
 *
 * The theme's stickyHeaderBuilder lifts the top row out of the page and
 * fixes it once the reader scrolls past it. The row carries no background
 * of its own — in the page it sits on the header's white ground — so once
 * it is fixed, the article cards scroll underneath and read straight
 * through it.
 *
 * The bar is given the ground it was borrowing, and a hairline instead of a
 * shadow: it needs to be separated from the page, not raised above it.
 * ------------------------------------------------------------------ */

.header-wrap.header-template .e-section-sticky.elementor-sticky--effects,
.header-wrap.header-template .e-section-sticky.is-sticky,
body.sticky-on .header-wrap.header-template .e-section-sticky {
	background-color: var(--nav-bg, #ffffff);
	border-bottom: 1px solid var(--flex-gray-15, rgba(0, 0, 0, 0.1));
	backdrop-filter: none;
}

/* The row is padded for a two-line masthead; fixed, it only needs one. */
body.sticky-on .header-wrap.header-template .e-section-sticky > .elementor-container {
	padding-block: 4px;
}