/*
 * Style of yearzeroengine.fr: "magazine" theme built on Bootstrap 5.3 color modes, dark by
 * default (data-bs-theme="dark" on html element) with a light (day) mode selected by the
 * theme button of the navigation bar (data-bs-theme="light"). Accent color is the orange of
 * the site (#eaa142).
 */

/* ---------- Fonts ---------- */

/* Oswald (SIL Open Font License, see fonts/OSWALD-LICENSE.txt) for titles and labels */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/oswald-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/oswald-latin-ext-500.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/oswald-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/oswald-latin-ext-700.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Colors ---------- */

:root,
[data-bs-theme="dark"] {
    --yze-accent: #eaa142;
    --yze-accent-light: #f6c47d;
    --yze-accent-rgb: 234, 161, 66;
    --yze-bg: #121212;
    --yze-surface: #1b1b1b;
    --yze-surface-2: #232323;
    --yze-border: #2e2e2e;
    --yze-text: #e6e3de;
    --yze-muted: #a39e96;
    --yze-heading: #f5f2ec;
    --yze-news: #eaa142;
    --yze-article: #63b8b0;
    --yze-critique: #c79be8;
    --yze-font-title: "Oswald", "Arial Narrow", sans-serif;
    --yze-nav-bg: rgba(18, 18, 18, 0.92);
    --yze-footer-bg: #0c0c0c;
    --yze-shadow: rgba(0, 0, 0, 0.45);
    --yze-scrollbar: #3a3a3a;

    --bs-body-bg: var(--yze-bg);
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-body-color: var(--yze-text);
    --bs-body-color-rgb: 230, 227, 222;
    --bs-emphasis-color: var(--yze-heading);
    --bs-heading-color: var(--yze-heading);
    --bs-secondary-color: var(--yze-muted);
    --bs-secondary-bg: var(--yze-surface-2);
    --bs-tertiary-bg: var(--yze-surface);
    --bs-border-color: var(--yze-border);
    --bs-link-color: var(--yze-accent);
    --bs-link-color-rgb: var(--yze-accent-rgb);
    --bs-link-hover-color: var(--yze-accent-light);
    --bs-link-hover-color-rgb: 246, 196, 125;
    --bs-primary: var(--yze-accent);
    --bs-primary-rgb: var(--yze-accent-rgb);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-line-height: 1.6;
    color-scheme: dark;
}

/* light (day) theme: darker accent for readable links and labels on light backgrounds */
[data-bs-theme="light"] {
    --yze-accent: #b9690a;
    --yze-accent-light: #8f5005;
    --yze-accent-rgb: 185, 105, 10;
    --yze-bg: #f6f4f0;
    --yze-surface: #ffffff;
    --yze-surface-2: #efebe5;
    --yze-border: #e0dad1;
    --yze-text: #2b2824;
    --yze-muted: #6b655c;
    --yze-heading: #191613;
    --yze-news: #eaa142;
    --yze-article: #63b8b0;
    --yze-critique: #c79be8;
    --yze-nav-bg: rgba(255, 255, 255, 0.92);
    --yze-footer-bg: #1b1916;
    --yze-shadow: rgba(60, 45, 20, 0.15);
    --yze-scrollbar: #c9c2b7;

    --bs-body-bg: var(--yze-bg);
    --bs-body-bg-rgb: 246, 244, 240;
    --bs-body-color: var(--yze-text);
    --bs-body-color-rgb: 43, 40, 36;
    --bs-emphasis-color: var(--yze-heading);
    --bs-heading-color: var(--yze-heading);
    --bs-secondary-color: var(--yze-muted);
    --bs-secondary-bg: var(--yze-surface-2);
    --bs-tertiary-bg: var(--yze-surface);
    --bs-border-color: var(--yze-border);
    --bs-link-color: var(--yze-accent);
    --bs-link-color-rgb: var(--yze-accent-rgb);
    --bs-link-hover-color: var(--yze-accent-light);
    --bs-link-hover-color-rgb: 143, 80, 5;
    --bs-primary: var(--yze-accent);
    --bs-primary-rgb: var(--yze-accent-rgb);
    color-scheme: light;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--yze-bg);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--yze-font-title);
    font-weight: 500;
    letter-spacing: 0.01em;
}

::selection {
    background: rgba(var(--yze-accent-rgb), 0.35);
}

/* ---------- Header: banner and navigation bar ---------- */

