/* ══════════════════════════════════════════════════════════
   blog.css — page-specific styles extracted from the inline
   <style> blocks of blog.html (merged with the former blog.css).
   Loaded where the last inline block was, preserving cascade.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════ */
/* ══ Q&A DROPDOWN COMPONENTS                              ── */
/* ══════════════════════════════════════════════════════════ */

.qa-dropdown {
	background: color-mix(in srgb, var(--surface) 50%, transparent);
	border: 2.5px solid var(--border);
	border: 2.5px solid color-mix(in srgb, var(--text) 70%, transparent);
	border-radius: var(--r);
	margin: 24px 0;
	overflow: hidden; /* Essential: keeps the expanding content inside the rounded corners */
	transition: border-color 0.3s ease, box-shadow 0.3s ease all 0.3s ease;
}

.qa-dropdown:hover {
	/* border-color: color-mix(in srgb, var(--accent2) 60%, transparent); */
	background: color-mix(in srgb, var(--surface) 75%, transparent);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Hide the logic checkbox */
.qa-toggle {
	display: none;
}

/* The clickable header */
.qa-summary {
	/* padding: 16px 20px; */
	padding: 10px 20px;
	/* font-weight: 800; */
	font-weight: 700;
	font-size: clamp(15px, 1.2vw, 22px);
	color: var(--dimtitle);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background 0.2s, color 0.2s;
	user-select: none;
	position: relative;

	/* font-weight: 900 !important;
    font-size: clamp(17px, 1.5vw, 26px); */
    color: var(--text);
    opacity: 0.7;
            
}

.qa-summary:hover {
	color: var(--text);
	background: color-mix(in srgb, var(--border) 5%, transparent);
}

/* Rotating chevron */
.qa-icon {
	color: var(--g);
	font-size: 16px;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	flex-shrink: 0;
	margin-left: 15px;
}

/* ── THE ANIMATION ENGINE ── */
/* Modern CSS Grid transition allows true 0-to-auto height expansion */
.qa-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
	/* background: color-mix(in srgb, var(--bg) 50%, transparent); */
	background: color-mix(in srgb, var(--surface) 50%, transparent);
}

/* Inner wrapper hides overflow during the squeeze to 0 */
.qa-content-inner {
	overflow: hidden;
}

/* Padding placed inside the overflow so it shrinks to true 0 when closed */
.qa-pad {
	padding: 0 20px 20px 20px;
}

/* Prevents awkward double-margins on paragraphs */
.qa-pad > *:first-child {
	margin-top: 15px !important;
}
.qa-pad > *:last-child {
	margin-bottom: 0 !important;
}

/* ── CHECKED/OPEN STATES ── */
/* When the hidden checkbox is ticked, unroll the grid to full height */
.qa-toggle:checked + .qa-summary {
	/* Matched thickness to 2.5px to perfectly align with the outer border */
	border-bottom: 2.5px solid var(--border);
	color: var(--text);
	/* Added border-color to the transition so it fades smoothly */
	transition: background 0.2s, color 0.2s, border-color 0.3s ease;
}

/* Synchronizes the inner divider color with the outer border on hover */
/* .qa-dropdown:hover .qa-toggle:checked + .qa-summary {
	border-bottom-color: color-mix(in srgb, var(--accent2) 60%, transparent);
    color: color-mix(in srgb, var(--accent2) 60%, transparent);
} */

.qa-toggle:checked + .qa-summary .qa-icon {
	transform: rotate(-180deg);
}

.qa-toggle:checked + .qa-summary + .qa-content {
	grid-template-rows: 1fr;
}













/* ══════════════════════════════════════════════════════════ */
/* ══ TABLE COMPONENTS                                     ── */
/* ══════════════════════════════════════════════════════════ */

.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 24px 0;
	border-radius: var(--r);
	border: 2px solid color-mix(in srgb, var(--border) 40%, transparent);
	background: color-mix(in srgb, var(--bg) 20%, transparent);
}
#post-body table {
    width: 100%;
    border-collapse: separate; /* Allows border-radius to work */
    border-spacing: 0;         /* Removes the default gaps between cells */
    overflow: hidden;          /* Clips the child cells to the rounded corners */
    margin: 0; 
    font-size: clamp(13px, 0.85vw, 16px);
    text-align: left;
    
    /* background: color-mix(in srgb, var(--bg) 20%, transparent); */
    /* border: 2px solid color-mix(in srgb, var(--border) 20%, transparent);
    border-radius: var(--r); */
}

