/*
Theme Name: B+J's Shaved Ice
Theme URI: https://www.bjsshavedice.com
Author: NewbillTech
Description: Custom block theme for B+J's Shaved Ice food trailer — hot pink script branding, sage and mint accents, watercolor cups and leaf sprigs from the trailer wrap. Visual system ported from the approved Lovable prototype.
Version: 3.2.0
Requires at least: 6.2
Tested up to: 6.7
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: bjs-shaved-ice
*/

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.wp-block-button__link:hover,
	.wp-block-button__link:focus,
	.bjs-social a:hover,
	.bjs-social a:focus {
		transform: none;
	}
}
[id] {
	scroll-margin-top: 5rem; /* scroll-mt-20 */
}

/* Script logo type (Yellowtail — stands in for LetterpressClean Script Bold) — overrides the global uppercase heading rule */
.bjs-script {
	font-family: 'Yellowtail', cursive !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.2;
	font-weight: 400 !important;
}

/* Handwritten accent lines (Caveat Brush — stands in for Awesome) — "made fresh, every single cup" */
.bjs-hand {
	font-family: 'Caveat Brush', cursive !important;
	text-transform: none !important;
	letter-spacing: 0.01em;
	font-size: 1.5rem; /* text-2xl */
	font-weight: 400;
}

/* Caps tagline — font-brand bold, tracking 0.15em, sage */
.bjs-tagline {
	font-family: 'Archivo', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 700;
}

/* Legacy hooks kept as no-ops so existing page markup stays valid.
   The Lovable system uses plain headings — no dash fans, rules, or flourish. */
.bjs-tagline-rules::before,
.bjs-tagline-rules::after {
	content: none;
}
.bjs-accent::before,
.bjs-accent::after {
	content: none;
}
.bjs-hand-flourish {
	border: 0;
}

/* Hero "handcrafted with love" is quiet ink, not sage (footer keeps sage) */
.bjs-hero .bjs-hand {
	color: rgba(31, 31, 31, 0.7);
}

/* Sticky header — translucent cream with blur, mint hairline */
.bjs-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid rgba(195, 210, 180, 0.6);
	background-color: rgba(252, 251, 248, 0.9) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* Header lockup — stacked script over small caps, like the prototype */
.bjs-lockup {
	line-height: 1;
}
.bjs-lockup p {
	margin: 0;
	line-height: 1.1;
}
.bjs-lockup-caps {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem; /* text-xs */
	color: #ea1d76;
}
.bjs-nav a {
	text-decoration: none;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem; /* text-sm */
	color: #1f1f1f;
	transition: color 0.15s ease;
}
.bjs-nav a:hover,
.bjs-nav a:focus {
	color: #ea1d76;
}

/* Hero — watercolor leaf sprigs on an asymmetric diagonal, bleeding off
   the edges: upper-left, mirrored lower-right (prototype geometry, sized up
   per owner preference — the asset is cropped so width = visible art). */
.bjs-hero {
	position: relative;
	overflow: hidden;
}
.bjs-hero::before,
.bjs-hero::after {
	content: "";
	position: absolute;
	/* leaf-sprig.png is cropped to its artwork: 498x341, aspect 1.46. */
	width: 420px;
	aspect-ratio: 498 / 341;
	background: url('assets/leaf-sprig.png') no-repeat center / contain;
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
}
.bjs-hero::before {
	left: -5.5rem;
	top: 2rem;
}
.bjs-hero::after {
	right: -5.5rem;
	bottom: 0;
	transform: scaleX(-1);
}
.bjs-hero > * {
	position: relative;
	z-index: 1;
}
@media (max-width: 781px) {
	.bjs-hero::before,
	.bjs-hero::after {
		width: 240px;
	}
	.bjs-hero::before {
		left: -4rem;
	}
	.bjs-hero::after {
		right: -4rem;
	}
}

/* Watercolor cups illustration — w-64 / sm:w-80 */
.bjs-cups {
	background: url('assets/cups.png') center / contain no-repeat;
	height: clamp(256px, 30vw, 320px);
}

