/* ==========================================================================
   NACA Advocacy Intake — app layer
   Builds only on the --naca-* tokens and .naca-* components in naca-wa.css,
   so the app follows any change to the NACA theme file.
   ========================================================================== */

body.naca-scope { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* --- Masthead (hidden when embedded in Wild Apricot) --------------------- */

.adv-masthead {
  background: var(--naca-navy-deep);
  border-bottom: 3px solid var(--naca-gold);
  color: var(--naca-on-navy);
}
.adv-masthead-inner {
  max-width: var(--naca-measure-prose);
  margin: 0 auto;
  padding: var(--naca-space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adv-masthead-org { font-size: var(--naca-text-sm); color: var(--naca-blue-light); letter-spacing: 0.02em; }
.adv-masthead-title { font-family: var(--naca-font-head); font-size: 1.25rem; font-weight: var(--naca-weight-bold); }

.adv-shell { flex: 1; width: 100%; padding-top: var(--naca-space-6); }

.adv-footer { text-align: center; padding: var(--naca-space-5) var(--naca-space-4) var(--naca-space-6); }

html.is-embedded body.naca-scope { min-height: 0; }
html.is-embedded .adv-masthead,
html.is-embedded .adv-footer { display: none; }
html.is-embedded .adv-shell { padding: var(--naca-space-2) var(--naca-space-1) var(--naca-space-4); }

/* --- Intro --------------------------------------------------------------- */

.adv-intro { margin-bottom: var(--naca-space-5); }
.adv-intro-lead {
  font-family: var(--naca-font-head);
  font-size: var(--naca-text-2xl);
  line-height: var(--naca-leading-tight);
  font-weight: var(--naca-weight-bold);
  color: var(--naca-heading);
  margin-bottom: var(--naca-space-2) !important;
}
.adv-intro-facts {
  list-style: none;
  margin: var(--naca-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--naca-space-2);
}
.adv-intro-facts li {
  background: var(--naca-tint-200);
  color: var(--naca-text-meta);
  border-radius: var(--naca-radius-pill);
  padding: 4px 12px;
  font-size: var(--naca-text-sm);
}
.adv-intro-facts strong { color: var(--naca-heading); }

.adv-restored { display: flex; flex-wrap: wrap; gap: var(--naca-space-2); align-items: center; justify-content: space-between; }
.adv-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--naca-info-text); text-decoration: underline; font-weight: var(--naca-weight-semi);
}

/* --- Stepper ------------------------------------------------------------- */

.adv-stepper { margin-bottom: var(--naca-space-4); }

.adv-progress {
  height: 4px;
  background: var(--naca-tint-300);
  border-radius: var(--naca-radius-pill);
  overflow: hidden;
  margin-bottom: var(--naca-space-3);
}
.adv-progress span {
  display: block; height: 100%;
  background: var(--naca-gold);
  transition: width 300ms ease;
}

.adv-stepper ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: space-between; gap: var(--naca-space-1);
}
.adv-stepper li { flex: 1 1 0; min-width: 0; }
.adv-stepper li > span,
.adv-stepper li > button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.adv-stepper li > button { cursor: pointer; }
.adv-stepper li > button:focus-visible { outline: 2px solid var(--naca-gold); outline-offset: 2px; border-radius: var(--naca-radius-xs); }

