/* ==================================================
   Arena Casino — Main Stylesheet
   ================================================== */

/* -------------------- Layout helpers -------------------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 10000;
	padding: 12px 20px;
	/* Fiksuar e errët, jo e temuar — --color-gold-light mbi --color-bg do
	   të kishte kontrast të dobët në light mode (të dyja të çelëta); ky
	   element vetëm shfaqet përkohësisht mbi fokus, ndaj i duhet kontrast
	   i sigurt në të dyja temat, jo të ndjekë sfondin e faqes. */
	background: #0a0a0a;
	color: var(--color-gold-light);
	border: 1px solid rgba(201, 162, 75, 0.4);
	border-radius: var(--radius-sm);
	font-size: 14px;
	text-decoration: none;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 16px;
}

/* Fokusi me tastierë — një unazë e artë e njëtrajtshme mbi çdo element
   interaktiv (butona, linke, karta/dot/shigjeta karuseli, kontrolle
   custom si .career-row__head me role="button"), në vend të outline-it
   të parazgjedhur (jo gjithmonë i dukshëm mbi sfondin e errët të temës).
   :focus-visible — shfaqet vetëm për navigim me tastierë, jo për klik me
   maus/prekje, ndaj s'shton "zhurmë" vizuale gjatë përdorimit normal. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-gold-light);
	outline-offset: 3px;
	border-radius: var(--radius-md);
}

/* -------------------- Header -------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--header-bg, linear-gradient(to bottom, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 100%));
	transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
	background: none;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.site-header__inner {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

/* Logo — pak hapësirë majtas + ulur lehtë njësoj si navbar-i */
.site-logo {
	display: flex;
	align-items: center;
	margin-left: 4px;
	padding-top: 30px;
}

.custom-logo,
.site-logo__image {
	max-height: var(--header-logo-height, 40px);
	width: auto;
}

/* Primary nav — pill, e centruar në header pavarësisht gjerësisë së logos */
.primary-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding-top: 30px;
	display: flex;
	z-index: 1;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--nav-bg, rgba(20, 18, 16, 0.55));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.nav-menu li a {
	display: inline-block;
	padding: 10px 20px;
	font-size: var(--nav-link-size, 14px);
	font-weight: 500;
	/* Fixed white, not the themed var(--color-text) — the pill nav sits on
	   a permanently-dark background regardless of light/dark mode, so its
	   text must stay permanently light too. */
	color: var(--nav-link-color, var(--color-white));
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-base), color var(--transition-base);
	white-space: nowrap;
}

.nav-menu li a:hover,
.nav-menu li a:focus {
	background: var(--nav-link-hover-bg, var(--color-gold));
	/* Fixed dark ink, not the themed var(--color-bg) — gold needs dark
	   text for contrast regardless of site mode. */
	color: var(--nav-link-hover-color, var(--color-header-ink));
}

.nav-menu li.current-menu-item > a {
	background: var(--nav-link-hover-bg, var(--color-gold));
	border-radius: var(--radius-sm);
	color: var(--nav-link-hover-color, var(--color-header-ink));
}

/* Dropdown — Casino > Slot Machines / Live Tables / Vip Gaming */
.nav-menu li.menu-item-has-children {
	position: relative;
	/* Zgjat zonën "hover" poshtë butonit, pa shtuar hapësirë reale në layout,
	   që kalimi i mausit drejt dropdown-it të mos e humbasë :hover-in (nuk mbetet "gap" i vdekur). */
	padding-bottom: 14px;
	margin-bottom: -14px;
}

.nav-menu li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	margin-bottom: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition-base);
	vertical-align: middle;
}

.nav-menu li.menu-item-has-children:hover > a::after,
.nav-menu li.menu-item-has-children.submenu-open > a::after {
	transform: rotate(-135deg);
}

.sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 210px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: rgba(20, 18, 16, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.nav-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu li.menu-item-has-children:focus-within > .sub-menu,
.nav-menu li.menu-item-has-children.submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%);
}

.sub-menu li a {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	/* Fixed white — the dropdown panel's own background is a fixed dark
	   rgba(), not themed, so its text stays fixed light too. */
	color: var(--color-white);
}

