/**
 * navigation.css — Every category/channel navigation surface — primary menu, channels menu, Showcase channel tiles + subcategory filter bar, breadcrumbs, pagination.
 *
 * 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
 */

/* Channels menu bar — compact nav-style row, hover reveals a dropdown
   with that channel's subcategories (no boxed cards, no click needed). */
.kwl-channels-menu{ padding: 6px 0 18px; border-bottom: 1px solid var(--kwl-border); }
.kwl-channels-menu-list{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kwl-channels-menu-item{ position: relative; flex: 1 1 0; }
.kwl-channels-menu-link{
	display: flex; align-items: center; justify-content: center; gap: 7px;
	padding: 10px 8px; border-radius: var(--kwl-radius-sm);
	font-size: .84rem; font-weight: 700; color: var(--kwl-ink);
	border-bottom: 2px solid transparent;
	transition: background .2s var(--kwl-ease), border-color .2s var(--kwl-ease);
}
.kwl-channels-menu-icon{ flex-shrink: 0; display: flex; color: var(--kwl-ink-muted); transition: color .2s var(--kwl-ease); }
.kwl-channels-menu-item:hover .kwl-channels-menu-link{ background: var(--kwl-bg-alt, #f3f5f8); }
.kwl-channels-menu-item[data-channel="islamic"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-ch-islamic); }
.kwl-channels-menu-item[data-channel="islamic"]:hover .kwl-channels-menu-icon{ color: var(--kwl-ch-islamic-dark); }
.kwl-channels-menu-item[data-channel="discover"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-primary); }
.kwl-channels-menu-item[data-channel="discover"]:hover .kwl-channels-menu-icon{ color: var(--kwl-primary-dark, var(--kwl-primary)); }
.kwl-channels-menu-item[data-channel="stories"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-ch-stories); }
.kwl-channels-menu-item[data-channel="stories"]:hover .kwl-channels-menu-icon{ color: var(--kwl-ch-stories-dark); }
.kwl-channels-menu-item[data-channel="ai"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-ch-ai); }
.kwl-channels-menu-item[data-channel="ai"]:hover .kwl-channels-menu-icon{ color: var(--kwl-ch-ai-dark); }
.kwl-channels-menu-item[data-channel="teacher"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-ch-teacher); }
.kwl-channels-menu-item[data-channel="teacher"]:hover .kwl-channels-menu-icon{ color: var(--kwl-ch-teacher-dark); }
.kwl-channels-menu-item[data-channel="games"]:hover .kwl-channels-menu-link{ border-color: var(--kwl-ch-games); }
.kwl-channels-menu-item[data-channel="games"]:hover .kwl-channels-menu-icon{ color: var(--kwl-ch-games-dark); }
.kwl-channels-menu-item:hover .kwl-channels-dropdown,
.kwl-channels-menu-item:focus-within .kwl-channels-dropdown{
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

/* Primary nav */
.kwl-primary-nav{ flex: 1; display: flex; justify-content: center; }
.kwl-menu{ display: flex; align-items: center; gap: 4px; position: relative; }
.kwl-menu-item{ position: relative; }
.kwl-menu-link{
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px; border-radius: var(--kwl-radius-sm);
	font-weight: 600; font-size: .92rem; color: var(--kwl-ink);
	transition: background .2s var(--kwl-ease), color .2s var(--kwl-ease);
}
.kwl-menu-link:hover, .kwl-menu-item.is-current .kwl-menu-link{ background: var(--kwl-soft-blue); color: var(--kwl-primary); }
.kwl-sub-menu .kwl-menu-link{ display: block; padding: 8px 12px; }

/* Quick pill nav across every channel, current one highlighted */
.kwl-cat-pillnav{ padding: 18px 0; margin-top: 20px; border-top: 1px solid var(--kwl-border); border-bottom: 1px solid var(--kwl-border); }
.kwl-cat-pillnav-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.kwl-cat-pill{
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
	background: var(--kwl-bg-alt, #f3f5f8); color: var(--kwl-ink); font-weight: 700; font-size: .82rem;
	transition: background .2s var(--kwl-ease), color .2s var(--kwl-ease);
}
.kwl-cat-pill-icon{ display: flex; }
.kwl-cat-pill:hover{ background: var(--kwl-ink); color: #fff; }
.kwl-cat-pill.is-active{ background: var(--kwl-primary); color: #fff; }

/* Subcategory quick tags */
.kwl-cat-subtags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.kwl-cat-subtag{ padding: 7px 16px; border-radius: 999px; border: 1px solid var(--kwl-border); font-size: .78rem; font-weight: 700; color: var(--kwl-ink-soft); }
.kwl-cat-subtag:hover{ border-color: var(--kwl-primary); color: var(--kwl-primary); }

/* Channel tiles: fixed 220x90 exactly as specified — on any screen too
   narrow to fit all of them in one row (true even on a 1400px desktop
   with 7 channels, since 7×220px+gaps > 1400px), the row scrolls
   horizontally instead of shrinking the tiles or wrapping them. The
   Dynamic Showcase content block below never moves or resizes — only
   tapping a tile's name changes it. */
.kwl-showcase-tiles-wrap{ position: relative; margin-bottom: 20px; }
.kwl-showcase-tiles-wrap::after{
	content: ''; position: absolute; top: 0; bottom: 4px; inset-inline-end: 0; width: 44px;
	background: linear-gradient(to left, var(--kwl-white) 10%, transparent 100%);
	pointer-events: none;
}
[dir="rtl"] .kwl-showcase-tiles-wrap::after{ background: linear-gradient(to right, var(--kwl-white) 10%, transparent 100%); }
.kwl-showcase-tiles{
	display: flex; flex-wrap: nowrap; gap: 20px; margin-bottom: 0;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.kwl-showcase-tiles::-webkit-scrollbar{ height: 5px; }
.kwl-showcase-tiles::-webkit-scrollbar-thumb{ background: var(--kwl-border); border-radius: 10px; }
.kwl-showcase-tile{
	width: auto; max-width: none; flex-shrink: 0; scroll-snap-align: start; height: 46px; display: flex; flex-direction: row;
	align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border-radius: 999px;
	border: 1px solid var(--kwl-border); background: var(--kwl-white); color: var(--kwl-ink); white-space: nowrap;
	transition: border-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1);
}
.kwl-showcase-tile:hover:not(.is-active){ border-color: var(--kwl-primary); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(17,26,35,.1); }
.kwl-showcase-tile.is-active{ background: linear-gradient(135deg, var(--kwl-primary), var(--kwl-primary-dark)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(17,26,35,.28); transform: translateY(-1px); }
.kwl-showcase-tile-icon{ display: flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.kwl-showcase-tile:hover .kwl-showcase-tile-icon{ transform: scale(1.15) rotate(-4deg); }
.kwl-showcase-tile.is-active .kwl-showcase-tile-icon{ transform: scale(1.05); }
.kwl-showcase-tile-label{ font-size: 14px; font-weight: 700; }

/* "مكتبة المعلم والطالب" chooser screen — owner image + two role buttons
   + a not-yet-active login-box placeholder. */
.kwl-showcase-chooser{ display: grid; grid-template-columns: 55fr 45fr; gap: 24px; align-items: stretch; min-height: 220px; }
.kwl-showcase-chooser-visual{
	border-radius: 14px; background-size: cover; background-position: center;
	background-color: var(--kwl-bg-alt, #eee); display: flex; align-items: center; justify-content: center;
}
.kwl-showcase-chooser-visual-fallback{ color: var(--kwl-primary); opacity: .5; }
.kwl-showcase-chooser-actions{ display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.kwl-showcase-chooser-btn{
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 16px; border-radius: 12px; border: 1px solid var(--kwl-border);
	background: var(--kwl-white); color: var(--kwl-ink); font-size: 1rem; font-weight: 800;
	font-family: inherit; cursor: pointer; transition: .25s ease;
}
.kwl-showcase-chooser-btn:hover{ background: var(--kwl-primary); color: #fff; border-color: transparent; transform: translateY(-2px); }
.kwl-showcase-chooser-login{
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px; border-radius: 10px; border: 1px dashed var(--kwl-border);
	color: var(--kwl-ink-muted); font-size: .8rem; opacity: .7; cursor: not-allowed;
}
.kwl-showcase-back-link{ display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: .85rem; font-weight: 700; color: var(--kwl-primary); }

/* Subcategory filter pills: 36px tall, 20px gap, "الكل" active by default */
.kwl-showcase-filterbar{ display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.kwl-showcase-filterbar-skel{ display: flex; gap: 20px; margin-bottom: 20px; }

/* Unified tab-box grid (used for every channel inside the dynamic tab panel) */
.kwl-tab-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }/* -----------------------------------------------------------------------
   12. Breadcrumbs
   -------------------------------------------------------------------- */
.kwl-breadcrumbs{ padding: 16px 0; font-size: .85rem; color: var(--kwl-ink-soft); }
.kwl-breadcrumbs ol{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kwl-breadcrumbs a:hover{ color: var(--kwl-primary); }
.kwl-breadcrumb-sep{ opacity: .4; }

.kwl-pagination ul{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.kwl-pagination a, .kwl-pagination span{ display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 10px; padding: 0 10px; border: 1px solid var(--kwl-border); font-weight: 600; }
.kwl-pagination .current{ background: var(--kwl-primary); color: #fff; border-color: var(--kwl-primary); }
.kwl-pagination a:hover{ background: var(--kwl-soft-blue); }