/*!
Theme Name: ddpress
Author: Muhammad Umar Fiaz
Description: A high-performance, ad-optimized theme for interactive news blogs. Built for speed, SEO, and a modern, minimalist aesthetic.
Version: 2.0.9
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ddpress
*/

/*--------------------------------------------------------------
## 1.0 - Design System & Global Styles
--------------------------------------------------------------*/
:root {
	/* Colors */
	--color-text: #232323; 
	--color-text-light: #718096; /* Lighter gray for meta */
	--color-background: #ffffff; /* Very light gray background */
	--color-surface: #ffffff; /* White for cards and surfaces */
	--color-navbar: rgba(243, 248, 255, 0.5); /* Nav Bar Color*/
	--color-border: #e2e8f0; /* Light border color */
	--color-accent: #3182ce; /* A nice blue for accents */

	/* Typography */
	--font-heading: 'Roboto', sans-serif;
	--font-body: 'Roboto', sans-serif;
	--font-nav: 'Roboto', sans-serif;
	
	/* Spacing System */
	--space-xs: 0.5rem;   /* 8px */
	--space-sm: 0.75rem;  /* 12px */
	--space-md: 1.5rem;   /* 24px */
	--space-lg: 2.5rem;   /* 40px */
	--space-xl: 4rem;     /* 64px */

	/* Borders & Shadows */
	--global-radius: 5px;
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

body.mobile-menu-open, body.search-bar-open { overflow: hidden; }

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}
a:hover { color: var(--color-text); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 900;
	line-height: 1.3;
	color: var(--color-text);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }

/*--------------------------------------------------------------
## 1.5 - Interactive Element States
--------------------------------------------------------------*/
/* General link and button transition */
a, button, .button, input[type="submit"] {
    transition: all 0.2s ease-in-out;
}

/* Card Hover Effect */
.stacked-card, .list-item-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.stacked-card:hover, .list-item-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Button Hover Effect */
.search-form .search-submit, .comment-form .submit, .read-more-button {
    will-change: transform; /* Performance optimization */
}
.search-form .search-submit:hover, .comment-form .submit:hover {
    transform: scale(1.05);
    opacity: 0.9;
}
.read-more-button:hover {
    text-decoration: underline;
}

/* Icon Button Hover Effect */
.menu-toggle:hover, .search-toggle:hover, .mobile-menu-close-button:hover {
    transform: scale(1.1);
    color: var(--color-text);
}

/*--------------------------------------------------------------
## 2.0 - Header & Navigation
--------------------------------------------------------------*/
.site-header {
	background-color: var(--color-surface);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-sm);
}
.header-main { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-md); }
.header-left, .header-right { flex: 0 0 50px; }
.header-right { text-align: right; }
.site-branding { text-align: center; }
.site-branding img{ width: 120px; height: auto; }
.site-title { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; }
.site-title a { color: var(--color-text); text-decoration: none; }
.menu-toggle, .search-toggle { background: none; border: none; padding: 0; cursor: pointer; }

/* Hide Desktop Elements on Mobile */
.desktop-header-ad, .header-bottom { display: none; }

/* Search Panel */
.search-container { display: none; padding: var(--space-md); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); 
/* --- Animation Properties --- */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
body.search-bar-open .search-container { display: block; visibility: visible;
    opacity: 1;
    transform: translateY(0);}
.search-form { display: flex; }
.search-form .search-field { flex-grow: 1; border: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); font-size: 1rem; border-radius: var(--global-radius) 0 0 var(--global-radius); }
.search-form .search-submit { border: none; padding: 0 var(--space-sm); cursor: pointer; border-radius: 0 var(--global-radius) var(--global-radius) 0; }

/* Mobile Slide-out Menu */
amp-sidebar, .main-navigation ul#primary-menu-mobile {
	background: var(--color-surface);
	width: 280px;
	padding: var(--space-md);
	font-family: var(--font-nav);
}
.amp-sidebar-header { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.amp-sidebar-close-button { background: none; border: none; cursor: pointer; font-size: 2.5em; line-height: 1; padding: 0; }
.amp-sidebar-close-button:before { content: '\00d7'; }

.amp-mobile-menu-container ul, .main-navigation ul#primary-menu-mobile { list-style: none; margin: 0; padding: 0; }
.amp-mobile-menu-container a, .main-navigation ul#primary-menu-mobile a {
	display: block;
	padding: var(--space-sm) 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2em;
	color: var(--color-text);
}
/* Non-AMP menu panel */
.main-navigation ul#primary-menu-mobile {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: var(--shadow-md);
    background-color: var(--color-surface); /* Add background color */
    padding: var(--space-md); /* ADD PADDING */
    margin: 0; /* Ensure no default margin */
    list-style: none; /* Ensure no list style */
	font-family: var(--font-nav);
}
body.mobile-menu-open .main-navigation ul#primary-menu-mobile { transform: translateX(0); }



