/*
	Theme Name:   Stranger Dimensions 2023
	Theme URI:    https://strangerdimensions.com/
	Description:  Stranger Dimensions 2023 Theme
	Author:       Rob Schwarz
	Author URI:   https://www.strangerdimensions.com
	Template:     jannah
	Version:      6.2.3
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* write custom css after this line */

/* Body */

  body {
    background: 
      linear-gradient(30deg, rgba(15,20,30,0.22) 0%, rgba(15,20,30,0.22) 12%, transparent 12%, transparent 38%, rgba(10,15,25,0.18) 38%, rgba(10,15,25,0.18) 50%, transparent 50%),
      linear-gradient(150deg, rgba(0,136,204,0.14) 0%, rgba(0,136,204,0.14) 15%, transparent 15%, transparent 42%, rgba(0,120,180,0.12) 42%, rgba(0,120,180,0.12) 58%, transparent 58%),
      linear-gradient(80deg, rgba(10,15,25,0.16) 0%, rgba(10,15,25,0.16) 20%, transparent 20%, transparent 55%, rgba(15,20,30,0.14) 55%, rgba(15,20,30,0.14) 70%, transparent 70%),
      repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,136,204,0.025) 3px, rgba(0,136,204,0.025) 7px),
      linear-gradient(135deg, #0f1419 0%, #0f1419 30%, #1a2333 48%, #2a4d80 62%, #0088cc 80%, #0088cc 100%) !important;
    background-size: 300px 300px, 400px 400px, 350px 350px, auto, auto !important;
    background-position: 0 0, 120px 80px, -60px 200px, 0 0, 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    position: relative !important;
  }

/* overwrites */

.post-tags-modern .tagcloud { border-top: 0; border-bottom: 0; }
.tie-icon-moon { margin-right: 10px; }
.category-1022 .site-footer { margin-top: 0; }

/* Archives */

