/* ==========================================================================
   Lakii Kitchen — design layer on top of Blossom Recipe
   Palette: saffron & terracotta · Fonts: El Messiri / IBM Plex Sans Arabic
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
html:root {
	--lk-cream: #FBF6EE;
	--lk-cream-deep: #F4EADB;
	--lk-surface: #FFFFFF;
	--lk-ink: #2B2420;
	--lk-body: #3D342E;
	--lk-muted: #6E6258;
	--lk-line: #EADFD0;
	--lk-terracotta: #B5452B;
	--lk-terracotta-dark: #943520;
	--lk-saffron: #E9A23B;
	--lk-saffron-soft: #FCEFD6;
	--lk-footer: #2B2420;

	--lk-font-head: "El Messiri", "IBM Plex Sans Arabic", Tahoma, sans-serif;
	--lk-font-body: "IBM Plex Sans Arabic", Tahoma, "Segoe UI", sans-serif;

	--lk-radius: 14px;
	--lk-radius-sm: 10px;
	--lk-shadow: 0 2px 6px rgba(43, 36, 32, .06), 0 10px 24px rgba(43, 36, 32, .08);
	--lk-shadow-hover: 0 4px 10px rgba(43, 36, 32, .08), 0 18px 36px rgba(43, 36, 32, .14);

	/* Feed the new values into the parent theme's own variables. */
	--primary-color: #B5452B;
	--primary-color-rgb: 181, 69, 43;
	--primary-font: var(--lk-font-body);
	--secondary-font: var(--lk-font-head);
	--dr-primary-font: var(--lk-font-body);
	--dr-secondary-font: var(--lk-font-head);
}

