/* ─────────────────────────  styles/index.css  ────────────────────────
   Brand utility classes + page-specific styles.
   Tokens (color/space/type) come from styles/tokens.css.
   -------------------------------------------------------------------- */

html{scroll-behavior:smooth}
body{
  line-height:1.6;
}

/* ---------- Brand Buttons ----------------------------------------- */
.btn-gold{
  background:var(--ek-gold);
  color:#fff!important;
  border:none;
  transition:background .25s;
}
.btn-gold:hover,
.btn-gold:focus{background:var(--ek-gold-dark);color:#fff!important}

.btn-outline-gold{
  color:var(--ek-gold);
  border:2px solid var(--ek-gold);
  transition:all .25s;
}
.btn-outline-gold:hover,
.btn-outline-gold:focus{background:var(--ek-gold);color:#fff}

/* ---------- Navbar ------------------------------------------------- */
.bg-ek-green{background:var(--ek-green)!important}
.navbar-dark .nav-link{color:#fff}
.navbar-dark .nav-link:hover{color:var(--ek-gold)}

/* ---------- Hero --------------------------------------------------- */
.ek-hero{
  min-height:92vh;
  padding-top:6.5rem;                   /* offset fixed nav */
  padding-bottom:4rem;
  background:linear-gradient(150deg,var(--ek-green-dark) 0%,var(--ek-green) 70%);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.ek-logo{width:110px}
@media(min-width:992px){.ek-logo{width:140px}}
@media(min-width:768px){.ek-hero h1{font-size:2.8rem}}

/* ---------- Feature Icons ----------------------------------------- */
.ek-icon{
  width:70px;height:70px;border-radius:50%;
  background:var(--ek-green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.75rem;margin:0 auto 1rem;
}

/* ---------- Sections & Cards -------------------------------------- */
.module-card{background:#fff;border-radius:8px}
.ek-gradient{
  background:linear-gradient(135deg,var(--ek-green) 0%,var(--ek-green-dark) 100%)
}
.cta-banner{
  background:var(--ek-green);
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:7px 7px;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.bg-ek-green-dark{background:var(--ek-green-dark)}
footer a{text-decoration:none}
footer a:hover{color:var(--ek-gold)}

/* ---------- Alerts ------------------------------------------------- */
.alert{border-radius:0;padding:.85rem;text-shadow:none}

/* ---------- Custom Modal ------------------------------------------ */
.ek-modal{
  position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start;
  background:rgba(0,0,0,.55);padding:2rem;overflow-y:auto;z-index:1055;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.ek-modal.show{opacity:1;visibility:visible}
.ek-modal-dialog{
  position:relative;
  background:#fff;border-radius:10px;padding:2rem;width:100%;max-width:480px;
  box-shadow:0 12px 35px rgba(0,0,0,.3);
  animation:slideDown .35s ease-out;
}
@keyframes slideDown{from{transform:translateY(-25px)}to{transform:translateY(0)}}
.ek-close{
  position:absolute;top:1rem;right:1.25rem;border:none;background:transparent;
  font-size:1.4rem;font-weight:bold;color:#666;cursor:pointer;
}
.ek-close:hover{color:#000}

/* ---------- Form tweaks ------------------------------------------- */
.ek-modal .form-label{font-weight:600}
.was-validated .form-control:invalid{border-color:#d9534f}
.form-control:focus{border-color:var(--ek-gold);box-shadow:0 0 0 .15rem rgba(199,164,74,.25)}

/* ---------- Utility classes --------------------------------------- */
.text-gold{color:var(--ek-gold)!important}
.section-pad{padding:4rem 0}

/* ---------- Responsive Tweaks ------------------------------------- */
@media(max-width:575.98px){
  .navbar-brand strong{font-size:1.05rem}
  .ek-hero h1{font-size:1.9rem}
  .ek-hero .lead{font-size:.96rem}
  section{padding-top:3.5rem!important;padding-bottom:3.5rem!important}
}