#post-body th,
#post-body td {
	padding: 14px 18px;
	border-bottom: 2px solid color-mix(in srgb, var(--border) 20%, transparent);
	border-right: 2px solid color-mix(in srgb, var(--border) 20%, transparent);
	color: var(--text);
	line-height: 1.5;
	vertical-align: top;
}

#post-body th:last-child,
#post-body td:last-child {
	border-right: none;
}

#post-body tr:last-child td {
	border-bottom: none;
}

#post-body th {
	background: color-mix(in srgb, var(--border) 10%, transparent);
	font-weight: 800;
	color: var(--dimtitle);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

#post-body tbody tr {
	transition: background 0.2s ease;
}

#post-body tbody tr:hover {
	background: color-mix(in srgb, var(--border) 8%, transparent);
}












        #similar-articles-container h1,
        #post-body h1 {
           font-weight: 900 !important;
            margin: 50px 0 25px;
            color: var(--blogAlt) !important;
			opacity: 0.7;
            font-size: clamp(28px, 3vw, 50px);
            line-height: 1.1;
            text-transform: uppercase;
        }
        /* #similar-articles-container h1,
        #post-body h1 {
            font-weight: 900 !important;
            margin: 50px 0 25px;
            color: var(--blogAlt) !important;
            font-size: clamp(28px, 3vw, 50px);
            line-height: 1.1;
            text-transform: uppercase;
        } */

        #post-body h2 {
            font-weight: 900 !important;
            font-size: clamp(22px, 2.5vw, 36px);
            /* color: var(--text); */
            color: var(--border);
            margin: 40px 0 16px;
            padding-bottom: 8px;
            border-bottom: 3px solid var(--border);
            scroll-margin-top: 30px;
            text-transform: uppercase;
        }

        #post-body h3 {
            font-weight: 900 !important;
            font-size: clamp(17px, 1.5vw, 26px);
            color: var(--text);
            opacity: 0.7;
            /* text-transform: uppercase; */
            text-transform: lowercase !important;
            margin-top: 20px;
            position: relative;
            padding-bottom: 8px;
            scroll-margin-top: 20px;
            font-style: italic;
        }

        #post-body h3::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            /* width: calc(var(--article-width) / 15); */
            width: calc(var(--article-width) / 10);
            background: color-mix(in srgb, var(--border) 50%, transparent);
        }


	
		 .article-tag-link {
		color: inherit !important;
		text-decoration: none;
		transition: all 0.2s; /* Ensures smooth transition */
		cursor: pointer;
		}

		.article-tag-link:hover {
			color: var(--text) !important;
			/* -webkit-text-stroke: 0.6px var(--text); */
			-webkit-text-stroke: 0.8px var(--text);
		}
		.article-tag-link:hover::after {
		-webkit-text-stroke: 0; 
		}


		/* 1. Unlocks the container width and forces long strings to wrap */
#post-body {
    max-width: 100% !important; 
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 2. Allows images to shrink naturally on phones <400px wide */
#post-body img {
    max-width: min(100%, 700px) !important;
}

:root {
            /* --bg: #0a0a0a; */
            /* --text: #d0d3cd; */
            /* --g: #647661; */
            /* --gd: #232922; */
            --border: var(--title) !important;
        }

        /* @media (min-width: 1051px) {
            #sb {
                display: revert !important;
            }
        } */

