/* ============================================================
   ARM CITY CONSULTANTS — UI ENHANCEMENT LAYER
   Load this AFTER main.css. It only adds/upgrades — it does not
   remove anything main.css already does.
   <link rel="stylesheet" href="{% static 'css/theme-enhancements.css' %}">
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --navy-950:#001b4c;
  --navy-900:#020c4d;
  --blue-600:#0055bc;
  --blue-500:#00b1ff;
  --gold-500:#f2b705;
  --gold-400:#f5c518;
  --ink-900:#1a2530;
  --ink-700:#2d3748;
  --ink-500:#4a5568;
  --ink-300:#718096;
  --surface-0:#ffffff;
  --surface-1:#f8f9fb;
  --surface-2:#eef2f7;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 4px 14px rgba(0,27,76,.06);
  --shadow-md:0 12px 32px rgba(0,27,76,.10);
  --shadow-lg:0 24px 60px rgba(0,27,76,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. GLOBAL FEEL ---------- */
html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;}

::selection{background:var(--gold-500);color:var(--navy-950);}

/* Nice thin scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--surface-1);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue-600),var(--navy-950));border-radius:10px;}

/* ---------- 3. HEADER — solid navy (matches footer), sticky + shrink-on-scroll ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:var(--navy-950);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 12px 32px rgba(0,0,0,.35);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;transition:padding .3s var(--ease);}
.site-header.scrolled .header-inner{padding:8px 0;}

.brand img{transition:transform .35s var(--ease);}
.brand:hover img{transform:scale(1.04);}

/* Nav links — light text on navy, animated underline + active pill */
.site-nav{display:flex;align-items:center;gap:6px;}
.site-nav a.cta{
  position:relative;
  padding:10px 16px;
  border-radius:999px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.site-nav a.cta::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.site-nav a.cta:hover{color:#fff;}
.site-nav a.cta:hover::after{transform:scaleX(1);}
.site-nav a.cta.active{color:var(--navy-950);background:var(--gold-500);}
.site-nav a.cta.active::after{display:none;}

/* Hamburger — visible against navy */
.menu-toggle{
  border:none;background:rgba(255,255,255,.12);color:#fff;width:44px;height:44px;border-radius:12px;
  font-size:1.3rem;cursor:pointer;transition:background .2s ease, transform .2s ease;
}
.menu-toggle:hover{background:rgba(255,255,255,.2);}
.menu-toggle:active{transform:scale(.92);}

@media (max-width:900px){
  .site-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);
    background:var(--navy-950);flex-direction:column;align-items:stretch;
    padding:90px 20px 20px;gap:4px;
    box-shadow:-20px 0 50px rgba(0,0,0,.35);
    transform:translateX(100%);transition:transform .35s var(--ease);
    z-index:999;
  }
  .site-nav.active, .site-nav.show{transform:translateX(0);}
  .site-nav a.cta{width:100%;padding:14px 16px;}
  .menu-toggle{position:relative;z-index:1001;}
}

/* ---------- 4. BUTTONS ---------- */
.hero-btn, .btn, .btn-primary, .cta-button{
  position:relative;overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-btn::before, .btn::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120px 60px at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.hero-btn:hover::before, .btn:hover::before{opacity:1;}
.hero-btn:active, .btn:active{transform:scale(.97);}

/* ---------- 5. CARDS — consistent lift + shadow choreography ---------- */
.service-card, .solution-item, .inner_solution_content,
.inner_solution_content_blogs, .solution-tile, .mv-card, .profile-card{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover, .mv-card:hover, .profile-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.solution-tile:hover{
  box-shadow:var(--shadow-lg);
}

/* Subtle image zoom inside cards on hover */
.inner_solution_content img, .inner_solution_content_blogs img, .tile-image img{
  transition:transform .6s var(--ease);
}
.solution-item:hover img, .blog-item:hover img, .solution-tile:hover .tile-image img{
  transform:scale(1.06);
}

/* ---------- 6. SECTION RHYTHM ---------- */
section, .site-footer{position:relative;}
.section-title h2, .section-header h2, .blogs-section-header h1{
  position:relative;display:inline-block;
}
.section-title h2::after, .section-header h2::after{
  content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:64px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue-600),var(--gold-500));
}

