/* Great Marriage Services — interactive checklist modules.
   Layers on top of style.css, so these pages inherit the real site tokens,
   header and footer instead of inventing their own palette. v1 (2026-08-20) */

.mod-hero{
  background:linear-gradient(135deg,var(--navy) 0%,#153d68 55%,#1d4f85 100%);
  color:#fff; border-radius:28px; padding:34px 32px;
  margin:26px 0 22px; position:relative; overflow:hidden;
  box-shadow:0 18px 48px rgba(8,27,53,.22);
}
.mod-hero:before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 88% 12%,rgba(217,166,42,.28),transparent 42%),
    radial-gradient(circle at 8% 92%,rgba(110,24,48,.30),transparent 38%);
}
.mod-hero > *{position:relative}
.mod-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold2);
}
.mod-kicker:before{content:'✦'}
.mod-hero h1{
  color:#fff; margin:12px 0 10px;
  font-size:clamp(1.9rem,4.2vw,3.1rem); text-wrap:balance;
}
.mod-hero p{margin:0; max-width:64ch; color:#dbe6f3; line-height:1.65}
.mod-badge{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  background:rgba(255,255,255,.1); border:1px solid var(--gold);
  color:var(--gold2); border-radius:999px; padding:7px 14px;
  font-size:.76rem; font-weight:800;
}

/* ---- progress ---- */
.mod-progress{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:16px 20px; margin-bottom:16px; box-shadow:0 8px 28px rgba(8,27,53,.06);
}
.mod-progress-text{font-weight:800; color:var(--navy); font-size:.95rem; white-space:nowrap}
.mod-progress-text b{font-variant-numeric:tabular-nums; color:var(--wine)}
.mod-progress-track{
  flex:1; min-width:180px; height:10px; background:var(--ivory);
  border:1px solid #e7ce93; border-radius:999px; overflow:hidden;
}
.mod-progress-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#b77a0b,#f1cf68);
  transition:width .3s ease;
}

/* ---- toolbar ---- */
.mod-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px}
.mod-toolbar input[type=search]{
  flex:1; min-width:220px; padding:12px 14px; min-height:44px;
  border:1px solid #d8d2c7; border-radius:12px; background:#fff;
}
.mod-toolbar input[type=search]:focus{
  outline:none; border-color:#a8780f; box-shadow:0 0 0 3px rgba(217,166,42,.16);
}

/* ---- checklist cards ---- */
.mod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
.mod-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:0 8px 28px rgba(8,27,53,.06);
}
.mod-card > h2{
  font-size:1.22rem; margin:0 0 4px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
}
.mod-card-count{
  font-family:var(--sans); font-size:.72rem; font-weight:800;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mod-card > ul{list-style:none; padding:0; margin:12px 0 0}
.mod-card > ul > li{border-bottom:1px dashed var(--line)}
.mod-card > ul > li:last-child{border-bottom:0}

.mod-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 4px; min-height:44px; cursor:pointer; border-radius:8px;
  font-size:.95rem; line-height:1.5;
}
.mod-item:hover{background:var(--cream)}
.mod-item:active{background:var(--ivory)}
.mod-item input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:21px; height:21px; margin:2px 0 0; flex:none; cursor:pointer;
  border:1.5px solid #c3b48d; border-radius:6px; background:#fff;
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.mod-item input[type=checkbox]:checked{background:var(--wine); border-color:var(--wine)}
.mod-item input[type=checkbox]:checked:after{
  content:'✓'; color:#fff; font-size:13px; font-weight:900; line-height:1;
}
.mod-item input[type=checkbox]:focus-visible{outline:2px solid var(--wine); outline-offset:2px}
.mod-item input:checked + span{color:var(--muted); text-decoration:line-through}

.mod-empty{
  padding:26px; text-align:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius); background:#fff;
}

@media(max-width:980px){ .mod-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){
  .mod-grid{grid-template-columns:1fr}
  .mod-hero{border-radius:20px; padding:26px 20px; margin-top:18px}
  .mod-progress{padding:14px 16px}
}

@media print{
  .cv-all-menu,.topbar,.nav,.mod-toolbar,.footer,.skip-link{display:none!important}
  .mod-hero{background:none; color:var(--ink); box-shadow:none; padding:0; border-radius:0}
  .mod-hero h1,.mod-hero p{color:var(--ink)}
  .mod-hero:before,.mod-badge{display:none}
  .mod-grid{grid-template-columns:1fr 1fr; gap:10px}
  .mod-card{box-shadow:none; break-inside:avoid; page-break-inside:avoid}
  .mod-item{min-height:0; padding:4px 0}
}