/*
Theme Name: Taste OVS 2025
Theme URI: https://tasteovs.com/
Author: Taste Oil Vinegar Spice
Author URI: https://tasteovs.com/
Description: Block theme for Taste Oil Vinegar Spice, built as a child of Twenty Twenty-Five. The full design system lives in theme.json; page layouts are Gutenberg block markup in templates, template parts, patterns, and post content.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: taste-ovs-2025
Tags: block-patterns, full-site-editing, e-commerce, custom-colors, wide-blocks
*/

/* --------------------------------------------------------------------------
 * This file intentionally holds ONLY the handful of mechanics that block
 * markup and theme.json cannot express. Everything else — color, type,
 * spacing, layout — is in theme.json and the block markup itself.
 * ----------------------------------------------------------------------- */

/* 1. Transparent header overlaid on the hero.
 * Blocks can't express "sticky element that starts transparent over the hero
 * and gains a background once scrolled", so the overlay offset lives here.
 * The header part itself is still pure block markup. */
.wp-site-blocks > header.wp-block-template-part {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	background: transparent;
}

.wp-site-blocks {
	position: relative;
}

/* 1a. WooCommerce notices ("… has been added to your cart") render at the top
 * of <main>, which the overlaid header sits directly on top of — hiding the
 * message and making VIEW CART unclickable.
 *
 * When a notice is on the page, drop the header back into normal flow so the
 * notice can sit below it, and give it a solid background so the white nav
 * stays readable now that it is no longer over a photo. The overlay look
 * returns as soon as the notice clears. */
/* Two markups to cover: wc-block-components-notice-banner (block themes, what
 * the shop pages emit) and the classic woocommerce-message/error/info that the
 * cart and checkout shortcodes still use. */
.wp-site-blocks:has(.wc-block-components-notice-banner)
	> header.wp-block-template-part,
.wp-site-blocks:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)
	> header.wp-block-template-part {
	position: relative;
	background: var(--wp--preset--color--olive);
}

/* Keep the notice above anything else that may overlap it. */
.woocommerce-notices-wrapper,
.wc-block-store-notices {
	position: relative;
	z-index: 200;
}

/* 1a-ii. WooCommerce ships its own cart and checkout templates, and they open
 * straight into content with no hero for the overlaid header to sit on — so it
 * covered the "Cart" heading and the top of the table. Reserve the header's
 * height there. Every other template (my-account, the shop archives, pages,
 * posts, the front page) opens with a hero and needs no reservation. */
body.woocommerce-cart > .wp-site-blocks > main,
body.woocommerce-checkout > .wp-site-blocks > main {
	padding-top: 180px;
}

@media (max-width: 781px) {
	body.woocommerce-cart > .wp-site-blocks > main,
	body.woocommerce-checkout > .wp-site-blocks > main {
		padding-top: 140px;
	}
}

/* A notice drops the header back into normal flow, so that reserved space
 * would double up. */
body.woocommerce-cart:has(.wc-block-components-notice-banner) > .wp-site-blocks > main,
body.woocommerce-cart:has(.woocommerce-message, .woocommerce-error, .woocommerce-info) > .wp-site-blocks > main,
body.woocommerce-checkout:has(.wc-block-components-notice-banner) > .wp-site-blocks > main,
body.woocommerce-checkout:has(.woocommerce-message, .woocommerce-error, .woocommerce-info) > .wp-site-blocks > main {
	padding-top: 0;
}

.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	font-family: var(--wp--preset--font-family--akagi);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Without :has() support the header would still cover the notice, so give the
 * notice a solid background and lift it above the header as a fallback. */
@supports not selector(:has(*)) {
	.woocommerce-notices-wrapper,
	.wc-block-store-notices {
		z-index: 200;
		background: var(--wp--preset--color--base);
	}
}

/* 1b. The ghosted page title in interior page heroes: a large translucent
 * word with the letter-spaced eyebrow reading on top of it. Opacity is not a
 * block attribute, so it is applied with this class. */
.tovs-ghost {
	opacity: 0.3;
}

