/*
Theme Name:     RecipeFolks
Theme URI:      https://recipefolks.com
Template:       kadence
Author:         Knowhalim
Author URI:     https://recipefolks.com
Description:    RecipeFolks — a warm, editorial recipe-social child theme for Kadence. Implements the RecipeFolks Interface Kit (colour, type, spacing tokens), a recipe-app header nav strip, a branded footer, and lightweight block patterns/styles. Pairs with the RecipeFolks Platform plugin.
Version:        1.0.4
Requires at least: 6.3
Requires PHP:   8.1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:    recipe-folks
Tags:           food-and-drink, blog, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing
*/

/* ==========================================================================
   RecipeFolks — Design Tokens (Interface Kit)
   All values sourced from docs/design-style.md. Admin overrides flow through
   the Customizer + the plugin's rfk_logo_url filter; these are the defaults.
   ========================================================================== */
:root {
	/* Colour */
	--rfk-color-primary: #D94F3D;
	--rfk-color-primary-hover: #B83D2F;
	--rfk-color-secondary: #2F6F5E;
	--rfk-color-success: #287A4B;
	--rfk-color-highlight: #F4C95D;
	--rfk-color-danger: #B42318;
	--rfk-color-ink: #1F2421;
	--rfk-color-muted: #68716C;
	--rfk-color-canvas: #FAF8F4;
	--rfk-color-surface: #FFFFFF;
	--rfk-color-border: #E5E1D9;

	/* On-colour text (foreground that sits on a filled swatch) */
	--rfk-on-primary: #FFFFFF;
	--rfk-on-highlight: #1F2421;

	/* Typography */
	--rfk-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--rfk-font-editorial: "Iowan Old Style", "Palatino Linotype", Georgia, serif;

	/* Spacing — 4px grid */
	--rfk-space-1: 4px;
	--rfk-space-2: 8px;
	--rfk-space-3: 12px;
	--rfk-space-4: 16px;
	--rfk-space-6: 24px;
	--rfk-space-8: 32px;
	--rfk-space-12: 48px;
	--rfk-space-16: 64px;

	/* Shape */
	--rfk-radius-card: 16px;
	--rfk-radius-control: 12px;
	--rfk-radius-input: 10px;
	--rfk-radius-pill: 999px;

	/* Layout */
	--rfk-content-width: 1200px;
	--rfk-reading-width: 760px;

	/* Elevation — one soft shadow, used sparingly */
	--rfk-shadow-float: 0 6px 24px -8px rgba(31, 36, 33, 0.18);

	/* Motion */
	--rfk-transition: 160ms ease;

	/* Touch */
	--rfk-touch: 44px;
}

/* Map RecipeFolks tokens onto Kadence's global palette variables so blocks and
   Kadence components pick up the brand automatically. */
:root {
	--global-palette1: var(--rfk-color-primary);
	--global-palette2: var(--rfk-color-primary-hover);
	--global-palette3: var(--rfk-color-ink);
	--global-palette4: #2b322d;      /* body text — slightly softer than ink */
	--global-palette5: var(--rfk-color-muted);
	--global-palette6: #8a928c;      /* light muted */
	--global-palette7: var(--rfk-color-border);
	--global-palette8: var(--rfk-color-canvas);
	--global-palette9: var(--rfk-color-surface);
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
	font-family: var(--rfk-font-sans);
	color: var(--rfk-color-ink);
	background-color: var(--rfk-color-canvas);
}

h1, h2, h3,
.entry-title,
.rfk-editorial {
	font-family: var(--rfk-font-editorial);
	color: var(--rfk-color-ink);
	letter-spacing: -0.01em;
}

h4, h5, h6 {
	font-family: var(--rfk-font-sans);
	color: var(--rfk-color-ink);
}

a {
	color: var(--rfk-color-primary);
	text-decoration-color: color-mix(in srgb, var(--rfk-color-primary) 40%, transparent);
}

a:hover {
	color: var(--rfk-color-primary-hover);
}

