/* Full-width white band with an edge-to-edge hairline. */
.site-header {
  background: var(--card);
  border-block-end: 1px solid var(--line);
}
.site-header .header-row { padding-block: var(--space-3) 14px; }

.header-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-image);
  text-decoration: none;
}
.brand-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.25;
}
.brand-wordmark {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-tagline {
  display: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}
@media (min-width: 640px) {
  .brand-tagline { display: block; }
}

.brand-logo {
  inline-size: var(--space-12);
  block-size: var(--space-12);
  object-fit: contain;
}

.sidebar .header-search { margin-block: var(--space-4) var(--space-5); inline-size: 100%; }
.mobile-search { margin-block: var(--space-3) var(--space-2); }
@media (min-width: 800px) {
  .mobile-search { display: none; }
}
.header-search {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  inline-size: min(100%, 420px);
  min-block-size: var(--touch-target);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--card);
}

.header-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.header-search .search-icon {
  margin-inline-start: var(--space-4);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
}

.header-search input {
  flex: 1;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 42px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
}

.header-search input::placeholder { color: var(--muted); opacity: 1; }
.header-search input:focus-visible { outline: none; }

.auth-nav {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-inline-size: 0;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.auth-nav a, .quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-8);
  padding-inline: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-nav form { display: inline-flex; }

.header-post-button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--touch-target);
  padding: 7px var(--space-3);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--card);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 120ms ease;
}

.header-post-full { display: none; }
.header-post-compact { display: inline; }
.header-post-button:active { transform: translateY(1px); }

.account-menu { position: relative; }

.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: var(--touch-target);
  max-inline-size: 12ch;
  padding-inline: var(--space-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.account-menu-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-chevron {
  flex: 0 0 var(--space-4);
  transition: transform 150ms ease;
}

.account-menu-trigger[aria-expanded="true"] {
  border-color: var(--control-line);
  background: var(--card);
}

.account-menu-trigger[aria-expanded="true"] .account-menu-chevron { transform: rotate(180deg); }

.account-menu-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: 20;
  inline-size: min(var(--measure-menu), calc(100vw - (var(--space-4) * 2)));
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}

.account-menu-panel[hidden] { display: none; }

.account-menu-panel > a,
.account-menu-sign-out {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  inline-size: 100%;
  min-block-size: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-image);
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  text-align: start;
  text-decoration: none;
}

.account-menu-panel form { display: block; }
.account-menu-sign-out { font-weight: 400; }

.mobile-church-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-block-size: 40px;
  padding-block: 7px;
  border-block-end: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.mobile-church-line img { flex: 0 0 18px; object-fit: contain; }

.mobile-church-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-church-line a { min-block-size: 24px; }
.mobile-find-church { font-weight: 700; }

.sidebar { display: none; }

.pill, .quiet-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-block-size: 38px;
  padding: 7px var(--space-4);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.pill.active, .quiet-pill.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--card);
}

.ring-switcher, .category-pills, .campus-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-block: 18px 6px;
  scrollbar-width: thin;
  scroll-snap-type: inline proximity;
}

.ring-switcher { padding-block-end: 0; }
.ring-switcher > *, .category-pills > *, .campus-pills > * { scroll-snap-align: start; }

.primary-button, .secondary-button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  min-inline-size: min(100%, 180px);
  max-inline-size: min(100%, 420px);
  min-block-size: 40px;
  padding: var(--space-2) 18px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.primary-button, input[type="submit"] { background: var(--accent); color: var(--card); }

.secondary-button {
  border-color: var(--control-line);
  background: var(--card);
  color: var(--ink);
}

.primary-button:active, input[type="submit"]:active, .pill:active { transform: translateY(1px); }
.secondary-button:active, .quiet-button:active,
.account-menu-trigger:active, .account-menu-panel > a:active, .account-menu-sign-out:active {
  background: var(--soft-accent);
  color: var(--ink);
}

.field { margin-block: 0 18px; }

.field label, fieldset legend, .church-search > label {
  display: block;
  margin-block-end: 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select) {
  inline-size: 100%;
  max-inline-size: min(100%, 420px);
  min-block-size: var(--touch-target);
  padding: 10px var(--space-3);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-image);
  background: var(--card);
  color: var(--ink);
}

textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 160px;
  padding: 10px var(--space-3);
  border: 1.5px solid var(--control-line);
  border-radius: var(--radius-image);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}

input[maxlength="2"] { inline-size: 8ch; }
input[inputmode="decimal"] { inline-size: min(100%, 12ch); }

.password-field {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  inline-size: min(100%, 420px);
}
.password-field input { flex: 1; min-inline-size: 0; padding-inline: var(--space-3); }
.password-toggle-button {
  display: inline-flex;
  flex: 0 0 var(--touch-target);
  align-items: center;
  justify-content: center;
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  border: 1.5px solid var(--control-line);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
}
.password-toggle-button .eye-closed { display: none; }
.password-field.is-visible .eye-open { display: none; }
.password-field.is-visible .eye-closed { display: inline; }

input:hover, select:hover, textarea:hover { border-color: var(--muted); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

fieldset {
  min-inline-size: 0;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

fieldset legend { padding-inline: var(--space-1); }
fieldset > .hint:first-of-type, fieldset > p:first-of-type { margin-block-start: 0; }

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-block-end: var(--space-4);
}

.radio-group label, .checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-8);
}

