:root {
  --accent: #154734;
  /* Sampled from assets/logo.png -- the red of the logo block itself.
     Everything red in the chrome derives from it so the buttons and the
     header accents match the mark exactly. */
  --brand-red: #d62828;
  --button-bg: var(--brand-red);
  --bg: #f5f6f3;
  --card-bg: #ffffff;
  --border: #d8dcd6;
  --text: #222;
  --error-bg: #fdeaea;
  --error-border: #e0a0a0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 2rem 1rem;
}

.card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
}

h1 { margin-top: 0; color: var(--accent); }

label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; font-size: 0.95rem; }

input[type=text], input[type=email], select, textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

textarea { resize: vertical; }

button, .button-secondary {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.65rem 1.4rem;
  border-radius: 6px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}

button[type="submit"] { background: var(--button-bg); color: #fff; }
button[type="submit"]:hover { opacity: 0.9; }

.button-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  margin-right: 0.75rem;
}

.actions { display: flex; align-items: center; }

.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-error { background: var(--error-bg); border: 1px solid var(--error-border); }
.alert ul { margin: 0; padding-left: 1.2rem; }

.recipients { margin-top: 1.5rem; padding: 1rem; background: #f8f9f7; border-radius: 8px; }
.recipients h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.recipients ul { margin: 0; padding-left: 1.2rem; }

.recipient-preview-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.recipient-preview-link:hover { opacity: 0.8; }

dialog#preview-dialog {
  max-width: 560px;
  width: 90%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}
dialog#preview-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog#preview-dialog h2 { font-size: 1.1rem; margin-top: 0; }

.preview-field { margin-bottom: 0.5rem; font-size: 0.95rem; }
.preview-label { font-weight: 600; margin-right: 0.35rem; }

#preview-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  background: #f8f9f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.hint { margin: 0.25rem 0 0.5rem; font-size: 0.85rem; color: #555; }

.staging-banner {
  background: #f5a623;
  color: #3a2600;
  font-weight: 600;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  margin: -2rem -1rem 1.5rem; /* cancels body's own padding so this reaches the viewport edges */
}

