/* ============================================================================
   UI Polish
   ============================================================================ */

.text-muted {
  color: var(--clr-text-muted);
}

/* Status words inside text, e.g. "Approved" */
.text-warning {
  color: var(--clr-warning-text);
}

.text-success {
  color: var(--clr-success-text);
}

.text-error {
  color: var(--clr-error-text);
}

/* Focus ring for unclassed buttons. .button has its own. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* On dark chrome the accent ring is 1.9:1, so white */
.navbar a:focus-visible,
.navbar button:focus-visible,
.footer a:focus-visible {
  outline-color: var(--clr-header-text);
}

/* ── Auth / Settings form components ─────────────────────────────────────── */
/* .form-card and .settings-section share forms.css rules */

.text-small {
  font-size: var(--text-md);
}

.settings-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
}

.settings-dl dt {
  font-weight: 500;
  color: var(--clr-text-muted);
  font-size: var(--text-base);
}

.settings-dl dd {
  overflow-wrap: anywhere;
}

/* ── Page layout helpers ──────────────────────────────────────────────────── */
/* Width caps for form pages */
main.container.page-narrow {
  max-width: 440px;
}
main.container.page-medium {
  max-width: 640px;
}
/* Long forms: apply, profile edit */
main.container.page-form {
  max-width: 680px;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.text-center {
  text-align: center;
}

/* ── Form helpers ─────────────────────────────────────────────────────────── */
/* Required field asterisk */
.required-mark {
  color: var(--clr-error);
}

/* The ring would outline the whole page */
#main:focus {
  outline: none;
}

/* Links that should not be blue: whole blocks and bold names */
.photographer-link,
.photographer-link:hover {
  color: var(--clr-text);
  text-decoration: none;
}

/* Paragraph of links centred below a form card */
.form-footer {
  text-align: center;
  margin-top: 1rem;
}

/* Inline field link aligned to the right (e.g. "Forgot password?") */
.field-link-right {
  text-align: right;
  margin-top: 0.25rem;
}

/* Primary form card: more top margin than the default .form-card */
.form-card--main {
  margin-top: 1.5rem;
  padding: 1.75rem 2rem 2rem;
}

/* A public form: sentence-case headings, not the members' micro-caps */
.form-card--main .form-section > h2 {
  font-size: var(--text-xl);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

/* A lead line tucks up under its heading */
.form-card--main .form-section > h2 + .help-text-lead {
  margin: -0.5rem 0 1.25rem;
}

@media (max-width: 600px) {
  .form-card--main {
    padding: 1.25rem 1rem;
  }
}

/* The two application forms, side by side when there is room */
.path-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1.25rem;
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
}

.path-card h2 {
  font-size: var(--text-xl);
}

.path-card p {
  flex: 1;
  color: var(--clr-text-muted);
}

.path-card .button {
  align-self: flex-start;
}

/* ── Settings layout ──────────────────────────────────────────────────────── */
.page-medium > h1 {
  margin-bottom: 1.75rem;
}

/* Button placed at the bottom of a card body */
.card-action {
  margin-top: 1rem;
}

/* Centred button row (hero, error pages), stacks on phones */
.button-row-center {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}