/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra Child Theme
Author: Brainstorm Force
Author URI: https://wpastra.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* --------------------------------------------------------------------------
 * Desktop Spacing Overrides
 * ----------------------------------------------------------------------- */
@media (min-width: 922px) {
	.league-results-wrapper,
	.fmf-all-standings {
		margin-top: 40px !important;
	}
}

/* --------------------------------------------------------------------------
 * Top Header Customizations (Social Icons & Small Logo)
 * ----------------------------------------------------------------------- */

/* 1. Social Icons (Top Left) - White color and fill for high contrast */
.ast-header-social-1-wrap .ast-builder-social-element svg,
.ast-header-social-1-wrap .ast-builder-social-element i,
.ast-header-social-1-wrap .ast-builder-social-element,
.ast-header-social-1-wrap .ast-social-color-type-official .ast-builder-social-element svg,
.ast-header-social-1-wrap .ast-social-color-type-custom svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}

/* Adjust size and spacing for social icons */
.ast-header-social-1-wrap .ast-builder-social-element svg {
	width: 22px !important;
	height: 22px !important;
}

.ast-header-social-1-wrap .ast-builder-social-element i {
	font-size: 22px !important;
}

.ast-header-social-1-wrap .ast-builder-social-element {
	margin: 0 8px !important;
}

/* 2. Small Circular Logo (Top Right) - Original Colors with White Badge Container */
/* Targets the container to create a white circular badge */
.ast-header-site-identity .site-logo-img,
.ast-header-site-identity .custom-logo-link,
.site-header .site-branding .site-logo-img {
	background-color: #ffffff !important;
	/* Responsive size: Larger on desktop, smaller on mobile */
	width: clamp(55px, 7vw, 75px) !important;
	height: clamp(55px, 7vw, 75px) !important;
	border-radius: 50% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
	padding: 10px !important;
	transition: all 0.3s ease !important;
	/* Shift slightly to the left from the right edge */
	margin-right: 25px !important;
	margin-left: 10px !important;
}

