/*
Theme Name: Kaeru Kitchen
Theme URI: https://kaerukitchen.com
Author: Kaeru Kitchen
Description: A light, friendly block theme for the Kaeru Kitchen recipe keeper, in the pokaeru palette. Card Stock ground, a Foil hero, Deep Pond text, Frog buttons, Bricolage Grotesque headings. Activating it creates the home, features, about, contact, privacy and terms pages.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaeru-kitchen
*/

/* Layout pieces that theme.json cannot express. Colours come from the theme.json palette. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.kk-center { text-align: center; }
.kk-center .wp-block-buttons { justify-content: center; }

/* Header */
.kk-header {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--wp--preset--color--card-stock) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(19, 33, 52, .08);
}
.kk-header .wp-block-site-logo img, .kk-header .kk-logo img { height: 48px; width: auto; display: block; }
.kk-header .wp-block-navigation { font-weight: 600; }
.kk-header .wp-block-navigation a { text-decoration: none; }
.kk-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--wp--preset--color--frog); text-decoration-thickness: 3px; }

/* Hero */
.kk-hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); background: var(--wp--preset--color--foil); }
.kk-hero .wp-block-columns { align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.kk-pill {
	display: inline-block; margin: 0 0 1rem;
	background: #fff; border-radius: 999px;
	padding: .3rem .9rem; font-size: .875rem; font-weight: 700;
}
.kk-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; max-width: 34rem; }
.kk-small { font-size: .9375rem; opacity: .8; }
.kk-hero-art {
	background: var(--wp--preset--color--card-stock); border-radius: 36px;
	padding: clamp(2rem, 6vw, 4rem); display: flex; justify-content: center;
}
.kk-hero-art img { width: min(100%, 320px); height: auto; }

/* Buttons */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(19, 33, 52, .15); }
.is-style-outline > .wp-block-button__link { border: 2px solid var(--wp--preset--color--deep-pond); background: transparent; }
.kk-soon .wp-block-button__link {
	background: #fff; color: var(--wp--preset--color--deep-pond); pointer-events: none; box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) { .wp-block-button__link { transition: none; } .wp-block-button__link:hover { transform: none; } }

/* Sections */
.kk-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.kk-section > h2, .kk-intro { max-width: 40rem; }
.kk-center > h2, .kk-center.kk-intro, .kk-center .kk-intro { margin-inline: auto; }
.kk-eyebrow { font-weight: 700; font-size: .875rem; letter-spacing: .02em; margin: 0 0 .5rem; }

/* Cards */
.kk-cards { gap: 1.25rem; }
.kk-card {
	background: #fff; border: 1px solid rgba(19, 33, 52, .1); border-radius: 24px;
	padding: 1.75rem; height: 100%;
}
.kk-card h3 { margin-top: .25rem; margin-bottom: .5rem; }
.kk-card p:last-child { margin-bottom: 0; }
.kk-icon {
	width: 3.25rem; height: 3.25rem; border-radius: 50%; margin: 0 0 .75rem;
	background: var(--wp--preset--color--frog); display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem; line-height: 1;
}

/* Soft panel */
.kk-peel { background: var(--wp--preset--color--peel); border-radius: 32px; padding: clamp(1.75rem, 5vw, 3.5rem); }
.kk-peel .wp-block-columns { align-items: center; gap: 2rem; }

/* Call to action: Frog ground, Deep Pond text */
.kk-cta {
	background: var(--wp--preset--color--frog); color: var(--wp--preset--color--deep-pond);
	border-radius: 32px; padding: clamp(2rem, 6vw, 4rem);
}
.kk-cta .is-style-outline > .wp-block-button__link { border-color: var(--wp--preset--color--deep-pond); }

/* Feature sections: words beside a "how it works" panel */
.kk-feature { align-items: center; gap: clamp(1.5rem, 5vw, 4rem); }
.kk-feature-section { scroll-margin-top: 5rem; }
.kk-feature-section + .kk-feature-section { border-top: 1px solid rgba(19, 33, 52, .08); }
.kk-feature .kk-peel .kk-steps { margin: .5rem 0 0; }
.kk-feature ul:not(.kk-steps) { padding-left: 1.2rem; }

/* Dark panel (kept for editors who want one) */
.kk-dark {
	background: var(--wp--preset--color--deep-pond); color: var(--wp--preset--color--card-stock);
	border-radius: 32px; padding: clamp(2rem, 6vw, 4rem);
}
.kk-dark h2, .kk-dark h3, .kk-dark p { color: var(--wp--preset--color--card-stock); }
.kk-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--frog); }

/* Steps */
.kk-steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.kk-steps > li {
	counter-increment: step; position: relative; background: #fff;
	border: 1px solid rgba(19, 33, 52, .1); border-radius: 20px; padding: 1.1rem 1.25rem 1.1rem 4.25rem;
}
.kk-steps > li::before {
	content: counter(step); position: absolute; left: 1.1rem; top: 1rem;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--wp--preset--color--frog); font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}

/* Page title band on inner pages */
.kk-pagehead { background: var(--wp--preset--color--peel); padding-block: clamp(2rem, 5vw, 3.5rem); }
.kk-pagehead .wp-block-post-title { margin: 0; }

/* Legal and long reading */
.kk-legal h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.25rem; }
.kk-legal p, .kk-legal li { max-width: 42rem; }
.kk-updated { font-size: .9375rem; opacity: .75; }
.kk-note {
	background: var(--wp--preset--color--peel); border-radius: 20px; padding: 1.25rem 1.5rem; margin-block: 1.5rem;
}
.kk-note p:last-child { margin-bottom: 0; }

/* Footer */
.kk-footer { background: var(--wp--preset--color--deep-pond); color: var(--wp--preset--color--card-stock); padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.kk-footer a { color: var(--wp--preset--color--card-stock); text-decoration: none; }
.kk-footer a:hover { color: var(--wp--preset--color--frog); text-decoration: underline; }
.kk-footer h2 { font-size: 1rem; color: var(--wp--preset--color--frog); margin: 0 0 .75rem; font-family: var(--wp--preset--font-family--body); }
.kk-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.kk-footer .kk-logo img { height: 44px; width: auto; }
.kk-footer .kk-fine { font-size: .8125rem; opacity: .7; }
.kk-footer hr { border: 0; border-top: 1px solid rgba(244, 247, 250, .2); margin-block: 2rem 1.25rem; }

/* Focus ring that works on both grounds */
:where(a, button, .wp-block-button__link):focus-visible { outline: 3px solid var(--wp--preset--color--deep-pond); outline-offset: 3px; box-shadow: 0 0 0 6px var(--wp--preset--color--frog); }
.kk-footer :where(a):focus-visible { outline-color: var(--wp--preset--color--frog); box-shadow: none; }

.kk-section-tight { padding-block: clamp(1rem, 3vw, 2rem); }