/* ---------- 2. Base typography ---------- */
html body {
	background: var(--lk-cream);
	color: var(--lk-body);
	font-family: var(--lk-font-body);
	font-size: 17px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Letter-spacing breaks the joins between Arabic letters. */
body *,
body .main-navigation ul li {
	letter-spacing: 0 !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .site-title,
body .page-title,
body .entry-title,
body button,
body input[type="submit"] {
	font-family: var(--lk-font-head);
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	color: var(--lk-ink);
	font-weight: 700;
	line-height: 1.45;
}

body a {
	color: var(--lk-terracotta);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .2s ease;
}
body a:hover { color: var(--lk-terracotta-dark); }

::selection { background: var(--lk-saffron-soft); color: var(--lk-ink); }

body :focus-visible {
	outline: 2px solid var(--lk-saffron);
	outline-offset: 3px;
}

img { height: auto; }

/* ---------- 3. Header ---------- */
body .site-header {
	background: var(--lk-surface);
	border-bottom: 1px solid var(--lk-line);
}

body .site-header .main-header {
	padding: 22px 0 18px;
}

body .site-header .main-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Logo/title on the right (start, in RTL), search on the left. */
/* !important is needed: the parent theme aligns this block with more
   specific selectors (e.g. ".header-one .main-header .search-wrap +
   .site-branding") that push it to the left in RTL. */
body .site-header .main-header .site-branding,
body .site-header .main-header .search-wrap + .site-branding {
	order: 1 !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: flex-start !important; /* = right side in RTL */
	justify-content: center !important;
	text-align: right !important;
	margin: 0 !important;
	padding: 0 !important;
}
body .site-header .main-header .site-title-wrap,
body .site-header .main-header .site-title,
body .site-header .main-header .site-description {
	text-align: right !important;
}
body .site-header .main-header .search-wrap {
	order: 2 !important;
	flex: 0 0 auto !important;
	justify-content: flex-end !important; /* = left side in RTL */
}

body .site-title {
	font-family: var(--lk-font-head) !important;
	font-size: clamp(28px, 4vw, 40px) !important;
	font-weight: 700 !important;
	line-height: 1.2;
	margin: 0;
}
body .site-branding .site-title a {
	color: var(--lk-terracotta);
	text-decoration: none;
}
body .site-branding .site-title a:hover { color: var(--lk-terracotta-dark); }

body .site-description {
	color: var(--lk-muted);
	font-size: 14px;
	margin: 4px 0 0;
}

/* Search button: round, soft */
body .header-search .search-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--lk-cream);
	border: 1px solid var(--lk-line);
	color: var(--lk-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s ease, color .2s ease;
}
body .header-search .search-btn:hover {
	background: var(--lk-terracotta);
	border-color: var(--lk-terracotta);
	color: #fff;
}
body .header-search .search-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Search overlay */
body .header-search-form {
	background: rgba(251, 246, 238, .97);
}
body .header-search-form label {
	font-family: var(--lk-font-head);
	color: var(--lk-ink);
}
body .header-search-form .search-field {
	border: 2px solid var(--lk-line);
	border-radius: 999px;
	background: #fff;
	font-family: var(--lk-font-body);
}
body .header-search-form .search-field:focus { border-color: var(--lk-saffron); outline: none; }

/* Navigation bar */
body .nav-wrap {
	background: var(--lk-surface);
	border-top: 1px solid var(--lk-line);
}

body .main-navigation ul li {
	font-size: 15px;
	font-weight: 600;
}

body .main-navigation ul li a {
	color: var(--lk-ink);
	padding: 14px 16px;
	position: relative;
}

@media screen and (min-width: 1025px) {
	body .main-navigation ul.nav-menu > li > a::after {
		content: "";
		position: absolute;
		inset-inline: 16px;
		bottom: 8px;
		height: 2px;
		border-radius: 2px;
		background: var(--lk-saffron);
		transform: scaleX(0);
		transition: transform .25s ease;
	}
	body .main-navigation ul.nav-menu > li:hover > a::after,
	body .main-navigation ul.nav-menu > li.current-menu-item > a::after {
		transform: scaleX(1);
	}

	/* Dropdowns */
	body .main-navigation ul ul {
		right: 0;
		left: auto;
		text-align: right;
		background: #fff;
		border: 1px solid var(--lk-line);
		border-radius: var(--lk-radius-sm);
		box-shadow: var(--lk-shadow);
		padding: 8px 0;
	}
	body .main-navigation ul ul li { display: block; font-weight: 500; }
	body .main-navigation ul ul li a {
		display: block;
		padding: 9px 18px;
	}
	body .main-navigation ul ul li a:hover {
		background: var(--lk-cream);
		color: var(--lk-terracotta);
	}
}

body .main-navigation ul li:hover > a,
body .main-navigation ul li.current-menu-item > a,
body .main-navigation ul li.current_page_item > a {
	color: var(--lk-terracotta);
}

/* Mobile menu button + panel */
body .main-navigation .toggle-button .toggle-bar {
	background: var(--lk-ink);
	border-radius: 3px;
}
body .main-navigation .toggle-button:hover .toggle-bar { background: var(--lk-terracotta); }

@media screen and (max-width: 1024px) {
	body .nav-wrap .container { display: flex; justify-content: center; }

	body .main-navigation .primary-menu-list {
		background: var(--lk-cream);
	}
	body .main-navigation .primary-menu-list ul li {
		display: block;
		font-size: 17px;
		border-bottom: 1px solid var(--lk-line);
	}
	body .main-navigation .primary-menu-list ul li a {
		display: block;
		padding: 14px 6px;
	}
	body .main-navigation .primary-menu-list ul ul li {
		font-size: 15px;
		font-weight: 500;
		border-bottom: 0;
	}
}

/* ---------- 4. Page headers & breadcrumbs ---------- */
body .page-header {
	background: transparent;
	padding: 48px 0 18px;
	text-align: center;
}

body .page-header .page-title {
	font-size: clamp(26px, 3.4vw, 38px);
	color: var(--lk-ink);
	margin: 0;
	display: inline-block;
	position: relative;
	padding-bottom: 14px;
}
body .page-header .page-title::after {
	content: "";
	position: absolute;
	inset-inline: 30%;
	bottom: 0;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--lk-saffron), var(--lk-terracotta));
}

body .breadcrumb-wrapper,
body #crumbs {
	color: var(--lk-muted);
	font-size: 14px;
	background: transparent;
	border-color: var(--lk-line);
}
body .breadcrumb-wrapper a,
body #crumbs a { color: var(--lk-muted); text-decoration: none; }
body .breadcrumb-wrapper a:hover,
body #crumbs a:hover { color: var(--lk-terracotta); }

/* ---------- 5. Recipe grids (WP Ultimate Post Grid) ---------- */
/* Pages built around a recipe grid use the full container width. */
body.full-width.centered .site-content > .container:has(.wpupg-grid),
body.home.full-width.centered .site-content > .container {
	max-width: 1170px;
	width: 100%;
}

