/* ===========================
File: static/css/site.css
Path: static/css/site.css
=========================== */

/* =========================================================
   1) DESIGN TOKENS
   ========================================================= */
:root{
  --brand-50:#eff6ff;--brand-100:#dbeafe;--brand-200:#bfdbfe;--brand-300:#93c5fd;
  --brand-400:#60a5fa;--brand-500:#3b82f6;--brand-600:#2563eb;--brand-700:#1d4ed8;--brand-800:#1e40af;--brand-900:#1e3a8a;

  --amber-500:#f59e0b; /* legacy */

  /* Section spacing */
  --section-gap: clamp(32px, 5vw, 64px);

  /* Light theme base */
  --bg:#ffffff; --surface:#f6f7fb; --elevated:#ffffff;
  --text:#0f172a; --muted:#475569; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.08);

  --nav-bg:linear-gradient(135deg, var(--brand-700), var(--brand-600));
  --footer-bg:linear-gradient(135deg, var(--brand-900), #0b1220);

  --radius-lg:16px; --radius-xl:22px; --radius-full:9999px; --container:1200px;

  --icon-size:1.25rem; --icon-box:56px; --icon-radius:14px;

  --primary:var(--brand-600); --secondary:var(--brand-700); --accent:var(--brand-400); --gold:#ffd166; --accent-rgb:96,165,250;

  /* Navbar active pill */
  --nav-active-bg: rgba(255,255,255,.18);
  --nav-active-underline: rgba(255,255,255,.9);
}

/* =========================================================
   2) BASE / GLOBAL
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6
}
.container{max-width:var(--container)}
img{max-width:100%;height:auto;display:block}

h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(2.2rem,3.5vw+1rem,3.5rem);line-height:1.1}
h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.6rem,2.2vw+.6rem,2.4rem)}
h3{font-weight:700;font-size:clamp(1.2rem,1.2vw+.7rem,1.5rem)}

p,li,a,button,input,textarea{font-size:clamp(1rem,.28vw+.9rem,1.125rem)}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--primary);color:#fff}

.section{padding:clamp(2rem,6vw,6rem) 0}
.muted{color:var(--muted)}
.shadow-soft{box-shadow:var(--shadow)}
.rounded-lg{border-radius:var(--radius-lg)} .rounded-xl{border-radius:var(--radius-xl)}
.text-white-50{color:rgba(255,255,255,.75)!important}
.bg-light{background:var(--surface)!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* =========================================================
   3) NAVBAR
   ========================================================= */
.navbar{
  position:sticky;top:0;z-index:1040;
  background:var(--nav-bg)!important;
  backdrop-filter:saturate(1.2) blur(8px);
  box-shadow:var(--shadow)
}
.navbar-brand{color:#fff!important;font-weight:800;letter-spacing:.2px}
.navbar .navbar-nav { gap: .35rem; } /* chip spacing */
.nav-link{
  color:#e5e7eb!important;
  font-weight:600; opacity:.95;
  border-radius:999px;
  position:relative;
  padding:.45rem .9rem;
  display:inline-flex;
  align-items:center;
  width:auto; max-width:100%;
}
.nav-link:hover{color:#fff!important;text-shadow:0 2px 16px rgba(255,255,255,.25)}
.nav-link.active,
.nav-link[aria-current="page"]{
  color:#fff!important;
  background:var(--nav-active-bg);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after{content:none!important}
.navbar-toggler{border-color:rgba(255,255,255,.35)}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' d='M5 8h22M5 16h22M5 24h22'/%3E%3C/svg%3E")
}
#darkModeToggle{
  inline-size:44px; block-size:36px; padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff
}
#themeIcon{
  inline-size:1.125rem; block-size:1.125rem;
  display:inline-grid; place-items:center;
}

/* =========================================================
   4) BUTTONS & FORMS
   ========================================================= */
.btn{font-weight:700}
.btn-primary{
  --bs-btn-bg:var(--primary);
  --bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--accent);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-color:#fff;
  border-radius:var(--radius-full);
  padding:.9rem 1.6rem;
  box-shadow:0 8px 20px rgba(37,99,235,.25)
}
.btn-light{
  border-radius:var(--radius-full);
  padding:.85rem 1.5rem;font-weight:700
}
.btn-warning{border-radius:var(--radius-full)}
.form-control,.form-select{
  border-radius:12px;border:1px solid var(--border);
  background:var(--elevated);color:var(--text)
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .25rem rgba(96,165,250,.25)
}