.sub-menu li a:hover,
.sub-menu li a:focus {
	background: var(--color-gold);
	color: var(--color-header-ink);
}

/* -------------------- Light/dark toggle -------------------- */
/* Icon visibility is plain CSS keyed off html[data-theme] (set by
   assets/js/main.js) — the icon shown is always the action a click will
   perform: sun visible = "switch to light", moon visible = "switch to
   dark". Default (no data-theme attribute = dark) shows the sun. */

/* Groups the toggle with the hamburger so the two buttons are always
   aligned to each other (same flex row, same cross-axis centering),
   rather than each being independently positioned within the header.
   margin-top matches .site-logo's own padding-top: 30px — the logo's
   visual center sits lower than the header row's raw geometric center
   because of that padding, so without this offset the actions group
   (which has no such padding) centers on the row instead and ends up
   looking too high relative to the logo next to it. */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 15px;
}

.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	background: rgba(20, 18, 16, 0.55);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-gold-light);
	cursor: pointer;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.theme-toggle:hover {
	background: var(--color-gold);
	color: var(--color-header-ink);
	border-color: var(--color-gold);
}

.theme-toggle__icon {
	width: 20px;
	height: 20px;
}

.theme-toggle__icon--moon {
	display: none;
}

html[data-theme="light"] .theme-toggle__icon--sun {
	display: none;
}

html[data-theme="light"] .theme-toggle__icon--moon {
	display: block;
}

/* -------------------- Language switcher -------------------- */
/* E njëjta lartësi/background/border/radius/hover si .theme-toggle — të
   dyja duhet të "ndihen" sikur janë projektuar bashkë (shih assets/js/i18n.js
   për logjikën e hapjes/mbylljes/ndryshimit të gjuhës). */
.lang-switcher {
	position: relative;
	flex: 0 0 auto;
}

.lang-switcher__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	background: rgba(20, 18, 16, 0.55);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-gold-light);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.lang-switcher__trigger:hover,
.lang-switcher.is-open .lang-switcher__trigger {
	background: var(--color-gold);
	color: var(--color-header-ink);
	border-color: var(--color-gold);
}

.lang-switcher__flag {
	font-size: 16px;
	line-height: 1;
	/* Emoji flamujsh — të mprehta në çdo ekran (edhe retina), pa asnjë
	   asset/varësi shtesë. */
	font-family: 'Twemoji Mozilla', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.lang-switcher__code {
	line-height: 1;
}

.lang-switcher__chevron {
	width: 14px;
	height: 14px;
	transition: transform var(--transition-base);
}

.lang-switcher.is-open .lang-switcher__chevron {
	transform: rotate(180deg);
}

.lang-switcher__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 172px;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	padding: 6px;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.lang-switcher.is-open .lang-switcher__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.lang-switcher__option {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
	padding: 10px 12px;
	background: transparent;
	border: none;
	border-radius: calc(var(--radius-md) - 4px);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.lang-switcher__option:hover {
	background: rgba(201, 162, 75, 0.12);
}

.lang-switcher__option[aria-checked="true"] {
	color: var(--color-gold-light);
	font-weight: 600;
}

.lang-switcher__option .lang-switcher__flag {
	font-size: 18px;
}

/* Nën 600px, hapësira mes logos/aksioneve/hamburger-it bëhet e ngushtë —
   trigger-i ngushtohet në vetëm [flamur][shigjetë], siç lejon
   specifikimi, pa u përplasur me kontrollet e tjera të header-it. */
@media (max-width: 600px) {
	.lang-switcher__trigger {
		padding: 0 8px;
		gap: 4px;
	}

	.lang-switcher__code {
		display: none;
	}
}

/* Mobile nav toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: rgba(20, 18, 16, 0.55);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--color-gold-light);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* -------------------- Hero -------------------- */
.hero {
	position: relative;
	width: 100%;
}

/* Hero i lidhur me scroll: seksioni ka lartësi shtesë (distancë scroll-i),
   ndërsa .hero__scrub-pin mbetet i fiksuar (sticky) sa kohë përshkohet ajo lartësi. */
.hero--scrub {
	height: var(--hero-scrub-length, 350vh);
}

.hero__scrub-pin {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background-color: var(--color-bg);
}

.hero__video,
.hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.35) 55%, rgba(10, 10, 10, 0.92) 100%);
}