.site-banner {
    padding-top: 1rem;
}

.site-banner a {
    display: block;
}

.site-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.site-nav {
    margin-top: 1rem;
    background: var(--yze-nav-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--yze-border);
    border-bottom: 1px solid var(--yze-border);
}

.site-nav .navbar-brand {
    font-family: var(--yze-font-title);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yze-heading);
}

.site-nav .navbar-brand .brand-mark {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0 0.4rem;
    color: #121212;
    background: var(--yze-accent);
    border-radius: 4px;
}

.site-nav .nav-link {
    font-family: var(--yze-font-title);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yze-text);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.active {
    color: var(--yze-accent);
    text-decoration: none;
}

.site-nav .dropdown-menu {
    --bs-dropdown-bg: var(--yze-surface);
    --bs-dropdown-border-color: var(--yze-border);
    --bs-dropdown-link-hover-bg: var(--yze-surface-2);
    --bs-dropdown-link-hover-color: var(--yze-accent);
    --bs-dropdown-link-active-bg: var(--yze-accent);
}

.site-nav .search-form .form-control {
    min-width: 12rem;
    background: var(--yze-surface);
    border-color: var(--yze-border);
}

.site-nav .search-form .form-control:focus {
    border-color: var(--yze-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--yze-accent-rgb), 0.25);
}

.theme-toggle {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 1.05rem;
    color: var(--yze-text);
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 50%;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--yze-accent);
    border-color: var(--yze-accent);
}

/* the button shows the theme it switches to */
[data-bs-theme="dark"] .theme-toggle .glyphicon-moon,
[data-bs-theme="light"] .theme-toggle .glyphicon-sun {
    display: none;
}

.btn-accent {
    --bs-btn-color: #121212;
    --bs-btn-bg: var(--yze-accent);
    --bs-btn-border-color: var(--yze-accent);
    --bs-btn-hover-color: #121212;
    --bs-btn-hover-bg: var(--yze-accent-light);
    --bs-btn-hover-border-color: var(--yze-accent-light);
    --bs-btn-active-color: #121212;
    --bs-btn-active-bg: var(--yze-accent-light);
    --bs-btn-active-border-color: var(--yze-accent-light);
}

/* ---------- Main ---------- */

.site-main {
    flex: 1 0 auto;
    padding: 2rem 0 1.5rem;
}

.page-head {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--yze-border);
}

.page-head .kicker {
    margin-bottom: 0.25rem;
}

.page-head h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    text-transform: uppercase;
}

.page-head p {
    margin: 0.75rem 0 0;
    color: var(--yze-muted);
    font-size: 1.1rem;
}

.intro {
    margin-bottom: 2rem;
    color: var(--yze-muted);
    font-size: 1.15rem;
}

.intro em {
    color: var(--yze-text);
}

.kicker {
    font-family: var(--yze-font-title);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yze-muted);
}

/* ---------- Badges and chips ---------- */

.type-badge {
    display: inline-block;
    padding: 0.15em 0.55em;
    font-family: var(--yze-font-title);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #121212;
    background: var(--yze-news);
    border-radius: 3px;
}

.type-badge.type-article {
    background: var(--yze-article);
}

.type-badge.type-critique {
    background: var(--yze-critique);
}

.chip {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 0.3rem 0.4rem 0;
    padding: 0.2em 0.7em;
    font-size: 0.85rem;
    color: var(--yze-text);
    background: var(--yze-surface-2);
    border: 1px solid var(--yze-border);
    border-radius: 999px;
}

.chip:hover {
    color: #121212;
    background: var(--yze-accent);
    border-color: var(--yze-accent);
    text-decoration: none;
}

.chip .count {
    margin-left: 0.35em;
    color: var(--yze-muted);
}

.chip:hover .count {
    color: #121212;
}

/* ---------- Cards of pages ---------- */

.post-card {
    --bs-card-bg: var(--yze-surface);
    --bs-card-border-color: var(--yze-border);
    /* no overflow: hidden, which would cut the menu of games (rounded corners are on the image) */
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--yze-accent-rgb), 0.6);
    box-shadow: 0 10px 30px var(--yze-shadow);
}

