/*
Theme Name:   Vice Dhrk
Theme URI:    http://qantumthemes.com/
Description:  Vice Dhrk Child Theme
Author:       QantumThemes
Author URI:   http://qantumthemes.com
Template:     vice
Version:      1.5.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  vice-dhrk
*/

/* ==========================================================================
   WWWN 1.5.2 — sidebar list widgets: title above thumb, meta below
   (do not break Recent Releases)
   ========================================================================== */
aside.widget ul li a.qw-blocklink {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	clear: both;
}
aside.widget ul li a.qw-blocklink img.qw-widget-thumbnail,
aside.widget ul li a.qw-blocklink img.wp-post-image {
	float: none !important;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 !important;
	order: 2;
	display: block;
}
aside.widget ul li a.qw-blocklink .qw-widg-singleline {
	float: none !important;
	max-width: 100% !important;
	width: 100% !important;
	order: 1;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.25;
}
aside.widget ul li a.qw-blocklink .qw-widg-tags {
	float: none !important;
	width: 100% !important;
	order: 3;
	padding-top: 0;
}
aside.widget ul li a.qw-blocklink > br,
aside.widget ul li a.qw-blocklink .canc {
	display: none !important;
}
aside.widget ul li {
	overflow: hidden;
	padding-bottom: 14px;
	margin-bottom: 6px;
}
@media (max-width: 767px) {
	aside.widget ul li a.qw-blocklink img.qw-widget-thumbnail,
	aside.widget ul li a.qw-blocklink img.wp-post-image {
		max-width: 100%;
	}
}

/* ==========================================================================
   WWWN 1.5.3 — homepage layout fixes
   ========================================================================== */

/* --- 1) Horizontal overflow ----------------------------------------------
   Culprits: owl-nav at 102%/-1%, Elementor stretched sections, visible
   owl stages. Prefer fixing those; keep a light html/body safety net. */
html {
	overflow-x: hidden;
	max-width: 100%;
}
body#theBody {
	overflow-x: hidden !important;
	max-width: 100%;
}
.vice-theme-container,
#maincontent,
.elementor-page,
.elementor-section-wrap,
.elementor {
	max-width: 100%;
	overflow-x: clip;
}
/* Owl nav was width:102%; left:-1% — spills past viewport on desktop */
.vice-elementor-owl-theme .owl-nav {
	width: 100% !important;
	left: 0 !important;
	right: 0 !important;
	box-sizing: border-box;
}
/* Stretched Elementor sections often push past 100vw */
.elementor-section.elementor-section-stretched {
	/* keep Elementor left/width calc; just don't let spill create page scroll */
	max-width: 100vw;
	box-sizing: border-box;
}
.elementor-shape,
.elementor-shape svg {
	max-width: 100%;
	overflow: hidden;
}

/* --- 2) Mobile Music carousel (modernslider) -----------------------------
   Peeking prev/next + overflow:visible clips cards and excerpt text. */
@media (max-width: 767px) {
	.vice-modernslider {
		max-width: 100%;
		overflow: hidden;
	}
	.vice-modernslider .vice-elementor-owl-carousel {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto;
	}
	.vice-modernslider .owl-carousel .owl-stage-outer {
		overflow: hidden !important;
	}
	.vice-modernslider .owl-item {
		padding: 0 12px;
		box-sizing: border-box;
	}
	.vice-modernslider-item {
		width: 100% !important;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 8px;
		box-sizing: border-box;
	}
	.vice-modernslider-item__content {
		padding-right: 0 !important;
		max-width: 100%;
	}
	.vice-modernslider-item__caption,
	.vice-modernslider-item__excerpt,
	.vice-modernslider-item__excerpt p {
		max-width: 100%;
		overflow-wrap: anywhere;
		word-wrap: break-word;
		hyphens: auto;
	}
	.vice-modernslider-item__thumbnail {
		max-width: 100%;
	}
	/* Soften 3D so cards don't spill sideways on narrow screens */
	.vice-modernslider .vice-3d-element,
	.vice-modernslider .vice-elementor-3dfx {
		transform: none !important;
		perspective: none !important;
	}
}

/* --- 3) Mobile Podcast carousel ------------------------------------------
   Side-by-side peek / cut-off image+title — force single clean item. */