/* Kapitujt e tekstit — të gjithë të vendosur në të njëjtën qelizë grid,
   që të mund të kalojnë njëri te tjetri me "fade" gjatë scroll-it. */
.hero__chapters {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	padding: 0 24px 96px;
}

.hero__chapter {
	grid-column: 1;
	grid-row: 1;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.7s ease;
}

.hero__chapter.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Gjithmonë në një rresht — madhësia e shkronjave zvogëlohet me vw
   në vend të thyerjes së tekstit në dy rreshta. */
.hero__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(20px, 6vw, 64px);
	color: var(--color-white);
	margin: 0 0 16px;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.hero__subtitle {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(16px, 2vw, 22px);
	/* Fixed, not the themed var(--color-text-muted) — this sits over the
	   hero video/overlay, which stays dark regardless of site theme, so
	   the text needs to stay the same light off-white in both modes. */
	color: rgba(245, 243, 239, 0.7);
	max-width: 640px;
	margin: 0 auto;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}

.hero__cta .btn-gold,
.hero__cta .btn-outline {
	margin-top: 0;
}

.btn-outline {
	display: inline-block;
	padding: 14px 32px;
	background: transparent;
	border: 1px solid var(--color-gold);
	color: var(--color-gold-light);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.btn-outline:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-bg);
}

/* -------------------- Photo collage (ARENA CASINO / TIRANA) -------------------- */
.photo-collage {
	background-color: var(--color-bg);
	padding: 96px 24px;
	overflow: hidden;
}

.photo-collage__grid {
	position: relative;
	max-width: var(--container-width-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 90px;
	gap: 28px;
}

.photo-collage__intro {
	grid-column: 3 / 5;
	grid-row: 1 / 7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 440px;
	margin: 0 auto;
	padding: 0 14px;
}

.photo-collage__intro p {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.8;
	color: var(--color-text-muted);
	text-align: center;
	margin: 0;
}

.photo-collage__item {
	position: relative;
	overflow: visible;
	background-color: var(--color-bg-alt);
}

/* Zvarritja (GSAP Draggable) — vetëm në desktop. */
@media (min-width: 901px) {
	.photo-collage__item {
		cursor: grab;
		touch-action: none;
	}

	.photo-collage__item.is-dragging {
		cursor: grabbing;
		z-index: 10;
	}
}

.photo-collage__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 4px;
	transform: scale(1);
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Zoom që rritet "përjashta" kutisë (overflow: visible) — vetëm me maus real. */
@media (hover: hover) and (pointer: fine) {
	.photo-collage__item img {
		transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform-origin 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.photo-collage__item.is-zoomed {
		z-index: 5;
	}

	.photo-collage__item.is-zoomed img {
		transform: scale(1.25);
		box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
	}
}

/* Vendosja e 10 fotove — 5 majtas (kolonat 1–2), 5 djathtas (kolonat 5–6),
   të shkallëzuara ("brick"), duke lënë kolonat 3–4 bosh për tekstin hyrës. */
.photo-collage__item--1  { grid-column: 1; grid-row: 1 / 4; }
.photo-collage__item--2  { grid-column: 2; grid-row: 1 / 3; }
.photo-collage__item--3  { grid-column: 2; grid-row: 3 / 5; }
.photo-collage__item--4  { grid-column: 1; grid-row: 4 / 7; }
.photo-collage__item--5  { grid-column: 2; grid-row: 5 / 7; }
.photo-collage__item--6  { grid-column: 5; grid-row: 1 / 3; }
.photo-collage__item--7  { grid-column: 6; grid-row: 1 / 4; }
.photo-collage__item--8  { grid-column: 5; grid-row: 3 / 5; }
.photo-collage__item--9  { grid-column: 6; grid-row: 4 / 7; }
.photo-collage__item--10 { grid-column: 5; grid-row: 5 / 7; }

/* -------------------- Explore (tabs + content panel + carousel) -------------------- */
.explore {
	background-color: var(--color-bg);
	padding: 96px 24px 120px;
}

.explore__nav {
	max-width: var(--container-width-wide);
	margin: 0 auto 48px;
	border-bottom: 1px solid var(--color-border);
}

.explore__tabs {
	position: relative;
	display: flex;
	gap: 40px;
	overflow-x: auto;
	padding-bottom: 20px;
	scrollbar-width: none;
}

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

.explore__tab {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 8px 2px;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 500;
	color: var(--color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.explore__tab:hover {
	color: var(--color-text);
}

.explore__tab.is-active {
	color: var(--color-gold-light);
}

.explore__underline {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--color-gold);
	border-radius: 2px;
	transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.explore__body {
	position: relative;
	max-width: var(--container-width-wide);
	margin: 0 auto;
	display: grid;
}

.explore__panel {
	grid-column: 1;
	grid-row: 1;
	display: grid;
	grid-template-columns: minmax(300px, 420px) 1fr;
	gap: 40px;
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	pointer-events: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.explore__panel.is-active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.explore__content {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.explore__eyebrow {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--color-gold);
	text-transform: uppercase;
}

.explore__heading {
	margin: 16px 0 20px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.15;
	/* Themed (not the fixed --color-white) — this section's own background
	   already switches with light/dark mode, so its heading needs to
	   follow it: black in light mode, white in dark. */
	color: var(--color-text);
}

.explore__description {
	margin: 0 0 32px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.explore__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 14px 32px;
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-md);
	color: var(--color-gold-light);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.explore__cta span {
	transition: transform 0.3s ease;
}

.explore__cta:hover {
	background: var(--color-gold);
	color: var(--color-bg);
}

.explore__cta:hover span {
	transform: translateX(3px);
}

.explore__carousel {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-alt);
	min-height: 420px;
}

.explore__slides {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 420px;
}

.explore__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.explore__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 1;
}

.explore__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transform-origin: 50% 50%;
	will-change: transform;
}

.explore__slide-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

/* Zoom i lehtë që ndjek kursorin — vetëm me maus real, brenda kutisë. */
@media (hover: hover) and (pointer: fine) {
	.explore__slide img {
		transition: transform 0.5s ease, transform-origin 0.5s ease;
	}

	.explore__slide.is-hovered img {
		transform: scale(1.05);
	}
}

.explore__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid var(--color-border);
	color: var(--color-white);
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.explore__arrow:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-bg);
}

