/* Eleventh Judicial Circuit — Process Server Portal
   Clean, modern, court-branded theme (Bootstrap 5 base + custom brand layer). */

: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: 88px;
    width: auto;
}

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

.site-header .user-box {
    justify-self: end;
}

.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: 0.95rem;
    opacity: 0.9;
}

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

.site-header .user-box {
    text-align: right;
    font-size: 0.9rem;
    min-width: 140px;
}

.site-header .user-box a,
.site-header .user-box .btn-link {
    color: var(--court-gold-2);
    text-decoration: none;
}

.site-header .user-box a:hover,
.site-header .user-box .btn-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* 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;
}

/* ---------- Nav ---------- */
.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--card-border);
    padding: 0.55rem 1.25rem;
    display: flex;
    gap: 1.5rem;
}

.site-nav a {
    color: var(--court-navy);
    text-decoration: none;
    font-weight: 600;
}

.site-nav a:hover {
    color: var(--court-gold);
}

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

/* Cards / form 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);
}

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

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

/* ---------- 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);
}

@media (max-width: 767px) {
    .site-header .header-inner { justify-content: center; text-align: center; }
    .site-header .user-box { text-align: center; }
}