/* ============================================================
   FILE: kasispan/assets/style.css
   Upload to: public_html/kasispan/assets/style.css
   Purpose: Kasi Span design system — authoritative, trustworthy.
   CSS only. No HTML changes required.
   ============================================================ */

:root{
  --navy:#0F1E48;
  --navy-dark:#081231;
  --navy-mid:#1B2A5E;
  --navy-soft:#EEF1F9;
  --navy-tint:#F6F8FC;

  --green:#3D8B40;
  --green-dark:#2E6B31;
  --green-light:#4CAF50;
  --green-soft:#E8F5E9;
  --green-tint:#F1FAF2;

  --gold:#C9A227;
  --gold-soft:#FBF6E4;

  --bg:#F4F6FA;
  --card:#FFFFFF;
  --ink:#0F1E48;
  --muted:#5B667A;
  --line:#DDE3EC;
  --line-strong:#C9D2E0;

  --danger:#B91C1C;
  --danger-soft:#FEE2E2;
  --warn:#B45309;
  --warn-soft:#FEF3C7;
  --ok:#15803D;
  --ok-soft:#DCFCE7;

  --radius:6px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(15,30,72,.06);
  --shadow:0 2px 8px rgba(15,30,72,.08);
  --shadow-lg:0 12px 32px rgba(15,30,72,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--navy);
}
h1{font-size:2rem}
h2{font-size:1.35rem;letter-spacing:-.01em}
h3{
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;
}
a{color:var(--navy);text-decoration:none;font-weight:600}
a:hover{color:var(--green-dark);text-decoration:underline;text-underline-offset:3px}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy);
  color:#fff;
  padding:.85rem 1.5rem;
  position:sticky;top:0;z-index:40;
  border-bottom:4px solid var(--green);
  box-shadow:0 2px 8px rgba(15,30,72,.15);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}

/* Fake a crest using the brand element */
.topbar .brand{
  display:flex;align-items:center;gap:.9rem;
  text-decoration:none;padding-left:3.2rem;position:relative;
  min-height:42px;
}
.topbar .brand::before{
  content:"KS";
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:6px;
  background:linear-gradient(135deg,var(--green-light) 0%,var(--green-dark) 100%);
  display:grid;place-items:center;
  font-weight:800;font-size:1.05rem;color:#fff;
  letter-spacing:-.03em;
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  font-family:'Montserrat',sans-serif;
}
.topbar .brand:hover{text-decoration:none}

/* The brand wraps two divs: .kasi and .powered */
.topbar .brand > div{
  display:block;
  line-height:1.15;
}
.topbar .brand .kasi{
  font-weight:800;font-size:1.3rem;color:#fff;
  letter-spacing:-.02em;
}
.topbar .brand .kasi span{color:var(--green-light)}
.topbar .brand .powered{
  font-size:.62rem;color:rgba(255,255,255,.65);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin-top:.1rem;
}
.topbar nav{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.topbar nav a{
  font-weight:600;font-size:.85rem;color:rgba(255,255,255,.9);
  padding:.5rem .95rem;border-radius:4px;
  transition:background .15s,color .15s;
  text-decoration:none;
}
.topbar nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

/* Buttons inside the nav need to look right on navy */
.topbar nav .btn-ghost{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.topbar nav .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.topbar nav .btn-primary{
  background:var(--green-light);color:#fff;
  border-color:var(--green-light);
  box-shadow:none;
}
.topbar nav .btn-primary:hover{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- Container ---------- */
.container{max-width:1080px;margin:0 auto;padding:2rem 1.5rem}
.container.narrow{max-width:680px}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(135deg,rgba(15,30,72,.94) 0%,rgba(8,18,49,.97) 100%),
    radial-gradient(circle at 20% 30%,rgba(60,139,64,.4),transparent 50%),
    radial-gradient(circle at 80% 70%,rgba(201,162,39,.25),transparent 50%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 20px);
  color:#fff;
  padding:4rem 1.5rem 4.5rem;
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--green);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.6;pointer-events:none;
}
.hero-inner{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.hero h1{
  color:#fff;font-size:clamp(2rem,4.5vw,2.9rem);
  margin-bottom:.9rem;letter-spacing:-.02em;font-weight:800;
  max-width:22ch;
}
.hero p{
  font-size:1.05rem;opacity:.9;max-width:640px;
  margin-bottom:2rem;line-height:1.65;
  color:rgba(255,255,255,.85);
}
.hero .cta{display:flex;gap:.7rem;flex-wrap:wrap}
.hero .btn-white{
  background:#fff;color:var(--navy);border-color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.hero .btn-white:hover{background:var(--navy-soft);color:var(--navy)}
.hero .btn-ghost{
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,.4);
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-weight:600;font-size:.9rem;
  letter-spacing:.01em;
  padding:.75rem 1.4rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-dark);border-color:var(--navy-dark);color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--navy-soft);border-color:var(--navy)}
