/**
 * 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: 100%;
    --font-x-large: 1.425rem;
    
}

.kg-video-card { width: 75%}

.post-head>.post-title {font-size: var(--font-x-large )!important;  }
	
	
/* Square it up */

.navigation-sidebar .nav-link {border-radius: 0rem !important;}  

.widget-tags-card > div {border-radius: 0% !important;}  

.widget-tags-card:before {border-radius: 0rem !important;} 


/* Tag Page */
.tag > picture > img {
	
    aspect-ratio: auto !important;
    width: 90% !important;
      display: block;
	  margin: 0 auto;
	  margin-top: var(--spacing-7);
}

.widget-tags-card img {
	border-radius: 0% !important;
}

/*
.section-posts .post-card-media {--post-card--media--radius: calc(var(--radius-0) - var(--spacing-3)) !important;} 

.sections-style-cloud .section-posts article {border-radius: var(--radius-0) !important}

.post-media {--post--media--radius: var(--radius-0) !important }

.author, .page-error-card, .post:not(.custom-page), .pricing, .section-comments, .section-posts article, .section-pricing+.post-content, .tag {border-radius: var(--radius-0) !important;}
*/
/* Mobile NAV Changes*/

.navigation-mobile .nav-link > svg {
	color: #ffffff
}

.navigation-mobile > ul {
	background-color: #353535
	
}

.navigation-mobile button.nav-link {
	
}


/*Featured Posts Change*/
.widget-posts .widget-posts-card {
    background-color: var(--color-background);
    border-radius: var(--radius-3);
    box-shadow: var(--content--shadow);
    padding: var(--spacing-7);
}

  
/* Ensure video containers are responsive */
.kg-video-card video {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

/* On small screens, prevent video overflow */
@media (max-width: 768px) {
    .kg-video-card {
        max-width: 100%;
        overflow: hidden;
    }

    video {
        max-width: 100%;
        height: auto !important;
    }
}