/* ==== Assessment Page Styles (refined) ==== */
:root{
  --primary:#000777; --primary-dark:#000555; --accent:#ff7a00;
  --text-dark:#1e293b; --text-light:#64748b; --bg-light:#f8fafc; --white:#fff;

  /* UI tokens */
  --radius-sm:10px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-soft:0 10px 30px rgba(2,6,23,.08);
  --shadow-card:0 16px 40px rgba(2,6,23,.10);
  --ring:0 0 0 4px rgba(255,122,0,.15);
}

*{box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-dark);line-height:1.6;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Hero (reuse site style) */
.hero{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:6rem 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-120px;right:-220px;width:640px;height:640px;background:radial-gradient(circle,rgba(255,122,0,.14),transparent 70%);filter:blur(2px)}
.hero-content{position:relative;z-index:1}
.hero-badge{display:inline-block;background:rgba(255,122,0,.14);border:1px solid rgba(255,122,0,.45);color:var(--accent);padding:.5rem 1rem;border-radius:var(--radius-pill);font-weight:700;margin-bottom:1rem}
.hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:.6rem}
.hero p{font-size:1.1rem;opacity:.96;max-width:760px;margin-bottom:1.2rem}
.cta-buttons{display:flex;gap:1rem;flex-wrap:wrap}

/* Section base */
section{padding:5rem 0}
.section-header{text-align:center;max-width:820px;margin:0 auto 2rem}
.section-badge{display:inline-block;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:.8rem;margin-bottom:.5rem}
.section-header h2{font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--primary);margin-bottom:.4rem}
.section-header p{color:var(--text-light)}
.muted{color:var(--text-light)}

/* Progress */
.progress{height:10px;background:#e9eef7;border-radius:var(--radius-pill);overflow:hidden;margin:0 auto 1.5rem;max-width:900px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#e66d00);width:0;transition:width .3s;border-radius:var(--radius-pill)}

/* Form container */
.assessment form{max-width:900px;margin:0 auto}

/* Field layout & inputs */
.assessment .field{display:flex;flex-direction:column;gap:.45rem}
.assessment .field > span{font-weight:700;color:var(--primary);font-size:.95rem;letter-spacing:.01em}
.assessment .field .hint{color:var(--text-light);font-size:.85rem}
.assessment .field .error{display:none;color:#b91c1c;font-size:.85rem;font-weight:600}

.assessment .field input,
.assessment .field select,
.assessment .field textarea{
  border:1px solid #e2e8f0; background:#fff; color:var(--text-dark);
  border-radius:var(--radius-md); padding:.9rem 1rem; font:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.assessment .field textarea{min-height:120px;resize:vertical}
.assessment .field input::placeholder,
.assessment .field textarea::placeholder{color:#94a3b8}

.assessment .field input:hover,
.assessment .field select:hover,
.assessment .field textarea:hover{border-color:#cbd5e1}

.assessment .field input:focus,
.assessment .field select:focus,
.assessment .field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

.assessment .field input:disabled,
.assessment .field select:disabled,
.assessment .field textarea:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}

/* Required indicator (progressive, via :has) */
.field:has(input[required]), .field:has(select[required]){
  /* no visual change here; just target for the asterisk below */
}
.field:has(input[required]) > span::after,
.field:has(select[required]) > span::after{content:" *"; color:#ef4444; font-weight:800}

/* Custom select arrow */
.assessment .field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:14px 14px; padding-right:2.5rem;
}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}

/* Step frames */
.step{display:none;animation:fade .22s ease}
.step.active{display:block}
@keyframes fade{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:none}}
.group-title{margin:1.2rem 0 .75rem;color:var(--primary);font-size:1.25rem;font-weight:800}

/* Question cards */
.q{
  padding:1.1rem;border:1px solid #e7edf6;border-radius:var(--radius-lg);background:#fff;margin-bottom:1rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.q label{display:block;font-weight:700;margin-bottom:.55rem;color:var(--text-dark)}
/* Highlight answered groups (progressive enhancement) */
.q:has(.rating input:checked){border-color:#ffd3a8;background:linear-gradient(180deg,#fff 0%,#fffaf6 100%)}

/* Likert rating as pill buttons */
.rating{display:flex;gap:.5rem;flex-wrap:wrap}
.rating input{position:absolute;opacity:0;pointer-events:none}
.rating label{
  border:1px solid #e2e8f0;background:#fff;color:var(--text-dark);
  border-radius:var(--radius-pill); padding:.55rem 1rem; min-width:2.5rem; text-align:center;
  cursor:pointer; user-select:none; transition:transform .12s, border-color .15s, background .15s, color .15s, box-shadow .15s;
  font-weight:600;
}
.rating label:hover{transform:translateY(-2px)}
.rating input:focus + label{box-shadow:var(--ring);border-color:var(--accent)}
.rating input:checked + label{background:rgba(255,122,0,.12);border-color:var(--accent);color:var(--accent);font-weight:800}

/* Buttons */
.nav{display:flex;justify-content:center;gap:1rem;margin-top:1.25rem}
.btn{
  padding:.95rem 1.5rem;border-radius:var(--radius-sm);text-decoration:none;font-weight:800;display:inline-block;
  cursor:pointer;border:2px solid transparent;transition:transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 10px 24px rgba(255,122,0,.20)}
.btn-primary:hover{background:#e66d00;border-color:#e66d00;transform:translateY(-1px);box-shadow:0 14px 36px rgba(255,122,0,.28)}
.btn-secondary{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.btn-secondary:hover{background:rgba(0,7,119,.08)}

/* Results */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}
.result-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:1rem;text-align:center;
  box-shadow:var(--shadow-soft)
}
.result-card .score{font-size:2rem;font-weight:800;color:var(--accent);line-height:1}
.result-card .label{font-weight:800;margin-top:.25rem;letter-spacing:.01em}
.label.initial{color:#9b1c1c}.label.basic{color:#b45309}.label.managed{color:#065f46}.label.optimized{color:#0f766e}
.overall{
  grid-column:1 / -1;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:16px;padding:1.4rem;text-align:center;
  border:1px solid rgba(255,255,255,.25);box-shadow:var(--shadow-card)
}
.overall-score{font-size:2.7rem;font-weight:900;letter-spacing:-.01em}
.overall-label{font-weight:900;opacity:.96}

/* Contact card */
.contact-card{
  background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-card)
}
.submit-msg{margin-top:.85rem;font-weight:700}
.submit-msg{color:var(--text-light)}
.submit-msg.success{color:#065f46}
.submit-msg.error{color:#b91c1c}

/* Error styling hook (optional: add .is-invalid in JS if needed) */
.field.is-invalid .error{display:block}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{border-color:#fca5a5;box-shadow:0 0 0 4px rgba(239,68,68,.15)}

/* Standards */
.standards{background:#fff}
.standards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1.5rem}
.standards-item{text-align:center;padding:1rem;background:var(--bg-light);border-radius:12px;border:1px solid #e7edf6}
.standards-icon{font-size:2rem;margin-bottom:.4rem}

/* Accessibility focus helpers */
a:focus-visible, button:focus-visible{outline:none;box-shadow:var(--ring)}
.rating label:focus-visible{box-shadow:var(--ring)}

.breadcrumb {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--accent, #ff7a00);
    text-decoration: none;
}

/* Responsive */
@media (max-width:768px){
  .grid-2{grid-template-columns:1fr}
  .hero{padding:4.5rem 0}
  .hero h1{font-size:2rem}
  .btn{width:100%}
  .q{padding:1rem}
}

/* Nice anchor scrolling if you have a sticky header */
:target{scroll-margin-top:80px}