/*
Theme Name: EcoFlow Store
Theme URI: https://ecoflow-shop.local
Author: EcoFlow Shop
Description: Custom premium block theme for the EcoFlow charging station store, built on WooCommerce.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecoflow-store
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready, e-commerce
*/

/*
 * Design tokens live in theme.json (colors, typography, spacing, layout).
 * This file only holds global CSS that theme.json cannot express.
 */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
}

/*
 * One focus ring for the whole site. :where() keeps specificity at zero so a
 * component can still opt out, and the offset keeps the ring clear of the
 * element's own border on cards and buttons.
 */
:where(.wp-site-blocks *:focus-visible),
:where(.site-header *:focus-visible),
:where(.pdp-sticky *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	border-radius: 2px;
}

/* On dark sections the ring has to invert to stay visible. */
:where(.section--dark *:focus-visible),
:where(.cine *:focus-visible),
:where(.hero-slider *:focus-visible),
:where(.site-footer *:focus-visible) {
	outline-color: var(--wp--preset--color--base);
}

img {
	height: auto;
	max-width: 100%;
}

/* Visually hidden but available to assistive tech (WordPress core convention). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	border-radius: 4px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	right: 5px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Some WooCommerce product blocks (product-price, product-summary,
 * product-stock-indicator) record a "fontSize" attribute but don't apply
 * the corresponding has-*-font-size class/style the way core blocks do -
 * set sizing directly wherever they appear in a product-template grid card.
 */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-summary {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-subtle);
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-stock-indicator {
	font-size: var(--wp--preset--font-size--xs);
}


/*
 * Cross-document page transitions.
 *
 * Uses the native View Transitions API rather than any script: navigation is
 * never blocked waiting on JS, and browsers without support simply navigate
 * normally with nothing to fall back to.
 *
 * Enabled only under prefers-reduced-motion: no-preference, so the whole
 * feature is off for visitors who asked for less movement.
 *
 * The duration is deliberately short. A page transition the shopper has to
 * wait for is worse than no transition at all.
 */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 200ms;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * The header carries its own transition name, which takes it out of the root
 * snapshot. Without this the fixed header would be captured as part of the
 * outgoing page and appear to slide or double up mid-transition; named, it
 * simply stays put while the content underneath cross-fades.
 */
.site-header {
	view-transition-name: ef-site-header;
}

::view-transition-old(ef-site-header),
::view-transition-new(ef-site-header) {
	animation: none;
	mix-blend-mode: normal;
}