/*
Theme Name: Podcast MNOT Custom
Template: podcast
Description: Een child theme voor het Podcast theme om custom functionaliteit te behouden na updates.
Author: Jouw Naam
Version: 1.0.0
*/

/* Importeer de parent theme stylesheet */
@import url("../podcast/style.css");

/* MNOT Huisstijl Kleuren */
:root {
	/* Logo kleuren */
	--mnot-teal: #076a8a;
	--mnot-light-teal: #9cc3d0;
	--mnot-dark-teal: #154455;
	--mnot-red: #c83027;
	--mnot-orange: #df352b;
	--mnot-black: #000000;
	--mnot-white: #ffffff;
	
	/* Aangepaste podcast kleuren */
	--podcast-special-background-color: #222222;
	--podcast-special2-background-color: #121212;
}

/* Mobile thumbnail responsive gedrag - Hersteld uit backup */
.site-archive-post .mobile-thumbnail-large {
	display: none;
}

/* Mobile thumbnails ook volledige breedte behouden */
.site-archive-post .mobile-thumbnail-large,
.site-archive-post .mobile-thumbnail-small {
	width: 150px !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	max-width: 150px !important;
}

@media screen and (max-width: 460px) {
	.site-archive-post .mobile-thumbnail-small {
		display: none;
	}

	.site-archive-post .mobile-thumbnail-large {
		display: block;
	}
	
	/* Mobile thumbnail container aanpassen */
	.site-archive-posts .entry-thumbnail {
		width: 100%;
		height: auto;
		background: transparent !important;
	}
	
	.site-archive-post .mobile-thumbnail-large {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Image styling voor betere weergave */
#site-main img,
#site-footer img {
	height: 100%;
	max-width: 100%;
}

.entry-thumbnail .thumbnail,
.wp-caption img,
.post-thumbnail .thumbnail {
	height: auto;
	max-width: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* Recente afleveringen thumbnails - volledige breedte behouden */
.site-archive-posts .entry-thumbnail img {
	width: 150px !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	max-width: 150px !important;
}

.site-archive-posts .entry-thumbnail {
	width: 150px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	overflow: visible;
}

/* ========================================
   MNOT HUISSTIJL IMPLEMENTATIE
   ======================================== */

/* Page Header - Achtergrond met MNOT teal */
.page-intro-header {
	background: linear-gradient(135deg, var(--mnot-teal) 0%, var(--mnot-dark-teal) 100%);
	color: var(--mnot-white);
	position: relative;
	overflow: hidden;
	padding: 1rem 0 !important;
}

.page-intro-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
	pointer-events: none;
}

.page-intro-header .page-title,
.page-intro-header .widget-title {
	color: var(--mnot-white);
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Post titels - MNOT oranje */
.entry-title a,
.page-title,
.archives-title {
	color: var(--mnot-orange) !important;
	transition: color 0.3s ease;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--mnot-red) !important;
}

/* Header/Masthead styling */
#site-masthead {
	background: linear-gradient(90deg, var(--mnot-white) 0%, var(--mnot-light-teal) 50%, var(--mnot-white) 100%);
	border-bottom: 3px solid var(--mnot-teal);
	box-shadow: 0 2px 10px rgba(7, 106, 138, 0.1);
}

#site-logo .site-title a {
	color: var(--mnot-dark-teal);
	font-weight: 700;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#site-logo .site-description {
	color: var(--mnot-teal);
	font-style: italic;
}

/* MNOT Custom Logo Styling */
#site-logo .custom-logo {
	max-height: 80px;
	width: auto;
	height: auto;
	transition: all 0.3s ease;
}

#site-logo .custom-logo:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}

#site-logo .custom-logo-link {
	display: inline-block;
	text-decoration: none;
}

#site-logo .custom-logo-link:hover {
	text-decoration: none;
}

/* Navigation styling */
.large-nav a {
	color: var(--mnot-dark-teal);
	font-weight: 600;
	transition: all 0.3s ease;
}

.large-nav a:hover,
.large-nav a:focus {
	color: var(--mnot-orange);
	background: linear-gradient(135deg, var(--mnot-light-teal) 0%, var(--mnot-white) 100%);
	border-radius: 4px;
}

.large-nav .current-menu-item > a {
	color: var(--mnot-orange);
	background: var(--mnot-light-teal);
	border-radius: 4px;
}

