:root {
	--antologa-primary: #078282;
	--antologa-secondary: #004F71;
	--antologa-tertiary: #C45A32;
	--antologa-contrast: #E1A951;
	--antologa-white: #F8F8F8;
	--antologa-light-gray: #E8E8E8;
	--antologa-gray: #9E9E9E;
	--antologa-dark: #282828;
	--antologa-valid: #26b050;
	--antologa-error: #e50000;

	/* Extended neutral & semantic palette (added June 2026 per CSS Standards) */
	/* Surfaces — light backgrounds */
	--antologa-pure-white:    #ffffff; /* true white, distinct from --antologa-white (#F8F8F8) */
	--antologa-surface:       #f5f5f5;
	--antologa-surface-alt:   #f0f0f0;
	--antologa-surface-cool:  #f8fafc;
	--antologa-surface-cool2: #f3f4f6;
	--antologa-surface-cool3: #eef2f6;
	/* Borders / hairlines */
	--antologa-border:        #e5e7eb;
	--antologa-border-warm:   #e0dfd9;
	--antologa-border-2:      #e0e0e0;
	--antologa-border-warm2:  #e6e6e3;
	--antologa-border-cool:   #cbd5e1;
	/* Muted text / icons */
	--antologa-gray-mid:      #505050;
	--antologa-slate-400:     #94a3b8;
	--antologa-warmgray-500:  #9a9a95;
	--antologa-slate-500:     #6b7280;
	--antologa-slate-400b:    #9ca3af;
	--antologa-warmgray-600:  #8a8a85;
	--antologa-warmgray-700:  #7a7a75;
	/* Near-black text */
	--antologa-near-black:    #1a1a1a;
	--antologa-slate-900:     #111827;
	/* Brand-adjacent shades */
	--antologa-primary-dark:  #056666;
	--antologa-contrast-dark: #b07d10;
	/* Semantics */
	--antologa-error-soft:    #ef5350;
	--antologa-danger:        #c62828;
	--antologa-success:       #2e7d32;
	--antologa-warning:       #f57f17;
	/* Status tint backgrounds */
	--antologa-danger-bg:     #ffebee;
	--antologa-success-bg:    #e8f5e9;
	--antologa-info-bg:       #e3f2fd;
	--antologa-info-bg2:      #e0f7fa;
	--antologa-warning-bg:    #fdf4e3;
	--antologa-warning-bg2:   #fff9c4;

	/* Extended neutrals — grays (luminance scale) */
	--antologa-black:         #000000;
	--antologa-gray-800:      #444444;
	--antologa-gray-700:      #555555;
	--antologa-gray-650:      #616161;
	--antologa-gray-600:      #666666;
	--antologa-gray-550:      #717171;
	--antologa-gray-400:      #aaaaaa;
	--antologa-gray-350:      #bdbdbd;
	--antologa-warmgray-400:  #b0b0aa;
	--antologa-slate-300:     #d1d5db;
	--antologa-slate-700:     #374151;
	/* Extended neutrals — off-white surfaces */
	--antologa-surface-50:    #fafafa;
	--antologa-surface-cool0: #f9fafb;
	--antologa-surface-warm:  #f4f5f3;
	--antologa-surface-warm2: #f5f5f3;
	--antologa-surface-warm3: #f0ede8;
	--antologa-surface-warm4: #eeede9;
	--antologa-surface-cool4: #eef1f4;
	--antologa-border-3:      #ebebeb;
	/* Teal tints */
	--antologa-primary-tint:    #d5f0f0;
	--antologa-primary-tint-50: #eef6f6;
	/* Accent colors */
	--antologa-blue-600:      #005a7a;
	--antologa-blue-650:      #006080;
	--antologa-blue-500:      #1565c0;
	--antologa-blue-400:      #3a7abf;
	--antologa-teal-700:      #00796b;
	--antologa-teal-800:      #056b6b;
	--antologa-gold-700:      #9a6c18;
	--antologa-navy-900:      #0b2239;
	--antologa-purple-500:    #7b5ea7;

	/* Map — Wonder type colors (must match WONDER_COLORS in antologa-maps.js and HexColors in WonderTypeExtensions.cs) */
	--map-waterfall:      #0ABCBC;
	--map-river:          #0891B2;
	--map-lake:           #078282;
	--map-trail:          #2E9E58;
	--map-beach:          #D4941A;
	--map-forest:         #1B6B40;
	--map-cave:           #1A5C5C;
	--map-volcano:        #CC2828;
	--map-lagoon:         #00789A;
	--map-canyon:         #C45A32;
	--map-island:         #C49A28;
	--map-marine:         #004F71;
	--map-valley:         #5A7C2A;
	--map-hotsprings:     #B84A20;
	--map-nationalpark:   #187B38;
	--map-reef:           #005F8A;
	--map-wetlands:       #2D9A7A;
	--map-historicalsite: #9B6B2A;
	--map-viewpoint:      #002D45;
	--map-ruins:          #8B4A18;
	--map-museum:         #7A3C1A;
	--map-attraction:     #C4204C;

	/* Map — Listing type colors */
	--map-listing-accommodation: #078282;
	--map-listing-tour:          #C45A32;
	--map-listing-guide:         #004F71;
	--map-listing-restaurant:    #CC3333;
	--map-listing-carrental:     #003A5C;
	--map-listing-transportation:#0891B2;
	--map-listing-spawellness:   #2D7A6A;
	--map-listing-shop:          #C49A28;
	--map-listing-travelpackage: #E1A951;
	--map-listing-event:         #2E9E58;

	/* Map — Difficulty colors */
	--map-diff-easy:     #2E9E58;
	--map-diff-moderate: #D4941A;
	--map-diff-hard:     #C45A32;
	--map-diff-expert:   #CC2828;

	/* Map — Nearby category colors */
	--map-nearby-emergency: #CC2828;
	--map-nearby-tourism:   #078282;
	--map-nearby-transit:   #004F71;

	/* Animation Timing Tiers (per animations-guide.md) */
	--timing-instant: 0.1s;
	--timing-micro: 0.2s;
	--timing-quick: 0.3s;
	--timing-standard: 0.5s;
	--timing-slow: 0.8s;
	--timing-parallax: 20s;

	/* Animation Easing Functions (per animations-guide.md) */
	--ease-standard: ease-in-out;
	--ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	--text-primary: var(--antologa-dark);
	--text-secondary: var(--antologa-gray);
	--text-dark: var(--antologa-dark);
	--text-body: var(--antologa-dark);
}

