/* ==========================================================
   fastCMS Default theme
   Bootstrap 5.3 + a few rules. Light and dark via data-bs-theme.
   ========================================================== */

:root {
    --fc-card-radius: 0.75rem;
    --fc-thumb-height: 220px;
}

body {
    transition: background-color .3s ease, color .3s ease;
}

/* ---- Dark mode (as v1) ---------------------------------- */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: rgb(43 48 53) !important;
    border-color: #495057 !important;
}

/* ---- Header --------------------------------------------- */
.site-header .navbar-brand i { font-size: 1.6em; }
/* Uploaded site icon (Settings → Appearance): sized to the text, any shape. */
.site-icon { height: 1.3em; width: auto; max-width: 3.5em; object-fit: contain; flex-shrink: 0; }
.site-header .navbar-brand .site-icon { height: 1.45em; }

/* Sticky menu (theme option): stays at the top with the page's background,
   and tightens up with a shadow once the page scrolls. */
.sticky-header .site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--bs-body-bg);
    transition: box-shadow .2s ease, padding .2s ease;
}
.sticky-header .site-header.is-scrolled { box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .1); }
[data-bs-theme="dark"] .sticky-header .site-header.is-scrolled { box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .45); }
.sticky-header.header-split .site-header.is-scrolled > .container { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.sticky-header.header-centered .site-header.is-scrolled > .container { padding-top: .5rem !important; }
.sticky-header.header-centered .site-header.is-scrolled .navbar-brand { font-size: 1.35rem !important; }
.sticky-header.header-centered .site-header.is-scrolled .navbar-brand + p { display: none; }
.sticky-header.header-centered .site-header.is-scrolled .nav { padding-top: .35rem !important; padding-bottom: .5rem !important; }
/* Links to headings (table of contents) stop below the menu, not under it. */
html:has(body.sticky-header) { scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { .sticky-header .site-header { transition: none; } }
.letter-spacing { letter-spacing: .08em; }

/* ---- Cards ---------------------------------------------- */
.article-card {
    border-radius: var(--fc-card-radius);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover,
.article-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
}
.card-thumb {
    height: var(--fc-thumb-height);
    width: 100%;
}
.card-thumb-empty {
    background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-secondary-bg));
    color: var(--bs-primary);
    font-size: 3rem;
}
.article-card .card-footer .btn { pointer-events: none; } /* the whole card is the link */

@media (prefers-reduced-motion: reduce) {
    .article-card, body { transition: none; }
    .article-card:hover { transform: none; }
}

/* ---- Article content ------------------------------------ */
.content-body {
    font-size: 1.05em;
    overflow-wrap: break-word;
}
.content-body h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    scroll-margin-top: 1.5rem;
}
.content-body h3 {
    margin-top: 1.75rem;
    font-weight: 600;
}
.content-body img,
.content-body picture img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}
.content-body blockquote {
    border-left: 4px solid var(--bs-primary);
    padding: .5rem 1rem;
    margin: 1.5rem 0;
    background: var(--bs-tertiary-bg);
    border-radius: 0 .5rem .5rem 0;
}
.content-body table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
}
.content-body th,
.content-body td {
    border: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
}
.content-body th { background: var(--bs-tertiary-bg); }
.page-content { max-width: 880px; }

.article-hero {
    max-height: 480px;
    object-fit: cover;
}
.hero-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    height: auto;
}

/* ---- Sidebar -------------------------------------------- */
.sidebar-sticky { top: 1.5rem; z-index: 1; }
.toc .list-group { max-height: calc(100vh - 8rem); overflow-y: auto; }
.toc .list-group-item.active-section {
    background-color: var(--bs-primary-bg-subtle);
}

/* ---- Floating buttons (dark mode, back to top) --------- */
.floating-btn {
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: opacity .3s ease, transform .3s ease;
}
.floating-btn-end { right: 20px; }
/* Round icon buttons: colour mode (sun / moon) and back to top (arrow) */
.floating-btn.icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.floating-btn-start {
    left: 20px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.floating-btn-start.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

/* ---- Admin bar ------------------------------------------ */
.admin-bar { position: relative; z-index: 1100; }

/* ---- Theme options (Themes → Customize) ---------------- */
/* Corners follow the chosen radius token. */
.article-card, .card { border-radius: var(--fc-radius, .75rem); }
.card-img-top { border-top-left-radius: var(--fc-radius, .75rem); border-top-right-radius: var(--fc-radius, .75rem); }

/* Page width */
.width-narrow .container { max-width: 960px; }
@media (min-width: 1400px) { .width-wide .container { max-width: 1520px; } }

/* Card styles */
.cards-border .article-card { box-shadow: none; border: 1px solid var(--bs-border-color); }
.cards-border .article-card:hover { transform: none; border-color: var(--fc-accent); box-shadow: none; }
.cards-flat .article-card { border: 0; background: transparent !important; box-shadow: none; }
.cards-flat .article-card:hover { transform: none; box-shadow: none; }
.cards-flat .article-card .card-footer { background: transparent; border: 0; }
.cards-flat .article-card .card-img-top { border-radius: var(--fc-radius, .75rem); }

/* Table of contents as a fold-out box (sidebar off) */
.toc-inline summary { cursor: pointer; list-style: revert; }
.toc-inline .toc .list-group { max-height: none; }

/* ---- Monetization ------------------------------------------ */
.fc-ad { text-align: center; overflow: hidden; }
.fc-ad-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.fc-ad-placeholder {
    border: 2px dashed var(--bs-border-color); border-radius: .5rem; padding: 1.25rem; font-size: .85rem;
    color: var(--bs-secondary-color); background: var(--bs-tertiary-bg);
}
.fc-ad-placeholder span { display: block; font-size: .75rem; }
.fc-consent {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 1080; max-width: 440px;
    border-radius: var(--fc-radius, .75rem);
}
@media (max-width: 575.98px) { .fc-consent { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; } }
.fc-disclosure { margin-bottom: 1.5rem; }

/* Bootstrap's grey links (footer RSS, Dashboard, Cookie settings): its #6c757d is under
   4.5:1 on off-white pages and in dark mode; use the text grey for the mode. */
.link-secondary { color: var(--bs-secondary-color) !important; }
.link-secondary:hover,
.link-secondary:focus { color: var(--bs-emphasis-color) !important; }

/* Grey outline buttons: Bootstrap's #6c757d text is under 4.5:1 on grey boxes
   (bg-body-tertiary) in light mode and on everything in dark mode. */
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); }

/* Rows with wide gaps (.g-5: article + sidebar, pages, the home hero) stick out
   past the page edge on phones, so pages scroll sideways. Match the side gap to
   the container's padding there; the vertical gap stays. */
@media (max-width: 575.98px) { .row.g-5 { --bs-gutter-x: 1.5rem; } }