/* :root {
            --text: #b3b3b3;
        } */

        /* 2-Column Desktop Blog Feed */
        #blog-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--uni-gap);
            align-items: stretch;
        }

        #blog-post .ech {
            position: relative;
            margin-bottom: 30px;
            border-bottom: none !important;
        }

        #post-body {
            max-width: var(--article-width);
        }

        #post-cover-wrap {
            max-width: var(--article-width);
        }

        .ech {
            max-width: var(--article-width);
        }

        #blog-post .ech::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: calc(var(--article-width) / 15);
            background: var(--blogAlt);
        }

        /* .wi-img-wrap {
            min-height: 100px;
            height: auto;
        } */
        @media (max-width: 1350px) {
            /* #blog-list {
                grid-template-columns: 1fr;
            } */
        }

        @media (max-width: 1150px) {
            #blog-list .wi-img-wrap {
                height: 1vw;
            }

            #blog-list .ecm span:not(:last-child)::after,
            #blog-list .ecm a:not(:last-child)::after {
                opacity: 1 !important;
            }

            #blog-list .ecm {
                flex-direction: row !important;
                align-items: baseline !important;
                flex-wrap: wrap;
            }
        }

        .feed-tag-link {
            color: var(--blogAlt) !important;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: color 0.2s;
        }

        .feed-tag-link:hover {
            color: var(--blogAlt) !important;
        }



        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #post-cover-wrap {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 100%;
            height: 500px;
            opacity: 0.5;
            z-index: -1;
            overflow: hidden;
            mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
            animation: fadeIn 0.67s ease-in forwards;
        }

        #post-cover-wrap::after {
            content: "";
            position: absolute;
            inset: 0;
            /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 100%); */
            background: linear-gradient(to bottom, rgba(255, 254, 254, 0.4) 0%, rgba(255, 254, 254, 0.8) 100%);
            pointer-events: none;
        }

        #post-cover-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            /* opacity: 0.5; */
            opacity: 0.7;
        }

        #blog-container {
            padding: 20px 48px 60px;
            max-width: 11000px;
        }

        @media (max-width: 1050px) {
            #blog-container {
                padding: 20px 22px 60px;
            }
        }

        #post-body strong,
        #post-body b {
            color: var(--border);
            font-weight: 500;
            font-weight: 700;
        }


        #post-body h1 strong,
        #post-body h1 b,
        #post-body h2 strong,
        #post-body h2 b,
        #post-body h3 strong,
        #post-body h3 b {
            font-weight: 900 !important;
        }

        #post-body p {
            font-size: clamp(14px, 0.9vw, 20px);
            line-height: 1.5;
            margin-bottom: 5px;
            color: var(--text);
        }

        #post-body blockquote {
            background: transparent;
            border: none;
            /* border-left: 3px solid var(--g); */
            border-left: 3px solid var(--border);
            padding: 2px 0 2px 18px;
        }

        #post-body blockquote p {
            margin-bottom: 16px;
            font-size: clamp(14px, 0.9vw, 20px);
            color: var(--gl);
            color: var(--border);
            line-height: 1.6;
            font-style: normal;
        }

        #post-body blockquote p:last-child {
            margin-bottom: 0;
        }

        #post-body blockquote strong,
        #post-body blockquote b {
            /* color: var(--g); */
            font-weight: 700;
        }

        #post-body blockquote a {
            color: inherit;
            text-decoration: none;
        }

        #post-body blockquote a:hover {
            /* color: var(--blogAlt); */
            text-decoration: underline;
        }

        #post-body blockquote a:hover strong,
        #post-body blockquote a:hover b {
            color: inherit;
        }

        #post-body pre {
            background: var(--surface2);
            border: 1px solid var(--border);
            padding: 18px;
            border-radius: var(--r);
            overflow-x: auto;
            margin: 24px 0;
        }

        #post-body code {
            font-family: monospace;
            color: var(--gl);
            color: var(--accent);
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border);
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 0.9em;
        }

        #post-body pre code {
            background: transparent;
            padding: 0;
        }

        #post-body a {
            color: var(--blogAlt);
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.2s;
        }

        #post-body a:hover {
            color: var(--blogAlt);
        }

        #post-body figure {
            margin: 24px 0 0 0;
            display: block;
        }

        #post-body img {
            border-radius: var(--r);
            margin: 24px 0 0 0;
            display: block;
            border: 1px solid var(--border);
            width: 100%;
            max-width: clamp(400px, 40%, 700px);
        }

        #post-body figure img {
            margin: 0;
        }

        #post-body figcaption {
            margin-top: 8px;
            font-size: 13px;
            /* color: var(--tdim); */
            color: var(--border);
            font-style: italic;
            line-height: 1.4;
            max-width: clamp(400px, 75%, 850px);
        }

        #post-body ul,
        #post-body ol {
            margin-left: 20px;
            color: var(--text);
            line-height: 1.5;
            font-size: clamp(14px, 0.9vw, 20px);
        }

        #post-body li {
            margin-bottom: 8px;
        }

        #post-body li::marker {
            color: var(--dimtitle);
        }

        /* #blog-list .wi {
            border-radius: 20px;
        } */

        .post-top-nav {
            display: flex;
            justify-content: flex-start;
            gap: 20px;
            align-items: center;
            margin-bottom: 20px;
        }

        .post-arrows {
            display: flex;
            gap: 10px;
        }

        .post-arrow-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            font-size: 12px;
            border-radius: 50%;
            border: 2px solid var(--blogAlt);
            color: var(--blogAlt);
            background: transparent;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
        }

        .post-arrow-btn:hover:not(.disabled) {
            color: var(--bg) !important;
            background: var(--blogAlt);
        }

        .post-arrow-btn.disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .article-tag-link {
            color: inherit !important;
            text-decoration: none;
            transition: color 0.2s;
            cursor: pointer;
        }

        .article-tag-link:hover {
            color: var(--text) !important;
        }

        .ecm a:not(:last-child)::after {
            content: " // ";
            margin: 0 5px;
            opacity: .7;
            font-weight: normal;
            color: var(--dimtitle);
        }

        .similar-hdr {
            font-weight: 900;
            font-size: clamp(18px, 2vw, 24px);
            color: var(--dimtitle);
            margin: 60px 0 20px;
            padding-bottom: 10px;
            padding-top: 30px;
            border-bottom: 3px solid var(--blogAlt);
            text-transform: uppercase;
        }

        .similar-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--uni-gap);
        }

        @media (max-width: 800px) {
            .similar-grid {
                grid-template-columns: 1fr;
            }
        }

        /* #blog-post {
            transition: opacity 0.25s ease-in-out;
            opacity: 1;
        }

        #blog-post.hidden {
            opacity: 0;
        } */

        /* #blog-post {
            transition: opacity 0.3s ease-in-out;
            opacity: 1;
        }

        #blog-post.loading {
            opacity: 0;
        } */
        #blog-post {
            opacity: 1;
            transform: translateY(0px);
            transition:
                opacity 0.22s ease,
                transform 0.22s ease;
            /* will-change: opacity, transform; */
        }

        #blog-post.loading {
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        #sb-nav {
            transition: opacity 0.18s ease;
        }

        #sb-nav.loading {
            opacity: 0.55;
        }


        /* #post-body {
    display: block !important; 
    min-height: 200px; 
    opacity: 1 !important;
}

.cbody.full {
    display: block !important;
} */

        /* --- SIMILAR ARTICLES SPECIFIC STYLING --- */
        .similar-img-wrap {
            aspect-ratio: auto !important;
        }

        @media (max-width: 1150px) {
            .similar-img-wrap {
                height: 140px !important;
                /* Squashes the height on tablets */
            }
        }

        @media (max-width: 800px) {
            .similar-img-wrap {
                height: 100px !important;
                /* Heavily squashes the height on mobile */
            }
        }









        /* --- TILE MODE GRID OVERRIDES --- */
        #blog-list,
        #similar-articles-grid {
            display: grid;
            /* grid-template-columns: repeat(auto-fill, minmax(300px, 400px)); */
            /* grid-template-columns: repeat(auto-fill, minmax(200px, 300px)); */
            /* justify-content: start; */
            grid-template-columns: repeat(auto-fill, minmax(max(250px, 5vw), 1fr)) !important;
            /* grid-template-columns: repeat(auto-fill, minmax(max(250px, 5vw), 1fr)) !important; */
            align-items: stretch;
            gap: var(--uni-gap);
        }


        /* Note: The old 1300px media query was deleted because this new math handles all screen sizes automatically! */

        @media (min-width: 1300px) {

            #blog-list,
            #similar-articles-grid {
                grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
                /* grid-template-columns: repeat(auto-fill, minmax(max(250px, 5vw), 1fr)) !important; */
            }
        }

        @media (max-width: 800px) {

            #blog-list,
            #similar-articles-grid {
                grid-template-columns: 1fr 1fr !important;
            }
        }


        /* @media (max-width: 450px) {

            #blog-list,
            #similar-articles-grid {
                grid-template-columns: 1fr;
            }
        } */







        /* --- CUSTOM BLOG TILE STYLING --- */

        /* Fix the thumbnail clipping */
        .blog-thumb {
            width: 100%;
            height: 190px;
            min-height: 190px;
            flex-shrink: 0;
            /* Prevents flexbox from squishing the image height */
            position: relative;
            overflow: hidden;
            background: #111;
            /* Fallback color */
            /* border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); */
            border-bottom: inherit;
        }

        .blog-thumb img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Hover Effects */
        .blog-card-inner:hover .blog-thumb img {
            transform: scale(1.05);
            /* Slight zoom on image */
        }

        .blog-card-inner:hover .wi-title {
            color: var(--text);
            /* Title brightens */
        }

        /* Ensure badges stay correct inside the blog feed */
        .blog-card-inner .badge {
            /* background: color-mix(in srgb, var(--badge) 15%, transparent); */
            background: color-mix(in srgb, var(--badge) 100%, transparent);
            /* border: 1px solid var(--dull); */
            /* color: var(--dull) !important; */
            border: 1px solid var(--g);
            color: var(--g) !important;
            transition: all 0.2s ease;
            font-weight: 700;
        }

        .blog-card-inner .feed-tag-link {
            color: var(--bg) !important;
        }

        .blog-card-inner .feed-tag-link:hover {
            background: var(--badge);
            color: var(--bg) !important;
            border-color: var(--badge);
            transform: translateY(-2px);
        }

        /* Mobile Adjustments */
        @media (max-width: 800px) {
            .blog-thumb {
                height: 140px;
                min-height: 140px;
            }
        }

        /* @media (min-width: 1051px) {
            #mn {
                padding-right: 0;
            }

            #hero {
                padding-right: calc(var(--sw) + 10px);
            }
        } */
        @media (max-width: 1100px) {
            #mn {
                padding-right: 0 !important;
            }
        }

        @media (min-width: 1051px) {
            /* #mn {
                padding-right: calc(var(--sw) + 10px);
            } */

            #hero {
                /* padding-right: calc(var(--sw) + 10px); */
                padding-right: 0;
            }

            /* Center the blog feed and article container on ultra-wide screens */
            #blog-container {
                /* max-width: max(min(95vw, 1400px), 40vw) !important; */
                max-width: max(min(95vw, 2400px), 40vw) !important;
                max-width: 100vw !important;
                max-width: 10000px !important;
                /* max-width: none !important; */
                margin: 0 auto !important;
            }

            /* Inherit max-width so cards span the centered container perfectly */
            .uni-card {
                max-width: 100% !important;
            }
        }

        /* @media (min-width: 2051px) {
            #blog-container {
                margin: 0 auto !important;
            }
        } */

        @media (min-width: 1800px) {
            #sb {
                /* left: 24px; */
                /* left: 14px; */
                /* left: 18px; */
                /* left: 16px; */
                left: clamp(14px, 18px, 24px);
                /* width: 220px; */
                /* width: clamp(220px,13vw,300px); */
                width: clamp(220px, 12vw, 350px);
                /* width: 220px; */
            }
        }

        /* 
.iframe-container {
    position: relative;
    width: 100%;
}

.iframe-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; 
}
#post-body .post-iframe {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
} */

/* ── OWNER-ONLY DRAFT MARKERS ── */
.draft-flag {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 7px 14px;
    background: #ff7a1a;
    color: #170d02;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.draft-flag i {
    font-size: 10px;
}

.draft-banner {
    display: none;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 10px 16px;
    background: #ff7a1a;
    color: #170d02;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.draft-banner i {
    font-size: 11px;
}