/* Skip-to-main-content link — visually hidden, revealed on keyboard focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--antologa-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s;
}
.skip-link:focus {
    top: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY: Respect motion preferences
   Disable animations for users with vestibular disorders, migraines, or
   motion sensitivity. This reduces animation duration to near-instant
   while preserving layout and functionality.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL RESPONSIVE SCALING
   The app is ~87% rem-based, so the root font-size is a single lever that
   proportionally scales (almost) the whole UI — and MudBlazor/Radzen too.
   Fluid from ~14px on phones up to 16px on desktop. The `px + vw` mix (not
   pure vw) keeps browser zoom / accessibility working correctly.
   ────────────────────────────────────────────────────────────────────────── */
html {
	font-size: clamp(14px, 0.3vw + 13px, 16px);
}

/* ── Tables on small screens ──────────────────────────────────────────────────
   Let wide tables (esp. the admin dashboard grids) scroll horizontally instead of
   squishing/clipping on phones and tablets. Global so no per-table markup is needed;
   overflow-x:auto only shows a scrollbar when content actually overflows.
   ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
	.mud-table-container {
		overflow-x: auto;
	}
}

/* ── Session-timeout warning overlay ──────────────────────────────────────── */
.session-timeout-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--antologa-dark) 55%, transparent);
	backdrop-filter: blur(2px);
}

.session-timeout-card {
	background: var(--antologa-white);
	border-radius: 1rem;
	padding: 2rem;
	width: min(90vw, 22rem);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.session-timeout-icon {
	font-size: 2.5rem !important;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--antologa-primary);
	margin-bottom: 0.75rem;
}

@font-face {
    font-family: Nunito;
    src: url('../fonts/Nunito-VariableFont.ttf') format('truetype');
}

@font-face {
    font-family: Inter;
    src: url('../fonts/Inter-VariableFont.ttf') format('truetype');
}

