/* ==========================================================================
   Sanabil — base stylesheet
   One file for RTL and LTR: only logical properties (inline/block), no left/right.
   Brand values arrive as --snb-* tokens from Sanabil settings (inc/tokens.php);
   every other tone is derived here with color-mix().
   ========================================================================== */

:root {
	/* Brand (overridden inline from settings) */
	--snb-primary: #085059;
	--snb-secondary: #FF3C00;
	--snb-ink: #0F2A2E;
	--snb-surface: #FFFFFF;
	--snb-bg: #F5F8F8;
	--snb-radius: 10px;

	/* Derived tones */
	--snb-primary-strong: color-mix(in srgb, var(--snb-primary) 82%, #000);
	--snb-primary-soft: color-mix(in srgb, var(--snb-primary) 9%, var(--snb-surface));
	--snb-secondary-strong: color-mix(in srgb, var(--snb-secondary) 76%, #000);
	/* Filled buttons use a slightly deeper tone of the accent so white text passes WCAG AA (4.5:1). */
	--snb-secondary-cta: color-mix(in srgb, var(--snb-secondary) 86%, #000);
	--snb-muted: color-mix(in srgb, var(--snb-ink) 64%, var(--snb-bg));
	--snb-line: color-mix(in srgb, var(--snb-ink) 13%, var(--snb-bg));
	--snb-on-primary: #FFFFFF;
	--snb-on-secondary: #FFFFFF;

	/* Type */
	--snb-font: 'SNB Arabic', 'SNB Latin', 'Segoe UI', Tahoma, system-ui, sans-serif;
	--snb-text-sm: 0.875rem;
	--snb-text-base: 1rem;
	--snb-text-lg: 1.125rem;
	--snb-h4: 1.25rem;
	--snb-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--snb-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
	--snb-h1: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

	/* Space & layout */
	--snb-gutter: clamp(16px, 4vw, 32px);
	--snb-container: 1200px;
	--snb-header-h: 76px;
	--snb-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px -12px rgb(0 0 0 / 0.18);
	--snb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Latin-first stack for NL/EN pages so mixed Arabic still renders in the Arabic face. */
.dir-ltr { --snb-font: 'SNB Latin', 'SNB Arabic', 'Segoe UI', system-ui, sans-serif; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--snb-header-h) + 16px); }

body {
	margin: 0;
	background: var(--snb-bg);
	color: var(--snb-ink);
	font-family: var(--snb-font);
	font-size: var(--snb-text-base);
	line-height: 1.75;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Arabic needs more line height and no letter-spacing (it breaks joined letters). */
.lang-ar body, body.lang-ar { line-height: 1.85; }
.lang-ar * { letter-spacing: 0 !important; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 0.5em; font-weight: 700; text-wrap: balance; color: var(--snb-ink); }
h1 { font-size: var(--snb-h1); }
h2 { font-size: var(--snb-h2); }
h3 { font-size: var(--snb-h3); }
h4 { font-size: var(--snb-h4); }
p { margin: 0 0 1em; }

a { color: var(--snb-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--snb-primary-strong); }

:focus-visible { outline: 3px solid var(--snb-secondary); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}

.snb-skip {
	position: absolute; inset-block-start: -100px; inset-inline-start: 16px; z-index: 1000;
	padding: 10px 16px; background: var(--snb-primary); color: var(--snb-on-primary); border-radius: var(--snb-radius);
}
.snb-skip:focus { inset-block-start: 12px; color: var(--snb-on-primary); }

.snb-container { inline-size: 100%; max-inline-size: calc(var(--snb-container) + 2 * var(--snb-gutter)); margin-inline: auto; padding-inline: var(--snb-gutter); }

.snb-main { min-block-size: 50vh; }
.snb-main:focus { outline: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.snb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-block-size: 44px; padding-inline: 20px; padding-block: 8px;
	border: 1px solid transparent; border-radius: var(--snb-radius);
	background: var(--snb-primary); color: var(--snb-on-primary);
	font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color 0.2s var(--snb-ease), color 0.2s var(--snb-ease), border-color 0.2s var(--snb-ease);
}
.snb-btn:hover { background: var(--snb-primary-strong); color: var(--snb-on-primary); }
.snb-btn--accent { background: var(--snb-secondary-cta); color: var(--snb-on-secondary); }
.snb-btn--accent:hover { background: var(--snb-secondary-strong); color: var(--snb-on-secondary); }
.snb-btn--ghost { background: transparent; color: var(--snb-primary); border-color: currentColor; }
.snb-btn--ghost:hover { background: var(--snb-primary-soft); color: var(--snb-primary); }
.snb-btn--block { display: flex; inline-size: 100%; }

.snb-iconbtn {
	display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
	border: 0; border-radius: 50%; background: transparent; color: var(--snb-ink); cursor: pointer; text-decoration: none;
}
.snb-iconbtn:hover { background: var(--snb-primary-soft); color: var(--snb-primary); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.snb-header {
	position: sticky; inset-block-start: 0; z-index: 100;
	background: color-mix(in srgb, var(--snb-surface) 94%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-block-end: 1px solid var(--snb-line);
	transition: box-shadow 0.2s var(--snb-ease);
}
.admin-bar .snb-header { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .snb-header { inset-block-start: 0; } }
.snb-header.is-scrolled { box-shadow: var(--snb-shadow); }

.snb-header__bar { display: flex; align-items: center; gap: 20px; min-block-size: var(--snb-header-h); }

.snb-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--snb-primary); }
.snb-logo__img { max-block-size: 52px; inline-size: auto; }
.snb-logo__text { font-size: 1.25rem; font-weight: 700; }

.snb-header__nav { flex: 1; min-inline-size: 0; }
.snb-header__tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

/* The header runs wider than the content container: ten menu items plus tools. */
.snb-header .snb-container { max-inline-size: calc(1400px + 2 * var(--snb-gutter)); }

/* Header language dropdown */
.snb-langmenu { position: relative; }
.snb-langmenu__btn {
	display: inline-flex; align-items: center; gap: 2px; block-size: 44px; padding-inline: 10px;
	border: 0; border-radius: 8px; background: transparent; color: var(--snb-ink); cursor: pointer;
	font: inherit; font-family: 'SNB Latin', var(--snb-font); font-size: var(--snb-text-sm); font-weight: 600;
}
.snb-langmenu__btn:hover { background: var(--snb-primary-soft); color: var(--snb-primary); }
.snb-langmenu__btn .snb-icon { inline-size: 18px; block-size: 18px; transition: transform 0.2s var(--snb-ease); }
.snb-langmenu__btn[aria-expanded="true"] .snb-icon { transform: rotate(180deg); }
.snb-langmenu__list {
	position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 10;
	list-style: none; margin: 0; padding: 6px; min-inline-size: 180px;
	background: var(--snb-surface); border: 1px solid var(--snb-line); border-radius: var(--snb-radius); box-shadow: var(--snb-shadow);
}
.snb-langmenu__list a { display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 10px; border-radius: 6px; color: var(--snb-ink); text-decoration: none; }
.snb-langmenu__list a:hover { background: var(--snb-primary-soft); color: var(--snb-primary); }
.snb-langmenu__list a[aria-current="true"] { font-weight: 700; color: var(--snb-primary); }
.snb-langmenu__code { inline-size: 28px; font-family: 'SNB Latin', var(--snb-font); font-size: 0.8rem; font-weight: 700; color: var(--snb-muted); }
.snb-header__burger { display: none; }

/* Desktop menu */
.snb-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
.snb-menu > li { position: relative; display: flex; align-items: center; }
.snb-menu a {
	display: block; padding-block: 10px; padding-inline: 9px; border-radius: 8px;
	color: var(--snb-ink); font-weight: 500; font-size: 0.94rem; text-decoration: none; white-space: nowrap;
}
.snb-menu a:hover, .snb-menu a[aria-current="page"], .snb-menu .current-menu-ancestor > a { color: var(--snb-primary); background: var(--snb-primary-soft); }

.snb-subtoggle {
	display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; margin-inline-start: -6px;
	border: 0; border-radius: 6px; background: transparent; color: var(--snb-muted); cursor: pointer;
}
.snb-subtoggle .snb-icon { inline-size: 18px; block-size: 18px; transition: transform 0.2s var(--snb-ease); }
.snb-subtoggle[aria-expanded="true"] .snb-icon { transform: rotate(180deg); }

.snb-menu .sub-menu {
	position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 10;
	list-style: none; margin: 0; padding: 8px; min-inline-size: 230px;
	background: var(--snb-surface); border: 1px solid var(--snb-line); border-radius: var(--snb-radius); box-shadow: var(--snb-shadow);
}
.snb-menu .sub-menu a { padding-block: 9px; }

/* Hover opens on real pointers; the toggle button covers keyboard and touch. */
@media (hover: hover) and (min-width: 1321px) {
	.snb-header__nav .snb-menu > li:hover > .sub-menu,
	.snb-header__nav .snb-menu > li:focus-within > .sub-menu { display: block; }
	.snb-header__nav .snb-menu > li:hover > .sub-menu[hidden] { display: block; }
}

/* Language switcher */
.snb-langs { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.snb-langs a {
	display: inline-grid; place-items: center; min-inline-size: 36px; block-size: 32px; padding-inline: 6px;
	border-radius: 6px; font-size: var(--snb-text-sm); font-weight: 600; color: var(--snb-muted); text-decoration: none;
	font-family: 'SNB Latin', var(--snb-font);
}
.snb-langs a:hover { color: var(--snb-primary); background: var(--snb-primary-soft); }
.snb-langs a[aria-current="true"] { color: var(--snb-on-primary); background: var(--snb-primary); }

/* Search panel */
.snb-search { border-block-start: 1px solid var(--snb-line); background: var(--snb-surface); padding-block: 16px; }
.snb-search__form { display: flex; gap: 10px; }
.snb-search__form input[type="search"] {
	flex: 1; min-inline-size: 0; min-block-size: 48px; padding-inline: 16px;
	border: 1px solid var(--snb-line); border-radius: var(--snb-radius); background: var(--snb-bg); color: var(--snb-ink); font: inherit;
}
.snb-search__form input[type="search"]:focus { border-color: var(--snb-primary); outline: none; box-shadow: 0 0 0 3px var(--snb-primary-soft); }

/* Collapse to drawer */
@media (max-width: 1320px) {
	.snb-header__nav, .snb-header__tools .snb-langmenu, .snb-header__login { display: none; }
	.snb-header__burger { display: inline-grid; }
}
@media (max-width: 560px) {
	.snb-header__donate { display: none; }
	.snb-logo__img { max-block-size: 44px; }
}

/* Drawer */
.snb-drawer { position: fixed; inset: 0; z-index: 200; }
.snb-drawer__backdrop { position: absolute; inset: 0; background: rgb(10 20 20 / 0.45); }
.snb-drawer__panel {
	position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(380px, 88vw);
	display: flex; flex-direction: column; gap: 20px; overflow-y: auto;
	padding-block: 16px 32px; padding-inline: 20px;
	padding-block-end: calc(32px + env(safe-area-inset-bottom, 0px));
	background: var(--snb-surface); box-shadow: var(--snb-shadow);
	animation: snb-drawer-in 0.25s var(--snb-ease);
}
.dir-rtl .snb-drawer__panel { animation-name: snb-drawer-in-rtl; }
@keyframes snb-drawer-in { from { transform: translateX(100%); } }
@keyframes snb-drawer-in-rtl { from { transform: translateX(-100%); } }
.snb-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.snb-menu--drawer { flex-direction: column; align-items: stretch; gap: 0; }
.snb-menu--drawer > li { flex-wrap: wrap; border-block-end: 1px solid var(--snb-line); }
.snb-menu--drawer > li > a { flex: 1; padding-block: 14px; font-size: 1.05rem; }
.snb-menu--drawer .snb-subtoggle { inline-size: 44px; block-size: 44px; }
.snb-menu--drawer .sub-menu { position: static; inline-size: 100%; box-shadow: none; border: 0; padding: 0 0 8px; padding-inline-start: 12px; background: transparent; }
.snb-drawer__section { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.snb-drawer__section > a { font-weight: 600; text-decoration: none; }
.snb-drawer__label { inline-size: 100%; margin: 0; font-size: var(--snb-text-sm); color: var(--snb-muted); }
body.snb-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   Content (non-Elementor pages)
   -------------------------------------------------------------------------- */
.snb-page { padding-block: clamp(32px, 6vw, 72px); }
.snb-page__head { margin-block-end: 28px; }
.snb-page__title { margin: 0; }
.snb-prose { max-inline-size: 72ch; font-size: var(--snb-text-lg); }
.snb-prose img { border-radius: var(--snb-radius); }
.snb-entry__media { margin: 0 0 28px; }
.snb-entry__media img { inline-size: 100%; border-radius: var(--snb-radius); }

.snb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.snb-card { display: flex; flex-direction: column; overflow: hidden; background: var(--snb-surface); border: 1px solid var(--snb-line); border-radius: var(--snb-radius); }
.snb-card__media img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.snb-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px; }
.snb-card__title { font-size: var(--snb-h4); margin: 0; }
.snb-card__title a { color: inherit; text-decoration: none; }
.snb-card__title a:hover { color: var(--snb-primary); }
.snb-card__text { color: var(--snb-muted); margin: 0; }
.snb-card__more { margin-block-start: auto; font-weight: 600; }
.snb-empty { color: var(--snb-muted); }

.snb-404 { text-align: center; display: grid; justify-items: center; gap: 8px; }
.snb-404__code { margin: 0; font-size: clamp(4rem, 12vw, 8rem); font-weight: 700; line-height: 1; color: var(--snb-secondary); font-family: 'SNB Latin', var(--snb-font); }
.snb-404 .snb-search__form { inline-size: min(560px, 100%); margin-block: 16px; }

.nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 32px; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-inline-size: 44px; block-size: 44px; padding-inline: 12px; border-radius: 8px; background: var(--snb-surface); border: 1px solid var(--snb-line); text-decoration: none; }
.nav-links .current { background: var(--snb-primary); color: var(--snb-on-primary); border-color: var(--snb-primary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.snb-footer {
	margin-block-start: clamp(48px, 8vw, 96px);
	background: var(--snb-primary);
	color: color-mix(in srgb, var(--snb-on-primary) 82%, var(--snb-primary));
}
.snb-footer a { color: inherit; text-decoration: none; }
.snb-footer a:hover { color: var(--snb-on-primary); text-decoration: underline; }
.snb-footer__grid {
	display: grid; gap: 40px 32px; padding-block: clamp(48px, 7vw, 80px);
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 960px) { .snb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .snb-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.snb-footer__brand p { margin-block-start: 16px; max-inline-size: 42ch; font-size: 0.95rem; }
.snb-footer .snb-logo { color: var(--snb-on-primary); }
.snb-footer__title { margin: 0 0 14px; font-size: 1rem; color: var(--snb-on-primary); }
.snb-footer__subtitle { margin: 20px 0 10px; font-size: 0.95rem; color: var(--snb-on-primary); }
.snb-footer__links, .snb-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.snb-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.snb-footer__contact .snb-icon { flex-shrink: 0; margin-block-start: 5px; color: var(--snb-secondary); }

.snb-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.snb-social a { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: color-mix(in srgb, var(--snb-on-primary) 12%, transparent); }
.snb-social a:hover { background: var(--snb-secondary); color: var(--snb-on-secondary); text-decoration: none; }

.snb-footer__bottom { border-block-start: 1px solid color-mix(in srgb, var(--snb-on-primary) 16%, transparent); font-size: var(--snb-text-sm); }
.snb-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; }
.snb-footer__bottom p { margin: 0; }
.snb-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Floating WhatsApp */
.snb-wa {
	position: fixed; z-index: 90; inset-inline-start: 20px; inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
	display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%;
	background: #25D366; color: #fff; box-shadow: var(--snb-shadow);
}
.snb-wa .snb-icon { inline-size: 30px; block-size: 30px; }
.snb-wa:hover { color: #fff; transform: translateY(-2px); }

.snb-nav-empty { margin: 0; font-size: var(--snb-text-sm); }

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}