/* Featured post styling */
.ilovewp-featured-post {
	background: linear-gradient(135deg, var(--mnot-white) 0%, var(--mnot-light-teal) 100%);
	border: 2px solid var(--mnot-teal);
	border-radius: 8px;
	padding: 2rem;
	margin: 0;
	box-shadow: 0 4px 15px rgba(7, 106, 138, 0.1);
	position: relative;
}

.ilovewp-featured-post img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}

/* Single post uitgelichte afbeelding */
.single-post-featured-image {
	margin-bottom: 2rem;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(7, 106, 138, 0.1);
}

.single-post-featured-image .single-featured-img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}

.ilovewp-featured-post::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--mnot-orange) 0%, var(--mnot-red) 50%, var(--mnot-orange) 100%);
	border-radius: 8px 8px 0 0;
}

.ilovewp-featured-post .entry-tagline {
	background: var(--mnot-dark-teal);
	color: var(--mnot-white);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	margin-bottom: 1rem;
	display: inline-block;
}

/* Buttons en links */
button,
input[type="submit"],
.button,
.wp-block-button__link {
	background: linear-gradient(135deg, var(--mnot-teal) 0%, var(--mnot-dark-teal) 100%);
	color: var(--mnot-white);
	border: none;
	border-radius: 6px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(7, 106, 138, 0.3);
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
	background: linear-gradient(135deg, var(--mnot-orange) 0%, var(--mnot-red) 100%);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(223, 53, 43, 0.4);
}

/* Links styling */
a {
	color: var(--mnot-teal);
	transition: color 0.3s ease;
}

a:hover,
a:focus {
	color: var(--mnot-orange);
}

/* Footer styling */
#site-footer {
	background: linear-gradient(135deg, var(--mnot-dark-teal) 0%, var(--mnot-black) 100%);
	color: var(--mnot-white);
}

#site-footer a {
	color: var(--mnot-light-teal);
}

#site-footer a:hover {
	color: var(--mnot-white);
}

#site-footer-credit {
	background: var(--mnot-black);
	border-top: 2px solid var(--mnot-teal);
	color: var(--mnot-white);
}

#site-footer-credit .site-credit {
	color: var(--mnot-white);
}

#site-footer-credit .theme-credit {
	color: var(--mnot-light-teal);
}

#site-footer-credit a {
	color: var(--mnot-light-teal);
	transition: color 0.3s ease;
}

#site-footer-credit a:hover {
	color: var(--mnot-white);
}

/* Widget styling */
.widget-title {
	color: var(--mnot-dark-teal);
	border-bottom: 2px solid var(--mnot-light-teal);
	padding-bottom: 0.5rem;
	position: relative;
}

.widget-title::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 30px;
	height: 2px;
	background: var(--mnot-orange);
}

/* Sidebar styling */
.site-column-aside {
	background: linear-gradient(135deg, var(--mnot-white) 0%, var(--mnot-light-teal) 100%);
	border: 1px solid var(--mnot-teal);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 2rem;
}

/* Archive posts styling */
.site-archive-post {
	border-left: 4px solid var(--mnot-teal);
	padding-left: 1rem;
	margin-bottom: 2rem;
	transition: all 0.3s ease;
}

.site-archive-post:hover {
	border-left-color: var(--mnot-orange);
	background: linear-gradient(90deg, var(--mnot-light-teal) 0%, transparent 100%);
	padding: 1rem;
	border-radius: 4px;
}

/* Comments styling */
.comment-content {
	background: var(--mnot-white);
	border: 1px solid var(--mnot-light-teal);
	border-radius: 6px;
	padding: 1rem;
	margin: 1rem 0;
}

.comment-author .fn {
	color: var(--mnot-dark-teal);
	font-weight: 600;
}

/* Pagination styling */
.pagination .page-numbers {
	background: var(--mnot-light-teal);
	color: var(--mnot-dark-teal);
	border: 1px solid var(--mnot-teal);
	transition: all 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .current {
	background: var(--mnot-orange);
	color: var(--mnot-white);
	border-color: var(--mnot-red);
}

/* Mobile menu styling */
#site-mobile-menu {
	background: rgba(156, 195, 208, 0.75) !important;
	backdrop-filter: blur(15px);
	border-top: 3px solid var(--mnot-orange);
	box-shadow: 0 4px 20px rgba(7, 106, 138, 0.2);
}

#site-mobile-menu a {
	color: var(--mnot-dark-teal);
	font-weight: 600;
}

