/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* Accent color variables (dark grey) */
:root {
    --accent-color: #374151;
    /* dark grey */
    --accent-hover: #111827;
    /* darker on hover */
    --accent-focus-ring: rgba(55, 65, 81, 0.12);
}

/* Warm off-white background for entire site */
html {
    background-color: #fefbf6;
}

/* Apply Crimson Text font to the entire website with higher specificity */
html,
body,
.quarto-container,
.quarto-content,
main,
p,
div,
span {
    font-family: 'Crimson Text', Georgia, 'Times New Roman', Times, serif !important;
    font-weight: 400;
    line-height: 1.6;
    background-color: #fefbf6;
}

/* Warm background for main content areas */
.quarto-container,
.quarto-content,
.page-content,
.content {
    background-color: #fefbf6;
}

/* Warm background for navbar */
.navbar {
    background-color: #fefbf6 !important;
    border-bottom: 1px solid #fefbf6;
}

/* Warm background for code blocks and figures */
.sourceCode,
pre,
code {
    background-color: #fefbf6 !important;
}

/* Warm background for any cards or panels */
.card,
.panel,
.callout {
    background-color: #fefbf6;
}

/* Style headings with the same font and higher specificity */
h1,
h2,
h3,
h4,
h5,
h6,
.quarto-title,
.quarto-title-block h1 {
    font-family: 'Crimson Text', Georgia, 'Times New Roman', Times, serif !important;
    font-weight: 600;
    line-height: 1.3;
}

/* Improve text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Style navigation with the font and higher specificity */
.navbar,
.navbar-brand,
.navbar-nav .nav-link {
    font-family: 'Crimson Text', Georgia, 'Times New Roman', Times, serif !important;
    font-weight: 500;
    background-color: #fefbf6 !important;
    border-bottom: 1px solid #fefbf6;
}

/* Global accent color overrides for links, buttons and primary UI */
a,
a:link,
a:visited,
.quarto-nav .nav-link,
.navbar-nav .nav-link,
.navbar-brand,
.quarto-footer a {
    color: var(--accent-color) !important;
}

a:hover,
.quarto-nav .nav-link:hover,
.navbar-nav .nav-link:hover,
.navbar-brand:hover,
.quarto-footer a:hover {
    color: var(--accent-hover) !important;
}

/* Buttons and primary controls */
button,
.btn,
input[type="button"],
input[type="submit"] {
    background-color: var(--accent-color) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

button:hover,
.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: var(--accent-hover) !important;
}

/* Focus ring using a subtle accent tint */
button:focus,
.btn:focus,
input[type="number"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
a:focus {
    outline: none !important;
    box-shadow: 0 0 0 4px var(--accent-focus-ring) !important;
}

/* Override any Bootstrap or Quarto font defaults */
* {
    font-family: 'Crimson Text', Georgia, 'Times New Roman', Times, serif !important;
}

/* Center content on the page */
.quarto-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Center main content but allow wider plots */
main {
    margin: 0 auto;
    padding: 20px;
}

/* Constrain text content to readable width */
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.math.display {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Center title and content blocks */
.quarto-title-block {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Allow plots to be wider than text */
.cell-output-display {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 2rem auto;
}

/* Ensure figures can be full width within the container */
.cell-output-display img {
    max-width: 100%;
    height: auto;
}

/* Center mathematical formulas */
.math.display {
    text-align: center;
}

/* Add some responsive padding */
@media (max-width: 768px) {

    .quarto-container,
    main {
        padding: 10px;
    }
}

/* Page layout with right-side ad column (safe placeholder) */
.page-with-ad {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 320px; /* main column can shrink, fixed ad column */
    gap: 24px;
    align-items: start;
}
.main-content {
    min-width: 0; /* allow main column to shrink inside grid */
    width: 100%;
}
.ad-column {
    width: 100%;
    max-width: 320px;
}
.ad-placeholder {
    background: #f3f4f6; /* light neutral */
    border: 1px dashed #d1d5db;
    color: #374151;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
}
.ad-placeholder small { color: #6b7280; display:block; margin-top:6px; }

/* Collapse to single column on small screens */
@media (max-width: 880px) {
    .page-with-ad {
        grid-template-columns: 1fr;
    }
    .ad-column {
        max-width: none;
        margin-top: 1rem;
    }
}