/*
 * Site styles for the hand-written pages in website/public/.
 *
 * These rules MUST live in this file rather than in an inline <style> block.
 * CloudFront serves a Content-Security-Policy of
 *   style-src 'self' stackpath.bootstrapcdn.com
 * (see website/cdk/lib/static-site-stack.ts), which has no 'unsafe-inline'.
 * Any <style> block is silently refused by the browser -- the page still
 * loads, so the breakage is invisible unless you check the console.
 *
 * Load this AFTER the Bootstrap stylesheet so these rules win on ties.
 */

/* ---------- index.html: hero ---------- */

/* Bootstrap's .jumbotron ships 4rem of top padding, which left the photo
   floating well below the green banner. */
.hero {
  padding-top: 0.25rem;
}

.hero-media {
  margin-right: auto;
  margin-left: auto;
}

/* Cap the hero photo on desktop only. Below 768px every container is already
   narrower than this cap, and the phone rendering is the one the commissioner
   said looked right, so it is left alone deliberately. */
@media (min-width: 768px) {
  .hero-media {
    max-width: 560px;
  }
}

/* ---------- code-of-conduct.html ---------- */

.agreement {
  max-width: 46rem;
}

.agreement section {
  margin-bottom: 3rem;
}

.agreement h2 {
  font-size: 1.5rem;
}

.agreement .section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.agreement ol {
  padding-left: 1.25rem;
}

.agreement ol > li {
  margin-bottom: 1rem;
}

/* ---------- commissioner-notes.html ---------- */

/* Holds the notes to a comfortable reading width. This was a style=""
   attribute, which the CSP refuses just as it refuses <style> blocks. */
.notes-body {
  max-width: 46rem;
}

.note-card {
  border-left: 4px solid #28a745;
  padding: 0.25rem 0 0.25rem 1rem;
  margin-bottom: 2rem;
}

.note-card.question {
  border-left-color: #ffc107;
}

.note-card.upcoming {
  border-left-color: #6c757d;
}

.asked {
  color: #6c757d;
  font-style: italic;
}

.was {
  text-decoration: line-through;
  color: #6c757d;
}

.now {
  font-weight: 600;
}

table.fees {
  max-width: 26rem;
}

.icon-showcase {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.icon-showcase figure {
  margin: 0;
  text-align: center;
}

.icon-showcase figcaption {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.5rem;
}

.tab-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e9eaed;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  color: #3c4043;
  white-space: nowrap;
}