.post-card .post-image {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

/* card whose menu of games is open, above the next cards */
.post-card:has(.dropdown-menu.show) {
    z-index: 5;
}

.card-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.card-chips .chip {
    margin: 0;
}

.chip-more {
    position: relative;
    z-index: 2;
    /* button at the right of the card */
    margin-left: auto;
}

.chip-more > button.chip {
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.chip-more .dropdown-menu {
    --bs-dropdown-bg: var(--yze-surface);
    --bs-dropdown-border-color: var(--yze-border);
    --bs-dropdown-link-color: var(--yze-text);
    --bs-dropdown-link-hover-bg: var(--yze-surface-2);
    --bs-dropdown-link-hover-color: var(--yze-accent);
    --bs-dropdown-link-active-bg: var(--yze-accent);
    --bs-dropdown-font-size: 0.9rem;
}

.post-card .post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-image img {
    transform: scale(1.04);
}

.post-card .card-body {
    /* the body takes the free height, so that the footer (game chips) is at the bottom */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 0.75rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--yze-muted);
}

.post-title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.25;
}

.post-title a {
    color: var(--yze-heading);
}

.post-card:hover .post-title a {
    color: var(--yze-accent);
    text-decoration: none;
}

.post-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    font-size: 0.95rem;
    color: var(--yze-muted);
}

.post-card .card-footer {
    padding: 0 1.1rem 0.75rem;
    background: transparent;
    border: 0;
}

/* featured page (first card of the home page) */

.post-card.featured .post-image {
    height: 100%;
    min-height: 16rem;
    aspect-ratio: auto;
    border-radius: var(--bs-card-inner-border-radius) 0 0 var(--bs-card-inner-border-radius);
}

.post-card.featured .card-body {
    justify-content: center;
    padding: 2rem;
}

.post-card.featured .card-footer {
    padding: 0 2rem 1.5rem;
}

@media (max-width: 767.98px) {
    .post-card.featured .post-image {
        min-height: 0;
        aspect-ratio: 2 / 1;
        border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    }

    .post-card.featured .card-body {
        padding: 1.25rem;
    }

    .post-card.featured .card-footer {
        padding: 0 1.25rem 1rem;
    }
}

.post-card.featured .post-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.post-card.featured .post-summary {
    -webkit-line-clamp: 5;
    font-size: 1.05rem;
}

/* ---------- Pagination ---------- */

.pagination {
    --bs-pagination-bg: var(--yze-surface);
    --bs-pagination-border-color: var(--yze-border);
    --bs-pagination-color: var(--yze-text);
    --bs-pagination-hover-bg: var(--yze-surface-2);
    --bs-pagination-hover-color: var(--yze-accent);
    --bs-pagination-hover-border-color: var(--yze-border);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--yze-accent-rgb), 0.25);
    --bs-pagination-active-bg: var(--yze-accent);
    --bs-pagination-active-border-color: var(--yze-accent);
    --bs-pagination-active-color: #121212;
    --bs-pagination-disabled-bg: var(--yze-bg);
    --bs-pagination-disabled-color: var(--yze-muted);
    --bs-pagination-disabled-border-color: var(--yze-border);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

/* ---------- Games and tags lists ---------- */

.game-card .post-image {
    aspect-ratio: 20 / 3;
}

.game-card .card-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.game-card .post-title {
    margin: 0;
    font-size: 1.15rem;
}

.game-card .count {
    color: var(--yze-muted);
    font-size: 0.9rem;
}

.tag-cloud {
    line-height: 2.2;
}

/* ---------- Article ---------- */

.article-head {
    margin-bottom: 1.5rem;
}

.article-head .kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.article-head .kicker .chip {
    margin: 0;
}

.article-head h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.15;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font-size: 0.9rem;
    color: var(--yze-muted);
}

.article-meta .glyphicon {
    margin-right: 0.3rem;
    color: var(--yze-accent);
}

.article-meta a {
    color: var(--yze-text);
}

.toc {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 8px;
}

.toc summary {
    font-family: var(--yze-font-title);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.toc nav ul {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}

.toc nav ul ul {
    padding-left: 1rem;
}

.toc nav li {
    margin: 0.15rem 0;
}

.article-content {
    font-size: 1.06rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 2.2rem 0 0.8rem;
    scroll-margin-top: 5rem;
}

.article-content h2 {
    padding-bottom: 0.3rem;
    font-size: 1.9rem;
    border-bottom: 1px solid var(--yze-border);
}

.article-content h3 {
    font-size: 1.5rem;
    color: var(--yze-accent-light);
}

.article-content h4 {
    font-size: 1.2rem;
}

.article-content p,
.article-content ul,
.article-content ol {
    margin-bottom: 1.1rem;
}

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem auto;
    border-radius: 6px;
}

