/* /public/assets/theme.css */

/* -----------------------------
   ShasTech-IT Theme (Brand)
   Primary: #1b2680
   Accent : #02a1e5
------------------------------ */

:root{
  --brand-900:#1b2680;   /* primary */
  --brand-950:#16206b;   /* primary hover */
  --accent-500:#02a1e5;  /* accent */
  --accent-600:#028fd0;  /* accent hover */

  --bg:#f8fafc;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;

  --border:#e2e8f0;
  --soft-blue:#e9f5ff;
  --soft-border:#d6e8f7;

  --radius: 14px;
}

/* Base */
body{
  background: var(--bg);
  color: var(--text);
}

a{
  color: var(--brand-900);
}
a:hover{
  color: var(--accent-600);
}

/* Navbar */
.navbar.bg-dark{
  background: var(--brand-900) !important;
}
.navbar .nav-link{
  color: rgba(255,255,255,.85) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: #fff !important;
}
.navbar .nav-link.active{
  color: #fff !important;
  position: relative;
}
.navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:.5rem;
  right:.5rem;
  bottom:.25rem;
  height:2px;
  background: var(--accent-500);
  border-radius: 99px;
}

/* Hero: modern gradient */
.hero-gradient{
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--accent-500) 100%);
}

/* Buttons */
.btn-primary{
  background-color: var(--brand-900) !important;
  border-color: var(--brand-900) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--brand-950) !important;
  border-color: var(--brand-950) !important;
}

.btn-outline-primary{
  color: var(--brand-900) !important;
  border-color: var(--brand-900) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: var(--brand-900) !important;
  border-color: var(--brand-900) !important;
  color: #fff !important;
}

/* Accent button (optional class) */
.btn-accent{
  background-color: var(--accent-500) !important;
  border-color: var(--accent-500) !important;
  color: #fff !important;
}
.btn-accent:hover,
.btn-accent:focus{
  background-color: var(--accent-600) !important;
  border-color: var(--accent-600) !important;
  color: #fff !important;
}

/* Cards: soft modern */
.card{
  border-color: var(--border);
  border-radius: var(--radius);
}
.card .card-footer{
  border-color: var(--border) !important;
}
.rounded-4{
  border-radius: var(--radius) !important;
}

/* Pills / badges */
.badge.text-bg-light{
  background: var(--soft-blue) !important;
  border: 1px solid var(--soft-border) !important;
  color: var(--brand-900) !important;
}
.badge.text-bg-warning{
  background:#fff7ed !important;
  color:#9a3412 !important;
  border:1px solid #fed7aa !important;
}
.badge.text-bg-success{
  background:#ecfdf5 !important;
  color:#065f46 !important;
  border:1px solid #a7f3d0 !important;
}

/* Soft sections */
.bg-light{
  background: linear-gradient(180deg, var(--bg) 0%, var(--soft-blue) 100%) !important;
}

/* Forms */
.form-control:focus,
.form-select:focus{
  border-color: var(--accent-500);
  box-shadow: 0 0 0 .2rem rgba(2,161,229,.15);
}

/* Footer */
footer.bg-light{
  background: #ffffff !important;
}


/* ---------------------------------
   Final Polish Pack (append below)
---------------------------------- */

/* Typography */
h1,h2,h3,h4,h5,h6{
  letter-spacing: -0.02em;
}
.lead{
  color: rgba(255,255,255,.85);
}

/* Better content readability (your .content blocks) */
.content{
  line-height: 1.75;
  color: var(--text);
}
.content p{ margin-bottom: 1rem; }
.content h2,.content h3{
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}
.content a{
  color: var(--accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content a:hover{
  color: var(--brand-900);
}

/* Modern link style (outside .content) */
a.text-decoration-none:hover .fw-semibold,
a.text-decoration-none:hover h5{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards: hover lift + subtle shadow */
.card{
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.text-decoration-none .card:hover,
.card.hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
  border-color: rgba(2,161,229,.35);
}

/* Image smoothness */
.card img,
.gallery-main img,
.carousel-inner img{
  transition: transform .25s ease;
}
a.text-decoration-none .card:hover img{
  transform: scale(1.02);
}

/* Buttons: softer radius + consistent focus */
.btn{
  border-radius: 12px;
}
.btn:focus{
  box-shadow: 0 0 0 .2rem rgba(2,161,229,.18) !important;
}

/* Pill link polish (used in product links section) */
.pill-link{
  background: #fff;
}
.pill-link:hover{
  background: var(--soft-blue);
}

/* Section spacing helpers */
section.py-5{
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

/* Better subtle dividers */
hr{
  border-color: var(--border);
  opacity: 1;
}

/* Footer nicer */
footer{
  border-top: 1px solid var(--border);
}
footer .text-muted{
  color: var(--muted) !important;
}

/* Active navbar underline (already) + spacing tweaks */
.navbar .navbar-brand{
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Optional: make “Featured” badge pop with accent */
.badge.text-bg-success{
  background: rgba(2,161,229,.12) !important;
  color: var(--brand-900) !important;
  border: 1px solid rgba(2,161,229,.35) !important;
}

/* Nice “soft panels” */
.soft-panel{
  background: var(--soft-blue);
  border: 1px solid var(--soft-border);
  border-radius: var(--radius);
}

/* Smooth anchors */
html{
  scroll-behavior: smooth;
}


/* Soft section background */
.bg-soft-primary{
  background:
    linear-gradient(
      180deg,
      rgba(27,38,128,0.04),
      rgba(2,161,229,0.03)
    );
}

/* Card hover polish */
.hover-lift{
  transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
}

/* --- Mobile tap comfort --- */
@media (max-width: 991.98px){
  .navbar .nav-link{
    padding: .85rem 1rem;
    border-radius: .75rem;
  }
  .navbar .nav-link:active{
    transform: scale(.99);
  }
  .navbar-collapse{
    padding: .75rem 0;
  }
  .navbar-nav{
    gap: .35rem !important;
  }
}

/* --- Dropdown feel (if you use dropdown later) --- */
.dropdown-menu{
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.10);
  padding: .5rem;
}
.dropdown-item{
  border-radius: .75rem;
  padding: .7rem .85rem;
}

/* --- Consistent premium cards --- */
.hover-lift{
  transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08);
}

/* --- Buttons micro motion --- */
.btn{
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active{
  transform: translateY(1px);
}

/* --- Mobile sticky CTA bar --- */
.mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  padding: .65rem .75rem;
  display: flex;
  gap: .5rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.08);
}
body{
  /* prevent content hidden under mobile CTA */
  padding-bottom: 78px;
}
@media (min-width: 992px){
  body{ padding-bottom: 0; }
}