:root {
    --bs-body-font-family: 'EB Garamond', 'Times New Roman', serif;
    --bs-body-font-size: 1.0625rem; /* EB Garamond reads more comfortably at 17px */
    --bs-primary: #1E3A5F;              /* Prussian blue */
    --bs-primary-rgb: 30, 58, 95;
    --bs-link-color: #1E3A5F;
    --bs-link-hover-color: #16304f;
    /* Keep text-muted legible against parchment-over-card backgrounds */
    --bs-secondary-color: rgba(45, 34, 21, 0.72);
    --berthier-accent: #8B2020;         /* Artillery red/crimson */
    --berthier-accent-hover: #6e1919;
}

/* Playfair Display for headings — period-appropriate display face */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Playfair Display', 'Times New Roman', serif;
}

/* Hero banner - full-width, carousel-inspired */
.hero-banner {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -1.5rem; /* cancel Page container's py-4 top padding so hero meets nav */
    width: 100vw;
    /* Place a public-domain Napoleonic campaign map at /img/hero-map.jpg to enable the
       period map background. The gradient is a clean standalone fallback without it. */
    background: linear-gradient(180deg, rgba(22, 45, 74, 0.92) 0%, rgba(14, 30, 48, 0.97) 100%),
                url('/img/hero-map.jpg');
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-banner-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.hero-logo {
    max-width: min(95vw, 950px);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.hero-tagline {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-links a:hover {
    color: white !important;
}

/* Section motif — footer.png reused as a section divider; .section-motif-flipped mirrors it */
.section-motif {
    display: block;
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    opacity: 0.55;
}

.section-motif-flipped {
    transform: scaleY(-1);
}

body {
    font-family: 'EB Garamond', 'Times New Roman', serif;
    background-image: url('/img/parchment-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: #2d2215;
    overflow-x: scroll; /* Show horizontal scrollbar */
}

.table>:not(caption)>*>* {
    background-color: rgba(255,255,255,0.72) !important;
}

.card {
    background-color: rgba(255,255,255,0.72) !important;
}

.list-group-item {
    background-color: rgba(255,255,255,0.72) !important;
}

.accordion-item {
    background-color: rgba(255,255,255,0.72) !important;
}

a {
    text-decoration: none !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #16304f;
    --bs-btn-hover-border-color: #16304f;
    --bs-btn-active-bg: var(--berthier-accent);
    --bs-btn-active-border-color: var(--berthier-accent);
    --bs-btn-focus-shadow-rgb: 30, 58, 95;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--berthier-accent);
    --bs-btn-active-border-color: var(--berthier-accent);
    --bs-btn-focus-shadow-rgb: 30, 58, 95;
}

.markdown-body img,
.article-body img {
    display: block;
    margin: 0 auto 1.25rem;
    max-width: min(100%, 720px);
    max-height: 540px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.oob-command-line,
.oob-unit-line {
    line-height: 1.2;
}

.map-editor-canvas svg [data-feature-id] {
    cursor: grab;
}

.map-editor-canvas svg text[data-feature-id] {
    cursor: default;
}

.map-editor-canvas.map-editor-dragging svg [data-feature-id] {
    cursor: grabbing;
}

a[href^="//"]:not(.officer-blob-glightbox):after,
a[href^="http://"]:not(.officer-blob-glightbox):after,
a[href^="https://"]:not(.officer-blob-glightbox):after {
  content: url('/img/external-link.svg');
  margin: 0 0 0 5px;
}

pre {
    white-space: pre-wrap;   /* Preserve formatting but allow wrapping */
    word-wrap: break-word;   /* Break long words if needed */
}

/* Index tables: fixed column widths so columns don't resize when sort/content changes */
.table-index-fixed {
    table-layout: fixed;
    width: 100%;
}

/* On mobile/tablet, switch to auto layout so hidden columns (d-none d-*-table-cell) collapse
   instead of leaving dead whitespace from their colgroup percentage widths */
@media (max-width: 991.98px) {
    .table-index-fixed {
        table-layout: auto;
    }
    /* Reset fixed col widths so hidden columns don't leave dead whitespace */
    .table-index-fixed col {
        width: auto !important;
    }
}

/* On mobile, the nav-justified tab bar would squish many tabs to ~49px each.
   Switch to a horizontally-scrollable single row instead. */
@media (max-width: 767.98px) {
    .nav-tabs.nav-justified {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs.nav-justified > .nav-item {
        flex: 0 0 auto;
    }
}

/* Period-style double-rule section headings — 18th-century printing convention */
.section-heading {
    border-bottom: 3px double rgba(30, 58, 95, 0.3);
    padding-bottom: 0.4rem;
    margin-bottom: 1.25rem;
}

/* "New here?" banner for logged-out visitors */
.new-here-banner {
    background-color: #f0e8d5;
    border-bottom: 1px solid rgba(30, 58, 95, 0.2);
    font-size: 0.9rem;
}

/* Footer motif — larger and more prominent */
.footer-motif {
    max-height: 200px;
    width: 100%;
    object-fit: contain;
}