/*--------------------------------------------------------------
## 3.0 - Main Content & Post Lists (Mobile)
--------------------------------------------------------------*/
.site-content { padding: var(--space-xs); }

article.post { margin-bottom: var(--space-md); }

/* Shared Card Styles */
.entry-title { font-size: 20px; line-height: 1.4; margin: 0 0 0.2em 0; font-weight: 600; }
.entry-meta { font-size: 0.65rem; font-weight: 500; color: var(--color-text-light); text-transform: uppercase; }
.entry-meta span:not(:last-child)::after { content: '•'; margin: 0 0.6em; color: #ccc; }
.entry-summary { font-size: 16px; line-height: 1.4; color: var(--color-text); flex-grow: 1; }
.entry-summary p{margin: 3px 0;}
.entry-title a{ color: var(--color-text);}
.entry-title .subtitle {
    font-size: medium;
    font-weight: 400; /* Regular weight */
    line-height: 1.5;
    color: var(--color-text-light);
    margin-top: var(--space-xs);
}
.entry-header-single .subtitle {
	font-size: 18px;
}

/* Stacked Card (Standard Post) */
.stacked-card { background-color: var(--color-background); border-radius: var(--global-radius); overflow: hidden; border-bottom: 1px solid var(--color-border); /*box-shadow: var(--shadow-sm);*/ }
.stacked-card .post-thumbnail { display: block; aspect-ratio: 16 / 9; }
.stacked-card .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--global-radius);}
.stacked-card .entry-container { padding: var(--space-sm); display: flex; flex-direction: column; }
.stacked-card .entry-content-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This makes this wrapper fill the available vertical space */
}
/* In style.css, in Section 3.0 */

/* Ensure the parent thumbnail container is a positioning context */
.post-thumbnail {
    position: relative;
    overflow: hidden; /* Keeps the category box corners rounded with the image */
}

/* The container for the category links */
.category-on-thumbnail {
    position: absolute;
    bottom: var(--space-sm);
    left: 50%;
	bottom: 0;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: var(--space-xs);
}

/* The individual category link style */
.category-on-thumbnail a {
    display: inline-block;
    background-color: rgba(255,255,255,0.6);
    color: #555;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3em 0.8em;
    border-radius: 5px 5px 0 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.category-on-thumbnail a:hover {
    background-color: rgba(255,255,255,0.6);
    color: #333;
}


/* List Item Card (Video Post) */
.list-item-card { display: flex; gap: var(--space-sm); align-items: center; background-color: var(--color-background); 
    border-radius: var(--global-radius);     
    border-bottom: 1px solid var(--color-border);    
    padding: var(--space-sm);                 
    /*box-shadow: var(--shadow-sm); */            
    margin-bottom: var(--space-md);  }
.list-item-card .entry-title{ font-size: 16px; font-weight: 600;}
.list-item-card .entry-wrapper { flex: 1; min-width: 0; flex-basis: 65%; align-self: flex-start; }
.list-item-card .entry-meta { margin-bottom: 0; }
.list-item-card .post-thumbnail { flex-basis: 35%; flex-shrink: 0; position: relative; aspect-ratio: 4 / 3;}
.list-item-card .post-thumbnail img { border-radius: var(--global-radius); width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.list-item-card .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background-color: rgba(0,0,0,0.5); border-radius: 50%; background-repeat: no-repeat; background-position: center 1px; background-position-x: 11px; background-size: 14px; }

/* This makes the "Global" style list items more compact */
@media screen and (max-width: 991px) {
.global-format {
    padding: var(--space-sm); /* Reduce vertical padding */
    gap: var(--space-xs); /* Reduce gap between text and image */
}

.global-format .entry-title {
    font-size: 14px; /* Make the title smaller */
    font-weight: bold;
}

.global-format .subtitle{
	font-size: small;
}

.global-format .entry-meta {
    font-size: 10px; /* Make the meta text smaller */
}

.global-format .post-thumbnail {
    flex-basis: 20%; /* Make the thumbnail smaller */
}

.global-format .post-thumbnail img {
    width: 100%; /* Make the thumbnail image smaller */
}
.global-format .entry-wrapper{
	flex-basis: 80%;
}
}

@media screen and (min-width: 992px) {

.global-format .post-thumbnail {
    flex-basis: 25%; /* Make the thumbnail smaller */
}

.global-format .post-thumbnail img {
    width: 100%; /* Make the thumbnail image smaller */
}
.global-format .entry-wrapper{
	flex-basis: 75%;
}
}

/*--------------------------------------------------------------
## 4.0 - Single Post & Page
--------------------------------------------------------------*/
.single .site-main, .page .site-main { background-color: var(--color-surface); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--global-radius); }
.entry-header-single { text-align: center; margin-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-lg); }
.entry-header-single .entry-title { font-size: 24px; }
.entry-header-single .entry-meta { font-size: 12px; }
.post-thumbnail-single { margin-bottom: var(--space-lg); }
.post-thumbnail-single img { display: block; width: 100%; height: auto; border-radius: var(--global-radius); }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.5em; }
.entry-content ul, .entry-content ol { margin-left: 1.5em; }
.entry-content blockquote { border-left: 4px solid var(--color-accent); padding-left: 1.5em; margin: var(--space-lg) 0; font-style: italic; font-size: 1.1em; color: var(--color-text-light); }
.entry-footer { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.entry-content .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 1.5em; }
.entry-content .wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Post Navigation */
.nav-links { display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-lg) 0; }
.nav-links .nav-previous, .nav-links .nav-next { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--global-radius); }
.nav-links .nav-subtitle { display: block; font-size: 12px; color: var(--color-text-light); text-transform: uppercase; font-weight: 700; margin-bottom: 0.5em; }
.nav-links .nav-title { font-weight: 700; }

