/*
Theme Name: WooYeah
Theme URI: https://wpinterface.com/themes/wooyeah/
Author: WPInterface
Author URI: https://wpinterface.com
Description: WooYeah is an editorial WooCommerce block theme for fashion, lifestyle and modern online stores. Oversized typography, full-bleed campaign imagery and native WooCommerce blocks for shop, product, cart and checkout, with six colour schemes, three type sets and a library of ready-made page patterns. No page builder required.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wooyeah
Tags: e-commerce, blog, one-column, two-columns, wide-blocks, block-styles, block-patterns, full-site-editing, style-variations, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, rtl-language-support, template-editing
*/

/*
 * WooYeah keeps its design system in theme.json.
 * This file only holds what theme.json cannot express: pseudo elements,
 * font-stretch, motion preferences, focus rings and a few pattern utilities.
 * Per-block CSS lives in assets/css/blocks/ and is loaded only when the block is used.
 */

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.wp-block-button__link,
.wc-block-components-button {
	transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Form controls (low specificity so block and WooCommerce styles win). */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="range"]), textarea, select) {
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 0;
	padding: 0.7em 1em;
	max-width: 100%;
}

:where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Typography signatures
 * ------------------------------------------------------------------------ */

/* Italic words inside headings use the serif accent face: "<em>Freshly</em> ARRIVED". */
:is(h1, h2, h3, h4, h5, h6) :is(em, i) {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	text-transform: none;
	letter-spacing: 0;
}

/* Display headline: condensed, uppercase, tight. */
.is-style-wooyeah-display {
	font-stretch: 75%;
	text-transform: uppercase;
	line-height: 0.95;
	letter-spacing: -0.01em;
}

/* Small caps label: for eyebrows and meta. */
.is-style-wooyeah-label {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Block styles that need CSS
 * ------------------------------------------------------------------------ */

/* Button: arrow */
.is-style-wooyeah-arrow .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.6em;
	transition: transform var(--wp--custom--transition);
}

.is-style-wooyeah-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* List: hairline rows */
.is-style-wooyeah-hairline-list {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-wooyeah-hairline-list > li {
	padding-block: 0.75em;
	border-top: var(--wp--custom--hairline);
}

.is-style-wooyeah-hairline-list > li:last-child {
	border-bottom: var(--wp--custom--hairline);
}

/* List: checklist */
.is-style-wooyeah-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-wooyeah-checklist > li {
	position: relative;
	padding-inline-start: 1.6em;
}

.is-style-wooyeah-checklist > li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Details: plus / minus marker */
details.is-style-wooyeah-plus > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1em;
	list-style: none;
	cursor: pointer;
}

details.is-style-wooyeah-plus > summary::-webkit-details-marker {
	display: none;
}

details.is-style-wooyeah-plus > summary::after {
	content: "+";
	flex: none;
	font-size: 1.5em;
	font-weight: 300;
	line-height: 1;
	transition: transform var(--wp--custom--transition);
}

details[open].is-style-wooyeah-plus > summary::after {
	transform: rotate(45deg);
}

/* Separator: dotted */
.wp-block-separator.is-style-wooyeah-dotted {
	border-bottom-style: dotted;
	border-bottom-width: 2px;
}

/* Post terms: pills */
.wp-block-post-terms.is-style-wooyeah-pill a {
	display: inline-block;
	padding: 0.3em 0.8em;
	margin: 0 0.3em 0.3em 0;
	border: 1px solid currentcolor;
	border-radius: 999px;
	text-decoration: none;
}

