/*
 * Type roles (Operate surface — a payer scanning fee categories and paying one).
 * Raleway: brand wordmark, section/item titles, column labels, primary buttons.
 * Roboto: body copy, fee titles, amounts, metadata — matching www.cosecsa.org.
 * Only the weights actually assigned below are loaded (partials/head-assets.php).
 */
body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand, .nav-link, .btn,
.card-title, .card-header {
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
}

/* COSECSA red — matches the .jesus class already used across payments.cosecsa.org. */
.jesus {
  background-color: #a02626 !important;
  color: #fff !important;
}
.btn.jesus {
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.btn.jesus:hover {
  background-color: #7e1e1e !important;
  color: #fff !important;
}
/* Secondary nav shortcuts (Conference Fees, IRB & DGG Fees, All Payments) — one
   step lighter than the primary Pay action, still a deliberate loaded weight. */
.btn.btn-dark {
  font-weight: 600;
  min-height: 44px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.btn1 { margin-right: 10px; }

/* The mobile menu toggle was nearly invisible: Bootstrap's default hamburger icon is
   a dark, semi-transparent stroke meant for light backgrounds, rendered here on a red
   one. Explicit black button + solid white icon so it actually reads as a control. */
.navbar-toggler {
  background-color: #000;
  border-color: #000;
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
}
.navbar-toggler:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* One focus style everywhere: a white ring against the element, a dark ring outside
   that. Whichever half sits on a matching background, the other one still shows —
   this is the one thing that has to work on both the white page and the red navbar.
   Replaces Bootstrap's default blue ring, which read as broken on the red button. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #21201f;
  border-radius: 3px;
}

/* Bottom bar is running metadata (version, copyright), not a second wordmark.
   Roboto here is inherited from body — this sits outside any Raleway-forced
   ancestor, so no override is needed. */
.footer-meta {
  font-size: 0.875rem;
  color: #f8d9d9;
}
.footer-meta-link {
  color: #fff;
  font-weight: 500;
}

/* Secondary navigation (e.g. "Back to payments") reads as quiet wayfinding, not a
   branded call to action — deliberately opts out of the Raleway/bold button role. */
.btn-link {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

/* Brand wordmark. */
.navbar-brand {
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Nav shortcuts inside the collapsible menu — same weight as the .btn-dark ones. */
.nav-link {
  font-weight: 600;
}

/* Section title (index) and item title (checkout) share one role: both are the
   h3.card-title inside a .card-header.jesus. */
.card-header.jesus .card-title {
  color: #fff;
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
}

main, .container { padding-bottom: 2rem; }

/* Column labels. */
.table thead th {
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b5352;
}
.table thead th { border-bottom-width: 1px; }

/* Fee row title — a labelled row, one step heavier than plain body text. */
.fee-title {
  font-weight: 500;
}

/* Fee amount — the number a payer is actually scanning the column for. */
.fee-amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Metadata — deadlines, surcharge notes: one shared size/weight/color. Italic is
   reserved for the disabled/unavailable state so it still carries distinct meaning. */
.listed-note,
.muted-note {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #6c757d;
}
.listed-note { margin-top: 0.15rem; }
.muted-note { font-style: italic; display: inline-block; }

/* ---- checkout.php ---- */
.checkout-card { max-width: 640px; margin: 0 auto; }
.checkout-card .card-header.jesus { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.checkout-card .amount-display {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.secure-note { font-size: 0.8125rem; color: #6c757d; margin-top: 1rem; }

.payment-message {
  font-size: 0.95rem;
  margin-top: 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 4px;
}
.payment-message.info    { background: #f1eeea; color: #5a534f; }
.payment-message.error   { background: #fbeae7; color: #a5392c; }
.payment-message.success { background: #e7f1e4; color: #2f6b3a; }

.payment-buttons, .payment-form { margin-top: 1rem; }