/* 2. Underline rule beneath the utility (top) nav row. */
.tovs-nav-top {
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/* 3. Section titles sit on a rule, inline-block so the rule hugs the text.
 * Cannot be expressed as a block attribute. */
.tovs-title-rule {
	display: inline-block;
	border-bottom: 3px solid var(--wp--preset--color--gray-rule);
	padding-bottom: 5px;
}

/* 4. The letter-spaced eyebrow ("subheader") — a text treatment used
 * throughout. Applied via the block's own additional-CSS-class field. */
.tovs-eyebrow {
	font-family: var(--wp--preset--font-family--akagi);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1;
	letter-spacing: 10px;
	text-transform: uppercase;
	margin: 0;
}

/* 4b. Rule widths. The core separator has only "narrow (100px)" and "wide
 * (100%)"; the design uses 250/300/600px rules with specific alignment. */
.tovs-rule.is-style-wide {
	max-width: 300px;
}

.tovs-rule--right.is-style-wide {
	margin-left: auto;
	margin-right: 0;
}

.tovs-rule--center.is-style-wide {
	margin-inline: auto;
}

.tovs-rule--wide.is-style-wide {
	max-width: 600px;
}

.tovs-rule--card.is-style-wide {
	max-width: 250px;
	border-bottom-width: 3px;
}

/* 4c. Header search: the design shows only a magnifier and letter-spaced
 * placeholder over the hero photo — no input chrome. Core's search input
 * ships its own background/border, so it is reset here. */
.tovs-nav-top .wp-block-search__input {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 30px;
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	letter-spacing: 1px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cpath d='M505 442.7L405.3 343c28.4-34.9 45.4-79.3 45.4-127.7C450.7 96.5 354.2 0 235.4 0S20 96.5 20 215.3s96.5 215.3 215.4 215.3c48.4 0 92.8-17 127.7-45.4l99.7 99.7c4.7 4.7 12.3 4.7 17 0l25.2-25.2c4.7-4.7 4.7-12.3 0-17zM235.4 379.7c-90.6 0-164.4-73.7-164.4-164.4S144.8 50.9 235.4 50.9s164.4 73.7 164.4 164.4-73.8 164.4-164.4 164.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 14px 14px;
}

.tovs-nav-top .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--base);
	opacity: 1;
}

.tovs-nav-top .wp-block-search__input:focus {
	outline: 0;
}

/* 4d. Mobile header. The legacy design collapsed everything behind a single
 * toggle; here both navigation blocks use their own overlay, the search field
 * is dropped (it is reachable from the search page), and the two rows sit on
 * one line beside the logo so the header stays ~110px like the original. */
@media (max-width: 781px) {
	.tovs-nav-top {
		border-bottom: 0;
		padding-bottom: 0 !important;
		/* Desktop aligns this row to the baseline; on mobile it is just a
		 * toggle sitting next to the other one, so centre it. */
		align-items: center !important;
	}

	.tovs-nav-top .wp-block-search {
		display: none;
	}

	.wp-site-blocks > header.wp-block-template-part .wp-block-columns {
		flex-wrap: nowrap !important;
	}

	.wp-site-blocks > header.wp-block-template-part .wp-block-column:first-child {
		flex-basis: auto !important;
	}

	/* The column is a flow (display:block) container by default, so it needs
	 * display:flex before flex-direction has any effect. */
	.wp-site-blocks > header.wp-block-template-part .wp-block-column:last-child {
		display: flex;
		flex-basis: auto !important;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: var(--wp--preset--spacing--20);
	}

	.wp-site-blocks > header.wp-block-template-part .wp-block-site-logo img {
		max-height: 65px;
		width: auto;
	}
}

/* 4e. The page hero stacks a letter-spaced eyebrow on top of the ghosted
 * title using a negative margin. The title is fluid, so the overlap has to
 * track it per breakpoint rather than sit at one fixed value. */
@media (max-width: 1023px) {
	.tovs-page-hero .tovs-eyebrow {
		margin-top: -42px !important;
	}
}

@media (max-width: 781px) {
	.tovs-page-hero .tovs-eyebrow {
		margin-top: -30px !important;
	}

	/* Drop the decorative flanking images on small screens, as the legacy
	 * theme did (#page-wrapper .top-image { display: none }) — otherwise they
	 * stack above the copy and push it off-screen. */
	.tovs-flank > .wp-block-column:first-child,
	.tovs-flank > .wp-block-column:last-child {
		display: none;
	}
}

