/*
Theme Name: Leen Al Khaleej
Theme URI: https://leenalkhaleej.sa
Author: Leen Al Khaleej
Author URI: https://leenalkhaleej.sa
Description: قالب ووردبريس مخصص لشركة لين الخليج للخدمات المتكاملة — عوازل، كشف تسربات، تنظيف، ومكافحة حشرات. مصمم لسوق الخدمات المنزلية في السعودية وللجوال أولًا: يركز على الثقة (الاعتماد الرسمي الموثّق بالبيانات المُدخلة فقط)، وسرعة التواصل (اتصال وواتساب في كل شاشة)، والتغطية الجغرافية، مع لوحة تحكم مخصصة تدير الألوان والمحتوى وأكواد التتبع وتتبع التحويلات، وإدارة كاملة لطلبات العملاء.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: leen
Tags: custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready, threaded-comments

Built specifically for Leen Al Khaleej. Not a fork of any existing theme.
*/

/* =========================================================
   LEEN AL KHALEEJ — DESIGN SYSTEM
   Tokens, reset, typography, layout, header, footer, buttons.
   Component styles live in assets/css/*.css (see inc/enqueue.php).
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	/* Brand — taken from the company badge: deep navy, gold, cream */
	--navy: #14314E;
	--navy-deep: #0C2036;
	--navy-soft: #1E4468;
	--gold: #C8A040;
	--gold-deep: #A88232;
	--gold-soft: #EFE3C4;
	--cream: #F8F4EC;
	--sand: #EFE7D8;
	--white: #FFFFFF;
	--ink: #16202B;
	--whatsapp: #25D366;

	/* Semantic */
	--bg-page: var(--cream);
	--bg-surface: var(--white);
	--text-primary: var(--ink);
	--text-muted: #5A6875;
	--text-on-dark: #EDE6D8;
	--border: rgba(20, 49, 78, 0.14);
	--border-dark: rgba(239, 231, 216, 0.18);
	--focus: var(--gold-deep);

	/* Type */
	--font-ar: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-en: 'IBM Plex Sans', 'Almarai', sans-serif;
	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.375rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2.25rem;
	--fs-3xl: 2.875rem;
	--fs-4xl: 3.5rem;
	--lh-tight: 1.25;
	--lh-normal: 1.6;
	--lh-relaxed: 1.9;

	/* Space */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s8: 3rem;
	--s10: 4rem;
	--s12: 5rem;
	--s16: 7rem;

	/* Layout */
	--container: 1240px;
	--pad: clamp(1.15rem, 4vw, 2.5rem);
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--header-h: 88px;
	--header-h-sm: 66px;

	/* Motion */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--fast: 150ms;
	--base: 260ms;
	--slow: 440ms;

	/* Elevation */
	--shadow-sm: 0 2px 10px rgba(12, 32, 54, 0.06);
	--shadow-md: 0 10px 30px rgba(12, 32, 54, 0.10);
	--shadow-lg: 0 22px 55px rgba(12, 32, 54, 0.16);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Overflow guard belongs on html, not body: giving body its own
	   overflow-x makes it a scroll container in Chromium, which breaks
	   position: sticky on the header. */
	overflow-x: hidden;
	scroll-padding-top: calc(var(--header-h-sm) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}
body {
	margin: 0;
	background: var(--bg-page);
	color: var(--text-primary);
	font-family: var(--font-ar);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	direction: rtl;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* Latin fragments and numbers keep their own face and direction */
.num, [dir="ltr"] {
	font-family: var(--font-en);
	unicode-bidi: isolate;
}

/* ---------- 3. Accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
.skip-link {
	position: absolute;
	inset-inline-start: var(--s4);
	top: -80px;
	z-index: 9999;
	background: var(--navy);
	color: var(--cream);
	padding: var(--s3) var(--s5);
	border-radius: var(--r-sm);
	font-weight: 700;
	transition: top var(--base) var(--ease);
}
.skip-link:focus { top: var(--s4); }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 4. Typography ---------- */
h1, h2, h3, h4 {
	font-weight: 800;
	line-height: var(--lh-tight);
	color: var(--navy);
	letter-spacing: -0.015em;
}
h1 { font-size: clamp(2rem, 5vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.65rem, 3.6vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { color: var(--text-muted); }
.lead { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-muted); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--gold-deep);
	margin-bottom: var(--s3);
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--gold);
}
.section--dark .eyebrow { color: var(--gold); }

