/* About page styles.
   The README is rendered with the official github-markdown-css (loaded in
   about.html) so it matches github.com exactly. This file only handles the
   page layout and the GitHub-style bordered box around the content — it does
   NOT restyle the markdown itself. */

#about-page {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Horizontally center children */
    width: 100%;
    min-height: 100%;
    /* Gap between the topbar and the content (stacks on the global
       .container's 2rem padding-top). */
    padding-top: 3rem;
}

.about-centering-wrapper {
    position: relative;
    width: 100%;
    max-width: 1012px;
    /* GitHub's README column width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* On desktop the global .container adds padding-right: 10rem, pushing content
   left under the logo. Cancel it and nudge the column right by 4rem — the same
   treatment the gallery page and home sections use. */
@media (min-width: 1024px) {
    .container:has(#about-page) {
        padding-right: 0 !important;
    }

    .about-centering-wrapper {
        left: 4rem;
    }
}

/* GitHub-style bordered box around the rendered README. */
.about-content-section {
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 2rem;
}

/* markdown-body brings GitHub's exact typography, spacing and layout. GitHub's
   stylesheet hardcodes its (dark) colours, so we recolour the visible elements
   to the site's theme tokens. Those tokens flip per theme (navy/black/dark/
   light), so this one block makes the README follow whatever theme is active —
   readable on both dark and light backgrounds. */
.markdown-body {
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    color: var(--text-primary) !important;
    background-color: var(--surface-raised) !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.markdown-body strong {
    color: var(--text-primary) !important;
}

/* Heading underlines / rules / borders */
.markdown-body h1,
.markdown-body h2 {
    border-bottom-color: var(--border-default) !important;
}

.markdown-body hr {
    background-color: var(--border-default) !important;
}

.markdown-body a {
    color: var(--highlight) !important;
}

/* Inline code + code blocks */
.markdown-body code,
.markdown-body tt {
    background-color: var(--surface-inset) !important;
    color: var(--text-primary) !important;
}

.markdown-body pre {
    background-color: var(--surface-inset) !important;
}

.markdown-body pre code,
.markdown-body pre tt {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Blockquotes */
.markdown-body blockquote {
    color: var(--text-secondary) !important;
    border-left-color: var(--border-default) !important;
}

/* Tables */
.markdown-body table th,
.markdown-body table td {
    border-color: var(--border-default) !important;
}

.markdown-body table tr {
    background-color: var(--surface-raised) !important;
    border-top-color: var(--border-default) !important;
}

.markdown-body table tr:nth-child(2n) {
    background-color: var(--surface-inset) !important;
}

/* README-fetch fallback (shown when GitHub is unreachable). */
.about-fetch-error {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--text-secondary);
}

.about-fetch-error i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.about-fetch-error h4 {
    font-weight: 700;
    color: var(--text-primary);
}

/* ==========================================================================
   Mobile Layout (max-width: 470px)
   ========================================================================== */
@media (max-width: 470px) {
    #about-page {
        padding-top: 3rem;
    }

    .about-centering-wrapper {
        padding: 0 1rem;
    }

    .markdown-body {
        padding: 1.25rem 1rem;
    }
}

/* ==========================================================================
   Tablet Layout (min-width: 471px) and (max-width: 1023px)
   ========================================================================== */
@media (min-width: 471px) and (max-width: 1023px) {

    .about-centering-wrapper {
        max-width: 760px;
        padding: 0 1.5rem;
    }

    .markdown-body {
        padding: 1.75rem 2rem;
    }
}