/* ==========================================================================
   GhostFx Theme Custom Overrides (blogged-4.0.0)
   ========================================================================== */

/* --- 1. Global Header, Navigation & Dropdowns --- */
/* .site-header,
.site-header-main,
.site-nav-main {
    background-color: transparent !important;
    background: transparent !important;
} */

.site-nav,
.site-nav-right {
    overflow: visible !important;
    overflow-y: visible !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Unified Floating Dark Glass Nav Pill across ALL pages */
.site-nav {
    background: rgba(21, 23, 26, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    padding: 0.8rem 1.6rem !important;
    margin: 1.5rem auto !important;
    max-width: 1200px !important;
    width: calc(100% - 4rem) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    top: 0px !important;
}

.site-nav a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.site-nav .nav li a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

.site-nav .nav li a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

.site-nav-left {
    padding-bottom: 0px !important;
}

.site-nav .nav {
    flex-wrap: nowrap !important;
}

@media (min-width: 900px) {
    .site-nav {
        position: relative !important;
        top: 0px !important;
    }
}

.site-nav-right .dropdown {
    position: relative !important;
    z-index: 10000 !important;
}

.site-nav-right .dropdown-menu {
    position: absolute !important;
    z-index: 100000 !important;
}

.dropdown-menu {
    --bs-dropdown-font-size: 1.6rem;
}

/* --- 2. Hero Header & Banner Cover Image (Home & Content Pages) --- */
.site-home-header .site-header-background,
.responsive-header-img {
    min-height: 520px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.site-header-content {
    background: rgba(255, 255, 255, 0.33) !important;
    backdrop-filter: blur(1rem) !important;
    -webkit-backdrop-filter: blur(1rem) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 0.8rem 2rem rgba(39, 44, 49, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    margin: 3rem auto !important;
    padding: 3rem 4rem !important;
    max-width: 800px !important;
    position: relative !important;
    z-index: 1000 !important;
}

.site-header-content .site-title,
.post-full-header .post-full-title {
    color: #15171a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

.site-header-content .site-description {
    color: #3c484e !important;
    font-weight: 400 !important;
}

/* --- 3. Article Layout & Hero Image Overlays --- */
.page-template #site-main,
.post-template #site-main,
.page-template .post-full,
.post-template .post-full {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative;
}

.post-full-image {
    z-index: 1;
    margin-top: 0 !important;
    height: auto !important;
}

.post-full-image img,
.post-template .responsive-header-img,
.page-template .responsive-header-img {
    width: 100% !important;
    max-height: 60vh !important;
    object-fit: cover !important;
    display: block !important;
}

.post-full-header {
    position: relative;
    z-index: 10;
    margin: -12vw auto 2vw !important;
    padding: 2.5rem 3rem;
    background: rgba(255, 255, 255, 0.33);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    border-radius: 0.75rem;
    box-shadow: 0 0.8rem 2rem rgba(39, 44, 49, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.post-full-content {
    z-index: 20;
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 1rem 2.5rem rgba(39, 44, 49, 0.08);
}

.no-image .post-full-header {
    margin: 2rem auto !important;
}

.no-image .post-full-content {
    margin-top: 0 !important;
}

/* --- 4. Post Card Byline & Author Alignment --- */
.post-card-byline-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.post-card-meta .author-list {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.post-card-meta .post-card-byline-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.post-card-meta .post-card-byline-content a {
    font-weight: 600 !important;
    color: #15171a !important;
}

.post-card-meta .post-card-byline-date {
    display: block !important;
    font-size: 1.2rem !important;
    color: #738a94 !important;
}

/* --- 5. Footer Layout --- */
.site-footer-content .nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}

.site-footer-content .nav .col-3 {
    flex: 1 1 28% !important;
    min-width: 250px !important;
    box-sizing: border-box !important;
}

.social-links {
    margin-left: 1vw;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

/* --- 6. Pure CSS 1-3-2 Post Card Grid Repeat Pattern --- */
@media (min-width: 795px) {
    .post-feed .post-card:nth-child(6n+1) {
        flex: 1 1 100% !important;
        flex-direction: row !important;
    }

    .post-feed .post-card:nth-child(6n+1) .post-card-image-link {
        position: relative !important;
        flex: 1 1 auto !important;
        border-radius: 5px 0 0 5px !important;
    }

    .post-feed .post-card:nth-child(6n+1) .post-card-image {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
    }

    .post-feed .post-card:nth-child(6n+1) .post-card-content {
        flex: 0 1 357px !important;
    }

    .post-feed .post-card:nth-child(6n+1) h2 {
        font-size: 2.6rem !important;
    }

    .post-feed .post-card:nth-child(6n+1) p {
        font-size: 1.8rem !important;
        line-height: 1.55em !important;
    }

    .post-feed .post-card:nth-child(6n+1) .post-card-content-link {
        padding: 30px 40px 0 !important;
    }

    .post-feed .post-card:nth-child(6n+1) .post-card-meta {
        padding: 0 40px 30px !important;
    }
}