/*--------------------------------------------------------------
## 5.0 - Comments
--------------------------------------------------------------*/
.comments-area { margin-top: var(--space-xl); }
.comments-title, .comment-reply-title { font-size: 1.5rem; margin-bottom: var(--space-lg); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--global-radius); margin-bottom: var(--space-md); }
.comment-meta { margin-bottom: var(--space-sm); }
.comment-author { font-weight: 700; }
.comment-metadata a { font-size: 0.85rem; color: var(--color-text-light); }
.reply a { font-size: 0.9rem; font-weight: 700; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--global-radius);
	margin-bottom: var(--space-sm);
}
.comment-form .submit { background-color: var(--color-text); color: white; border: none; padding: var(--space-sm) var(--space-lg); border-radius: var(--global-radius); font-weight: 700; cursor: pointer; }

/*--------------------------------------------------------------
## 6.0 - Sidebar & Widgets
--------------------------------------------------------------*/
.widget-area { display: flex; flex-direction: column; gap: var(--space-lg); }
.widget { background-color: var(--color-surface); padding: var(--space-md); border-radius: var(--global-radius); border: 1px solid var(--color-border); }
.widget-title { font-size: 1.2rem; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-border); }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
.widget ul li:last-child { border-bottom: none; }

/*--------------------------------------------------------------
## 7.0 - Footer
--------------------------------------------------------------*/
.site-footer {
	background-color: var(--color-text);
	color: #a0aec0; /* A light gray, good for contrast on the dark background */
	font-size: 0.9rem;
}

.footer-widgets-wrapper {
	padding: var(--space-xl) var(--space-md);
}

.footer-widgets-container {
	display: grid;
	gap: var(--space-lg);
}

.footer-column .widget-title {
	color: var(--color-surface);
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--space-md);
	padding-bottom: 0;
	border-bottom: none;
}

.footer-column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-column ul li {
	padding: var(--space-xs) 0;
	border: none;
}

.footer-column a {
	color: #a0aec0;
	transition: color 0.2s ease-in-out;
}
.footer-column a:hover {
	color: var(--color-surface);
}

/* Sub-footer for copyright info */
.site-info {
	background-color: #1a202c; /* Even darker for contrast */
	padding: var(--space-md);
	text-align: center;
	font-size: 0.85rem;
}
.site-info a {
	color: var(--color-accent);
}

