/* =========================
   Admission Procedure — scoped styles (header palette)
   ========================= */
:root{
  /* Header palette */
  --blue:   #3396D3;   /* primary */
  --sand:   #FFF0CE;   /* pale yellow */
  --tan:    #EBCB90;   /* warm accent */
  --gray:   #EEEEEE;   /* ui gray */

  /* Base tokens */
  --text:#1A1A1A; 
  --muted:#4B5563;

  --card:#FFFFFF; 
  --border:1px solid var(--gray);
  --radius:14px;

  --shadow-sm:0 8px 22px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 14px 38px rgba(0,0,0,.10), 0 4px 14px rgba(0,0,0,.08);
}

/* container helper */
.container{ width:min(1100px,92vw); margin-inline:auto; }

/* ===== Hero ===== */
.proc-hero{
  background: linear-gradient(180deg, var(--gray) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--gray);
}
.proc-hero .container{ padding-block: 16px; }

.crumbs{
  display:flex; align-items:center; gap:.5rem;
  font-size:.95rem; color:#6B7280; margin: 4px 0 .5rem;
}
.crumbs a{ color:inherit; text-decoration:none; border-bottom:1px dashed transparent; }
.crumbs a:hover{ border-bottom-color: currentColor; }
.crumbs .current{ color: var(--text); font-weight:600; }

.proc-title{
  margin:0;
  font-weight:900;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.1rem);
  color: var(--text);
}
.proc-sub{
  margin:.25rem 0 0;
  color:#374151;
}

/* ===== Layout ===== */
.proc-wrap{ margin: 18px auto clamp(28px, 5vh, 64px); }
.proc-grid{
  display:grid; grid-template-columns: 280px 1fr; gap: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 980px){
  .proc-grid{ grid-template-columns: 1fr; }
}

/* sticky aside */
.proc-aside{
  position: sticky; top: clamp(80px, 6vh, 120px);
  align-self: start; display: grid; gap: 1rem;
}
.toc{
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.toc__title{
  margin:0 0 .5rem; font-weight:700; font-size:.95rem; color:#6B7280;
}
.toc ol{ margin:0; padding-left:1.25rem; }
.toc a{ color: var(--text); text-decoration:none; }
.toc a:hover{ text-decoration: underline; }

.quick .btn + .btn{ margin-top:.5rem; }
.w-100{ width:100%; }

/* ===== Buttons (palette) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.7rem 1rem; font-weight:900; letter-spacing:.02em;
  border-radius:999px; cursor:pointer; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* Primary = blue */
.btn-primary{ background: var(--blue); color:#fff; border:1px solid var(--blue); }
.btn-primary:focus-visible{ outline:3px solid rgba(51,150,211,.35); outline-offset:2px; }

/* Outline = blue text, subtle edge */
.btn-outline{ background:#fff; color: var(--blue); border:1px solid var(--blue); }
.btn-outline:hover{ background: color-mix(in srgb, var(--blue) 6%, #fff); }

/* ===== Main card ===== */
.proc-card{
  --_card:var(--card); --_radius:var(--radius); --_shadow:var(--shadow-md);
  background: var(--_card);
  border: var(--border);
  border-radius: var(--_radius);
  box-shadow: var(--_shadow);
  padding: clamp(16px, 2.2vw, 28px) clamp(16px, 2.6vw, 32px);
  display:grid; gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(20px, 4vh, 56px); /* gap above footer */
}

.proc-card .section{
  padding-block: clamp(8px, 1.4vw, 16px);
  border-top: 1px solid var(--gray);
}
.proc-card .section:first-child{ border-top:0; padding-top:0; }
.proc-card .section:last-child{ padding-bottom:0; }

/* headings + copy */
.proc-card .h2{
  margin:0 0 .4rem;
  font-weight:900;
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.45rem);
  color: var(--text);
}
.proc-card .h3{
  margin:0 0 .25rem;
  font-weight:800;
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  color: var(--text);
}
.proc-card .p{
  margin:0; color:#4B5563; line-height:1.55;
}
.proc-card .p.small{ font-size:.95em; }

/* Note / callout uses sand + tan border */
.proc-card .p.note{
  background: var(--sand);
  border:1px solid var(--tan);
  padding:.7rem .9rem; border-radius:12px;
}

/* ===== Numbered step badge (sand fill, tan ring, blue text) ===== */
.proc-card .step{ position:relative; padding-left:2.8rem; }
.proc-card .step::before{
  content: attr(data-step);
  position:absolute; left:0; top: .05rem;
  width:2rem; height:2rem; display:grid; place-items:center;
  border-radius:999px;
  background: var(--sand);
  color: var(--blue);
  border:1px solid var(--tan);
  font-weight:800; font-size:.95rem;
}

/* ===== Stages list (blue dots + soft sand halo) ===== */
.stages{
  list-style:none; margin:.6rem 0 0; padding:0; border-left:2px solid var(--gray);
}
.stages li{ position:relative; padding:.5rem 0 .5rem 1.25rem; }
.stage-head{ display:flex; align-items:center; gap:.5rem; }
.dot{
  position:absolute; left:-.45rem; top:.95rem;
  width:.75rem; height:.75rem; border-radius:999px; background: var(--blue);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sand) 60%, #fff);
}

/* ===== Requirements mini cards ===== */
.cards-2{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.9rem; margin-top:.75rem;
}
.cardish{
  background:#fff; border: var(--border); border-radius: 12px;
  padding:.9rem 1rem; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.cardish:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

@media (max-width: 640px){
  .cards-2{ grid-template-columns: 1fr; }
}

/* ===== Timeline (ticks = tan border with blue check) ===== */
.timeline{
  list-style:none; margin:.75rem 0 0; padding:0;
}
.timeline li{ display:flex; gap:.6rem; align-items:flex-start; padding:.45rem 0; }
.tick{
  width:1rem; height:1rem; border-radius:4px; background: #FDFCF9;
  border:1px solid var(--tan);
  position:relative; margin-top:.25rem;
}
.tick::after{
  content:""; position:absolute; left:.22rem; top:.18rem;
  width:.45rem; height:.3rem; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform: rotate(-45deg);
}
.tl-body h4{ margin:0 0 .1rem; font-size:1rem; }
.tl-body .p.small{ margin:0; }

/* ===== FAQ (sand bg, tan divider) ===== */
.faq{
  margin-top:.6rem; border: 1px solid var(--tan); border-radius:12px; overflow:hidden; background: var(--sand);
}
.faq > summary{
  list-style:none; cursor:pointer; padding:.8rem 1rem; font-weight:600;
}
.faq > summary::-webkit-details-marker{ display:none; }
.faq[open] > summary{ border-bottom:1px solid var(--tan); }
.faq__body{ padding:.8rem 1rem; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}