/* Billerica Wiki theme: "Society Green" (Historical Society + Town Green), sans-serif article text.
   Loaded after Bootstrap 4 and wiki.css in layout.html. Colors live in the variables below. */
:root {
    --bw-green: #24563a;        /* header, panel bar, buttons */
    --bw-green-dark: #1b3d29;   /* headings, footer */
    --bw-link: #1f6b43;
    --bw-link-underline: #9cc3a8;
    --bw-brass: #b0903f;        /* rules under the header and above the footer */
    --bw-brass-text: #8a6a22;   /* small "kicker" line above titles */
    --bw-paper: #f7f2e6;        /* page background */
    --bw-panel: #fffdf7;        /* fact panel and cards */
    --bw-rule: #d3c49d;         /* panel borders, heading rules */
    --bw-rule-light: #ebe2cc;
    --bw-text: #262a22;
    --bw-muted: #6b604d;
    --bw-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --bw-sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- page ---------- */
body {
    background: var(--bw-paper);
    color: var(--bw-text);
    font-family: var(--bw-sans);
    font-size: 16px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main[role="main"] { flex: 1 0 auto; padding: 26px 0 40px; }
main > .container-fluid { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

a { color: var(--bw-link); text-decoration: underline; text-decoration-color: var(--bw-link-underline); text-underline-offset: 2px; }
a:hover { color: var(--bw-green-dark); text-decoration-color: currentColor; }

h1, h2, h3, h4, h5 { font-family: var(--bw-serif); color: var(--bw-green-dark); font-weight: 700; }
h1 { font-size: 2.1rem; line-height: 1.2; border-bottom: 1px solid var(--bw-rule); padding-bottom: 12px; margin-bottom: 20px; }
h4 { font-size: 1.3rem; margin-top: 1.4rem; }
h1 small, h1 .text-muted { font-size: 60%; font-weight: 400; color: var(--bw-muted) !important; }

/* small line above a page title, e.g. "Structure · Built 1700" */
.kicker {
    font-family: var(--bw-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bw-brass-text);
    margin: 0 0 4px;
}

/* comfortable reading width for article text (tables and image rows stay full width) */
main .col-md-9 > p, main .col-md-9 > ul, main .col-md-9 > ol, main .col-md-9 > blockquote,
main .col-md-9 > div > p { max-width: 46rem; }

.text-muted { color: var(--bw-muted) !important; }

/* ---------- header ---------- */
.site-nav {
    background: var(--bw-green);
    border-bottom: 4px solid var(--bw-brass);
    padding-top: 6px;
    padding-bottom: 6px;
}
.site-nav .navbar-brand {
    font-family: var(--bw-serif);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.1;
    color: #fbf7ec;
    text-decoration: none;
    margin-right: 1.6rem;
}
.site-nav .navbar-brand small {
    display: block;
    font-family: var(--bw-serif);
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e2cf96;
    margin-top: 3px;
}
.site-nav .nav-link {
    font-family: var(--bw-serif);
    font-variant: small-caps;
    letter-spacing: .02em;
    font-size: 15px;
    color: #eaf1e6 !important;
    text-decoration: none;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
}
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: #fff !important; text-decoration: underline; text-decoration-color: var(--bw-brass); }
.site-nav .navbar-toggler { border-color: rgba(255,255,255,.35); }
.site-search .typeahead, .site-search .tt-input, .site-search .tt-hint { width: 260px !important; }
.site-search .form-control {
    background: #fbf7ec;
    border: 1px solid #5f7f66;
    border-radius: 3px;
    font-size: 14px;
}
.site-search .form-control:focus { box-shadow: 0 0 0 3px rgba(176,144,63,.35); border-color: var(--bw-brass); }
.site-search .btn { color: #eaf1e6; border-color: rgba(255,255,255,.4); }
@media (max-width: 1199.98px) {
    .site-search { margin-top: 8px; }
    .site-search .typeahead, .site-search .tt-input, .site-search .tt-hint { width: 100% !important; }
    .site-search .twitter-typeahead { width: calc(100% - 60px); }
}

/* search suggestions */
.tt-menu { width: 360px; border-radius: 6px; background: var(--bw-panel); border: 1px solid var(--bw-rule); }
.tt-suggestion { font-size: 15px; padding: 4px 14px; }
.tt-suggestion strong { font-weight: 600; }
.tt-suggestion:hover, .tt-suggestion.tt-cursor { color: #fff; background-color: var(--bw-green); }

/* ---------- fact panel (the card beside each article) ---------- */
@media only screen and (min-width: 768px) {
    /* wiki.css pinned the panel 75px from the top, under a wrapping menu; let the grid place it */
    .card-container { position: static; right: auto; top: auto; }
}
.card-container .card {
    background: var(--bw-panel);
    border: 1px solid var(--bw-rule);
    border-top: 4px solid var(--bw-green);
    border-radius: 0;
    box-shadow: none;
}
.card-container .card-body { padding: 12px; }
.card-container .card-title {
    font-family: var(--bw-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bw-green-dark);
    margin-bottom: 10px;
}
.card-container .figure-caption, .figure-caption {
    font-family: var(--bw-serif);
    font-style: italic;
    color: var(--bw-muted);
    font-size: 12px;
}
.card-container table { font-size: 13.5px; margin-bottom: 0; }
.card-container .table td { border-top: 1px solid var(--bw-rule-light); padding: 6px 4px; }
.card-container .table td.font-weight-bold { color: #46503f; font-weight: 600 !important; }

/* ---------- other cards (welcome page, lists) ---------- */
.card { background: var(--bw-panel); border: 1px solid var(--bw-rule); border-radius: 4px; }
.card .card-title { font-family: var(--bw-serif); }
.card .card-title a { text-decoration: none; color: var(--bw-green-dark); }
.card .card-title a:hover { text-decoration: underline; }
.card.border-success { border: 1px solid var(--bw-rule) !important; border-top: 4px solid var(--bw-green) !important; }

/* ---------- buttons ---------- */
.btn-success, .btn-primary { background: var(--bw-green); border-color: var(--bw-green); color: #fff; text-decoration: none; }
.btn-success:hover, .btn-primary:hover { background: var(--bw-green-dark); border-color: var(--bw-green-dark); color: #fff; }
.btn-outline-success { color: var(--bw-green); border-color: var(--bw-green); text-decoration: none; }
.btn-outline-success:hover { background: var(--bw-green); border-color: var(--bw-green); color: #fff; }
.btn-link { color: var(--bw-link); }

/* ---------- tables and list pages ---------- */
.table { color: var(--bw-text); }
.table thead th { border-bottom: 2px solid var(--bw-rule); font-weight: 600; color: var(--bw-green-dark); }
.table td, .table th { border-top-color: var(--bw-rule-light); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--bw-rule-light); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(36, 86, 58, .04); }
table.dataTable { background: var(--bw-panel); }
.page-item.active .page-link { background-color: var(--bw-green); border-color: var(--bw-green); }
.page-link { color: var(--bw-link); text-decoration: none; }
.dataTables_wrapper .form-control { background: #fffdf7; border-color: var(--bw-rule); }

/* ---------- footer ---------- */
.site-footer {
    flex-shrink: 0;
    background: var(--bw-green-dark);
    color: #d6e2d2;
    border-top: 4px solid var(--bw-brass);
    text-align: center;
    font-size: 13px;
    padding: 14px 16px;
}
.site-footer a { color: #e8d595; }
.site-footer a:hover { color: #fff; }

/* ---------- flash messages ---------- */
.flash { max-width: 1240px; margin: 0 auto 12px; }

/* Collapsed menu: brand on the left, menu button on the right */
@media (max-width: 1199.98px) {
  .site-nav .navbar-brand { order: 1; margin-right: auto; }
  .site-nav .navbar-toggler { order: 2; }
  .site-nav .navbar-collapse { order: 3; }
}