/* Menu cards — 2px mint border, rounded-3xl, white/70, p-7 */
.bjs-card {
	border: 2px solid #c3d2b4;
	border-radius: 1.5rem;
	padding: 1.75rem;
	background: rgba(255, 255, 255, 0.7);
}
.bjs-card h3 {
	font-size: 1.25rem; /* text-xl */
	color: #1f1f1f;
	letter-spacing: 0.025em;
}
.bjs-price {
	font-size: 1.125rem; /* text-lg */
	line-height: 2;
}
.bjs-card-note {
	color: rgba(31, 31, 31, 0.7);
	font-size: 0.875rem; /* text-sm */
}

/* Flavor chips — soft pink pills, sentence case, text-sm medium */
ul.bjs-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem; /* gap-2.5 */
	padding-left: 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
ul.bjs-chips li {
	background: #fce8f1;
	color: #ea1d76;
	border-radius: 999px;
	padding: 0.5rem 1rem; /* px-4 py-2 */
	font-weight: 500;
	font-size: 0.875rem; /* text-sm */
	margin: 0;
}

/* Book-Us cards — rounded-3xl, soft shadow, pink line icon over caps label */
.bjs-book-card {
	background: #ffffff;
	border-radius: 1.5rem;
	padding: 2rem 1rem; /* px-4 py-8 */
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.bjs-book-card h3 {
	margin-top: 0.75rem;
	font-size: 1rem; /* text-base */
	letter-spacing: 0.025em;
	color: #1f1f1f;
}
.bjs-book-icon {
	display: flex;
	justify-content: center;
	color: #ea1d76;
}
.bjs-book-icon svg {
	width: 36px;
	height: 36px;
	display: block;
}
/* 2×2 on phones instead of a four-item stack */
@media (max-width: 781px) {
	#book .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 1rem !important;
	}
	#book .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
	}
}

/* Toppings — 2-col grid, small text, filled pink heart markers */
ul.bjs-hearts {
	list-style: none;
	padding-left: 0;
	max-width: 672px; /* max-w-2xl */
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 600px) {
	ul.bjs-hearts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}
}
ul.bjs-hearts li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem; /* text-sm */
}
ul.bjs-hearts li::before {
	content: '\2661\FE0E'; /* open heart, forced to text presentation not emoji */
	position: absolute;
	left: 0;
	top: 0;
	color: #ea1d76;
	font-size: 1em;
}

/* Buttons — pink pill CTA with glow; outline style inverts on hover */
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 10px 15px -3px rgba(234, 29, 118, 0.3);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: #c3135f;
	color: #ffffff;
	transform: scale(1.05);
}
.is-style-outline .wp-block-button__link {
	border: 2px solid #ea1d76;
	color: #ea1d76;
	background: #fcfbf8; /* bg-brand-cream */
	box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
	background-color: #ea1d76;
	color: #ffffff;
	transform: none;
}

/* Follow-Us strip + footer — brush blob beside pink circles (h-11 w-11) */
.bjs-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
}
.bjs-follow .bjs-social {
	margin: 0;
}
.bjs-brush {
	display: inline-block;
	background: #ea1d76;
	border-radius: 66% 34% 48% 52% / 42% 60% 40% 58%;
	transform: rotate(-3deg);
	padding: 0.5rem 1.6rem;
}
.bjs-brush .bjs-hand,
.bjs-brush p {
	color: #ffffff;
	font-size: 1.5rem;
	margin: 0;
	text-decoration: none;
}
.bjs-social {
	display: flex;
	justify-content: center;
	gap: 1rem; /* gap-4 */
	margin: 1.5rem 0 1rem;
}
.bjs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* h-11 w-11 */
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: #ea1d76;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.bjs-social a:hover,
.bjs-social a:focus {
	background: #c3135f;
	transform: scale(1.1);
}
.bjs-social svg {
	width: 20px;
	height: 20px;
	display: block;
}
.bjs-footer a {
	text-decoration: none;
}
/* Footer roles per prototype: pink handle, quiet URL */
.bjs-footer .bjs-url {
	color: rgba(31, 31, 31, 0.7);
}