.ast-header-site-identity .site-logo-img:hover,
.ast-header-site-identity .custom-logo-link:hover {
	transform: scale(1.08) !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

/* Restore original colors for the logo image */
.ast-header-site-identity .site-logo-img img,
.ast-header-site-identity .custom-logo-link img,
.ast-header-site-identity .ast-site-identity .site-logo-img img,
.site-header .site-branding .site-logo-img img {
	filter: none !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Restore original colors for SVG logos */
.ast-header-site-identity .site-logo-img svg,
.ast-header-site-identity .custom-logo-link svg,
.site-header .site-branding .site-logo-img svg {
	fill: initial !important;
	color: initial !important;
	max-width: 100% !important;
	height: auto !important;
}

/* 3. Remove Header Borders and Dividers (White Line on the left/right) */
.site-header, 
.main-header-bar, 
.ast-header-bar, 
.ast-above-header-bar, 
.ast-below-header-bar,
.ast-header-divider,
.ast-divider-wrapper,
.ast-builder-grid-row-container-inner,
.ast-header-social-1-wrap,
.ast-masthead-container,
.site-header-focus-item {
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	border: none !important;
}

/* --------------------------------------------------------------------------
 * Custom mobile responsiveness overrides
 * ----------------------------------------------------------------------- */

@media (max-width: 921px) {
	/* Remove header spacing on mobile */
	.site-header,
	.main-header-bar,
	.ast-above-header-bar,
	.ast-below-header-bar {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: auto !important;
	}

	/* Remove gap between header and content */
	.main-header-bar {
		margin-bottom: 0 !important;
	}

	/* Remove content area spacing */
	#content, .site-content, #primary {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* Remove hero section top padding */
	.hero-custom-section {
		padding-top: 0 !important;
	}

	.ast-theme-transparent-header .main-header-bar, .ast-theme-transparent-header .ast-masthead-custom-menu-items {
		background-color: #ffffff;
	}

	.ast-mobile-popup-content .main-header-menu .current-menu-item .menu-link {
		color: #0073aa;
	}

	.ast-mobile-popup-content .main-header-menu .menu-item {
		text-align: center;
	}

	.ast-mobile-popup-content .main-header-menu .menu-item .menu-link {
		padding: 1em 1.5em;
	}

	.ast-mobile-popup-content .main-header-menu .menu-item .menu-link {
		color: #333333;
	}

	.ast-mobile-menu-trigger, .ast-mobile-menu-trigger .ast-icon, .ast-mobile-header-icons .ast-icon {
		color: #333333;
	}


	/* General mobile layout & scrolling */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}
	/* Prevent content from sliding under transparent header */
	.ast-header-break-point .site-content,
	.ast-header-break-point .content-area,
	.ast-header-break-point .entry-content,
	.ast-header-break-point .ast-container {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	/* Ensure containers don't exceed viewport width */
	.ast-container,
	.ast-container-fluid,
	.ast-row,
	.site-content,
	.content-area,
	.entry-content {
		max-width: 100vw;
		overflow-x: hidden;
	}

	.ast-container,
	.ast-container-fluid,
	.ast-row {
		max-width: 100%;
		overflow-x: hidden;
	}

	img,
	video,
	iframe {
		max-width: 100%;
		height: auto;
	}

	/* Typography – scale headings down on small screens */
	h1,
	.entry-content h1 {
		font-size: 1.4rem;
		line-height: 1.3;
		color: #333333 !important;
	}

	h2,
	.entry-content h2 {
		font-size: 1.25rem;
		line-height: 1.35;
		color: #333333 !important;
	}

	h3,
	.entry-content h3 {
		font-size: 1.1rem;
		line-height: 1.4;
		color: #333333 !important;
	}

	h4,
	.entry-content h4 {
		font-size: 1rem;
		line-height: 1.45;
		color: #333333 !important;
	}

	/* Ensure all navigation headings / menu titles are high-contrast on mobile */
	.ast-header-break-point .main-header-bar,
	.ast-header-break-point .site-header {
		color: #ffffff;
	}

	/* Header – logo alignment on mobile */
	.ast-header-break-point .site-branding,
	.ast-header-break-point .ast-site-identity {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.ast-header-break-point .site-logo-img img,
	.ast-header-break-point .custom-logo-link img {
		max-height: 52px;
		width: auto;
	}

	/* Mobile menu container styling */
	.ast-header-break-point .main-header-bar-navigation {
		background-color: #111111 !important;
	}

	/* Ensure any Astra mobile/off-canvas drawer uses a dark background */
	.ast-header-break-point .ast-mobile-popup-drawer,
	.ast-header-break-point .ast-mobile-popup-content,
	.ast-header-break-point .ast-above-header,
	.ast-header-break-point .ast-below-header {
		background-color: #111111 !important;
	}

	/* Menu list and items inside drawer */
	.ast-header-break-point .main-header-bar-navigation .main-header-menu {
		background-color: #111111 !important;
	}

	.ast-header-break-point .main-header-bar-navigation .main-header-menu > .menu-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link:visited {
		color: #ffffff !important;
	}

	/* Active / hovered menu items in gold */
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link:hover,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-link:focus,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .current-menu-item > .menu-link,
	.ast-header-break-point .main-header-bar-navigation .current-menu-ancestor > .menu-link {
		color: #111111 !important;
		background-color: #f8d15c !important;
	}

	.ast-header-break-point .main-header-menu-toggle {
		color: #ffffff;
		border-color: rgba(255, 255, 255, 0.25);
		background-color: #111111;
	}

	/* Sub-menu behaviour – collapsed by default with toggle icon */
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .menu-link {
		position: relative;
	}

	/* Hide all sub-menus by default on mobile */
	.ast-header-break-point .main-header-bar-navigation .sub-menu,
	.ast-header-break-point .main-header-bar-navigation .children {
		display: none;
	}

	/* Show only when parent is explicitly expanded via JS (AstraToggleSubMenu) */
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children.ast-submenu-expanded > .sub-menu,
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children.ast-submenu-expanded > .children {
		display: block;
	}

	/* Position the toggle button (the .ast-menu-toggle element) */
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		inset-inline-end: 0.75rem;
		background: transparent;
		border: none;
		width: 1.75rem;
		height: 1.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	/* Visual icon for the toggle (plus / minus) */
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .ast-menu-toggle::before {
		content: "+";
		color: #ffffff;
		font-size: 1.1rem;
		line-height: 1;
	}

	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children.ast-submenu-expanded > .ast-menu-toggle::before {
		content: "−";
	}

	/* Keep enough touch target spacing for the parent item text */
	.ast-header-break-point .main-header-bar-navigation .menu-item-has-children > .menu-link {
		padding-inline-end: 3rem;
	}

	/* Sub-menu background & text contrast */
	.ast-header-break-point .main-header-bar-navigation .sub-menu,
	.ast-header-break-point .main-header-bar-navigation .children {
		background-color: #181818;
	}

	.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-link,
	.ast-header-break-point .main-header-bar-navigation .children .menu-link {
		color: #ffffff !important;
	}

	.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-link:hover,
	.ast-header-break-point .main-header-bar-navigation .children .menu-link:hover {
		color: #f8d15c !important;
	}

	/* Ensure الدوري الممتاز and similar Arabic menu items and sub-items inherit high-contrast color */
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item > .menu-link,
	.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item-has-children > .menu-link,
	.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item > .menu-link {
		color: #ffffff !important;
	}

	/* If there is a body overlay when mobile menu is open, keep it dark but not washing out text */
	body.ast-main-header-nav-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 10;
		pointer-events: none;
	}

	/* Keep the navigation wrapper above the overlay so text remains fully visible */
	body.ast-main-header-nav-open .main-header-bar,
	body.ast-main-header-nav-open .site-header {
		position: relative;
		z-index: 20;
	}

	/* League results pages – mobile typography & spacing */
	.league-results-wrapper .round h2 {
		font-size: 1.2rem !important;
		margin-bottom: 20px !important;
	}

	.league-results-wrapper .standings-toggle {
		font-size: 0.95rem !important;
		padding: 10px 14px !important;
	}

	.league-results-wrapper .match-card {
		width: 100% !important;
		max-width: 320px;
		padding: 16px 12px !important;
	}

	.league-results-wrapper .teams {
		gap: 14px !important;
	}

	.league-results-wrapper .team {
		min-height: 140px !important;
	}

	.league-results-wrapper .team-name {
		font-size: 0.85rem !important;
	}

	.league-results-wrapper .score {
		font-size: 1rem !important;
		padding: 6px 10px !important;
	}

	.league-results-wrapper .details {
		font-size: 0.85rem !important;
		line-height: 1.5 !important;
	}

	.standings-table {
		width: 100% !important;
		table-layout: fixed !important;
		border-collapse: collapse !important;
		font-family: "Tajawal", sans-serif !important;
	}

	.standings-table th, .standings-table td {
		padding: 14px 4px !important;
		font-size: clamp(13px, 4vw, 15px) !important;
		text-align: center !important;
		vertical-align: middle !important;
	}

	/* Footer – stack columns vertically on mobile */
	.ast-header-break-point .site-footer .ast-row {
		display: flex;
		flex-wrap: wrap;
	}

	.ast-header-break-point .site-footer .ast-row > [class*="ast-col-"],
	.ast-header-break-point .site-footer .ast-footer-widget-area > .ast-row > div,
	.ast-header-break-point .site-footer .footer-adv-widget-1,
	.ast-header-break-point .site-footer .footer-adv-widget-2,
	.ast-header-break-point .site-footer .footer-adv-widget-3,
	.ast-header-break-point .site-footer .footer-adv-widget-4 {
		width: 100% !important;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.ast-header-break-point .site-footer {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
 * Service blocks – sports-themed Font Awesome icons (نتائج حية، ترتيب، ملاعب، الإحصائيات)
 * Target: .wp-block-columns that has id="services" (HTML anchor on Columns block).
 * ----------------------------------------------------------------------- */
#services.wp-block-columns figure,
#services.wp-block-columns .wp-block-image,
#services.wp-block-columns .wp-block-column figure,
#services.wp-block-columns .wp-block-column .wp-block-image,
#services.wp-block-columns .wp-block-column figure img {
	display: none !important;
}

#services.wp-block-columns .wp-block-column,
.fmf-services-section .wp-block-columns .wp-block-column {
	position: relative;
	text-align: center;
}

#services.wp-block-columns .wp-block-column::before,
.fmf-services-section .wp-block-columns .wp-block-column:not(:has(.fmf-service-icon))::before {
	display: block;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 2rem;
	line-height: 1;
	color: #1e3a5f;
	margin-bottom: 1rem;
	text-align: center;
	transition: color 0.25s ease;
}

#services.wp-block-columns .wp-block-column:hover::before,
.fmf-services-section .wp-block-columns .wp-block-column:not(:has(.fmf-service-icon)):hover::before {
	color: #f8d15c;
}

/* Font Awesome 6 Free (solid) Unicode – one icon per column */
#services.wp-block-columns .wp-block-column:nth-child(1)::before,
.fmf-services-section .wp-block-columns .wp-block-column:nth-child(1):not(:has(.fmf-service-icon))::before {
	content: "\f1e3"; /* fa-futbol */
}
#services.wp-block-columns .wp-block-column:nth-child(2)::before,
.fmf-services-section .wp-block-columns .wp-block-column:nth-child(2):not(:has(.fmf-service-icon))::before {
	content: "\f091"; /* fa-trophy */
}
#services.wp-block-columns .wp-block-column:nth-child(3)::before,
.fmf-services-section .wp-block-columns .wp-block-column:nth-child(3):not(:has(.fmf-service-icon))::before {
	content: "\f5a0"; /* fa-map-marked-alt */
}
#services.wp-block-columns .wp-block-column:nth-child(4)::before,
.fmf-services-section .wp-block-columns .wp-block-column:nth-child(4):not(:has(.fmf-service-icon))::before {
	content: "\f201"; /* fa-chart-line */
}

/* When using template-parts/fmf-services.php (real <i> icons) */
.fmf-services-section .fmf-service-icon {
	text-align: center;
	margin-bottom: 1rem;
}
.fmf-services-section .fmf-service-icon i {
	font-size: 2rem;
	color: #1e3a5f;
	transition: color 0.25s ease;
}
.fmf-services-section .wp-block-column:hover .fmf-service-icon i {
	color: #f8d15c;
}

/* --------------------------------------------------------------------------
 * Latest News Section - Overlapping Card Design
 * ----------------------------------------------------------------------- */
.latest-news-section {
	padding: 60px 0;
	background: #f8f9fa;
}

.latest-news-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Section Header */
.section-header {
	text-align: center;
	margin-bottom: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.section-icon {
	font-size: 2.5rem;
	color: #1e3a5f;
	margin-bottom: 10px;
}

.section-title {
	font-family: 'Tajawal', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: #1e3a5f;
	margin: 0;
	text-align: center;
}

/* News Grid - Responsive Layout */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 50px;
}

/* News Card with Overlapping Effect */
.news-card {
	position: relative;
	background: transparent;
	border-radius: 12px;
	overflow: visible;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
	transform: translateY(-5px);
}

.card-image-wrapper {
	position: relative;
	width: 100%;
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16/10;
}

.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.news-card:hover .card-image {
	transform: scale(1.05);
}

.card-image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1e3a5f, #2c5282);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 3rem;
}

/* Floating Content Box - The Overlapping Effect */
.card-content {
	position: relative;
	background: white;
	border-radius: 8px;
	padding: 18px 16px;
	margin-top: -30px;
	margin-left: 15px;
	margin-right: 15px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	z-index: 10;
	transition: box-shadow 0.3s ease;
	min-height: 160px; /* Accommodate 9 lines of text + spacing */
	display: flex;
	flex-direction: column;
}

.news-card:hover .card-content {
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.card-date {
	font-family: 'Tajawal', sans-serif;
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 10px;
	text-align: center;
	font-weight: 500;
	flex-shrink: 0;
}

.card-title {
	font-family: 'Tajawal', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 8px 0;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 6.25rem; /* 5 lines * 1.25 line-height */
	flex-grow: 1;
}

.card-title a {
	color: #1e3a5f;
	text-decoration: none !important;
	transition: color 0.3s ease;
}

.card-title a:hover {
	color: #f8d15c;
}

.card-excerpt {
	font-family: 'Tajawal', sans-serif;
	font-size: 0.75rem;
	line-height: 1.25;
	color: #555;
	text-align: center;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.5rem; /* 4 lines * 1.125 line-height */
	position: relative;
	flex-shrink: 0;
}

/* See More Button */
.see-more-wrapper {
	text-align: center;
	margin-top: 30px;
}

.see-more-btn {
	display: inline-block;
	padding: 10px 30px;
	border: 2px solid #1e3a5f;
	background: white;
	color: #1e3a5f;
	font-family: 'Tajawal', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.see-more-btn:hover {
	background: #1e3a5f;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3);
}

/* No Posts Message */
.no-posts {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px;
	color: #666;
	font-family: 'Tajawal', sans-serif;
	font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
 * Responsive Breakpoints
 * ----------------------------------------------------------------------- */

/* Tablet: 2 columns */
@media (max-width: 992px) {
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
	
	.section-title {
		font-size: 2.2rem;
	}
	
	.card-image-wrapper {
		height: 160px;
	}
	
	.card-content {
		margin-top: -25px;
		margin-left: 12px;
		margin-right: 12px;
		padding: 16px 14px;
		min-height: 140px;
	}
}

/* Mobile: 1 column */
@media (max-width: 768px) {
	.latest-news-section {
		padding: 30px 0;
	}

	.news-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.section-header {
		margin-bottom: 25px;
	}

	.section-icon {
		font-size: 1.8rem;
	}

	.section-title {
		font-size: 1.5rem;
	}

	.card-image-wrapper {
		height: 180px;
	}

	.card-content {
		margin-top: -25px;
		margin-left: 15px;
		margin-right: 15px;
		padding: 16px 14px;
		min-height: auto;
	}

	.card-title {
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.4;
		margin: 0 0 10px 0;
		display: -webkit-box;
		-webkit-line-clamp: none;
		line-clamp: unset;
		-webkit-box-orient: vertical;
		overflow: visible;
		min-height: auto;
		flex-grow: 1;
	}

	.card-excerpt {
		font-size: 0.8rem;
		line-height: 1.4;
		min-height: auto;
		flex-shrink: 0;
	}

	.see-more-btn {
		padding: 8px 25px;
		font-size: 0.9rem;
	}
}

/* Small Mobile */
@media (max-width: 480px) {
	.latest-news-section .container {
		padding: 0 12px;
	}

	.card-content {
		margin-left: 12px;
		margin-right: 12px;
		padding: 14px 12px;
		min-height: auto;
	}

	.card-image-wrapper {
		height: 160px;
		border-radius: 8px;
	}

	.card-title {
		font-size: 0.95rem;
		line-height: 1.35;
	}

	.card-excerpt {
		font-size: 0.75rem;
	}
}

/* Extra Small Mobile (Samsung Galaxy Note 3, S8 - 360px width) */
@media (max-width: 375px) {
	.latest-news-section {
		padding: 20px 0;
	}

	.latest-news-section .container {
		padding: 0 8px;
	}

	.fmf-articles-ghost-container {
		padding: 0.75rem !important;
		border-radius: 0.75rem !important;
	}

	.news-grid {
		gap: 18px;
	}

	.card-image-wrapper {
		height: 130px;
		border-radius: 8px;
	}

	.card-content {
		margin-left: 8px;
		margin-right: 8px;
		margin-top: -12px;
		padding: 10px 8px;
	}

	.card-title {
		font-size: 0.85rem;
		line-height: 1.25;
		margin: 0 0 8px 0;
	}

	.card-date {
		font-size: 0.7rem;
		margin-bottom: 5px;
	}

	.card-excerpt {
		font-size: 0.65rem;
		line-height: 1.2;
	}
}

/* Ultra Small Mobile (Very old devices - 320px width) */
@media (max-width: 360px) {
	.latest-news-section {
		padding: 15px 0;
	}

	.latest-news-section .container {
		padding: 0 6px;
	}

	.fmf-articles-ghost-container {
		padding: 0.5rem !important;
	}

	.news-grid {
		gap: 15px;
	}

	.card-image-wrapper {
		height: 120px;
	}

	.card-content {
		margin-left: 6px;
		margin-right: 6px;
		margin-top: -10px;
		padding: 8px 6px;
	}

	.card-title {
		font-size: 0.8rem;
		line-height: 1.2;
	}

	.card-excerpt {
		font-size: 0.6rem;
		line-height: 1.15;
	}
}

/* --------------------------------------------------------------------------
 * RTL Support - Arabic Text Alignment
 * ----------------------------------------------------------------------- */
.rtl .latest-news-section,
[dir="rtl"] .latest-news-section {
	direction: rtl;
}

.rtl .section-header,
[dir="rtl"] .section-header {
	direction: rtl;
}

.rtl .card-date,
[dir="rtl"] .card-date {
	text-align: center;
}

.rtl .card-title,
[dir="rtl"] .card-title {
	text-align: center;
}

.rtl .card-excerpt,
[dir="rtl"] .card-excerpt {
	text-align: center;
}

/* Ensure proper RTL flow for the entire section */
body.rtl .latest-news-section,
body[dir="rtl"] .latest-news-section {
	direction: rtl;
	text-align: right;
}

body.rtl .latest-news-section .container,
body[dir="rtl"] .latest-news-section .container {
	direction: rtl;
}

/* Override any LTR-specific alignments in RTL context */
body.rtl .news-card,
body[dir="rtl"] .news-card {
	direction: rtl;
}

body.rtl .card-content,
body[dir="rtl"] .card-content {
	direction: rtl;
	text-align: right;
}

body.rtl .card-date,
body[dir="rtl"] .card-date {
	text-align: center;
}

body.rtl .card-title,
body[dir="rtl"] .card-title {
	text-align: center;
}

body.rtl .card-excerpt,
body[dir="rtl"] .card-excerpt {
	text-align: center;
}