/*
	Native Ads Styling for JamWatHQ
	Designed to blend seamlessly with HTML5UP Escape Velocity theme
	Brand colors: #ffee00 (yellow), #28a745 (green), #000 (black)
*/

/* ========================================
   Base Native Ad Container
   ======================================== */

.native-ad {
	display: block !important; /* CRITICAL: Ensure ads never display inline (Oct 17, 2025) */
	width: 100% !important; /* Force full width (Oct 17, 2025) */
	box-sizing: border-box; /* Include padding/border in width (Oct 17, 2025) */
	clear: both; /* Always start on new line (Oct 17, 2025) */
	background: #000000;
	border: 2px solid #ffee00;
	border-radius: 8px;
	padding: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	margin: 0.7em 0; /* REDUCED BY 30%: 1em → 0.7em (2025-10-16) */
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(255, 238, 0, 0.1);
}

.native-ad:hover {
	border-color: #28a745;
	box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
	transform: translateY(-2px);
}

/* Sponsored label */
.native-ad::before {
	content: "Sponsored";
	position: absolute;
	top: 8px;
	right: 12px;
	font-size: 0.7em;
	color: #ffee00;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	opacity: 0.8;
}

/* ========================================
   Native Ad Card Format (Standard)
   ======================================== */

.native-ad-card {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.native-ad-card .ad-image {
	width: 100%;
	height: 140px; /* REDUCED: 30% size reduction (200px → 140px) */
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ffee00;
}

.native-ad-card .ad-content {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.native-ad-card .ad-title {
	color: #ffee00;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0;
	line-height: 1.3;
}

.native-ad-card .ad-title a {
	color: #ffee00;
	text-decoration: none;
	transition: color 0.3s ease;
}

.native-ad-card .ad-title a:hover {
	color: #28a745;
}

.native-ad-card .ad-description {
	color: #ffffff;
	font-size: 1em;
	line-height: 1.6;
	margin: 0;
}

/* REMOVED: CTA button - entire container is now clickable (2025-10-16) */
.native-ad-card .ad-cta {
	display: none; /* Hide CTA button */
}

/* ========================================
   Inline Native Ad (In-Content)
   ======================================== */

.native-ad-inline {
	display: flex;
	gap: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	align-items: flex-start;
	padding: 0.7em; /* REDUCED BY 30%: 1em → 0.7em (2025-10-16) */
	background: #28a745;
	border: 2px solid #ffee00;
	border-radius: 8px;
	margin: 0.7em 0; /* REDUCED BY 30%: 1em → 0.7em (2025-10-16) */
	width: 100% !important; /* Force full width even with flex (Oct 17, 2025) */
	box-sizing: border-box !important; /* Include padding/border (Oct 17, 2025) */
}

.native-ad-inline::before {
	content: "Sponsored";
	background: #000000;
	color: #ffee00;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.65em;
}

.native-ad-inline .ad-image {
	flex-shrink: 0;
	width: 105px; /* REDUCED: 30% size reduction (150px → 105px) */
	height: 105px; /* REDUCED: 30% size reduction (150px → 105px) */
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #ffee00;
}

.native-ad-inline .ad-content {
	flex: 1;
}

.native-ad-inline .ad-title {
	color: #ffee00;
	font-size: 1.3em;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

.native-ad-inline .ad-title a {
	color: #ffee00;
	text-decoration: none;
}

.native-ad-inline .ad-title a:hover {
	color: #ffffff;
}

.native-ad-inline .ad-description {
	color: #000000;
	font-size: 0.95em;
	line-height: 1.5;
	margin: 0; /* UPDATED: Removed bottom margin since CTA button removed (2025-10-16) */
}

/* REMOVED: CTA button - entire container is now clickable (2025-10-16) */
.native-ad-inline .ad-cta {
	display: none; /* Hide CTA button */
}

/* ========================================
   Sidebar Native Ad (Compact)
   ======================================== */

.native-ad-sidebar {
	background: #000000;
	border: 2px solid #ffee00;
	border-radius: 8px;
	padding: 0.84em; /* REDUCED BY 30%: 1.2em → 0.84em (2025-10-16) */
	margin-bottom: 1.4em; /* REDUCED BY 30%: 2em → 1.4em (2025-10-16) */
	position: relative;
}

.native-ad-sidebar::before {
	content: "Ad";
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 0.65em;
	color: #ffee00;
	background: #28a745;
	padding: 3px 8px;
	border-radius: 3px;
}

.native-ad-sidebar .ad-image {
	width: 100%;
	height: 105px; /* REDUCED: 30% size reduction (150px → 105px) */
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 1em;
	border: 1px solid #ffee00;
}

.native-ad-sidebar .ad-title {
	color: #ffee00;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 0 0.5em 0;
	line-height: 1.3;
}

.native-ad-sidebar .ad-title a {
	color: #ffee00;
	text-decoration: none;
}

.native-ad-sidebar .ad-title a:hover {
	color: #28a745;
}

.native-ad-sidebar .ad-description {
	color: #ffffff;
	font-size: 0.9em;
	line-height: 1.5;
	margin: 0; /* UPDATED: Removed bottom margin since CTA button removed (2025-10-16) */
}

/* REMOVED: CTA button - entire container is now clickable (2025-10-16) */
.native-ad-sidebar .ad-cta {
	display: none; /* Hide CTA button */
}

/* ========================================
   Banner Native Ad (Full Width)
   ======================================== */

.native-ad-banner {
	background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
	border: 3px solid #ffee00;
	border-radius: 10px;
	padding: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	margin: 0.7em 0; /* REDUCED BY 30%: 1em → 0.7em (2025-10-16) */
	display: flex;
	align-items: center;
	gap: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	position: relative;
	width: 100% !important; /* Force full width even with flex (Oct 17, 2025) */
	box-sizing: border-box !important; /* Include padding/border (Oct 17, 2025) */
}

/* ADJUSTMENT (Oct 2025): Lift the first banner ad by ~20% while letting the wrapper control spacing */
#main + .wrapper .native-ad-banner {
	margin-top: calc(var(--first-ad-shift) * -1); /* Moves the ad upward by the requested amount */
	margin-bottom: 0; /* Prevent margin collapse that exposed a white band */
}

.native-ad-banner::before {
	content: "Sponsored Content";
	position: absolute;
	top: 12px;
	right: 16px;
	background: #ffee00;
	color: #000000;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 0.7em;
	font-weight: bold;
}

.native-ad-banner .ad-image {
	flex-shrink: 0;
	width: 175px; /* REDUCED: 30% size reduction (250px → 175px) */
	height: 126px; /* REDUCED: 30% size reduction (180px → 126px) */
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #ffee00;
}

.native-ad-banner .ad-content {
	flex: 1;
}

.native-ad-banner .ad-title {
	color: #ffee00;
	font-size: 1.8em;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

.native-ad-banner .ad-title a {
	color: #ffee00;
	text-decoration: none;
}

.native-ad-banner .ad-title a:hover {
	color: #28a745;
}

.native-ad-banner .ad-description {
	color: #ffffff;
	font-size: 1.05em;
	line-height: 1.6;
	margin: 0; /* UPDATED: Removed bottom margin since CTA button removed (2025-10-16) */
}

/* REMOVED: CTA button - entire container is now clickable (2025-10-16) */
.native-ad-banner .ad-cta {
	display: none; /* Hide CTA button */
}

/* SIZE TUNING (Oct 2025): expand only the first homepage banner ~40% while keeping width and layout logic intact */
#main + .wrapper .native-ad {
	border: none; /* Remove yellow frame from the first ad only */
}

#main + .wrapper .native-ad-banner {
	--first-ad-image-height: 176px; /* REDUCED: 30% size reduction (252px → 176px) - maintains 40% enlargement ratio */
	border: none; /* Remove yellow frame defined on .native-ad-banner */
}

#main + .wrapper .native-ad-banner .ad-image {
	height: var(--first-ad-image-height);
	border: none; /* Match borderless frame requirement */
}

