/*
	Light theme styles for Fortunica NL landing
	- Semantic layout, responsive grid, accessibility focus styles
	- Mobile adaptations including orientation lock overlay and stacked tables
*/

:root {
	/* Color system */
	--color-bg: #ffffff;
	--color-surface: #f8fafc;
	--color-text: #0f172a;
	--color-muted: #475569;
	--color-primary: #0ea5e9; /* sky-500 */
	--color-primary-contrast: #ffffff;
	--color-secondary: #10b981; /* emerald-500 */
	--color-tertiary: #64748b; /* slate-500 */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
	--shadow-md: 0 4px 10px rgba(2,6,23,.08);
	--shadow-lg: 0 10px 24px rgba(2,6,23,.12);
	--radius: 12px;
	--container: 1200px;
}

/* Global reset-ish, preserve accessibility */
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
}

/* Skip link for keyboard users */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: var(--color-primary);
	color: var(--color-primary-contrast);
	border-radius: 6px;
	z-index: 1000;
}

/* Layout containers */
.container {
	width: min(100% - 32px, var(--container));
	margin-inline: auto;
}
.section { padding: 40px 0; }
@media (min-width: 768px) { .section { padding: 64px 0; } }

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid #e5e7eb;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
}
/* Header logo sizing fallback */
.brand img { display: block; height: 52px; }

/* Navigation */
.nav-list { display: flex; gap: 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav-link { color: var(--color-text); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.nav-link:focus, .nav-link:hover { background: var(--color-surface); }

/* Hero */
.hero-inner { display: grid; gap: 20px; align-items: center; }
.hero-media { position: relative; }
.hero-image { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); display: block; }
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	/* Gradient that improves foreground contrast without killing the image */
	background: linear-gradient(180deg, rgba(2,6,23,.20) 10%, rgba(2,6,23,.40) 60%, rgba(2,6,23,.25) 100%);
	pointer-events: none;
}
.hero-overlay-cta {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px;
}
/* CTA panel layout: center greeting on banner */
.cta-panel { background: rgba(255,255,255,.12); backdrop-filter: blur(6px) saturate(140%); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 12px 28px rgba(2,6,23,.28); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.hero-content h1 { line-height: 1.2; margin: 0 0 10px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .08s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(14,165,233,.35); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: 0 8px 20px rgba(14,165,233,.35); }
.btn-primary:hover { background: #0284c7; box-shadow: 0 10px 24px rgba(14,165,233,.45); }
.btn-secondary { background: var(--color-secondary); color: var(--color-primary-contrast); box-shadow: 0 8px 20px rgba(16,185,129,.28); }
.btn-secondary:hover { background: #059669; box-shadow: 0 10px 24px rgba(16,185,129,.34); }
.btn-tertiary { background: var(--color-surface); color: var(--color-text); border-color: #e5e7eb; }
.btn-tertiary:hover { background: #eef2f7; }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }

/* Lists */
.list { padding-left: 18px; }
.list.checklist li { list-style: '[ ] '; }
.steps { padding-left: 18px; }

/* Tables: base style */
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.table th, .table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e7eb; }
.table thead th { background: var(--color-surface); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.table-wrapper { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: var(--radius); background: #fff; }

/* Responsive tables: stack on small screens */
@media (max-width: 720px) {
	.table[data-responsive="stack"] thead { display: none; }
	.table[data-responsive="stack"] tbody, 
	.table[data-responsive="stack"] tr, 
	.table[data-responsive="stack"] td { display: block; width: 100%; }
	.table[data-responsive="stack"] tr { border-bottom: 1px solid #e5e7eb; }
	.table[data-responsive="stack"] td { border: 0; border-bottom: 1px solid #f1f5f9; padding: 10px 14px; }
	.table[data-responsive="stack"] td::before {
		content: attr(data-th) ": ";
		display: inline-block;
		min-width: 44%;
		color: var(--color-muted);
		font-weight: 600;
	}
}

/* Slots grid */
.slots .container { padding-top: 8px; }
.slots-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 14px;
}
@media (min-width: 640px) { .slots-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 920px) { .slots-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.slot-card { margin: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform .2s ease, box-shadow .2s ease; }
.slot-card a { display: block; text-decoration: none; color: var(--color-text); }
/* Reduce slot image cropping on all screens - updated to cover without black edges */
.slot-card img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; background: none; }
.slot-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(2,6,23,.18); }

/* Payments scroller */
.payments { margin-top: 18px; overflow: hidden; }
.payments-track { display: flex; gap: 28px; align-items: center; animation: marquee 22s linear infinite; padding: 8px 2px; }
.payments img { opacity: .9; filter: grayscale(.1); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Footer */
.site-footer { border-top: 1px solid #e5e7eb; background: #fff; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr auto auto; align-items: center; } }
.footer-app__title { margin: 0; font-weight: 700; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }
.badge { display: inline-flex; }
.badge svg { display: block; border-radius: 10px; box-shadow: var(--shadow-sm); }

/* Orientation lock overlay (shown when landscape on small screens) */
.orientation-lock { position: fixed; inset: 0; background: rgba(15,23,42,.82); color: #fff; display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px; text-align: center; }
.orientation-lock__content { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 18px 22px; }

@media (max-width: 767px) and (orientation: landscape) {
	.orientation-lock { display: flex; }
	body.no-scroll { overflow: hidden; height: 100vh; }
}

/* Accessibility: focus styles */
a, button { outline-color: rgba(14,165,233,.45); }

/* Utility */
.hero .container { padding-top: 12px; }

/* Small typography tweaks */
h1, h2, h3, h4 { color: var(--color-text); margin: 0 0 10px; }
p { margin: 0 0 10px; }

/* Fix mobile screen: prevent body horizontal scroll and lock viewport width */
html, body { overflow-x: hidden; }
@media (max-width: 767px) {
	body { position: relative; width: 100vw; }
}

/* Larger single store badge image in footer */
.badges img { width: 280px; height: auto; }
@media (min-width: 768px) { .badges img { width: 320px; } }

/* CTA heading/subheading in hero */
.cta-heading { margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(2,6,23,.5); font-size: 1.5rem; letter-spacing: .2px; }
.cta-subheading { margin: -2px 0 6px; color: #e6f6ff; text-shadow: 0 1px 4px rgba(2,6,23,.45); font-weight: 600; }
@media (min-width: 768px) { .cta-heading { font-size: 1.9rem; } .cta-subheading { font-size: 1.05rem; } }

/* Header color override */
.site-header { background: #131a4e; backdrop-filter: none; border-bottom: 0; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.site-header .nav-link { color: #eaf2ff; }
.site-header .nav-link:focus, .site-header .nav-link:hover { background: rgba(255,255,255,.12); }