/* =====================================================================
   FINN-CLASSIC · CHROME — Sticky navbar + Footer
   ===================================================================== */

/* =====================================================================
   NAVBAR — solid navy at every scroll position.
   There is deliberately NO transparent-over-artwork state: over the
   bright sky in the hero art, translucent nav text measured 2.18:1.
   At 94% opacity the worst-case composite is #1A2944 → cream text at
   12.89:1. The blur is the ONLY backdrop-filter on the site, and at this
   opacity it is a solid bar with a soft edge, not glassmorphism.

   The logo PNG is NOT in the nav: at 40px the wings and the two Porings
   turn to mud. The nav uses a text lockup plus one 28px Angeling sprite.
   ===================================================================== */
.site-nav{
	position:fixed; top:0; left:0; right:0; z-index:100;
	height:var(--nav-h);
	background:rgba(11,27,56,.94);
	-webkit-backdrop-filter:blur(10px);
	        backdrop-filter:blur(10px);
	border-bottom:1px solid var(--color-hairline);
}
.site-nav__inner{
	display:flex; align-items:center; gap:var(--space-6);
	height:100%;
}

.brand{
	display:flex; align-items:center; gap:10px;
	margin-right:auto;
	text-decoration:none;
	min-height:44px;
}
.brand__mark{ image-rendering:pixelated; flex:none; }
.brand__name{
	display:block;
	font-family:var(--font-display); font-weight:900;
	font-size:1.0625rem; letter-spacing:.10em;
	color:var(--color-gold);                    /* 9.07:1 on navy */
}
.brand__sub{
	display:block;
	font-size:var(--t-small); letter-spacing:.20em;
	color:var(--color-text-on-dark-dim);        /* 8.56:1 */
	line-height:1.3;
}

.nav{ display:flex; align-items:center; gap:var(--space-5); }
.nav__list{ display:flex; gap:var(--space-5); list-style:none; margin:0; padding:0; }
.nav__link{
	position:relative; display:flex; align-items:center;
	min-height:44px; padding:10px 2px;
	color:var(--color-text-on-dark);            /* 14.30:1 */
	font-size:1rem; font-weight:500;
	text-decoration:none;
	transition:color var(--dur-fast) var(--ease-press);
}

/* THE ONE SHARED HOVER PRIMITIVE — a gold wipe from the left.
   Reused verbatim on nav links, quick-access items, news rows and footer
   links, so the whole page has a single interaction vocabulary. */