.wp-block-post-terms.is-style-wooyeah-pill a:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-post-terms.is-style-wooyeah-pill .wp-block-post-terms__separator {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Pattern utilities (added via "Additional CSS class")
 * ------------------------------------------------------------------------ */

/* Image zoom on hover: add to an Image, Cover or Group block. */
.wooyeah-hover-zoom {
	overflow: hidden;
}

.wooyeah-hover-zoom img {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wooyeah-hover-zoom:hover img,
.wooyeah-hover-zoom:focus-within img {
	transform: scale(1.04);
}

/* Hairline border helpers. */
.wooyeah-hairline-top {
	border-top: var(--wp--custom--hairline);
}

.wooyeah-hairline-bottom {
	border-bottom: var(--wp--custom--hairline);
}

/* Comfortable line length for intro text inside wide sections. */
.wooyeah-measure {
	max-width: 60ch;
}

/* ---------------------------------------------------------------------------
 * Header and footer helpers
 * ------------------------------------------------------------------------ */

.wooyeah-header .wp-block-site-logo img {
	display: block;
}

/* Long menus wrap onto a second row instead of squeezing the site name. */
.wooyeah-header .wp-block-site-title {
	white-space: nowrap;
}

.wooyeah-header-default .wooyeah-header-nav {
	flex: 0 1 auto;
	min-width: 0;
}

/* Covers both a menu and the Page List fallback used before a menu exists. */
.wooyeah-header-default .wooyeah-header-nav :is(.wp-block-navigation__container, .wp-block-page-list) {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 0.5rem;
}

/* Items keep their width, so a long menu wraps by whole items instead of squeezing each label. */
.wooyeah-header-default .wooyeah-header-nav :is(.wp-block-navigation__container, .wp-block-page-list) > li {
	flex-shrink: 0;
	white-space: nowrap;
}

.wooyeah-header-actions {
	line-height: 1;
}

/*
 * Header icons stay 24px but get a 44px tap area. The area is a centred
 * pseudo-element, so the layout does not move.
 */
.wooyeah-header :is(.wp-block-search__button, .wp-block-woocommerce-customer-account a, .wc-block-mini-cart__button, .wp-block-navigation__responsive-container-open) {
	position: relative;
}

.wooyeah-header :is(.wp-block-search__button, .wp-block-woocommerce-customer-account a, .wc-block-mini-cart__button, .wp-block-navigation__responsive-container-open)::before {
	content: "";
	position: absolute;
	inset: min(0px, calc(50% - 1.375rem));
}

/* Core clips the collapsed search field, which would clip the tap area too. */
.wooyeah-header .wp-block-search.wp-block-search__searchfield-hidden,
.wooyeah-header .wp-block-search.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
	overflow: visible;
}

/*
 * The sticky wrapper is a stacking context, so the mobile menu overlay inside
 * it can only stack as high as the wrapper. Core gives it 10; Woo's price
 * slider handles use 20–21 and would show through the open overlay.
 */
.is-position-sticky:has(> .site-header) {
	z-index: 100;
}

/* Centred header: equal side columns keep the logo in the middle. */
.wooyeah-header-centered .wooyeah-header-row > .wp-block-group {
	flex: 1 1 0;
}

/* Mobile: move the menu button after the action icons. */
@media (max-width: 599px) {

	.wooyeah-header-default .wooyeah-header-nav {
		order: 3;
	}

	/* Logo takes the free space so the icons and menu button pack right. */
	.wooyeah-header-default .wooyeah-header-row > :first-child {
		margin-inline-end: auto;
	}

	.wooyeah-header-centered .wooyeah-header-row > .wp-block-group:first-child,
	.wooyeah-header-centered .wooyeah-header-row > .wp-block-group:last-child {
		flex: 0 0 auto;
	}

	/*
	 * The search icon opens a full-width field under the header instead of
	 * pushing the row wider.
	 */
	.wooyeah-header {
		position: relative;
	}

	.wooyeah-header .wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0.75rem max(var(--wp--custom--gutter), env(safe-area-inset-right)) 0.75rem max(var(--wp--custom--gutter), env(safe-area-inset-left));
		border-width: 0 0 1px;
		border-color: var(--wp--preset--color--base-3);
	}
}

/* Checkout header: keep logo and cart link on one line on phones. */
.wooyeah-header-checkout :is(.wp-block-site-title, .wc-block-cart-link) {
	white-space: nowrap;
}

@media (max-width: 599px) {

	.wooyeah-header-checkout .is-style-wooyeah-label {
		display: none;
	}
}

.wooyeah-footer-nav .wp-block-navigation-item__content {
	text-decoration: none;
}

.wooyeah-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
}

/* Footer social icons follow the text colour instead of brand colours. */
.wooyeah-footer .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentcolor;
}

/* ---------------------------------------------------------------------------
 * Blog
 * ------------------------------------------------------------------------ */


/* Dots between the items of the post meta row. */
.wooyeah-post-meta > * + *::before {
	content: "·";
	margin-inline-end: 0.75em;
	color: var(--wp--preset--color--contrast-3);
}

.wooyeah-on-dark .wooyeah-post-meta > * + *::before {
	color: inherit;
	opacity: 0.6;
}

.wooyeah-author-bio .wp-block-avatar img {
	display: block;
}

/* Reading time matches the other meta items (it has no theme.json styles of its own). */
.wooyeah-post-meta .wp-block-post-time-to-read {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wooyeah-sidebar a {
	text-decoration: none;
}

.wooyeah-sidebar a:hover {
	text-decoration: underline;
}

/* Text over cover images: meta and terms switch to the light colour. */
.wooyeah-on-dark :is(.wp-block-post-date, .wp-block-post-terms, .wp-block-post-author-name, .wp-block-post-time-to-read),
.wooyeah-on-dark :is(.wp-block-post-date, .wp-block-post-terms, .wp-block-post-author-name) a {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Shop
 * ------------------------------------------------------------------------ */

/* Buy box and filters stay in view next to long galleries and grids. */
@media (min-width: 782px) {

	.wooyeah-sticky-column,
	.wooyeah-shop-sidebar {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 7.5rem);
		align-self: flex-start;
	}
}

.wooyeah-shop-toolbar .wc-block-catalog-sorting select {
	padding: 0.4em 2em 0.4em 0;
	border: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wooyeah-product-meta :is(.wp-block-post-terms, .wc-block-components-product-sku) {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

.wooyeah-product-promises {
	margin-block: var(--wp--preset--spacing--30);
}

.wooyeah-product-promises > li {
	padding-inline-start: 1.6em;
	position: relative;
}

.wooyeah-product-promises > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 0.8em;
	height: 1px;
	background: currentcolor;
}