/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */

:root {
    --logo--max-height: 2.75rem;
}

.logo {
    display: inline-block;
    transition: transform 300ms ease-in-out;
}

.logo:hover {
    transform: scale(1.05) rotate(-1.5deg);
}

.logo:active {
    transform: scale(1.025) rotate(-1.5deg);
}


/* ==========================================================================
   Breaking News
   ========================================================================== */

/* .card-post-breaking-news-image.is-recent {
    border: 4px solid #d32f2f !important;
    box-sizing: border-box !important;
}

.card-post-live-image.is-recent {
    border: 4px solid #d32f2f !important;
    box-sizing: border-box !important;
} */

.card-post-breaking-news-badge.is-recent {
	display: flex !important;
	align-items: center !important;
	background-color: #d32f2f !important;
    color: #fff !important;
    padding: var(--spacing-1) var(--spacing-4) !important;
    border-radius: 0.25rem !important;
}

.card-post-breaking-news-badge.is-recent strong {
    font-weight: 700 !important;
    margin-left: var(--spacing-2) !important;
}

.card-post-breaking-news-badge.is-recent:hover {
	background-color: #b71c1c;
}

.card-post-live-badge.is-recent {
	display: flex !important;
	align-items: center !important;
	background-color: #d32f2f !important;
    color: #fff !important;
    padding: var(--spacing-1) var(--spacing-4) !important;
    border-radius: 0.25rem !important;
}

.card-post-live-badge.is-recent strong {
    font-weight: 700 !important;
    margin-left: var(--spacing-2) !important;
}

.card-post-live-badge.is-recent:hover {
	background-color: #b71c1c;
}

/* Post header breaking news badge */
.post-breaking-news-badge.is-recent {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: var(--spacing-2);
	width: 100%;
	padding: var(--spacing-2) var(--spacing-4);
	border-radius: var(--radius-1);
	background-color: #d32f2f;
	color: #fff;
	font-size: var(--font-small);
	font-weight: var(--font-weight-medium);
	transition: background-color 0.15s ease;
}

.post-breaking-news-badge:hover {
	background-color: #b71c1c;
}

.post-breaking-news-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.post-breaking-news-badge strong {
	font-weight: 700;
}

