/*
Theme Name: Ravelkin
Theme URI: https://example.com/ravelkin
Author: Ravelkin
Description: Starter block theme for the Ravelkin website in a modern storybook style: warm paper, ink illustrations, handwritten notes and scribbled underlines. Includes a devlog-ready blog, front-page patterns and a Genre showcase block that switches between genre themes. Genre presets live in data/genres.json, shared with the app. A "Night" style variation brings back the dark look.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ravelkin
Tags: block-patterns, block-styles, full-site-editing, blog, one-column, wide-blocks, style-variations
*/

:root {
	--rk-shadow: var(--wp--preset--color--rule);
	--rk-hand: var(--wp--preset--font-family--caveat, Caveat, cursive);
	--rk-logo-amber: #B5741C;
	--rk-logo-teal: #2C8676;
	--rk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 0 0.16 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Paper grain under everything (turned off in the Night style). */
body { background-image: var(--rk-grain); background-size: 220px 220px; }

/* ---------- Logo ---------- */

.rk-logo { display: block; height: 2.25rem; width: auto; }
.rk-logo .rk-logo__amber { stroke: var(--rk-logo-amber); }
.rk-logo .rk-logo__teal { stroke: var(--rk-logo-teal); }
.rk-logo .rk-logo__ravel { fill: var(--wp--preset--color--contrast); }
.rk-logo .rk-logo__kin { fill: var(--rk-logo-teal); }
.rk-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.rk-footer .rk-logo { height: 1.75rem; }

/* ---------- Handwriting ---------- */

.rk-kicker,
.is-style-handwritten {
	font-family: var(--rk-hand);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--amber-ink);
	transform: rotate(-2deg);
	transform-origin: left center;
}
.rk-kicker--teal,
.is-style-handwritten.rk-teal { color: var(--wp--preset--color--teal-ink); }
.rk-center .rk-kicker { transform-origin: center; }

/* A margin note with a drawn arrow after it. */
.rk-note {
	font-family: var(--rk-hand);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wp--preset--color--teal-ink);
	transform: rotate(-2deg);
}
.rk-note::after {
	content: "";
	display: inline-block;
	width: 3.2rem;
	height: 2.4rem;
	margin-left: 0.4rem;
	vertical-align: -0.4rem;
	background: url("assets/illustrations/arrow.svg") no-repeat center / contain;
	transform: rotate(25deg);
}
.rk-note--down::after { transform: rotate(70deg); vertical-align: -1.2rem; }
.rk-note--plain::after { display: none; }

/* Scribbled underline: a rich-text format ("Scribble underline" in the editor toolbar). */
mark.rk-scribble {
	background: transparent url("assets/illustrations/scribble.svg") no-repeat 0 94% / 100% 0.34em;
	color: inherit;
	padding: 0 0.04em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ---------- Buttons ---------- */

.wp-element-button,
.wp-block-button__link {
	box-shadow: 3px 3px 0 var(--rk-shadow);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rk-shadow); }
.wp-element-button:active,
.wp-block-button__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--rk-shadow); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--rule);
	padding: 0.7rem 1.25rem;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--raised); }
@media (prefers-reduced-motion: reduce) {
	.wp-element-button, .wp-block-button__link { transition: none; }
}

/* ---------- Sections, cards and illustrations ---------- */

.rk-bordered { position: relative; }
.rk-bordered::before,
.rk-bordered::after,
.rk-header::after,
.rk-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 12px;
	background: url("assets/illustrations/wave.svg") repeat-x 0 0 / 120px 12px;
	pointer-events: none;
}
.rk-bordered::before { top: -6px; }
.rk-bordered::after { bottom: -6px; }
.rk-header { position: relative; }
.rk-header::after { bottom: -6px; }
.rk-footer { position: relative; }
.rk-footer::before { top: -6px; }

.rk-card,
.is-style-ink-card {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
}
.rk-card > :first-child,
.is-style-ink-card > :first-child { margin-top: 0; }
.rk-card--featured,
.is-style-ink-card { box-shadow: 5px 5px 0 var(--rk-shadow); }

.rk-illo img { display: block; width: 100%; height: auto; }
.rk-illo--small img { max-width: 180px; margin-inline: auto; }
.rk-illo--medium img { max-width: 320px; }
.rk-spot img { display: block; width: 104px; height: auto; margin-bottom: 0.25rem; }
.rk-step-art img { display: block; width: 120px; height: auto; }

.rk-step-number {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	background: url("assets/illustrations/circle.svg") no-repeat center / contain;
	font-family: var(--rk-hand);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--amber-ink);
}

.rk-price {
	font-family: var(--wp--preset--font-family--alegreya);
	font-size: 2.6rem;
	line-height: 1;
	font-weight: 800;
}

.rk-caption {
	font-family: var(--rk-hand);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-align: center;
	transform: rotate(-1.5deg);
}

/* ---------- Hero ---------- */

.rk-hero .is-layout-grid { align-items: center; }
.rk-hero h1 { line-height: 1.02; }
.rk-hero__art img { max-width: 560px; margin-inline: auto; }
.rk-engine .rk-illo img { max-width: 440px; margin-inline: auto; }