/* --- Desktop Layout for Footer --- */
@media screen and (min-width: 768px) {
	.footer-widgets-container {
		/* A 2-column layout for tablets */
		grid-template-columns: repeat(2, 1fr);
	}
    .site-info-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px; /* Match the rest of the layout */
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 1024px) {
	.footer-widgets-wrapper {
		padding: var(--space-xl);
	}
	.footer-widgets-container {
		/* The full 4-column layout for desktops */
		grid-template-columns: repeat(4, 1fr);
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*--------------------------------------------------------------
## 8.0 - Ad Placements
--------------------------------------------------------------*/
.ddpress-ad-container { margin: var(--space-lg) 0; padding: var(--space-md); text-align: center; }
.desktop-header-ad .ddpress-ad-container { margin: 0; background: none; min-height: 60px; }


/*--------------------------------------------------------------
## 9.0 - UNIFIED DESKTOP STYLES (AMP-FIRST)
--------------------------------------------------------------*/
@media screen and (min-width: 992px) {
	/* --- Layout --- */
	.site-content { padding: var(--space-xl); }
	#content-wrapper { display: grid; gap: var(--space-lg); max-width: 1400px; margin-left: auto; margin-right: auto; }
	#content-wrapper.layout-right { grid-template-columns: minmax(0, 1fr) 320px; }
	#content-wrapper.layout-left { grid-template-columns: 320px minmax(0, 1fr); }
	#content-wrapper.layout-both { grid-template-columns: 320px minmax(0, 1fr) 320px; }
	#content-wrapper.layout-none { grid-template-columns: minmax(0, 1fr); }
	.layout-left #primary { grid-column: 2 / 3; }
	.layout-both #primary { grid-column: 2 / 3; }
	.layout-both #secondary { grid-column: 3 / 4; }

	/* --- Header --- */
	.site-header { box-shadow: none; border-bottom: 1px solid var(--color-border); }
	.header-main { max-width: 1400px; margin-left: auto; margin-right: auto; }
    .site-branding { flex-grow: 1; text-align: left; }
	.site-branding img{ width: 180px; height: auto;}
    .header-right { flex-basis: 468px; flex-shrink: 0; }
	.desktop-header-ad { display: flex; align-items: center; justify-content: flex-end; height: 100%; }
    .desktop-nav-search { display: block; }
    .search-toggle, .menu-toggle { display: none; }
    nav.desktop-navigation ul { display: flex; list-style: none;}
    .main-navigation ul#primary-menu-mobile { display: none !important; }
	nav.desktop-navigation li a { padding: 1.2em 1.5em; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; }
    nav.desktop-navigation li:first-child a { padding-left: 0; }
	.desktop-nav-search .search-field { width: 250px; }

	/* --- Post Lists --- */
    body.blog #primary article.post, body.archive #primary article.post {
        display: flex;
        flex-direction: row;
        gap: var(--space-lg);
        align-items: flex-start;
        padding: var(--space-lg) 0;
        
		background-color: var(--color-surface); 
		border-radius: var(--global-radius);     
		border: 1px solid var(--color-border);    
		padding: var(--space-md);                 
		box-shadow: var(--shadow-sm);             
		margin-bottom: var(--space-md);
    }
    body.blog #primary article.post .entry-container, body.archive #primary article.post .entry-wrapper { padding: 0; }
	body.blog #primary article.post .entry-container{ flex-basis: 70%;}
    body.blog #primary article.post .post-thumbnail, body.archive #primary article.post .post-thumbnail { flex-basis: 30%; flex-shrink: 0; aspect-ratio: 16 / 9; }
	body.blog #primary article.post .entry-title, body.archive #primary article.post .entry-title { font-size: 1.5rem; }

	/* --- Single Post --- */
    .single .site-main, .page .site-main { padding: var(--space-xl) var(--space-xl); }
    .single .entry-header-single .entry-title { font-size: 30px; }
    .single .entry-content { max-width: 720px; margin-left: auto; margin-right: auto; }
	.nav-links { flex-direction: row; }

	/* --- Desktop Sticky Navigation on Scroll --- */
.site-header{
	position: inherit;
}
/* The Bottom Bar (Navigation & Search) */
    .header-bottom {
		display: block; /* Make it visible on desktop */
		background-color: var(--color-navbar);
		border-bottom: 1px solid var(--color-border);
		transition: all 0.2s ease-in-out; /* For smooth sticky effect */
	}
	.header-bottom-inner {
		display: flex; /* This is the flex container */
		align-items: center;
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 var(--space-md);
	}

	/* The Sticky Bottom Bar (When Scrolled) */
	.desktop-scrolled .header-bottom {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1000;
		box-shadow: var(--shadow-md);
	}
    
	/* Desktop Menu (Forced to Left) */
	nav.desktop-navigation {
		flex-grow: 1; /* THE KEY: This makes the nav grow and push the search bar to the right */
	}
	nav.desktop-navigation ul {
		display: flex;
		list-style: none; /* Explicitly remove list style */
		margin: 0;
		padding: 0;
	}
    nav.desktop-navigation li a {
		display: block;
		padding: 0.4em 1.5em;
		font-size: 0.9rem;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-text-light);
	}
    nav.desktop-navigation li:first-child a {
		padding-left: 20px;
	}
	nav.desktop-navigation li a:hover,
	.desktop-navigation .current-menu-item > a {
		color: var(--color-text);
	}
	.main-navigation ul#primary-menu-mobile {
		display: none !important;
	}

	/* Desktop Search Bar (Forced to Right) */
	.desktop-nav-search {
		display: block;
		flex-shrink: 0; /* Prevents the search bar from being squished */
	}
	.desktop-nav-search .search-form {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border: 1px solid var(--color-border);
		border-radius: var(--global-radius);
	}
	.desktop-nav-search .search-field {
		background: none;
		border: none;
		padding: 0.6em 1em;
		font-size: 0.9rem;
		width: 250px;
	}
	.desktop-nav-search .search-submit {
		background: none;
		border: none;
		padding: 0.5em;
		cursor: pointer;
		border-left: 1px solid var(--color-border);
	}
	.desktop-nav-search .search-submit svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	/* --- 2.5 - Desktop Sub-Menu --- */