/* =========================================================
   5) CARDS / ALERTS / BADGES / TABLES / ICONS
   ========================================================= */
.card{
  background:var(--elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow)
}
.alert{
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  box-shadow:var(--shadow)
}
.badge{border-radius:var(--radius-full);font-weight:700}

.table thead th{
  background:var(--primary);color:#fff;
  text-transform:uppercase;letter-spacing:.4px;font-weight:700;border:none
}
.table tbody tr{transition:background .18s ease}
.table tbody tr:hover{background:rgba(96,165,250,.1)}

i.fa, i.fas, i.far, i.fal, i.fab, i.fa-solid, i.fa-regular, i.fa-brands{
  font-size:var(--icon-size);line-height:1
}
.icon-sq{
  width:var(--icon-box);height:var(--icon-box);border-radius:var(--icon-radius);
  display:flex;align-items:center;justify-content:center;
  background:rgba(37,99,235,.12);color:var(--primary)
}

/* =========================================================
   6) FOOTER
   ========================================================= */
footer{
  background:var(--footer-bg);color:#e8eefc;
  padding:64px 0 40px;margin-top:80px;position:relative;overflow:hidden
}
footer::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(800px 200px at 50% -20%, rgba(255,255,255,.1), transparent 60%);
  pointer-events:none
}
footer .social-icons a{
  color:#e8eefc;opacity:.8;margin:0 10px;
  transition:opacity .15s ease, transform .15s ease
}
footer .social-icons a:hover{opacity:1;transform:translateY(-2px)}

/* =========================================================
   7) HOME: HERO & ABOUT
   ========================================================= */
.hero-welcome{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
  color:#fff;
  padding:10rem 0 14rem;
  margin-top:0;
  margin-bottom: var(--section-gap);
  position:relative;z-index:2
}
.about-preview{
  background: linear-gradient(180deg, var(--elevated), var(--surface));
  border-radius:30px;overflow:hidden;box-shadow:var(--shadow)
}

/* 7.1) HERO BANNER (single image, responsive, no crop) */
.hero-banner{ padding: clamp(12px, 4vw, 48px) 0; }
.hero-banner .hero-banner-img,
.hero-banner > img{
  display:block;
  width:min(96vw, 1120px);
  height:auto;
  margin:0 auto;
  border-radius:24px;
  box-shadow:var(--shadow)
}
@media (max-width: 576px){
  .hero-banner{ padding:0; background:transparent; }
  .hero-banner .hero-banner-img,
  .hero-banner > img{ width:100vw;border-radius:0 }
}
@media (min-width: 1600px){
  .hero-banner .hero-banner-img,
  .hero-banner > img{ width:900px }
}

/* =========================================================
   8) HOME: ACHIEVEMENTS (UNIFORM WIDTH/HEIGHT)
   ========================================================= */
.achievements{
  background: linear-gradient(135deg, rgba(29,78,216,.06), rgba(29,78,216,0));
  color: var(--text);
  padding: clamp(56px, 6.5vw, 110px) 0;
  margin-top: var(--section-gap);
  margin-bottom: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.achievements .container{ max-width: 1100px; }
.achievements h2{ margin-bottom: clamp(18px, 2.2vw, 36px); }

/* Use CSS Grid so every column is equal width */
.achievements .row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 per row on phones */
  gap: clamp(12px, 3.5vw, 24px);
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 768px){
  .achievements .row{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 per row from md and up */
  }
}

/* Ensure Bootstrap column wrappers cooperate with our Grid */
.achievements .row > .col,
.achievements .row > [class^="col-"],
.achievements .row > [class*=" col-"]{
  width: 100%;
  min-width: 0; /* allow shrinking so all columns remain equal width */
}

/* Make the card fill its grid cell completely */
.achievements .row > .col > .achievement-item,
.achievements .row > [class^="col-"] > .achievement-item,
.achievements .row > [class*=" col-"] > .achievement-item{
  width: 100%;
  height: 100%;
}

.achievement-item{
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  text-align:center;
}
.achievement-item:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2,6,23,.12); }
.achievement-item h3{
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800; margin-bottom: 6px;
  color: var(--secondary); text-shadow: none;
}
.achievement-item p{
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  font-weight: 600; color: var(--muted); margin: 0; letter-spacing: .2px;
}

/* =========================================================
   9) HOME: CONTACT CTA
   ========================================================= */
