/*
 * 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 */
.ka-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1.6rem 0 2rem; }
.ka-seg { display:flex; flex-wrap:wrap; gap:.3rem; background:var(--wp--preset--color--surface-2); border:1px solid var(--wp--preset--color--border); border-radius:var(--wp--custom--radius--pill); padding:4px; }
.ka-seg a, .ka-seg button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; font-family:inherit; font-size:.85rem; font-weight:600; color:var(--wp--preset--color--contrast-muted); background:transparent; border:0; padding:.4rem .95rem; border-radius:var(--wp--custom--radius--pill); cursor:pointer; text-decoration:none; }
.ka-seg a:hover, .ka-seg button:hover { color:var(--wp--preset--color--primary); }
.ka-seg .is-active { background:var(--wp--preset--color--surface); color:var(--wp--preset--color--primary); box-shadow:var(--wp--custom--shadow--soft); }
.ka-toolbar .ka-spacer { flex:1; }
.ka-select { font-family:inherit; font-size:.88rem; padding:.55rem 1.1rem; border-radius:var(--wp--custom--radius--pill); border:1px solid var(--wp--preset--color--border); background:var(--wp--preset--color--surface); color:var(--wp--preset--color--contrast); cursor:pointer; }

/* 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 recipes 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; } }