code {
  background: #eef0ec;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

.typeahead { position: relative; }

.field-error {
  color: #a33;
  font-size: 0.85rem;
  margin: 0.3rem 0 0;
}

.typeahead-list {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 0.25rem 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  list-style: none;
}

.typeahead-list li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.typeahead-list li[aria-selected="true"] {
  background: var(--accent);
  color: #fff;
}

.typeahead-list li.typeahead-empty {
  color: #777;
  cursor: default;
  font-size: 0.85rem;
  font-style: italic;
}

/* ---- Admin area (public/admin/) ---- */

.card-narrow { max-width: 420px; }
.card-wide { max-width: 1040px; }

.admin-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.admin-bar h1 { margin-bottom: 0.25rem; }

.inline-form { display: inline; }

.button-inline {
  margin-top: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  vertical-align: middle;
}

.alert-success {
  background: #eaf5ee;
  border: 1px solid #a8ceb7;
}
.alert-warning {
  background: #fdf6e3;
  border: 1px solid #e3cf91;
}

.template-group { margin-bottom: 2rem; }
.template-group h2 { font-size: 1.05rem; color: var(--accent); }

.template-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.template-table th,
.template-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.template-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666;
}
.template-table tr.is-live { background: #f4f9f6; }
.template-table .subject-cell { color: #555; }
.template-table .nowrap { white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eceeea;
  color: #555;
}
.badge-live { background: var(--accent); color: #fff; }
.badge-shadowed { background: #fdf6e3; color: #7a5c12; }

.editor-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.editor-form { flex: 1 1 auto; min-width: 0; }

.placeholder-panel {
  flex: 0 0 280px;
  background: #f8f9f7;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
}
.placeholder-panel h2 { font-size: 0.95rem; margin: 0 0 0.25rem; color: var(--accent); }

.placeholder-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.placeholder-list li { margin-bottom: 0.6rem; }

.placeholder-insert {
  display: block;
  margin: 0 0 0.15rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--accent);
  cursor: pointer;
}
.placeholder-insert:hover { background: var(--accent); color: #fff; }

.placeholder-desc { font-size: 0.8rem; color: #555; }

.hint-inline { font-weight: 400; color: #666; font-size: 0.85rem; }

#body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; }

.editor-form .actions { gap: 0.75rem; }
.editor-form .actions .button-secondary { margin-right: 0; }

.preview-panel {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.preview-panel h2 { font-size: 1.05rem; color: var(--accent); margin-top: 0; }

.preview-frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  margin: 0.5rem 0 1rem;
}

.preview-plain summary { cursor: pointer; font-size: 0.9rem; color: var(--accent); }
.preview-plain pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f9f7;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.85rem;
}

@media (max-width: 820px) {
  .editor-layout { display: block; }
  .placeholder-panel { flex: none; margin-top: 1.5rem; }
  .template-table { display: block; overflow-x: auto; }
}

/* ---- Site header (includes/site_header.php) ---- */

/* Three columns rather than flex space-between: the logo is centred on
   the page, not in the gap left over by the nav, so it stays put no
   matter how wide the link labels get. The third column is empty and
   exists only to balance the first. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  /* Full-bleed: cancels the body's own padding so the bar reaches the
     viewport edges, the same trick .staging-banner uses. */
  margin: -2rem -1rem 2rem;
}

/* When the staging banner is present it has already cancelled the top
   padding and added its own bottom margin -- pull the header up so the
   two sit flush instead of leaving a gap between them. */
.staging-banner + .site-header { margin-top: -1.5rem; }

/* The logo comes first in the markup (it's the home link, and it's what
   should lead on a narrow screen); grid placement puts the nav to its
   left on wider ones.

   Both need an explicit grid-row. Auto-placement is sparse: it never
   backtracks, so once the logo is placed in column 2 the nav can't be
   put in column 1 of that same row and would drop to a second row
   instead -- pinning both to row 1 is what keeps them side by side. */
.site-nav { grid-column: 1; grid-row: 1; justify-self: start; }

.site-logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: block;
  line-height: 0; /* no descender gap under the image */
}

/* The file is 1400px wide for print/retina use; it's displayed far
   smaller. height:auto with the intrinsic width/height attributes on
   the tag keeps the aspect ratio and avoids layout shift. */
.site-logo img {
  width: 220px;
  height: auto;
  max-width: 100%;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}

.site-nav a[aria-current="page"] {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}

.site-header a:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}

/* Below this width the three-column layout would squeeze the logo, so
   stack instead: logo first (it's first in the markup, so no reordering
   is needed and tab order still matches what's on screen), nav under
   it, both centred. */
@media (max-width: 640px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.9rem;
    padding: 1rem;
  }
  /* grid-row back to auto so the two stack instead of landing on top
     of each other in the single row pinned above. */
  .site-nav,
  .site-logo { grid-column: 1; grid-row: auto; justify-self: center; }
  .site-logo img { width: 180px; }
  .site-nav ul { gap: 1.25rem; }
}

/* ---- "Tell us about your school" ---- */

/* The offer that appears in the typeahead when nothing matched. Sits
   below the "no matches" line, separated so it reads as an action
   rather than another result. */
.typeahead-list li.typeahead-suggest {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.typeahead-list li.typeahead-suggest a {
  color: var(--brand-red);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.typeahead-list li.typeahead-suggest a:hover,
.typeahead-list li.typeahead-suggest a:focus-visible { text-decoration: underline; }

/* Bot trap on the suggest form: off-screen rather than display:none,
   since some bots skip hidden fields but follow the layout. It's
   aria-hidden and out of the tab order in the markup, so nobody using a
   keyboard or screen reader can land in it by accident. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Heading above the read-only message on email_leaders.php. The
   preview frame and field styles are shared with the admin editor. */
.message-heading {
  font-size: 1.05rem;
  color: var(--accent);
  margin: 1.5rem 0 0.5rem;
}

/* Shorter than the admin editor's frame, which is sized for a template
   being worked on. A visitor is reading one short message, and the full
   height leaves an empty box under it. Still scrolls if the message is
   longer. */
.preview-frame-compact { height: 300px; }