/*
Theme Name: BeansParade
Theme URI: https://beansparade.com
Author: Telex
Description: A warm, editorial WordPress theme for BeansParade — a small-batch specialty coffee roaster. Draws from HiRes-era maximalism with ochre grounds, espresso darks, parchment cream surfaces, and acid-green accents. Built for WooCommerce product pages and tasting-event bookings.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beansparade
Tags: e-commerce, woocommerce, full-site-editing, block-styles, custom-colors, custom-fonts, editor-style, one-column, wide-blocks
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
*/

/* ==========================================================================
   FOUNDATIONS
   ========================================================================== */

:root,
body,
.wp-site-blocks {
	overflow: visible;
}

/* Ensure hero sections sit flush against the header */
.wp-site-blocks > *:first-child {
	margin-top: 0;
}

/* ==========================================================================
   STICKY HEADER
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Pseudo-element backdrop — avoids creating a containing block that would
   break the mobile nav overlay's position: fixed; inset: 0 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	transition: background 0.4s ease, box-shadow 0.4s ease;
}

body.is-scrolled .wp-site-blocks > header.wp-block-template-part::before {
	background: var(--wp--preset--color--espresso);
	box-shadow: 0 1px 0 rgba(43, 26, 15, 0.25);
}

/* When scrolled, invert header text to parchment so it reads on espresso */
body.is-scrolled .site-header {
	color: var(--wp--preset--color--parchment);
}

body.is-scrolled .site-header a,
body.is-scrolled .site-header .wp-block-site-title a,
body.is-scrolled .site-header .wp-block-navigation a {
	color: var(--wp--preset--color--parchment);
}

body.is-scrolled .site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--acid-green);
}

/* Header inner transitions */
.site-header {
	transition: padding 0.3s ease, color 0.3s ease;
}

body.is-scrolled .site-header {
	padding-block: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   TYPOGRAPHY POLISH
   ========================================================================== */

/* Body prose — generous reading measure */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Drop caps for editorial flavor */
.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--display-serif);
	font-weight: 900;
	color: var(--wp--preset--color--ochre);
	font-size: 3.5em;
	line-height: 0.85;
	float: left;
	margin-right: 0.08em;
	margin-top: 0.05em;
}

/* Heading underline accent — optional class for editorial sections */
.has-accent-underline::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--wp--preset--color--acid-green);
	margin-top: 0.5em;
}

/* Small caps utility for labels */
.is-style-small-caps {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-variant: small-caps;
	letter-spacing: 0.1em;
	font-weight: 700;
}

/* Tabular figures for prices and stats */
.wc-block-components-product-price,
.price,
.amount {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   LINK STYLES
   ========================================================================== */

/* Editorial inline links — underline on hover, ochre accent */
.entry-content a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--dark-ochre);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.entry-content a:not(.wp-block-button__link):hover,
.wp-block-post-content a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--espresso);
	text-decoration-color: var(--wp--preset--color--acid-green);
}

/* ==========================================================================
   BUTTON VARIANTS
   ========================================================================== */

/* Primary button polish */
.wp-block-button__link,
.wp-element-button {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 2px solid transparent;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--espresso);
	border: 2px solid var(--wp--preset--color--espresso);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--parchment);
	border-color: var(--wp--preset--color--espresso);
}

/* Acid-green outline variant */
.wp-block-button.is-style-outline.has-acid-green-color .wp-block-button__link {
	color: var(--wp--preset--color--acid-green);
	border-color: var(--wp--preset--color--acid-green);
}

.wp-block-button.is-style-outline.has-acid-green-color .wp-block-button__link:hover {
	background: var(--wp--preset--color--acid-green);
	color: var(--wp--preset--color--espresso);
}

/* ==========================================================================
   IMAGE TREATMENTS
   ========================================================================== */

/* High-contrast editorial image style — matches hero reference */
.wp-block-image img {
	border-radius: 0;
}

.wp-block-image.is-style-editorial img {
	filter: contrast(1.15) saturate(1.1);
	mix-blend-mode: multiply;
}

/* Cover block images inherit the editorial warmth */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover video.wp-block-cover__video-background {
	filter: contrast(1.1) brightness(0.95) saturate(1.15);
}

/* Gallery — tight grid with no border radius */
.wp-block-gallery .wp-block-image img {
	border-radius: 0;
}