/* ---------- 5. Layout ---------- */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.section { padding-block: var(--s16); }
.section--tight { padding-block: var(--s10); }
.section--surface { background: var(--bg-surface); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--navy); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: rgba(237, 230, 216, 0.78); }
.section-head { max-width: 700px; margin-bottom: var(--s10); }
.section-head--center { margin-inline: auto; text-align: center; }
@media (max-width: 782px) {
	.section { padding-block: var(--s10); }
	.section--tight { padding-block: var(--s8); }
	.section-head { margin-bottom: var(--s8); }
}

.grid { display: grid; gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.text-center { text-align: center; }

/* ---------- 6. Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	padding: 1rem 1.9rem;
	border-radius: var(--r-sm);
	font-weight: 800;
	font-size: var(--fs-sm);
	line-height: 1;
	white-space: nowrap;
	border: 2px solid transparent;
	transition: background var(--base) var(--ease), color var(--base) var(--ease),
		border-color var(--base) var(--ease), transform var(--fast) var(--ease),
		box-shadow var(--base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }

/* Gold is the primary action colour: it is the brand accent, reads as
   premium against the navy, and stays legible with navy-deep text. */
.btn-primary { background: var(--gold); color: var(--navy-deep); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-deep); color: var(--white); box-shadow: var(--shadow-md); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }

.btn-whatsapp { background: var(--whatsapp); color: #06301A; }
.btn-whatsapp:hover { background: #1DAE55; color: var(--white); }

.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.section--dark .btn-outline { border-color: rgba(237, 230, 216, 0.55); color: var(--white); }
.section--dark .btn-outline:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 2.3rem; font-size: var(--fs-base); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- 7. Header ---------- */
.topbar {
	background: var(--navy-deep);
	color: rgba(237, 230, 216, 0.85);
	font-size: var(--fs-xs);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	min-height: 40px;
	flex-wrap: wrap;
}
.topbar__badges { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.topbar__badge { display: inline-flex; align-items: center; gap: var(--s2); }
.topbar__badge svg { color: var(--gold); }
.topbar__phone { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--white); }
.topbar__phone svg { color: var(--gold); }
@media (max-width: 782px) { .topbar { display: none; } }

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(248, 244, 236, 0.94);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid var(--border);
	transition: box-shadow var(--base) var(--ease), background var(--base) var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); background: rgba(248, 244, 236, 0.99); }
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s5);
	height: var(--header-h);
	transition: height var(--base) var(--ease);
}
.site-header.is-stuck .site-header__bar { height: var(--header-h-sm); }

.brand { display: flex; align-items: center; gap: var(--s3); }
.brand img { max-height: 58px; width: auto; transition: max-height var(--base) var(--ease); }
.site-header.is-stuck .brand img { max-height: 44px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-weight: 800; font-size: var(--fs-md); color: var(--navy); }
.brand__tag { font-size: 0.7rem; color: var(--gold-deep); font-weight: 700; letter-spacing: 0.02em; }

/* The nav carries seven items at 1240px, so the gap has to breathe
   with the viewport rather than sit at a fixed 2rem. */