/* The showcase sits on paper like a framed picture. */
body .rk-showcase {
	border: 2px solid var(--wp--preset--color--rule);
	box-shadow: 6px 6px 0 var(--rk-shadow);
}

/* ---------- Blog ---------- */

.rk-post-card {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rk-post-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rk-shadow); }
@media (prefers-reduced-motion: reduce) { .rk-post-card { transition: none; } .rk-post-card:hover { transform: none; } }
.rk-post-card .wp-block-post-featured-image { margin: 0; border-bottom: 2px solid var(--wp--preset--color--rule); }
.rk-post-card .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.rk-post-card__body { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.rk-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.2; }
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .rk-post-card { flex: 1; }

.rk-feature-image img {
	border-radius: 18px;
	border: 2px solid var(--wp--preset--color--rule);
	box-shadow: 6px 6px 0 var(--rk-shadow);
}

.wp-block-post-content a { text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
.wp-block-post-content > :where(h2, h3) { margin-top: 2em; }
.wp-block-post-content :where(h2, h3, h4) { font-family: var(--wp--preset--font-family--alegreya); }
.wp-block-post-content .wp-block-image img { border-radius: 14px; }

/* Drop cap on the first paragraph of a post. */
.single .wp-block-post-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--alegreya);
	font-weight: 800;
	font-size: 3.7em;
	line-height: 0.82;
	padding: 0.06em 0.12em 0 0;
	color: var(--wp--preset--color--amber-ink);
}

.rk-meta { color: var(--wp--preset--color--subtle); font-size: var(--wp--preset--font-size--small); }

/* Comments and search */
.wp-block-comments .wp-block-comment-template li { border-top: 1px dashed var(--wp--preset--color--line); padding-top: 1rem; }
.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--contrast);
	border-radius: 10px;
	min-height: 44px;
}

/* ---------- Navigation ---------- */

.wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.5rem; }
.wp-block-navigation a.wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--amber);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.rk-footer .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.15rem; }
@media (max-width: 600px) {
	.rk-header .wp-block-buttons { display: none; }
}

/* ---------- Waitlist form (Custom HTML pattern) ---------- */

.rk-waitlist-form { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 34rem; margin-inline: auto; }
.rk-waitlist-form input[type="email"] {
	flex: 1 1 15rem;
	min-width: 0;
	min-height: 50px;
	padding: 0 1rem;
	border-radius: 10px;
	border: 2px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}
.rk-waitlist-form button {
	min-height: 50px;
	padding: 0 1.3rem;
	border: 2px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--on-amber);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 3px 3px 0 var(--rk-shadow);
}
.rk-waitlist-form button:hover { background: var(--wp--preset--color--amber-light); }
.rk-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Group block style "Genre: …" ----------
   Variables come from data/genres.json (see inc/genres.php). */

[class*="is-style-genre-"] {
	background-color: var(--rk-bg);
	color: var(--rk-ink);
	border: 2px solid var(--wp--preset--color--rule);
	border-radius: var(--rk-radius);
	box-shadow: 6px 6px 0 var(--rk-shadow);
	font-family: var(--rk-font-story);
	font-size: var(--rk-story-size);
}
[class*="is-style-genre-"]:where(:not([style*="padding"])) { padding: var(--wp--preset--spacing--50); }
[class*="is-style-genre-"] :is(h1, h2, h3, h4, h5, h6) {
	color: var(--rk-ink);
	font-family: var(--rk-font-head);
	font-weight: var(--rk-head-weight);
	font-style: var(--rk-head-style);
	text-transform: var(--rk-head-transform);
	letter-spacing: var(--rk-head-tracking);
}
[class*="is-style-genre-"] a:where(:not(.wp-element-button)) { color: var(--rk-accent); }
[class*="is-style-genre-"] .wp-element-button,
[class*="is-style-genre-"] .wp-block-button__link {
	background: var(--rk-accent);
	color: var(--rk-on-accent);
	border: 0;
	box-shadow: none;
	border-radius: var(--rk-radius);
	font-family: var(--rk-font-label);
	text-transform: var(--rk-label-transform);
	letter-spacing: var(--rk-label-tracking);
}
[class*="is-style-genre-"] .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--rk-ink);
	border: 1px solid var(--rk-line);
}
[class*="is-style-genre-"] .rk-kicker,
[class*="is-style-genre-"] .rk-genre-label {
	font-family: var(--rk-font-label);
	font-size: 0.85rem;
	font-weight: var(--rk-label-weight);
	text-transform: var(--rk-label-transform);
	letter-spacing: var(--rk-label-tracking);
	color: var(--rk-accent-2);
	transform: none;
}
[class*="is-style-genre-"] .rk-muted { color: var(--rk-muted); }

/* ---------- Layout helpers ---------- */

.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0; }
.rk-center { text-align: center; }
.rk-center .wp-block-buttons { justify-content: center; }
.rk-center .rk-waitlist-form { margin-inline: auto; }
[id] { scroll-margin-top: 1.5rem; }
.rk-post-nav a { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }