/* ==========================================================================
   MidCity Movers — design system (tokens, reset, base, utilities)
   Split from the approved mockup design system (redesign/style.css), rev 2.
   Load order: design-system -> components -> header-footer -> overrides.

   @package MidCity_Movers
   @author  SlingSoft Apps <https://slingsoft.app>
   ========================================================================== */


/* ==========================================================================
   MidCity Movers Kenya — Production Design System V3.5
   - Brand Color: Sunny Vibrant Yellow (#FFD200 / #FFC400) + Obsidian Navy (#0A1324)
   - Professional Full-Service Relocations across Kenya
   - No Numeric Pricing — Dynamic "Move on WhatsApp" Quote Generator
   - Comprehensive 4-Column Footer, 9-Photo Action Gallery, Rich Multi-Page Suite
   ========================================================================== */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
  /* Brand Primary: Authentic Sunny Yellow from Team Uniforms */
  --c-yellow:         #FFD200;
  --c-yellow-hover:   #F5B800;
  --c-yellow-dark:    #D99800;
  --c-yellow-light:   #FFF9DB;
  --c-yellow-border:  #FFE266;
  --c-yellow-glow:    rgba(255, 210, 0, 0.35);
  --c-gold-text:      #8A6100;   /* Readable gold for text on light surfaces */
  --c-amber:          #D99800;   /* Amber icon accent */

  /* Obsidian & Navy Contrast Palette */
  --bg-obsidian:      #0A1324;   /* Deep Executive Obsidian Navy */
  --bg-obsidian-card: #111E36;   /* Obsidian Card Surface */
  --bg-obsidian-soft: #172642;

  /* Surfaces & Backgrounds */
  --bg-main:          #FBF9F6;   /* Warm Alabaster */
  --bg-white:         #FFFFFF;   /* Pure White */
  --bg-warm-subtle:   #F4EFEA;   /* Soft Linen Tint */
  --bg-sand:          #EFEAE2;   /* Warm Sand Accent */

  /* Functional Accents */
  --c-whatsapp:       #25D366;   /* WhatsApp Green */
  --c-whatsapp-dark:  #128C7E;
  --c-blue:           #0052CC;   /* Logo Royal Blue */
  --c-negative:       #C2410C;   /* Semantic negative only (comparison 'them' column) */
  --c-red:            var(--c-negative); /* deprecated alias — brand red retired */
  --c-emerald:        #15803D;   /* Trust Green */
  --c-emerald-light:  #DCFCE7;

  /* High-Contrast Typography */
  --text-title:       #0A1324;   /* Dark Navy Slate */
  --text-head:        #1E293B;   /* Slate 800 */
  --text-body:        #334155;   /* Slate 700 Readable */
  --text-muted:       #64748B;   /* Slate 500 */
  --text-dim:         #94A3B8;   /* Slate 400 */
  --text-light:       #F8FAFC;
  --text-muted-dark:  #94A3B8;

  /* Borders & Dividers */
  --line-border:      #E5DFD7;   /* Warm Linen Border */
  --line-light:       #F0ECE6;
  --line-strong:      #CBD5E1;
  --line-dark:        rgba(255, 255, 255, 0.12);

  /* Typography Stack */
  --f-serif:          'Playfair Display', Georgia, serif;
  --f-sans:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:           'JetBrains Mono', monospace;

  /* Radii */
  --r-sm:             8px;
  --r-md:             16px;
  --r-lg:             24px;
  --r-xl:             32px;
  --r-pill:           9999px;

  /* Shadows */
  --shadow-subtle:    0 2px 8px rgba(10, 19, 36, 0.04);
  --shadow-card:      0 12px 36px -4px rgba(10, 19, 36, 0.08), 0 4px 12px -2px rgba(10, 19, 36, 0.03);
  --shadow-hover:     0 20px 50px -8px rgba(10, 19, 36, 0.14), 0 8px 20px -4px rgba(10, 19, 36, 0.06);
  --shadow-yellow:    0 8px 24px rgba(255, 210, 0, 0.35);

  /* Layout */
  --container:        1320px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --sec-pad:          clamp(4.5rem, 8vw, 7rem);
  --sec-pad-sm:       clamp(3rem, 5vw, 4.5rem);

  /* Transitions */
  --ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --trans:            0.28s var(--ease);
}