.adv-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--naca-text-sm); font-weight: var(--naca-weight-bold);
  background: var(--naca-surface); color: var(--naca-muted);
  box-shadow: inset 0 0 0 1.5px var(--naca-border-strong);
  transition: background var(--naca-transition);
}
.adv-step-label {
  font-size: var(--naca-text-xs); color: var(--naca-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.adv-stepper .is-done .adv-dot { background: var(--naca-navy); color: var(--naca-on-navy); box-shadow: none; }
.adv-stepper .is-current .adv-dot { background: var(--naca-gold); color: var(--naca-on-gold); box-shadow: none; }
.adv-stepper .is-current .adv-step-label { color: var(--naca-heading); font-weight: var(--naca-weight-semi); }
.adv-stepper li > button:hover .adv-dot { background: var(--naca-navy-soft); }

/* --- Step card ----------------------------------------------------------- */

.adv-card { box-shadow: var(--naca-shadow-sm); }
.adv-step-head { margin-bottom: var(--naca-space-5); }
.adv-step-head .naca-h1:focus { outline: none; }
.adv-eyebrow {
  margin: 0 0 var(--naca-space-1) !important;
  font-size: var(--naca-text-xs); font-weight: var(--naca-weight-semi);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--naca-muted);
}
.adv-pre { white-space: pre-line; }

/* --- Fields -------------------------------------------------------------- */

.adv-field { margin-bottom: var(--naca-space-6); }
.adv-field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.adv-field legend {
  display: block; padding: 0;
  font-weight: var(--naca-weight-semi); font-size: 0.92rem; color: var(--naca-text);
  margin-bottom: 0.35rem;
}
.adv-field .naca-hint { margin: -0.1rem 0 0.55rem; }
.adv-req { color: var(--naca-warn-text); }
.adv-opt { font-weight: var(--naca-weight-normal); color: var(--naca-faint); font-size: var(--naca-text-xs); margin-left: 4px; }

.naca-scope input[type="tel"] {
  font-family: inherit; color: var(--naca-text); background: var(--naca-surface);
  border: 1px solid var(--naca-border-strong); border-radius: var(--naca-radius-sm);
}
.naca-field input[type="tel"] { width: 100%; font-size: var(--naca-text-md); padding: var(--naca-space-2) 0.7rem; }
.naca-field textarea { line-height: var(--naca-leading); resize: vertical; }
.naca-field input:hover, .naca-field select:hover, .naca-field textarea:hover { border-color: var(--naca-tint-400); }
.naca-field input.adv-short { max-width: 12rem; }
.adv-select { max-width: 22rem; }

.adv-money { position: relative; max-width: 14rem; }
.adv-money > span {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--naca-muted); pointer-events: none;
}
.naca-field .adv-money input { padding-left: 1.6rem; }

.adv-count { margin: 0.3rem 0 0 !important; }

/* Errors */
.adv-error {
  margin: 0.4rem 0 0 !important;
  color: var(--naca-warn-text); font-size: var(--naca-text-base); font-weight: var(--naca-weight-semi);
}
.adv-field.has-error input,
.adv-field.has-error select,
.adv-field.has-error textarea { border-color: var(--naca-warn-border); background: var(--naca-warn-bg); }
.adv-field.has-error .adv-chips { padding: 6px; margin: -6px; border-radius: var(--naca-radius-md); background: var(--naca-warn-bg); }
.adv-error-summary ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.adv-error-summary:focus { outline: 2px solid var(--naca-warn-border); outline-offset: 2px; }

/* --- Choice chips (radio + checkbox) ------------------------------------ */

.adv-chips { display: flex; flex-wrap: wrap; gap: var(--naca-space-2); }

.adv-chip { position: relative; display: inline-flex; cursor: pointer; margin: 0; }
.adv-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.adv-chip span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.5rem 0.95rem;
  border-radius: var(--naca-radius-pill);
  background: var(--naca-surface);
  box-shadow: inset 0 0 0 1px var(--naca-border-strong);
  color: var(--naca-text);
  font-size: var(--naca-text-base); font-weight: var(--naca-weight-normal); line-height: 1.3;
  transition: background var(--naca-transition), box-shadow var(--naca-transition), color var(--naca-transition);
  user-select: none;
}
.adv-chip:hover span { background: var(--naca-tint-200); box-shadow: inset 0 0 0 1px var(--naca-tint-400); }
.adv-chip input:checked + span {
  background: var(--naca-navy); color: var(--naca-on-navy); box-shadow: none; font-weight: var(--naca-weight-semi);
}
.adv-chip input[type="checkbox"]:checked + span::before { content: "✓"; font-size: 0.8em; }
.adv-chip input:focus-visible + span { outline: 2px solid var(--naca-gold); outline-offset: 2px; }

.adv-other { margin-top: var(--naca-space-3); max-width: 28rem; }

/* --- Category cards ------------------------------------------------------ */

