/*
Theme Name: Swift Act v4
Theme URI: https://swift-act.com
Author: Swift Act
Description: Custom ACF-based modular theme for Swift Act (swift-act.com). Built for non-developer editability using ACF Flexible Content modules. No page builder dependency.
Version: 4.0.0
Text Domain: swiftact
*/

/* =========================================================
   DESIGN TOKENS
   Source: Figma dev-mode CSS export (confirmed exact values)
   These are the ONLY place color/spacing/type values should
   be hard-coded. Every module MUST reference these variables,
   never a raw hex/px value, so future theme-wide restyles
   only require editing this one block. (Editable & Customizable)
   ========================================================= */
:root {
  /* Brand colors */
  --sa-navy:        #071a39;
  --sa-gradient-diagonal: linear-gradient(135deg, #071A39 0%, #081C3C 10%, #081E3F 20%, #092042 30%, #092245 40%, #0A2448 50%, #0C2E57 57%, #0F3966 64%, #114576 71%, #135086 79%, #145C97 86%, #1668A8 93%, #1774B9 100%); /* confirmed via Figma dev-mode - the single source of truth for every diagonal navy-to-blue gradient in the theme */
  --sa-gradient-horizontal: linear-gradient(to right in oklab, #071a39, #1774b9); /* confirmed via figma.site inspect - CRA hero background AND icon badge circles both use this exact gradient */
  --sa-blue:        #1774b9;
  --sa-orange:      #f26b21;
  --sa-light-gray:  #e9edf2;
  --sa-white:       #ffffff;
  --sa-black:       #000000;
  --sa-destructive: #d4183d;
  --sa-gray-text:   #4a5565; /* confirmed via Figma export - section subheading color on light backgrounds */
  --sa-text-body:   #364153; /* confirmed via Figma export - image-text-block / card paragraph color, distinct from --sa-gray-text */
  --sa-hero-stat-label: #D1D5DC; /* confirmed via Figma dev-mode - hero stat labels (Clients/Hours Worked/etc.) on navy background, distinct from --sa-gray-text (used on light backgrounds) */
  --sa-timeline-location: #6A7282; /* confirmed via Figma dev-mode - timeline location tags (Smart Village, Assiut, etc.), distinct from --sa-gray-text */

  /* Semantic aliases (match Figma --primary/--secondary/etc.) */
  --sa-background:        var(--sa-white);
  --sa-foreground:        var(--sa-navy);
  --sa-card-bg:           var(--sa-white);
  --sa-primary:           var(--sa-navy);
  --sa-primary-fg:        var(--sa-white);
  --sa-secondary:         var(--sa-blue);
  --sa-secondary-fg:      var(--sa-white);
  --sa-muted:             var(--sa-light-gray);
  --sa-muted-fg:          var(--sa-navy);
  --sa-accent:            var(--sa-orange);
  --sa-accent-fg:         var(--sa-white);
  --sa-border:            #0719381a; /* navy @ 10% */
  --sa-border-light:      #E5E7EB; /* confirmed via Figma dev-mode - Blogs/Press search input border, distinct from --sa-border (navy@10%) */
  --sa-placeholder:       #99A1AF; /* confirmed via Figma dev-mode - search input placeholder text + icon color */
  --sa-input-bg:          var(--sa-light-gray);
  --sa-ring:              var(--sa-blue);

  /* Typography */
  --sa-font-family: 'Montserrat', sans-serif;
  --sa-fw-normal:   400;
  --sa-fw-medium:   500;
  --sa-fw-semibold: 600;
  --sa-fw-bold:     700;
  --sa-fw-black:    900;

  --sa-text-xs:   0.75rem;   /* 12px */
  --sa-text-sm:   0.875rem;  /* 14px */
  --sa-text-base: 1rem;      /* 16px */
  --sa-text-lg:   1.125rem;  /* 18px */
  --sa-text-xl:   1.25rem;   /* 20px */
  --sa-text-2xl:  1.5rem;    /* 24px */
  --sa-text-3xl:  1.875rem;  /* 30px */
  --sa-text-4xl:  2.25rem;   /* 36px */
  --sa-text-5xl:  3rem;      /* 48px */
  --sa-text-6xl:  3.75rem;   /* 60px */

  --sa-leading-tight:   1.25;
  --sa-leading-snug:    1.375;
  --sa-leading-base:    1.5;
  --sa-leading-relaxed: 1.625;

  --sa-tracking-tight:  -0.025em;
  --sa-tracking-wide:    0.025em;
  --sa-tracking-wider:   0.05em;
  --sa-tracking-widest:  0.1em;

  /* Spacing scale (4px base unit, Tailwind-style) */
  --sa-space-1: 0.25rem;  /* 4px */
  --sa-space-2: 0.5rem;   /* 8px */
  --sa-space-3: 0.75rem;  /* 12px */
  --sa-space-4: 1rem;     /* 16px */
  --sa-space-5: 1.25rem;  /* 20px */
  --sa-space-6: 1.5rem;   /* 24px */
  --sa-space-8: 2rem;     /* 32px */
  --sa-space-10: 2.5rem;  /* 40px */
  --sa-space-12: 3rem;    /* 48px */
  --sa-space-16: 4rem;    /* 64px */
  --sa-space-20: 5rem;    /* 80px */
  --sa-space-24: 6rem;    /* 96px */

  /* Radius */
  --sa-radius-xs:  0.125rem; /* 2px */
  --sa-radius:     0.625rem; /* 10px - default */
  --sa-radius-2xl: 0.875rem; /* 14px - large cards (post cards, filter/search cards) - confirmed via Figma dev-mode across multiple exports */
  --sa-radius-xl: 1rem; /* 16px - large feature panels (Mission/Vision, hero media/gallery) - confirmed via Figma dev-mode, distinct from the 14px card radius */
  --sa-radius-full: 9999px;

  /* Shadows (Tailwind shadow-lg, used on buttons/cards) */
  --sa-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --sa-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* confirmed via Figma - Contact form card */
  --sa-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25); /* confirmed via Figma - hero media, gradient panels */
  --sa-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.08);
  --sa-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.08);

  /* Transitions */
  --sa-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sa-duration-fast: 0.15s;
  --sa-duration-slow: 0.7s;

  /* Layout */
  --sa-container-max: 80rem; /* 1280px, confirmed via Figma dev-mode */
  --sa-container-pad: var(--sa-space-12); /* 48px, confirmed via Figma dev-mode (header + footer both use this) */
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--sa-font-family);
  font-weight: var(--sa-fw-normal);
  font-size: var(--sa-text-base);
  line-height: var(--sa-leading-base);
  color: var(--sa-foreground);
  background: var(--sa-background);
  overflow-x: hidden; /* safety net: content should never clip off-screen, it should wrap/collapse instead */
}

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

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--sa-fw-bold); line-height: var(--sa-leading-tight); }