.article-content blockquote {
    margin: 1.5rem 0;
    padding: 0.5rem 1.25rem;
    color: var(--yze-muted);
    border-left: 4px solid var(--yze-accent);
    background: var(--yze-surface);
    border-radius: 0 6px 6px 0;
}

.article-content code {
    color: var(--yze-accent-light);
}

.article-content hr {
    margin: 2rem 0;
    border-color: var(--yze-border);
    opacity: 1;
}

/* tables of Markdown content, scrolled horizontally when too wide */
.article-content table {
    display: block;
    max-width: 100%;
    margin: 1.5rem 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.95rem;
    white-space: nowrap;
}

.article-content th,
.article-content td {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--yze-border);
}

.article-content th {
    font-family: var(--yze-font-title);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #121212;
    background: var(--yze-accent);
}

.article-content tr:nth-child(even) td {
    background: var(--yze-surface);
}

/* boxes of content written with markdown-it-container (::: sidebar, ::: note, ::: license) */
.article-content .sidebar,
.article-content .note,
.article-content .license {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem 0.25rem;
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-left: 4px solid var(--yze-accent);
    border-radius: 0 8px 8px 0;
}

.article-content .note {
    border-left-color: var(--yze-article);
}

.article-content .license {
    font-size: 0.9rem;
    color: var(--yze-muted);
    border-left-color: var(--yze-muted);
}

.article-content .sidebar img,
.article-content .note img {
    margin: 1rem auto;
}

.article-tags {
    margin-top: 0.75rem;
}

.article-tags .chip {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.alert {
    --bs-alert-border-radius: 8px;
}

/* ---------- Side column ---------- */

.side-block {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 10px;
}

.side-block h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yze-accent);
}

.side-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-block li {
    padding: 0.4rem 0;
    border-top: 1px solid var(--yze-border);
}

.side-block li:first-child {
    border-top: 0;
}

.side-block li a {
    display: block;
    color: var(--yze-text);
    line-height: 1.35;
}

.side-block li a:hover {
    color: var(--yze-accent);
    text-decoration: none;
}

.side-block li time {
    display: block;
    font-size: 0.8rem;
    color: var(--yze-muted);
}

/* ---------- Comments (Isso, which injects a light style) ---------- */

.comments {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--yze-border);
}

/*
 * Isso (old version, with classes such as .textarea or .input-wrapper) injects its own light
 * style: rules below are prefixed with .comments to take precedence over it.
 */

.comments .isso-postbox {
    max-width: none;
    margin: 1rem 0 1.25rem;
}

/* no space below the last comment, the page margin is enough */
.comments #isso-root > .isso-comment:last-child {
    margin-bottom: 0;
}

.comments #isso-thread .isso-postbox > .form-wrapper .textarea,
.comments #isso-thread .isso-postbox > .form-wrapper .preview {
    display: block;
    width: 100%;
    min-height: 8rem;
    margin: 0 0 0.75rem;
    padding: 0.9rem 1rem;
    line-height: 1.6;
    color: var(--yze-text);
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comments #isso-thread .isso-postbox > .form-wrapper .preview {
    background: var(--yze-surface-2);
}

.comments #isso-thread .isso-postbox.preview-mode > .form-wrapper .textarea,
.comments #isso-thread .isso-postbox > .form-wrapper .preview {
    display: none;
}

.comments #isso-thread .isso-postbox.preview-mode > .form-wrapper .preview {
    display: block;
}

.comments #isso-thread .textarea.placeholder {
    color: var(--yze-muted);
}

.comments #isso-thread .textarea:focus,
.comments #isso-thread input:focus {
    border-color: var(--yze-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--yze-accent-rgb), 0.25);
}

/* name, email and website fields on one line, then buttons */
.comments .isso-postbox > .form-wrapper > .auth-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.comments .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
    display: block;
    flex: 1 1 11rem;
    max-width: none;
    margin: 0;
}

.comments .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
    width: 100%;
    padding: 0.5rem 0.8rem;
    line-height: 1.4;
    color: var(--yze-text);
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 8px;
    box-shadow: none;
}

.comments .isso-postbox > .form-wrapper > .auth-section .input-wrapper input::placeholder {
    color: var(--yze-muted);
}

.comments .isso-postbox > .form-wrapper > .auth-section .post-action {
    float: none;
    margin: 0;
}