body .wpupg-grid .wpupg-item {
	border: 0 !important;
	border-radius: var(--lk-radius);
	overflow: hidden;
	background: var(--lk-surface);
	box-shadow: var(--lk-shadow);
	transition: box-shadow .25s ease;
}
body .wpupg-grid .wpupg-item:hover { box-shadow: var(--lk-shadow-hover); }

body .wpupg-grid .wpupg-item-image {
	margin: 0;
	overflow: hidden;
	line-height: 0;
}

/* Same shape for every photo, so the grid lines up neatly. */
body .wpupg-grid .wpupg-item-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}
body .wpupg-grid .wpupg-item:hover .wpupg-item-image img { transform: scale(1.05); }

body .wpupg-grid .wpupg-template-overlay-container {
	background: linear-gradient(to top, rgba(30, 22, 18, .88) 0%, rgba(30, 22, 18, .55) 55%, rgba(30, 22, 18, 0) 100%) !important;
	padding: 34px 14px 12px !important;
	inset-inline: 0;
	bottom: 0;
	top: auto !important;
	height: auto !important;
	display: flex;
	align-items: flex-end;
}

body .wpupg-grid .wpupg-item-title {
	font-family: var(--lk-font-head) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #fff !important;
	text-align: start;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Grid filters / pagination buttons if used */
body .wpupg-filter-isotope-term,
body .wpupg-pagination-term {
	border-radius: 999px !important;
	font-family: var(--lk-font-body) !important;
}

/* ---------- 6. Posts and pages ---------- */
body .site-main article .entry-title,
body .single .entry-title {
	font-size: clamp(26px, 3.6vw, 40px);
	color: var(--lk-ink);
	line-height: 1.4;
}

body .cat-links a,
body .entry-header .cat-links a {
	display: inline-block;
	background: var(--lk-saffron-soft);
	color: var(--lk-terracotta-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 2px 12px;
	border-radius: 999px;
	text-decoration: none;
}
body .cat-links a:hover { background: var(--lk-saffron); color: var(--lk-ink); }

body .entry-content img,
body .post-thumbnail img {
	border-radius: var(--lk-radius-sm);
}

body .entry-content p { margin-bottom: 1.3em; }

body .entry-content blockquote {
	border-inline-start: 4px solid var(--lk-saffron);
	background: var(--lk-saffron-soft);
	border-radius: var(--lk-radius-sm);
	padding: 18px 22px;
	font-family: var(--lk-font-head);
	color: var(--lk-ink);
}

/* Archive cards from the parent theme */
body .site-main .post,
body .site-main .wprm_recipe {
	border-radius: var(--lk-radius);
}

/* ---------- 7. Buttons & forms ---------- */
body button,
body input[type="button"],
body input[type="reset"],
body input[type="submit"],
body .btn-readmore,
body .wp-block-button__link {
	background: var(--lk-terracotta);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-family: var(--lk-font-head);
	font-weight: 600;
	font-size: 16px;
	padding: 10px 24px;
	transition: background .2s ease, transform .15s ease;
}
body button:hover,
body input[type="button"]:hover,
body input[type="reset"]:hover,
body input[type="submit"]:hover,
body .btn-readmore:hover,
body .wp-block-button__link:hover {
	background: var(--lk-terracotta-dark);
	color: #fff;
}

/* Keep icon-only theme buttons transparent. */
body .main-navigation .toggle-button,
body .main-navigation button.close,
body .header-search-form button.close,
body .wpupg-grid button {
	background: transparent;
	border-radius: 0;
}

body input[type="text"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="number"],
body textarea,
body select {
	border: 1px solid var(--lk-line);
	border-radius: var(--lk-radius-sm);
	background: #fff;
	font-family: var(--lk-font-body);
	color: var(--lk-ink);
}
body input:focus,
body textarea:focus,
body select:focus {
	border-color: var(--lk-saffron);
	outline: none;
	box-shadow: 0 0 0 3px rgba(233, 162, 59, .25);
}

/* ---------- 8. Recipe card (WP Recipe Maker) ---------- */
body .wprm-recipe,
body .wprm-recipe p,
body .wprm-recipe li,
body .wprm-recipe span,
body .wprm-recipe div {
	font-family: var(--lk-font-body) !important;
}

body .wprm-recipe h1, body .wprm-recipe h2, body .wprm-recipe h3,
body .wprm-recipe .wprm-recipe-name,
body .wprm-recipe .wprm-recipe-header {
	font-family: var(--lk-font-head) !important;
	color: var(--lk-ink) !important;
}

body .wprm-recipe-template-chic,
body .wprm-recipe-container .wprm-recipe:not(.wprm-recipe-snippet) {
	background: var(--lk-surface) !important;
	border: 1px solid var(--lk-line) !important;
	border-radius: var(--lk-radius) !important;
	box-shadow: var(--lk-shadow);
	color: var(--lk-body) !important;
	max-width: 760px !important;
}

body .wprm-recipe a { color: var(--lk-terracotta) !important; }

body .wprm-recipe .wprm-recipe-link,
body .wprm-recipe a.wprm-recipe-print,
body .wprm-recipe a.wprm-recipe-jump,
body .wprm-recipe a.wprm-recipe-pin {
	border-radius: 999px !important;
	font-family: var(--lk-font-head) !important;
	font-weight: 600;
	text-decoration: none !important;
	padding: 8px 18px !important;
}

/* Solid buttons */
body .wprm-recipe-snippet a.wprm-recipe-link,
body .wprm-recipe a.wprm-recipe-print.wprm-recipe-link-button,
body .wprm-recipe a.wprm-recipe-link-button:not(.wprm-recipe-link-outline) {
	background: var(--lk-terracotta) !important;
	border-color: var(--lk-terracotta) !important;
	color: #fff !important;
}
body .wprm-recipe-snippet a.wprm-recipe-link:hover,
body .wprm-recipe a.wprm-recipe-link-button:not(.wprm-recipe-link-outline):hover {
	background: var(--lk-terracotta-dark) !important;
	border-color: var(--lk-terracotta-dark) !important;
}
body .wprm-recipe-snippet a.wprm-recipe-link * { color: #fff !important; fill: #fff !important; }

/* Outline buttons (e.g. Pin) */
body .wprm-recipe a.wprm-recipe-link-outline,
body .wprm-recipe a.wprm-recipe-pin {
	background: transparent !important;
	border: 1.5px solid var(--lk-terracotta) !important;
	color: var(--lk-terracotta) !important;
}

body .wprm-recipe .wprm-recipe-image img {
	border-radius: var(--lk-radius-sm) !important;
}

body .wprm-recipe .wprm-recipe-ingredient-group-name,
body .wprm-recipe .wprm-recipe-instruction-group-name {
	font-family: var(--lk-font-head) !important;
	color: var(--lk-terracotta-dark) !important;
}

body .wprm-recipe ul.wprm-recipe-ingredients li::marker,
body .wprm-recipe ol.wprm-recipe-instructions li::marker {
	color: var(--lk-saffron);
}

/* ---------- 9. Sidebar & widgets ---------- */
body .widget {
	background: var(--lk-surface);
	border-radius: var(--lk-radius);
	padding: 22px;
	box-shadow: var(--lk-shadow);
}
body .widget .widget-title {
	font-family: var(--lk-font-head);
	color: var(--lk-ink);
}
body .site-footer .widget {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* ---------- 10. Footer ---------- */
body .site-footer {
	background: var(--lk-footer) !important;
	color: #E9DFD2;
	margin-top: 60px;
	border-top: 4px solid var(--lk-saffron);
}
body .site-footer .bottom-footer {
	background: transparent;
	padding: 26px 0;
	border: 0;
}
body .site-footer .copyright {
	color: #E9DFD2;
	font-size: 14px;
	line-height: 2;
	text-align: center;
}
body .site-footer a { color: #F3C979; text-decoration: none; }
body .site-footer a:hover { color: #fff; }
body .site-footer .widget .widget-title { color: #fff; }

/* ---------- 11. Responsive ---------- */
@media screen and (max-width: 1024px) {
	body .site-header .main-header { padding: 16px 0 12px; }
}

@media screen and (max-width: 767px) {
	html body { font-size: 16px; }

	body .container { padding-inline: 16px; }

	body .site-description { font-size: 13px; }

	body .page-header { padding: 22px 0 6px; }
	body .site-content { padding-top: 0; }

	/* Two recipes per row on phones instead of one huge photo. */
	body .wpupg-grid.wpupg-responsive-mobile .wpupg-item {
		width: calc(50% - 12px) !important;
		margin: 6px !important;
	}
	body .wpupg-grid .wpupg-item-title { font-size: 13.5px !important; }
	body .wpupg-grid .wpupg-template-overlay-container { padding: 26px 10px 8px !important; }

	body .wprm-recipe-template-chic { padding: 14px !important; }
	body .widget { padding: 18px; }
}

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