/* ---------- 7. FOOTER POLISH ---------- */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.85);}
.footer-links a{
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .25s var(--ease), color .25s var(--ease);
}
.footer-links a:hover{transform:translateX(6px);color:var(--gold-500);}
.social-icon{
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.social-icon:hover{transform:translateY(-4px) rotate(6deg);background:var(--gold-500);color:var(--navy-950)!important;}

/* ---------- 7b. FOOTER — 5-column layout (QR | Logo | Contact | Links | QR) ---------- */
.footer-inner-5{
  display:grid;
  grid-template-columns: 0.9fr 1.2fr 1.3fr 1.3fr 0.9fr;
  gap:32px;
  align-items:start;
}

.footer-column.footer-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.footer-column.footer-qr h5{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:14px;
  letter-spacing:.3px;
}

.qr-box{
  background:#fff;
  padding:10px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  display:inline-block;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.qr-box:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-lg);}
.qr-img{
  width:120px;
  height:120px;
  display:block;
  object-fit:contain;
  border-radius:4px;
}

/* Store badges stacked one on top of the other under each QR code */
.store-badges{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  width:100%;
  max-width:170px;
}
.store-badge{
  display:flex;
  align-items:center;
  gap:10px;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  padding:8px 14px;
  text-decoration:none;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.store-badge i{font-size:1.5rem;flex-shrink:0;}
.store-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left;font-weight:600;font-size:.9rem;}
.store-badge span small{font-size:.6rem;font-weight:400;opacity:.8;text-transform:uppercase;letter-spacing:.4px;}
.store-badge:hover{
  transform:translateY(-3px);
  background:var(--gold-500);
  color:var(--navy-950);
  border-color:var(--gold-500);
}
.store-badge:hover i{color:var(--navy-950);}

/* Responsive collapse: 5 -> 3 -> 2 -> 1 columns, QR columns move to bottom row */
@media (max-width:1200px){
  .footer-inner-5{
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-inner-5 .footer-qr{
    grid-column: span 1;
  }
}
@media (max-width:900px){
  .footer-inner-5{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width:600px){
  .footer-inner-5{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .footer-column.footer-qr{margin:0 auto;}
  .store-badges{margin-left:auto;margin-right:auto;}
}

/* ---------- 8. FORM POLISH (contact page) ---------- */
.form-control{
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus{
  border-color:var(--blue-600)!important;
  box-shadow:0 0 0 4px rgba(0,85,188,.15);
  outline:none;
}
.btn[type="submit"]{
  background:linear-gradient(135deg,var(--blue-600),var(--navy-950));
  border:none;color:#fff;font-weight:700;letter-spacing:.2px;
}
.btn[type="submit"]:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}

/* ---------- 9. RESPONSIVE GRID SAFETY NET ---------- */
/* Applies on top of your existing grid rules; only kicks in where main.css
   or inline styles leave gaps (very small / very large screens). */
@media (min-width:1400px){
  .services-grid-3, .solutions-grid-3, .blogs-grid-4{gap:32px;}
}
@media (max-width:420px){
  .hero-title{font-size:1.6rem!important;}
  .services-grid-3, .solutions-grid-3, .blogs-grid-4, .modern-grid{
    grid-template-columns:1fr!important;
  }
  .container{padding-left:16px;padding-right:16px;}
}

/* Fluid typography for section headers (prevents overflow on small phones) */
.section-title h2, .section-header h2, .blogs-section-header h1, .process-title{
  font-size:clamp(1.6rem, 4vw, 2.6rem)!important;
}

/* ---------- 10. SCROLL-REVEAL FALLBACK (progressive enhancement) ---------- */
/* Works together with AOS; if AOS hasn't initialized yet, avoid flash of
   invisible content */
[data-aos]{will-change:transform, opacity;}

/* ---------- 11. LOADING SKELETON (optional, for images) ---------- */
img[loading="lazy"]{background:linear-gradient(90deg,var(--surface-2) 25%, var(--surface-1) 37%, var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
img[loading="lazy"].loaded, img[loading="lazy"][src$=".svg"]{animation:none;background:none;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ---------- 12. ACCESSIBILITY ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:3px solid var(--gold-500);outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}