/*
Theme Name: Crochet Lantern
Theme URI: https://crochetlantern.com/
Author: Crochet Lantern
Description: A cozy, readable block theme for crochet pattern blogs. Warm cream background, terracotta and sage accents, comfortable reading width, and ready-made patterns for crochet posts (materials box, difficulty badge, category cards).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crochet-lantern
Tags: blog, block-patterns, full-site-editing, custom-colors, editor-style, one-column, wide-blocks
*/

/* Small touches theme.json can't express */

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

:where(.wp-block-post-content) img {
	border-radius: 14px;
}

.wp-block-post-featured-image img {
	border-radius: 16px;
}

/* Post cards on the blog and archive pages */
.wy-card {
	transition: transform 0.2s ease;
}
.wy-card:hover {
	transform: translateY(-3px);
}

/* Dashed "stitch" divider */
.wp-block-separator.is-style-stitch {
	border: none;
	border-top: 2px dashed var(--wp--preset--color--terracotta);
	opacity: 0.6;
	background: none;
	height: 0;
}

/* Difficulty badge */
.wy-badge {
	display: inline-block;
}

/* Crochet abbreviations / rows list: easier to follow row by row */
.is-style-pattern-rows li {
	padding: 0.5em 0;
	border-bottom: 1px dashed var(--wp--preset--color--sand);
}
.is-style-pattern-rows li::marker {
	color: var(--wp--preset--color--terracotta);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.wy-card { transition: none; }
	.wy-card:hover { transform: none; }
}

/* Header menu (Appearance > Menus > "Header menu") */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.cl-menu { position: relative; }
.cl-menu__toggle { position: absolute; opacity: 0; pointer-events: none; }
.cl-menu__button { display: none; }
.cl-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	align-items: center;
}
.cl-menu__list li { position: relative; }
.cl-menu__list a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
	padding: 0.35rem 0;
	display: block;
}
.cl-menu__list a:hover,
.cl-menu__list .current-menu-item > a,
.cl-menu__list .current-menu-ancestor > a {
	color: var(--wp--preset--color--terracotta-dark);
}
.cl-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 13rem;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(58, 51, 48, 0.08);
	display: none;
	z-index: 20;
}
.cl-menu__list .sub-menu a { padding: 0.45rem 1rem; font-weight: 600; }
.cl-menu__list li:hover > .sub-menu,
.cl-menu__list li:focus-within > .sub-menu { display: block; }

@media (max-width: 781px) {
	.cl-menu__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		cursor: pointer;
		border-radius: 10px;
	}
	.cl-menu__bars,
	.cl-menu__bars::before,
	.cl-menu__bars::after {
		display: block;
		width: 22px; height: 2px;
		background: var(--wp--preset--color--ink);
		border-radius: 2px;
		position: relative;
		content: "";
	}
	.cl-menu__bars::before { position: absolute; top: -7px; }
	.cl-menu__bars::after { position: absolute; top: 7px; }
	.cl-menu__toggle:focus-visible + .cl-menu__button { outline: 2px solid var(--wp--preset--color--terracotta); }
	.cl-menu__list {
		display: none;
		position: absolute;
		right: 0;
		top: 52px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-width: 15rem;
		padding: 0.75rem 1.25rem;
		background: var(--wp--preset--color--cream);
		border: 1px solid var(--wp--preset--color--sand);
		border-radius: 14px;
		box-shadow: 0 8px 24px rgba(58, 51, 48, 0.1);
		z-index: 30;
	}
	.cl-menu__toggle:checked ~ .cl-menu__list { display: flex; }
	.cl-menu__list .sub-menu {
		position: static;
		display: block;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		min-width: 0;
		background: transparent;
	}
	.cl-menu__list .sub-menu a { padding: 0.35rem 0; }
}