/**
 * header.css — Site header — utility bar, logo row, search/notifications/dark-mode/language controls, mobile menu shell, breaking news ticker, static banner.
 *
 * Part of the KWL360 split stylesheet. Load order lives in
 * functions.php; responsive.css loads next-to-last so its rules
 * reliably win the cascade against every file before it.
 * @package KWL360
 */

/* -----------------------------------------------------------------------
   0. Design tokens (fallbacks; overridden by inline <style> from Customizer)
   -------------------------------------------------------------------- */
:root{
	/* "الفصل الذكي" palette (site owner's latest revision): navy primary,
	   sky-blue highlight/links, amber accent (warning-style CTAs), and
	   red as the accent-dark/hover tone — replaces the earlier
	   blue-gray + orange/rust combination. */
	--kwl-primary: #1E3A8A;
	--kwl-primary-dark: #14275E;
	--kwl-primary-light: #DBE4F7;
	--kwl-accent: #F59E0B;
	--kwl-accent-dark: #EF4444;
	--kwl-accent-light: #FEF3C7;
	--kwl-highlight: #3B82F6;
	--kwl-highlight-light: #DBEAFE;
	--kwl-soft-blue: #F9FAFB;
	--kwl-light-gray: #E5E7EB;
	--kwl-white: #FFFFFF;
	--kwl-bg: #F9FAFB;
	--kwl-ink: #374151;
	--kwl-ink-soft: #64748B;
	--kwl-ink-muted: #94A3B8;
	--kwl-border: #E5E7EB;
	--kwl-font: 'Cairo', sans-serif;

	/* Grid system — exact spec: 12 columns, 92px column, 24px gutter,
	   240px side margin (desktop), 1400px container, 1320px safe content
	   area, 8px baseline unit. */
	--kwl-container: 1400px;
	--kwl-content-safe: 1320px;
	--kwl-gutter: 24px;
	--kwl-side-margin: 240px;
	--kwl-baseline: 8px;
	--kwl-col-width: 92px;

	--kwl-radius: 18px;
	--kwl-radius-sm: 10px;

	/* Spacing scale — exact spec, all multiples of the 8px baseline */
	--kwl-space-1: 8px;
	--kwl-space-2: 16px;
	--kwl-space-3: 24px;
	--kwl-space-4: 32px;
	--kwl-space-6: 48px;
	--kwl-space-8: 64px;
	--kwl-space-12: 96px;
	--kwl-shadow-sm: 0 4px 14px rgba(15,23,42,.05);
	--kwl-shadow-md: 0 8px 30px rgba(15,23,42,.08);
	--kwl-shadow-lg: 0 20px 48px rgba(15,23,42,.14);
	--kwl-ease: cubic-bezier(.22,1,.36,1);
	--kwl-header-h: 88px;

	/* Per-channel identity colors — used for section accents, badges, and
	   category-card icons so each of the 6 editorial channels reads as its
	   own visual "brand" while staying inside one cohesive, non-flashy
	   educational palette (no game-site neon, no clashing hues). */
	--kwl-ch-islamic: #22C55E;
	--kwl-ch-islamic-light: #DCFCE7;
	--kwl-ch-stories: #8B5CF6;
	--kwl-ch-stories-light: #EDE9FE;
	--kwl-ch-ai: #14B8A6;
	--kwl-ch-ai-light: #CCFBF1;
	--kwl-ch-teacher: #F97316;
	--kwl-ch-teacher-light: #FFEDD5;
	--kwl-ch-knowledge: #F59E0B;
	--kwl-ch-knowledge-light: #FEF3C7;
	--kwl-ch-games: #F43F5E;
	--kwl-ch-games-light: #FFE4E8;
	--kwl-ch-games-dark: #9F1239;
	--kwl-ch-discover: #0EA5E9;
	--kwl-ch-discover-light: #E0F2FE;
	--kwl-ch-discover-dark: #075985;
	--kwl-ch-tech: #6366F1;
	--kwl-ch-tech-light: #E0E7FF;
	--kwl-ch-tech-dark: #3730A3;
	--kwl-ch-islamic-dark: #14532D;
	--kwl-ch-stories-dark: #4C1D95;
	--kwl-ch-ai-dark: #0F5B54;
	--kwl-ch-teacher-dark: #9A3E0C;
	--kwl-ch-knowledge-dark: #92400E;
}/* -----------------------------------------------------------------------
   2b. Utility Links Bar
   -------------------------------------------------------------------- */
.kwl-utility-bar{ background: var(--kwl-primary-dark, var(--kwl-primary)); color: #fff; font-size: .78rem; }
.kwl-utility-bar-inner{ display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 40px; padding: 6px 24px; flex-wrap: wrap; }
.kwl-utility-bar-inner a{ color: rgba(255,255,255,.85); }
.kwl-utility-bar-inner a:hover{ color: #fff; text-decoration: underline; }/* -----------------------------------------------------------------------
   2c. Static Banner
   -------------------------------------------------------------------- */
.kwl-static-banner{
	position: relative; overflow: hidden;
	background: linear-gradient(120deg, var(--kwl-soft-blue) 0%, var(--kwl-white) 100%);
	background-size: cover; background-position: center;
	padding: 24px 0; margin-bottom: 4px;
	min-height: 100px; display: flex; align-items: center;
}
.kwl-static-banner--has-image{ padding: 56px 0 40px; min-height: 320px; }
.kwl-static-banner-scrim{ position: absolute; inset: 0; }
.kwl-static-banner--has-image .kwl-static-banner-scrim{
	background: linear-gradient(90deg, rgba(10,20,40,.72) 0%, rgba(10,20,40,.35) 55%, rgba(10,20,40,.1) 100%);
}
.kwl-static-banner-inner{ position: relative; z-index: 1; max-width: 640px; }
.kwl-static-banner-quote{
	display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.3); color: #fff;
	border-radius: 999px; padding: 7px 16px; font-size: .78rem; margin-bottom: 14px;
}
.kwl-static-banner:not(.kwl-static-banner--has-image) .kwl-static-banner-quote{
	background: var(--kwl-white); border-color: var(--kwl-border); color: var(--kwl-ink-soft);
}
.kwl-static-banner-title{ font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); margin: 0 0 10px; color: var(--kwl-ink); }
.kwl-static-banner--has-image .kwl-static-banner-title{ color: #fff; }
.kwl-static-banner-title span{ color: var(--kwl-accent); }
.kwl-static-banner-subtitle{ color: var(--kwl-ink-soft); font-size: 1rem; margin: 0; }
.kwl-static-banner--has-image .kwl-static-banner-subtitle{ color: rgba(255,255,255,.9); }/* -----------------------------------------------------------------------
   3. Breaking News Ticker
   -------------------------------------------------------------------- */
.kwl-breaking-news{
	background: var(--kwl-primary);
	color: #fff;
	font-size: .85rem;
}
.kwl-ticker-viewport{ overflow: hidden; flex: 1; position: relative; }
.kwl-ticker-track{
	display: flex;
	gap: 48px;
	white-space: nowrap;
	width: max-content;
	animation: kwl-ticker-scroll linear infinite;
	animation-duration: var(--kwl-ticker-duration, 40s);
}
.kwl-breaking-news:hover .kwl-ticker-track,
.kwl-ticker-track.is-paused{ animation-play-state: paused; }
.kwl-ticker-track li a{ color: #fff; opacity: .92; }
.kwl-ticker-track li a:hover{ opacity: 1; text-decoration: underline; }
[dir="rtl"] .kwl-ticker-track{ animation-name: kwl-ticker-scroll-rtl; }/* -----------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------- */
.kwl-header{
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--kwl-border);
	z-index: 900;
	transition: box-shadow .3s var(--kwl-ease), background .3s var(--kwl-ease);
}
.kwl-header.is-sticky{ position: sticky; top: 0; }
.kwl-header.kwl-scrolled{ box-shadow: var(--kwl-shadow-sm); }
[data-kwl-theme="dark"] .kwl-header{ background: rgba(11,18,32,.88); }

.kwl-header-logo-row{ display: flex; align-items: center; justify-content: center; height: auto; padding: 12px 0; }
.kwl-header-brand{ display: flex; align-items: center; gap: 12px; }
.kwl-logo{ display: flex; align-items: center; gap: 10px; }
.kwl-logo-icon{ display: flex; flex-shrink: 0; line-height: 0; }
.kwl-logo-icon svg{ width: 40px; height: 40px; }
.kwl-logo-text{ display: flex; flex-direction: column; line-height: 1.1; }
.kwl-logo-mark{ font-size: 1.5rem; font-weight: 900; color: var(--kwl-primary); }
.kwl-logo-mark em{ font-style: normal; color: var(--kwl-accent); }
.kwl-logo-tagline{ font-size: .68rem; color: var(--kwl-ink-soft); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.kwl-mobile-toggle{ display: none; flex-direction: column; gap: 5px; padding: 8px; }
.kwl-mobile-toggle span{ width: 22px; height: 2px; background: var(--kwl-ink); border-radius: 2px; transition: transform .25s var(--kwl-ease), opacity .2s; }

/* Language switcher */
.kwl-lang-switcher{ position: relative; }
.kwl-lang-menu{
	position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
	min-width: 190px; max-height: 320px; overflow-y: auto;
	background: var(--kwl-white); border: 1px solid var(--kwl-border); border-radius: var(--kwl-radius);
	box-shadow: var(--kwl-shadow-md); padding: 8px; z-index: 60;
}
.kwl-lang-menu button{ display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--kwl-radius-sm); font-size: .88rem; font-weight: 600; text-align: start; }
.kwl-lang-menu button:hover{ background: var(--kwl-soft-blue); }
.kwl-lang-menu button.is-active{ background: var(--kwl-primary); color: #fff; }
.kwl-header-actions{ display: flex; align-items: center; gap: 6px; }
.kwl-icon-btn{
	position: relative; width: 40px; height: 40px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--kwl-ink); transition: background .2s var(--kwl-ease), color .2s var(--kwl-ease);
}
.kwl-icon-btn:hover{ background: var(--kwl-soft-blue); color: var(--kwl-primary); }
.kwl-notif-dot{ position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--kwl-accent); border: 2px solid var(--kwl-white); }
.kwl-icon-moon{ display: none; }
[data-kwl-theme="dark"] .kwl-icon-sun{ display: none; }
[data-kwl-theme="dark"] .kwl-icon-moon{ display: block; }

