/* Global Theme */
:root {
	--brand: #6366f1; /* Indigo */
	--brand-alt: #22d3ee; /* Cyan */
	--text: #0f172a;
	--muted: #64748b;
	--surface: #ffffff;
	--bg: #f6f7fb;
	--footer-bg: #0b1220;
}

html, body { height: 100%; }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--text);
	background-color: var(--bg);
}

/* Topbar */
.topbar { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.topbar .lang { color: #475569; text-decoration: none; }
.topbar .lang:hover { text-decoration: underline; }

/* Navbar */
.navbar-brand { font-weight: 700; letter-spacing: .2px; }
.navbar .nav-link { font-weight: 500; color: #1f2937; }
.navbar .nav-link.active { color: var(--brand); }

/* Hero */
.hero {
	background: radial-gradient(70% 120% at 0% 0%, rgba(13, 110, 253, .25) 0%, rgba(13, 110, 253, 0) 60%),
		linear-gradient(135deg, var(--brand) 0%, var(--brand-alt) 100%);
	color: #fff;
}
.hero .display-5 { line-height: 1.15; }

.page-hero { background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(34,211,238,.10)); }

/* Breadcrumb */
.breadcrumb-bar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.breadcrumb { margin: 0; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
.breadcrumb a { color: #475569; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Section headings */
.section-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); font-weight: 700; }
.section-title { font-weight: 700; margin: .15rem 0 0; }
.heading-line { width: 64px; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-alt)); border-radius: 3px; }

/* Cards */
.card { border: 1px solid rgba(0,0,0,.05); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.event-card-img { height: 190px; object-fit: cover; }

/* Gallery */
.object-fit-cover { object-fit: cover; }

/* Testimonials */
.testimonial { color: #0f172a; }
.testimonial .quote { font-size: 1.05rem; line-height: 1.7; }
.testimonial .author { font-weight: 600; color: #334155; }

/* Buttons */
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { filter: brightness(0.95); }

/* Footer */
.footer-dark { background: var(--footer-bg); color: #cbd5e1; }
.footer-dark .brand { color: #e5e7eb; font-weight: 700; letter-spacing: .3px; }
.footer-dark .section { color: #e5e7eb; font-weight: 600; margin-bottom: .5rem; }
.footer-dark .footer-link { color: #94a3b8; text-decoration: none; }
.footer-dark .footer-link:hover { color: #e5e7eb; text-decoration: underline; }
.footer-dark .social { color: #94a3b8; }
.footer-dark .social:hover { color: #e5e7eb; }
.footer-dark .text-muted { color: #ffffff !important; }

/* Newsletter */
.newsletter-form .form-control { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #e2e8f0; }
.newsletter-form .form-control::placeholder { color: #94a3b8; }
.newsletter-form .btn { white-space: nowrap; } 

/* Fullscreen hero for homepage */
.hero-full {
	position: relative;
	height: 92vh;
	min-height: 560px;
	color: #fff;
	overflow: hidden;
}
.hero-full .hero-bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.75);
	z-index: 0;
}
.hero-full > .overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);
	z-index: 1;
}

/* reset generic overlay so it doesn't unexpectedly cover other elements like gallery tiles */
.overlay { background: transparent; }
.hero-full .hero-content {
	position: relative;
	z-index: 2;
}
.hero-title {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	letter-spacing: .02em;
}
.play-btn {
	width: 120px; height: 120px;
	border-radius: 9999px;
	border: 3px solid rgba(255,255,255,.7);
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(2px);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .2s ease, background .2s ease;
}
.play-btn:hover { transform: scale(1.03); background: rgba(255,255,255,.25); }
.play-btn i { font-size: 3rem; margin-left: .25rem; }

/* Bottom nav (homepage) */
.bottom-nav {
	position: relative;
	z-index: 3;
	background: rgba(245,245,245,.95);
	backdrop-filter: blur(6px);
	border-top: 1px solid #e2e8f0;
}
.bottom-nav .nav-link { color: #0f172a; font-weight: 600; letter-spacing: .02em; }
.bottom-nav .nav-link:hover { color: var(--brand); } 

/* Hero logos */
.hero-logos { position: absolute; top: 16px; left: 0; right: 0; z-index: 4; }
.hero-logo { position: absolute; top: 16px; height: 64px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
/* Make logos with a white background appear background-free where possible.
   This uses mix-blend-mode to let white pixels blend into the page background.
   It's a visual fix; for perfect transparency convert the PNGs to true transparent files.
*/
.hero-logo {
	background: transparent;
	/* remove visible white areas by multiplying image over the page background */
	mix-blend-mode: multiply;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* If a logo should keep its original appearance, add the class .keep-bg to the <img> */
.hero-logo.keep-bg {
	mix-blend-mode: normal;
}

/* Apply experimental SVG filter to try to make near-white pixels transparent in-browser.
   This is imperfect; use the .keep-filter class to opt out if it causes artifacts.
*/
.hero-logo {
	filter: url('#whiteToAlpha');
}
.hero-logo.keep-filter {
	filter: none !important;
}
.hero-logo-left { left: 16px; }
.hero-logo-right { right: 16px; }
@media (min-width: 992px) {
	.hero-logo { height: 96px; }
} 

/* Fullscreen YouTube background */
.video-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.video-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Cover container while preserving 16:9 */
	width: 100vw;
	height: 56.25vw; /* 9/16 of width */
	min-width: 177.78vh; /* 16/9 of height */
	min-height: 100vh;
	pointer-events: none; /* prevent accidental interactions */
} 

/* Language Switcher */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-link {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.lang-link:hover {
    color: #495057;
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-link.active {
    color: #0d6efd;
    font-weight: 500;
}

/* RTL Support */
[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

[dir="rtl"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Gallery thumbnails: enforce a consistent aspect ratio and cropping
   This makes all gallery images/videos appear the same "resolution" visually
   without reprocessing the original files. Uses a 4:3 ratio which matches
   many template uses (ratio-4x3). If needed, change to 16/9 or another ratio.
*/
.gallery-grid, .attached-site-gallery {
	/* Helper containers for galleries across templates.
	   Default to a responsive grid so thumbnails align neatly. */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}
.gallery-grid .ratio, .attached-site-gallery .ratio, .gallery-item .ratio,
.ratio.gallery-item, .ratio.gallery-grid, .ratio.attached-site-gallery,
.ratio {
	/* Apply a 4:3 visual crop to ratio containers used by gallery items. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gallery-grid img, .gallery-grid video,
.attached-site-gallery img, .attached-site-gallery video,
.gallery-item img, .gallery-item video,
.gallery-grid .object-fit-cover, .attached-site-gallery .object-fit-cover,
.ratio img, .ratio video, .ratio .object-fit-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Make sure thumbnails don't show default borders or unexpected spacing */
.gallery-grid .card, .attached-site-gallery .card, .gallery-item .card {
	border: none;
}


[dir="rtl"] .float-start {
    float: right !important;
}

[dir="rtl"] .float-end {
    float: left !important;
}

[dir="rtl"] .border-start {
    border-left: none !important;
    border-right: 1px solid !important;
}

[dir="rtl"] .border-end {
    border-right: none !important;
    border-left: 1px solid !important;
}

[dir="rtl"] .ps-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[dir="rtl"] .pe-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

[dir="rtl"] .ms-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] .me-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Arabic Font Support */
[dir="rtl"] body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

[dir="rtl"] .hero-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.2;
}