@media (max-width: 767px) {
	.elementor-widget-vice-elementor-post-carousel .vice-elementor-owl-carousel-container {
		margin-left: 0;
		margin-right: 0;
		overflow: hidden;
	}
	.elementor-widget-vice-elementor-post-carousel .owl-carousel .owl-stage-outer {
		overflow: hidden !important;
		padding: 0 8px;
	}
	.elementor-widget-vice-elementor-post-carousel .owl-item {
		padding: 8px;
		box-sizing: border-box;
	}
	.elementor-widget-vice-elementor-post-carousel .vice-post--podcast {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.elementor-widget-vice-elementor-post-carousel .vice-post--podcast .vice-post__thumbnail {
		padding: 12px;
	}
	.elementor-widget-vice-elementor-post-carousel .vice-post--podcast .vice-post__content {
		padding: 8px 12px 16px;
	}
	.elementor-widget-vice-elementor-post-carousel .vice-post__caption,
	.elementor-widget-vice-elementor-post-carousel .qw-artists-names {
		max-width: 100%;
		overflow-wrap: anywhere;
	}
}

/* --- 4) Desktop Podcast metadata contrast --------------------------------
   Low-contrast grey text over cover-number watermarks — lift readability
   without killing the DHRK dark look. */
.vice-post--podcast .vice-post__content {
	position: relative;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.88) 0%,
		rgba(0, 0, 0, 0.55) 55%,
		rgba(0, 0, 0, 0.25) 100%
	) !important;
	padding: 18px 16px 20px !important;
	border-radius: 0 0 3px 3px;
}
.vice-post--podcast .qw-artists-names,
.vice-post--podcast .qw-artists-names a {
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.95),
		0 0 10px rgba(0, 0, 0, 0.7);
	opacity: 1 !important;
}
.vice-post--podcast .vice-post__caption,
.vice-post--podcast .vice-post__caption a {
	color: #ffffff !important;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.95),
		0 0 14px rgba(0, 0, 0, 0.75);
	opacity: 1 !important;
}
.vice-post--podcast .vice-post__caption a:hover {
	color: #ff4d7a !important;
}

/* --- 5) Contacts — giant decorative icons --------------------------------
   Elementor SVG icons can render near viewBox size (512px) when em-sizing
   is missing. Cap size/opacity; hide decorative bulk on mobile. */
.elementor-element-fb24ffb .elementor-widget-icon-box .elementor-icon,
.elementor-element-265ccdd .elementor-icon,
.elementor-element-b4fc0b2 .elementor-icon,
.elementor-element-2e67db4 .elementor-icon {
	font-size: 42px !important;
	width: 42px !important;
	height: 42px !important;
	line-height: 42px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	z-index: 0;
	opacity: 0.85;
}
.elementor-element-fb24ffb .elementor-widget-icon-box .elementor-icon svg,
.elementor-element-265ccdd .elementor-icon svg,
.elementor-element-b4fc0b2 .elementor-icon svg,
.elementor-element-2e67db4 .elementor-icon svg,
.elementor-element-fb24ffb .elementor-widget-icon-box .e-font-icon-svg,
.elementor-element-265ccdd .e-font-icon-svg,
.elementor-element-b4fc0b2 .e-font-icon-svg,
.elementor-element-2e67db4 .e-font-icon-svg {
	width: 1em !important;
	height: 1em !important;
	max-width: 42px !important;
	max-height: 42px !important;
	display: block;
}
.elementor-element-fb24ffb .elementor-icon-box-wrapper {
	position: relative;
	z-index: 2;
	align-items: center !important;
}
.elementor-element-fb24ffb .elementor-icon-box-content {
	position: relative;
	z-index: 2;
}
.elementor-element-fb24ffb .elementor-icon-box-description {
	line-height: 1.35em !important;
}
@media (max-width: 767px) {
	.elementor-element-fb24ffb .elementor-widget-icon-box .elementor-icon-box-icon {
		opacity: 0.35;
	}
	.elementor-element-fb24ffb .elementor-widget-icon-box .elementor-icon {
		font-size: 28px !important;
		width: 28px !important;
		height: 28px !important;
		line-height: 28px !important;
	}
	.elementor-element-fb24ffb .elementor-widget-icon-box .elementor-icon svg,
	.elementor-element-fb24ffb .elementor-widget-icon-box .e-font-icon-svg {
		max-width: 28px !important;
		max-height: 28px !important;
	}
}

/* Global safety: Elementor icon-box SVGs must respect font-size em */
.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon-box .e-font-icon-svg {
	width: 1em !important;
	height: 1em !important;
	max-width: 64px;
	max-height: 64px;
}

/* ==========================================================================
   WWWN 1.5.4 — Design & Copy follow-up (after 1.5.3 verify)
   - Contacts: icon-box description/title were white-on-white on light section
   - Podcast section: dark bg fallback if Elementor gradient fails to paint
   Bump Theme Version header to 1.5.4 when merging into style.css
   ========================================================================== */

/* Contacts — readable values next to EMAIL / MOBILE / WHATSAPP */
.elementor-element-265ccdd .elementor-icon-box-title,
.elementor-element-b4fc0b2 .elementor-icon-box-title,
.elementor-element-2e67db4 .elementor-icon-box-title,
.elementor-element-fb24ffb .elementor-icon-box-title,
.elementor-element-265ccdd .elementor-icon-box-title span,
.elementor-element-b4fc0b2 .elementor-icon-box-title span,
.elementor-element-2e67db4 .elementor-icon-box-title span {
	color: #d5003c !important;
}

.elementor-element-265ccdd .elementor-icon-box-description,
.elementor-element-b4fc0b2 .elementor-icon-box-description,
.elementor-element-2e67db4 .elementor-icon-box-description,
.elementor-element-fb24ffb .elementor-icon-box-description {
	color: #1a1a1a !important;
	opacity: 1 !important;
	text-shadow: none !important;
}

/* If Contacts block sits on a dark parent, keep values light */
.qw_palette_dark .elementor-element-4886c87 .elementor-icon-box-description {
	color: #f2f2f2 !important;
}

/* Podcast top section — ensure dark stage under white captions */
.elementor-element-e5d906c {
	background-color: #0a0a0a !important;
}
.elementor-element-e5d906c > .elementor-container {
	position: relative;
	z-index: 1;
}