/* =====================================================================
   survey.nac.church - National Rectors Conference survey

   The tokens, base rules and the whole BRAND PANEL block below are lifted
   verbatim from the registration portal
   (NAC/projects/conference.nac.church/registration-portal/site/css/styles.css)
   by way of howcanwehelp.nac.church, so the masthead here is pixel-identical
   to the one on registration.nac.church rather than a lookalike.

   Deliberately NOT imported across projects: these are separately deployed
   sites in separate buckets, and a shared stylesheet would mean a change to
   the conference form could silently restyle this page months after anyone
   remembers the link exists. Copied, and labelled as copied. If the panel is
   restyled there, bring the change over by hand - to both siblings.

   The `.welcome-*` class names are kept rather than renamed to `.survey-*`.
   They are the sibling page's names, and keeping them means a masthead or
   card change can be diffed straight across instead of translated.
   ===================================================================== */

/* ------------------------------ tokens ------------------------------ */
:root {
  --h-navy-ink: #16143C;
  --h-navy-deep: #100E30;
  --h-indigo: #0E4C8A;      /* Deep Blue - links, small text, structure */
  --h-sky: #2886D0;         /* NAC Blue - signature; large text & fills */
  --h-sky-light: #DCEBF7;   /* Sky Tint - washes, fills */
  --h-gold: #F5A623;
  --h-paper: #F6F3EE;
  --h-white: #FFFFFF;
  --h-text: #16143C;
  --h-muted: #4A4A57;
  --h-subtle: #6B6B7A;
  --hairline: rgba(22, 20, 60, .10);
  --hairline-strong: rgba(22, 20, 60, .16);
  --hairline-light: rgba(255, 255, 255, .14);
  --e-sheet: 0 1px 2px rgba(22, 20, 60, .04), 0 16px 40px -24px rgba(22, 20, 60, .22);
  --panel-w: 380px;
  --font-display: Georgia, "Times New Roman", serif;
  --font-text: Arial, Helvetica, sans-serif;
}

/* ------------------------------- base ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--h-text);
  background: var(--h-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, table, th, td { margin: 0; padding: 0; }
a { color: var(--h-indigo); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--h-gold); outline-offset: 2px; }

/* ------------------------------ layout ------------------------------ */
.app { display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); min-height: 100svh; }

/* =========================== BRAND PANEL =========================== */
.panel {
  background: linear-gradient(180deg, var(--h-navy-ink) 0%, var(--h-navy-deep) 100%);
  color: #fff;
}
.panel-inner {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column;
  padding: 40px 36px 0;
}

.panel-brand { display: flex; align-items: center; gap: 16px; }
.panel-emblem { width: 58px; height: 58px; flex: 0 0 auto; }
.panel-brand-divider { width: 1px; align-self: stretch; background: var(--hairline-light); }
.panel-word {
  font-family: var(--font-display); font-weight: 400;
  font-size: 16.5px; line-height: 1.3; letter-spacing: .07em;
  text-transform: uppercase; color: #fff;
}
.panel-descriptor {
  margin-top: 4px;
  font-family: var(--font-display); font-style: italic;
  font-size: 12.5px; letter-spacing: .01em;
  color: var(--h-sky-light);
}

.panel-meta { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hairline-light); }
.panel-dates {
  font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.panel-theme {
  display: inline-block;
  margin-top: 8px; font-style: italic; font-size: 14px;
  color: rgba(245, 166, 35, .85);
  text-decoration: none;
}
a.panel-theme:hover, a.panel-theme:focus-visible {
  color: var(--h-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-foot { margin-top: auto; padding-bottom: 0; }
.panel-rule {
  display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--h-gold);
  margin: 0 auto;
}
.panel-org {
  font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  padding: 14px 0 18px;
  text-align: center;
}

/* ============================= CONTENT ============================= */
.content { min-width: 0; }

.welcome-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 10vh, 120px) clamp(20px, 4vw, 48px) 0;
}
.welcome-card {
  background: var(--h-white);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: var(--e-sheet);
  padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 64px);
}
.welcome-mark {
  width: 40px; height: 3px;
  background: var(--h-gold);
  margin-bottom: 28px;
}
.welcome-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.2;
  color: var(--h-navy-ink);
}
.welcome-title + .welcome-title {
  margin-top: 6px;
  color: var(--h-muted);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 30px);
}