.explore__arrow--prev {
	left: 20px;
}

.explore__arrow--next {
	right: 20px;
}

.explore__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 3;
}

.explore__dot {
	width: 28px;
	height: 3px;
	padding: 0;
	border: none;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.explore__dot.is-active {
	background: var(--color-gold);
}

/* -------------------- Page content -------------------- */
.page-content {
	padding: calc(var(--header-height) + 64px) 0 96px;
	min-height: 60vh;
}

.page-content__header {
	margin-bottom: 40px;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 24px;
}

.page-content__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 72px);
	text-transform: capitalize;
	color: var(--color-text);
	text-wrap: balance;
	margin: 0;
}

.page-content__body {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.page-content__body a {
	color: var(--color-gold-light);
	text-decoration: underline;
}

/* Faqet ligjore (Privacy Policy / Terms & Conditions) — gjerësi leximi e
   kufizuar, jo gjithë .container-in 1320px, që tekstin e dendur ligjor ta
   mbajë komod për t'u lexuar; titujt e seksioneve (h2) marrin trajtimin e
   njëtrajtshëm gold të "eyebrow"-ave të tjerë të sitit. */
.legal-content {
	max-width: 820px;
}

.page-content__body h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--color-gold-light);
	margin: 40px 0 14px;
}

.page-content__body h2:first-child {
	margin-top: 0;
}

.page-content__body p {
	margin: 0 0 16px;
}

.page-content__body .legal-updated {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
	font-size: 14px;
	font-style: italic;
}

.front-content {
	padding: 96px 0;
}

.front-roulette {
	padding: 0 24px 96px;
	background-color: var(--color-bg);
}

/* Blog fallback (index.php) */
.entry {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-border);
}

.entry__title a {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--color-gold-light);
}

.entry__excerpt {
	color: var(--color-text-muted);
}

/* Buttons */
.btn-gold {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 32px;
	background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
	color: var(--color-bg);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: var(--radius-md);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 162, 75, 0.35);
}

