/* Boy Castle — global front-end styles that theme.json can't express. */

/* Category/shop archive toolbar: results count + "Default sorting" dropdown. */
.boy-castle-archive-toolbar {
	align-items: center;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.boy-castle-archive-toolbar .wc-block-product-results-count,
.boy-castle-archive-toolbar .woocommerce-result-count {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted-foreground);
}

.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f5f3ee'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	padding: 0.65rem 2.25rem 0.65rem 1rem;
	cursor: pointer;
}

.woocommerce-ordering select.orderby:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.woocommerce-ordering select.orderby option {
	color: #000;
}

/* Smooth scroll for the in-page #shop / #music / #show anchor links, with
   enough top offset that the sticky header never covers the section heading. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}

/* Checkout/cart floating labels (email, address fields, etc): WooCommerce's
   hardcoded pixel offset for the floated label was tuned for a different font
   stack, so with our Barlow body font the floated label's bottom edge lands
   exactly on top of the input text with zero clearance. Push it up further. */
.wc-block-components-text-input.is-active label,
.wc-block-components-address-form .is-active label {
	transform: translateY(-30px) !important;
	font-size: 0.75rem !important;
}

/* Variation attribute table (Size/Colour on variable products): something in
   WooCommerce's own responsive-table CSS sets `table.variations` to
   display:block, which breaks the th/td table-cell layout so the second row's
   label renders detached from its own select. Force real table layout back. */
.boy-castle-add-to-cart table.variations {
	display: table !important;
}

.boy-castle-add-to-cart table.variations tbody {
	display: table-row-group !important;
}

.boy-castle-add-to-cart table.variations tr {
	display: table-row !important;
}

.boy-castle-add-to-cart table.variations th,
.boy-castle-add-to-cart table.variations td {
	display: table-cell !important;
}

/* Cart/Checkout page titles: unaligned blocks inside a "constrained" layout
   parent get auto-narrowed to contentSize and centered via margin:auto — fine
   for the narrow prose policy pages, but here the page content (the actual
   Cart/Checkout block) fills the full width, so the title should too instead
   of floating centered above a left-aligned block below it. */
.boy-castle-wide-page-title {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Single product page: framed gallery, branded add-to-cart, muted meta row. */
.boy-castle-product-gallery .wc-block-product-image-gallery,
.boy-castle-product-gallery .woocommerce-product-gallery {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--card);
}

.boy-castle-product-price .wc-block-components-product-price,
.boy-castle-product-price .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--primary);
}

.boy-castle-add-to-cart .quantity input,
.boy-castle-add-to-cart .wc-block-components-quantity-selector {
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground);
}

/* Variation attribute table (Size / Colour) on variable products. */
.boy-castle-add-to-cart table.variations {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: separate;
	border-spacing: 0 0.75rem;
}

.boy-castle-add-to-cart table.variations th.label {
	text-align: left;
	padding-right: 1rem;
	padding-top: 0.75rem;
	white-space: nowrap;
	vertical-align: top !important;
}

.boy-castle-add-to-cart table.variations th.label label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground);
}

.boy-castle-add-to-cart table.variations td.value {
	vertical-align: top !important;
	position: relative;
}

/* The "Clear" reset-variations link only appears in the last attribute row,
   making that row taller than the others and throwing off the label
   alignment between rows. Take it out of flow so every row stays the same
   height, and re-anchor it under the select instead. */
.boy-castle-add-to-cart .reset_variations {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: underline;
}

.boy-castle-add-to-cart table.variations select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: 260px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f5f3ee'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	padding: 0.75rem 2.25rem 0.75rem 1rem;
}

.boy-castle-add-to-cart table.variations select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.boy-castle-add-to-cart table.variations select option {
	color: #000;
}


.boy-castle-add-to-cart .woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
}

.boy-castle-add-to-cart .woocommerce-variation-description p {
	color: var(--wp--preset--color--muted-foreground);
	font-size: 0.9rem;
}

.boy-castle-add-to-cart .single_add_to_cart_button,
.boy-castle-add-to-cart button[type="submit"] {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-foreground) !important;
	border: 0 !important;
	border-radius: 2px !important;
	padding: 1rem 1.5rem !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
}

.boy-castle-product-meta {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.8rem;
}