/* ========================================
   List/Feed Native Ad
   ======================================== */

.native-ad-feed {
	background: #28a745;
	border-left: 4px solid #ffee00;
	border-radius: 6px;
	padding: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	margin: 1.05em 0; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	display: flex;
	gap: 1.05em; /* REDUCED BY 30%: 1.5em → 1.05em (2025-10-16) */
	width: 100% !important; /* Force full width even with flex (Oct 17, 2025) */
	box-sizing: border-box !important; /* Include padding/border (Oct 17, 2025) */
}

.native-ad-feed::before {
	content: "Ad";
	position: absolute;
	top: 10px;
	right: 10px;
	background: #000000;
	color: #ffee00;
	padding: 3px 10px;
	border-radius: 3px;
	font-size: 0.7em;
	font-weight: bold;
}

.native-ad-feed .ad-image {
	width: 84px; /* REDUCED: 30% size reduction (120px → 84px) */
	height: 84px; /* REDUCED: 30% size reduction (120px → 84px) */
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #ffee00;
	flex-shrink: 0;
}

.native-ad-feed .ad-content {
	flex: 1;
}

.native-ad-feed .ad-title {
	color: #ffee00;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

.native-ad-feed .ad-title a {
	color: #ffee00;
	text-decoration: none;
}

.native-ad-feed .ad-title a:hover {
	color: #000000;
}

.native-ad-feed .ad-description {
	color: #000000;
	font-size: 0.95em;
	line-height: 1.5;
	margin: 0;
}

/* ========================================
   Responsive Design
   ======================================== */

/* OPTIMIZED: Responsive design maintains tighter ad spacing */
@media screen and (max-width: 980px) {
	.native-ad-inline,
	.native-ad-banner {
		flex-direction: column;
	}

	.native-ad-inline .ad-image,
	.native-ad-banner .ad-image {
		width: 100%;
		height: 200px;
	}

	/* Maintain ~40% enlargement when the first banner stacks vertically */
	#main + .wrapper .native-ad-banner {
		--first-ad-image-height: 280px; /* 200px responsive height * 1.4 */
	}

	/* REDUCED BY 30%: Tablet/mobile banner ads (2025-10-16) */
	.native-ad-banner {
		padding: 0.875em; /* REDUCED BY 30%: 1.25em → 0.875em */
		gap: 0.7em; /* REDUCED BY 30%: 1em → 0.7em */
	}

	/* REDUCED BY 30%: Inline ads on tablet/mobile (2025-10-16) */
	.native-ad-inline {
		padding: 0.6125em; /* REDUCED BY 30%: 0.875em → 0.6125em */
	}

	.native-ad-feed {
		flex-direction: column;
	}

	.native-ad-feed .ad-image {
		width: 100%;
		height: 180px;
	}
}

