/*
 * Keystones — Athenaeum Digital
 * Design system for oral histories of Philadelphia architects.
 *
 * Goals: minimal chrome, a quiet archival palette, scholarly serif display
 * type, hairline rules instead of heavy cards/shadows. Loaded LAST in the
 * layout so these rules win over Bootstrap and the search-feature CSS.
 */

:root {
    /* Palette — warm paper, ink, a single muted slate-blue accent (blueprint) */
    --ka-paper:        #f7f5f1;
    --ka-paper-sunk:   #efece5;
    --ka-ink:          #1c1e22;
    --ka-muted:        #6f6b63;
    --ka-rule:         #e2ddd4;
    --ka-accent:       #38505f;
    --ka-accent-dark:  #283b47;

    --ka-serif: "Spectral", Georgia, "Times New Roman", serif;

    /* Map Bootstrap tokens onto the palette */
    --bs-primary:           var(--ka-accent);
    --bs-primary-rgb:       56, 80, 95;
    --bs-body-color:        var(--ka-ink);
    --bs-body-color-rgb:    28, 30, 34;
    --bs-body-bg:           var(--ka-paper);
    --bs-link-color:        var(--ka-accent);
    --bs-link-color-rgb:    56, 80, 95;
    --bs-link-hover-color:  var(--ka-accent-dark);
    --bs-border-color:      var(--ka-rule);
    --bs-border-radius:        .25rem;
    --bs-border-radius-sm:     .2rem;
    --bs-border-radius-lg:     .3rem;
    --bs-border-radius-pill:   .3rem;   /* tame the pill buttons used in markup */
}

body {
    background-color: var(--ka-paper);
    color: var(--ka-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---- Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--ka-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ka-ink);
}

.display-3, .display-4, .display-5 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Breathing room above section headings — generous top margin so h2/h3
   open a clear new section; collapses at the top of a flow via :first-child. */
h2, .h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}
h3, .h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
}
h2:first-child, .h2:first-child,
h3:first-child, .h3:first-child {
    margin-top: 0;
}

.lead {
    font-weight: 400;
    color: var(--ka-muted);
}

a {
    text-underline-offset: 2px;
}

/* ---- Neutralize Bootstrap's contextual colors ------------------------ */
/* Templates sprinkle success/info/secondary around; fold them into the
   archival palette so nothing reads as stock Bootstrap. */

.text-primary { color: var(--ka-accent) !important; }
.text-success,
.text-info,
.text-secondary { color: var(--ka-muted) !important; }

.bg-primary { background-color: var(--ka-accent) !important; }
.bg-dark    { background-color: var(--ka-ink) !important; }

.btn-primary,
.btn-success,
.btn-info {
    --bs-btn-bg: var(--ka-accent);
    --bs-btn-border-color: var(--ka-accent);
    --bs-btn-hover-bg: var(--ka-accent-dark);
    --bs-btn-hover-border-color: var(--ka-accent-dark);
    --bs-btn-active-bg: var(--ka-accent-dark);
    --bs-btn-active-border-color: var(--ka-accent-dark);
    --bs-btn-disabled-bg: var(--ka-accent);
    --bs-btn-disabled-border-color: var(--ka-accent);
    color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--ka-accent);
    --bs-btn-border-color: var(--ka-accent);
    --bs-btn-hover-bg: var(--ka-accent);
    --bs-btn-hover-border-color: var(--ka-accent);
    --bs-btn-active-bg: var(--ka-accent);
}

.badge.bg-secondary,
.badge.bg-light {
    background-color: var(--ka-paper-sunk) !important;
    color: var(--ka-muted) !important;
    font-weight: 500;
}

/* ---- Minimal chrome -------------------------------------------------- */
/* Hairlines over shadows; flatten the lift-on-hover card animations. */

.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }

.site-header .navbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--ka-rule);
    background-color: var(--ka-paper) !important;
}

.navbar-brand { padding: 0; }

/* Full lockup logo (horizontal ~3.45:1). Height drives the size; width auto. */
.site-logo {
    height: 100px;
    width: auto;
    max-width: 100%;
}
@media (max-width: 575.98px) {
    .site-logo { height: 64px; }
}

.footer-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
}

.navbar .nav-link {
    color: var(--ka-ink);
    font-size: .95rem;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--ka-accent); }

.card {
    border: 1px solid var(--ka-rule);
    background-color: #fff;
    border-radius: var(--bs-border-radius);
    transition: none !important;
}
.card:hover { transform: none !important; box-shadow: none !important; }

/* Section bands that templates render with bg-light: make them warm, flat */
.bg-light { background-color: var(--ka-paper-sunk) !important; }

/* ---- Content width & rhythm ------------------------------------------ */

#content { padding-bottom: 3rem; }

.page-content,
.browse-controls,
.resource-list { font-size: 1rem; }

/* Resource (item show) body copy a touch larger for reading transcripts */
.property .value,
.resource-values .value { line-height: 1.6; }

/* ---- Item cards (browse) --------------------------------------------- */

.item-card .card-title a { color: var(--ka-ink) !important; }
.item-card .card-title a:hover { color: var(--ka-accent) !important; }

/* ---- Pagination ------------------------------------------------------ */

.pagination { justify-content: center; }
.page-link {
    color: var(--ka-accent);
    border-color: var(--ka-rule);
}
.page-item.active .page-link {
    background-color: var(--ka-accent);
    border-color: var(--ka-accent);
}

/* ---- Footer ---------------------------------------------------------- */

.site-footer {
    background-color: var(--ka-paper) !important;
    color: var(--ka-muted) !important;
    border-top: 1px solid var(--ka-rule);
}
.site-footer a { color: var(--ka-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ka-accent); }
.site-footer h5, .site-footer h6 { color: var(--ka-ink); }