/*
 * Shared page primitives — reused across archive / blog / article / tools pages.
 * Page-specific files (archive.css, blog.css, article.css, tools.css) should
 * REUSE these classes and only add what's unique to their page.
 */

/* page header (centered eyebrow + title + intro) */
.ka-page-head { text-align:center; padding:2.6rem 0 .4rem; }
.ka-page-head .ka-eyebrow { margin-bottom:.6rem; }
.ka-page-head h1 { font-family:var(--wp--preset--font-family--display); color:var(--wp--preset--color--heading); font-size:clamp(2rem,4.5vw,3rem); font-weight:700; margin:.2rem 0 0; line-height:1.2; }
.ka-page-head p { color:var(--wp--preset--color--contrast-muted); margin:.6rem auto 0; max-width:56ch; }

/* breadcrumb */
.ka-crumb { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; color:var(--wp--preset--color--contrast-muted); font-size:.85rem; padding-top:1.2rem; }
.ka-crumb a:hover { color:var(--wp--preset--color--primary); }

/* filter / sort toolbar — iOS-style segmented control (rectangular, packed).
   --ka-seg-r is the chip/active-highlight radius (~7px reads rectangular, not a pill);
   the track radius nests on top of it (chip radius + track padding) so the corners line up. */
.ka-toolbar { --ka-seg-r:7px; --ka-seg-pad:4px; display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1.6rem 0 2rem; }
/* .ka-seg is the segmented track: chips sit flush together (gap:0) inside one bordered box. */
.ka-seg { display:flex; flex-wrap:nowrap; gap:0; background:var(--wp--preset--color--surface-2); border:1px solid var(--wp--preset--color--border); border-radius:calc(var(--ka-seg-r) + var(--ka-seg-pad)); padding:var(--ka-seg-pad); }
.ka-seg a, .ka-seg button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:0; font-family:inherit; font-size:.85rem; font-weight:600; line-height:1.1; color:var(--wp--preset--color--contrast-muted); background:transparent; border:0; padding:.4rem .9rem; border-radius:var(--ka-seg-r); cursor:pointer; text-decoration:none; white-space:nowrap; }
.ka-seg a:hover, .ka-seg button:hover { color:var(--wp--preset--color--primary); }
/* Active = solid --primary fill + #fff text — the selected-state pairing the theme already
   ships for .ka-pager .current and .ka-subseg .is-active, and the only one that stays legible
   across the dark modes (a --surface fill + --primary text scores only ~2.7–3.2:1 there, and
   surface-vs-surface-2 separation is ~1.05:1, so a "raised tab" would be invisible). */
.ka-seg .is-active { background:var(--wp--preset--color--primary); color:#fff; box-shadow:var(--wp--custom--shadow--soft); }
.ka-seg .is-active:hover { color:#fff; } /* keep #fff on hover (don't repaint to --primary on the --primary fill) */
.ka-seg a:focus-visible, .ka-seg button:focus-visible { outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; }
.ka-toolbar .ka-spacer { flex:1; }
.ka-select { font-family:inherit; font-size:.88rem; padding:.55rem 1.1rem; border-radius:var(--ka-seg-r); border:1px solid var(--wp--preset--color--border); background:var(--wp--preset--color--surface); color:var(--wp--preset--color--contrast); cursor:pointer; }
.ka-select:focus-visible { outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; }

/* drill-down sub-row (types under «وجبات») — revealed by JS only in that context.
   Matches the rectangular look of the main row; stays a single row. */
.ka-subseg { --ka-seg-r:7px; display:none; flex-wrap:wrap; gap:.3rem; margin:-.6rem 0 1.8rem; }
.ka-subseg.is-shown { display:flex; }
.ka-subseg a { display:inline-flex; align-items:center; min-height:34px; font-family:inherit; font-size:.8rem; font-weight:600; white-space:nowrap; color:var(--wp--preset--color--contrast-muted); background:var(--wp--preset--color--surface-2); border:1px solid var(--wp--preset--color--border); padding:.3rem .8rem; border-radius:var(--ka-seg-r); text-decoration:none; }
.ka-subseg a:hover { color:var(--wp--preset--color--primary); }
.ka-subseg a.is-active { background:var(--wp--preset--color--primary); color:#fff; border-color:var(--wp--preset--color--primary); }
.ka-subseg a.is-active:hover { color:#fff; }
.ka-subseg a:focus-visible { outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; }

/* mobile: stack the toolbar — filters on top (full width), sort below (full width).
   MAIN ROW becomes a 5-column grid so each chip is EXACTLY 1/5 of the track width: all
   five stay fully visible on ONE row (no wrap, no scroll) right down to a 320px viewport.
   (Grid 1fr + min-width:0 forces the cells to shrink-to-share instead of overflowing —
   the default grid-item min-width:auto is what would otherwise push the 5th chip out.)
   SUB-ROW stays a single horizontally-scrollable row (its 6 items needn't all be visible). */
@media (max-width:600px){
	.ka-toolbar { flex-direction:column; align-items:stretch; gap:.7rem; margin:1.2rem 0 1.6rem; }
	.ka-toolbar .ka-spacer { display:none; }
	.ka-seg { display:grid; grid-template-columns:repeat(5,1fr); gap:0; width:100%; overflow:hidden; }
	/* tighter font/padding keeps the longest label (مشروبات / مخبوزات — 5 connected glyphs)
	   from clipping inside its ~48px cell at 320px; ellipsis is a safety net only. */
	.ka-seg a, .ka-seg button { min-width:0; padding:.45rem .2rem; font-size:clamp(.62rem, 3vw, .8rem); overflow:hidden; text-overflow:clip; }
	.ka-subseg { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
	.ka-subseg::-webkit-scrollbar { display:none; }
	.ka-subseg a { white-space:nowrap; flex:0 0 auto; }
	.ka-select { width:100%; }
}

/* pagination (works with core .page-numbers from query pagination) */
.ka-pager, .ka-pager.wp-block-query-pagination { display:flex; gap:.4rem; justify-content:center; margin-top:2.6rem; flex-wrap:wrap; }
.ka-pager .page-numbers, .ka-pager a { min-width:44px; height:44px; padding:0 .7rem; border-radius:var(--wp--custom--radius--pill); display:inline-grid; place-items:center; border:1px solid var(--wp--preset--color--border); background:var(--wp--preset--color--surface); color:var(--wp--preset--color--contrast); font-weight:600; text-decoration:none; }
.ka-pager .page-numbers.current { background:var(--wp--preset--color--primary); color:#fff; border-color:var(--wp--preset--color--primary); }
.ka-pager .page-numbers:hover:not(.current) { border-color:var(--wp--preset--color--accent); }

/* 4-up grid variant for the articles archive (extends .ka-rec-grid in style.css) */
.ka-rec-grid.cols4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .ka-rec-grid.cols4 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .ka-rec-grid.cols4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ka-rec-grid.cols4 { grid-template-columns:1fr; } }