/* Search panel */
.kwl-search-panel{
	border-top: 1px solid var(--kwl-border);
	background: var(--kwl-white);
	overflow: hidden; max-height: 0; transition: max-height .3s var(--kwl-ease);
}
.kwl-search-panel:not([hidden]){ max-height: 400px; }
.kwl-search-panel[hidden]{ display: block; }
.kwl-search-form{ display: flex; align-items: center; gap: 10px; padding: 18px 0; }
.kwl-search-form input{
	flex: 1; border: none; background: var(--kwl-light-gray); border-radius: 999px;
	padding: 12px 20px; font-size: 1rem; color: var(--kwl-ink);
}
.kwl-search-form input:focus{ outline: 2px solid var(--kwl-primary); }
.kwl-search-form button{ width: 44px; height: 44px; border-radius: 50%; background: var(--kwl-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.kwl-search-results{ padding-bottom: 16px; display: grid; gap: 8px; }
.kwl-search-results a{ display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--kwl-radius-sm); }
.kwl-search-results a:hover{ background: var(--kwl-soft-blue); }
.kwl-search-results img{ width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

/* Mobile menu */
.kwl-mobile-menu{
	position: fixed; top: 0; inset-inline-start: 0; height: 100%; width: min(320px,86vw);
	background: var(--kwl-white); z-index: 1001;
	transform: translateX(-105%); transition: transform .35s var(--kwl-ease), visibility .35s;
	overflow-y: auto; box-shadow: var(--kwl-shadow-lg);
	visibility: hidden; pointer-events: none;
}
[dir="rtl"] .kwl-mobile-menu{ transform: translateX(105%); }
.kwl-mobile-menu.is-open{ transform: translateX(0); visibility: visible; pointer-events: auto; }
.kwl-mobile-menu-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--kwl-border); }
.kwl-mobile-close{ font-size: 1.8rem; line-height: 1; }
.kwl-overlay{
	position: fixed; inset: 0; background: rgba(10,20,40,.5); z-index: 1000;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--kwl-ease), visibility .3s;
}
.kwl-overlay.is-active{ opacity: 1; visibility: visible; }/* -----------------------------------------------------------------------
   6. Dynamic Category Tabs
   -------------------------------------------------------------------- */
.kwl-tabs-wrapper{ position: sticky; top: var(--kwl-header-h); z-index: 60; background: var(--kwl-white); border-bottom: 1px solid var(--kwl-border); }
.kwl-404-wrap .kwl-search-form{ justify-content: center; margin: 24px 0; }
.kwl-search-form--inline{ display: flex; gap: 8px; }
.kwl-search-form--inline input{ padding: 12px 18px; border-radius: 999px; border: 1px solid var(--kwl-border); }
.kwl-search-form--inline button{ background: var(--kwl-primary); color: #fff; padding: 12px 20px; border-radius: 999px; }

/* Reading progress bar */
.kwl-reading-progress{
	position: sticky; top: var(--kwl-header-h); inset-inline-start: 0; z-index: 55;
	height: 3px; width: 0%; background: linear-gradient(90deg, var(--kwl-accent), var(--kwl-primary));
	transition: width .1s linear;
}