/*
Theme Name:  Fit Foodie Fits
Theme URI:   https://fitfoodiefits.com
Author:      Fit Foodie Fits Guild Engineering
Author URI:  https://fitfoodiefits.com/team
Description: A premium, high-contrast editorial lookbook and WooCommerce shop theme engineered for Fit Foodie Fits — heavyweight athletic streetwear at the intersection of heavy training, food culture, and anime aesthetics. Features a strict zero-radius design language, Inter / JetBrains Mono typography, ACF Pro product specification modules, and full WooCommerce template overrides.
Version:     1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.1
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fit-foodie-fits
Tags:        e-commerce, custom-menu, custom-logo, featured-images, full-width-template, translation-ready, editor-style
*/

/* -------------------------------------------------------------------------
 * Core design tokens — the single source of truth for the brand system.
 * Tailwind (enqueued via functions.php) handles utility classes; these
 * variables keep parity for any non-Tailwind rendering context.
 * ---------------------------------------------------------------------- */
:root {
	--ffs-color-brand-red: #A61919;
	--ffs-color-ink: #18181b;        /* zinc-900 */
	--ffs-color-ink-soft: #52525b;   /* zinc-600 */
	--ffs-color-paper: #ffffff;
	--ffs-color-paper-soft: #f4f4f5; /* zinc-100 */
	--ffs-color-line: #e4e4e7;       /* zinc-200 */
	--ffs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ffs-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ffs-radius: 0; /* Zero-radius architecture. Non-negotiable. */
}

/* Base reset for classic rendering (pre-Tailwind hydration). */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	border-radius: var(--ffs-radius);
}

body {
	font-family: var(--ffs-font-sans);
	margin: 0;
	padding: 0;
	background-color: var(--ffs-color-paper);
	color: var(--ffs-color-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
}

/* Screen-reader utility (WordPress standard). */
.screen-reader-text {
	border: 0;
	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(--ffs-color-paper-soft);
	clip-path: none;
	color: var(--ffs-color-ink);
	display: block;
	font-family: var(--ffs-font-mono);
	font-size: 11px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Marquee ticker keyframes (mirrors React Hero.tsx animation). */
@keyframes ffs-marquee {
	0%   { transform: translateX(0%); }
	100% { transform: translateX(-50%); }
}

.animate-marquee {
	animation: ffs-marquee 25s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.animate-marquee {
		animation: none;
	}
}

/* Custom logo constraint so uploaded logos respect the masthead height. */
.custom-logo-container img.custom-logo {
	max-height: 40px;
	width: auto;
}