input[type="checkbox"], input[type="radio"] { inline-size: 20px; block-size: 20px; accent-color: var(--accent); }

.hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.flash {
  margin-block: var(--space-3);
  padding: 9px 14px;
  border-radius: var(--radius-image);
  font-size: 0.9rem;
}

.flash-notice { background: var(--soft-accent); color: var(--accent); }
.flash-alert { background: var(--danger-bg); color: var(--danger); }

.vcheck {
  display: inline-flex;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--card);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
}

.form-panel {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--card);
}

.form-heading h1 { margin-block-end: 7px; font-size: 1.45rem; }
.form-heading p { margin-block-end: 22px; color: var(--muted); }

.form-errors {
  margin-block-end: var(--space-5);
  padding: 14px var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-image);
  background: var(--danger-bg);
  color: var(--danger);
}

.form-errors h2 { margin-block-end: var(--space-2); font-size: 1rem; }
.form-errors ul { margin: 0; padding-inline-start: var(--space-5); }
.form-errors a { color: var(--danger); }
.form-errors p { margin: var(--space-2) 0 0; }

.main-content .stacked-form { max-inline-size: var(--measure-form); }
.stacked-form > .primary-button, .stacked-form > input[type="submit"], .stacked-form > .secondary-button {
  justify-self: start;
  padding-inline: var(--space-8);
}
.stacked-form .checkbox-field { display: flex; align-items: baseline; gap: var(--space-2); margin-block: 0 var(--space-3); }
.checkbox-subordinate { margin-inline-start: var(--space-6); }
.form-link { margin-block: 18px 0; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .password-toggle-button:hover { color: var(--ink); background: var(--soft-accent); }
  .pill:hover, .quiet-pill:hover, .secondary-button:hover { background: var(--soft-accent); }
  .auth-nav a:hover, .quiet-button:hover, .sidebar-change a:hover { color: var(--ink); }
  .account-menu-trigger:hover, .account-menu-panel > a:hover, .account-menu-sign-out:hover { background: var(--soft-accent); }
  .sidebar-link:hover, .sidebar-church-link:hover, .sidebar-find-church:hover { background: var(--soft-accent); }
  .pill.active:hover, .quiet-pill.active:hover, .primary-button:hover, .header-post-button:hover, input[type="submit"]:hover { background: var(--accent-hover); }
  /* Hovering a card underlines its text lines (price, title, church, city).
     No thumbnail lift animation (David 2026-08-21: felt gimmicky). */
  .listing-card-link:hover .listing-price,
  .listing-card-link:hover h3,
  .listing-card-link:hover .card-church,
  .listing-card-link:hover .card-city { text-decoration: underline; text-underline-offset: 2px; }
}

@media (min-width: 640px) {
  .site-header { padding-block: 18px; }

  .header-row {
    display: flex;
    gap: var(--space-6);
  }

  .brand-logo { inline-size: 64px; block-size: 64px; }
  .brand-wordmark { font-size: 1.35rem; }

  .header-post-button { margin-inline-start: auto; padding-inline: 18px; font-size: 0.9rem; }
  .header-post-full { display: inline; }
  .header-post-compact { display: none; }
  .auth-nav { margin-inline-start: 0; font-size: 0.9rem; }
  .account-menu-trigger { max-inline-size: 18ch; font-size: 0.9rem; }

  .form-panel { padding: 28px 30px; }
}

@media (min-width: 800px) {
  .mobile-church-line { display: none; }

  /* White rail, flush to the left edge, divider running the full page height.
     The rail itself stretches; the nav inside stays sticky. */
  .sidebar {
    display: block;
    flex: 0 0 320px;
    align-self: stretch;
    min-block-size: 70vh;
    margin-inline-start: -24px;
    padding: 18px var(--space-6) 0 var(--space-6);
    background: var(--card);
    border-inline-end: 1px solid var(--line);
  }
  .sidebar > nav { position: sticky; inset-block-start: var(--space-4); }

  .sidebar-church-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2) var(--space-1);
    color: var(--muted);
    font-size: 0.8rem;
  }

  .sidebar-church-label img { object-fit: contain; }

  .sidebar-church-link, .sidebar-link, .sidebar-find-church {
    display: flex;
    align-items: center;
    min-block-size: var(--space-8);
    padding: 6px var(--space-2);
    border-radius: var(--radius-image);
    color: var(--ink);
    font-size: 0.9rem;
    text-decoration: none;
  }

  .sidebar-church-link.active-church, .sidebar-link.on {
    background: var(--soft-accent);
    color: var(--accent);
    font-weight: 700;
  }

  .sidebar-church-copy { min-inline-size: 0; }

  .sidebar-church-name {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-inline-size: 0;
    white-space: nowrap;
  }

  .sidebar-church-name > :first-child { overflow: hidden; text-overflow: ellipsis; }

  .sidebar-church-city {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-change { padding: 2px var(--space-2); }

  .sidebar-change a {
    display: inline-flex;
    min-block-size: var(--space-6);
    color: var(--muted);
    font-size: 0.78rem;
  }

  .sidebar-find-church { color: var(--accent); font-weight: 700; }

  .sidebar-heading {
    margin: 18px 0 var(--space-2);
    padding-inline: var(--space-2);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

.friendly-steps { margin: 0 0 var(--space-5); padding-inline-start: 22px; }
.friendly-steps li { margin-block-end: var(--space-2); }

.stacked-form > .hint { margin-block: 0 var(--space-5); }