*{
    font-family:Nunito;
}

.no-underline-autocomplete {
	background: none !important;
}

	/* Target the specific pseudo-elements for the text variant line */
	.no-underline-autocomplete::before,
	.no-underline-autocomplete::after {
		background: none !important;
	}

	/* Ensure the hover effect line is also gone */
	.no-underline-autocomplete:hover::before {
		background: none !important;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: Inter;
}

p {
	font-family: Nunito;
}

.text-center{
	text-align: center !important;
}


	.dvh-100 {
		min-height: 100dvh;
		height: 100%;
		width: 100%;
	}

	.h-100-p {
		height: 100% !important;
	}

	.w-100-p {
		width: 100% !important;
	}

	.hw-100 {
		height: 100% !important;
		width: 100% !important;
	}


	.background-landscape02-img {
		background-image: url(../img/pictures/landscape02.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.bg-transparent {
		background-color: transparent !important;
	}

	.bg-antologa-primary {
		background-color: var(--antologa-primary) !important;
	}

	.bg-antologa-secondary {
		background-color: var(--antologa-secondary) !important;
	}

	.bg-antologa-tertiary {
		background-color: var(--antologa-tertiary) !important;
	}

	.bg-antologa-contrast {
		background-color: var(--antologa-contrast) !important;
	}

	.bg-antologa-white {
		background-color: var(--antologa-white) !important;
	}

	.bg-antologa-light-gray {
		background-color: var(--antologa-light-gray) !important;
	}

	.bg-antologa-gray {
		background-color: var(--antologa-gray) !important;
	}

	.bg-antologa-dark {
		background-color: var(--antologa-dark) !important;
	}


	.text-antologa-primary {
		color: var(--antologa-primary) !important;
	}

	.text-antologa-secondary {
		color: var(--antologa-secondary) !important;
	}

	.text-antologa-tertiary {
		color: var(--antologa-tertiary) !important;
	}

	.text-antologa-contrast {
		color: var(--antologa-contrast) !important;
	}

	.text-antologa-white {
		color: var(--antologa-white) !important;
	}

	.text-antologa-light-gray {
		color: var(--antologa-light-gray);
	}

	.text-antologa-gray {
		color: var(--antologa-gray) !important;
	}

	.text-antologa-dark {
		color: var(--antologa-dark) !important;
	}

	.valid.modified:not([type=checkbox]) {
		outline: 1px solid var(--antologa-valid);
	}

	.invalid {
		outline: 1px solid var(--antologa-error);
	}

	.validation-message {
		color: var(--antologa-error);
	}

	.blazor-error-boundary {
		background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
		padding: 1rem 1rem 1rem 3.7rem;
		color: white;
	}

		.blazor-error-boundary::after {
			content: "An error has occurred."
		}

@keyframes subtle-zoom {
	0%, 100% {
		transform: scale(1.05);
	}

	50% {
		transform: scale(1.08);
	}
}

/* Grid gap override for Antologa standard */
.antologa-grid {
	gap: 2rem !important; /* 32px */
}

/* Subtle zoom animation helper */
.subtle-zoom-effect {
	animation: subtle-zoom 8s ease-in-out infinite;
}
/* ── Circuit-connecting indicator ─────────────────────────────────────────────
   Slim indeterminate bar pinned to the top of the viewport, visible from first
   paint until the Blazor circuit is interactive. MainLayout adds .app-ready to
   <body> (via antologaReady in site.js) on its first interactive render. */
.app-connecting {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	background: transparent;
	overflow: hidden;
	pointer-events: none;
}

	.app-connecting::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 40%;
		background: linear-gradient(90deg, var(--antologa-primary, #078282), var(--antologa-secondary, #004F71));
		border-radius: 999px;
		animation: app-connecting-slide 1.1s ease-in-out infinite;
	}

body.app-ready .app-connecting {
	display: none;
}

@keyframes app-connecting-slide {
	0% {
		left: -40%;
	}

	100% {
		left: 100%;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
   STANDARD ANIMATIONS (Consolidated, per animations-guide.md)
   These keyframes are the standard animations used throughout the app.
   Use timing/easing CSS variables for consistency.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(1.53rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(16px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes popIn {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes parallaxZoom {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.08);
	}
}