/* Footer styling lives in its own section further down this file (search
   "Footer" — it's a fully separate light-palette module, not an extension
   of the dark theme rules above). */

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

/* Desktop e ngushtë (1025–1240px): pak hapësirë më pak,
   që nav-i i centruar të mos mbivendoset me logon e gjerë. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.nav-menu {
		gap: 0;
	}

	.nav-menu li a {
		padding: 10px 14px;
		font-size: 13px;
	}
}

/* Nav-bar bëhet hamburger */
@media (max-width: 1024px) {
	.nav-toggle {
		display: flex;
	}

	/* Kur menuja mobile është hapur (assets/js/main.js vendos këtë klasë te
	   <html>), faqja poshtë s'duhet të scroll-ohet — përndryshe footer-i
	   "përplasej" në sy pas panelit të menusë sapo lëviz gishtin. */
	html.nav-open {
		overflow: hidden;
	}

	.primary-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		transform: none;
		padding-top: 0;
		max-height: 0;
		overflow: hidden;
		background: rgba(10, 10, 10, 0.96);
		backdrop-filter: blur(12px);
		transition: max-height var(--transition-base);
	}

	/* Lartësia e disponueshme e ekranit, jo një vlerë fikse — 480px pritej
	   të mjaftonte, por 7 zëra menuje + nën-menuja e hapur e Casino-s lehtë
	   e kalojnë atë, duke prerë "Contact" apo fundin e nën-menusë. Scroll-i
	   i brendshëm (overflow-y: auto) mbulon edhe ekranet më të shkurtra. */
	.primary-nav.is-open {
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		background: none;
		border: none;
		border-radius: 0;
		padding: 16px 24px 32px;
		gap: 8px;
	}

	.nav-menu li a {
		display: block;
		text-align: center;
		padding: 14px 20px;
	}

	.site-header__inner {
		padding: 0 20px;
	}

	/* Në mobile s'na duhet "bridge" i hover-it (hapet me tap, jo hover) */
	.nav-menu li.menu-item-has-children {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* Dropdown në mobile: statik, jo overlay, hapet me tap. Rivendos
	   EKSPLICITISHT çdo veti që rregulli desktop (.sub-menu, sipër) i
	   vendos për "absolute + left:50% + min-width:210px" — përndryshe,
	   ndonjë prej tyre (min-width, left) mbetet "e ngjitur" nga cascade-i
	   edhe këtu, duke e bërë kutinë të ngushtë/të zhvendosur dhe tekstin
	   e prerë në cep (bug i saktë i raportuar). */
	.sub-menu {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		min-width: 0;
		max-height: 0;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		margin: 4px 0 0;
		padding: 0;
		border: none;
		background: rgba(0, 0, 0, 0.25);
		box-shadow: none;
		overflow: hidden;
		transition: max-height var(--transition-base);
	}

	.nav-menu li.menu-item-has-children:hover > .sub-menu {
		max-height: 0;
	}

	.nav-menu li.menu-item-has-children.submenu-open > .sub-menu {
		max-height: 240px;
		padding: 6px 0;
	}

	.sub-menu li a {
		text-align: center;
		white-space: normal;
		/* Fixed, not themed — the mobile nav panel's own background stays
		   permanently dark (see .primary-nav above). */
		color: rgba(245, 243, 239, 0.7);
	}
}

/* Kolazhi i fotove: nën 900px braktiset rreshtimi "brick" —
   titulli sipër, fotot poshtë në grid të thjeshtë 2-kolonësh. */
