/*
Theme Name: FLF Racing Supply - Motorsport Theme
Theme URI: https://finishlinefactory.com/
Description: A modern, high-performance automotive motorsport eCommerce theme built specifically for FLF Racing Supply. Features cutting-edge motorsport styling, high-contrast dark/light accents, instant AJAX part & AN-size search, interactive variation swatches, responsive fitment sizing guides, and streamlined WooCommerce conversion architecture.
Author: FLF Engineering & Development Team
Author URI: https://finishlinefactory.com/
Version: 3.4.4
Requires at least: 6.0
Tested up to: 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: ds-flf-theme
Tags: e-commerce, automotive, motorsport, performance-parts, woocommerce, modern, dark-mode, responsive-layout, grid-layout
*/

/* ==========================================================================
   FLF RACING SUPPLY - CORE CSS VARIABLES & THEME FOUNDATION
   ========================================================================== */
:root {
  /* Brand Palette - Motorsport High-Octane */
  --flf-primary: #00d2ff;            /* Electric Apex Cyan / Race Blue (Dark surfaces - 11.3:1) */
  --flf-primary-hover: #00b4db;
  --flf-primary-glow: rgba(0, 210, 255, 0.25);
  --flf-primary-light-surface: #0284c7; /* Vivid Cobalt Motorsport Blue (Light surfaces - 4.65:1 WCAG AA) */
  --flf-primary-light-hover: #0369a1;

  --flf-accent: #ff3b30;             /* Performance Red (Urgency/Sale/Track) */
  --flf-accent-hover: #e02d23;
  --flf-accent-glow: rgba(255, 59, 48, 0.25);

  --flf-success: #047857;            /* In-Stock Green (4.65:1 on light backgrounds - WCAG AA) */
  --flf-warning: #b45309;            /* Low Stock / Amber (4.54:1 on light backgrounds - WCAG AA) */

  /* Prominent Content Text Links */
  --flf-link-color: #0284c7;         /* Vivid Motorsport Blue (High Contrast on Light surfaces) */
  --flf-link-hover: #0369a1;         /* Deeper Cobalt Blue on hover */
  --flf-link-dark-color: #00d2ff;    /* Apex Cyan (High Contrast on Dark surfaces) */
  --flf-link-dark-hover: #38bdf8;

  /* Dark Surfaces (Header, Footer, Hero, Banners) */
  --flf-bg-dark: #0a0d14;            /* Carbon Pitch Black */
  --flf-bg-card-dark: #121824;       /* Deep Obsidian Card */
  --flf-bg-surface-dark: #1a2232;    /* Slate Component Surface */
  --flf-border-dark: #263449;        /* Subtle Precision Border */
  --flf-text-dark-primary: #f8fafc;  /* Crisp White */
  --flf-text-dark-secondary: #cbd5e1;/* High-contrast Billet Silver (WCAG AA) */
  --flf-text-dark-muted: #94a3b8;    /* Muted Slate (7.59:1 on dark - WCAG AA) */

  /* Light Surfaces (Product Pages & Catalog for High Contrast Part Clarity) */
  --flf-bg-light: #f8fafc;           /* Clean Ultra Light Neutral */
  --flf-bg-card-light: #ffffff;      /* Pure White Product Cards */
  --flf-border-light: #e2e8f0;       /* Crisp Border */
  --flf-text-light-primary: #0f172a; /* Deep Slate Heading */
  --flf-text-light-secondary: #334155;/* Readable Body */
  --flf-text-light-muted: #475569;   /* High-contrast Slate (5.88:1 on white - WCAG AA) */

  /* Typography */
  --flf-font-heading: 'Chakra Petch', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --flf-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --flf-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Layout & Spacing */
  --flf-container-max: 1440px;
  --flf-header-height: 84px;
  --flf-topbar-height: 38px;
  --flf-radius-sm: 4px;
  --flf-radius-md: 8px;
  --flf-radius-lg: 14px;
  --flf-radius-full: 9999px;

  /* Elevation Shadows */
  --flf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --flf-shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.06);
  --flf-shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.18), 0 6px 12px -2px rgba(0, 0, 0, 0.08);
  --flf-shadow-glow: 0 0 20px var(--flf-primary-glow);

  /* Transitions */
  --flf-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --flf-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --flf-transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Production bundle is enqueued directly via inc/enqueue.php for high performance and zero @import chaining */

/* ==========================================================================
   Accessibility & Skip-to-Content Focus (WCAG 2.4.1 Bypass Blocks)
   ========================================================================== */
.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,
.skip-link:focus {
  background-color: #0f172a !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 3px #0284c7, 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  clip: auto !important;
  clip-path: none !important;
  color: #ffffff !important;
  display: block !important;
  font-family: var(--flf-font-heading, "Chakra Petch", sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  height: auto !important;
  left: 12px !important;
  line-height: 1.4 !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  top: 12px !important;
  width: auto !important;
  z-index: 1000000 !important;
}

/* ==========================================================================
   Global Accessible Focus Visible Indicators (WCAG 2.4.7 & 2.4.11)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--flf-primary-light-surface, #0284c7) !important;
  outline-offset: 2px !important;
}

.flf-dark-section :focus-visible,
.flf-header :focus-visible,
.flf-footer :focus-visible,
.flf-modal :focus-visible,
.flf-topbar :focus-visible {
  outline: 2px solid var(--flf-primary, #00d2ff) !important;
  outline-offset: 2px !important;
}