/* Media-text block images */
.wp-block-media-text .wp-block-media-text__media img {
	border-radius: 0;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   NAVIGATION POLISH
   ========================================================================== */

/* Nav index labels (replicating the hero reference nav style) */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ochre);
}

/* ==========================================================================
   MOBILE HAMBURGER OVERLAY
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--espresso);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--parchment);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--acid-green);
}

/* Close button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--parchment);
}

/* ==========================================================================
   SEPARATOR DETAILS
   ========================================================================== */

.wp-block-separator {
	opacity: 1;
}

.wp-block-separator.is-style-dots::before {
	color: var(--wp--preset--color--ochre);
}

/* Decorative wide separator */
.wp-block-separator.is-style-wide {
	border-color: var(--wp--preset--color--ochre);
}

/* ==========================================================================
   QUOTE & PULLQUOTE POLISH
   ========================================================================== */

.wp-block-quote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted-text);
	display: block;
	margin-top: 0.75em;
}

/* ==========================================================================
   TABLE POLISH
   ========================================================================== */

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.wp-block-table th {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--parchment);
	font-family: var(--wp--preset--font-family--heading-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--surface);
}

/* ==========================================================================
   CARD / SURFACE UTILITY
   ========================================================================== */

/* HiRes-era box shadow — hard offset, no blur */
.is-style-hard-shadow {
	box-shadow: 8px 8px 0px var(--wp--preset--color--espresso);
}

/* Data block style from the hero reference */
.is-style-data-block {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--parchment);
	box-shadow: 10px 10px 0px var(--wp--preset--color--parchment);
}

/* ==========================================================================
   WOOCOMMERCE PRODUCT STYLING
   ========================================================================== */

/* Product title in shop grid */
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display-serif);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--espresso);
}

/* Product price */
.wc-block-grid__product-price,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-weight: 700;
	color: var(--wp--preset--color--ochre);
	font-size: var(--wp--preset--font-size--large);
}

/* Add to cart button */
.wc-block-grid__product .wp-block-button__link,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wp--preset--color--acid-green);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--heading-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: 2px solid var(--wp--preset--color--acid-green);
	border-radius: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.wc-block-grid__product .wp-block-button__link:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--acid-green);
	border-color: var(--wp--preset--color--espresso);
}

/* Product image — sharp, no radius, editorial filter */
.wc-block-grid__product-image img,
.woocommerce-product-gallery img {
	border-radius: 0;
	filter: contrast(1.05) saturate(1.05);
}

/* Sale badge */
.wc-block-grid__product .wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--acid-green);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--heading-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 0;
}

/* Product meta — tasting notes, origin labels */
.woocommerce-product-attributes th {
	font-family: var(--wp--preset--font-family--heading-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-text);
	background: var(--wp--preset--color--surface);
}

.woocommerce-product-attributes td {
	font-family: var(--wp--preset--font-family--body-serif);
	color: var(--wp--preset--color--espresso);
}

/* Star rating — ochre */
.woocommerce .star-rating span::before,
.wc-block-components-review-list-item__rating > .wc-block-components-review-list-item__rating__stars span::before {
	color: var(--wp--preset--color--ochre);
}

/* Cart & checkout surfaces */
.wc-block-cart__main,
.wc-block-checkout__main {
	font-family: var(--wp--preset--font-family--body-serif);
}

.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--40);
}

/* Mini-cart button */
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--espresso);
}

body.is-scrolled .wc-block-mini-cart__button {
	color: var(--wp--preset--color--parchment);
}

/* Quantity input */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector input {
	border: 1px solid var(--wp--preset--color--muted-text);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--heading-sans);
}

/* Tabs on single product */
.woocommerce-tabs .tabs li a {
	font-family: var(--wp--preset--font-family--heading-sans);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.woocommerce-tabs .tabs li.active a {
	color: var(--wp--preset--color--espresso);
	border-bottom-color: var(--wp--preset--color--acid-green);
}

/* ==========================================================================
   TASTING NOTES CALLOUT
   ========================================================================== */

/* Bordered callout for tasting notes on product pages */
.is-style-tasting-notes {
	border: 2px solid var(--wp--preset--color--ochre);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface);
	position: relative;
}