/* Accessible focus ring across the theme (WCAG 2.2 AA). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.rfk-btn:focus-visible,
.rfk-nav__link:focus-visible {
	outline: 2px solid var(--rfk-color-primary);
	outline-offset: 3px;
	border-radius: var(--rfk-radius-input);
}

/* ==========================================================================
   Buttons & pills
   ========================================================================== */
.rfk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rfk-space-2);
	min-height: var(--rfk-touch);
	padding: var(--rfk-space-3) var(--rfk-space-6);
	font-family: var(--rfk-font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: var(--rfk-radius-control);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--rfk-transition), color var(--rfk-transition),
		border-color var(--rfk-transition), filter var(--rfk-transition), transform var(--rfk-transition);
}

.rfk-btn--primary {
	background-color: var(--rfk-color-primary);
	color: var(--rfk-on-primary);
}

.rfk-btn--primary:hover {
	background-color: var(--rfk-color-primary-hover);
	color: var(--rfk-on-primary);
	filter: brightness(1.03);
	transform: translateY(-1px);
}

.rfk-btn--secondary {
	background-color: transparent;
	color: var(--rfk-color-ink);
	border-color: var(--rfk-color-border);
}

.rfk-btn--secondary:hover {
	border-color: var(--rfk-color-primary);
	color: var(--rfk-color-primary-hover);
	transform: translateY(-1px);
}

.rfk-btn--pill {
	border-radius: var(--rfk-radius-pill);
}

/* Core button block: "Pill" style variation. */
.wp-block-button.is-style-rfk-pill .wp-block-button__link {
	border-radius: var(--rfk-radius-pill);
	padding-inline: var(--rfk-space-8);
	min-height: var(--rfk-touch);
	font-weight: 600;
	background-color: var(--rfk-color-primary);
	color: var(--rfk-on-primary);
	transition: background-color var(--rfk-transition), transform var(--rfk-transition);
}

.wp-block-button.is-style-rfk-pill .wp-block-button__link:hover {
	background-color: var(--rfk-color-primary-hover);
	transform: translateY(-1px);
}

/* Core heading block: "Section heading (editorial)" style variation. */
.wp-block-heading.is-style-rfk-editorial {
	font-family: var(--rfk-font-editorial);
	position: relative;
	padding-bottom: var(--rfk-space-3);
	color: var(--rfk-color-ink);
}

.wp-block-heading.is-style-rfk-editorial::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: var(--rfk-radius-pill);
	background-color: var(--rfk-color-primary);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.rfk-card {
	background-color: var(--rfk-color-surface);
	border: 1px solid var(--rfk-color-border);
	border-radius: var(--rfk-radius-card);
	overflow: hidden;
	transition: border-color var(--rfk-transition), transform var(--rfk-transition), box-shadow var(--rfk-transition);
}

.rfk-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--rfk-color-primary) 35%, var(--rfk-color-border));
	box-shadow: 0 20px 40px -22px rgba(217, 79, 61, 0.35);
}

.rfk-tag,
.rfk-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--rfk-space-1);
	padding: var(--rfk-space-1) var(--rfk-space-3);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--rfk-radius-pill);
	background-color: color-mix(in srgb, var(--rfk-color-highlight) 30%, var(--rfk-color-surface));
	color: var(--rfk-color-ink);
	border: 1px solid var(--rfk-color-border);
}

/* ==========================================================================
   Header nav strip — .rfk-nav
   ========================================================================== */
.rfk-nav {
	background-color: var(--rfk-color-surface);
	border-bottom: 1px solid var(--rfk-color-border);
	font-family: var(--rfk-font-sans);
}

/* Header-builder element context: the strip chrome (full-width border,
   background, inner padding/centering) doesn't apply inside a Kadence
   header column — render as a transparent, vertically centered inline nav. */
.rfk-nav--element {
	background-color: transparent;
	border-bottom: 0;
	display: flex;
	align-items: center;
	height: 100%;
}

.rfk-nav--element .rfk-nav__inner {
	max-width: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}

.rfk-nav--element .rfk-nav__list {
	flex-wrap: nowrap;
}

