/**
 * Stylesheet: Page content
 * Usage: layouts/_default/baseof.html
 * Variables: static/assets/css/variables.css
 */



/* ---------------------------------------------------------------------------
   Global reset
--------------------------------------------------------------------------- */

/* Apply border-box sizing to every element, including pseudo-elements. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}


/* ---------------------------------------------------------------------------
   Page layout
--------------------------------------------------------------------------- */

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-title {
    text-align: center;
    color: var(--dv-navy);
    margin: 0 auto 40px auto;
    font-family: var(--dv-font);
    font-size: 2.5rem;
}


/* ---------------------------------------------------------------------------
   Markdown prose — automatic styling for HTML tags generated by Jekyll.
   Scoped to .prose so it only applies where explicitly used, never to cards or components.
   Covers pages like Home, Research topics, Contact that use raw Markdown.
--------------------------------------------------------------------------- */

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--dv-font);
    font-weight: 700;
    color: var(--dv-navy);
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* h1 is already handled by .page-title injected by the layout,
   so we size h2 downward from there. */
.prose h2 { font-size: 1.6rem;  border-bottom: 2px solid var(--dv-red); padding-bottom: 8px; }
.prose h3 { font-size: 1.25rem; }
.prose h4 { font-size: 1rem;    font-weight: 600; }

.prose p {
    font-family: var(--dv-font);
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--dv-navy);
    margin-top: 0;
    margin-bottom: 1rem;
}

.prose a {
    color: var(--dv-navy);
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.prose a:hover {
    color: var(--dv-red);
}

.prose ul,
.prose ol {
    font-family: var(--dv-font);
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--dv-navy);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

.prose strong {
    font-weight: 700;
    color: var(--dv-navy);
}

.prose em {
    font-style: italic;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--dv-red);
    background-color: var(--dv-bg);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--dv-navy);
}

.prose blockquote p {
    margin: 0;
}

.prose code {
    font-family: monospace;
    font-size: 0.88rem;
    background-color: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--dv-navy);
}

.prose pre {
    background-color: var(--dv-bg);
    border: 1px solid var(--dv-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.prose pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
}

.prose hr {
    border: none;
    border-top: 1px solid var(--dv-border);
    margin: 2rem 0;
}

.prose img {
    max-width: 70%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1rem auto;
    margin-bottom: 50px;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--dv-font);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.prose th {
    background-color: var(--dv-navy);
    color: #FFFFFF;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
}

.prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--dv-border);
    color: var(--dv-navy);
}

.prose tr:last-child td {
    border-bottom: none;
}


/* ---------------------------------------------------------------------------
   Accordion — <details> / <summary>
--------------------------------------------------------------------------- */

.prose details {
    border: 1px solid var(--dv-border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.prose details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    font-family: var(--dv-font);
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--dv-navy);
    background-color: var(--dv-bg);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 0.15s ease;
}

.prose details summary::-webkit-details-marker { display: none; }

.prose details summary::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--dv-navy);
    border-bottom: 2px solid var(--dv-navy);
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.prose details[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.prose details summary:hover {
    background-color: #eaecf0;
}

.prose details[open] summary {
    border-bottom: 1px solid var(--dv-red);
}

.prose details .details-body {
    padding: 1rem 1.1rem;
    font-size: 0.97rem;
    line-height: 1.75;
    color: var(--dv-navy);
    background-color: #fcfcfc;
}

.prose details .details-body p:last-child {
    margin-bottom: 0;
}

.prose .details-body img {
    float: right;
    max-width: 25%;
    margin: 0 0 1rem 1.5rem;
    display: block;
    clear: right;
}

.prose .details-body::after {
    content: '';
    display: table;
    clear: both;
}

/* ---------------------------------------------------------------------------
   OpenStreetMap
--------------------------------------------------------------------------- */

.map {
    width: 36rem;
    height: 20rem;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 5vh;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--dv-red), var(--dv-red)) border-box;
    border: 0.2rem solid transparent;
    border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
   404
--------------------------------------------------------------------------- */

.page404 {
    text-align: center;
}


/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .page-title {
        font-size: 1.6rem;
    }

    .prose h2 { font-size: 1.3rem; }
    .prose h3 { font-size: 1.1rem; }

    .prose details summary {
        font-size: 0.93rem;
        padding: 0.75rem 0.9rem;
    }

    .prose .details-body img {
        float: none;
        max-width: 100%;
        margin: 0 auto 1rem auto;
    }
}