/* ==========================================================================
   Lakii Decor & Dictionary — new design
   Uses the Lakii Kitchen theme colors when present, with fallbacks so it also
   looks right with any other theme.
   ========================================================================== */

.lkd {
	--k-ink: var(--lk-ink, #2B2420);
	--k-body: var(--lk-body, #3D342E);
	--k-muted: var(--lk-muted, #6E6258);
	--k-line: var(--lk-line, #EADFD0);
	--k-cream: var(--lk-cream, #FBF6EE);
	--k-surface: var(--lk-surface, #FFFFFF);
	--k-accent: var(--lk-terracotta, #B5452B);
	--k-accent-dark: var(--lk-terracotta-dark, #943520);
	--k-gold: var(--lk-saffron, #E9A23B);
	--k-gold-soft: var(--lk-saffron-soft, #FCEFD6);
	--k-head: var(--lk-font-head, "El Messiri", Tahoma, sans-serif);
	--k-text: var(--lk-font-body, "IBM Plex Sans Arabic", Tahoma, sans-serif);
	--k-radius: 14px;
	--k-radius-sm: 10px;
	--k-shadow: 0 1px 3px rgba(43, 36, 32, .06), 0 8px 22px rgba(43, 36, 32, .08);
	--k-shadow-hover: 0 4px 10px rgba(43, 36, 32, .08), 0 16px 34px rgba(43, 36, 32, .14);

	direction: rtl;
	text-align: right;
	color: var(--k-body);
	font-family: var(--k-text);
	line-height: 1.85;
	margin-bottom: 40px;
}

.lkd *,
.lkd *::before,
.lkd *::after { box-sizing: border-box; letter-spacing: 0; }

.lkd a { color: var(--k-accent); text-decoration: none; }
.lkd a:hover { color: var(--k-accent-dark); }

.lkd img { max-width: 100%; height: auto; border: 0; }

.lkd .lkd-icon { flex: 0 0 auto; vertical-align: -3px; }

.lkd .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* The page title from WordPress already says where we are; keep ours tidy. */
.lkd h1, .lkd h2, .lkd h3 { font-family: var(--k-head); color: var(--k-ink); }

/* ---------- Preview banner (admins only) ---------- */
.lkd-preview-banner {
	background: var(--k-gold-soft);
	border: 1px dashed var(--k-gold);
	border-radius: var(--k-radius-sm);
	padding: 10px 16px;
	margin-bottom: 24px;
	font-size: 14px;
}

/* ---------- Headings ---------- */
.lkd-head { text-align: center; margin: 8px 0 26px; }
.lkd-title {
	font-size: clamp(24px, 3vw, 32px);
	margin: 0 0 6px;
	line-height: 1.4;
}
.lkd-subtitle { margin: 0; color: var(--k-muted); font-size: 15px; }

/* ---------- Breadcrumbs ---------- */
.lkd-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 18px;
	padding: 0;
	font-size: 14px;
	color: var(--k-muted);
}
.lkd-crumbs li { display: inline-flex; align-items: center; margin: 0; }
.lkd-crumbs li + li::before {
	content: "‹";
	margin-inline-end: 6px;
	color: var(--k-line);
	font-size: 18px;
	line-height: 1;
}
.lkd-crumbs a { color: var(--k-muted); }
.lkd-crumbs a:hover { color: var(--k-accent); }
.lkd-crumbs [aria-current] { color: var(--k-ink); font-weight: 600; }

/* ---------- Category pills ---------- */
.lkd-pills { margin: 0 0 26px; }
.lkd-pills ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.lkd-pills li { margin: 0; }
.lkd-pills a {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid var(--k-line);
	background: var(--k-surface);
	color: var(--k-body);
	font-size: 14px;
	font-weight: 500;
	transition: background .2s, color .2s, border-color .2s;
}
.lkd-pills a:hover { border-color: var(--k-gold); color: var(--k-accent); }
.lkd-pills a.is-active {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}

/* ---------- Card grids ---------- */
.lkd-grid {
	list-style: none;
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	/* Card sizes match the real image sizes (~150–200px) so photos stay sharp. */
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.lkd-grid--cats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.lkd-card { margin: 0; }
.lkd-card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--k-surface);
	border-radius: var(--k-radius);
	overflow: hidden;
	box-shadow: var(--k-shadow);
	color: var(--k-ink);
	transition: box-shadow .25s, transform .25s;
}
.lkd-card > a:hover {
	box-shadow: var(--k-shadow-hover);
	transform: translateY(-3px);
	color: var(--k-ink);
}
.lkd-card > a:focus-visible { outline: 3px solid var(--k-gold); outline-offset: 3px; }

.lkd-card-media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--k-cream);
	overflow: hidden;
}
.lkd-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.lkd-card > a:hover .lkd-card-media img { transform: scale(1.05); }

/* Decoration "large" pictures are tall step-by-step strips: show the top. */
.lkd-card--idea .lkd-card-media { aspect-ratio: 4 / 5; }
.lkd-card--idea .lkd-card-media img { object-position: top center; }

.lkd-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px 14px;
	flex: 1;
}
.lkd-card-title {
	font-family: var(--k-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
}
.lkd-card-meta { font-size: 13px; color: var(--k-muted); }

.lkd-card--cat .lkd-card-body { text-align: center; }
.lkd-card--cat .lkd-card-title { font-size: 17px; }

/* ---------- Detail page ---------- */
.lkd-detail {
	background: var(--k-surface);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow);
	padding: clamp(18px, 3vw, 34px);
	margin-bottom: 34px;
}
.lkd-detail-head {
	text-align: center;
	border-bottom: 1px solid var(--k-line);
	padding-bottom: 18px;
	margin-bottom: 24px;
}
.lkd-chip {
	display: inline-block;
	background: var(--k-gold-soft);
	color: var(--k-accent-dark) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 2px 12px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.lkd-detail-title {
	font-size: clamp(26px, 3.6vw, 38px);
	line-height: 1.35;
	margin: 0 0 6px;
}
.lkd-detail-sub {
	margin: 0 0 6px;
	color: var(--k-muted);
	font-size: 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
}
.lkd-meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--k-muted);
}
.lkd-meta li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

.lkd-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.lkd-figure {
	margin: 0;
	position: sticky;
	top: 24px;
	max-width: 300px;
	justify-self: center;
}
.lkd-figure a,
.lkd-figure > img {
	display: block;
	position: relative;
	border-radius: var(--k-radius-sm);
	overflow: hidden;
	background: var(--k-cream);
	border: 1px solid var(--k-line);
}
.lkd-figure img { display: block; margin: 0 auto; }
.lkd-figure-zoom {
	position: absolute;
	inset-inline: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(43, 36, 32, .78);
	color: #fff;
	font-size: 13px;
	opacity: 0;
	transition: opacity .2s;
}
.lkd-figure a:hover .lkd-figure-zoom,
.lkd-figure a:focus-visible .lkd-figure-zoom { opacity: 1; }
.lkd-figure--square > img { max-width: 260px; }

.lkd-prose { font-size: 17px; line-height: 2; min-width: 0; }
.lkd-prose p { margin: 0 0 1em; }
.lkd-prose .lkd-section-title {
	font-size: 20px;
	margin: 1.4em 0 .5em;
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--k-gold);
	line-height: 1.4;
}
.lkd-prose .lkd-section-title:first-child { margin-top: 0; }
.lkd-prose .lkd-list { margin: 0 0 1.2em; padding-inline-start: 1.3em; }
.lkd-prose .lkd-list li { margin-bottom: .3em; }
.lkd-prose .lkd-list li::marker { color: var(--k-gold); }
.lkd-muted { color: var(--k-muted); }

/* ---------- Rating ---------- */
.lkd-stars {
	position: relative;
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	color: #E3D8C9;
	white-space: nowrap;
	vertical-align: -2px;
}
.lkd-stars::before { content: "★★★★★"; }
.lkd-stars-fill {
	position: absolute;
	top: 0;
	right: 0; /* RTL: stars fill from the right */
	overflow: hidden;
	color: var(--k-gold);
	white-space: nowrap;
}
.lkd-stars-fill::before { content: "★★★★★"; }

.lkd-rating {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--k-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.lkd-rating-summary { display: flex; align-items: center; gap: 10px; }
.lkd-rating-avg { font-family: var(--k-head); font-size: 28px; font-weight: 700; color: var(--k-ink); }
.lkd-rating-summary .lkd-stars { font-size: 22px; }
.lkd-rating-count { color: var(--k-muted); font-size: 14px; }

.lkd-rate-form fieldset { border: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.lkd .lkd-rate-form legend {
	float: right;
	font-weight: 600;
	color: var(--k-ink);
	margin: 0;
	padding: 0;
}
.lkd-rate-stars { display: inline-flex; flex-direction: row-reverse; }
.lkd-rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lkd .lkd-rate-stars label {
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
	padding: 0 2px;
	color: #E3D8C9;
	transition: color .15s, transform .15s;
}
/* Inputs are in order 5..1 and laid out row-reverse, so in RTL "1" is on the
   right. Highlight the hovered star and every star before it. */
.lkd-rate-stars label:hover,
.lkd-rate-stars label:hover ~ label,
.lkd-rate-stars input:checked ~ label { color: var(--k-gold); }
.lkd-rate-stars:hover input:checked ~ label { color: #E3D8C9; }
.lkd-rate-stars:hover label:hover,
.lkd-rate-stars:hover label:hover ~ label { color: var(--k-gold); }
.lkd-rate-stars label:hover { transform: scale(1.15); }
.lkd-rate-stars input:focus-visible + label { outline: 2px solid var(--k-gold); outline-offset: 2px; border-radius: 4px; }
.lkd-rate-form.is-done { opacity: .5; pointer-events: none; }
.lkd-rate-response { flex-basis: 100%; margin: 0; color: var(--k-accent-dark); font-weight: 600; min-height: 1em; }
.lkd-rate-response:empty { display: none; }

/* ---------- Related ---------- */
.lkd-related { margin-top: 10px; }
.lkd-related .lkd-head { margin-bottom: 18px; }
.lkd-more { text-align: center; margin: 22px 0 0; }

/* ---------- Buttons ---------- */
.lkd .lkd-btn,
.lkd button.lkd-btn,
.lkd a.lkd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border: 2px solid var(--k-accent) !important;
	border-radius: 999px !important;
	background: var(--k-accent) !important;
	color: #fff !important;
	box-shadow: none !important;
	text-decoration: none !important;
	font-family: var(--k-head);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s, border-color .2s, color .2s;
}
.lkd .lkd-btn:hover,
.lkd button.lkd-btn:hover,
.lkd a.lkd-btn:hover { background: var(--k-accent-dark) !important; border-color: var(--k-accent-dark) !important; color: #fff !important; }
.lkd .lkd-btn--ghost,
.lkd a.lkd-btn--ghost { background: transparent !important; color: var(--k-accent) !important; }
.lkd .lkd-btn--ghost:hover,
.lkd a.lkd-btn--ghost:hover { background: var(--k-accent) !important; color: #fff !important; }

/* ---------- Search ---------- */
.lkd-hero {
	background: linear-gradient(135deg, var(--k-gold-soft), var(--k-surface));
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px);
	margin-bottom: 30px;
}
.lkd-hero .lkd-head { margin-bottom: 18px; }

.lkd-search {
	display: flex;
	gap: 8px;
	max-width: 620px;
	margin: 0 auto 26px;
}
.lkd-hero .lkd-search { margin-bottom: 0; }
.lkd-search input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 2px solid var(--k-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--k-ink);
}
.lkd-search input[type="search"]:focus {
	outline: none;
	border-color: var(--k-gold);
	box-shadow: 0 0 0 4px rgba(233, 162, 59, .2);
}
.lkd-search .lkd-btn { height: 48px; padding: 0 22px; }
.lkd-search--big input[type="search"],
.lkd-search--big .lkd-btn { height: 54px; }

/* ---------- Word lists ---------- */
.lkd-filter {
	position: relative;
	max-width: 420px;
	margin: 0 auto 18px;
	color: var(--k-muted);
}
.lkd-filter .lkd-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); }
.lkd-filter input {
	width: 100%;
	height: 42px;
	padding-inline: 42px 14px;
	border: 1px solid var(--k-line);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 15px;
}
.lkd-filter input:focus { outline: none; border-color: var(--k-gold); }

.lkd-words {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}
.lkd-words li { margin: 0; }
.lkd-words a {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "ar views" "en views";
	align-items: center;
	column-gap: 12px;
	height: 100%;
	padding: 12px 16px;
	background: var(--k-surface);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	color: var(--k-ink);
	transition: border-color .2s, box-shadow .2s;
}
.lkd-words a:hover { border-color: var(--k-gold); box-shadow: var(--k-shadow); color: var(--k-ink); }
.lkd-word-ar { grid-area: ar; font-weight: 600; font-size: 16px; line-height: 1.5; }
.lkd-word-en { grid-area: en; color: var(--k-muted); font-size: 14px; text-align: right; line-height: 1.4; }
.lkd-word-views {
	grid-area: views;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--k-muted);
	white-space: nowrap;
}
.lkd-words li[hidden] { display: none; }

/* ---------- Names (dictionary detail) ---------- */
.lkd-names { margin-top: 30px; }
.lkd-names-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 19px;
	margin: 26px 0 12px;
}
.lkd-name-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
	margin: 0;
}
.lkd-name-grid--lang { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lkd-name-grid > div {
	background: var(--k-cream);
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	padding: 10px 14px;
}
.lkd-name-grid dt { font-size: 13px; color: var(--k-muted); margin: 0; font-weight: 500; }
.lkd-name-grid dd { margin: 2px 0 0; font-weight: 600; color: var(--k-ink); font-size: 16px; }
.lkd-name-grid dd[dir="ltr"] { text-align: right; }

.lkd-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 22px;
	padding: 16px 20px;
	border-radius: var(--k-radius-sm);
	background: var(--k-gold-soft);
}
.lkd-cta p { margin: 0; font-weight: 500; color: var(--k-ink); }

