/* Khabar theme - main styles. Uses logical properties so it works in RTL and LTR. */

:root {
	--k-primary: #0b4f4a;
	--k-accent: #d62839;
	--k-ink: #17212b;
	--k-muted: #5b6770;
	--k-line: #dde3e3;
	--k-surface: #f2f5f5;
	--k-bg: #ffffff;
	--k-radius: 6px;
	/* One font for the whole theme: IBM Plex Sans Arabic, then widely available Arabic-capable system fonts. */
	--k-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", "Droid Arabic Naskh", -apple-system, BlinkMacSystemFont, system-ui, Arial, sans-serif;
	--k-font-head: var(--k-font);
	--k-wrap: 1200px;
	--k-dir: -1;
}
html[dir="rtl"] { --k-dir: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--k-bg);
	color: var(--k-ink);
	font-family: var(--k-font);
	font-size: 17px;
	line-height: 1.75;
}
img, svg, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
/* Embedded video in content keeps a 16:9 box (low specificity so block embeds still win). */
:where(.entry-content) iframe[src*="youtube"],
:where(.entry-content) iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--k-primary); }
:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--k-font); font-weight: 700; line-height: 1.5; margin: 0 0 .5em; }
button, input, select, textarea { font-family: inherit; }
ul, ol { padding-inline-start: 1.25em; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link {
	position: absolute; inset-inline-start: 8px; top: -60px; z-index: 1000;
	background: var(--k-ink); color: #fff; padding: 10px 16px; border-radius: var(--k-radius);
}
.skip-link:focus { top: 8px; color: #fff; }

.container { width: 100%; max-width: var(--k-wrap); margin-inline: auto; padding-inline: 20px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--k-ink); color: #cfd8dc; font-size: 14px; }
.topbar-inner { display: flex; align-items: center; gap: 20px; min-height: 38px; }
.topbar a { color: #cfd8dc; }
.topbar a:hover { color: #fff; }
.topbar .menu { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.social-nav .menu { gap: 4px; }
.social-nav a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.social-nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.topbar-date { margin-inline-end: auto; }

/* ---------- Ticker ---------- */
.ticker { background: var(--k-surface); border-block-end: 1px solid var(--k-line); }
.ticker-inner { display: flex; align-items: center; gap: 14px; min-height: 44px; }
.ticker-label {
	flex: none; background: var(--k-accent); color: #fff; padding: 2px 14px;
	border-radius: var(--k-radius); font-size: 14px; line-height: 1.9;
}
.ticker-viewport { overflow: hidden; flex: 1; min-width: 0; }
.ticker-track { display: flex; width: max-content; animation: k-ticker 60s linear infinite; }
.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.ticker-list li { white-space: nowrap; padding-inline-end: 36px; font-size: 15px; }
.ticker-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 10px; border-radius: 50%; background: var(--k-accent); vertical-align: middle; }
@keyframes k-ticker { to { transform: translateX(calc(50% * var(--k-dir))); } }

/* ---------- Masthead ---------- */
.masthead { border-block-end: 1px solid var(--k-line); }
/* Explicit columns: logo | ad (middle, takes the free space) | search | menu button.
   In RTL the first column is on the right, so the logo is right and search is left. */
.masthead-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 6px; padding-block: 18px; }
.brand { grid-column: 1; grid-row: 1; text-align: start; }
.masthead-ad { grid-column: 2; grid-row: 1; display: flex; justify-content: center; min-width: 0; padding-inline: 12px; }
.masthead-ad .ad { margin: 0; }
.search-toggle { grid-column: 3; grid-row: 1; }
.nav-toggle { grid-column: 4; grid-row: 1; }
.brand-text { font-family: var(--k-font-head); font-weight: 700; font-size: clamp(28px, 5vw, 42px); color: var(--k-primary); line-height: 1.2; }
.brand .custom-logo { max-height: 72px; width: auto; }
.icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
	background: none; border: 0; border-radius: 50%; color: var(--k-ink); cursor: pointer;
}
.icon-btn:hover { background: var(--k-surface); color: var(--k-primary); }

/* ---------- Primary nav ---------- */
.primary-nav { background: var(--k-primary); position: sticky; top: 0; z-index: 50; }
.admin-bar .primary-nav { top: 32px; }
.primary-nav .menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.primary-nav .menu > li { position: relative; }
.primary-nav .menu a { display: block; color: #fff; padding: 12px 16px; font-weight: 500; }
.primary-nav .menu > li > a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-cat > a { background: rgba(255, 255, 255, .14); color: #fff; }
.primary-nav .sub-menu {
	position: absolute; inset-inline-start: 0; top: 100%; min-width: 210px; list-style: none; margin: 0; padding: 6px 0;
	background: #fff; border: 1px solid var(--k-line); border-radius: 0 0 var(--k-radius) var(--k-radius);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12); display: none; z-index: 60;
}
.primary-nav .sub-menu a { color: var(--k-ink); padding: 9px 16px; }
.primary-nav .sub-menu a:hover { background: var(--k-surface); color: var(--k-primary); }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }

.search-panel { background: var(--k-surface); border-block-end: 1px solid var(--k-line); padding-block: 16px; }
.search-panel[hidden] { display: none; }

.search-form { display: flex; gap: 8px; max-width: 640px; margin-inline: auto; }
.search-field {
	flex: 1; min-width: 0; padding: 11px 14px; font: inherit; border: 1px solid var(--k-line);
	border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
}
.search-submit, .button, .comment-form input[type="submit"] {
	padding: 11px 22px; font: inherit; font-weight: 600; color: #fff; background: var(--k-primary);
	border: 0; border-radius: var(--k-radius); cursor: pointer; display: inline-block;
}
.search-submit:hover, .button:hover, .comment-form input[type="submit"]:hover { background: var(--k-ink); color: #fff; }

/* ---------- Layout ---------- */
.site-main { padding-block: 28px 56px; min-height: 50vh; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.has-sidebar .layout { grid-template-columns: minmax(0, 1fr) 320px; }
.section-title {
	font-size: 24px; margin-block: 8px 20px; padding-inline-start: 14px;
	border-inline-start: 5px solid var(--k-accent);
}
.grid { display: grid; gap: 28px 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list { display: grid; gap: 22px; }

/* ---------- Cards ---------- */
.thumb { display: block; overflow: hidden; border-radius: var(--k-radius); background: var(--k-surface); aspect-ratio: 350 / 230; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--k-primary), #1d7f77); }
.card-body { padding-block-start: 12px; }
.card-title { font-size: 21px; margin: 6px 0; }
.card-excerpt { color: var(--k-muted); font-size: 15px; margin: 0 0 8px; }
.cat-badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--k-accent); margin-inline-end: 10px; }
.cat-badge:hover { color: var(--k-primary); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--k-muted); }
.meta a:hover { color: var(--k-primary); }

.card-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; align-items: start; }
.card-row .thumb { aspect-ratio: 136 / 86; }
.card-row .card-body { padding-block-start: 0; }
.card-row .card-title { font-size: 18px; margin-block: 0 4px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 14px; margin-block-end: 40px; }
.hero-card { position: relative; overflow: hidden; border-radius: var(--k-radius); background: var(--k-ink); min-height: 200px; }
.hero-card--big { grid-row: 1 / 3; min-height: 440px; }
.hero-card .thumb { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 14, 18, .88) 5%, rgba(8, 14, 18, .15) 65%); pointer-events: none; }
.hero-card-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 18px; color: #fff; }
.hero-card-title { font-size: 19px; margin: 6px 0; }
.hero-card--big .hero-card-title { font-size: clamp(24px, 3vw, 34px); }
.hero-card a { color: #fff; }
.hero-card .cat-badge { background: var(--k-accent); color: #fff; padding: 1px 10px; border-radius: 3px; }
.hero-card .meta { color: #d5dde0; }

/* ---------- Archive header ---------- */
.archive-header { margin-block-end: 24px; padding-block-end: 14px; border-block-end: 2px solid var(--k-ink); }
.archive-title { font-size: clamp(26px, 4vw, 36px); margin: 0; }
.archive-title span { color: var(--k-accent); }
.archive-desc { color: var(--k-muted); margin-block-start: 6px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; color: var(--k-muted); }
.breadcrumbs li + li::before { content: "/"; margin-inline: 8px; color: var(--k-line); }
.breadcrumbs a:hover { color: var(--k-primary); }

/* ---------- Single ---------- */
.entry-header { margin-block-end: 20px; }
.entry-title { font-size: clamp(28px, 4.2vw, 42px); margin-block: 8px 12px; }
.entry-header .meta { font-size: 14px; }
.entry-figure { margin: 0 0 24px; }
.entry-figure img { width: 100%; border-radius: var(--k-radius); }
.entry-figure figcaption { font-size: 13px; color: var(--k-muted); margin-block-start: 6px; }
.entry-content { font-size: 19px; line-height: 1.95; max-width: 760px; }
.entry-content > * + * { margin-block-start: 1.1em; }
.entry-content a { color: var(--k-primary); text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote { margin-inline: 0; padding: 4px 20px; border-inline-start: 4px solid var(--k-accent); color: var(--k-muted); font-family: var(--k-font-head); font-size: 1.1em; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--k-line); padding: 8px 12px; }
.entry-content .alignwide { max-width: 100%; }
.wp-caption, .wp-block-image figcaption { font-size: 13px; color: var(--k-muted); }
.page-links { margin-block-start: 1.5em; }

.entry-footer { margin-block: 28px; padding-block: 18px; border-block: 1px solid var(--k-line); display: grid; gap: 16px; }
.tags a { display: inline-block; margin: 0 0 6px 6px; padding: 2px 12px; background: var(--k-surface); border-radius: 99px; font-size: 14px; }
.tags a:hover { background: var(--k-primary); color: #fff; }
.tags-label { font-weight: 600; margin-inline-end: 10px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-label { font-weight: 600; margin-inline-end: 6px; }
.share-btn {
	padding: 5px 14px; font: inherit; font-size: 14px; color: var(--k-ink); background: var(--k-surface);
	border: 1px solid var(--k-line); border-radius: 99px; cursor: pointer;
}
.share-btn:hover { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }

.author-box { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--k-surface); border-radius: var(--k-radius); margin-block-end: 28px; }
.author-box img { border-radius: 50%; flex: none; }
.author-name { font-size: 20px; margin-block-end: 4px; }
.author-box p { margin: 0; color: var(--k-muted); font-size: 15px; }

.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-end: 36px; }
.post-navigation a { display: block; padding: 14px 16px; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
.post-navigation a:hover { border-color: var(--k-primary); }
.nav-sub { display: block; font-size: 13px; color: var(--k-accent); }
.nav-title { font-family: var(--k-font-head); font-size: 17px; font-weight: 700; }
.nav-next { text-align: end; }
.related { margin-block-end: 36px; }

/* ---------- Sidebar & widgets ---------- */
.sidebar { align-self: start; }
.widget { margin-block-end: 32px; }
.widget-title { font-size: 20px; margin-block-end: 14px; padding-inline-start: 12px; border-inline-start: 5px solid var(--k-accent); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding-block: 8px; border-block-end: 1px solid var(--k-line); }
.widget li:last-child { border-block-end: 0; }
.widget select, .widget input[type="text"], .widget input[type="email"] { width: 100%; padding: 9px 12px; font: inherit; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
.widget .search-form { flex-wrap: wrap; }
.tagcloud a { display: inline-block; margin: 0 0 6px 6px; padding: 2px 12px; background: var(--k-surface); border-radius: 99px; font-size: 14px !important; }
.tagcloud a:hover { background: var(--k-primary); color: #fff; }

/* ---------- Pagination ---------- */
.pagination { margin-block: 40px 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pagination .page-numbers { min-width: 42px; padding: 7px 14px; text-align: center; border: 1px solid var(--k-line); border-radius: var(--k-radius); }
.pagination a.page-numbers:hover { border-color: var(--k-primary); }
.pagination .current { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.pagination .dots { border: 0; }

/* ---------- Comments ---------- */
.comments { margin-block: 20px; }
.comment-list, .comment-list .children { list-style: none; padding: 0; }
.comment-list .children { padding-inline-start: 28px; }
.comment-body { padding: 16px 0; border-block-end: 1px solid var(--k-line); }
.comment-author .avatar { border-radius: 50%; margin-inline-end: 10px; vertical-align: middle; }
.comment-metadata { font-size: 13px; color: var(--k-muted); }
.comment-form label { display: block; font-weight: 600; margin-block-end: 4px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--k-line); border-radius: var(--k-radius);
}

/* ---------- Misc ---------- */
.no-results, .error-404 { text-align: center; padding-block: 60px; }
.error-404 h1 { font-size: 40px; }
.error-404 .search-form, .no-results .search-form { margin-block: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--k-ink); color: #c9d3d8; }
.site-footer a { color: #e8eef0; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-widgets { padding-block: 44px 12px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer .widget-title { color: #fff; }
.site-footer .widget li { border-color: rgba(255, 255, 255, .12); }
.footer-bottom { border-block-start: 1px solid rgba(255, 255, 255, .12); padding-block: 18px; font-size: 14px; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.footer-nav .menu { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }

.to-top {
	position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center;
	background: var(--k-accent); color: #fff; border-radius: 50%; font-size: 20px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.to-top[hidden] { display: none; }
.to-top:hover { color: #fff; background: var(--k-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.has-sidebar .layout { grid-template-columns: minmax(0, 1fr); }
	.hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.hero-card--big { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
	.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.admin-bar .primary-nav { top: 46px; }
}

@media (max-width: 720px) {
	body { font-size: 16px; }
	.masthead-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
	.search-toggle { grid-column: 2; }
	.nav-toggle { grid-column: 3; }
	.masthead-ad { grid-column: 1 / -1; grid-row: 2; padding-inline: 0; margin-block-start: 10px; }
	.masthead-ad:empty { display: none; }
	.entry-content { font-size: 18px; }
	.topbar-nav { display: none; }
	.primary-nav { position: static; display: none; }
	.primary-nav.is-open { display: block; }
	.primary-nav .menu { flex-direction: column; }
	.primary-nav .menu a { border-block-end: 1px solid rgba(255, 255, 255, .12); }
	.primary-nav .sub-menu { position: static; display: block; box-shadow: none; border: 0; background: rgba(0, 0, 0, .15); border-radius: 0; }
	.primary-nav .sub-menu a { color: #fff; padding-inline-start: 32px; }
	.grid-2, .grid-3, .hero { grid-template-columns: minmax(0, 1fr); }
	.hero-card--big { min-height: 300px; }
	.card-row { grid-template-columns: 104px minmax(0, 1fr); }
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 721px) {
	.nav-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ticker-track { animation: none; }
	.ticker-viewport { overflow-x: auto; }
}


/* ======================================================
   Stage 2: home page sections
   ====================================================== */
.home-section { margin-block: 52px; }
.home-section:first-child { margin-block-start: 0; }

/* Three-column band */
.band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.band-col .card-row { grid-template-columns: 104px minmax(0, 1fr); }
.band-col .card-row .thumb { aspect-ratio: 104 / 72; }
.band-col .card-title { font-size: 17px; }

/* Category block */
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.more-link { font-size: 14px; font-weight: 600; color: var(--k-primary); }
.more-link:hover { color: var(--k-accent); }
.block-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.block-list { align-content: start; }
.block-lead .card-title { font-size: 26px; }

/* Videos: sidebar widget + player dialog */
.widget-videos {
	padding: 16px; background: #fff; border: 1px solid var(--k-line); border-block-start: 4px solid var(--k-accent);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.widget-videos .widget-title { margin-block-start: 0; }
.video-card .thumb { aspect-ratio: 16 / 10; border-radius: 8px; }
.video-card .card-title { font-size: 18px; margin: 12px 0 0; }
.video-mini { display: grid; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--k-line); }
.video-mini .card-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.video-mini .card-row .thumb { aspect-ratio: 96 / 64; }
.video-mini .card-title { font-size: 15px; }
.video-thumb { position: relative; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 33, 43, .38), transparent 55%); pointer-events: none; }
.play {
	position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: var(--play, 56px); height: var(--play, 56px); border-radius: 50%;
	background: var(--k-accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: transform .15s ease;
}
.play::before { content: ""; width: 34%; height: 38%; margin-left: 6%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video-thumb:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.video-mini .play { --play: 32px; }

.video-dialog {
	width: min(960px, 94vw); padding: 12px; border: 0; border-radius: 12px; background: var(--k-ink);
	overflow: visible; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.video-dialog::backdrop { background: rgba(8, 14, 18, .72); }
.video-frame { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-open { display: block; margin-block-start: 10px; padding: 8px 14px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; text-align: center; font-size: 14px; }
.video-open:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.video-close {
	position: absolute; inset-block-start: -14px; inset-inline-end: -14px; z-index: 2; width: 36px; height: 36px;
	border: 0; border-radius: 50%; background: #fff; color: var(--k-ink); font-size: 24px; line-height: 1; cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/* Tabs */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 20px; }
.tab {
	padding: 8px 22px; font: inherit; font-weight: 600; color: var(--k-ink); background: #fff;
	border: 1px solid var(--k-line); border-radius: 99px; cursor: pointer;
}
.tab:hover { border-color: var(--k-primary); }
.tab[aria-selected="true"] { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.tabpanel[hidden] { display: none; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tabpanel .card-title { font-size: 18px; }
.empty-note { color: var(--k-muted); }

/* Newsletter */
.newsletter {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px; align-items: center;
	padding: 32px; border-radius: var(--k-radius); background: var(--k-primary); color: #fff;
}
.newsletter h2 { font-size: 26px; margin: 0 0 4px; }
.newsletter p { margin: 0; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.newsletter-consent { flex-basis: 100%; font-size: 14px; line-height: 1.6; }
.newsletter-consent input { margin-inline-end: 6px; }
.newsletter-form input[type="email"] {
	flex: 1; min-width: 0; padding: 12px 14px; font: inherit; border: 2px solid transparent;
	border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
}
.newsletter-form button {
	padding: 12px 24px; font: inherit; font-weight: 700; color: #fff; background: var(--k-accent);
	border: 0; border-radius: var(--k-radius); cursor: pointer;
}
.newsletter-form button:hover { background: var(--k-ink); }

/* Load more */
.load-more {
	display: block; margin: 34px auto 0; padding: 12px 40px; font: inherit; font-weight: 600; color: #fff;
	background: var(--k-primary); border: 0; border-radius: var(--k-radius); cursor: pointer;
}
.load-more:hover { background: var(--k-ink); }
.load-more:disabled { opacity: .6; cursor: progress; }
.load-more[hidden] { display: none; }

@media (max-width: 980px) {
	.band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.block-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.home-section { margin-block: 40px; }
	.band-grid, .grid-4, .newsletter { grid-template-columns: minmax(0, 1fr); }
	.newsletter { padding: 22px; }
	.newsletter-form { flex-direction: column; }
}

/* ======================================================
   Labels (categories) in the default sidebar
   ====================================================== */
.label-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.label-chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; font-size: 14px;
	background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 99px;
}
.label-chip:hover { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }

/* ======================================================
   Ad slots
   ====================================================== */
.ad { margin-block: 24px; text-align: center; clear: both; max-width: 100%; overflow: hidden; }
.ad-label { display: block; margin-block-end: 4px; font-size: 11px; letter-spacing: .04em; color: var(--k-muted); }
.ad-body { display: flex; justify-content: center; max-width: 100%; }
.ad-body > * { max-width: 100%; }
.ad--top { margin: 0; }
.ad--post_before, .ad--post_middle, .ad--post_after { margin-block: 28px; }
.ad--placeholder {
	padding: 22px; border: 2px dashed var(--k-line); border-radius: var(--k-radius);
	background: var(--k-surface); color: var(--k-muted); font-size: 14px;
}

/* ======================================================
   Home layout (sidebar from the top) + category pair + bottom band
   ====================================================== */
.cat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cat-col .card { margin-block-end: 18px; }
.cat-col .card-title { font-size: 20px; }
.home-layout .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-layout .sidebar { padding-block-start: 0; }
.home-layout + .band { margin-block-start: 48px; padding-block-start: 32px; border-block-start: 1px solid var(--k-line); }
@media (max-width: 980px) {
}
@media (max-width: 720px) {
	.cat-pair { grid-template-columns: minmax(0, 1fr); }
	.home-layout .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* Opinion widget (sidebar, under the videos) */
.widget-opinion {
	padding: 16px; background: #fff; border: 1px solid var(--k-line); border-block-start: 4px solid var(--k-primary);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.widget-opinion .block-head .widget-title { margin-block-start: 0; }
.widget-opinion .list { gap: 0; }
.widget-opinion .card-opinion { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding-block: 12px; border-block-end: 1px solid var(--k-line); }
.widget-opinion .card-opinion:first-child { padding-block-start: 0; }
.widget-opinion .card-opinion:last-child { padding-block-end: 0; border-block-end: 0; }
.widget-opinion .card-opinion .thumb { aspect-ratio: 1 / 1; }
.widget-opinion .card-title { font-size: 15px; line-height: 1.55; margin-block-end: 4px; }
.widget-opinion .meta { font-size: 12px; }

/* "طالع ونازل" widget (sidebar, under the opinion box) */
.widget-updown {
	--ud-up: #1f9d6b; --ud-down: var(--k-accent);
	padding: 16px; background: #fff; border: 1px solid var(--k-line); border-block-start: 4px solid var(--k-ink);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.ud-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ud-head .widget-title { margin-block-start: 0; }
.ud-date { font-size: 12px; color: var(--k-muted); white-space: nowrap; }
.ud-title { display: block; margin-block: 0 12px; font-family: var(--k-font-head); font-weight: 700; font-size: 17px; line-height: 1.55; }
.ud-block { --ud: var(--ud-up); margin-block-end: 10px; padding: 12px 14px; background: #eaf7f1; border-radius: 8px; }
.ud-block.ud-down { --ud: var(--ud-down); background: #fdeceb; }
.ud-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--k-font); font-size: 15px; font-weight: 700; color: var(--ud); }
.ud-arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ud); }
.ud-arrow::before { content: ""; width: 10px; height: 9px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ud-down .ud-arrow::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ud-block ul { list-style: none; margin: 0; padding: 0; }
.ud-block li { position: relative; padding-block: 3px; padding-inline-start: 16px; font-size: 15px; line-height: 1.6; }
.ud-block li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: 6px; height: 6px; border-radius: 50%; background: var(--ud); }
.ud-teaser { margin: 0 0 10px; color: var(--k-muted); font-size: 15px; }
.ud-more { display: inline-block; margin-block-start: 4px; font-size: 14px; font-weight: 600; color: var(--k-primary); }
.ud-more:hover { color: var(--k-accent); }

/* ======================================================
   Home slider (main story)
   ====================================================== */
.slider { margin-block-end: 40px; }
.slides { display: grid; position: relative; overflow: hidden; background: var(--k-ink); border-radius: 10px; touch-action: pan-y; }
.slide { position: relative; grid-area: 1 / 1; aspect-ratio: 16 / 9; min-height: 260px; background: var(--k-ink); }
.slide-media { position: absolute; inset: 0; display: block; }
.slide-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 14, 18, .88) 4%, rgba(8, 14, 18, .15) 62%); pointer-events: none; }
.slide-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; max-width: 780px; padding: 28px 30px 24px; color: #fff; }
.slide-title {
	margin: 8px 0 10px; font-size: clamp(22px, 3vw, 36px); line-height: 1.45; text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.slide a { color: #fff; }
.slide .cat-badge { padding: 2px 12px; background: var(--k-accent); color: #fff; border-radius: 3px; }
.slide .meta { color: #dbe3e6; }

/* Only the active slide is visible (also before JS runs). The image cross-fades;
   the text of the outgoing slide disappears first, so two titles never overlap. */
.slide { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.slide-body { opacity: 0; transition: opacity .12s ease; }
.slide.is-active .slide-body { opacity: 1; transition: opacity .35s ease .3s; }

.slider:not(.is-ready) .slider-bar { display: none; }
.slider-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--k-ink); border-radius: 0 0 10px 10px; }
.slider.is-ready .slides { border-radius: 10px 10px 0 0; }
.slider-nav { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.slider-nav button {
	position: relative; min-width: 40px; height: 34px; padding: 0 10px; overflow: hidden; border: 0; border-radius: 6px;
	background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.slider-nav button:hover { background: rgba(255, 255, 255, .24); }
.slider-nav button[aria-current="true"] { background: var(--k-accent); }
.slider-nav button::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 3px; background: #fff; }
.slider.is-run .slider-nav button[aria-current="true"]::after { animation: k-progress var(--slider-delay, 6s) linear forwards; }
@keyframes k-progress { from { width: 0; } to { width: 100%; } }


@media (max-width: 720px) {
	.slide { aspect-ratio: 4 / 3; min-height: 280px; }
	.slide-body { padding: 18px 16px 16px; }
	.slide-title { font-size: 20px; }
	.slider-nav button { min-width: 34px; height: 32px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.slide, .slide.is-active, .slide-body, .slide.is-active .slide-body { transition: none; }
	.slider.is-run .slider-nav button[aria-current="true"]::after { animation: none; width: 100%; }
}

/* "الليغا بالعربي" box (sidebar): lead story + three small ones */
.widget-liga {
	position: relative; overflow: hidden; padding: 16px; background: #fff; border: 1px solid var(--k-line);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.widget-liga::before { content: ""; display: block; height: 4px; margin: -16px -16px 14px; background: linear-gradient(90deg, var(--k-primary), var(--k-accent)); }
.widget-liga .block-head .widget-title { margin-block-start: 0; }
.card-lead .thumb { aspect-ratio: 16 / 10; border-radius: 8px; }
.card-lead .card-title { margin: 10px 0 4px; font-size: 18px; line-height: 1.55; }
.liga-list { display: grid; margin-block-start: 14px; padding-block-start: 4px; border-block-start: 1px solid var(--k-line); }
.widget-liga .card-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding-block: 12px; border-block-end: 1px solid var(--k-line); }
.widget-liga .card-row:last-child { padding-block-end: 0; border-block-end: 0; }
.widget-liga .card-row .thumb { aspect-ratio: 1 / 1; }
.widget-liga .card-row .card-title { margin-block-end: 4px; font-size: 15px; line-height: 1.55; }

/* Hint shown to the site administrator when a sidebar box has nothing to show */
.widget-hint {
	padding: 12px 14px; border: 2px dashed var(--k-line); border-radius: 8px; background: var(--k-surface);
	color: var(--k-muted); font-size: 14px; line-height: 1.7;
}
.widget-hint strong { display: block; color: var(--k-ink); }
.widget-hint p { margin: 2px 0 6px; }
.widget-hint small { font-size: 12px; }

/* "خدمات" box (sidebar): one tile per sub-category */
.widget-services {
	position: relative; overflow: hidden; padding: 16px; background: #fff; border: 1px solid var(--k-line);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.widget-services::before { content: ""; display: block; height: 4px; margin: -16px -16px 14px; background: linear-gradient(90deg, var(--k-ink), var(--k-primary)); }
.widget-services .block-head .widget-title { margin-block-start: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.widget .svc-grid li { padding: 0; border: 0; }
.svc-tile {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; padding: 12px;
	background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 10px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.svc-tile:hover { transform: translateY(-2px); background: #fff; border-color: var(--k-primary); box-shadow: 0 6px 16px rgba(23, 33, 43, .1); }
.svc-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--k-primary); color: #fff; }
.svc-name { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--k-ink); }
.svc-count {
	position: absolute; inset-block-start: 10px; inset-inline-end: 10px; min-width: 22px; padding: 0 7px; text-align: center;
	font-size: 12px; line-height: 20px; color: #fff; background: var(--k-accent); border-radius: 99px;
}
@media (prefers-reduced-motion: reduce) { .svc-tile { transition: none; } .svc-tile:hover { transform: none; } }

/* ======================================================
   No sideways scrolling on phones
   Root causes handled: grid/flex children that refuse to shrink, fixed-width
   ads/embeds/tables/captions, long unbroken words and URLs, and a tight top bar.
   ====================================================== */
html { overflow-x: hidden; }
@supports (overflow: clip) {
	html { overflow-x: clip; }
	body { overflow-x: clip; }
}
body { max-width: 100%; overflow-wrap: break-word; }

/* Grid and flex children may shrink below their content size. */
.layout > *, .grid > *, .cat-pair > *, .block-grid > *, .band-grid > *, .footer-grid > *,
.card, .card-row .card-body, .card-opinion .card-body, .card-lead, .cat-col, .band-col,
.widget, .sidebar, .layout-main, .newsletter > *, .masthead-ad { min-width: 0; }

/* break-word (not anywhere): long words wrap, but buttons and labels keep their natural width. */
.widget, .entry-content, .card-title, .slide-title { overflow-wrap: break-word; }
.widget { max-width: 100%; }
.slider, .slides, .ad, .ad-body, .masthead-ad { max-width: 100%; }
.masthead-ad { overflow: hidden; }

/* Embedded content and legacy markup. */
img, video, canvas, embed, object, iframe, ins { max-width: 100%; }
.entry-content pre { max-width: 100%; overflow-x: auto; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.entry-content figure, .wp-caption, .wp-block-image, .wp-block-embed { max-width: 100%; }
.wp-caption img, .entry-content figure img { max-width: 100%; height: auto; }
.entry-content .alignwide, .entry-content .alignfull { max-width: 100%; margin-inline: 0; }
.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-inline: auto; }
@media (max-width: 720px) {
	.alignleft, .alignright { float: none; display: block; margin-inline: auto; }
	.topbar-inner { flex-wrap: wrap; gap: 4px 12px; padding-block: 4px; }
	.topbar-date { font-size: 13px; margin-inline-end: auto; }
	.video-close { inset-block-start: 6px; inset-inline-end: 6px; }
}

/* Search in the sidebar (classic widget and the block-based Search widget) */
.widget .search-form { max-width: none; margin: 0; flex-wrap: nowrap; }
.widget .wp-block-search__label { display: block; margin-block-end: 8px; font-size: 18px; font-weight: 700; }
.widget .wp-block-search__inside-wrapper { display: flex; gap: 8px; width: 100%; }
.widget .wp-block-search__input, .widget .search-field, .widget input[type="search"] {
	flex: 1; width: auto; min-width: 0; padding: 10px 12px; font: inherit;
	border: 1px solid var(--k-line); border-radius: var(--k-radius); background: #fff; color: var(--k-ink);
}
.widget .wp-block-search__button, .widget .search-submit, .widget .wp-element-button[type="submit"] {
	flex: none; padding: 10px 18px; font: inherit; font-weight: 600; white-space: nowrap; overflow-wrap: normal; cursor: pointer;
	color: #fff; background: var(--k-primary); border: 0; border-radius: var(--k-radius);
}
.widget .wp-block-search__button:hover, .widget .search-submit:hover { background: var(--k-ink); }
button, .button, .search-submit, .tab, .share-btn, .load-more { white-space: nowrap; }

/* "معلومات قانونية" box (sidebar) */
.widget-legal {
	position: relative; overflow: hidden; padding: 16px; background: #fff; border: 1px solid var(--k-line);
	border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08);
}
.widget-legal::before { content: ""; display: block; height: 4px; margin: -16px -16px 14px; background: linear-gradient(90deg, var(--k-accent), var(--k-ink)); }
.widget-legal .block-head .widget-title { display: flex; align-items: center; gap: 8px; margin-block-start: 0; }
.legal-head-ico { display: inline-grid; place-items: center; color: var(--k-accent); }
.legal-list { margin: 0; padding: 0; list-style: none; }
.widget .legal-list li { padding: 0; }
.legal-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 12px; }
.legal-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--k-surface); color: var(--k-primary); }
.legal-text { display: block; min-width: 0; }
.legal-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--k-ink); }
.legal-item:hover .legal-title { color: var(--k-primary); }
.legal-date { display: block; margin-block-start: 2px; font-size: 12px; color: var(--k-muted); }

/* Prayer times + weather (sidebar) */
.widget-prayer, .widget-weather { position: relative; overflow: hidden; padding: 16px; border-radius: 10px; box-shadow: 0 8px 22px rgba(23, 33, 43, .08); }
.widget-prayer .block-head .widget-title, .widget-weather .block-head .widget-title { margin-block-start: 0; }
.pw-city { font-size: 13px; white-space: nowrap; color: var(--k-muted); }
.pw-credit { display: block; margin-block-start: 8px; font-size: 11px; color: var(--k-muted); }

.widget-prayer { background: #fff; border: 1px solid var(--k-line); }
.widget-prayer::before { content: ""; display: block; height: 4px; margin: -16px -16px 14px; background: linear-gradient(90deg, var(--k-primary), #1d7f77); }
.pw-date { margin: 0 0 10px; font-size: 13px; color: var(--k-muted); }
.prayer-list { margin: 0; padding: 0; list-style: none; }
.widget .prayer-list li { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 0; border-radius: 8px; font-weight: 600; }
.prayer-list li:nth-child(even) { background: var(--k-surface); }
.prayer-list time { direction: ltr; font-variant-numeric: tabular-nums; }
.prayer-list .prayer-sun { font-weight: 400; color: var(--k-muted); }
.prayer-list li.is-past { color: #9aa5ab; }
.widget .prayer-list li.is-next { background: var(--k-primary); color: #fff; }

.widget-weather { color: #fff; background: linear-gradient(135deg, var(--k-primary), #1d7f77); }
.widget-weather .widget-title { color: #fff; border-inline-start-color: #fff; }
.widget-weather .pw-city, .widget-weather .pw-credit { color: rgba(255, 255, 255, .8); }
.wx-main { display: flex; align-items: center; gap: 14px; margin-block: 6px 12px; }
.wx-icon { display: grid; place-items: center; color: #fff; }
.wx-temp { font-size: 44px; font-weight: 700; line-height: 1; }
.wx-desc { margin-inline-start: auto; font-size: 16px; font-weight: 600; }
.wx-meta { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.widget .wx-meta li { padding: 0; border: 0; }

/* City selector inside the prayer / weather boxes */
.widget .pw-select {
	width: auto; max-width: 150px; padding: 4px 8px; font: inherit; font-size: 13px; color: var(--k-ink);
	background: #fff; border: 1px solid var(--k-line); border-radius: 6px;
}
.widget-weather .pw-select { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.widget-weather .pw-select option { color: var(--k-ink); }
.widget-prayer, .widget-weather { transition: opacity .2s ease; }
.widget-prayer.is-loading, .widget-weather.is-loading { opacity: .55; }