/* ── 2. RESET & BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--f-body);
  background-color: var(--bg-main);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--trans);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-sans);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text-title);
}

h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
h4 { font-size: 1.15rem; font-weight: 700; }

.serif-head {
  font-family: var(--f-serif);
  font-weight: 600;
  font-style: italic;
}

p {
  margin-bottom: 1em;
  color: var(--text-body);
  font-size: 1.02rem;
}
p:last-child {
  margin-bottom: 0;
}

::selection {
  background: var(--c-yellow);
  color: var(--bg-obsidian);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--c-yellow-dark); }

/* ── 3. LAYOUT SURFACES ──────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.sec-main {
  background-color: var(--bg-main);
  padding: var(--sec-pad) 0;
  position: relative;
}

.sec-white {
  background-color: var(--bg-white);
  padding: var(--sec-pad) 0;
  position: relative;
  border-top: 1px solid var(--line-border);
  border-bottom: 1px solid var(--line-border);
}

.sec-warm {
  background-color: var(--bg-warm-subtle);
  padding: var(--sec-pad) 0;
  position: relative;
  border-top: 1px solid var(--line-border);
  border-bottom: 1px solid var(--line-border);
}

.sec-obsidian {
  background-color: var(--bg-obsidian);
  color: #FFFFFF;
  padding: var(--sec-pad) 0;
  position: relative;
}

/* ── 4. BADGES & STAR RATINGS ────────────────────────────────────────────── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A6100;
  background: var(--c-yellow-light);
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-yellow-border);
  margin-bottom: 1.2rem;
}

.badge-emerald {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-emerald);
  background: var(--c-emerald-light);
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-pill);
}

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--c-amber);
  font-size: 0.95rem;
}

.star-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #FFFFFF;
  border: 1.5px solid var(--line-border);
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-title);
  box-shadow: var(--shadow-subtle);
}

/* ── 5. BUTTON SYSTEM ────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 800;
  background: var(--c-yellow);
  color: var(--bg-obsidian) !important;
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-yellow);
  box-shadow: var(--shadow-yellow);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--c-yellow-hover);
  border-color: var(--c-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 210, 0, 0.45);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 700;
  background: #FFFFFF;
  color: var(--text-title);
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-border);
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.btn-secondary:hover {
  border-color: var(--c-yellow-dark);
  color: var(--text-title);
  background: var(--c-yellow-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 800;
  background: var(--c-whatsapp);
  color: #FFFFFF !important;
  padding: 0.9rem 1.8rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-whatsapp);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  cursor: pointer;
  transition: all var(--trans);
  white-space: nowrap;
}
.btn-whatsapp:hover {
  background: var(--c-whatsapp-dark);
  border-color: var(--c-whatsapp-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}


/* ── ACCESSIBILITY & INTERACTION AFFORDANCES ── */

/* ── 22.7 Accessibility & interaction affordances ─────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}
.faq-q-2 {
  cursor: pointer;
}
.field-photo-card {
  cursor: zoom-in;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--c-yellow);
  color: var(--bg-obsidian);
  font-family: var(--f-sans);
  font-weight: 800;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

@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;
  }
}


/* ── DESIGN-SYSTEM UTILITIES ── */

/* ══════════════════════════════════════════════════════════════════════════
   24. DESIGN-SYSTEM UTILITIES
       Promoted from repeated inline style attributes so each pattern is
       defined once. These map 1:1 onto Elementor widget markup during the
       WordPress port — no per-instance styling to re-enter by hand.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section scaffolding ──────────────────────────────────────────────── */
.section-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 2.5rem;
}
.section-intro.is-tight {
  margin-bottom: 0;
}
.section-lede {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.prose-lg {
  color: var(--text-body);
  font-size: 1.15rem;
  line-height: 1.75;
}
.measure-wide {
  max-width: 840px;
}

/* ── Text colour helpers ──────────────────────────────────────────────── */
.text-gold     { color: var(--c-gold-text); }
.text-amber    { color: var(--c-amber); }
.text-yellow   { color: var(--c-yellow); }
.text-soft     { color: var(--text-muted); }
.text-on-photo {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.text-sm-flush {
  font-size: 0.88rem;
  margin: 0;
}

/* ── Spacing helpers ──────────────────────────────────────────────────── */
.mb-xs { margin-bottom: 0.3rem; }
.mb-md { margin-bottom: 1.2rem; }

/* ── Button sizing ────────────────────────────────────────────────────── */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}
.btn-sm {
  padding: 0.6rem 1rem;
  font-size: 0.84rem;
}
.btn-full {
  width: 100%;
  justify-content: center;
}
.btn-block {
  width: 100%;
  justify-content: center;
  padding: 1rem;
}

/* ── Icon sizing ──────────────────────────────────────────────────────── */
.icon-xl  { font-size: 1.8rem; }
.icon-2xl { font-size: 2rem; }