#archive-posts { text-align: left; margin-top: 40px; }
.archive-spacer { margin-bottom: 20px; }
.tag-link-count { color: #2c2f34; }
.page-template-archives-temp #the-post .entry-content, .page-template-archives-temp #the-post .entry-content p { font-size: 15px; }
.post-tags-modern .tagcloud { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding-bottom: 10px; }

/* Ads */

.within-post { clear: both; padding: 15px 0 15px 0; margin: 40px auto 40px auto; text-align: center; max-width: 340px; }
.after-post { clear: both; padding: 15px 0 15px 0; margin: 30px auto 60px auto; text-align: center; max-width: 370px; }
.sidebar-post { clear: both; padding: 15px 0 15px 0; margin: 40px auto 10px auto; text-align: center; max-width: 370px; }
.a-title { font-size: 0.9rem; color: #3a424f; }
.entry-content .wp-caption .wp-caption-text { margin-bottom: 30px; text-align: right; }

/* Homepage */

.homepage-features .block-custom-content-50 a { color: #ddd !important; }
.homepage-features .block-custom-content-50 a:hover { color: #00a1ef !important; }
.homepage-features .the-global-title { border-bottom-color: rgba(255,255,255,0.1) !important; }
.homepage-features .container { max-width: 1200px !important; margin-top: 20px; }
.homepage-features .block-custom-content-50 li { color: #fff; font-size: 1.1em; }
.homepage-features .block-custom-content-50 li:not(:last-child) { margin-bottom: 10px; }
.homepage-features h3 { color: #00a1ef; }
.homepage-features div.mag-box-title::after { background: #00a1ef !important; }
.homepage-features .post-title a { color: #00a1ef !important;  }
.homepage-features .post-title a:hover { color: #fff !important;  }
.homepage-features .updated { margin-top: 40px; font-style: italic; color: #aaa; }
.homepage-features .mag-box .post-excerpt { color: #aaa; }

/* Also Homepage */

.homepage-categories .featured-cats { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.homepage-categories .boom a { color: #fff; text-decoration: none; letter-spacing: 1px; transition: 0.5s; }
.homepage-categories .boom a:hover { color: rgb(0, 161, 239);  }
.homepage-categories .columns { display: flex; gap: 20px; justify-content: space-between; margin: 20px auto; }
.homepage-categories .three-column { flex-basis: 33%; }
.homepage-categories .double-column { flex-basis: 50%; }
.homepage-categories .boom { background-color: #222; padding: 20px 40px; line-height: 1.5; color: rgba(255,255,255,0.9);  }
.homepage-categories .boom h3 { margin: 0; padding: 0; }
.homepage-categories .tcurved { border-top-left-radius: 25px; border-top-right-radius: 25px; }
.homepage-categories .botcurved { border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; font-size: 1.15rem;  }
.homepage-categories img { max-width: 100%; width: 100%; height: auto; }
.homepage-categories img { transition: 0.5s; }
.homepage-categories img:hover { opacity: 0.8; }
.homepage-categories .underlined { border-bottom: 2px solid #FFBE3B; border-spacing: 10px;  } 
.homepage-categories .underlined:hover { border-bottom: 2px solid #fff; }
.homepage-categories .boom li { font-size: 1.1em; list-style: square; margin-left: -20px; line-height: 26px;} 
.homepage-categories .boom li:not(:last-child) { margin-bottom: 10px; }
.homepage-categories .centered { margin: 0 auto; text-align: center; font-size: 2.4em;}

/* Like Button */

.like-button-wrapper {
    margin: 5px;
}

.like-button {
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.like-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.like-count {
    margin-left: 10px;
}

/* Jump Box */

/* Base styles in stylesheet */
.stylish-textbox {
    position: relative;
    padding: 2rem 3rem;
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.stylish-textbox .main-text {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Arial', sans-serif;
}

.stylish-textbox .sub-text {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    font-style: italic;
    font-family: 'Georgia', serif;
}

/* Dark mode styles */
.dark-skin .stylish-textbox {
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .stylish-textbox .main-text {
        font-size: 1.8rem;
    }
    .stylish-textbox .sub-text {
        font-size: 1rem;
    }
}

/* Highlight Box */

.highlight-box {
    background: #f8f9fa;
    border-left: 4px solid #5DABFD;
    padding: 20px;
    margin: 25px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 100%;
    transition: all 0.3s ease;
}

.highlight-title {
    margin: 0 0 15px 0;
    color: #000;
    font-size: 1.25em;
    padding-bottom: 10px;
}

.highlight-content {
    margin: 0;
}

.highlight-item {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #D6E4F0;
    border-radius: 3px;
}

.highlight-item:last-child {
    margin-bottom: 0;
}

/* Dark mode styles */
.dark-skin .highlight-box {
    background: #2a3036;
    border-left-color: #4dabf7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.dark-skin .highlight-title {
    color: #4dabf7;
    border-bottom-color: rgba(77,171,247,0.2);
}

.dark-skin .highlight-item {
    color: #e9ecef;
    background: rgba(255,255,255,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .highlight-box {
        margin: 20px 10px;
        padding: 15px;
    }
    
    .highlight-title {
        font-size: 1.1em;
    }
    
    .highlight-item {
        font-size: 1em;
    }
}

/* Social Stuff */

.social-share {
    display: flex;
    justify-content: left;
    gap: 15px;
   margin: -10px 0 20px 0;
    flex-wrap: wrap;
}

.heading-wrapper .social-share {
	justify-content: center;
	margin: 0 auto 60px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #E8ECEF; /* Your sleek gray */
    color: #333;
    border-radius: 50%; /* Circular buttons */
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: #DDE4E8;
    color: #000;
}

/* Dark Mode */
.dark-skin .share-btn {
    background: #2a3238; /* Matches your tag list */
    color: #d0d0d0;
}

.dark-skin .share-btn:hover {
    background: #3a444c;
    color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
    .share-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
.like-button-wrapper {
    margin: 2px 0 0;
}
}

/* Highlighted Links */

.highlighted-links {
    padding: 10px 20px;
    color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
    width: 75vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.highlighted-headline {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    font-weight: 700;
	border: 0 !important;
}

.highlighted-headline a { color: #5DABFD; }

.highlighted-links .hlinks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	border-bottom: 4px solid #1F2323;
	border-right: 4px solid #1F2323;
	padding: 20px 40px 40px 40px;
}

.highlighted-links .link-item {
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 10px;
	border-bottom: 0 !important;
}

.highlighted-links .link-title {
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    font-weight: 500;
	color: #3277C5;
}

.dark-skin .highlighted-links .link-title {
	color: #76ACEA;
}

.highlighted-links .link-item:hover .link-title { text-decoration: underline; }
.dark-skin .highlighted-links .link-item:hover .link-title { color: #fff; }

.highlighted-links .link-text {
    font-size: 1rem;
    margin: 0;
    opacity: 0.8;
    line-height: 1.4;
}

/* Hover Effect: Underline animation */
.highlighted-links .link-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.highlighted-links .link-item:hover::after {
    width: 100%;
}

.highlighted-links .link-item:hover {
    color: #e0e0e0; /* Slight brighten on hover */
    transform: translateY(-3px); /* Subtle lift */
}

/* Responsive adjustments */
@media (max-width: 940px) {
   .highlighted-links  .links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
.highlighted-links {
	margin: 0 20px;
    padding: 10px 0px;
    color: #ffffff;
    max-width: 1200px;
    margin: 0 auto;
	position: static;
	transform: none;
	width: 100%;
}
   .highlighted-links  .hlinks-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
   .highlighted-links  .hlinks-grid {
        grid-template-columns: 1fr;
    }
}

/* in post */

.post-template-weeklies-temp #footer { margin-top: 0; }

.post-template-weeklies-temp .content-wrapper {
    display: block;             
    max-width: none;         
	margin-top: 60px;
}

.two-videos-wrapper {
    width: 75vw;
    max-width: 1400px; /* Adjust as needed */
	margin: 20px auto 40px;
    padding: 0 10px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.two-column-videos {
    display: flex;
    justify-content: space-between;
}

.two-video {
    flex: 1;
    margin: 0 15px;
}

.two-video iframe {
    width: 100%;
   aspect-ratio: 16 / 9;
}

/* Responsive adjustment */
@media (max-width: 1060px) {
	.two-videos-wrapper { 
	position: static;
    transform: none;
    padding: 0;
	width: 100%;
	}
    .two-column-videos {
        width: 100%;
        max-width: 100%;
        flex-direction: column; /* Stack videos on small screens */
    }
    .two-video {
        margin: 10px 0;
    }
}

/* Weeklies */

.weekly-post-wrapper {
    max-width: 100%;
    margin: 0 auto;
    background: #171d22; /* #0e1519 */
    color: #BABABA;
}

.weeklies-wrapper { 
    max-width: 100%;
    margin: 0 auto;
    color: #2a2a2a;
}

.dark-skin .weeklies-wrapper { color: #bababa; }

.homepage-backwrapper {
	
}

.weekly-post-wrapper .post-date, .weeklies-wrapper .post-date {
	font-size: 16px;
 color: rgba(255, 255, 255, 0.75);
}

.weekly .giant-hero { min-height: 460px; }

.weekly .post-hero {
    position: relative;
    min-height: 500px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4)); /* Darker gradient */
}

.weekly .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
	 filter: blur(10px); /* Reduced overall blur */
    transform: scale(1.1);
    transition: transform 0.5s ease;
	height: 100%;
}
.weekly .post-hero:hover .hero-background {
    transform: scale(1.1);
}

.weekly .hero-overlay {
    position: relative;
    z-index: 3; /* Bumped up to sit above the ::after pseudo-element */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    padding: 40px;
    color: #fff;
}

.weekly .post-title {
    font-size: 3.25rem;
    text-align: center;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    color: #fff;
}

.weekly .hero-subtitle {
    font-size: 1.3rem;
    font-weight: 300;
	line-height: 1.4;
    margin: 15px 0 20px;
    color: rgba(255, 255, 255, 0.9);
}

.weekly .post-meta {
    margin-top: 20px;
    font-size: 1.2rem;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
}

.weekly .post-meta span {
    margin: 0 15px;
}

.weekly .hero-tags {
    margin-top: 20px;
}

.weekly .post-content p a { color: #3277C5 !important; }
.dark-skin .weekly .post-content p a { color: #76ACEA !important; }
.weekly .post-content p a:hover { text-decoration: underline; }

.weekly .wider-image {
	width: 75vw;
	max-width: 1400px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.weekly .post-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
	font-size: 1.15rem;
	color: #999;
	font-family: 'Roboto', sans-serif;
}

.weekly .wp-block-pullquote {
	border-bottom: 0;
	border-top: 0;
	color: color: #2a2a2a;
	padding: 20px 0;

}

.dark-skin .weekly .wp-block-pullquote { color: #bbb; }

.weekly .wp-block-pullquote blockquote.quote-simple p { color: #2a2a2a; } 
.dark-skin .weekly .wp-block-pullquote blockquote.quote-simple p { color: #bbb; }

.weekly h2 { color: #E8ECEF; border-bottom: solid 2px #2D3748; padding-bottom: 10px; margin-top: 40px; }

.weeklies-yo h2 { color: #2a2a2a; border-bottom: solid 2px #2D3748; padding-bottom: 10px; margin-top: 40px; }
.dark-skin .weeklies-yo h2 { color: #E8ECEF;}

.weeklies-yo p { 
	line-height: 1.7;
	margin: 30px 0;
	color: #2a2a2a;
	font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.dark-skin .weeklies-yo p {
	color: #bababa;
}

.weekly .post-content img {
    max-width: 100%;
    height: auto;
}

.weekly .related-posts {
    background: #111;
    padding: 40px 20px;
    width: 100%;
    margin-top: 40px;
}

.weekly .related-posts h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
}

.weekly .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.weekly .related-item {
    padding: 20px;
    transition: transform 0.3s ease;
}

post-template-new-post-temp .related-item { background: #1a1a1a; }

.new-related {
	background: #E8ECEF !important;
}

.new-related a { color: #333 !important; }
.new-related a:hover { color: #333 !important; text-decoration: underline !important; }

.dark-skin .new-related a { color: #fff !important; }
.dark-skin .new-related a:hover { color: #fff !important; text-decoration: underline !important; }

.dark-skin .new-related {
	background: #0F181F !important;
}

.weekly .related-item:hover {
    transform: translateY(-5px);
}

.weekly .related-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 15px;
}

.weekly .related-item h3 {
    margin: 0;
    font-size: 1.2rem;
}

.weekly .related-item a {
    color: #fff;
    text-decoration: none;
}

.weekly .related-item a:hover {
    color: #ddd;
}

.author-wrapper {
	margin: 0 auto 40px;
	padding: 0 0 0 20px;
	max-width: 700px;
	background-color: #fdfdff;
	border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.dark-skin .author-wrapper {
    border: 1px solid #3a424f;
    border-radius: 10px;
    background-color: #252b33;
    color: #b0b0b0;
}

.author-wrapper .author-card {
  display: flex;
  align-items: center;
  max-width: 1340px;
  width: 100%;
  border-radius: 8px; /* Slight rounded corners */
  overflow: hidden; /* Ensures content respects the rounded corners */
  margin: 0 auto; /* Centers the card */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  background: #1f2024;
}

.author-wrapper .author-card a { color: #F8A662; }
.author-wrapper .author-card a:hover { text-decoration: underline; }

.new-author { background: transparent !important; box-shadow: none !important; color: #333a44 !important; }
.dark-skin .new-author {
	background: transparent !important; color: #b0b0b0 !important; 
}

.author-wrapper .author-image {
  flex: 0 0 auto;
  width: 120px; /* Fixed width for the image */
  height: 120px; /* Square image */
}

.author-wrapper .author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the space nicely */
  border-radius: 50px;
}

.author-wrapper .author-heading {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #F8A662; /* A vibrant orange for style */
  text-transform: uppercase; /* Adds a touch of sophistication */
  letter-spacing: 1px; /* Slight spacing for readability */
}

.author-wrapper .author-info {
  flex: 1;
  padding: 20px 20px 0;
  color: #fff; /* White text for dark theme */
}

.author-wrapper .author-name {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 600;
  color: #e0e0e0; /* Slightly off-white for a softer look */
}

.author-wrapper .author-description {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #b0b0b0; /* Light gray for readability */
}



@media (max-width: 560px) {
	
	.author-wrapper {
		padding: 20px 20px 0 20px;
	}
	
	.author-wrapper .author-image {
	  flex: 0 0 auto;
	  width: 80px; /* Fixed width for the image */
	  height: 80px; /* Square image */
	}

	.author-wrapper .author-image img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* Ensures the image fills the space nicely */
	}

		.author-wrapper .author-heading {
	  margin: 0 0 8px 0;
	  font-size: 14px;

	}

	.author-wrapper .author-name {
	  font-size: 20px;
	}

	.author-wrapper .author-description {
	  font-size: 12px;
	}
	
.author-wrapper .author-info {
  padding: 0 0 0 10px;
}
	
}

/* New Post Format */

h2.new-heading { color: #000; margin-bottom: 20px; text-transform: uppercase; text-align: center; border: 0;}
.dark-skin h2.new-heading { color: #fff; margin-bottom: 20px; text-transform: uppercase; text-align: center; }

/* Tag List Container */
.new-post .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 40px;
}

/* Individual Tag Styling */
.new-post .tags-list a {
    display: inline-block;
    padding: 6px 12px;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 12px;
    font-size: 16px;
	font-weight: 600;
    transition: all 0.3s ease;
}

.new-post .tags-list a:hover {
    background: #e0e0e0;
    color: #000;
}

/* Dark Mode Styling */
.dark-skin .new-post .tags-list a {
    background: #2a3238;
    color: #d0d0d0;
}

.dark-skin .new-post .tags-list a:hover {
    background: #3a444c;
    color: #fff;
}

/* Curated Related */

    .curated-related {
        font-family: Arial, sans-serif;
        margin: 20px 20px 30px 0;
        color: #333;
        transition: all 0.3s ease;
    }

    .dark-skin {
        background-color: #1a1a1a;
        
    }

    .curated-related h3 {
        font-size: 18px; /* Smaller, fits WordPress post context */
        margin-bottom: 10px;
    }
	
	.dark-skin .curated-related h3 {
		color: #e0e0e0;
	}

    .curated-related hr {
        border: 0;
        border-top: 1px solid #ccc;
        margin: 10px 0;
    }

    .dark-skin .curated-related hr {
        border-top: 1px solid #555;
    }

    .curated-related ul {
        list-style-type: disc;
        padding-left: 20px;
        margin: 0;
        max-width: 600px;
    }

    .curated-related li {
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .curated-related li a {
        color: #0066cc;
        text-decoration: none;
    }

    .curated-related li a:hover {
        text-decoration: underline;
    }

    .dark-skin .curated-related li a {
        color: #66b3ff;
    }
	.dark-skin .curated-related li a:hover {
	color: #66b3ff;
	}


/* New Homepage */

.homepage-wrapper { max-width: 1320px; margin: 0 auto; padding: 20px 20px;}
.highlight-wrapper { max-width: 1340px; margin: 0 auto; padding: 0 20px 20px; }
.heading-wrapper { max-width: 1340px; margin: 0 auto; padding: 0 20px; }

/* .page-template-homepage-temp body, .page-template-homepage-temp #tie-body, .page-template-homepage-temp #tie-wrapper { background: #151414; } */

.page-template-homepage-temp #footer-widgets-container, .page-template-homepage-temp #site-info .tie-row { max-width: 1200px; margin: 0 auto; }
.page-template-homepage-temp #footer, .page-template-homepage-temp #content { margin-top: 0; }

.homepage-container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 20px 20px;
}


/* New Top Stories Section */

.top-stories-container {
    max-width: 1200px;
    margin: 10px auto 0;
    padding: 40px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.home-top-stories {
    flex: 2;
    min-width: 300px;
}

.other-stories {
    flex: 1;
    min-width: 300px;
}

.stories-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #007bff; /* Same accent for both modes */
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stories-section-big {
	font-size: 28px;
}

.stories-section-small {
	font-size: 22px;
}

.dark-skin .stories-section-heading {
	color: #5DABFD;
}

.stories-section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #007bff;
    opacity: 0.3;
}

/* Top Story Styles */
.top-story {
    margin-bottom: 40px;
}

/* Main Top Story (Massive Headline, Bold Description) */
.top-stories-main {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.top-stories-main .top-story-content {
    flex: 2;
    min-width: 300px;
}

.top-stories-main .top-story-headline {
    margin-bottom: 15px;
}

.top-stories-main .top-story-headline a {
    color: #000; /* Black for light mode */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    text-transform: uppercase;
    transition: text-decoration 0.2s ease;
}

.top-stories-main .top-story-headline a:hover {
    text-decoration: underline;
}

.dark-skin .top-stories-main .top-story-headline a {
    color: #ffffff; /* White for dark mode */
}


.top-stories-main p {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #333; /* Dark for light mode */
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.dark-skin .top-stories-main p {
    color: #ffffff; /* White for dark mode */
}

.top-stories-main .top-story-image {
    flex: 1;
    max-width: 300px;
    height: auto;
    border-radius: 4px;
    display: none; /* Hidden by default */
}

.top-stories-main .top-story-image[src] {
    display: block; /* Show if image is present */
}

/* Divider */
.top-story-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Light mode */
    margin: 20px 0;
}

.dark-skin .top-story-divider  {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Dark mode */
}

/* Secondary Top Stories (Simpler, 30px Headline) */
.top-story-secondary .top-story-headline {
    margin-bottom: 10px;
}

.top-story-secondary .top-story-headline a {
    color: #000; /* Black for light mode */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    transition: text-decoration 0.2s ease;
}

.dark-skin .top-story-secondary .top-story-headline a {
    color: #ffffff; /* White for dark mode */
}

.top-story-secondary .top-story-headline a:hover {
    text-decoration: underline;
}

.top-story-secondary p {
    font-size: 16px;
    color: #555; /* Slightly lighter for light mode */
}

.dark-skin .top-story-secondary p {
    color: #cccccc; /* Original for dark mode */
}

.meta {
    font-size: 14px;
    color: #555; /* Light mode */
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.dark-skin .meta {
    color: #cccccc; /* Dark mode */
}


/* Other Stories */
.other-story {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Light mode */
}

.dark-skin .other-story {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Dark mode */
}

.other-story img { max-width: 100%; }

.other-story:last-child {
    border-bottom: none;
}

.other-story h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.other-story h3 a {
    color: #000; /* Black for light mode */
    text-decoration: none;
}

.dark-skin .other-story h3 a {
    color: #ffffff; /* White for dark mode */
}

.other-story h3 a:hover {
    text-decoration: underline;
}

.other-story p {
    font-size: 14px;
    color: #555; /* Light mode */
}

.dark-skin .other-story p {
    color: #cccccc; /* Dark mode */
}


.stories-meta {
    font-size: 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.dark-skin .stories-meta { color: #cccccc; }

.stories-meta .publish-date::before {
    content: '??? ';
    font-size: 12px;
    margin-right: 5px;
}

.heyhey { text-transform: uppercase; font-weight: 900;}
.oranj { color: #CA5D52 !important; }
.bloop { color: #3596FB !important; } 
.dark-skin .oranj { color:#F29188 !important; }
.dark-skin .bloop { color: #5DABFD !important; }

/* Responsive Design */
@media (max-width: 768px) {
    .top-stories-container {
        flex-direction: column;
        padding: 20px;
    }

    .stories-section-heading {
        font-size: 24px;
    }

    .top-stories-main .top-story-headline a {
        font-size: 36px;
    }

    .top-stories-main p {
        font-size: 16px;
    }

    .top-stories-main .top-story-image {
        max-width: 100%;
    }

    .top-story-secondary .top-story-headline a {
        font-size: 26px;
    }

    .top-story-secondary p {
        font-size: 14px;
    }
	
	.other-stories {
		padding-top: 0;
		margin-top: -30px;
	}

    .other-story h3 {
        font-size: 18px;
    }
}


/* Article Footer */

.article-footer-box {
    background: #fdfdff; 
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    margin: 30px auto 40px;
    max-width: 700px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    transition: all 0.3s ease;
}

/* Dark Mode */
.dark-skin .article-footer-box {
    background: #252b33; 
    border-color: #3a424f;
    color: #e0e0e0;
}

/* Heading */
.article-footer-box h3 {
    font-size: 1.5rem;
    margin: 0 0 16px;
    color: #333a44; 
}

.dark-skin .article-footer-box h3 {
    color: #ffffff;
}

.article-footer-box .share-cta {
    font-size: 1rem;
    margin: 0 0 12px;
    color: #333a44;
}

.dark-skin .article-footer-box .share-cta {
    color: #b0b0b0;
}

/* Social Links */
.article-footer-box .social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.article-footer-box .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #edf2f7;
    color: #2d3748;
    border-radius: 50%;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.article-footer-box .share-btn:hover {
    background: #d0d5db;
    transform: scale(1.1);
}

.dark-skin .article-footer-box .share-btn {
    background: #3a424f;
    color: #e0e0e0;
}

.dark-skin .article-footer-box .share-btn:hover {
    background: #4a5568;
}

/* Article Meta (Dates and Category) */
.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #666;
    padding: 12px 16px;
    background: #edf2f7;
    border-radius: 6px;
    margin-bottom: 16px;
}

.dark-skin .article-meta {
    background: #171d22;
    color: #b0b0b0;
}

.article-footer-box .meta-date {
    flex: 1;
    text-align: left;
}

.article-footer-box .meta-date:last-child {
    text-align: right;
}

.article-footer-box .meta-category {
    font-weight: 700;
    color: #333;
	font-size: 1.15rem;
}

.article-footer-box .category-link {
	color: #0088cc;
	border-bottom: 1px solid #0088cc;
}

.dark-skin .article-footer-box .category-link {
	color: #4fc3f7;
	border-bottom: 1px solid #4fc3f7;
}

.article-footer-box .category-link:hover { 
	border-bottom: none;
}

.dark-skin .article-footer-box .meta-category {
    color: #e0e0e0;
}

.dark-skin .article-footer-box .category-link:hover {
    color: #fff;
	border: none;
}

/* Tags */
.article-footer-box .article-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.article-footer-box .tag {
    font-size: 0.85rem;
    color: #2d3748;
    background: #edf2f7;
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
	font-weight: 700;
	letter-spacing: 1px;
}

.article-footer-box .tag:hover {
    background: #d0d5db;
}

.dark-skin .article-footer-box .tag {
    color: #e0e0e0;
    background: #3a424f;
}

.dark-skin .article-footer-box .tag:hover {
    background: #4a5568;
}

/* Responsive Design */
@media (max-width: 600px) {
    .article-footer-box {
        padding: 16px;
        margin: 16px;
    }

    .article-footer-box h3 {
        font-size: 1.25rem;
    }

    .article-footer-box .article-meta {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .article-footer-box .meta-date,
    .article-footer-box .meta-date:last-child {
        text-align: center;
    }

    .article-footer-box .social-links {
        gap: 8px;
    }

    .article-footer-box .share-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

.homepage-darker { }

/* Giant Hero Section */
.giant-hero {
  position: relative;
  width: 100%;
  min-height: 600px; /* Changed to min-height */
  background: #212529;
	margin-bottom: 20px;
	overflow: hidden;
}

/* Blurred Background */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Stretches with container */
  background-size: cover;
  background-position: center;
  filter: blur(10px) brightness(75%);
  z-index: 1;
  transform: scale(1.1);
}

/* Content Container */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  box-sizing: border-box;
  min-height: inherit; /* Inherits min-height from parent */
}

/* Featured Image */
.hero-image {
  flex: 0 0 600px;
  max-width: 600px;
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Meta Section */
.hero-meta {
  flex: 1;
  color: #fff;
  text-align: left;
  max-width: 600px;
}

.hero-date {
  display: block;
  font-size: 16px;
 color: rgba(255, 255, 255, 0.75);
  margin-bottom: 10px;
}

.hero-title {
  font-size: 48px;
  margin: 0 0 15px 0;
  line-height: 1.2;
}

.hero-title a {
  color: #fff;
  text-decoration: none;
}

.hero-title a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.hero-tags {
  margin-bottom: 15px;
}

.hero-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.hero-tag:hover {
  background: #007bff;
  transform: translateY(-2px);
	color: rgba(255, 255, 255, 0.75);
}

.hero-excerpt {
  font-size: 18px;
  color: #ddd;
  margin: 0 0 20px 0;
}

.hero-read-more {
  display: inline-block;
  padding: 12px 24px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.hero-read-more:hover {
  background: #0056b3;
	color: rgba(255, 255, 255, 0.75);
}

/* Responsive Adjustments */
@media (max-width: 1060px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 40px 20px; /* More vertical padding */
  }
  .hero-image {
    flex: none;
    max-width: 500px;
  }
  .hero-meta {
    max-width: 100%;
  }
  .hero-title {
    font-size: 36px;
  }
	.weekly .wider-image {
		width: 100%;
		max-width: 1400px;
		position: static;
		transform: none;
	}
}

@media (max-width: 768px) {
  .giant-hero {
    min-height: 700px; /* Increased to fit stacked content */
  }
  .hero-image {
    max-width: 100%;
  }
  .hero-title {
    font-size: 28px;
  }
  .hero-excerpt {
    font-size: 16px;
  }
}

/* Category Navigation Section */
.category-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1340px; /* Matches your .homepage-container */
  margin: 20px auto 40px; /* Centered with spacing */
  padding: 0 0 20px;
}

.category-card {
  flex: 1;
  background: #2f353b; /* Darker bg to match your theme */
  border-radius: 10px; /* Slightly rounded */
  padding: 20px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px); /* Bold lift effect */
  background: #3b4047; /* Lighter hover state */
}

.category-icon {
  margin-bottom: 15px;
}

.category-icon svg {
  width: 48px;
  height: 48px;
  stroke: #fff; /* White icons */
  transition: stroke 0.3s ease;
}

.category-card:hover .category-icon svg {
  stroke: rgba(255, 255, 255, 0.75); /* Blue on hover */
}

.category-title {
  font-size: 20px;
  font-weight: 700; /* Bold typography */
  margin: 0;
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .category-nav {
    flex-wrap: wrap; /* Wrap to 2x2 grid */
    gap: 15px;
  }
  .category-card {
    flex: 0 0 calc(50% - 7.5px); /* Two columns */
  }
}

@media (max-width: 600px) {
  .category-nav {
    flex-direction: column;
    padding: 0 10px;
  }
  .category-card {
    flex: none;
    width: 100%;
  }
}

/* Homepage Categories */

        .home-category-container {
  
  position: relative; /* Ensures it stays in the flow */
  left: 50%;
  transform: translateX(-50%); /* Centers it relative to viewport */
            margin: 0 auto;
            background-color: #232a30; /* Distinct background for the section */
            padding: 40px;
           
        }

        .category-flex-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .home-category-card {
            flex: 1;
            min-width: 250px;
            max-width: 350px;
            background-color: #2e353c; /* Slightly lighter than container for contrast */
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: transform 0.2s ease, background-color 0.2s ease;
            text-decoration: none; /* For the link */
            color: inherit; /* Inherit text color */
        }

        .home-category-card:hover {
            transform: translateY(-5px);
            background-color: #3a434c; /* Subtle hover background change */
        }

        .home-category-icon {
            font-size: 2.5rem;
            color: #5DABFD; /* Accent color for icons */
            margin-bottom: 15px;
        }

        .home-category-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #FFFFFF;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .home-category-description {
            font-size: 0.9rem;
            color: #D0D0D0;
            line-height: 1.4;
        }
		.home-headers {
			text-align: left;
			color: #000;
			margin: 40px auto;
			font-family: 'Montserrat', sans-serif;
			text-transform: uppercase; 
			font-weight: 900;
			font-size: 46px;
			font-style: italic;
		}

.dark-skin .home-headers { color: #fff; }

        /* Responsive Design */
        @media (max-width: 768px) {
            .home-category-container {
                padding: 20px;
            }

            .home-category-card {
                min-width: 100%;
                max-width: 100%;
            }

            .category-flex-container {
                flex-direction: column;
                align-items: center;
            }
        }

/* Featured Pair Section */
.featured-pair-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0 50px;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.pair-card {
  flex: 1;
  background: #f9f9f9; /* Light bg, or #343a40 for dark */
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
 transition: transform 0.2s;
}

.pair-image {
  position: relative;
  width: 100%;
  height: 450px; /* Updated height for prominence */
}

.pair-card:hover {
  transform: translateY(-5px);
}

.pair-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  border-radius: 8px 8px 0 0;
}

.pair-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay */
  padding: 20px; /* More padding for taller card */
  color: #fff;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Aligns content to bottom */
}

.pair-category {
  display: inline-block;
  background: #007bff; /* Vibrant blue bg */
  color: #fff;
  padding: 4px 12px;
  border-radius: 12px; /* Rounded rectangle */
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px; /* Space below category */
  text-transform: uppercase; /* Adds emphasis */
  letter-spacing: 0.5px; /* Slight spacing for style */
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.pair-category a, .pair-category a:hover { color: #fff; }

.pair-title {
  margin: 0 0 5px 0;
  font-size: 26px; /* Bigger for prominence */
}

.pair-title a {
  color: #fff;
  text-decoration: none;
}

.pair-title a:hover {
  color: #fff;
}

.pair-meta {
  margin: 0;
  font-size: 14px;
  color: #ddd;
}

/* Responsive */
@media (max-width: 768px) {
  .featured-pair-section {
    flex-direction: column;
  }
  .pair-card {
    width: 100%;
  }
}

/* Dark Theme Option */
.pair-card {
  background: #343a40; /* Uncomment for dark theme */
}

.pair-overlay {
  background: rgba(33, 37, 41, 0.7); /* Uncomment for dark theme */
}

/* Responsive */
@media (max-width: 768px) {
  .featured-pair-section {
    flex-direction: column;
  }
  .pair-card {
    width: 100%;
  }
}

.hero-header {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.hero-header .parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://www.strangerdimensions.com/wp-content/uploads/2025/01/sd_top_stories_jan27_2025.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.1s ease;
    will-change: transform; /* Optimizes performance */
    z-index: -1;
}

/* Highlights Section */
.highlights-section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 40px 0; /* Spacing above/below */
  max-width: 1400px; /* Matches your .homepage-container */
  margin-left: auto;
  margin-right: auto;
}

.highlight-card {
  flex: 1; /* Equal width for all 3 columns */
  background: #f9f9f9; /* Light bg, adjust if you want dark */
  border-radius: 8px; /* Slightly rounded borders */
  overflow: hidden; /* Keeps content inside rounded edges */
  min-width: 0; /* Prevents flex shrinkage issues */
transition: transform 0.2s;
}

.highlight-card:hover {
	 transform: translateY(-5px);
}

.highlight-image {
  position: relative;
  width: 100%;
  height: 400px; /* Fixed height for consistency */
background: #000;
}

.highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops image to fit */
  border-radius: 8px 8px 0 0; /* Rounded top only */
}

.highlight-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
  padding: 15px;
  color: #fff;
  border-radius: 0 0 8px 8px; /* Rounded bottom only */
}

.highlight-title {
  margin: 0 0 5px 0;
  font-size: 18px;
}

.highlight-title a {
  color: #fff;
  text-decoration: none;
}

.highlight-title a:hover {
  text-decoration: none;
  color: #E4EBF7;
}

.highlight-meta {
  margin: 0;
  font-size: 14px;
  color: #ddd;
}

.highlight-meta a {
	margin-left: 20px;
	color: #fff !important;
}

.hightlight-meta a:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

/* Responsive */
@media (max-width: 768px) {
  .highlights-section {
    flex-direction: column;
  }
  .highlight-card {
    width: 100%;
  }
}

/* Hero Section */
.hero {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  background: #212529; /* Soft charcoal */
  padding: 20px;
  border-radius: 8px;
}
.video-spotlight, .daily-image {
  flex: 1;
}

.video-spotlight h3 {
	color: #fff;
}

.homepage-highlight {
	padding: 20px 0 20px 10px;
	font-size: 14px;
	color: #999;
}

.daily-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.homepage-caption {
  text-align: center;
  font-size: 14px;
  color: #b0b3b8; /* Light gray for readability */
}

/* Today's Top Stories Header */
.top-stories {
  text-align: left;
  color: #fff; /* Keeping this neutral, adjust if you want it darker */
  margin: 20px 0 20px;
}

/* Links Grid */

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  background: #212529; /* Matches hero */
  padding: 20px;
  border-radius: 8px;
  max-width: 1400px;
  margin: 0 auto 20px;
}

.card {
  background: #3a3f44; /* Slightly lighter card bg */
  padding: 15px;
  border-radius: 8px;
  transition: transform 0.2s;
  text-decoration: none;
  color: #e0e0e0; /* Off-white text */
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card:hover {
  transform: translateY(-5px);
  background: #454b51; /* Subtle hover shift */
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.card-content {
  padding-top: 10px; /* Adds some space between image and text */
}


.card h3 {
  font-size: 18px;
  margin: 0 0 5px 0;
  color: #ffffff; /* Bright white for headlines */
}

.card p {
  font-size: 14px;
  color: #b0b3b8; /* Light gray for teasers */
}

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.daily-header {
  text-align: center;
  padding: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  margin-bottom: 20px;
}

.homepage-tag {
  position: relative;
  top: 10px;
  right: 10px;
  background: #007bff;
  color: white;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 3px;
}

.card.featured {
  grid-column: span 2; /* Spans 2 columns */
  background: #fff3cd;
}

/* homepage posts area */

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.post-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #e0e0e0; /* Light text for readability */
  margin-bottom: 20px;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 15px;
}

.post-placeholder {
  width: 100%;
  height: 180px;
  background: #2a2a2e;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-style: italic;
}

.post-date {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.dark-skin .post-date { color: #6c7f93; }

.post-category {
  font-size: 14px;
  color: #5DABFD;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
}

.dark-skin .post-category {
	color: #f8faff;
}

.post-title {
  font-size: 22px;
  margin: 0 0 12px;
}

.post-card .post-title a {
  text-decoration: none;
  color: #333; 
  transition: color 0.2s ease;
}

.dark-skin .post-card a:not(:hover) {color: #4fc3f7; transition: color 0.2s ease; }

.post-title a:hover {
  color: #4fc3f7;
  text-decoration: underline;
}

.post-excerpt {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

#homepage-load-more {
  display: block;
  margin: 40px auto 20px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#homepage-load-more:hover {
  background: #0056b3;
}

/* Responsive */
@media (max-width: 600px) {
  .hero {
    flex-direction: column;
  }
.top-stories {
  text-align: center;
	}
}

@media screen and (max-width: 980px) {
.homepage-categories .columns { display: block;}
.homepage-categories .three-column:not(:first-child), .double-column:not(:first-child) { margin-top: 30px; }
}

@media (min-width: 1200px) {
	.page-template-homepage-temp  .container { max-width: 100%; }
}

/* Story Highlights */

        .story-header {
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s, color 0.3s;
        }

        .story-title {
            font-size: 1.8em;
            font-weight: 600;
            margin: 0 0 10px;
            color: #1a1a1a;
        }

        .story-author {
            font-size: 1.1em;
            font-style: italic;
            margin: 0 0 8px;
            color: #555;
        }

        .story-publication {
            font-size: 0.95em;
            color: #666;
            margin: 0;
        }

        .story-publication span {
            font-weight: 500;
            color: #333;
        }

.story-publication .publication-link {
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.story-publication .publication-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

        /* Dark Mode Styles */
        .dark-skin {
            background-color: #171d22;
            color: #d1d5db;
        }

        .dark-skin .story-header {
            background-color: #2d3748;
            border-left-color: #60a5fa;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .dark-skin .story-title {
            color: #f3f4f6;
        }

        .dark-skin .story-author {
            color: #d1d5db;
        }

        .dark-skin .story-publication {
            color: #9ca3af;
        }

        .dark-skin .story-publication span {
            color: #e5e7eb;
        }

.dark-skin .story-publication span,
.dark-skin .story-publication .publication-link {
    color: #e5e7eb;
}

.dark-skin .story-publication .publication-link:hover {
    color: #93c5fd;
    text-decoration: underline;
}

        @media (max-width: 600px) {
            .story-header {
                padding: 15px;
            }

            .story-title {
                font-size: 1.5em;
            }

            .story-author {
                font-size: 1em;
            }
        }


        @media (min-width: 1200px) {
			.story-header { margin-left: -30px; }
		}

/* Hub */

.single-featured-image img {
	
}

        .new-feature {
            font-family: 'Georgia', serif;
            line-height: 1.6;
            color: #333a44;
        }

.dark-skin .new-feature {
	color: #d0dbe6;
}

        .hub .header-container,
        .hub .intro-section,
        .hub .content-section,
        .hub .cta-section,
        .hub .highlight-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px 20px 30px;
            width: 100%;
        }

        .hub .breadcrumbs {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .hub .breadcrumbs a {
            color: #0066cc;
            text-decoration: none;
            transition: color 0.2s;
        }

        .dark-skin .hub .breadcrumbs a {
            color: #66b3ff;
        }

        .hub .breadcrumbs a:hover {
            color: #003366;
            text-decoration: underline;
        }

        .dark-skin .hub .breadcrumbs a:hover {
            color: #99ccff;
        }

        .hub .breadcrumbs span {
            color: #666;
        }

        .dark-skin .hub .breadcrumbs span {
            color: #999;
        }

        .hub .header-content {
            max-width: 1200px;
        }

        .hub .header-content h1 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 3.5rem;
            color: #222;
            line-height: 1.2;
            margin-bottom: 10px;
			animation: fadeInUp 0.5s ease-out;
        }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

        .dark-skin .hub .header-content h1 {
            color: #f0f0f0;
        }

        .hub .header-content .subtitle {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.25rem;
            color: #555;
            margin-bottom: 15px;
        }

        .dark-skin .hub .header-content .subtitle {
            color: #bbb;
        }

        .hub .meta {
            font-family: 'Open Sans', sans-serif;
            font-size: 0.875rem;
            color: #777;
        }

        .dark-skin .hub .meta {
            color: #aaa;
        }

        .hub .meta .author,
        .hub .meta .updated {
            display: inline-block;
            margin-right: 20px;
        }

        .hub .meta a {
            color: #0066cc;
            text-decoration: none;
        }

        .dark-skin .hub .meta a {
            color: #66b3ff;
        }

        .hub .meta a:hover {
            text-decoration: underline;
        }

        .hub .header-image {
            width: 100%;
            max-width: 1200px;
            margin: 20px auto 0;
            display: block;
        }

        .dark-skin .hub .header-image {
            filter: brightness(90%);
        }

        .hub .intro-section p,
        .hub .content-section p {
            font-size: 1.125rem;
            margin-bottom: 20px;
            max-width: 700px;

        }

.hub .central p { margin-left: auto; margin-right: auto; }

.hub-full {
            margin-left: auto;
            margin-right: auto;
}

        .hub .content-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.75rem;
            color: #222;
            margin: 0 0 15px;
            max-width: 700px;
        }

        .dark-skin .hub .content-section h2 {
            color: #f0f0f0;
        }

        .hub .content-section.two-column-large h2 {
            font-size: 2.25rem;
            text-align: center;
        }

        .hub .pullquote {
            max-width: 450px;
            margin: 0 0 20px 20px;
            font-size: 1.5rem;
            line-height: 1.4;
            color: #222;
			font-style: italic;
        }
		
		.hub .pull-left {
			float: left;
		}
		
		.hub .pull-right { 
			float: right;
		}

        .dark-skin .hub .pullquote {
            color: #e0e0e0;
        }

        .hub .pullquote .attribution {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            margin-top: 10px;
            color: #0066cc;
			font-style: normal;
        }

        .dark-skin .hub .pullquote .attribution {
            color: #66b3ff;
        }

        .hub .content-section.text-image {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: flex-start;
        }

        .hub .content-section.text-image .text-content {
            flex: 1;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hub .content-section.text-image .image-content {
            flex: 0 0 400px;
            position: relative;
        }

        .hub .content-section.text-image.image-right .image-content {
            order: 2;
            margin-left: 20px;
            transform: translateX(30px);
        }

        .hub .content-section.text-image.image-left .image-content {
            order: -1;
            margin-right: 20px;
            transform: translateX(-30px);
        }

        .hub .content-section.text-image img {
            width: 100%;
            height: 600px;
            object-fit: cover;
            border-radius: 8px;
        }

        .dark-skin .hub .content-section.text-image img {
            filter: brightness(90%);
        }

        .hub .content-section.two-column {
            column-count: 2;
            column-gap: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hub .content-section.two-column h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            color: #222;
            margin: 20px 0 10px;
            break-before: avoid;
        }

        .dark-skin .hub .content-section.two-column h3 {
            color: #f0f0f0;
        }

        .hub .content-section.two-column p {
            margin-bottom: 20px;
            break-inside: avoid;
        }

        .hub .content-section.two-column-colored {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .hub .content-section.two-column-colored .column {
            background-color: #e6f0fa; /* Light blue */
            padding: 20px;
            border-radius: 8px;
        }

        .dark-skin .hub .content-section.two-column-colored .column {
            background-color: #2a4d7a; /* Darker blue for dark mode */
        }

        .hub .content-section.two-column-colored h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.25rem;
            color: #222;
            margin-bottom: 10px;
        }

        .dark-skin .hub .content-section.two-column-colored h3 {
            color: #f0f0f0;
        }

        .hub .content-section.two-column-colored p {
            margin-bottom: 20px;
        }

        .hub .highlight-section {
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .hub .highlight-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.75rem;
            color: #222;
            margin-bottom: 30px;
        }

        .dark-skin .hub .highlight-section h2 {
            color: #f0f0f0;
        }

        .hub .highlight-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 40px;
        }

        .hub .highlight-item {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .hub .highlight-item .text-content {
            flex: 1;
        }

        .hub .highlight-item .image-content {
            flex: 0 0 300px;
        }

        .hub .highlight-item img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 8px;
        }

        .dark-skin .hub .highlight-item img {
            filter: brightness(90%);
        }

        .hub .highlight-item h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: #222;
            margin-bottom: 10px;
        }

        .dark-skin .hub .highlight-item h3 {
            color: #f0f0f0;
        }

        .hub .highlight-item p {
            font-size: 1rem;
            margin-bottom: 15px;
        }

        .hub .highlight-item a {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            color: #0066cc;
            text-decoration: none;
            display: inline-block;
        }

        .dark-skin .hub .highlight-item a {
            color: #66b3ff;
        }

        .hub .highlight-item a:hover {
            color: #003366;
            text-decoration: underline;
        }

        .dark-skin .hub .highlight-item a:hover {
            color: #99ccff;
        }

       .hub .full-width-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
            margin: 40px 0;
        }

        .dark-skin .hub .full-width-image {
            filter: brightness(90%);
        }

        .hub .related-section {
            background-color: #e8ecef;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        .dark-skin .hub .related-section {
            background-color: #2c3235;
        }
		
		.hub .slide-section {
            background-color: #30373C;
            padding-top: 40px;
            padding-bottom: 40px;
		}
		
		.dark-skin .hub .slide-section {
            background-color: #2c3235;
		}

        .hub .related-section .related-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .hub .related-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.75rem;
            color: #222;
            margin-bottom: 20px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .dark-skin .hub .related-section h2 {
            color: #f0f0f0;
        }

        .hub .related-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .hub .related-card {
            text-decoration: none;
            color: #2a2a2a;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .dark-skin .hub .related-card {
            color: #e0e0e0;
            background-color: #3a3a3a;
        }

        .hub .related-card:hover {
            transform: translateY(-5px);
        }

        .hub .related-card img {
            width: 100%;
            aspect-ratio: 3 / 3;
            object-fit: cover;
        }

        .hub .related-card h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            padding: 15px;
            margin: 0;
			line-height: 1.4;
        }

        .hub .cta-section {
            text-align: center;
        }

        .hub .cta-section h2 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.75rem;
            color: #222;
            margin-bottom: 20px;
        }

        .dark-skin .hub .cta-section h2 {
            color: #f0f0f0;
        }

        .hub .cta-section form {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        .hub .cta-section input[type="email"] {
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 250px;
        }

        .dark-skin .hub .cta-section input[type="email"] {
            border-color: #666;
            background-color: #2a2a2a;
            color: #e0e0e0;
        }

        .hub .cta-section button {
            padding: 10px 20px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            background-color: #0066cc;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .dark-skin .hub .cta-section button {
            background-color: #66b3ff;
        }

        .hub .cta-section button:hover {
            background-color: #003366;
        }

        .dark-skin .hub .cta-section button:hover {
            background-color: #99ccff;
        }

        .hub .slider-container {
            max-width: 360px;
            margin: 20px auto;
        }

        .hub .slider-container label {
            display: block;
            font-family: 'Open Sans', sans-serif;
            font-size: 0.875rem;
            margin-bottom: 10px;
            color: #222;
        }

        .dark-skin .hub .slider-container label {
            color: #e0e0e0;
        }

        .hub .slider-container input[type="range"] {
            width: 100%;
            accent-color: #0066cc;
        }

        .dark-skin .hub .slider-container input[type="range"] {
            accent-color: #66b3ff;
        }

        @media (max-width: 768px) {
            .hub .header-container,
            .hub .intro-section,
            .hub .content-section,
            .hub .highlight-section,
            .hub .related-section .related-inner,
            .hub .cta-section {
                padding: 15px;
            }

            .hub .header-content h1 {
                font-size: 1.75rem;
            }

           .hub .header-content .subtitle {
                font-size: 1rem;
            }

           .hub .breadcrumbs,
            .hub .meta {
                font-size: 0.75rem;
            }

            .hub .content-section h2,
           .hub .highlight-section h2,
            .hub .related-section h2,
            .hub .cta-section h2 {
                font-size: 1.5rem;
            }

            .hub .content-section.two-column-large h2 {
                font-size: 1.75rem;
            }

           .hub .content-section h3,
            .hub .highlight-item h3 {
                font-size: 1.125rem;
            }

            .hub .intro-section p,
            .hub .content-section p,
            .hub .highlight-item p {
                font-size: 1rem;
            }

            .hub .pullquote {
                max-width: 100%;
                margin: 20px 0;
                font-size: 1.25rem;
            }
			
			.hub .pull-left, .pull-right {
				float: none;
			}

            .hub .content-section.text-image {
                flex-direction: column;
            }

            .hub .content-section.text-image .image-content {
                flex: 0 0 auto;
                max-width: 100%;
                margin: 0;
                transform: none;
            }

            .hub .content-section.text-image img {
                height: auto;
            }

            .hub .content-section.two-column {
                column-count: 1;
            }

            .hub .content-section.two-column-colored {
                grid-template-columns: 1fr;
            }

            .hub .highlight-grid {
                grid-template-columns: 1fr;
            }

            .hub .highlight-item {
                flex-direction: column;
            }

            .hub .highlight-item .image-content {
                flex: 0 0 auto;
                width: 100%;
            }

            .hub .highlight-item img {
                height: 300px;
            }

            .hub .related-card h3 {
                font-size: 1.25rem;
            }

            .hub .related-grid {
                grid-template-columns: 1fr;
            }

            .hub .cta-section form {
                flex-direction: column;
                align-items: center;
            }

            .hub .cta-section input[type="email"] {
                width: 100%;
                max-width: 300px;
            }

            .hub .full-width-image {
                height: 200px;
            }
			
			.hub .content-section.text-image.image-right .image-content {
			margin-left: 0;
			transform: none;
			}
        }

        @media (min-width: 1200px) {
            .hub .intro-section,
            .hub .content-section,
            .hub .highlight-section,
            .hub .related-section .related-inner,
           .hub .cta-section {
                padding: 40px 15px 20px;
            }
			.hub .header-container {
				padding: 0 15px 20px 30px;
			}
        }
	.hub .content-section ul {
		font-size: 1.125rem;
		margin-bottom: 20px;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	/* top 5 */
	      .top5-container {
            width: 100%;
            border-radius: 8px;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0 auto;
        }

.top5-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .top5-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .top5-number {
            font-size: 2rem;
            font-weight: 700;
            color: #3596FB;
            width: 40px;
            text-align: center;
            flex-shrink: 0;
			font-family: 'Montserrat', serif;
        }

        .top5-content {
            flex: 1;
            padding-left: 15px;
        }

        .top5-content a {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            text-decoration: none;
            line-height: 1.4;
            transition: color 0.2s ease;
        }
		
		.dark-skin .top5-content a { 
			color: #fff;
			text-decoration: underline;
		}

        .top5-content a:hover {
            color: #1a73e8;
        }

        .top5-content span {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
        }
		
		.dark-skin .top5-content span {
			color: #e0e0e0;
		}

        @media (max-width: 400px) {
            .top5-container {
                padding: 15px;
            }

            .top5-number {
                font-size: 1.8rem;
                width: 35px;
            }

            .top5-content a,
            .top5-content span {
                font-size: 1rem;
            }
        }

/* Books */

        .books-container {
            max-width: 1200px;
            margin: 0 auto;
			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
			line-height: 1.6;
            transition: background-color 0.3s ease;
        }

        .book-entry {
            background-color: #fff;
            margin-bottom: 2rem;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

		.book-entry img { margin-bottom: 20px; }

        .dark-skin .book-entry {
            background-color: #171d22;
            color: #c9d1d9;
        }

        .book-entry:hover {
            opacity: 0.9;
        }

        .dark-skin .book-entry:hover {
        }

        .book-entry h2 {
            color: #24292e;
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
			padding-top: 0;
        }

        .dark-skin .book-entry h2 {
            color: #f0f6fc;
        }

        .book-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: #6e7681;
        }

        .dark-skin .book-meta {
            color: #8b949e;
        }

        .book-meta span {
            background: #f6f8fa;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }

        .dark-skin .book-meta span {
            background: #21262d;
        }

        .book-location {
            background: #fff3cd;
            color: #856404;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85rem;
            margin-top: 0.5rem;
            display: inline-block;
        }

        .dark-skin .book-location {
            background: #66b3ff;
            color: #ffffff;
	    font-weight: 700;
        }

        .book-description {
            margin-top: 1rem;
			font-size: 1.1rem;
            color: #373a3c;
            line-height: 1.6;
        }

        .dark-skin .book-description {
            color: #c9d1d9;
        }

        @media (max-width: 768px) {
            
            .book-entry { 
                padding: 1rem;
            }
            
            .book-meta {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
		
	/* Two Column Section */
	
       .hub .two-column-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            justify-content: center;
            align-items: flex-start; /* Ensures top alignment */
        }

        .hub .two-column-container .column {
            flex: 1;
            min-width: 250px;
            max-width: 400px;
            padding: 20px;
            border-radius: 8px;
            position: relative;
            transition: all 0.3s ease;
        }

        .dark-skin .hub .two-column-container .column {

        }


        .hub .two-column-container .column::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20px;
            right: 20px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00d4ff, #ff00ff, transparent);
            opacity: 0.7;
        }

        .hub .two-column-container h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.4rem;
            margin: 0 0 15px 0;
            color: #222;
			line-height: 1.5;
        }

        .dark-skin .hub .two-column-container h3 {
            color: #f0f0f0; 
        }

        .hub .two-column-container p {
            font-size: 1.125rem;
            line-height: 1.6;
            margin: 0;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hub .two-column-container .column {
                flex: 1 1 100%;
                max-width: 100%;
            }
        }

        /* Optional: Expand to four columns on wide screens */
        @media (min-width: 1200px) {
            .hub .two-column-container .column {
                flex: 1 1 22%;
                max-width: 22%;
            }
        }

.hr-buffer { margin: 40px auto 40px; }
.end-buffer { margin: 0 auto; max-width: 700px; }

/* Dailies */

.dailies {
  display: block;
  text-decoration: none;
  max-width: 380px;
  height: 530px;
  margin: 0 auto;
}

.dailies-image-container {
  width: 100%;
  height: 100%;
  background: url('https://www.strangerdimensions.com/wp-content/uploads/2025/06/daily-somethings.webp') no-repeat center/cover;
  position: relative;
  transition: filter 0.3s ease;
	text-align: center;
}

.dailies:hover .dailies-image-container {
  filter: contrast(0.95) brightness(0.9);
}

.dailies-date-text {
  position: relative;
  top:62%;
  width:100%;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
}

.dailies:hover .dailies-date-text {
  text-decoration: underline;
}

/* archive loops */

.archive-loops {
  width: 90vw;
  margin: 0 auto; /* Center within viewport */
  position: relative; /* Optional, for z-index or other positioning */
  left: calc((1200px - 90vw) / 2); /* Offset to align with parent’s center */
}

/* Container */
.arch-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 30px 20px; /* Increased top/bottom padding */
}

/* Category Section */
.arch-category-section {
    margin-bottom: 60px; /* Increased vertical spacing */
}

.arch-category-title {
    font-size: 2em;
    margin-bottom: 30px; /* More spacing below title */
    color: #333;
}

.dark-skin .arch-category-title {
    color: #fff;
}

/* Posts Grid */
.arch-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

/* Large Posts (First 2) */
.arch-post-large {
    flex: 0 0 calc(50% - 15px);
    box-sizing: border-box;
}

.arch-post-large .arch-post-image {
    position: relative;
    padding-bottom: 70%; /* Slightly shorter than 4:3 (was 75%) */
    overflow: hidden;
	border-radius: 5px;
}

.arch-post-large .arch-post-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s ease;
}
/* Small Posts (Next 3) */
.arch-post-small {
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
}

.arch-post-small .arch-post-image {
    position: relative;
    padding-bottom: 70%; /* Slightly shorter than 4:3 (was 75%) */
    overflow: hidden;
	border-radius: 5px;
}

.arch-post-small .arch-post-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s ease;
	border-radius: 5px;
}

/* Zoom Effect on Hover */
.arch-post-image img:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

/* Post Content */
.arch-post-content {
    padding: 15px 0 20px; /* More vertical padding */
}

.arch-post-title {
    font-size: 1.7em; /* Slightly larger titles */
    font-weight: bold;
    margin: 0 0 5px; /* More spacing below title */
}

.arch-post-title a {
    text-decoration: none;
    color: #333;
}

.dark-skin .arch-post-title a {
    color: #fff;
}

.arch-post-title a:hover {
    text-decoration: underline;
}

.arch-post-meta {
    font-size: 1em; /* Slightly larger meta text */
    color: #666;
}

.dark-skin .arch-post-meta {
    color: #bbb;
}

.arch-post-date::after {
    content: ' | ';
    margin: 0 5px;
}

/* Load More Button */
.arch-load-more-1, .arch-load-more-2, .arch-load-more-3 {
    display: block;
    margin: 40px auto; /* More vertical spacing */
    padding: 12px 24px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1em;
	border-radius: 5px;
}

.dark-skin .arch-load-more-1, .dark-skin .arch-load-more-2, .dark-skin .arch-load-more-3,{
    background-color: #555;
    color: #fff;
}

.arch-load-more-1:hover, .arch-load-more-2:hover, .arch-load-more-3:hover {
    background-color: #555;
}

.dark-skin .arch-load-more-1:hover, .dark-skin .arch-load-more-2:hover, .dark-skin .arch-load-more-3:hover {
    background-color: #777;
}

.arch-load-more-1:disabled, .arch-load-more-2:disabled, .arch-load-more-3:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

.dark-skin .arch-load-more-1:disabled, .dark-skin .arch-load-more-2:disabled, .dark-skin .arch-load-more-3:disabled {
    background-color: #444;
    color: #888;
}

/* Responsive Design */
@media (max-width: 768px) {
    .arch-post-large,
    .arch-post-small {
        flex: 0 0 100%;
    }

    .arch-post-large .arch-post-image,
    .arch-post-small .arch-post-image {
        padding-bottom: 70%; /* Maintain same aspect ratio on mobile */
    }
}

@media (max-width: 1330px) {
	.archive-loops {
    width: 100%; /* Full width on mobile for simplicity */
    max-width: none; /* Remove max-width constraint */
    left: 0; /* Remove offset to avoid misalignment */
	}
}

@media (min-width: 992px) {
	nav.main-nav.menu-style-vertical-line .menu > li.tie-current-menu > a::after {
		height: 12px;
	}
}