/* --------------------------- details panel --------------------------
   Hidden until the URL carries at least one query parameter. It is a
   <div hidden> in the markup rather than CSS-hidden, so it stays hidden
   with JavaScript off instead of flashing and staying empty.
   -------------------------------------------------------------------- */
.details {
  margin-top: clamp(28px, 5vw, 44px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 1px solid var(--hairline);
}
.details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.details-table tr + tr th,
.details-table tr + tr td { border-top: 1px solid var(--hairline); }
.details-table th,
.details-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 0;
}
/* The label column sizes to its content (width:1% is the table-layout idiom
   for "as narrow as possible") rather than taking a fixed share. A fixed
   percentage left a single short row reading "NAME            Sam" with a
   gap across the card, which is the commonest case here - one parameter.
   Sized to content, the values line up just past the longest label however
   many rows there are. params.js caps a label at 40 characters, which is
   what keeps nowrap from squeezing the value column. */
.details-table th {
  width: 1%;
  padding-right: 32px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--h-subtle);
  white-space: nowrap;
}
.details-table td {
  width: 100%;
  color: var(--h-navy-ink);
  overflow-wrap: anywhere;
}
/* A parameter passed with no value (/nrc?name=) is still a parameter that
   was passed, so the row is kept and the empty cell is marked rather than
   left looking like a rendering fault. Decorative, and CSS-only, so it
   never reaches the text a screen reader announces as the value. */
.details-table td:empty::after {
  content: "–";
  color: var(--h-subtle);
}

/* ------------------------------- footer ------------------------------ */
.content-foot {
  max-width: 820px;
  margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 48px) 40px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--h-subtle);
}
.content-foot a { color: var(--h-indigo); text-decoration: none; }
.content-foot a:hover { text-decoration: underline; }

/* ------------------------------ responsive --------------------------- */
/* Desktop: centre the card in the remaining height, as the closed notice
   on the registration portal does. */
@media (min-width: 1081px) {
  .content { display: flex; flex-direction: column; min-height: 100svh; }
  .content > main { flex: 1; display: flex; align-items: center; }
  .welcome-wrap { width: 100%; padding-top: 0; padding-bottom: 0; }
}

@media (max-width: 1080px) {
  .app { display: block; position: relative; }

  /* navy banner */
  .panel-inner {
    position: static; height: auto;
    padding: 18px 20px 0;
  }
  .panel-brand { gap: 12px; }
  .panel-emblem { width: 42px; height: 42px; }
  .panel-word { font-size: 23px; }
  .panel-descriptor { font-size: 11.5px; margin-top: 2px; }
  .panel-meta {
    margin-top: 14px; padding: 12px 0 16px;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 6px 16px; flex-wrap: wrap;
  }
  .panel-dates { font-size: 11px; }
  .panel-theme { margin-top: 0; font-size: 12.5px; }
  .panel-foot { display: none; }

  .welcome-wrap { padding: clamp(24px, 5vw, 44px) clamp(16px, 3.5vw, 44px) 0; }
}

@media (max-width: 680px) {
  .content { background: var(--h-white); }
  .welcome-wrap { padding: 0; max-width: none; }
  .welcome-card {
    border: 0; border-radius: 0; box-shadow: none;
    padding: 32px 20px 40px;
  }
  .details-table { font-size: 14.5px; }
  /* Stacked on a phone, so the label is its own line and must be free to
     wrap again - nowrap from the desktop rule would overflow a narrow card. */
  .details-table th { width: auto; display: block; padding: 12px 0 2px; white-space: normal; }
  .details-table td { width: auto; display: block; padding: 0 0 12px; }
  .details-table tr + tr th { border-top: 1px solid var(--hairline); }
  .details-table tr + tr td { border-top: 0; }
  .content-foot {
    flex-direction: column; gap: 4px;
    padding: 22px 20px 34px;
    background: var(--h-paper);
    margin: 0; max-width: none;
    border-top: 1px solid var(--hairline);
  }
}