/* ==========================================================================
   Jugalkhabar — UI/UX Enhancements (additive, non-destructive)
   Subtle, news-appropriate motion: hover lifts, image zoom, smooth
   transitions and on-scroll reveals. Loaded after jugalkhabar.css.
   ========================================================================== */

/* Global smoothing for interactive elements ------------------------------- */
a,
button,
.btn,
.read_more a,
.sec_title h2 a,
.menu a,
.foot-menu a,
.social-media a,
.tags a {
	transition: color .4s ease, background-color .4s ease,
		border-color .4s ease, transform .4s ease, box-shadow .4s ease, opacity .4s ease;
}

img {
	/* never let a broken/oversized image jump the layout */
	height: auto;
}

/* ----- Card image zoom on hover ------------------------------------------ */
/* Ensure the image wrappers clip, then gently zoom the image on hover.      */
.jugal-main-news,
.jugal-main-lite,
.news-image,
.column-image,
.flex-post-img,
.khabar-card-img,
.main-khabarhub-img,
.main--news-image,
.circ-img {
	overflow: hidden;
}

.news-image img,
.column-image img,
.flex-post-img img,
.khabar-card-img img,
.main-khabarhub-img img,
.main--news-image img {
	transition: transform .5s ease;
	will-change: transform;
}

.jugal-main-news > a img,
.jugal-main-lite > a img {
	/* base already has transition: all .5s in the theme */
	will-change: transform;
}

a:hover > .news-image img,
a:hover > .column-image img,
.flex-post a:hover .flex-post-img img,
.khabar-card:hover .khabar-card-img img,
.main-khabarhub:hover .main-khabarhub-img img,
.main--news:hover .main--news-image img,
.jugal-main-news > a:hover img,
.jugal-main-lite > a:hover img {
	transform: scale(1.06);
}

/* ----- Card lift on hover ------------------------------------------------- */
.khabar-card,
.main-khabarhub,
.flex-post,
.single-taja,
.sidebar-popular {
	transition: transform .3s ease, box-shadow .3s ease;
}

.khabar-card:hover,
.main-khabarhub:hover,
.flex-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

/* List rows (politics list, taja, popular, column) get a soft cue */
.jugal-image-news-list li,
.circ-posts li,
.column-container li,
.taja-list li,
.sidebar-popular li {
	transition: transform .4s ease;
}
.jugal-image-news-list li:hover,
.circ-posts li:hover,
.column-container li:hover,
.taja-list li:hover,
.sidebar-popular li:hover {
	transform: translateX(4px);
}

/* ----- Section title underline animation --------------------------------- */
.sec_title h2 a {
	position: relative;
	display: inline-block;
}
.sec_title h2 a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 3px;
	width: 0;
	background: var(--primary-bg-color);
	transition: width .35s ease;
}
.sec_title:hover h2 a::after {
	width: 100%;
}

/* "Read more" arrow nudge */
.read_more a i {
	transition: transform .4s ease;
}
.read_more:hover a i {
	transform: translateX(4px);
}

/* Menu underline, header action icons and footer social hovers are now owned
   by jugalkhabar.css (merged design layer) to avoid duplicate/conflicting rules. */

/* ----- Back-to-top button -------------------------------------------------
   Gated on .jugal-js so that without our script the theme's existing
   display-toggle logic still controls visibility (no broken button). */
.jugal-js #btn-back-to-top {
	display: block !important;        /* let opacity/visibility drive it instead */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease, background-color .4s ease;
}
.jugal-js #btn-back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#btn-back-to-top:hover {
	transform: translateY(-3px) scale(1.05);
}

/* ----- Ad units: gentle fade-in ------------------------------------------ */
.bx-ad-unit,
.full-ad,
.sidebar-ad {
	animation: jugalAdFade .6s ease both;
}
.full-ad a img,
.sidebar-ad a img,
.bx-ad-unit a img {
	transition: opacity .4s ease, transform .4s ease;
}
.full-ad a:hover img,
.sidebar-ad a:hover img,
.bx-ad-unit a:hover img {
	opacity: .92;
}
@keyframes jugalAdFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Boxed "Advertisement" wrapper used on some ad placements */
.advertisement {
	position: relative;
	padding: 14px;
	border: 1px solid var(--light-border);
	border-radius: 8px;
	background: #fafafa;
}
.advertisement::before {
	content: "Advertisement";
	display: block;
	text-align: center;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9aa0a6;
	margin-bottom: 8px;
}

/* ----- On-scroll reveal (only active when JS adds .jugal-js) -------------- */
.jugal-js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
.jugal-js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Flash / breaking subtle pulse */
.flash-break .breaking span,
.breaking span {
	transition: transform .4s ease;
}
.flash-news:hover .breaking span {
	transform: scale(1.05);
}

/* ----- Curated Flash News extras (subtitle / excerpt / read more) -------- */
.flash-news .flash-subtitle p {
	margin: .35rem 0 0;
	font-size: 1.05rem;
	font-weight: 500;
	color: #5b6168;
	line-height: 1.5;
}
.flash-news .flash-excerpt{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flash-news .flash-excerpt p {
	margin: .5rem 0 0;
	font-size: 1.1rem;
	color: #6a7077;
	line-height: 1.6;
}
.flash-news .flash-readmore {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: .6rem;
	font-weight: 600;
	color: var(--primary-bg-color);
	transition: gap .2s ease;
}
.flash-news:hover .flash-readmore {
	gap: 10px;
}
.flash-news .flash-readmore i {
	transition: transform .2s ease;
}
.flash-news:hover .flash-readmore i {
	transform: translateX(3px);
}

/* Search modal & sidenav links polish */
.sidemenu ul li a {
	transition: padding-left .4s ease, color .4s ease, background-color .4s ease;
}
.sidemenu ul li a:hover {
	padding-left: 1.4rem;
}

/* ----- Accessibility: respect reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.jugal-js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}