/* Visible keyboard focus (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--sa-ring);
  outline-offset: 2px;
}

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

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.sa-container {
  max-width: var(--sa-container-max);
  margin-inline: auto;
  padding-inline: var(--sa-container-pad);
}

.sa-section        { padding-block: var(--sa-space-16); }
.sa-section--sm     { padding-block: var(--sa-space-10); }
.sa-section--bg-navy    { background: var(--sa-navy); color: var(--sa-white); }
.sa-section--bg-muted   { background: var(--sa-muted); }
.sa-section--bg-white   { background: var(--sa-white); }
.sa-section--bg-gradient-blue { background: var(--sa-gradient-diagonal); color: var(--sa-white); }

/* =========================================================
   BUTTON (confirmed from Figma dev-mode inspect)
   ========================================================= */
.sa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sa-space-3);
  border-radius: var(--sa-radius);
  padding-inline: var(--sa-space-6);
  padding-block: var(--sa-space-3);
  font-size: var(--sa-text-sm);
  font-weight: var(--sa-fw-semibold);
  line-height: var(--sa-leading-tight);
  border: none;
  cursor: pointer;
  box-shadow: var(--sa-shadow-lg);
  transition: all var(--sa-duration-fast) var(--sa-ease);
}
.sa-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.sa-btn--accent  { background: var(--sa-accent); color: var(--sa-accent-fg); }
.sa-btn--primary { background: var(--sa-primary); color: var(--sa-primary-fg); }
.sa-btn--outline { background: transparent; color: var(--sa-primary); border: 1px solid var(--sa-border); box-shadow: none; }
.sa-btn--secondary { background: var(--sa-secondary); color: var(--sa-secondary-fg); }

/* =========================================================
   CARD (base, extended per-module)
   ========================================================= */
.sa-card {
  background: var(--sa-card-bg);
  border-radius: var(--sa-radius-2xl);
  box-shadow: var(--sa-shadow-md);
  padding: var(--sa-space-8);
}

/* Screen-reader only utility */
.sa-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}