@media (max-width: 900px) {
	.photo-collage {
		padding: 64px 20px;
	}

	.front-content {
		padding: 64px 0;
	}

	.photo-collage__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		gap: 20px;
	}

	.photo-collage__intro {
		grid-column: 1 / -1;
		grid-row: auto;
		max-width: none;
		padding: 0 8px;
		margin-bottom: 28px;
	}

	.photo-collage__item--1,
	.photo-collage__item--2,
	.photo-collage__item--3,
	.photo-collage__item--4,
	.photo-collage__item--5,
	.photo-collage__item--6,
	.photo-collage__item--7,
	.photo-collage__item--8,
	.photo-collage__item--9,
	.photo-collage__item--10 {
		grid-column: auto;
		grid-row: auto;
	}

	.photo-collage__item {
		aspect-ratio: 1 / 1;
	}

	/* Në mobile shfaqen vetëm 4 foto, jo të gjitha 10. */
	.photo-collage__item--5,
	.photo-collage__item--6,
	.photo-collage__item--7,
	.photo-collage__item--8,
	.photo-collage__item--9,
	.photo-collage__item--10 {
		display: none;
	}

	/* Explore: panel përmbajtjeje + karusel njëri sipër tjetrit. */
	.explore {
		padding: 64px 20px 80px;
	}

	.explore__tabs {
		gap: 28px;
	}

	.explore__tab {
		font-size: 15px;
	}

	.explore__panel {
		grid-template-columns: 1fr;
	}

	.explore__content {
		padding: 32px 24px;
	}

	.explore__carousel,
	.explore__slides {
		min-height: 300px;
	}
}

@media (max-width: 600px) {
	.hero__chapters {
		padding: 0 16px 56px;
	}
}

/* ==================================================================
   Footer
   Deliberately its own light palette (--footer-*) rather than the site's
   dark theme — matches the reference design, which uses a cream footer to
   close out the otherwise all-dark page.
   ================================================================== */

.site-footer {
	--footer-bg: #f3ede4;
	--footer-text: #1c1815;
	--footer-muted: rgba(28, 24, 21, 0.6);
	--footer-accent: var(--color-gold);
	background: var(--footer-bg);
	color: var(--footer-text);
	/* Still needed — it's what keeps the Matter.js coin pile (and the
	   page's horizontal scrollbar) contained — but the ARENA wordmark no
	   longer relies on it for anything: nothing in .site-footer__wordmark
	   grows on hover anymore, and its own padding is generous enough that
	   this should never actually clip a letter in normal use. */
	overflow: hidden;
}

/* The footer deliberately INVERTS relative to the rest of the page rather
   than following it — cream footer capping a dark site (the default
   above), or a black footer capping the light site here. Overriding just
   these three custom properties is enough: every other footer rule
   already reads its colors through var(--footer-*), so the whole section
   flips together. */
html[data-theme="light"] .site-footer {
	--footer-bg: #0a0a0a;
	--footer-text: #f5f3ef;
	--footer-muted: rgba(245, 243, 239, 0.6);
}

.site-footer__top {
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
	gap: 40px;
	padding: 72px 24px 56px;
	align-items: start;
}

.site-footer__col-label {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-family: var(--font-sans);
	font-size: var(--footer-label-size, 12px);
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--footer-accent);
}

.site-footer__col-label::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22px;
	height: 1px;
	background: currentColor;
}

.site-footer__address {
	font-style: normal;
	font-size: var(--footer-body-size, 15px);
	line-height: 1.9;
	color: var(--footer-text);
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--footer-body-size, 15px);
	line-height: 1.9;
}

.site-footer__address a,
.site-footer__list a {
	color: var(--footer-text);
	text-decoration: none;
	transition: color var(--transition-base);
}

.site-footer__address a:hover,
.site-footer__list a:hover {
	color: var(--footer-accent);
}

.site-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	text-align: right;
}

.site-footer__age {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--footer-age-size, 13px);
	color: var(--footer-muted);
	white-space: nowrap;
}

.site-footer__age-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1px solid var(--footer-accent);
	color: var(--footer-accent);
	font-size: 12px;
	font-weight: 600;
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--footer-copyright-size, 13px);
	color: var(--footer-muted);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12px;
	color: var(--footer-muted);
}

.site-footer__legal a {
	color: var(--footer-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition-base);
}

.site-footer__legal a:hover {
	color: var(--footer-accent);
}

/* ---------------- "ARENA" wordmark ---------------- */
/* No transform: scale() anywhere in this section, deliberately — scaling a
   flex item on hover was the root cause of letters clipping against
   .site-footer's overflow:hidden, because it grows the box unpredictably
   at hover time. Every box here is sized ONCE, generously, and never
   changes size on hover — only crossfade (opacity) and a subtle background
   zoom animate, both of which paint outside/inside the glyph without ever
   touching its box, so there is nothing left for overflow:hidden to clip. */

