/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Palette matches the certificate: purple/gold on ivory, Times/serif. */
:root {
  --purple: #4B2E83;
  --gold: #B8912B;
  --gold-light: #D4B65A;
  --ivory: #FDFAF1;
  --ink: #2B2B2B;
  --gray: #6B6B6B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height: 1.55;
}

/* ---------- header ---------- */

.site-header {
  border-bottom: 4px double var(--gold);
  background: var(--purple);
  color: var(--ivory);
  text-align: center;
  padding: 1.25rem 1rem 0.75rem;
}

.masthead-title {
  color: inherit;
  text-decoration: none;
}

.board-name {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-tagline {
  display: block;
  font-style: italic;
  color: var(--gold-light);
  font-size: 0.95rem;
}

.site-nav {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
}

.site-nav a {
  color: var(--ivory);
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.site-nav a:hover { color: var(--gold-light); }

/* ---------- flash ---------- */

.flash {
  max-width: 46rem;
  margin: 1rem auto 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--gold);
  background: #FBF3DC;
}

.flash-alert { border-color: #A33; background: #F9E8E8; }

/* ---------- main ---------- */

.site-main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

h1, h2 {
  font-weight: bold;
  color: var(--purple);
  line-height: 1.2;
}

h1 { font-size: 2rem; }

.hero { text-align: center; }

.lede { font-size: 1.15rem; }

.panel, .application-form {
  background: #fff;
  border: 1px solid var(--gold-light);
  padding: 1.5rem 2rem 2rem;
  margin-top: 1.5rem;
  box-shadow: 0 1px 4px rgba(43, 43, 43, 0.08);
}

.form-note { color: var(--gray); font-style: italic; }

/* ---------- forms ---------- */

.field { margin-bottom: 1rem; }

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="search"],
.field input[type="password"] {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  border: 1px solid var(--gray);
  background: var(--ivory);
}

.field-consent label { font-weight: normal; }

.field-consent input { margin-right: 0.5rem; }

.field-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }

.field-search label { flex-basis: 100%; margin-bottom: 0; }

.field-search input { flex: 1; }

.button-primary {
  font: inherit;
  font-weight: bold;
  letter-spacing: 0.03em;
  color: var(--ivory);
  background: var(--purple);
  border: 2px solid var(--gold);
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}

.button-primary:hover { background: #5d3ba1; }

.button-link {
  font: inherit;
  color: var(--purple);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.button-danger { color: #A33; }

.form-errors {
  border: 1px solid #A33;
  background: #F9E8E8;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

/* ---------- registry table ---------- */

.registry {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.registry th, .registry td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--gold-light);
}

.registry th {
  color: var(--purple);
  font-variant: small-caps;
  border-bottom: 2px solid var(--gold);
}

.registry .actions { white-space: nowrap; }

.registry .actions form { display: inline-block; margin-right: 0.75rem; }

/* ---------- verification ---------- */

.verified-badge, .not-verified-badge {
  display: inline-block;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.9rem;
  border: 2px solid;
}

.verified-badge { color: #2E6B2E; border-color: #2E6B2E; background: #EDF6ED; }

.not-verified-badge { color: #A33; border-color: #A33; background: #F9E8E8; }

.educational-payload {
  margin-top: 1.5rem;
  border-top: 2px solid var(--gold);
  padding-top: 0.5rem;
}

.fine-print, .no-results { color: var(--gray); font-style: italic; font-size: 0.95rem; }

.faq h2 {
  font-size: 1.15rem;
  margin-top: 1.75rem;
  border-bottom: 1px solid var(--gold-light);
  padding-bottom: 0.25rem;
}

/* ---------- admin ---------- */

.stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }

.stat {
  border: 1px solid var(--gold-light);
  background: var(--ivory);
  padding: 0.75rem 1.25rem;
}

.stat-number {
  display: block;
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--purple);
}

.pagination { margin-top: 1rem; display: flex; gap: 2rem; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 4px double var(--gold);
  color: var(--gray);
  font-size: 0.9rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.footer-address { font-style: italic; }

/* ---------- narrow viewports ---------- */

/* Bare text (hero, headings, footer) sits directly on the 1rem page gutter,
   which reads as touching the edge on phones. Widen the gutter there, and
   trim panel padding to compensate so form margins stay about the same
   (1.5 + 1.25 ≈ the desktop 1 + 2). */
@media (max-width: 40rem) {
  .site-header,
  .site-main,
  .site-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .panel, .application-form {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}