#site-mobile-menu a:hover {
	color: var(--mnot-orange);
	background: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
}

/* Special accent elements */
.entry-thumbnail {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.entry-thumbnail::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, transparent 0%, rgba(156, 195, 208, 0.1) 100%);
	pointer-events: none;
}

/* Page Intro Subscribe - MNOT huisstijl */
.page-intro-subscribe {
	background: linear-gradient(135deg, var(--mnot-light-teal) 0%, var(--mnot-teal) 100%);
	color: var(--mnot-white);
	position: relative;
	overflow: hidden;
}

.page-intro-subscribe::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="subscribe-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23subscribe-pattern)"/></svg>');
	pointer-events: none;
}

.page-intro-subscribe .widget-title,
.page-intro-subscribe h2,
.page-intro-subscribe h3 {
	color: var(--mnot-white) !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.page-intro-subscribe .page-title-span:after {
	background-color: var(--mnot-orange) !important;
}

.page-intro-subscribe a {
	color: var(--mnot-white);
	text-decoration: underline;
	transition: color 0.3s ease;
}

.page-intro-subscribe a:hover,
.page-intro-subscribe a:focus {
	color: var(--mnot-orange);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
	.ilovewp-featured-post {
		padding: 1.5rem;
		margin: 0;
	}
	
	.site-column-aside {
		padding: 1rem;
		margin-top: 1rem;
	}
	
	/* Logo responsive */
	#site-logo .custom-logo {
		max-height: 60px;
	}
}

@media screen and (max-width: 460px) {
	/* Logo extra klein op mobiel */
	#site-logo .custom-logo {
		max-height: 50px;
	}
}

/* ========================================
   HOMEPAGE LAYOUT AANPASSINGEN
   ======================================== */

/* Homepage Columns - Terug naar naast elkaar */
#site-home-welcome {
	display: flex !important;
	align-content: stretch !important;
	align-items: flex-start !important;
	gap: 80px !important;
	justify-content: space-between !important;
	padding: 1.5rem 0 3rem 0 !important;
	margin: 0 !important;
}

#site-home-welcome > .site-column-1 {
	flex: 1 !important;
	align-self: flex-start !important;
}

#site-home-welcome > .site-column-2 {
	flex: 0 1 300px !important;
	align-self: flex-start !important;
}

/* Zorg dat beide site-column-wrapper elementen op dezelfde hoogte beginnen */
#site-home-welcome .site-column-wrapper {
	align-self: flex-start !important;
}

/* Site section wrapper spacing */
.page-intro-header .site-section-wrapper {
	padding: 1rem 0 !important;
}

/* Mooie knoppen voor site-column-2 */
.site-column-2 .widget-content-wrapper {
	background: linear-gradient(135deg, var(--mnot-dark-teal) 0%, var(--mnot-black) 100%);
	border: 2px solid var(--mnot-teal);
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 4px 20px rgba(7, 106, 138, 0.2);
	width: 100%;
	max-width: none;
}

.site-column-2 .widget-title {
	color: var(--mnot-white) !important;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
	border-bottom: 2px solid var(--mnot-orange);
	padding-bottom: 0.5rem;
}

.site-column-2 .textwidget {
	width: 100%;
	max-width: none;
}

.site-column-2 .textwidget p {
	color: var(--mnot-white);
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 2rem;
	text-align: center;
	width: 100%;
}