.site-footer__wordmark {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
	overflow: visible;
	/* Generous, evenly-distributed breathing room on every side — the
	   bold face and the background-zoom hover effect both stay strictly
	   inside this padding, so .site-footer's overflow:hidden (still
	   needed to contain the Matter.js coin pile) never actually clips
	   the wordmark itself. */
	padding: 5vw 6vw clamp(70px, 11vw, 150px);
	box-sizing: border-box;
}

.site-footer__letter {
	position: relative;
	flex: 0 0 auto;
	/* Larger, explicit gap between letters (was 1.4vw each side = 2.8vw
	   between neighbors; this is a full 4vw between neighbors) — plus
	   overflow:visible so nothing this element contains can ever be
	   clipped by the element's own box. */
	margin: 0 3vw;
	overflow: visible;
	cursor: default;
}

.site-footer__letter-face {
	display: block;
	overflow: visible;
	font-family: 'Cormorant Garamond', var(--font-serif);
	/* Slightly larger than before, and purely vw/clamp-driven so the whole
	   row's width scales with the viewport instead of ever being able to
	   exceed it. */
	font-size: clamp(80px, 18vw, 280px);
	/* A generous line-height (not the cramped 0.86 this used to be) is
	   what actually guarantees the full glyph — including the bold
	   weight's taller ascenders/descenders — has room inside its own box,
	   top and bottom, regardless of hover state. */
	line-height: 1.15;
	text-align: center;
	background-image: var(--letter-image);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* The photos behind these letters are moody, dim casino-floor shots —
	   boosting them here (rather than re-editing every source photo) is
	   what keeps a small sliver of stroke still readable as an actual
	   photo instead of reading as near-black. */
	filter: brightness(1.2) contrast(1.05) saturate(1.2);
	will-change: opacity, background-size;
	transition: opacity 0.25s ease, background-size 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The thin face stays in normal flow — it's what actually sizes the
   wrapper, and it's what keeps every letter's baseline aligned since they
   all share the exact same font-size/line-height.
   Cormorant Garamond isn't loaded as a variable font (see inc/enqueue.php
   — only discrete static weights 300/400/500/600/700), so there's no
   font-variation-settings axis to set here; font-weight just has to pick
   one of those actually-loaded cuts directly. */
.site-footer__letter-face--thin {
	font-weight: 400;
	background-size: 145%;
}

/* The bold face is a second, separately-shaped-once copy stacked exactly
   on top via inset:0 (same box as the thin face — nothing here is scaled
   or resized), invisible until hover crossfades the two. 700 is the
   heaviest weight actually enqueued for Cormorant Garamond — going higher
   would just make the browser fake-embolden the 700 cut instead of
   rendering a real heavier one. */
.site-footer__letter-face--bold {
	position: absolute;
	inset: 0;
	overflow: visible;
	font-weight: 700;
	opacity: 0;
	background-size: 145%;
}

/* The hover "reveal" is now entirely the crossfade plus the photo slowly
   zooming in behind the bold glyph — never a box-level transform, per the
   fix above. */
.site-footer__letter:hover .site-footer__letter-face--thin {
	opacity: 0;
}

.site-footer__letter:hover .site-footer__letter-face--bold {
	opacity: 1;
	background-size: 165%;
}

/* ---------------- Matter.js coin-drop (footer-physics.js) ---------------- */

.site-footer__physics {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.site-footer__physics-coin {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	pointer-events: none;
	will-change: transform;
}

/* Hover-triggered coins (footer.js) are real Matter.js bodies added to the
   same world as the initial drop — they reuse .site-footer__physics-coin
   above, so there is only one coin style in the whole file, not a second
   CSS-animated one that fades away. */

@media (prefers-reduced-motion: reduce) {
	.site-footer__letter-face {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.site-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__meta {
		grid-column: 1 / -1;
		align-items: flex-start;
		text-align: left;
	}
}

@media (max-width: 640px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		padding: 56px 20px 40px;
		gap: 32px;
	}

	.site-footer__meta {
		align-items: flex-start;
		text-align: left;
	}

	.site-footer__letter {
		margin: 0 1.1vw;
	}

	.site-footer__letter-face {
		font-size: clamp(44px, 21vw, 108px);
		line-height: 1.15;
	}
}