/* ==========================================================================
   Evergreen General Contracting - Core Stylesheet
   Theme: Architectural Minimalism, Industrial Precision, Refined Ruggedness
   ========================================================================== */

:root {
  /* Brand Palette */
  --color-forest: #1A382B;
  --color-forest-dark: #11241C;
  --color-forest-light: #244D3B;
  --color-forest-surface: #1E3F31;
  --color-stone: #F4F1EA;
  --color-stone-muted: #E8E3D8;
  --color-stone-card: #FAF9F5;
  --color-amber: #D97706;
  --color-amber-hover: #B45309;
  --color-amber-glow: rgba(217, 119, 6, 0.25);
  --color-slate: #1F2937;
  --color-slate-muted: #4B5563;
  --color-slate-light: #9CA3AF;
  --color-border: #E2DDD3;
  --color-border-dark: #284F3D;

  /* Typography */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Shadows & Elevations */
  --shadow-subtle: 0 2px 8px -2px rgba(26, 56, 43, 0.06), 0 1px 4px -1px rgba(26, 56, 43, 0.04);
  --shadow-card: 0 10px 30px -5px rgba(26, 56, 43, 0.08), 0 4px 10px -2px rgba(26, 56, 43, 0.04);
  --shadow-hover: 0 20px 40px -8px rgba(26, 56, 43, 0.15), 0 8px 16px -4px rgba(26, 56, 43, 0.08);
  --shadow-amber: 0 10px 25px -4px rgba(217, 119, 6, 0.35);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-slate);
  background-color: var(--color-stone);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Headings with industrial typography */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Architectural Grid Subtle Background */
.bg-architectural-grid {
  background-image: 
    linear-gradient(to right, rgba(26, 56, 43, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26, 56, 43, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-architectural-grid-dark {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Diagonal Engineering Hatch Pattern */
.bg-hatch-pattern {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(217, 119, 6, 0.08),
    rgba(217, 119, 6, 0.08) 6px,
    transparent 6px,
    transparent 12px
  );
}

/* Custom Utilities for Buttons & Accents */
.btn-amber {
  background-color: var(--color-amber);
  color: #FFFFFF;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-amber);
}

.btn-amber:hover {
  background-color: var(--color-amber-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -4px rgba(217, 119, 6, 0.45);
}

.btn-amber:active {
  transform: translateY(0);
}

.btn-outline-white {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  transition: var(--transition-smooth);
}

.btn-outline-white:hover {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* High-elevation hover cards */
.service-card {
  transition: var(--transition-smooth);
  border: 1px solid var(--color-border);
  background-color: var(--color-stone-card);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(26, 56, 43, 0.3);
}

.service-card:hover .service-icon-box {
  background-color: var(--color-forest);
  color: #FFFFFF;
  transform: scale(1.05);
}

/* Project Card & Zoom */
.project-card {
  transition: var(--transition-smooth);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.project-card:hover .project-image {
  transform: scale(1.06);
}

.project-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interactive Timeline Step Cards */
.timeline-card {
  position: relative;
  transition: var(--transition-smooth);
}

.timeline-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-amber);
  transition: width 0.4s ease;
}

.timeline-card:hover::after {
  width: 100%;
}

.timeline-card:hover {
  transform: translateY(-4px);
}

/* Form Input Enhancements and Accessible Validation States */
.input-custom {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-custom:focus {
  outline: none;
  border-color: var(--color-forest);
  box-shadow: 0 0 0 3px rgba(26, 56, 43, 0.18);
}

/* Modern Accessible User Valid / Invalid feedback */
.input-custom:user-valid:not(:placeholder-shown) {
  border-color: #059669;
}

.input-custom:user-invalid {
  border-color: #DC2626;
  background-color: #FEF2F2;
}

.input-custom:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* File Drop Zone Styles */
.file-dropzone {
  border: 2px dashed #D1C9BC;
  background-color: #F8F6F0;
  transition: var(--transition-smooth);
}

.file-dropzone.drag-active {
  border-color: var(--color-amber);
  background-color: rgba(217, 119, 6, 0.05);
}

/* Sticky Nav Active Blur Effect */
.nav-scrolled {
  background-color: rgba(26, 56, 43, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

/* Badge Accent */
.badge-industrial {
  font-family: var(--font-mono);
  font-size: 0.725rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Modal Backdrop Animations */
.modal-overlay {
  transition: opacity 0.3s ease;
}

.modal-dialog {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.modal-hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-hidden .modal-dialog {
  transform: translateY(20px) scale(0.97);
}

/* Mobile Nav Drawer */
#mobile-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-drawer.drawer-closed {
  transform: translateX(100%);
}

#mobile-drawer.drawer-open {
  transform: translateX(0%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #E8E3D8;
}
::-webkit-scrollbar-thumb {
  background: #1A382B;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #244D3B;
}