.adv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--naca-space-3);
}
.adv-catcard {
  position: relative; cursor: pointer;
  display: flex; gap: var(--naca-space-3); align-items: flex-start;
  padding: var(--naca-space-4);
  border-radius: var(--naca-radius-lg);
  background: var(--naca-surface);
  box-shadow: inset 0 0 0 1px var(--naca-border-strong);
  transition: box-shadow var(--naca-transition), background var(--naca-transition), transform var(--naca-transition);
  margin: 0 !important; font-weight: var(--naca-weight-normal) !important;
}
.adv-catcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adv-catcard:hover { background: var(--naca-tint-100); box-shadow: inset 0 0 0 1px var(--naca-tint-400), var(--naca-shadow-md); }
.adv-catcard:has(input:checked) {
  background: var(--naca-navy-deep);
  box-shadow: 0 0 0 3px var(--naca-gold);
}
.adv-catcard:has(input:focus-visible) { outline: 3px solid var(--naca-blue); outline-offset: 3px; }

.adv-caticon {
  flex: none; width: 40px; height: 40px; border-radius: var(--naca-radius-md);
  display: grid; place-items: center;
  background: var(--naca-tint-200); color: var(--naca-navy);
}
.adv-caticon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.adv-catcard:has(input:checked) .adv-caticon { background: var(--naca-gold); color: var(--naca-navy-deep); }

.adv-cattext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adv-cattitle { font-weight: var(--naca-weight-semi); color: var(--naca-heading); line-height: var(--naca-leading-tight); }
.adv-catblurb { font-size: var(--naca-text-sm); color: var(--naca-muted); line-height: var(--naca-leading-snug); }
.adv-catcard:has(input:checked) .adv-cattitle { color: var(--naca-on-navy); }
.adv-catcard:has(input:checked) .adv-catblurb { color: var(--naca-tint-300); }

.adv-cat-next { margin-top: var(--naca-space-4) !important; font-weight: var(--naca-weight-semi); color: var(--naca-info-text) !important; }

/* --- Supporting documents note ------------------------------------------ */

.adv-docs {
  border-top: 1px solid var(--naca-border);
  padding-top: var(--naca-space-5);
  margin-top: var(--naca-space-2);
}

/* --- Navigation ---------------------------------------------------------- */

.adv-nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--naca-space-3);
  border-top: 1px solid var(--naca-border);
  padding-top: var(--naca-space-5);
  margin-top: var(--naca-space-2);
}
.adv-nav .naca-button { min-width: 8.5rem; }
.adv-nav .naca-button-primary:hover { background: var(--naca-gold-hover); color: var(--naca-on-gold); }
.adv-nav .naca-button[disabled] { opacity: 0.65; cursor: progress; }
.adv-saved { text-align: center; margin-top: calc(-1 * var(--naca-space-2)); }

/* --- Review -------------------------------------------------------------- */

.adv-review-block { padding: var(--naca-space-4) 0; border-bottom: 1px solid var(--naca-border); }
.adv-review-block:first-of-type { padding-top: 0; }
.adv-review-block .naca-h2 { margin: 0; }
.adv-review-dl { margin-top: var(--naca-space-3); grid-template-columns: minmax(9rem, 16rem) 1fr; }
.adv-review-dl dt { font-size: var(--naca-text-base); }
.adv-review-dl dd { overflow-wrap: anywhere; }

/* --- Done ---------------------------------------------------------------- */

.adv-done { text-align: left; }
.adv-done-mark {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--naca-ok-bg); color: var(--naca-ok-text);
  box-shadow: inset 0 0 0 2px var(--naca-ok-border);
  font-size: 1.6rem; font-weight: var(--naca-weight-bold);
  margin-bottom: var(--naca-space-4);
}
.adv-ref { font-family: var(--naca-font-mono); color: var(--naca-heading); letter-spacing: 0.03em; }

/* --- Honeypot ------------------------------------------------------------ */

.adv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Small screens ------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .adv-step-label { display: none; }
  .adv-stepper .is-current .adv-step-label { display: block; position: absolute; left: -9999px; }
  .adv-dot { width: 24px; height: 24px; font-size: var(--naca-text-xs); }
  .adv-cards { grid-template-columns: 1fr; }
  .adv-intro-lead { font-size: 1.3rem; }
  .adv-nav .naca-button { min-width: 0; flex: 1; }
  .adv-review-dl { grid-template-columns: 1fr; }
}

@media print {
  .adv-masthead, .adv-stepper, .adv-nav, .adv-saved, .adv-footer { display: none !important; }
}