/*
Theme Name: Dubai Goognetic News Theme
Theme URI:
Author:
Author URI:
Description: Empty theme for Dubai News development.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dubai-goognetic-news-theme
*/

/* Content-visibility for below-fold sections */
.dgn-cv-auto {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

/* Accessible tap targets for indicators */
.dgn-indicator-btn {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border-radius: 999px;
}

.dgn-indicator-bar {
	height: 4px;
	border-radius: 999px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Utilities */
.line-clamp-2,
.line-clamp-3,
.line-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.line-clamp-2 {
	-webkit-line-clamp: 2;
}

.line-clamp-3 {
	-webkit-line-clamp: 3;
}

.line-clamp-4 {
	-webkit-line-clamp: 4;
}

.scrollbar-hide {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

.hero-bg {
	transition: opacity 0.6s ease;
}

.story-item.is-seen .story-ring {
	background: #d1d5db;
}

@keyframes dgn-handpicked-glow {
	0%,
	100% {
		box-shadow: 0 20px 45px rgba(59, 130, 246, 0.15);
	}
	50% {
		box-shadow: 0 28px 60px rgba(59, 130, 246, 0.25);
	}
}

@keyframes dgn-handpicked-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

.dgn-handpicked-featured {
	animation: dgn-handpicked-glow 6s ease-in-out infinite;
}

.dgn-handpicked-float {
	animation: dgn-handpicked-float 8s ease-in-out infinite;
}

.dgn-handpicked-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dgn-handpicked-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.15);
}

@keyframes dgn-latest-fade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dgn-latest-updates {
	position: relative;
	contain: layout style;
}

.dgn-latest-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.35;
	/* Fade blob orbs at top and bottom into adjacent sections */
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 12%,
		black 88%,
		transparent 100%
	);
	mask-size: 100% 100%;
	mask-position: 0 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 12%,
		black 88%,
		transparent 100%
	);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: 0 0;
}

.dgn-latest-blob {
	position: absolute;
	width: 24rem;
	height: 24rem;
	border-radius: 999px;
	filter: blur(80px);
	animation: dgn-latest-blob 20s linear infinite;
	will-change: transform;
	contain: strict;
}

.dgn-latest-blob-one {
	top: -10rem;
	right: -10rem;
	background: linear-gradient(135deg, #bfdbfe, #c4b5fd);
}

.dgn-latest-blob-two {
	bottom: -12rem;
	left: -10rem;
	background: linear-gradient(135deg, #fbcfe8, #fed7aa);
	animation-duration: 24s;
	animation-direction: reverse;
}

@keyframes dgn-latest-blob {
	0% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(1.2) rotate(180deg);
	}
	100% {
		transform: scale(1) rotate(360deg);
	}
}

.dgn-latest-anim {
	animation: dgn-latest-fade 0.8s ease both;
	animation-delay: var(--delay, 0s);
}

.dgn-latest-card {
	animation: dgn-latest-fade 0.8s ease both;
	animation-delay: var(--delay, 0s);
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	overflow: hidden;
	height: 100%;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.dgn-latest-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.dgn-latest-card:hover .dgn-latest-image {
	transform: scale(1.07);
}

.dgn-latest-card:hover .dgn-latest-title {
	color: #2563eb;
}

.dgn-latest-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: #64748b;
	margin-top: 0.75rem;
}

.dgn-latest-media {
	position: relative;
	height: 190px;
	background: #f8fafc;
}

.dgn-latest-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
	display: block;
}

.dgn-latest-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e0f2fe, #e2e8f0);
	color: #1d4ed8;
	font-weight: 700;
	letter-spacing: 0.2em;
	font-size: 0.75rem;
}