.contact-cta{
  background:linear-gradient(135deg, var(--primary), #0D47A1);
  clip-path:polygon(0 15%,100% 0,100% 85%,0 100%);
  padding:10rem 0 10rem;
  margin-top: var(--section-gap);
  position:relative;z-index:1;color:#fff
}
.home-page .email-plain{color:inherit}

/* =========================================================
   10) ABOUT PAGE BLOCKS
   ========================================================= */
.hero{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);color:#fff
}
.section-title{position:relative;display:inline-block;margin-bottom:40px}
.section-title::after{
  content:'';position:absolute;bottom:-10px;left:50%;
  transform:translateX(-50%);width:60px;height:4px;background:var(--accent);border-radius:2px
}
.value-item{transition:transform .2s ease}
.value-item:hover{transform:scale(1.06)}
.team-card:hover img{transform:scale(1.04);transition:transform .3s ease}

/* --- Our Core Values (KEEPING SAME STYLES) --- */
.bg-gradient-warning{
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500)) !important;
  color:#fff!important;
}
.bg-gradient-warning .value-item i,
.bg-gradient-warning .value-item h4,
.bg-gradient-warning .value-item p{ color:#fff!important; }
.bg-gradient-warning .value-item p{ opacity:.95 }

/* =========================================================
   11) SERVICES
   ========================================================= */
.service-card{transition:box-shadow .2s ease}
.service-card:hover{box-shadow:0 18px 40px rgba(2,6,23,.12)}
.why-item{transition:transform .2s ease}
.why-item:hover{transform:scale(1.06)}

/* =========================================================
   12) PRIVACY
   ========================================================= */
.privacy-hero{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);color:#fff
}
.privacy-card{border:none;transition:box-shadow .2s ease}
.privacy-card:hover{box-shadow:0 15px 30px rgba(0,0,0,0.12)}

/* =========================================================
   13) RESPONSIVE MISC
   ========================================================= */
@media (max-width: 768px){
  .navbar-brand{font-size:1.4rem}
  .nav-link{font-size:.95rem}
  .hero-welcome{padding:8rem 0 12rem}
  .achievements{padding:clamp(48px, 10vw, 72px) 0}
}

/* =========================================================
   14) DARK MODE (SEPARATED)
   ========================================================= */
body.dark-mode{
  --bg:#0b1220; --surface:#0f172a; --elevated:#111827;
  --text:#e6eaf5; --muted:#b7c0d6; --border:#1f2a44; --shadow:0 12px 32px rgba(0,0,0,.5);
  --nav-bg:linear-gradient(135deg, #0f1b3d, #0b2a72);
  --nav-active-bg: rgba(255,255,255,.15);
  --nav-active-underline: #cde1ff;
}
body.dark-mode .text-muted{color:var(--muted)!important}
body.dark-mode .form-control, body.dark-mode .form-select{ background:#0f1b2f;color:var(--text);border-color:#244064 }
.dark-mode .table thead th{background:var(--secondary)}
.dark-mode .table tbody tr:hover{background:rgba(255,255,255,.06)}
.dark-mode .achievements{ background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(2,6,23,0)); }
.dark-mode .achievement-item{ background:#0f172a; border-color:#1f2a44; }
.dark-mode .achievement-item h3{ color:#93c5fd; }
.dark-mode .achievement-item p{ color:#b7c0d6; }
.dark-mode .home-page h3{color:#fff}
.dark-mode .home-page .why-item li{color:#fff}
.dark-mode .home-page .email-plain{color:#fff!important}

/* About: dark-mode readable */
.dark-mode .bg-light{
  background: linear-gradient(180deg, #0f172a, #0b1220) !important;
}
.dark-mode .bg-light .card{
  background:#101b2e;border-color:#1f2a44;color:var(--text);
}
.dark-mode .bg-light h4,
.dark-mode .bg-light .fw-bold{
  color:#eef4ff !important;
}
.dark-mode .bg-light p,
.dark-mode .bg-light .text-muted{
  color:#cdd7ee !important;
}

/* Services dark-mode tweaks */
.dark-mode .service-card h3{ color:#e6eaf5; }
.dark-mode .service-card li{ color:#e6eaf5; }
.dark-mode .service-card .icon-sq{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#e6eaf5;
}

/* Privacy dark-mode tweaks */
.dark-mode .privacy-card span,
.dark-mode .privacy-card li{ color:#e6eaf5; }
.dark-mode .privacy-card h2{ color:#e6eaf5; }
.dark-mode .privacy-card div{ color:#e6eaf5; }
.dark-mode .privacy-card p{ color:#cdd7ee; }
.dark-mode .privacy-card .icon-sq{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#e6eaf5;
}

.dark-mode .card-body h5 {
  color: #eef4ff;
}