.rfk-nav__inner {
	max-width: var(--rfk-content-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--rfk-space-6);
	padding: var(--rfk-space-3) var(--rfk-space-6);
	flex-wrap: wrap;
}

.rfk-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--rfk-space-2);
	flex-wrap: wrap;
}

.rfk-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--rfk-touch);
	padding: var(--rfk-space-2) var(--rfk-space-4);
	font-size: 15px;
	font-weight: 600;
	color: var(--rfk-color-ink);
	text-decoration: none;
	border-radius: var(--rfk-radius-control);
	transition: background-color var(--rfk-transition), color var(--rfk-transition);
}

.rfk-nav__link:hover,
.rfk-nav__link[aria-current="page"] {
	background-color: color-mix(in srgb, var(--rfk-color-primary) 10%, var(--rfk-color-surface));
	color: var(--rfk-color-primary-hover);
}

.rfk-nav__spacer {
	margin-left: auto;
}

.rfk-nav__cta {
	margin-left: auto;
}

/* ==========================================================================
   Header builder elements — rfk-share / rfk-search / rfk-kitchen
   Compact standalone versions of the strip pieces, sized to sit inside a
   Kadence header column.
   ========================================================================== */
.rfk-share {
	display: inline-flex;
	align-items: center;
	font-family: var(--rfk-font-sans);
}

/* Recipe search — pill input + submit. */
.rfk-search {
	display: inline-flex;
	align-items: center;
	gap: var(--rfk-space-2);
	background-color: var(--rfk-color-surface);
	border: 1px solid var(--rfk-color-border);
	border-radius: var(--rfk-radius-pill);
	padding: 2px 2px 2px var(--rfk-space-4);
	font-family: var(--rfk-font-sans);
	transition: border-color var(--rfk-transition), box-shadow var(--rfk-transition);
}

.rfk-search:focus-within {
	border-color: var(--rfk-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfk-color-primary) 20%, transparent);
}

.rfk-search__field {
	border: 0;
	outline: 0;
	background: transparent;
	min-width: 160px;
	min-height: var(--rfk-touch);
	font-size: 15px;
	color: var(--rfk-color-ink);
}

.rfk-search__field::placeholder {
	color: var(--rfk-color-muted);
}

.rfk-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border: 0;
	cursor: pointer;
	border-radius: var(--rfk-radius-pill);
	background-color: var(--rfk-color-primary);
	color: var(--rfk-on-primary);
	transition: background-color var(--rfk-transition), transform var(--rfk-transition);
}

.rfk-search__submit:hover {
	background-color: var(--rfk-color-primary-hover);
	transform: translateY(-1px);
}

/* My Kitchen link — avatar + label, or a Sign in link. */
.rfk-kitchen {
	display: inline-flex;
	align-items: center;
	font-family: var(--rfk-font-sans);
}

.rfk-kitchen__link {
	display: inline-flex;
	align-items: center;
	gap: var(--rfk-space-2);
	min-height: var(--rfk-touch);
	padding: var(--rfk-space-1) var(--rfk-space-3) var(--rfk-space-1) var(--rfk-space-1);
	border-radius: var(--rfk-radius-pill);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--rfk-color-ink);
	background-color: color-mix(in srgb, var(--rfk-color-ink) 4%, var(--rfk-color-surface));
	transition: background-color var(--rfk-transition), transform var(--rfk-transition);
}

.rfk-kitchen__link:hover {
	background-color: color-mix(in srgb, var(--rfk-color-primary) 10%, var(--rfk-color-surface));
	color: var(--rfk-color-primary-hover);
	transform: translateY(-1px);
}

.rfk-kitchen__avatar {
	display: inline-flex;
	line-height: 0;
}

.rfk-kitchen__avatar img {
	width: 32px;
	height: 32px;
	border-radius: var(--rfk-radius-pill);
	display: block;
}

