/* =====================================================================
   howcanwehelp.nac.church - National Rectors Conference welcome page

   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)
   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 two separately
   deployed sites in two 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.
   ===================================================================== */

/* ------------------------------ 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);
  }
}