/* 5. Decorative accent images that straddle a section boundary. */
.tovs-accent {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.tovs-accent img {
	display: block;
	margin-inline: auto;
}

/* 6. Staggered (masonry-ish) offsets for the recipe / product card grids.
 * The legacy theme achieved this with nth-child margins; there is no block
 * equivalent, so it is reproduced here and opted into with a class. */
@media (min-width: 782px) {
	.tovs-stagger > .wp-block-post-template > li:nth-child(even),
	.tovs-stagger > .wp-block-columns > .wp-block-column:nth-child(even) {
		margin-top: 150px;
	}
}

/* 7. Category-tile captions are absolutely positioned inside a 50% tile.
 * Cover blocks centre their content; the legacy design pins the caption
 * left or right at a fixed inset. */
.tovs-tile-caption--left {
	text-align: right;
	margin-inline: 0 100px;
}

.tovs-tile-caption--right {
	text-align: left;
	margin-inline: 100px 0;
}

@media (max-width: 781px) {
	.tovs-tile-caption--left,
	.tovs-tile-caption--right {
		text-align: center;
		margin-inline: 10px;
	}
}

/* 8. Product cards.
 * Covers both markups: the block grid (wc-block-grid__*, used by the
 * "Products by Category" block on the landing pages) and the classic loop
 * (ul.products li.product, used by the shop/category archives). */
.wc-block-grid__product,
.woocommerce ul.products li.product {
	text-align: center;
	padding-inline: var(--wp--preset--spacing--30);
}

.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--bodoni);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	padding-inline: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--30) 10px;
}

.wc-block-grid__product-link,
.wc-block-grid__product-link:hover {
	text-decoration: none;
}

.wc-block-grid__product-image img,
.woocommerce ul.products li.product img {
	border-bottom: 15px solid var(--wp--preset--color--gray-light);
	display: block;
	width: 100%;
	height: auto;
}

.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--akagi);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	display: block;
}

.wc-block-grid__product-price del {
	opacity: 0.5;
	margin-right: 6px;
}

.wc-block-grid__product-onsale {
	font-family: var(--wp--preset--font-family--akagi);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 0;
	padding: 4px 12px;
}

.wc-block-grid__product-add-to-cart {
	margin-top: var(--wp--preset--spacing--30);
}

/* Per-category title colours, matching the legacy palette. */
.product_cat-olive-oils .wc-block-grid__product-title,
.product_cat-olive-oils .woocommerce-loop-product__title,
.page-id-4 .wc-block-grid__product-title {
	color: var(--wp--preset--color--olive);
}

.product_cat-vinegars .wc-block-grid__product-title,
.product_cat-vinegars .woocommerce-loop-product__title,
.page-id-6 .wc-block-grid__product-title {
	color: var(--wp--preset--color--vinegar);
}

.product_cat-spices .wc-block-grid__product-title,
.product_cat-spices .woocommerce-loop-product__title,
.page-id-8 .wc-block-grid__product-title {
	color: var(--wp--preset--color--spice);
}

.product_cat-pasta-sauce .wc-block-grid__product-title,
.page-id-10 .wc-block-grid__product-title {
	color: var(--wp--preset--color--pasta);
}

/* 8b. Single-product gallery. The classic gallery ships fixed-width markup
 * from flexslider, which overflows a block column. */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery,
.woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100%;
	float: none;
}

.woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}

.woocommerce-product-gallery__image {
	border-bottom: 15px solid var(--wp--preset--color--gray-light);
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc(25% - 8px);
}

/* On-sale badge: a flat label, not Woo's default filled circle. */
.woocommerce span.onsale,
.wp-block-woocommerce-product-image-gallery .onsale {
	font-family: var(--wp--preset--font-family--akagi);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--base);
	border-radius: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 8px 14px;
	margin: 0;
}

.woocommerce button.button,
.woocommerce a.button,
.woocommerce button.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--akagi);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	border-radius: 0;
	line-height: 40px;
	padding: 0 25px;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce input.button:hover {
	background: var(--wp--preset--color--olive-light);
	color: var(--wp--preset--color--base);
}