.rfk-kitchen__signin {
	display: inline-flex;
	align-items: center;
	min-height: var(--rfk-touch);
	padding: var(--rfk-space-2) var(--rfk-space-4);
	font-weight: 600;
	font-size: 15px;
	color: var(--rfk-color-ink);
	text-decoration: none;
	border-radius: var(--rfk-radius-control);
	transition: background-color var(--rfk-transition), color var(--rfk-transition);
}

.rfk-kitchen__signin:hover {
	background-color: color-mix(in srgb, var(--rfk-color-primary) 10%, var(--rfk-color-surface));
	color: var(--rfk-color-primary-hover);
}

@media (prefers-reduced-motion: reduce) {
	.rfk-search,
	.rfk-search__submit,
	.rfk-search__submit:hover,
	.rfk-kitchen__link,
	.rfk-kitchen__link:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Footer brand area — .rfk-footer
   ========================================================================== */
.rfk-footer {
	background-color: var(--rfk-color-ink);
	color: var(--rfk-color-canvas);
	padding: var(--rfk-space-16) var(--rfk-space-6);
}

.rfk-footer__inner {
	max-width: var(--rfk-content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--rfk-space-12);
	align-items: start;
}

.rfk-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--rfk-space-4);
	max-width: 420px;
}

.rfk-footer__logo img {
	max-height: 44px;
	width: auto;
	height: auto;
}

.rfk-footer__wordmark {
	font-family: var(--rfk-font-editorial);
	font-size: 24px;
	font-weight: 700;
	color: var(--rfk-color-canvas);
}

.rfk-footer__tagline {
	color: color-mix(in srgb, var(--rfk-color-canvas) 78%, transparent);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.rfk-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--rfk-space-3);
	flex-wrap: wrap;
}

.rfk-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rfk-touch);
	height: var(--rfk-touch);
	border-radius: var(--rfk-radius-pill);
	background-color: color-mix(in srgb, var(--rfk-color-canvas) 12%, transparent);
	color: var(--rfk-color-canvas);
	transition: background-color var(--rfk-transition), transform var(--rfk-transition);
}

.rfk-footer__social a:hover {
	background-color: var(--rfk-color-primary);
	color: var(--rfk-on-primary);
	transform: translateY(-2px);
}

.rfk-footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.rfk-footer__nav {
	display: flex;
	flex-direction: column;
	gap: var(--rfk-space-2);
}

.rfk-footer__nav .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rfk-space-2);
}

.rfk-footer__nav a {
	color: color-mix(in srgb, var(--rfk-color-canvas) 82%, transparent);
	text-decoration: none;
	font-size: 15px;
	transition: color var(--rfk-transition);
}

.rfk-footer__nav a:hover {
	color: var(--rfk-color-highlight);
}

/* ==========================================================================
   Patterns — hero & CTA band
   ========================================================================== */
.rfk-hero {
	background-color: var(--rfk-color-canvas);
	border-radius: var(--rfk-radius-card);
	padding: var(--rfk-space-16) var(--rfk-space-8);
}

.rfk-cta-band {
	background-color: var(--rfk-color-secondary);
	color: var(--rfk-color-surface);
	border-radius: var(--rfk-radius-card);
	padding: var(--rfk-space-12) var(--rfk-space-8);
	text-align: center;
}

.rfk-cta-band h2,
.rfk-cta-band h3 {
	color: var(--rfk-color-surface);
}

/* ==========================================================================
   Kadence-compatible wide/full alignment helpers (do not use !important)
   ========================================================================== */
.rfk-nav .alignwide,
.rfk-footer .alignwide {
	max-width: var(--rfk-content-width);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.rfk-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--rfk-space-8);
	}

	.rfk-nav__inner {
		gap: var(--rfk-space-3);
	}

	.rfk-nav__cta,
	.rfk-nav__spacer {
		margin-left: 0;
		width: 100%;
	}

	.rfk-nav__cta .rfk-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.rfk-btn,
	.rfk-btn:hover,
	.rfk-card,
	.rfk-card:hover,
	.rfk-nav__link,
	.rfk-footer__social a,
	.wp-block-button.is-style-rfk-pill .wp-block-button__link {
		transition: none !important;
		transform: none !important;
		filter: none !important;
	}
}