.nav__link::after,
.qa__item::after,
.news__row::after,
.foot__link::after{
	content:"";
	position:absolute; left:0; right:0; bottom:0; height:2px;
	background:var(--color-gold);
	transform:scaleX(0); transform-origin:left center;
	transition:transform var(--dur-mid) var(--ease-press);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link:hover,
.nav__link.is-active{ color:var(--color-gold); }   /* 9.07:1 */

/* ---------- Top-up dropdown (two independent payment gateways) --------- */
.nav__dd{ position:relative; }
.nav__dd-toggle{
	display:flex; align-items:center; gap:6px;
	background:transparent; border:0;
	font-family:var(--font-body); font-size:1rem; font-weight:500;
	cursor:pointer;
}
.nav__dd-caret{
	font-size:11px;
	transition:transform var(--dur-fast) var(--ease-press);
}
.nav__dd-toggle[aria-expanded="true"] .nav__dd-caret{ transform:rotate(180deg); }

.nav__dd-menu{
	position:absolute; top:calc(100% + 10px); left:50%;
	transform:translateX(-50%) translateY(-6px);
	min-width:280px;
	display:grid;
	padding:var(--space-2);
	background:var(--color-navy-800);
	border:1px solid var(--color-hairline);
	border-radius:var(--radius-medium);
	box-shadow:var(--shadow-card);
	opacity:0; visibility:hidden;                 /* keeps it out of the tab order */
	transition:opacity var(--dur-fast) var(--ease-press),
	           transform var(--dur-fast) var(--ease-press),
	           visibility var(--dur-fast);
}
.nav__dd.is-open .nav__dd-menu{
	opacity:1; visibility:visible;
	transform:translateX(-50%) translateY(0);
}
.nav__dd-item{
	display:flex; align-items:center; gap:var(--space-3);
	padding:var(--space-3);
	min-height:56px;
	border-radius:var(--radius-small);
	color:var(--color-text-on-dark);              /* 12.76:1 on navy-800 */
	text-decoration:none;
	transition:background var(--dur-fast) var(--ease-press);
}
.nav__dd-item:hover{ background:var(--color-navy-900); color:var(--color-gold); }
.nav__dd-item i{ color:var(--color-gold); width:20px; text-align:center; }
.nav__dd-text{ display:grid; }
.nav__dd-text strong{ font-size:var(--t-small); font-weight:600; }
.nav__dd-text small{
	font-size:var(--t-small);
	color:var(--color-text-on-dark-dim);          /* 7.64:1 */
}

/* Language switch */
.lang{ display:flex; gap:6px; }
.lang__opt{
	min-height:44px; min-width:44px;
	background:transparent;
	border:1px solid var(--color-hairline);
	border-radius:var(--radius-small);
	color:var(--color-text-on-dark-dim);        /* 8.56:1 */
	font-family:var(--font-body);
	font-weight:600; font-size:var(--t-small);
	cursor:pointer;
	transition:color var(--dur-fast) var(--ease-press),
	           border-color var(--dur-fast) var(--ease-press);
}
.lang__opt:hover{ color:var(--color-gold); border-color:var(--color-gold); }
.lang__opt.active,
.lang__opt[aria-pressed="true"]{
	background:var(--color-navy-800);
	color:var(--color-gold);
	border-color:var(--color-gold);
}

/* Hamburger */
.nav__toggle{
	display:none;
	place-items:center; gap:5px;
	width:48px; height:48px;
	background:transparent; border:1px solid var(--color-hairline);
	border-radius:var(--radius-small);
	cursor:pointer;
}
.nav__toggle span{
	display:block; width:20px; height:2px;
	background:var(--color-text-on-dark);
	transition:transform var(--dur-fast) var(--ease-press),
	           opacity   var(--dur-fast) var(--ease-press);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* The nav carries 7 links + a CTA + the language switch. Below ~1200px
   those cannot sit on one line without crowding, so the hamburger takes
   over here rather than at the usual tablet breakpoint. */
@media (max-width:1199px){
	/* Redefining the token keeps everything that offsets against the nav
	   (hero padding, sub-page padding-top) in sync with the shorter bar. */
	:root{ --nav-h:var(--nav-h-mobile); }
	.site-nav{ height:var(--nav-h-mobile); }
	.nav{
		position:fixed; inset:var(--nav-h-mobile) 0 auto 0;
		flex-direction:column; align-items:stretch; gap:0;
		background:var(--color-navy-900);
		padding:var(--space-4) var(--gutter) var(--space-6);
		border-bottom:2px solid var(--color-gold);
		transform:translateY(-120%);
		/* visibility (not just transform) is what removes the collapsed panel from
		   the tab order. With transform alone, a keyboard user tabbing off the
		   hamburger walks straight into an off-screen menu they cannot see. */
		visibility:hidden;
		transition:transform var(--dur-mid) var(--ease-out),
		           visibility var(--dur-mid);
		max-height:calc(100svh - var(--nav-h-mobile));
		overflow-y:auto;
	}
	.nav.is-open{ transform:translateY(0); visibility:visible; }
	.nav__list{ flex-direction:column; gap:0; }
	.nav__link{ padding:16px 0; min-height:48px; }   /* 48px touch targets */
	.nav .btn{ margin-top:var(--space-4); width:100%; }
	.nav .lang{ margin-top:var(--space-4); }
	.nav__toggle{ display:grid; }

	/* In the mobile panel the dropdown is a plain inline block, not a popover. */
	.nav__dd-menu{
		position:static; transform:none;
		min-width:0; opacity:1; visibility:visible;
		background:transparent; border:0; box-shadow:none;
		padding:0 0 0 var(--space-4);
		display:none;
	}
	.nav__dd.is-open .nav__dd-menu{ display:grid; transform:none; }
	.nav__dd-toggle{ width:100%; justify-content:space-between; padding:16px 0; min-height:48px; }
}
@media (min-width:1200px){
	.nav__toggle{ display:none; }
	.nav__list{ gap:var(--space-4); }
}

/* =====================================================================
   FOOTER — a crenellated navy wall, not a black basement.
   Five moves: battlement edge, gold lintel, the final CTA pair, the
   ice-blue crest on navy (LAW 2), and a parchment strip at the very
   bottom — the exposed page-edge of the book.
   ===================================================================== */
.site-foot{
	position:relative; overflow:hidden;
	background:linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
	color:var(--color-text-on-dark);
	padding-top:56px;
}

/* Castle battlement: the light section above interlocks with the navy wall. */
.site-foot__crenel{
	position:absolute; top:0; left:0; right:0; height:22px; z-index:2;
	background:var(--color-bg-secondary);
	clip-path:polygon(
		0 0, 4% 0, 4% 100%, 8% 100%, 8% 0, 12% 0, 12% 100%, 16% 100%, 16% 0,
		20% 0, 20% 100%, 24% 100%, 24% 0, 28% 0, 28% 100%, 32% 100%, 32% 0,
		36% 0, 36% 100%, 40% 100%, 40% 0, 44% 0, 44% 100%, 48% 100%, 48% 0,
		52% 0, 52% 100%, 56% 100%, 56% 0, 60% 0, 60% 100%, 64% 100%, 64% 0,
		68% 0, 68% 100%, 72% 100%, 72% 0, 76% 0, 76% 100%, 80% 100%, 80% 0,
		84% 0, 84% 100%, 88% 100%, 88% 0, 92% 0, 92% 100%, 96% 100%, 96% 0, 100% 0
	);
}
/* The gold lintel — third and final appearance of this one ornament. */
.site-foot::before{
	content:"";
	position:absolute; top:22px; left:0; right:0; height:2px; z-index:2;
	background:var(--color-gold);
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
	        mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
}
.site-foot__art{
	position:absolute; inset:0;
	background:url('../images/band-prontera-1280.webp') center/cover no-repeat;
	opacity:.10;
	mix-blend-mode:luminosity;   /* atmosphere, not decoration */
}
.site-foot > *:not(.site-foot__art):not(.site-foot__crenel){ position:relative; z-index:1; }

/* 1 · Final call to adventure */
.foot-cta{ padding:var(--space-9) 0 var(--space-8); text-align:center; }
.foot-cta__inner{ position:relative; }
.foot-cta__eyebrow{ color:var(--color-gold); margin:0 0 var(--space-3); }   /* 9.07:1 */
.foot-cta__h{
	font-size:var(--t-section);
	color:var(--color-text-on-dark);                                        /* 14.30:1 */
	margin:0 auto var(--space-6);
	max-width:20ch;
}
.foot-cta .hero__cta{ display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; }
.foot-poring{
	position:absolute; bottom:-8px;
	image-rendering:pixelated;
	opacity:.9;
	pointer-events:none;
}
.foot-poring--l{ left:4%; }
.foot-poring--r{ right:4%; transform:scaleX(-1); }
@media (max-width:900px){ .foot-poring{ display:none; } }

/* 2 · Links */
.foot-grid{
	display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
	gap:var(--space-7);
	padding-top:var(--space-8);
	padding-bottom:var(--space-8);
	border-top:1px solid var(--color-hairline);
}
.foot-crest{ width:140px; height:auto; margin-bottom:var(--space-4); }  /* LAW 2: ice-blue on navy */
.foot-desc{
	color:var(--color-text-on-dark-dim);        /* 8.56:1 */
	font-size:var(--t-small);
	margin:0 0 var(--space-4);
	max-width:34ch;
}
.foot-h{
	font-family:var(--font-body);
	font-size:var(--t-small); font-weight:700;
	text-transform:uppercase; letter-spacing:.10em;
	color:var(--color-gold);                    /* 9.07:1 */
	margin:0 0 var(--space-4);
}
.foot-h:lang(th){ text-transform:none; letter-spacing:0; }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot__link{
	position:relative; display:inline-flex; align-items:center;
	min-height:44px; padding:4px 0;
	color:var(--color-text-on-dark-dim);        /* 7.64:1 */
	text-decoration:none;
	transition:color var(--dur-fast) var(--ease-press);
}
.foot__link:hover{ color:var(--color-gold); }
.foot__link:hover::after,
.foot__link:focus-visible::after{ transform:scaleX(1); }

.foot-social{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
.foot-social a{
	display:grid; place-items:center;
	width:44px; height:44px;
	border:1px solid var(--color-hairline);
	border-radius:var(--radius-small);
	color:var(--color-text-on-dark-dim);
	transition:color var(--dur-fast) var(--ease-press),
	           border-color var(--dur-fast) var(--ease-press);
}
.foot-social a:hover{ color:var(--color-gold); border-color:var(--color-gold); }

/* 3 · The exposed page edge */
.foot-edge{ background:var(--color-bg-secondary); }
.foot-edge__inner{
	display:flex; flex-wrap:wrap; gap:var(--space-3);
	align-items:center; justify-content:space-between;
	padding-top:var(--space-4); padding-bottom:var(--space-4);
}
.foot-edge small{
	font-size:var(--t-small);
	color:var(--color-text-primary);            /* 14.36:1 on parchment */
}
.foot-edge a{ color:var(--color-gold-ink); }    /* 4.95:1 on parchment — LAW 1 */

@media (max-width:1023px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){  .foot-grid{ grid-template-columns:1fr; } }

/* Back to top */
.to-top{
	position:fixed; right:20px; bottom:20px; z-index:90;
	display:none; place-items:center;
	width:48px; height:48px;
	background:var(--color-navy-900);
	color:var(--color-gold);
	border:1px solid var(--color-gold);
	border-radius:var(--radius-small);
	box-shadow:var(--shadow-card);
	cursor:pointer;
	transition:transform var(--dur-fast) var(--ease-press);
}
.to-top.is-visible{ display:grid; }
.to-top:hover{ transform:translateY(-2px); }