/*
 * about-lac.css: the About and not-found pages, set in the parish column.
 * Loaded after theme-lachurches-parish.css on about.html and 404.html.
 */
/* ── About and not-found pages share the parish column ──────────── */
.lac-about h1, .lac-not-found h1 {
  font-family: var(--lac-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 var(--lac-space-5);
}
.lac-about-body p, .lac-about-notes p, .lac-not-found p {
  font-family: var(--lac-serif);
  font-size: var(--lac-text-md);
  line-height: 1.6;
  color: var(--lac-ink);
  max-width: 62ch;
  margin: 0 0 var(--lac-space-4);
}
.lac-about h2 {
  font-family: var(--lac-display);
  font-weight: 400;
  font-size: var(--lac-text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lac-gold-deep);
  margin: var(--lac-space-6) 0 var(--lac-space-3);
}
.lac-about a, .lac-not-found a { color: var(--lac-pacific, #24417f); text-decoration-color: var(--lac-gold); }
.lac-about a:hover, .lac-not-found a:hover { color: var(--lac-gold-deep); }
.lac-about-notes {
  margin-top: var(--lac-space-6);
  padding-top: var(--lac-space-5);
  border-top: 1px solid var(--lac-rule);
}
.lac-about-form { display: flex; gap: var(--lac-space-3); max-width: 480px; flex-wrap: wrap; }
.lac-about-form input {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0 var(--lac-space-4);
  background: var(--lac-bg);
  border: 1px solid var(--lac-rule);
  border-radius: var(--lac-radius-sm, 6px);
  color: var(--lac-ink);
  font-family: var(--lac-serif);
  font-size: var(--lac-text-md);
}
.lac-about-form input:focus { outline: none; border-color: var(--lac-gold); box-shadow: 0 0 0 3px rgba(160, 127, 40, 0.18); }
.lac-about-form .btn-primary { min-height: 44px; padding: 0 var(--lac-space-5); }
.lac-about-message { color: var(--lac-ink-2); min-height: 1.5em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The masthead is fixed; the first line must clear it, as the finders do. */
main.lac-about, main.lac-not-found { padding-top: 96px; }

/* ── Contact form ─────────────────────────────────────────────── */
.lac-contact-form { max-width: 640px; margin: var(--lac-space-5) 0 var(--lac-space-6); }
.lac-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--lac-space-4); }
.lac-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--lac-space-4); }
.lac-field label {
  font-family: var(--lac-display);
  font-size: var(--lac-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lac-ink-2);
}
.lac-req { color: var(--lac-red, #8b2020); }
.lac-field input, .lac-field select, .lac-field textarea {
  min-height: 44px;
  padding: 10px var(--lac-space-4);
  background: var(--lac-bg);
  border: 1px solid var(--lac-rule);
  border-radius: var(--lac-radius-sm, 6px);
  color: var(--lac-ink);
  font-family: var(--lac-serif);
  font-size: var(--lac-text-md);
}
.lac-field textarea { resize: vertical; line-height: 1.5; }
.lac-field input:focus, .lac-field select:focus, .lac-field textarea:focus {
  outline: none; border-color: var(--lac-gold); box-shadow: 0 0 0 3px rgba(160, 127, 40, 0.18);
}
.lac-field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lac-field-actions { display: flex; align-items: center; gap: var(--lac-space-4); flex-wrap: wrap; }
.lac-field-actions .btn-primary { min-height: 44px; padding: 0 var(--lac-space-6); }
.lac-sponsor { margin-top: var(--lac-space-6); padding-top: var(--lac-space-5); border-top: 1px solid var(--lac-rule); }

/* The one button these pages have: gold, ink on it, 44px tall. The token
   theme has no .btn-primary of its own, so "Send" was rendering as bare text. */
.lac-about-form .btn-primary, .lac-field-actions .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--lac-space-6);
  background: var(--lac-gold); color: #16203a;
  border: 0; border-radius: var(--lac-radius-sm, 6px);
  font-family: var(--lac-display); font-size: var(--lac-text-sm);
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.lac-about-form .btn-primary:hover, .lac-field-actions .btn-primary:hover { background: var(--lac-gold-deep); color: #fff; }
.lac-about-form .btn-primary:disabled, .lac-field-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
.lac-about-form .btn-primary:focus-visible, .lac-field-actions .btn-primary:focus-visible { outline: var(--lac-focus, 2px solid var(--lac-gold)); outline-offset: 2px; }