.is-style-tasting-notes::before {
	content: "TASTING NOTES";
	display: block;
	font-family: var(--wp--preset--font-family--heading-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--ochre);
	margin-bottom: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px dotted var(--wp--preset--color--ochre);
}

/* ==========================================================================
   DOTTED ROW — data display pattern from the hero reference
   ========================================================================== */

.is-style-data-row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px dotted currentColor;
	padding-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading-sans);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   COVER BLOCK OVERLAY WARMTH
   ========================================================================== */

/* Warm ochre-tinted overlay for cover blocks */
.wp-block-cover.has-background-dim::before {
	opacity: 0.6;
}

/* ==========================================================================
   SELECTION COLOR
   ========================================================================== */

::selection {
	background: var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--parchment);
}

::-moz-selection {
	background: var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--parchment);
}

/* ==========================================================================
   GRID BACKGROUND PATTERN UTILITY
   ========================================================================== */

/* Subtle grid overlay — HiRes editorial reference */
.is-style-grid-bg {
	position: relative;
}

.is-style-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(43, 26, 15, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(43, 26, 15, 0.06) 1px, transparent 1px);
	background-size: 30px 30px;
	pointer-events: none;
	z-index: 0;
}

.is-style-grid-bg > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   FLOATING BADGE (decorative circular element from hero reference)
   ========================================================================== */

.is-style-floating-badge {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 1px dashed var(--wp--preset--color--espresso);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes slow-spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.is-style-floating-badge {
		animation: slow-spin 20s linear infinite;
	}
}

/* ==========================================================================
   STAIRCASE TITLE — large editorial headline from the hero reference
   ========================================================================== */

.is-style-staircase-title {
	display: flex;
	flex-direction: column;
	line-height: 0.85;
	letter-spacing: -0.03em;
}

/* ==========================================================================
   FORMS — booking & event RSVP
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
textarea,
select {
	border: 1px solid var(--wp--preset--color--muted-text);
	border-radius: 0;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--body-serif);
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--ochre);
	outline: 2px solid var(--wp--preset--color--ochre);
	outline-offset: 1px;
}

label {
	font-family: var(--wp--preset--font-family--heading-sans);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: var(--wp--preset--color--muted-text);
}

/* ==========================================================================
   SCROLL PROGRESS BAR (CSS-only, used by scrollytelling)
   — Already handled by scrollytelling.css. We only add the color token.
   ========================================================================== */

.scroll-progress {
	background: var(--wp--preset--color--acid-green);
}

/* ==========================================================================
   FOOTER POLISH
   ========================================================================== */

footer.wp-block-template-part a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* ==========================================================================
   ACCESSIBILITY — focus indicators
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--acid-green);
	outline-offset: 2px;
}

.wp-block-button__link:focus-visible {
	outline-offset: 3px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 781px) {
	/* Tighten the staircase title on mobile */
	.is-style-staircase-title {
		letter-spacing: -0.02em;
	}

	/* Stack data blocks flush */
	.is-style-data-block {
		box-shadow: 6px 6px 0px var(--wp--preset--color--espresso);
	}

	/* WooCommerce grid — single column on mobile */
	.wc-block-grid.has-3-columns .wc-block-grid__products,
	.wc-block-grid.has-4-columns .wc-block-grid__products {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.is-style-hard-shadow {
		box-shadow: 4px 4px 0px var(--wp--preset--color--espresso);
	}

	/* Shrink floating badge on small screens */
	.is-style-floating-badge {
		width: 80px;
		height: 80px;
		font-size: 0.6rem;
	}
}

/* ---------- Loop layout utilities ---------- */
/* These classes are wired to the wp:query blocks emitted by content/pages and
   templates. Do not rename. Tune colours and spacing to theme.json tokens. */

/* Horizontal scrollable rail */
.wp-block-query.is-style-loop-rail .wp-block-post-template {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: var(--wp--preset--spacing--20);
}
.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Compact list with hairline row dividers */
.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--muted-text);
	padding-block: var(--wp--preset--spacing--30);
}
.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag — flip the columns inside every even entry */
.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
	flex-direction: row-reverse;
}

/* Timeline — vertical line with node markers per entry */
.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--espresso);
	opacity: 0.15;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}
.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: '';
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--ochre);
	border-radius: 50%;
	background: var(--wp--preset--color--parchment);
}

/* Magazine — first child spans 2 columns of the grid */
.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}
@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}