/* Mooie knoppen styling */
.mnot-buttons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
	width: 100%;
}

    .site-column-2 .mnot-button {
    	display: flex;
    	align-items: center;
    	gap: 0.75rem;
    	background: linear-gradient(135deg, var(--mnot-light-teal) 0%, #f0f8fa 100%);
    	color: var(--mnot-black) !important;
    	text-decoration: none !important;
    	padding: 1rem 1.5rem;
    	border-radius: 8px;
    	font-weight: 600;
    	font-size: 1rem;
    	transition: all 0.3s ease;
    	box-shadow: 0 2px 8px rgba(7, 106, 138, 0.1);
    	border: 2px solid var(--mnot-teal);
    	justify-content: center;
    	text-align: center;
    }

    .site-column-2 .mnot-button:hover {
    	transform: translateY(-2px);
    	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    	text-decoration: none !important;
    }

.site-column-2 .mnot-button i {
	font-size: 1.2rem;
	width: 20px;
	text-align: center;
	color: var(--mnot-black) !important;
}

.site-column-2 .mnot-button span {
	color: var(--mnot-black) !important;
}

.site-column-2 .mnot-button:hover i {
	color: var(--mnot-white) !important;
}

.site-column-2 .mnot-button:hover span {
	color: var(--mnot-white) !important;
}

    /* Subtiele platform accenten - Uniforme basis met kleur accenten */
    .site-column-2 .mnot-button.slack { 
    	border-color: #611f69; 
    	color: #611f69 !important;
    }
    .site-column-2 .mnot-button.slack:hover { 
    	background: linear-gradient(135deg, #7a2a7b 0%, #611f69 100%);
    	border-color: #7a2a7b; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.slack i,
    .site-column-2 .mnot-button.slack span { color: #611f69 !important; }
    .site-column-2 .mnot-button.slack:hover i,
    .site-column-2 .mnot-button.slack:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.weerwolven { 
    	border-color: #8b2135; 
    	color: #8b2135 !important;
    }
    .site-column-2 .mnot-button.weerwolven:hover { 
    	background: linear-gradient(135deg, #a02842 0%, #8b2135 100%);
    	border-color: #a02842; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.weerwolven i,
    .site-column-2 .mnot-button.weerwolven span { color: #8b2135 !important; }
    .site-column-2 .mnot-button.weerwolven:hover i,
    .site-column-2 .mnot-button.weerwolven:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.vriend { 
    	border-color: #dc3545; 
    	color: #dc3545 !important;
    }
    .site-column-2 .mnot-button.vriend:hover { 
    	background: linear-gradient(135deg, #e74c3c 0%, #dc3545 100%);
    	border-color: #e74c3c; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.vriend i,
    .site-column-2 .mnot-button.vriend span { color: #dc3545 !important; }
    .site-column-2 .mnot-button.vriend:hover i,
    .site-column-2 .mnot-button.vriend:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.apple { 
    	border-color: #872ec4; 
    	color: #872ec4 !important;
    }
    .site-column-2 .mnot-button.apple:hover { 
    	background: linear-gradient(135deg, #9c27b0 0%, #872ec4 100%);
    	border-color: #9c27b0; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.apple i,
    .site-column-2 .mnot-button.apple span { color: #872ec4 !important; }
    .site-column-2 .mnot-button.apple:hover i,
    .site-column-2 .mnot-button.apple:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.spotify { 
    	border-color: #1db954; 
    	color: #1db954 !important;
    }
    .site-column-2 .mnot-button.spotify:hover { 
    	background: linear-gradient(135deg, #1ed760 0%, #1db954 100%);
    	border-color: #1ed760; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.spotify i,
    .site-column-2 .mnot-button.spotify span { color: #1db954 !important; }
    .site-column-2 .mnot-button.spotify:hover i,
    .site-column-2 .mnot-button.spotify:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.youtube { 
    	border-color: #ff0000; 
    	color: #ff0000 !important;
    }
    .site-column-2 .mnot-button.youtube:hover { 
    	background: linear-gradient(135deg, #ff3333 0%, #ff0000 100%);
    	border-color: #ff3333; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.youtube i,
    .site-column-2 .mnot-button.youtube span { color: #ff0000 !important; }
    .site-column-2 .mnot-button.youtube:hover i,
    .site-column-2 .mnot-button.youtube:hover span { color: var(--mnot-white) !important; }

    .site-column-2 .mnot-button.rss { 
    	border-color: #ee802f; 
    	color: #ee802f !important;
    }
    .site-column-2 .mnot-button.rss:hover { 
    	background: linear-gradient(135deg, #ff7043 0%, #ee802f 100%);
    	border-color: #ff7043; 
    	color: var(--mnot-white) !important;
    }
    .site-column-2 .mnot-button.rss i,
    .site-column-2 .mnot-button.rss span { color: #ee802f !important; }
    .site-column-2 .mnot-button.rss:hover i,
    .site-column-2 .mnot-button.rss:hover span { color: var(--mnot-white) !important; }

/* Responsive knoppen */
@media screen and (max-width: 768px) {
	.mnot-buttons-grid {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	
	.site-column-2 .widget-content-wrapper {
		padding: 1.5rem;
	}
}

@media screen and (max-width: 480px) {
	.site-column-2 .mnot-button {
		padding: 0.875rem 1rem;
		font-size: 0.9rem;
	}
	
	.site-column-2 .mnot-button i {
		font-size: 1rem;
	}
}