/*
==========================================================
   MoversPro - Premium Moving & Logistics HTML Template
   Version: 1.1.0
   Author: MoversPro
   License: Standard Marketplace License
==========================================================
   CORE STYLESHEET
   This file holds only the foundation. Every visual
   component lives in its own file under module-css/,
   and every breakpoint lives in responsive.css.

   Contents of this file
   ---------------------
   1. Root Variables & Design Tokens  (edit colors here)
   2. Base & Reset
   3. Typography
   4. Utilities, Grid & Section Headings

   Load order (see the <head> of any page)
   ---------------------------------------
   style.css                     <- you are here
   module-css/01-buttons.css     module-css/13-preloader.css
   module-css/02-forms.css       module-css/14-animations.css
   module-css/03-header.css      module-css/15-contact.css
   module-css/04-hero.css        module-css/16-blog-single.css
   module-css/05-services.css    module-css/17-widgets.css
   module-css/06-about.css       module-css/18-overlays.css
   module-css/07-pricing.css     module-css/19-gallery.css
   module-css/08-testimonials.css module-css/20-planner.css
   module-css/09-team.css        module-css/21-tracking.css
   module-css/10-blog.css        module-css/22-checklist.css
   module-css/11-faq.css         module-css/23-careers.css
   module-css/12-footer.css      module-css/24-pages.css
   responsive.css                <- always last
==========================================================
*/

/* ============================================
   1. ROOT VARIABLES & DESIGN TOKENS
============================================ */
:root {
  /* Brand Colors */
  --color-primary: #FF5722;
  --color-primary-hover: #E64A19;
  --color-primary-light: #FFF3EE;
  --color-secondary: #0E1B32;
  --color-secondary-light: #1A2B4A;
  --color-accent: #FFC107;
  --color-accent-hover: #FFA000;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-2: #F1F5F9;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  /* Text */
  --color-heading: #0E1B32;
  --color-text: #334155;
  --color-muted: #64748B;
  --color-text-inverse: #FFFFFF;

  /* State */
  --color-success: #10B981;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* Typography */
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --fs-display: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;
  --lh-loose: 1.85;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 960px;
  --section-y: clamp(4rem, 8vw, 7rem);

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.15);
  --shadow-brand: 0 10px 30px rgba(255, 87, 34, 0.35);

  /* Transitions */
  --t-fast: 150ms ease;
  --t: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-nav: 1000;
  --z-modal: 1050;
  --z-toast: 1100;
  --z-preloader: 9999;
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg: #0A1628;
  --color-surface: #0E1B32;
  --color-surface-2: #1A2B4A;
  --color-border: #1E3358;
  --color-border-strong: #2A4570;
  --color-heading: #F8FAFC;
  --color-text: #CBD5E1;
  --color-muted: #94A3B8;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* ============================================
   2. BASE & RESET
============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t), color var(--t);
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--color-primary-hover);
}

ul,
ol {
  padding-left: 1.25rem;
}

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ============================================
   3. TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Centred headings inside a fixed-width column drop a single word onto the
     last line ("...We Get Every / Week"). Balance evens the line lengths
     instead. Browsers without support ignore it and wrap as before. */
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: 1.125rem;
  line-height: var(--lh-loose);
  color: var(--color-muted);
  /* Same problem one level down, but "pretty" keeps the line-breaking of a
     full paragraph and only guards the last line against a lone word. */
  text-wrap: pretty;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================
   4. UTILITIES
============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.section {
  padding-block: var(--section-y);
}

.section-sm { padding-block: clamp(3rem, 5vw, 4rem); }
.section-lg { padding-block: clamp(5rem, 10vw, 9rem); }

/* Where two sections share a background there is no visible seam, so their
   facing paddings add up to twice the intended rhythm and the join reads as a
   hole in the page. Dropping the second one's top padding leaves exactly one
   section gap — the first section's bottom padding already supplies it.
   Sections with different backgrounds keep both paddings: there the colour
   change is the seam, and it needs the breathing room on each side. */
.section:not([class*="bg-"]) + .section:not([class*="bg-"]),
.bg-surface + .bg-surface,
.bg-surface-2 + .bg-surface-2 {
  padding-block-start: 0;
}

.bg-surface { background: var(--color-surface); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-secondary { background: var(--color-secondary); color: var(--color-text-inverse); }
.bg-primary { background: var(--color-primary); color: var(--color-white); }
.bg-gradient {
  background: linear-gradient(135deg, var(--color-secondary) 0%, #1a3a6b 100%);
  color: var(--color-white);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-muted); }
.text-white { color: var(--color-white); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.w-full { width: 100%; }

.grid { display: grid; gap: var(--space-6); }

/* Grid items default to min-width:auto, which lets a wide child (a date input,
   a long word) push the whole track past the viewport. Opting out here is what
   keeps every grid layout in the template from overflowing on narrow screens. */
.grid > *,
.grid-sidebar > * { min-width: 0; }

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-gap-lg { gap: var(--space-8); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Section Heading */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

[data-theme="dark"] .section-head .eyebrow {
  background: rgba(255, 87, 34, 0.15);
}

/* Split section: heading column beside the content instead of centred above it.
   Every section reading eyebrow / centred heading / centred lead / grid makes a
   long page feel like one repeated slide, so a few sections use this instead.
   Used sparingly on purpose — if everything is asymmetric, nothing is. */
.section-split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.section-split > .section-head {
  text-align: left;
  max-width: none;
  margin: 0;
}

/* A call to action in the heading column needs its own separation; the
   paragraph above it only carries the default text margin. */
.section-split > .section-head .btn {
  margin-top: var(--space-4);
}

@media (min-width: 992px) {
  .section-split {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}

.section-head h2 {
  margin-bottom: var(--space-4);
}

.section-head p {
  color: var(--color-muted);
  font-size: 1.0625rem;
  margin-bottom: 0;
}

/* Eyebrow left aligned variant */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-4);
  letter-spacing: 0.02em;
}

[data-theme="dark"] .eyebrow {
  background: rgba(255, 87, 34, 0.15);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-8);
}