.boy-castle-product-meta,
.boy-castle-product-meta a {
	color: var(--wp--preset--color--muted-foreground);
}

.wc-block-breadcrumbs a {
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
}

.wc-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
}

/* Footer bio: cap the width and let the browser balance line lengths so it
   wraps onto two even lines instead of a long line + short leftover. */
.boy-castle-footer-bio {
	max-width: 26rem;
	text-wrap: balance;
}

/* Outline buttons (is-style-outline) come with their own smaller default
   padding from core block-library CSS, so next to a solid button they render
   noticeably shorter. Match the solid button's padding, minus 1px on top/
   bottom to compensate for the 2px border so total heights line up exactly. */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 14px 24px;
}

/*
 * Sticky header. Applied to the template-part's own outer wrapper (a direct
 * child of .wp-site-blocks, which spans the full page) rather than to a group
 * nested inside it — a sticky element can only stick within the height of its
 * immediate parent, and a wrapper sized to fit only the header itself gives it
 * no room to remain pinned once you scroll past that ~100px. The announcement
 * bar lives outside this wrapper entirely, so it scrolls away normally.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

/* Shrink the header slightly once scrolled (assets/js/header-scroll.js toggles
   .is-scrolled). Transition lives on the elements themselves so it animates
   smoothly in both directions. */
.boy-castle-header-row {
	transition: padding 0.2s ease;
}

.boy-castle-header-row .has-display-font-family {
	transition: font-size 0.2s ease;
}

header.wp-block-template-part.is-scrolled .boy-castle-header-row {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

header.wp-block-template-part.is-scrolled .has-display-font-family {
	font-size: 1.75rem !important;
}

.wc-block-mini-cart__button {
	transition: padding 0.2s ease;
}

header.wp-block-template-part.is-scrolled .wc-block-mini-cart__button {
	padding: 2px !important;
}

/* Hero: contains the ambient glow blobs so they don't bleed into other sections.
   Also cancels the 24px auto margin-block-start WordPress's default flow
   layout adds to every block after the first — without this, Hero (as the
   second block after the header) got 24px of extra space above it with no
   matching space below, making the top/bottom padding look uneven even
   though the section's own padding values are identical. */
.boy-castle-hero {
	position: relative;
	overflow: hidden;
	margin-top: 0 !important;
}

/* Same issue one level deeper: the glow <span>s are DOM siblings that sit
   before the content wrapper, so the wrapper isn't :first-child either and
   still picks up the 24px margin despite the fix above. */
.boy-castle-hero > .wp-block-group.alignwide {
	margin-top: 0 !important;
}

/* 404 page reuses the same hero glow treatment and has the same
   not-:first-child margin issue (see .boy-castle-hero above). */
.boy-castle-404 {
	position: relative;
	overflow: hidden;
	margin-top: 0 !important;
}

.boy-castle-404 > .wp-block-group {
	margin-top: 0 !important;
}

.boy-castle-hero-glow {
	position: absolute;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	filter: blur(110px);
	opacity: 0.3;
	pointer-events: none;
}

.boy-castle-hero-glow--left {
	left: -8rem;
	top: 15%;
}

.boy-castle-hero-glow--right {
	right: -8rem;
	bottom: -4rem;
	opacity: 0.22;
}

.boy-castle-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.boy-castle-pulse-dot {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	animation: boy-castle-pulse 1.8s ease-in-out infinite;
}

@keyframes boy-castle-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.3); }
}

/* Facebook event embed (Upcoming Show section) — spacing below the buttons row. */
.boy-castle-fb-event {
	margin-top: 2rem;
	max-width: 500px;
}

/* Hero video: portrait footage, so cap its width in the desktop 2-col layout
   rather than letting a 720x1280 clip run the full column height. */
.boy-castle-hero-video {
	position: relative;
	max-width: 380px;
	margin: 0 auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 90px -10px color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}

.boy-castle-hero-video__ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
	pointer-events: none;
}

.boy-castle-hero-video video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

/* Show poster: slight rotation + shadow, matching the reference's tacked-up-flyer feel. */
.boy-castle-show-poster {
	max-width: 420px;
	margin: 0 auto;
}

.boy-castle-show-poster img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
	transform: rotate(-2deg);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
}

