/*
 * tools.css — macro calculator (calc) + search results page.
 * Ported 1:1 from _design/site-mockup.html [data-page="calc"] & [data-page="search"],
 * mapped to theme.json CSS variables (auto-themes across 6 modes).
 * REUSES from style.css/_base.css: .ka-eyebrow, .ka-btn(--primary/--ghost),
 * .ka-page-head, .ka-crumb, .ka-pager. Mobile-first / RTL.
 */

/* ============================ MACRO CALCULATOR ============================ */
.ka-calc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	margin-top: 1.5rem;
}

/* --- left: form card --- */
.ka-calc-form {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1.7rem;
	box-shadow: var(--wp--custom--shadow--soft);
}
.ka-field { margin-bottom: 1.1rem; font-family: var(--wp--preset--font-family--sans); }
.ka-field label {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
	margin-bottom: .4rem;
	font-size: .92rem;
}
.ka-field input,
.ka-field select {
	width: 100%;
	padding: .7rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .95rem;
}
.ka-field input:focus,
.ka-field select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}

/* segmented toggles (ذكر/أنثى, خسارة/تثبيت/زيادة) */
.ka-seg-row { display: flex; gap: .4rem; }
.ka-seg-row button {
	flex: 1;
	min-height: 44px;
	padding: .65rem;
	border-radius: var(--wp--custom--radius--md);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ka-seg-row button:hover { border-color: var(--wp--preset--color--accent); }
.ka-seg-row button.is-active {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-color: var(--wp--preset--color--primary);
}

/* full-width calc button (button already styled by .ka-btn in style.css) */
.ka-calc-go { width: 100%; }

/* --- right: dark result panel --- */
.ka-calc-out {
	background: var(--wp--preset--color--panel);
	color: var(--wp--preset--color--panel-text);
	border-radius: var(--wp--custom--radius--lg);
	padding: 2rem;
	text-align: center;
}
.ka-calc-out__lbl {
	color: var(--wp--preset--color--panel-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .9rem;
}
.ka-calc-out__big {
	font-size: 3.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.1;
}
.ka-calc-out__macros {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.6rem;
}
.ka-mc {
	background: rgba(255, 255, 255, .06);
	border-radius: var(--wp--custom--radius--md);
	padding: 1.1rem;
}
.ka-mc b {
	display: block;
	font-size: 1.5rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
}
.ka-mc span {
	font-size: .78rem;
	color: var(--wp--preset--color--panel-muted);
	font-family: var(--wp--preset--font-family--sans);
}
.ka-calc-out__note {
	color: var(--wp--preset--color--panel-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .82rem;
	margin-top: 1.4rem;
}

/* calc → 1 column on tablet/phone */
@media (max-width: 880px) {
	.ka-calc { grid-template-columns: 1fr; }
	.ka-calc-out__macros { grid-template-columns: repeat(3, 1fr); }
}
/* stack macro cards on phones so the numbers stay readable */
@media (max-width: 560px) {
	.ka-calc-out__macros { grid-template-columns: 1fr; }
}

/* ============================== SEARCH PAGE ============================== */
/* search bar (the wp:search block renders .wp-block-search; we add .ka-searchbar) */
.ka-searchbar {
	display: flex;
	gap: .6rem;
	max-width: 600px;
	margin: 1.5rem auto 0;
}
.ka-searchbar .wp-block-search__inside-wrapper {
	display: flex;
	gap: .6rem;
	border: 0;
	width: 100%;
}
.ka-searchbar .wp-block-search__input,
.ka-searchbar input[type="search"] {
	flex: 1;
	padding: .9rem 1.3rem;
	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);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .95rem;
}
.ka-searchbar .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-soft);
}
.ka-searchbar .wp-block-search__button {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	padding: .9rem 1.6rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.ka-searchbar .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-strong);
	transform: translateY(-2px);
}

/* results count line */
.ka-search-count {
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--sans);
	max-width: 760px;
	margin: 0 auto;
}

/* results list */
.ka-search-list { max-width: 760px; margin: 2rem auto 0; }
.ka-search-result {
	display: flex;
	gap: 1.1rem;
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ka-search-result .wp-block-post-featured-image,
.ka-search-result figure {
	flex: none;
	margin: 0;
	width: 128px;
}
.ka-search-result .wp-block-post-featured-image img,
.ka-search-result img {
	width: 128px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	display: block;
}
.ka-search-result .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	margin: .15rem 0;
	line-height: 1.3;
}
.ka-search-result .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.ka-search-result .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.ka-search-result .wp-block-post-terms,
.ka-search-result .ka-search-result__tag {
	font-size: .74rem;
	color: var(--ka-eyebrow);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
}
.ka-search-result .wp-block-post-terms a { color: inherit; text-decoration: none; }
.ka-search-result .wp-block-post-excerpt,
.ka-search-result .wp-block-post-excerpt p {
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .9rem;
	margin-top: .3rem;
}
.ka-search-result .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* empty state */
.ka-search-empty {
	max-width: 600px;
	margin: 2.5rem auto;
	text-align: center;
	color: var(--wp--preset--color--contrast-muted);
	font-family: var(--wp--preset--font-family--sans);
}
.ka-search-empty .ka-searchbar { margin-top: 1.5rem; }

/* search-result → stack image on top on phones */
@media (max-width: 520px) {
	.ka-search-result { flex-direction: column; }
	.ka-search-result .wp-block-post-featured-image,
	.ka-search-result figure { width: 100%; }
	.ka-search-result .wp-block-post-featured-image img,
	.ka-search-result img { width: 100%; height: 170px; }
	.ka-searchbar { flex-direction: column; }
	.ka-searchbar .wp-block-search__inside-wrapper { flex-direction: column; }
}