.main-nav ul { display: flex; align-items: center; gap: clamp(0.95rem, 1.9vw, 1.85rem); }
.main-nav a {
	position: relative;
	display: block;
	padding-block: var(--s2);
	font-weight: 700;
	font-size: var(--fs-sm);
	color: var(--navy);
	transition: color var(--fast) var(--ease);
}
.main-nav a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: var(--gold);
	transition: width var(--base) var(--ease);
}
.main-nav a:hover { color: var(--gold-deep); }
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: var(--s3); }

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
}
.menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--navy);
	transition: transform var(--base) var(--ease), opacity var(--fast) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.main-nav { display: none; }
	.header-actions .btn-cta-desktop { display: none; }
	.menu-toggle { display: flex; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 32, 54, 0.55);
	opacity: 0;
	transition: opacity var(--base) var(--ease);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	width: min(86vw, 370px);
	background: var(--cream);
	padding: var(--s5);
	display: flex;
	flex-direction: column;
	gap: var(--s6);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--slow) var(--ease);
}
[dir="ltr"] .drawer__panel { transform: translateX(-100%); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.drawer__close {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	color: var(--navy);
}
.drawer nav ul { display: flex; flex-direction: column; }
.drawer nav a {
	display: block;
	padding: var(--s4) 0;
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--navy);
	border-bottom: 1px solid var(--border);
}
.drawer nav a:hover { color: var(--gold-deep); }
.drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.drawer__phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	font-weight: 800;
	color: var(--navy);
	font-size: var(--fs-md);
	padding: var(--s3);
	background: var(--sand);
	border-radius: var(--r-sm);
}

/* ---------- 8. Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--text-on-dark); }
.footer-top {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
	gap: var(--s8);
	padding-block: var(--s12);
	border-bottom: 1px solid var(--border-dark);
}
.footer-brand p { color: rgba(237, 230, 216, 0.68); margin-top: var(--s4); max-width: 34ch; font-size: var(--fs-sm); }
.footer-brand .brand__name { color: var(--white); }
.footer-brand .brand__tag { color: var(--gold); }
.footer-col h4 {
	color: var(--white);
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	margin-bottom: var(--s5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a { color: rgba(237, 230, 216, 0.72); font-size: var(--fs-sm); transition: color var(--fast) var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-contact li { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: rgba(237, 230, 216, 0.72); }
.footer-contact svg { color: var(--gold); flex-shrink: 0; }
.footer-social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.footer-social a {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-dark);
	border-radius: 50%;
	transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
	padding-block: var(--s5);
	font-size: var(--fs-xs);
	color: rgba(237, 230, 216, 0.5);
}
@media (max-width: 1180px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6) var(--s8); } }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 560px) {
	.footer-top { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- 9. Utility ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2) var(--s4);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 800;
	background: var(--gold-soft);
	color: var(--navy);
}

/* WordPress core content helpers */
.entry-content > * + * { margin-top: var(--s5); }
.entry-content h2, .entry-content h3 { margin-top: var(--s8); }
.entry-content ul, .entry-content ol { padding-inline-start: 1.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: var(--s2); color: var(--text-muted); }
.entry-content a { color: var(--gold-deep); text-decoration: underline; }
.entry-content img { border-radius: var(--r-md); }
.alignwide { max-width: calc(var(--container) - 4rem); margin-inline: auto; }
.alignfull { max-width: none; width: 100%; }
.wp-caption-text, figcaption { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s2); }

/* Areas listed in the footer are plain text until a city page exists. */
.footer-col__plain { color: rgba(237, 230, 216, 0.72); font-size: var(--fs-sm); }

.footer-legal { display: flex; gap: var(--s5); flex-wrap: wrap; }
.footer-legal a { color: rgba(237, 230, 216, 0.6); transition: color var(--fast) var(--ease); }
.footer-legal a:hover { color: var(--gold); }

/* On a phone the header keeps one tap-to-call button beside the menu:
   the sticky action bar is at the other end of the screen, and the top
   of the page is where an urgent visitor looks first. */
.header-call {
	display: none;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	background: var(--navy);
	color: var(--gold);
	transition: background var(--fast) var(--ease);
}
.header-call:hover { background: var(--navy-deep); }
@media (max-width: 1024px) { .header-call { display: flex; } }

/* Very narrow phones: the wordmark must not push the buttons off-screen. */
@media (max-width: 400px) {
	.brand img { max-height: 42px; }
	.brand__name { font-size: var(--fs-sm); }
	.brand__tag { font-size: 0.62rem; }
	.site-header__bar { gap: var(--s3); height: 72px; }
	.header-actions { gap: var(--s2); }
	.header-call, .menu-toggle { width: 42px; height: 42px; }
}