/* Eleventh Judicial Circuit — Mental Health Awareness Training
   Clean, modern, court-branded theme (Bootstrap 5 base + custom brand layer).
   Shares the navy + gold palette used by the Process Server Portal. */

:root {
    --court-navy: #10233f;
    --court-navy-2: #1b3a6b;
    --court-gold: #c9a227;
    --court-gold-2: #e0be4e;
    --page-bg: #f4f6f9;
    --ink: #1f2937;
    --muted: #6b7280;
    --card-border: #e6e9ef;
}

html, body {
    height: 100%;
}

body {
    background: var(--page-bg);
    color: var(--ink);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Header ---------- */
.site-header {
    background: linear-gradient(180deg, var(--court-navy) 0%, var(--court-navy-2) 100%);
    border-bottom: 3px solid var(--court-gold);
    color: #fff;
}

.site-header .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* equal sides keep the title page-centered */
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 1.25rem;
}

.site-header .brand-logo {
    justify-self: start;
}

.site-header .brand-logo img {
    max-height: 96px;
    width: auto;
}

.site-header .brand-title {
    justify-self: center;
    text-align: center;
    line-height: 1.35;
}

.site-header .brand-title .agency {
    font-size: 0.85rem;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--court-gold-2);
}

.site-header .brand-title .division {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.site-header .brand-title .subdivision {
    font-size: 0.9rem;
    opacity: 0.9;
}

.site-header .brand-title .app-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 0.15rem;
}

/* Test-site ribbon */
.test-ribbon {
    background: #fff3cd;
    color: #7a5b00;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 0.25rem;
    border-bottom: 1px solid #f2e2a8;
}

/* ---------- Main ---------- */
.site-main {
    flex: 1 0 auto;
    padding: 2rem 1rem;
}

/* Wide content area (course table). Forms opt back into a narrower width
   via .form-card so their fields do not stretch uncomfortably. */
.site-main .page-wrap {
    width: 95%;
    max-width: 1700px;
    margin-inline: auto;
}

.form-card {
    max-width: 960px;
    margin-inline: auto;
}

/* Cards / panels */
.card {
    border: 1px solid var(--card-border);
    border-radius: 0.6rem;
    box-shadow: 0 2px 10px rgba(16, 35, 63, 0.06);
}

.card-header {
    background: #fff;
    border-bottom: 2px solid var(--court-gold);
    font-weight: 700;
    color: var(--court-navy);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--court-navy);
    --bs-btn-border-color: var(--court-navy);
    --bs-btn-hover-bg: var(--court-navy-2);
    --bs-btn-hover-border-color: var(--court-navy-2);
    --bs-btn-active-bg: var(--court-navy-2);
    --bs-btn-active-border-color: var(--court-navy-2);
}

.btn-success {
    --bs-btn-bg: #2f7d4f;
    --bs-btn-border-color: #2f7d4f;
    --bs-btn-hover-bg: #276a43;
    --bs-btn-hover-border-color: #276a43;
    --bs-btn-active-bg: #276a43;
    --bs-btn-active-border-color: #276a43;
}

a {
    color: var(--court-navy-2);
}

a:hover {
    color: var(--court-navy);
}

/* Course table. Slightly smaller type packs the long description into fewer
   lines (shorter rows) while leaving the other columns room to breathe. */
.course-table {
    font-size: 0.9rem;
}

.course-table thead th {
    color: var(--court-navy);
    vertical-align: bottom;
}

.course-table td {
    vertical-align: middle;
}

/* The description is long prose; give it a generous share but not so much
   that the other columns collapse. */
.course-table .course-desc {
    width: 55%;
    line-height: 1.45;
}

/* Course name and location wrap to a couple of lines instead of many. */
.course-table th:first-child,
.course-table td:first-child {
    min-width: 120px;
}

.course-table .col-location {
    min-width: 130px;
}

/* Short columns stay on a single line (their values are narrow). */
.course-table .col-nowrap {
    white-space: nowrap;
}

/* Forms */
.validation-error {
    color: #dc3545;
    font-size: .875em;
    display: block;
}

/* Result pages (error / success) */
.error-icon {
    color: var(--court-gold);
    line-height: 0;
}

.success-icon {
    color: #2f7d4f;
    line-height: 0;
}

.error-icon svg,
.success-icon svg {
    width: 64px;
    height: 64px;
}

.result-title {
    color: var(--court-navy);
    font-weight: 700;
}

.reference-box {
    display: inline-block;
    background: var(--page-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.75rem;
}

.reference-box .reference-label {
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.15rem;
}

.reference-box .reference-value {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--court-navy);
    letter-spacing: 1px;
}

/* ---------- Footer ---------- */
.site-footer {
    flex-shrink: 0;
    background: var(--court-navy);
    color: #dbe2ee;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    border-top: 3px solid var(--court-gold);
}

.site-footer .footer-sep {
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px solid #3a5480;
}

@media (max-width: 767px) {
    .site-header .header-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}