nav.desktop-navigation .menu-item-has-children > a {
	padding-right: var(--space-sm); /* Make room for the hover arrow */
}
nav.desktop-navigation .menu-item-has-children > a::after {
	content: '▾'; /* A simple dropdown arrow */
	margin-left: var(--space-xs);
	color: var(--color-text-light);
	display: inline-block;
}
nav.desktop-navigation .sub-menu {
	position: absolute; /* Take it out of the document flow */
	top: 100%;
	left: 0;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.2s ease-in-out;
}
nav.desktop-navigation .sub-menu .sub-menu { /* For third-level menus */
	top: 0;
	left: 100%;
}

/* Hide the JS-injected toggle button on desktop */
nav.desktop-navigation .submenu-toggle {
	display: none;
}

/* The hover interaction */
nav.desktop-navigation .menu-item-has-children:hover > .sub-menu {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.list-item-card .post-thumbnail img{aspect-ratio: 16 / 9;}
}
/*--------------------------------------------------------------
## NEW SECTION - Sub-Menu Dropdowns
--------------------------------------------------------------*/
.menu-item-has-children {
	position: relative; /* This is crucial for positioning the sub-menu */
}
.sub-menu {
	display: none; /* Hidden by default */
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
	border-radius: var(--global-radius);
	border: 1px solid var(--color-border);
	min-width: 220px;
}
.sub-menu a {
	display: block;
	padding: var(--space-sm) var(--space-md);
	color: var(--color-text-light);
	font-size: 0.9rem;
	font-weight: 400;
	text-transform: none;
	white-space: nowrap;
}
.sub-menu a:hover {
	background-color: var(--color-background);
	color: var(--color-text);
}

/* --- Mobile Sub-menu Behavior --- */
.submenu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.8em;
	display: flex; /* Aligns the SVG inside */
	align-items: center;
	color: var(--color-text-light);
}
.submenu-toggle svg { transition: transform 0.2s ease-in-out; }
.submenu-is-open > .submenu-toggle svg { transform: rotate(180deg); }
.submenu-toggle.submenu-is-open + .sub-menu {
    display: block;
}

/* On mobile, the sub-menu appears inline */
.main-navigation .sub-menu, .amp-mobile-menu-container .sub-menu {
	box-shadow: none;
	border: none;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	padding-left: var(--space-md); /* Indent sub-menu items */
	min-width: 100%;
}
.main-navigation .menu-item a, .amp-mobile-menu-container .menu-item a {
	display: inline-block; /* Make link and button sit side-by-side */
}
/* 2nd Mobile bar */
.secondary-navigation {
    background-color: var(--color-navbar);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto; /* This is the key property */
    white-space: nowrap; /* Prevents menu items from wrapping */
	font-family: var(--font-nav);
	font-size: 16px;
}
.secondary-navigation::-webkit-scrollbar {
    display: none; /* Hides the ugly scrollbar on most browsers */
}
.secondary-navigation li a:hover,.secondary.desktop-navigation .current-menu-item > a {
		color: var(--color-text);
	}
