/* =========================================================
   County Warrant Records - reference template
   Dark charcoal header, oxblood accent, cool-gray ground,
   white "case-file" section cards. Class vocabulary is
   unique to this project (do not reuse sibling-network
   names).
   ========================================================= */

:root {
    --char: #26262b;
    --char-deep: #17171b;
    --char-soft: #3a3a42;
    --ox: #a32a29;
    --ox-deep: #7f1f1e;
    --ox-soft: #f6e5e4;
    --ink: #26262b;
    --ink-soft: #4c4c55;
    --ink-faint: #71717c;
    --white: #ffffff;
    --mist: #f3f4f6;
    --mist-deep: #e8eaee;
    --panel: #eceef2;
    --line: #d7dae1;
    --line-soft: #e6e8ee;
    --steel: #4a5568;
    --lift: 0 1px 2px rgba(23,23,27,.06);
    --lift-md: 0 6px 20px rgba(23,23,27,.10);
    --frame-max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.66;
    color: var(--ink);
    background: var(--mist);
}

h1, h2, h3, h4, h5 {
    font-family: 'Archivo', 'Arial Narrow', Arial, sans-serif;
    letter-spacing: -.2px;
}

a { color: var(--ox-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--char); }

img { max-width: 100%; height: auto; display: block; }