/* hide the containers of hidden buttons (Edit, or Preview in preview mode), whose space
   would otherwise remain in the row */
.comments .isso-postbox > .form-wrapper > .auth-section .post-action:has(> input[name="edit"]),
.comments .isso-postbox.preview-mode > .form-wrapper > .auth-section .post-action:has(> input[name="preview"]) {
    display: none;
}

.comments .isso-postbox.preview-mode > .form-wrapper > .auth-section .post-action:has(> input[name="edit"]) {
    display: block;
}

.comments .isso-postbox > .form-wrapper > .auth-section .post-action > input {
    padding: 0.5rem 1.1rem;
    font-family: var(--yze-font-title);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--yze-text);
    background: var(--yze-surface-2);
    border: 1px solid var(--yze-border);
    border-radius: 8px;
    box-shadow: none;
}

.comments .isso-postbox > .form-wrapper > .auth-section .post-action > input:hover {
    color: var(--yze-accent);
    border-color: var(--yze-accent);
}

.comments .isso-postbox > .form-wrapper > .auth-section .post-action > input[type="submit"] {
    color: #121212;
    background: var(--yze-accent);
    border-color: var(--yze-accent);
}

.comments .isso-postbox > .form-wrapper > .auth-section .post-action > input[type="submit"]:hover {
    color: #121212;
    background: var(--yze-accent-light);
    border-color: var(--yze-accent-light);
}

.comments .isso-postbox > .form-wrapper .notification-section {
    color: var(--yze-muted);
}

/* comments */
.comments .isso-comment {
    max-width: none;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--yze-surface);
    border: 1px solid var(--yze-border);
    border-radius: 10px;
}

.comments .isso-comment .isso-comment {
    margin-top: 1rem;
    background: var(--yze-surface-2);
}

.comments .isso-comment > div.text-wrapper > .isso-comment-header .author {
    color: var(--yze-heading);
}

.comments .isso-comment > div.text-wrapper > .isso-comment-header,
.comments .isso-comment > div.text-wrapper > .isso-comment-header a,
.comments .isso-comment > div.text-wrapper > .isso-comment-footer,
.comments .isso-comment > div.text-wrapper > .isso-comment-footer a {
    color: var(--yze-muted);
}

.comments .isso-comment > div.text-wrapper > .isso-comment-footer a:hover {
    color: var(--yze-accent);
}

.comments .isso-comment > div.text-wrapper > .text {
    color: var(--yze-text);
}

.comments #isso-thread > h4 {
    font-family: var(--yze-font-title);
    color: var(--yze-heading);
}

/* ---------- Search page (Pagefind) ---------- */

#search {
    --pagefind-ui-scale: 0.9;
    --pagefind-ui-primary: var(--yze-accent);
    --pagefind-ui-text: var(--yze-text);
    --pagefind-ui-background: var(--yze-surface);
    --pagefind-ui-border: var(--yze-border);
    --pagefind-ui-tag: var(--yze-surface-2);
    --pagefind-ui-border-radius: 8px;
    --pagefind-ui-font: inherit;
    margin-bottom: 2rem;
}

#search mark {
    color: #121212;
    background-color: var(--yze-accent-light);
}

/* ---------- Footer ---------- */

.site-footer {
    --yze-text: #e6e3de;
    --yze-muted: #a39e96;
    --yze-heading: #f5f2ec;
    --yze-border: #2e2e2e;
    --yze-accent: #eaa142;
    flex-shrink: 0;
    padding: 1.5rem 0;
    font-size: 0.8rem;
    color: var(--yze-muted);
    background: var(--yze-footer-bg);
    border-top: 3px solid var(--yze-accent);
}

/* ---------- Scroll to top button ---------- */

html {
    scroll-behavior: smooth;
}

#scrollToTopButton {
    position: fixed;
    z-index: 1030;
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.1rem;
    color: #121212;
    background: var(--yze-accent);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.2s;
}

#scrollToTopButton:hover,
#scrollToTopButton:focus-visible {
    background: var(--yze-accent-light);
}

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar {
    width: 10px;
    height: 8px;
    background: var(--yze-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--yze-scrollbar);
    border-radius: 5px;
}

/* ---------- Print ---------- */

@media print {
    .site-nav,
    .site-footer,
    .side-column,
    .comments,
    #scrollToTopButton {
        display: none !important;
    }
}