.post-template-insanityoverride .post-title {
	font-size: 2.5rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

@media (max-width: 600px) {
	.post-template-insanityoverride .post-title {
		font-size: 1.5rem !important;
	}
}

.post-template-insanityoverride .post-header-info {
	padding-left: 0 !important;
}

.post-template-insanityoverride .post-media>.post-featured-image figcaption {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.card-post-image-badge > * {
    /* backdrop blur */
    backdrop-filter: blur(10px) !important;
}

/* ==========================================================================
   Simple Two-Column Post Layout
   ========================================================================== */

.post-template-insanityoverride .post-content-grid {
	display: grid !important;
	grid-template-columns: 1fr 320px !important;
	align-items: start !important;
	gap: 2rem !important;
	width: 100% !important;
	max-width: var(--container-wide--width, 1200px) !important;
	margin: 0 auto !important;
	padding: 0 0rem !important;
	box-sizing: border-box !important;
}

/* Main content column */
.post-template-insanityoverride .post-content-wrapper {
	grid-column: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

/* Sidebar column */
.post-template-insanityoverride .post-sidebar {
	grid-column: 2 !important;
	grid-row: 1 / -1 !important;
}

/* Make sidebar sticky */
.post-template-insanityoverride .post-sidebar {
	position: sticky !important;
	top: calc(var(--navbar--min-height, 60px) + 1rem) !important;
	max-height: calc(100vh - var(--navbar--min-height, 60px) - 2rem) !important;
	overflow-y: auto !important;
}

/* ==========================================================================
   Fix Header & Buttons
   ========================================================================== */

.post-template-insanityoverride .post-header {
	position: relative !important;
	z-index: 1 !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.post-template-insanityoverride .post-header-info {
	width: 100% !important;
	margin-bottom: 1rem !important;
}

.post-template-insanityoverride .post-header-buttons {
	display: flex !important;
	gap: 0.5rem !important;
}

/* ==========================================================================
   TOC: Desktop in sidebar, Mobile in content
   ========================================================================== */

/* Hide mobile TOC on desktop (sidebar has the TOC) */
.post-template-insanityoverride .toc-mobile-only {
	display: none !important;
}

@media (max-width: 1024px) {
	/* Show mobile TOC on mobile */
	.post-template-insanityoverride .toc-mobile-only {
		display: block !important;
	}
}

/* ==========================================================================
   Fix Media - no overlap
   ========================================================================== */

.post-template-insanityoverride .post-media {
	position: relative !important;
	z-index: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* ==========================================================================
   Fix Avatar Positioning - Make Inline
   ========================================================================== */

.post-template-insanityoverride .post-meta {
	padding-left: 0 !important;
	min-height: auto !important;
}

.post-template-insanityoverride .post-meta > li:first-child {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 100% !important;
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: var(--spacing-3) !important;
	position: relative !important;
}

/* Primary author: avatar + text inline */
.post-template-insanityoverride .post-meta-author:first-child {
	display: flex !important;
	align-items: center !important;
	gap: var(--spacing-2) !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Make primary author's avatar image container position relative for overlapping */
.post-template-insanityoverride .post-meta-author:first-child > .post-meta-author-image {
	position: relative !important;
	display: inline-block !important;
}

/* Second author's avatar overlapping primary avatar */
.post-template-insanityoverride .post-meta-author:nth-child(2) {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: var(--avatar-large--size) !important;
	height: var(--avatar-large--size) !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

.post-template-insanityoverride .post-meta-author:nth-child(2) > .post-meta-author-image {
	--avatar--size: 1.25rem !important;
	--avatar--font-size: var(--font-x-small) !important;
	position: absolute !important;
	right: -0.25rem !important;
	bottom: -0.25rem !important;
	top: auto !important;
	left: auto !important;
	pointer-events: visible !important;
	border-radius: 50% !important;
	z-index: 2 !important;
}

/* Smaller avatars on mobile */
@media (max-width: 600px) {
	.post-template-insanityoverride .post-meta-author:first-child > .post-meta-author-image .avatar-large {
		--avatar-large--size: 2rem !important; /* Reduced from 2.875rem */
		font-size: 0.875rem !important;
	}

	.post-template-insanityoverride .post-meta-author:nth-child(2) {
		width: 2rem !important;
		height: 2rem !important;
	}

	.post-template-insanityoverride .post-meta-author:nth-child(2) > .post-meta-author-image {
		--avatar--size: 1rem !important; /* Reduced from 1.25rem */
		--avatar--font-size: 0.625rem !important;
	}
}

.post-template-insanityoverride .post-meta-author-image {
	position: static !important;
	top: auto !important;
	left: auto !important;
	inset: auto !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.post-template-insanityoverride .post-meta-authors-more {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================================
   Fix Content flow
   ========================================================================== */

.post-template-insanityoverride .post-content {
	width: 100% !important;
	max-width: 100% !important;
}

.post-template-insanityoverride .post-tags {
	margin: 0 !important;
}

/* ==========================================================================
   Mobile: Single column
   ========================================================================== */

@media (max-width: 1024px) {
	.post-template-insanityoverride .post-content-grid {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 0rem !important;
	}

	.post-template-insanityoverride .post-content-wrapper {
		width: 100% !important;
		max-width: 100% !important;
        gap: 0rem !important;
	}

	.post-template-insanityoverride .post-content-wrapper > * {
		margin-bottom: 1.5rem !important;
	}

	.post-template-insanityoverride .post-sidebar {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 2rem !important;
	}

	.post-template-insanityoverride .post-header {
		flex-direction: column !important;
	}

	.post-template-insanityoverride .post-header-buttons {
		width: 100% !important;
		justify-content: flex-start !important;
	}
}

/* ==========================================================================
   Prevent content overflow
   ========================================================================== */

.post-template-insanityoverride .post-content img,
.post-template-insanityoverride .post-content video,
.post-template-insanityoverride .post-media img,
.post-template-insanityoverride .post-media video {
	max-width: 100% !important;
	height: auto !important;
}

/* Iframes: cap width only. Never force height:auto — X/Twitter embed
   widgets set an inline pixel height; height:auto !important clips them. */
.post-template-insanityoverride .post-content iframe,
.post-template-insanityoverride .post-media iframe {
	max-width: 100% !important;
}

.post-template-insanityoverride .post-content .kg-embed-card .twitter-tweet,
.post-template-insanityoverride .post-content .kg-embed-card iframe[id^="twitter-widget"],
.post-template-insanityoverride .post-content .kg-embed-card iframe[src*="platform.twitter.com"],
.post-template-insanityoverride .post-content .kg-embed-card iframe[src*="syndication.twitter.com"] {
	max-height: none !important;
}

/* ==========================================================================
   Podcast Tag Page - Square Featured Images
   ========================================================================== */

/* article.tag-podcast > .card-post-image {
	aspect-ratio: 1/1;
} */

/* Fix slider button wrapper aspect ratio for podcast posts to match square images */
.section.section-tag.tag-podcast .slider-button-wrapper,
.section.section-tag.tag-podcast article.card-post .card-post-image,
.tag-template.tag-podcast article.card-post .card-post-image {
	aspect-ratio: 1/1 !important;
}

/* ==========================================================================
   Author Page - Square Avatar
   ========================================================================== */

.section-hero-image img,
.card-author-image {
	aspect-ratio: 1/1 !important;
}

.card-author-content {
    /* clip text to three lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3.6em;
    word-break: break-word;
    word-wrap: break-word;
    white-space: normal;
}

/* ==========================================================================
   Tag Hero Image - Full Width
   ========================================================================== */

.section-hero-content {
	width: 100% !important;
	max-width: 100% !important;
}

.section-tag-hero-image {
	width: 100% !important;
	max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.section-tag-hero-image img {
	width: 100% !important;
	max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-4) !important;
}