.frame {
    max-width: var(--frame-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* =========================================================
   HEADBAR - dark charcoal header, brand left, menu right,
   oxblood keel underneath
   ========================================================= */
.headbar {
    background: var(--char-deep);
    border-bottom: 3px solid var(--ox);
}

.headbar .frame {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand img { height: 40px; width: auto; }

.brand .name {
    font-family: 'Archivo', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.3px;
}

.mainmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.mainmenu a {
    padding: 8px 13px;
    color: #cdced6;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: color .15s, background .15s;
}

.mainmenu a:hover { color: #fff; background: var(--char-soft); }

.mainmenu a.on {
    color: #fff;
    background: var(--ox);
}

/* =========================================================
   BANNER - page hero (cool band), oxblood tick, strong H1
   ========================================================= */
.banner {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 30px 0 26px;
}

.banner .crumbs {
    font-size: 13px;
    color: var(--ink-faint);
    margin-bottom: 8px;
}

.banner .crumbs a { color: var(--steel); text-decoration: none; }
.banner .crumbs a:hover { text-decoration: underline; }

.banner h1 {
    font-size: 34px;
    font-weight: 800;
    color: var(--char);
    line-height: 1.12;
    padding-left: 14px;
    border-left: 5px solid var(--ox);
}

/* =========================================================
   INTRO - opening paragraph
   ========================================================= */
.intro {
    background: var(--white);
    padding: 24px 0 6px;
    border-bottom: 1px solid var(--line-soft);
}

.intro p {
    font-size: 17.5px;
    line-height: 1.66;
    color: var(--ink);
    max-width: 780px;
    margin: 0;
}

/* =========================================================
   FINDER - search band (holds the protected widget)
   ========================================================= */
.finder { padding: 22px 0; }

.finder-box {
    background: var(--char);
    border-radius: 8px;
    padding: 20px 22px 15px;
    box-shadow: var(--lift-md);
}

.finder-box h2 {
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -.2px;
}

.finder-note {
    font-size: 12px;
    color: #9a9aa4;
    margin-top: 9px;
}

/* =========================================================
   RECORDS - main single-column zone of file cards
   ========================================================= */
.records { padding: 12px 0 48px; }

.stack { max-width: 820px; }

/* each content section is a white "case file" card */
.filecard {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 4px solid var(--ox);
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 20px;
    box-shadow: var(--lift);
}

.filecard img {
    max-width: 100%;
    max-height: 430px;
    width: auto;
    height: auto;
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.filecard h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--char);
    line-height: 1.2;
    margin-bottom: 12px;
}

.filecard h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--char-soft);
    margin: 16px 0 8px;
}

.filecard p { margin-bottom: 13px; color: var(--ink-soft); }

.filecard ul, .filecard ol { margin: 11px 0 16px 22px; color: var(--ink-soft); }
.filecard li { margin-bottom: 6px; }

/* =========================================================
   TABLES
   .grid  = multi-column (filled header)
   .pairs = 2-column field/value
   ========================================================= */
.grid, .pairs {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0 20px;
    background: var(--white);
    border: 1px solid var(--line);
    font-size: 14.5px;
}

.grid th, .grid td, .pairs th, .pairs td {
    padding: 11px 13px;
    border: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.grid thead th {
    background: var(--char);
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.grid tbody tr:nth-child(odd) td { background: var(--mist); }

.pairs th {
    background: var(--mist-deep);
    color: var(--char);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    width: 34%;
}

/* warrant/case numbers get a stamped monospace chip */
.stamp {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: .9em;
    color: var(--ox-deep);
    background: var(--ox-soft);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: .3px;
}

/* =========================================================
   FLAGS (callouts)
   ========================================================= */
.flag {
    padding: 13px 16px;
    border-radius: 5px;
    margin: 15px 0;
    font-size: 15px;
    line-height: 1.58;
    border: 1px solid var(--line);
    border-left: 4px solid var(--steel);
    background: var(--mist);
    color: var(--ink);
}

.flag-key { border-left-color: var(--steel); background: var(--panel); color: var(--char); }
.flag-warn { border-left-color: var(--ox); background: var(--ox-soft); color: #5f1918; }
.flag-urgent { border-left-color: var(--ox-deep); background: #fbeceb; color: #5f1918; font-weight: 500; }

/* =========================================================
   GLOSSARY (definition list)
   ========================================================= */
.glossary {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 16px 18px;
    margin: 15px 0 20px;
}

.glossary dt { font-weight: 700; color: var(--char); margin-top: 10px; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin-left: 0; color: var(--ink-soft); font-size: 15px; }

/* =========================================================
   AGENCY CARDS (sheriff / court / clerk contact blocks)
   ========================================================= */
.agency-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 15px 0 20px;
}

.agency {
    background: var(--mist);
    border: 1px solid var(--line);
    border-top: 4px solid var(--char);
    border-radius: 5px;
    padding: 15px 17px;
}

.agency h4 { font-size: 15.5px; font-weight: 700; color: var(--char); margin-bottom: 7px; }
.agency p { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; line-height: 1.5; }
.agency .tel { color: var(--char); font-weight: 700; }

/* =========================================================
   STAT LINE (small figures row)
   ========================================================= */
.statline {
    background: var(--char);
    border-radius: 8px;
    padding: 18px 0;
    margin: 4px 0 8px;
}

.statline-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    text-align: center;
}

.statline .fig { font-family: 'Archivo', sans-serif; font-size: 26px; font-weight: 800; color: #fff; display: block; }
.statline .cap { font-size: 12px; color: #9a9aa4; text-transform: uppercase; letter-spacing: .7px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn-solid { background: var(--ox); color: #fff; }
.btn-solid:hover { background: var(--ox-deep); color: #fff; }
.btn-line { background: var(--white); color: var(--char); border: 1px solid var(--char); }
.btn-line:hover { background: var(--mist); }

/* =========================================================
   SEARCH WIDGET (markup injected by protected search.js -
   .search-widget / .search-form / .search-input /
   .search-select / .search-button names are FIXED)
   ========================================================= */
.search-widget { width: 100%; }

.search-widget .search-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.search-widget .search-input,
.search-widget .search-select {
    padding: 12px 13px;
    font-size: 15px;
    font-family: inherit;
    border: 1px solid #4a4a54;
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
}

.search-widget .search-input:focus,
.search-widget .search-select:focus {
    outline: none;
    border-color: var(--ox);
    box-shadow: 0 0 0 3px rgba(163,42,41,.25);
}

.search-widget .search-button {
    background: var(--ox);
    color: #fff;
    font-weight: 700;
    font-family: 'Archivo', sans-serif;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 12px 13px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.search-widget .search-button:hover { background: var(--ox-deep); }

/* =========================================================
   FOOTER - charcoal, columns, FCRA legal at bottom
   ========================================================= */
.sitefoot {
    background: var(--char-deep);
    color: #b9bac3;
    margin-top: 44px;
}

.foot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    padding: 34px 0 28px;
}

.foot-grid h5 {
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.foot-grid ul { list-style: none; }
.foot-grid li { margin-bottom: 7px; font-size: 14px; }
.foot-grid a { color: #b9bac3; text-decoration: none; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }

.foot-legal {
    border-top: 1px solid rgba(255,255,255,.13);
    padding: 16px 0;
    font-size: 12.5px;
    color: #8b8c96;
    line-height: 1.6;
}

.foot-legal strong { color: #d5d6dd; }

.foot-base {
    background: #101014;
    padding: 13px 0;
    text-align: center;
    font-size: 12px;
    color: #74757f;
}

.foot-base a { color: #8b8c96; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 760px) {
    .headbar .frame { justify-content: center; }
    .mainmenu a { padding: 7px 9px; font-size: 13px; }
    .banner h1 { font-size: 26px; }
    .filecard { padding: 18px 18px; }
    .filecard h2 { font-size: 21px; }
    .search-widget .search-form { grid-template-columns: 1fr; }
    .search-widget .search-button { padding: 14px; }
    .foot-grid { grid-template-columns: 1fr; gap: 22px; }
    .intro p { font-size: 16px; }
}