/* OPTIMIZED: Mobile-specific ad spacing (smaller screens) */
@media screen and (max-width: 736px) {
	/* REDUCED BY 30%: Tighter spacing for all native ads on mobile (2025-10-16) */
	.native-ad {
		padding: 0.7em; /* REDUCED BY 30%: 1em → 0.7em */
		margin: 0.525em 0; /* REDUCED BY 30%: 0.75em → 0.525em */
	}

	.native-ad-card .ad-image {
		height: 160px;
	}

	.native-ad-card .ad-title {
		font-size: 1.2em;
	}

	/* REDUCED BY 30%: Inline ads on small mobile (2025-10-16) */
	.native-ad-inline {
		padding: 0.6125em; /* REDUCED BY 30%: 0.875em → 0.6125em */
		gap: 0.6125em; /* REDUCED BY 30%: 0.875em → 0.6125em */
	}

	/* REDUCED BY 30%: Banner ads on mobile (2025-10-16) */
	.native-ad-banner {
		padding: 0.7em; /* REDUCED BY 30%: 1em → 0.7em */
	}

	/* Keep first banner scaled up on the smallest screens */
	#main + .wrapper .native-ad-banner {
		--first-ad-image-height: 280px; /* Maintain 40% height boost even on narrow layouts */
	}

	.native-ad-banner .ad-title {
		font-size: 1.4em;
	}

	.native-ad-banner .ad-description {
		font-size: 0.95em;
	}

	.native-ad::before {
		font-size: 0.65em;
		top: 6px;
		right: 8px;
	}
}

/* ========================================
   SPACING FIX: First Ad to J-1 Overview Section
   ======================================== */

/* FIX: Remove excess white space between first ad wrapper and J-1 Overview section */
/* Targets the wrapper section containing the first banner ad */
/* Using !important to override inline style padding */
#main + .wrapper {
	--first-ad-shift: 3rem; /* Shared spacing token so child elements stay in sync */
	--first-ad-spacing: clamp(1.25rem, calc(var(--first-ad-shift) * 0.75), 2.5rem); /* Controlled gap below the ad */
	margin-bottom: 0 !important; /* Prevent collapsed margins between wrappers */
	padding-bottom: var(--first-ad-spacing) !important; /* Padding keeps the wrapper background visible in the gap */
	background: linear-gradient(180deg, #000000 0%, #000000 60%, #009b3a 100%); /* Blend ad background into the green overview */
}

/* FIX (Oct 2025): Allow #highlights to inherit spacing from the ad margin so margins do not stack unexpectedly */
/* The ad now dictates the gap, so we reset extra top margin here while keeping interior padding for readability */
#highlights {
	margin-top: 0 !important;
	padding-top: 1.75em !important; /* Internal padding keeps the heading offset consistent */
}

/* Responsive adjustment: Maintain proportional spacing on tablet devices */
@media screen and (max-width: 980px) {
	#main + .wrapper {
		--first-ad-spacing: clamp(1rem, calc(var(--first-ad-shift) * 0.7), 2rem); /* Slightly tighter buffer on tablets */
	}

	#highlights {
		padding-top: 1.5em !important;
	}
}

/* Responsive adjustment: Optimize spacing for mobile devices */
@media screen and (max-width: 736px) {
	#main + .wrapper {
		--first-ad-shift: 2rem; /* Shorter banner height once the layout stacks vertically */
		--first-ad-spacing: clamp(0.9rem, calc(var(--first-ad-shift) * 0.8), 1.5rem); /* Maintain proportional spacing on mobile */
	}

	#highlights {
		padding-top: 1.35em !important;
	}
}

/* ========================================
   AdSense Native Ad Containers
   ======================================== */

.adsense-native {
	min-height: 250px;
	background: #000000;
	border: 2px solid #ffee00;
	border-radius: 8px;
	padding: 0.7em; /* REDUCED BY 30%: 1em → 0.7em (2025-10-16) */
	margin: 1.4em 0; /* REDUCED BY 30%: 2em → 1.4em (2025-10-16) */
	display: flex;
	align-items: center;
	justify-content: center;
}

.adsense-native ins {
	display: block;
	width: 100%;
	height: 100%;
}

/* Loading state */
.adsense-native.loading::after {
	content: "Loading ad...";
	color: #ffee00;
	font-size: 0.9em;
	opacity: 0.6;
}