/* WooCommerce Mini-Cart drawer + badge, restyled to match the theme palette. */
.wc-block-mini-cart__button {
	color: var(--wp--preset--color--foreground);
}

.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* Header nav: no underline on links, matches the reference's plain uppercase style. */
.wp-block-navigation a {
	text-decoration: none;
}

/* Footer link columns: plain stacked links, no bullets/underline, tighter line height. */
footer .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .wp-block-list li {
	margin: 0;
}

footer .wp-block-list a {
	text-decoration: none;
	line-height: 2;
}

footer .wp-block-list a:hover {
	color: var(--wp--preset--color--foreground);
}

/* Footer social icons: outline style in muted color instead of WP's default brand colors. */
footer .wp-block-social-links .wp-social-link {
	background: none !important;
}

footer .wp-block-social-links .wp-social-link a {
	color: var(--wp--preset--color--muted-foreground);
}

footer .wp-block-social-links .wp-social-link:hover a {
	color: var(--wp--preset--color--primary);
}

/*
 * The Navigation block's mobile overlay is a `position: fixed` dialog, but a
 * `position: sticky` ancestor (our header) creates a new containing block for
 * fixed descendants, so the overlay renders inline instead of full-screen.
 * Force it back out to the viewport.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999;
}

/* Mobile nav drawer: large left-aligned Bebas Neue items with a divider between each,
   matching the reference's full-screen menu treatment. Scoped to .is-menu-open only —
   .wp-block-navigation__responsive-container-content is also used for the plain
   desktop flat list, so an unscoped rule here restyles that too. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 1.5rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--border);
	justify-content: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: left !important;
	padding: 1.25rem 0.5rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	letter-spacing: 0.03em;
}

/* Product price: WooCommerce's price block ignores fontFamily/fontSize block
   attributes in practice, so style it directly to match the display type scale. */
.boy-castle-product-price .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--primary);
}

/* Releases: CSS-only tabs (radio/label pattern, no JS) switching between Spotify embeds. */
.boy-castle-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.boy-castle-tabs__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.boy-castle-tabs__label {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--muted-foreground);
}

.boy-castle-tabs__radio:checked + .boy-castle-tabs__label {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
}

.boy-castle-tabs__panel {
	display: none;
	margin-top: 2rem;
}

/* The radios live inside .boy-castle-tabs__list, not as direct siblings of the
   panels, so :has() on the shared ancestor is needed to bridge the two branches. */
.boy-castle-tabs:has(#release-tab-full-of-it:checked) #release-panel-full-of-it,
.boy-castle-tabs:has(#release-tab-gentlemen:checked) #release-panel-gentlemen,
.boy-castle-tabs:has(#release-tab-ace-of-spades:checked) #release-panel-ace-of-spades {
	display: block;
}

/* Category filter: buttons that show/hide already-rendered product cards via
   assets/js/shop-filter.js (client-side — no page navigation, no server round
   trip). WooCommerce's own Product Filters block never fired its Store API
   request to populate options in testing, so this avoids depending on it. */
.boy-castle-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.boy-castle-filter-pill {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	padding: 0.5rem 1rem;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
	cursor: pointer;
}

.boy-castle-filter-pill:hover {
	border-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--foreground);
}

.boy-castle-filter-pill.is-active {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* Product cards: image with a hover "Quick Add" overlay that slides up from
   the bottom, category label + title on the left and price on the right
   below it — matching the reference ProductCard layout. */
.boy-castle-product-media {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--card);
}

.boy-castle-quick-add.wp-block-woocommerce-product-button {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	transform: translateY(100%);
	transition: transform 0.25s ease;
	margin: 0 !important;
}

.boy-castle-product-media:hover .boy-castle-quick-add.wp-block-woocommerce-product-button {
	transform: translateY(0);
}

.boy-castle-quick-add .wc-block-components-product-button__button {
	display: flex !important;
	width: 100% !important;
	justify-content: center;
	background: var(--wp--preset--color--foreground) !important;
	color: var(--wp--preset--color--background) !important;
	border-radius: 0 !important;
	text-align: center;
}

.wc-block-product-template .wp-block-post-terms {
	display: block;
}

.wc-block-product-template .wp-block-post-terms a {
	text-decoration: none;
}