:root {
    --color-brand-orange: #f87414;
    --color-brand-gray: #202728;
    --color-brand-light-gray: #90949b;

    --color-bg-main: var(--color-brand-gray);
    --color-bg-primary: var(--color-brand-gray);
    --color-border-primary: var(--color-brand-light-gray);
    --color-text-primary: white;
    /* Page background is now dark, so headings must be light too — otherwise
       in-content headings (h2/h3…) render dark-on-dark. Card titles stay dark
       via the explicit .post-title / .post-card-title rules below. */
    --color-heading-primary: white;
}

#main {
    margin-top: 4rem;
}

.navbar-logo-image {
    max-height: 64px;
}

.slide-item-title a:hover,
.post-card-title a:hover,
.action-item:hover,
.menu-item a:hover,
.sidebar-toggle:hover svg,
.tag-list a:hover,
.slide-item-meta a:hover,
.post-card-meta a:hover,
.post-meta a:hover {
    color: var(--ghost-accent-color);
}

.slide-item-content,
.post-header.has-image .post-header-content {
    box-shadow: 0.5rem 0.5rem 0 0 var(--ghost-accent-color);
}

.featured-pagination .swiper-pagination-bullet {
    background: white;
}

.featured-pagination .swiper-pagination-bullet-active {
    background: var(--ghost-accent-color);
}

footer .button:hover svg {
    fill: var(--ghost-accent-color);
}

footer .button svg {
    height: 32px;
    width: 32px;
}

.footer-content {
    border-color: var(--ghost-accent-color);
}

.card-image {
    border: none;
}

.slide-item-content,
.card,
.post-header.has-image .post-header-content {
    background: white;
    color: var(--color-brand-gray);
    border: none;
}

.slide-item-content .slide-item-title a,
.card .post-card-title a,
.card .author-card-title a,
.card .tag-card-title a,
.post-title {
    color: var(--color-brand-gray);
}

.slide-item-content .slide-item-title a:hover,
.card .post-card-title a:hover,
.card .author-card-title a:hover,
.card .tag-card-title a:hover,
.post-title:hover {
    color: var(--ghost-accent-color);
}

/* Post header: stack the title card BELOW the feature image instead of
   overlapping it, and align both to the same width (matching the post body)
   so they line up. Also slims the feature image down. */
.post-header.has-image .post-header-content-wrapper {
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .post-header.is-horizontal,
    .post-header.is-vertical {
        display: block;
    }

    /* Full-width hero image. */
    .post-header.is-horizontal .post-header-image-wrapper,
    .post-header.is-vertical .post-header-image-wrapper {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Title card centered below the image, constrained to the body width. */
    .post-header.is-horizontal .post-header-content-wrapper,
    .post-header.is-vertical .post-header-content-wrapper {
        width: 100%;
        max-width: 48rem;
        margin: 1.5rem auto 0;
    }

    /* Feature image cropped to a 3:2 landscape. */
    .post-header.is-horizontal .post-header-image,
    .post-header.is-vertical .post-header-image {
        height: 0;
        padding-top: 66.667%;
    }
}