/* =========================================================================
   Falcons Suite — Responsive Safety Net
   Loaded LAST. Almost every rule lives inside a media query, so the desktop
   design (>1024px) is byte-for-byte unchanged. This layer only fixes the
   things that break on tablets and phones.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Global overflow guard — applies at every width but changes nothing
      visually on a page that was already correct.
   ---------------------------------------------------------------------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
video,
svg,
canvas,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Long unbroken strings (URLs, Arabic hashtags) must not blow out the layout */
p,
li,
h1, h2, h3, h4, h5, h6,
.fn-title,
.news-content,
.s-related-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Tables scroll instead of stretching the page */
.news-content table,
.entry-content table,
.elementor-widget-text-editor table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Embeds keep their ratio */
.news-content iframe,
.entry-content iframe {
	max-width: 100%;
}

/* =========================================================================
   2. Tablet — 1024px and below
   ====================================================================== */
@media (max-width: 1024px) {

	.news-wrap {
		padding: 40px 0;
	}

	.news-container {
		width: 92%;
	}

	.news-content img,
	.news-main img {
		border-radius: 4px;
	}

	/* Elementor sections often keep desktop side padding on tablet */
	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 100%;
	}
}

/* =========================================================================
   3. Phone — 767px and below
   ====================================================================== */
@media (max-width: 767px) {

	.news-wrap {
		padding: 32px 0;
	}

	.news-container {
		width: 100%;
		padding-left: 18px;
		padding-right: 18px;
		gap: 32px;
	}

	.news-single-page .news-hero,
	section.news-hero {
		height: auto !important;
		min-height: 240px;
	}

	.hero-inner {
		padding: 24px 18px !important;
	}

	.hero-left h1 {
		font-size: clamp(19px, 5.4vw, 24px) !important;
		line-height: 1.4 !important;
	}

	.news-main h2,
	.half-color-text {
		font-size: clamp(20px, 5.6vw, 26px) !important;
		line-height: 1.4 !important;
	}

	.news-content h2 { font-size: 21px !important; }
	.news-content h3 { font-size: 19px !important; }
	.news-content p,
	.news-content li { font-size: 16px !important; line-height: 1.8 !important; }

	.news-sidebar {
		position: static !important;
		width: 100% !important;
	}

	.sidebar-box {
		margin-bottom: 24px;
	}

	.news-share {
		flex-wrap: wrap;
		gap: 10px;
	}

	.news-pagination .page-numbers {
		min-width: 42px;
		height: 42px;
		font-size: 15px;
	}

	/* Cards stack cleanly */
	.category-post-grid,
	.s-related-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	/* Comfortable tap targets (WCAG 2.5.5) */
	a.button,
	button,
	input[type="submit"],
	.s-related-btn,
	.fn-more,
	.elementor-button {
		min-height: 44px;
	}

	/* iOS refuses to stop zooming on inputs under 16px */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px !important;
		max-width: 100%;
	}

	/* Elementor columns that were forced inline */
	.elementor-column,
	.elementor-widget-wrap {
		max-width: 100%;
	}
}

/* =========================================================================
   4. Small phone — 480px and below
   ====================================================================== */
@media (max-width: 480px) {

	.news-container {
		padding-left: 14px;
		padding-right: 14px;
	}

	.hero-left h1 {
		font-size: clamp(18px, 5.8vw, 21px) !important;
	}

	.news-share a,
	.news-share span {
		font-size: 14px;
	}

	.sidebar-box h3 {
		font-size: 18px !important;
	}
}

/* =========================================================================
   5. RTL (Arabic) mobile corrections
   ====================================================================== */
@media (max-width: 767px) {

	body.rtl .news-container,
	.news-single-page.rtl .news-container {
		direction: rtl;
		text-align: right;
	}

	body.rtl .news-content p,
	body.rtl .news-content li {
		line-height: 2 !important;
		text-align: right;
	}

	body.rtl .hero-left,
	body.rtl .news-main h2 {
		text-align: right;
	}

	body.rtl .news-share {
		justify-content: flex-end;
	}
}

/* =========================================================================
   6. Landscape phones — stop the hero eating the whole viewport
   ====================================================================== */
@media (max-width: 900px) and (orientation: landscape) {

	.news-single-page .news-hero,
	section.news-hero {
		min-height: 200px;
	}
}

/* =========================================================================
   7. Print
   ====================================================================== */
@media print {

	.news-sidebar,
	.news-share,
	.news-pagination,
	.fn-pager,
	header,
	footer {
		display: none !important;
	}

	.news-main {
		width: 100% !important;
	}
}