.btn-white{background:#fff;color:var(--navy);border-color:#fff}
.btn-white:hover{background:var(--navy-soft);color:var(--navy)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#991b1b;border-color:#991b1b;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:.5rem .95rem;font-size:.82rem}

/* ---------- Cards / Panels ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-top:3px solid var(--navy);
  border-radius:var(--radius-lg);
  padding:2rem;
  box-shadow:var(--shadow-sm);
  margin-bottom:1.4rem;
}
.card h1:first-child,
.card h2:first-child{margin-bottom:.9rem}
.card-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  margin-bottom:1.3rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.card-header h1,.card-header h2{margin:0}

/* ---------- Forms ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-row.single{grid-template-columns:1fr}
.form-row.triple{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{
  font-weight:600;font-size:.78rem;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;
}
.form-group label .req{color:var(--danger);margin-left:2px}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  padding:.7rem .85rem;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--line-strong);
  border-radius:var(--radius);background:#fff;width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--navy);
  border-left-color:var(--green);
  box-shadow:0 0 0 3px rgba(61,139,64,.15);
  background:#fff;
}
.form-group textarea{resize:vertical;min-height:80px}
.form-group .hint{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.form-group .err{font-size:.78rem;color:var(--danger);margin-top:.15rem;display:none}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{
  border-color:var(--danger);border-left-color:var(--danger);background:#FEF7F7;
}
.form-group.has-error .err{display:block}

/* Skills chip picker */
.skills-picker{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:.8rem;border:1px solid var(--line-strong);border-radius:var(--radius);
  background:#FCFDFE;max-height:240px;overflow-y:auto;
}
.skills-picker label{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.8rem;font-weight:500;color:var(--navy);
  padding:.35rem .75rem;border-radius:4px;
  background:var(--navy-soft);cursor:pointer;user-select:none;
  border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
  text-transform:none;letter-spacing:0;
}
.skills-picker label:hover{background:#DCE2F2;border-color:var(--line-strong)}
.skills-picker input{display:none}
.skills-picker label span{
  display:inline-block;padding:.35rem .75rem;border-radius:4px;margin:-.35rem -.75rem;
  background:transparent;transition:background .15s,color .15s;
}
.skills-picker input:checked + span{background:var(--green);color:#fff}

/* ---------- Alerts ---------- */
.alert{
  padding:1rem 1.15rem;border-radius:var(--radius);margin-bottom:1.2rem;
  font-size:.9rem;border:1px solid transparent;border-left-width:4px;
}
.alert.success{background:var(--ok-soft);color:#065f46;border-color:#86efac;border-left-color:var(--ok)}
.alert.error{background:var(--danger-soft);color:#7f1d1d;border-color:#fecaca;border-left-color:var(--danger)}
.alert.warn{background:var(--warn-soft);color:#78350f;border-color:#fcd34d;border-left-color:var(--warn)}
.alert.info{background:var(--navy-soft);color:var(--navy);border-color:#c7d2fe;border-left-color:var(--navy)}

/* ---------- Profile view ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.profile-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:.9rem 1rem;border-left:3px solid var(--green);
}
.profile-item .lbl{
  font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:.3rem;
}
.profile-item .val{
  font-weight:600;color:var(--navy);font-size:.95rem;word-break:break-word;
}
.profile-item .val.empty{color:var(--muted);font-weight:400;font-style:italic}

/* Skill pills */
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
.pill{
  font-size:.75rem;font-weight:600;padding:.3rem .7rem;border-radius:4px;
  background:var(--green-soft);color:var(--green-dark);
  border:1px solid #A5D6A7;
}

/* ---------- Landing page feature blocks ---------- */
.card .profile-grid .profile-item{
  background:var(--navy-tint);
  border-left-color:var(--navy);
}
.card .profile-grid .profile-item .lbl{color:var(--green-dark)}
.card .profile-grid .profile-item .val{
  font-weight:500;font-size:.92rem;line-height:1.55;color:#2a3554;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--navy);color:rgba(255,255,255,.75);
  text-align:center;padding:2.5rem 1.5rem;font-size:.82rem;
  margin-top:4rem;border-top:4px solid var(--green);
}
.footer strong{color:#fff;font-weight:700}
.footer a{color:var(--green-light);text-decoration:none}
.footer a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:720px){
  .container{padding:1.2rem 1rem}
  .card{padding:1.4rem}
  .form-row,.form-row.triple{grid-template-columns:1fr}
  h1{font-size:1.55rem}
  .topbar{padding:.7rem 1rem}
  .topbar .brand{padding-left:2.8rem;min-height:36px}
  .topbar .brand::before{width:36px;height:36px;font-size:.9rem}
  .topbar .brand .kasi{font-size:1.1rem}
  .topbar nav{gap:.25rem}
  .topbar nav a{padding:.4rem .7rem;font-size:.78rem}
  .hero{padding:2.5rem 1rem 3rem}
  .hero h1{font-size:1.7rem}
  .hero p{font-size:.95rem}
}