.secondary-navigation ul {
    display: flex; /* Make the list items sit side-by-side */
    list-style: none;
    margin: 0;
    padding: 0 var(--space-md);
}
.secondary-navigation li:not(:last-child)::after {
  content: " | ";
  margin: 0 10px; /* optional spacing */
  color: #999;   /* style of the separator */
}
.secondary-navigation li a {
    color: var(--color-text-light);
}
@media screen and (min-width: 992px) {
    .secondary-navigation {
        display: none; /* Hide this bar on desktop */
    }
}
/*--------------------------------------------------------------
## NEW - Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--global-radius);
}
.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.breadcrumbs li {
    display: inline;
}
.breadcrumbs .separator {
    margin: 0 var(--space-xs);
    font-weight: 700;
}
.breadcrumbs a {
    color: var(--color-text-light);
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: var(--color-accent);
}
/*--------------------------------------------------------------
## NEW - Related Posts Section
--------------------------------------------------------------*/
.related-posts {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.related-posts-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: var(--space-lg);
}

/* This is the container for the related posts */
.related-posts-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Override the default card styles for the related posts context */
.related-posts-grid .list-item-card {
    margin-bottom: 0; /* Remove extra margin */
    padding: var(--space-xs); /* Add padding to make it a card */
    border: 1px solid var(--color-border); /* Add a border */
    border-radius: var(--global-radius);
    background-color: var(--color-surface);
}

.related-posts-grid .list-item-card .post-thumbnail img{
	aspect-ratio: 4/3;
}

/* On desktop, create a 2-column grid of these list items for a compact look */
@media screen and (min-width: 768px) {
    .related-posts-grid.list-style {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
}
/*--------------------------------------------------------------
## NEW - Homepage Builder Styles
--------------------------------------------------------------*/
.homepage-widget {
    margin-bottom: var(--space-xl);
}

.homepage-widget-title {
    font-size: 2rem;
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--space-sm);
}

.category-posts-grid.layout-list .list-item-card {
    border: none; /* Make lists cleaner on homepage */
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* --- Desktop Layouts for Homepage Widget --- */
@media screen and (min-width: 768px) {
    .category-posts-grid.layout-grid-2-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}
/* In style.css, inside the Homepage Builder Styles section */

.view-all-link-container {
    margin-top: var(--space-lg);
    text-align: center;
}

/* --- New Desktop Layouts for Homepage Widget --- */
@media screen and (min-width: 768px) {
    .category-posts-grid.layout-grid-2-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    .category-posts-grid.layout-grid-3-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    /* The "1 Large + List" layout */
    .category-posts-grid.layout-large-plus-list {
        display: grid;
        grid-template-columns: 2fr 1fr; /* 2/3 for the large post, 1/3 for the list */
        gap: var(--space-lg);
    }
    .layout-large-plus-list .list-items-wrapper .list-item-card {
        border: none;
        box-shadow: none;
        padding: 0 0 var(--space-md) 0;
        margin-bottom: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }
     .layout-large-plus-list .list-items-wrapper .list-item-card:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}
.ddpress-loop-ad-wrapper {
    margin: var(--space-lg) 0;
}
/* Make the ad span all columns in a grid layout */
@media screen and (min-width: 768px) {
    .category-posts-grid.layout-grid-2-col .ddpress-loop-ad-wrapper,
    .category-posts-grid.layout-grid-3-col .ddpress-loop-ad-wrapper {
        grid-column: 1 / -1;
    }
}

/* --- Category Bottom Description --- */
.category-bottom-description {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--global-radius);
    font-size: 0.95rem;
    line-height: 1.8;
}

.category-bottom-description h2,
.category-bottom-description h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}
/*--------------------------------------------------------------
## NEW - Quick Links Bar
--------------------------------------------------------------*/
.quick-links-navigation {
    background-color: var(--color-surface);
    padding: var(--space-sm) 0;
    overflow-x: auto; /* The key for horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Hide the ugly scrollbar */
.quick-links-navigation::-webkit-scrollbar {
    display: none;
}
.quick-links-navigation {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.quick-links-container {
    max-width: 1400px; /* Match your desktop layout width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-md);
}

.quick-links-menu {
    display: flex; 
	flex-wrap: wrap;
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap; /* Prevent items from wrapping to a new line */
}

.quick-links-menu a {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
    background-color: #E2F5FC;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--global-radius);
    transition: all 0.2s ease-in-out;
}

.quick-links-menu a:hover,
.quick-links-menu .current-menu-item > a {
    background-color: #8addfc;
    border-color: var(--color-accent);
    color: #333;
}