/*
Theme Name: Perry's
Theme URI: https://www.perrys.club
Author: QuestMetrics
Description: Custom block theme for Perry's (Peregrine Social Club), Keilor East. Hand-drawn menu aesthetic: cream paper, marker headings, highlighter strokes, navy accents.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perrys
*/

/* ---- Highlighter stroke behind headings ----
   Apply via the block editor: add the "highlight" class to any heading,
   or it is applied automatically to h2 headings inside post/page content. */

.entry-content h2,
h2.wp-block-heading,
.highlight {
	display: inline-block;
	position: relative;
	z-index: 0;
	padding: 0.05em 0.35em;
}

.entry-content h2::before,
h2.wp-block-heading::before,
.highlight::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.15em;
	right: -0.15em;
	top: 0.18em;
	bottom: 0.05em;
	background: var(--wp--preset--color--highlight-orange);
	transform: skew(-8deg) rotate(-1.2deg);
	border-radius: 0.2em 0.5em 0.25em 0.6em / 0.5em 0.25em 0.6em 0.2em;
	opacity: 0.9;
}

/* Alternate yellow highlight */
.highlight-yellow::before {
	background: var(--wp--preset--color--highlight-yellow) !important;
}

/* ---- Dot leaders (menu-style separators) ---- */
hr.wp-block-separator.is-style-perrys-dots {
	border: none;
	height: 5px;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	background-image: radial-gradient(circle, var(--wp--preset--color--marker-black) 2px, transparent 2.5px);
	background-size: 14px 5px;
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 1;
}

/* ---- Menu item rows: name left, price right ---- */
.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 0.15rem 0;
}
.menu-item .price {
	font-family: var(--wp--preset--font-family--marker);
	font-size: 1.15em;
	white-space: nowrap;
	color: var(--wp--preset--color--marker-black);
}
.menu-desc {
	margin-top: 0;
	font-size: 0.92em;
	color: #4a4640;
	max-width: 60ch;
}

/* ---- General ---- */
body {
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wp-block-button__link {
	border-radius: 0.4em 1em 0.5em 1.1em / 1em 0.5em 1.1em 0.4em; /* wobbly, hand-drawn */
	font-family: var(--wp--preset--font-family--marker);
	letter-spacing: 0.03em;
}

/* Speech-bubble style callout (like "Good Food Good Mood" on the menu) */
.bubble {
	position: relative;
	background: var(--wp--preset--color--paper-white);
	border: 3px solid var(--wp--preset--color--marker-black);
	border-radius: 1.5em 2em 1.5em 2em / 2em 1.5em 2em 1.5em;
	padding: 0.8rem 1.4rem;
	display: inline-block;
	font-family: var(--wp--preset--font-family--marker);
	font-size: 1.25em;
	color: var(--wp--preset--color--marker-black);
	transform: rotate(-2deg);
	box-shadow: 3px 4px 0 rgba(25, 23, 19, 0.25);
}
.bubble::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 22%;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--paper-white);
	border-right: 3px solid var(--wp--preset--color--marker-black);
	border-bottom: 3px solid var(--wp--preset--color--marker-black);
	transform: skewX(35deg) rotate(48deg);
}

/* Hero: pin the bubble to the bottom-right of the cover image */
.home-hero {
	position: relative;
}
.home-hero .bubble {
	position: absolute;
	right: 2rem;
	bottom: 2.2rem;
	z-index: 2;
	margin: 0;
}
@media (max-width: 781px) {
	.home-hero .bubble {
		position: static;
		display: inline-block;
		margin-top: 1rem;
	}
}

/* Hand-drawn underline accent for hero headline */
.scribble-underline {
	background-image: linear-gradient(
		var(--wp--preset--color--highlight-orange),
		var(--wp--preset--color--highlight-orange)
	);
	background-repeat: no-repeat;
	background-size: 100% 0.28em;
	background-position: 0 92%;
	padding: 0 0.1em;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: transform 0.15s ease;
	}
	.wp-block-button__link:hover {
		transform: rotate(-1deg) scale(1.03);
	}
}