.dgn-latest-category {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: rgba(15, 23, 42, 0.7);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

.dgn-latest-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dgn-latest-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dgn-latest-excerpt {
	font-size: 0.875rem;
	color: #475569;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dgn-latest-dot {
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: #94a3b8;
	display: inline-block;
}

.dgn-home img:not(.rounded-full) {
	border-radius: 14px;
}

.dgn-home [data-hero] img {
	border-radius: 0;
}

.dgn-home .overflow-hidden img {
	border-radius: inherit;
}

/* Hero typing animation */
.dgn-hero-typing {
	display: inline;
	border-right: 2px solid rgba(255, 255, 255, 0.6);
	animation: dgnCaret 0.8s step-end infinite;
}

@media (min-width: 640px) {
	.dgn-hero-typing {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		max-width: 100%;
	}
}

@keyframes dgnCaret {
	50% { border-color: transparent; }
}

.dgn-hero-indicator-active {
	width: 3rem;
	background-color: #2563eb;
}

.dgn-hero-indicator-inactive {
	width: 2rem;
	background-color: #d1d5db;
}

.group:hover .dgn-hero-indicator-inactive {
	background-color: #9ca3af;
}

/* Pulse circle overlay */
.dgn-pulse-circle-wrap {
	--pc: #2563eb;
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 10;
	pointer-events: none;
}

.dgn-pulse-core {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pc);
	position: relative;
	z-index: 3;
	box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 60%, transparent);
}

.dgn-pulse-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--pc);
	opacity: 0.5;
	animation: dgnPulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.dgn-pulse-ring-2 {
	animation-delay: 0.8s;
}

@keyframes dgnPulseRing {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dgn-latest-card,
	.dgn-handpicked-featured,
	.dgn-handpicked-float,
	.dgn-pulse-ring,
	.dgn-hero-typing {
		animation: none !important;
		transition: none !important;
	}
}

.dgn-latest-updates .dgn-latest-card:nth-child(1) {
	animation-delay: 0.05s;
}

.dgn-latest-updates .dgn-latest-card:nth-child(2) {
	animation-delay: 0.12s;
}

.dgn-latest-updates .dgn-latest-card:nth-child(3) {
	animation-delay: 0.18s;
}

.dgn-latest-updates .dgn-latest-card:nth-child(4) {
	animation-delay: 0.24s;
}

/* ===== RTL (Arabic) Overrides ===== */

[dir="rtl"] {
	font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Helvetica Neue', sans-serif;
}

/* Flip directional utilities that Tailwind doesn't auto-flip */
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .pl-11 { padding-left: 0; padding-right: 2.75rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-12 { padding-right: 0; padding-left: 3rem; }

/* Flip left/right positioned elements */
[dir="rtl"] .left-2\.5 { left: auto; right: 0.625rem; }
[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
[dir="rtl"] .left-4 { left: auto; right: 1rem; }
[dir="rtl"] .left-6 { left: auto; right: 1.5rem; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
[dir="rtl"] .right-4 { right: auto; left: 1rem; }
[dir="rtl"] .right-6 { right: auto; left: 1.5rem; }

/* Flip text alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Flip flexbox spacing for RTL */
[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-x-reverse: 1;
}
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-x-reverse: 1;
}

/* Flip transform origin for direction-dependent animations */
[dir="rtl"] .origin-left { transform-origin: right; }

/* Flip border radiuses on directional elements */
[dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0; }
[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem; }

/* Flip arrow indicators */
[dir="rtl"] .dgn-arrow-flip {
	transform: scaleX(-1);
}

/* Search input: flip padding and icon position for RTL */
[dir="rtl"] input[type="search"] {
	text-align: right;
	padding-left: 0.75rem;
	padding-right: 2rem;
}
[dir="rtl"] form.relative span.absolute {
	left: auto;
	right: 0.625rem;
}

/* Footer social links: keep LTR icon order */
[dir="rtl"] .dgn-footer-social svg {
	direction: ltr;
}

/* Breaking news ticker: keep LTR animation even in RTL */
[dir="rtl"] .dgn-hero-ticker {
	direction: rtl;
	unicode-bidi: bidi-override;
}

/* Ensure grid/flex items reverse in RTL */
[dir="rtl"] .flex-row-reverse {
	flex-direction: row;
}

/* Navigation dropdown position */
[dir="rtl"] nav .group .absolute.right-0 {
	right: auto;
	left: 0;
}

/* Language switcher gap is fine as-is; no override needed */