/* ---------- Forms ---------- */
.lkd-form fieldset {
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: var(--k-surface);
	padding: 18px 20px 6px;
	margin: 0 0 20px;
}
.lkd-form legend {
	font-family: var(--k-head);
	font-weight: 700;
	font-size: 18px;
	color: var(--k-ink);
	padding: 0 8px;
}
.lkd-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 16px;
}
.lkd-field { margin-bottom: 12px; }
.lkd-field label { display: block; font-size: 14px; font-weight: 600; color: var(--k-ink); margin-bottom: 4px; }
.lkd-field input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius-sm);
	background: #fff;
	font: inherit;
	font-size: 15px;
}
.lkd-field input:focus { outline: none; border-color: var(--k-gold); box-shadow: 0 0 0 3px rgba(233, 162, 59, .2); }
.lkd-field input::placeholder { color: #A59A8F; }
.lkd-form-actions { display: flex; gap: 10px; justify-content: center; }
.lkd-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.lkd-alert {
	background: #FDECEA;
	border: 1px solid #F3C4BC;
	color: #8A2A1B;
	border-radius: var(--k-radius-sm);
	padding: 10px 14px;
}

/* ---------- Empty / success states ---------- */
.lkd-empty {
	text-align: center;
	padding: 30px 16px;
	color: var(--k-muted);
}
.lkd-success { background: var(--k-gold-soft); border-radius: var(--k-radius); color: var(--k-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 782px) {
	.lkd-detail-layout { grid-template-columns: 1fr; gap: 22px; }
	.lkd-figure { position: static; max-width: 100%; }
	.lkd-figure-zoom { opacity: 1; }
	.lkd-rating { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.lkd-grid,
	.lkd-grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.lkd-card-body { padding: 10px 10px 12px; }
	.lkd-card-title { font-size: 14.5px; }
	.lkd-card--cat .lkd-card-title { font-size: 15px; }
	.lkd-pills ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
	.lkd-pills a { white-space: nowrap; }
	.lkd-search .lkd-btn span { display: none; }
	.lkd-search .lkd-btn { padding: 0 16px; }
	.lkd-words { grid-template-columns: 1fr; }
	.lkd-prose { font-size: 16px; }
	.lkd-cta { flex-direction: column; align-items: stretch; text-align: center; }
	.lkd-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
	.lkd-form fieldset { padding: 14px 12px 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.lkd *, .lkd *::before, .lkd *::after { transition: none !important; }
}

/* Numbered steps (method sections). */
.lkd-prose .lkd-steps { margin: 0 0 1.2em; padding-inline-start: 1.6em; }
.lkd-prose .lkd-steps li { margin-bottom: .45em; padding-inline-start: .3em; }
.lkd-prose .lkd-steps li::marker { color: var(--k-accent); font-weight: 700; font-family: var(--k-head); }