/* ============================================================
   ALC Logistics — Light Theme Override
   Keeps olive/army-green brand palette on a clean white base.
   ============================================================ */

/* ── Core CSS variables (light mode) ── */
:root {
  --primary:            #4B5320;   /* army olive */
  --primary-foreground: #ffffff;
  --accent:             #6B7A2A;   /* lighter olive hover */
  --accent-foreground:  #ffffff;

  --background:         #ffffff;
  --foreground:         #1a1a1a;   /* near-black text */

  --card:               #ffffff;
  --card-foreground:    #1a1a1a;

  --border:             #e2e0d8;
  --input:              #f5f4f0;
  --ring:               #4B5320;

  --muted:              #6b7280;   /* medium grey */
  --muted-foreground:   #4b5563;

  --sand:               #f5f3ee;   /* warm off-white sections */
  --olive-muted:        #3d4419;
  --olive-light:        #6b7a2a;
  --dark-surface:       #f4efe6;   /* light hero/section background */
  --dark-card:          #ffffff;

  --radius: 0.75rem;
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ── Body & base ── */
body, main, .bg-background {
  background-color: var(--background) !important;
}
body {
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Animation reveal helpers ── */
@keyframes alc-text-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.alc-anim,
[data-animated] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .72s cubic-bezier(.16,1,.3,1),
              transform .72s cubic-bezier(.16,1,.3,1);
}

.alc-anim.alc-in,
[data-animated].visible {
  opacity: 1;
  transform: none;
}

a, button {
  transition: color .2s ease, background-color .2s ease, transform .3s ease;
}

button:hover, a:hover {
  transform: translateY(-1px);
}

/* ── Sections that use bg-foreground (dark panels on About/Clients) ──
   We remap them to a very light warm grey so they stay readable. */
.bg-foreground {
  background-color: #f8f7f4 !important;
}
.bg-foreground .text-primary-foreground,
.bg-foreground h1, .bg-foreground h2, .bg-foreground h3 {
  color: #1a1a1a !important;
}
.bg-foreground .text-muted {
  color: #6b7280 !important;
}
/* Cards inside bg-foreground sections */
.bg-foreground .bg-background\/5 {
  background-color: #ffffff !important;
  border-color: #e2e0d8 !important;
}
.bg-foreground .border-primary\/20 {
  border-color: rgba(75,83,32,.2) !important;
}

/* ── bg-dark-surface becomes a soft light section background ── */
.bg-dark-surface {
  background-color: var(--dark-surface) !important;
}
.bg-dark-surface .text-white   { color: #ffffff !important; }
.bg-dark-surface .text-white\/80 { color: rgba(255,255,255,.8) !important; }
.bg-dark-surface .text-white\/75 { color: rgba(255,255,255,.75) !important; }
.bg-dark-surface .text-white\/70 { color: rgba(255,255,255,.7) !important; }
.bg-dark-surface .text-white\/60 { color: rgba(255,255,255,.6) !important; }

/* ── Hero animation wrapper ── */
.alc-hero {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.alc-hero.alc-in {
  opacity: 1;
  transform: none;
}

/* ── bg-sand ── */
.bg-sand { background-color: var(--sand) !important; }

/* ── bg-card ── */
.bg-card {
  background-color: #ffffff !important;
  color: #1a1a1a !important;
}

/* ── bg-input ── */
.bg-input { background-color: #f5f4f0 !important; }

/* ── bg-olive-muted (B-BBEE banner) ── */
.bg-olive-muted { background-color: #3d4419 !important; }

/* ── Text helpers ── */
.text-foreground   { color: #1a1a1a !important; }
.text-muted        { color: #6b7280 !important; }
.text-muted-foreground { color: #4b5563 !important; }
.text-primary      { color: var(--primary) !important; }
.text-primary-foreground { color: #ffffff !important; }

/* ── Hero badge glow for better legibility on dark hero backgrounds ── */
.alc-hero .text-primary,
.alc-hero .inline-flex .text-primary {
  text-shadow: 0 0 8px rgba(255, 255, 255, .18),
               0 0 16px rgba(75, 83, 32, .45),
               0 0 28px rgba(107, 122, 42, .32);
}

/* ── Force high-contrast hero text (headings, paragraphs, badges) ── */
.alc-hero h1,
.alc-hero h2,
.alc-hero h3,
.alc-hero p,
.alc-hero .inline-flex,
.alc-hero span {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.65),
               0 1px 6px rgba(0,0,0,.45);
}

/* ── Selected typography glow effect */
@keyframes alc-glow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, .35),
                 0 0 48px rgba(107, 122, 42, .25),
                 0 0 82px rgba(75, 83, 32, .18);
  }
  50% {
    text-shadow: 0 0 32px rgba(255, 255, 255, .55),
                 0 0 64px rgba(107, 122, 42, .32),
                 0 0 110px rgba(75, 83, 32, .22);
  }
}
.alc-hero h1,
.alc-hero h2,
.text-glow,
.text-glow span,
.text-glow strong,
.text-primary-glow,
.text-primary-glow span,
.text-primary-glow strong {
  color: #ffffff !important;
  text-shadow: 0 0 22px rgba(255, 255, 255, .4),
               0 0 50px rgba(107, 122, 42, .28),
               0 0 90px rgba(75, 83, 32, .20) !important;
  transition: text-shadow .4s ease, color .3s ease;
}
.alc-hero h1,
.alc-hero h2,
.text-primary-glow {
  animation: alc-glow 4.8s ease-in-out infinite !important;
}

/* ── Add subtle staggered animation delays to headings and paragraphs */
h1, h2, h3, h4, h5, h6 { animation-delay: .14s; }
p, li, blockquote, a, button { animation-delay: .18s; }

/* ── Typographic motion only when elements are visible */
[data-animated] {
  opacity: 0;
  transform: translateY(14px);
  animation: alc-text-reveal .85s cubic-bezier(.16,1,.3,1) forwards;
}
[data-animated].visible {
  opacity: 1;
  transform: none;
}

/* ── Border helpers ── */
.border-border { border-color: var(--border) !important; }

/* ── Cards on light bg ── */
.bg-card.border {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Milestone / timeline cards ── */
.bg-foreground .bg-foreground {
  background-color: #ffffff !important;
  border-color: #e2e0d8 !important;
}
.bg-foreground .text-muted {
  color: #6b7280 !important;
}

/* ── About page leadership cards ── */
.bg-foreground .bg-background\/5 {
  background-color: #f8f7f4 !important;
}

/* ── Services page dark CTA strip ── */
.bg-dark-surface .text-white   { color: #ffffff !important; }
.bg-dark-surface .text-white\/80 { color: rgba(255,255,255,.8) !important; }
.bg-dark-surface .text-white\/60 { color: rgba(255,255,255,.6) !important; }

/* ── GPS icon / industrial marker styling & animation ── */
.gps-icon {
  width: 56px;
  height: 56px;
  display: inline-block;
  border-radius: 8px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.06));
  box-shadow: 0 6px 18px rgba(33,33,33,.12), inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .36s cubic-bezier(.16,1,.3,1), box-shadow .36s ease;
}
.gps-icon:hover { transform: translateY(-6px) rotate(-3deg); box-shadow: 0 14px 32px rgba(33,33,33,.18); }

@keyframes gps-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes gps-pulse {
  0% { box-shadow: 0 6px 18px rgba(75,83,32,.08); }
  50% { box-shadow: 0 10px 28px rgba(75,83,32,.14); }
  100% { box-shadow: 0 6px 18px rgba(75,83,32,.08); }
}
.gps-icon.alc-float { animation: gps-float 3.6s ease-in-out infinite; }
.gps-icon.alc-pulse { animation: gps-pulse 4s ease-in-out infinite; }

@media (max-width: 640px) {
  .gps-icon { width:48px; height:48px; padding:4px; }
}

/* small footer-sized gps icon for static build */
.gps-icon--sm { width:20px; height:20px; display:inline-block; vertical-align:middle; }
.gps-icon--sm path { stroke-width:1px; }

/* force visibility for debugging (static) */
.gps-icon, .gps-icon--sm { opacity:1 !important; display:inline-block !important; }

/* ── Primary bg sections (CTA banners) stay olive ── */
.bg-primary { background-color: var(--primary) !important; }
.bg-primary .text-primary-foreground { color: #ffffff !important; }
.bg-primary .text-primary-foreground\/80 { color: rgba(255,255,255,.8) !important; }

/* ── Buttons ── */
.bg-primary.text-primary-foreground,
a.bg-primary {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}

/* ── Form inputs light ── */
input, textarea, select {
  background-color: #f5f4f0;
  color: #1a1a1a;
  border-color: #d1cfc7;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(75,83,32,.12);
}

/* ── Modal ── */
.alc-modal-panel {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e2e0d8;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.alc-form-row input,
.alc-form-row textarea {
  background: #f5f4f0 !important;
  color: #1a1a1a !important;
  border-color: #d1cfc7 !important;
}

/* ── Footer ── */
footer.bg-foreground {
  background-color: #1a1a1a !important;
}
footer.bg-foreground .text-primary-foreground { color: #ffffff !important; }
footer.bg-foreground .text-muted { color: #9ca3af !important; }
footer.bg-foreground .text-muted\/70 { color: rgba(156,163,175,.7) !important; }
footer.bg-foreground .text-muted\/50 { color: rgba(156,163,175,.5) !important; }
footer.bg-foreground .border-white\/10 { border-color: rgba(255,255,255,.1) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f4f0; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Footer light override ── */
footer {
  background: #f8f7f4 !important;
  color: #1a1a1a !important;
}

/* ── Page load fade-in ── */
@keyframes alc-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
body > * { animation: alc-page-in .5s cubic-bezier(.16,1,.3,1) both; }

/* ── Scroll-fly (legacy support) ── */
.scroll-fly {
  opacity: 0;
  transform: translateY(32px);
}
.scroll-fly-in {
  animation: alc-fly-in .72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes alc-fly-in {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}

/* ── Hover lift on cards ── */
main .bg-card,
main .rounded-2xl,
main .svc-card,
main .why-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s cubic-bezier(.16,1,.3,1),
              border-color .3s ease !important;
}
main .bg-card:hover,
main .svc-card:hover,
main .why-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(75,83,32,.12) !important;
}

/* ── Link underline animation ── */
main a:not(.shimmer-btn):not([class*="rounded-full"]):not([class*="bg-primary"]) {
  position: relative;
}
main a:not(.shimmer-btn):not([class*="rounded-full"]):not([class*="bg-primary"])::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--primary);
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
main a:not(.shimmer-btn):not([class*="rounded-full"]):not([class*="bg-primary"]):hover::after {
  width: 100%;
}

/* ── Shimmer button ── */
.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  transform: translateX(-100%) skewX(12deg);
  transition: transform .5s ease;
}
.shimmer-btn:hover::before { transform: translateX(100%) skewX(12deg); }

/* ── Gradient text shimmer ── */
@keyframes alc-shimmer-text {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.alc-shimmer-text {
  background: linear-gradient(90deg,#4B5320 0%,#a3b54a 40%,#4B5320 60%,#6B7A2A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: alc-shimmer-text 4s linear infinite;
}

/* ── Float animation ── */
@keyframes alc-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.alc-float { animation: alc-float 3.5s ease-in-out infinite; }

/* ── Scroll progress bar ── */
#alc-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4B5320, #a3b54a);
  z-index: 9999;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

/* ── Shimmer button ── */
.shimmer-btn { position: relative; overflow: hidden; }
.shimmer-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.18);
  transform: translateX(-100%) skewX(12deg);
  transition: transform .5s ease;
}
.shimmer-btn:hover::before { transform: translateX(100%) skewX(12deg); }

/* ── Industrial border ── */
.industrial-border { border-left: 4px solid var(--primary); }

/* ── Dot pattern ── */
.dot-pattern {
  background-image: radial-gradient(circle, rgba(75,83,32,.15) 1px, transparent 0);
  background-size: 20px 20px;
}

/* ── Noise overlay ── */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Reveal animations ── */
.reveal-hidden {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-hidden.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Font weights (Tailwind-style) ── */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* ── WhatsApp float (legacy class support) ── */
.alc-whatsapp-float { display: none; } /* replaced by JS-injected button */

/* Logo size overrides — increase header/footer/hero logos */
header#alc-header img.visible,
header#alc-header a img,
.header-logo, .site-logo,
header img {
  height: 64px !important;
  width: auto !important;
  max-height: 64px !important;
}

footer img.visible,
footer .alc-footer-col img {
  height: 64px !important;
  width: auto !important;
  max-height: 64px !important;
}

/* Hide hero logo in slider */
.alc-hero .object-contain.drop-shadow-lg {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header#alc-header img.visible,
  footer img.visible {
    height: 56px !important;
    max-height: 56px !important;
  }
}