/*
Theme Name: eRetail Systems
Theme URI: https://eretailsystems.com
Author: eRetail Systems
Author URI: https://eretailsystems.com
Description: Custom WordPress theme for eRetail Systems. Built without a page builder, using native WordPress APIs, native Gutenberg block registration, and vanilla JavaScript. This is the initial functional foundation; homepage sections are added as their design comps are supplied.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eretail-systems

This stylesheet intentionally contains only the WordPress theme header
above plus the small set of variables/reset rules every page needs
before assets/css/main.css loads. All component styling lives in
assets/css/main.css and the per-block stylesheets in /blocks/.
*/

:root {
	/* Brand */
	--eretail-color-primary: #E41E26;
	--eretail-color-primary-dark: #C11821;

	/* Text */
	--eretail-color-text: #4A4A4A;
	--eretail-color-heading: #111111;
	--eretail-color-text-light: #767676;

	/* Backgrounds / borders */
	--eretail-color-bg: #FFFFFF;
	--eretail-color-bg-light: #F7F7F7;
	--eretail-color-bg-dark: #111111;
	--eretail-color-border: #E5E5E5;

	/* Typography */
	--eretail-font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--eretail-font-size-base: 16px;
	--eretail-line-height-base: 1.6;

	/* Spacing scale */
	--eretail-space-xs: 8px;
	--eretail-space-sm: 16px;
	--eretail-space-md: 24px;
	--eretail-space-lg: 40px;
	--eretail-space-xl: 64px;
	--eretail-space-2xl: 96px;

	/* Layout */
	--eretail-container-width: 1200px;
	--eretail-container-padding: 24px;
	--eretail-header-height: 88px;

	/* Radii / transitions */
	--eretail-radius-sm: 4px;
	--eretail-radius-md: 8px;
	--eretail-radius-pill: 999px;
	--eretail-transition-speed: 0.25s;
	--eretail-transition-easing: ease;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var( --eretail-font-family );
	font-size: var( --eretail-font-size-base );
	line-height: var( --eretail-line-height-base );
	color: var( --eretail-color-text );
	background: var( --eretail-color-bg );
}

/*
 * `overflow-x: hidden` on html/body used to live here as a horizontal-
 * scroll safety net. Removed: per the CSS Overflow spec, setting only
 * overflow-x forces the *other* axis (overflow-y) to compute as `auto`
 * too, which turns html/body into their own scroll containers instead of
 * leaving the viewport as the page's scroller — a real, spec-documented
 * side effect that can visibly interact with position: sticky and with
 * the WP admin bar's fixed positioning (both reference the viewport).
 * Horizontal overflow is fixed at its actual source(s) instead — see
 * assets/css/main.css section 8 for the off-canvas nav fix, and the
 * `min-width: 0` notes on flex children throughout that section.
 */

html.js body.nav-open {
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

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