/*
================================================================================
STAR SCRAP PARTS — CORE STYLES & LAYOUT (style.css)

WHAT THIS FILE DOES:
1. Applies an accessible, consistent modern CSS reset across all browsers.
2. Establishes the typographic hierarchy (H1, H2, H3, paragraphs, captions).
3. Defines main grid containers, section wrappers, and layout dividers.
4. Provides utility classes for typography, alignment, and spacing.
5. Implements accessibility standards and handles 'prefers-reduced-motion'.

WHERE TO EDIT:
- Global Background / Text Color: See the 'BODY STYLES' block.
- Section Padding: See '.section-block' and '.section-header'.
- Heading Sizes: See the 'TYPOGRAPHY HIERARCHY' block.

HOW TO TEST:
Changes here take effect immediately in the browser upon page refresh.
================================================================================
*/

/* ==========================================================================
   1. MODERN CSS RESET
   Ensures predictable element sizing across Chrome, Firefox, Safari, and Edge.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box; /* Includes padding and borders in total width */
  margin: 0;              /* Removes unpredictable default browser margins */
  padding: 0;             /* Removes unpredictable default browser paddings */
}

html {
  font-size: 16px;                     /* Baseline rem scale: 1rem = 16px */
  scroll-behavior: smooth;             /* Smooth scrolling when clicking anchor links */
  -webkit-text-size-adjust: 100%;      /* Prevents font scaling bugs in iOS Safari */
  text-rendering: optimizeLegibility;  /* Sharp character rendering */
}

body {
  font-family: var(--font-sans);       /* Primary editorial DM Sans typography */
  font-size: 1rem;
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;                    /* Prevents horizontal scrollbars without breaking position: sticky */
  -webkit-font-smoothing: antialiased; /* Crisp text rendering on macOS & mobile */
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure images never overflow their parent container */
img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit font families on form elements */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Remove default link underlines */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Unstyled lists */
ul,
ol {
  list-style: none;
}

/* ==========================================================================
   2. ACCESSIBILITY — FOCUS INDICATORS & REDUCED MOTION
   Ensures full keyboard accessibility for screen readers and power users.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Respect user's operating system preferences for reduced animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link for keyboard/screen-reader users to jump directly to content */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text-main);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 9999;
  font-weight: var(--fw-semibold);
  transition: top var(--transition-fast);
}
.skip-to-content:focus {
  top: 1rem;
}

/* ==========================================================================
   3. STRUCTURAL CONTAINERS
   Constrains content to comfortable, readable maximum widths.
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Main Section Blocks */
.section-block {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
  position: relative;
}

/* Alternate Section Background for Visual Rhythm */
.section-alt {
  background-color: var(--color-bg-secondary);
}

/* Dark Industrial Section (Scrap Cars, etc.) */
.section-dark {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  transition: background-color 1s cubic-bezier(0.16, 1, 0.3, 1), color 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-dark.is-dark-active {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text-main);
}

/* ==========================================================================
   4. TYPOGRAPHY HIERARCHY
   Clean, human-designed editorial automotive styling.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-tech);
  color: var(--color-text-main);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  transition: color 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-dark.is-dark-active h1,
.section-dark.is-dark-active h2,
.section-dark.is-dark-active h3,
.section-dark.is-dark-active h4 {
  color: var(--color-dark-text-main);
}

/* Eyebrow Label (Small technical badge above section titles) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-tech);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: var(--radius-xs);
}

.section-dark .section-eyebrow {
  color: #60A5FA; /* Brighter sky blue indicator in dark mode */
}
.section-dark .section-eyebrow::before {
  background-color: #60A5FA;
}

/* Standard Section Header Layout */
.section-header {
  margin-bottom: var(--space-3xl);
}

.section-header.text-center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  font-size: 1.125rem;
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.section-dark .section-subtitle {
  color: var(--color-dark-text-muted);
}

/* ==========================================================================
   5. BUTTON SYSTEM & GLOWING TRANSITIONS
   Tactile, industrial, accessible interactive buttons with dynamic glowing aura transitions.
   ========================================================================== */

@keyframes buttonGlowSweep {
  0% {
    transform: translateX(-150%) rotate(25deg);
  }
  100% {
    transform: translateX(250%) rotate(25deg);
  }
}

@keyframes buttonPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.75), 0 0 50px rgba(59, 130, 246, 0.45);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
  white-space: nowrap;
  will-change: transform, box-shadow;
}

/* Shimmer Light Sweep on Hover for all buttons */
.btn::after,
.specular-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%) rotate(25deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn:hover::after,
.specular-btn:hover::after {
  opacity: 1;
  animation: buttonGlowSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Primary High-Contrast Performance Blue Button with Glow */
.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: #60A5FA;
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(37, 99, 235, 0.65), 0 8px 25px rgba(37, 99, 235, 0.4);
}
.btn-primary:active {
  background-color: var(--color-accent-active);
  transform: translateY(0) scale(0.98);
}

/* Secondary Ghost / Outline Button with Cyan/Blue Glow Transition */
.btn-secondary {
  background-color: var(--color-bg-card);
  color: var(--color-text-main);
  border-color: var(--color-border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover {
  background-color: var(--color-bg-secondary);
  border-color: rgba(59, 130, 246, 0.7);
  color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 4px 15px rgba(15, 23, 42, 0.15);
}

/* Secondary Button for Dark Mode or Light Sections */
.btn-outline-dark {
  background-color: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.btn-outline-dark:hover {
  background-color: #0F172A;
  border-color: #3B82F6;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.5), 0 8px 24px rgba(15, 23, 42, 0.25);
}

/* SPECULAR BUTTON GLOW SYSTEM */
.specular-btn {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease !important;
}

.specular-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.65), rgba(16, 185, 129, 0.65), rgba(99, 102, 241, 0.65));
  opacity: 0.3;
  filter: blur(12px);
  z-index: 0;
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.specular-btn:hover {
  transform: translateY(-3px) scale(1.025) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.6), 0 0 50px rgba(37, 99, 235, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.specular-btn:hover::before {
  opacity: 0.95;
  filter: blur(18px);
  transform: scale(1.06);
}

.specular-btn:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* Large Call-To-Action Variant */
.btn-lg {
  padding: 1.05rem 2.25rem;
  font-size: 1rem;
}

/* Small Variant for Tables & Cards */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Button with subtle arrow icon */
.btn .btn-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}
.btn:hover .btn-icon {
  transform: translateX(4px);
}