/* El San Jose - Redesigned CSS | Vibrant Mexican Theme */

/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}mark{background-color:transparent;color:inherit}input::-moz-focus-inner{border:0;padding:0}input[type="text"],input[type="email"],select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none}

/* Base */
*,*:before,*:after{box-sizing:border-box}

:root {
	--viewport-height: 100vh;
	--background-height: 100vh;
	--color-primary: #C41E3A;
	--color-primary-dark: #9B1830;
	--color-secondary: #1B6B3A;
	--color-secondary-dark: #145A2E;
	--color-accent: #F5A623;
	--color-accent-light: #FFD54F;
	--color-dark: #1A1A2E;
	--color-text: #2D2D3A;
	--color-text-light: #6B6B7B;
	--color-bg-warm: #FFF8F0;
	--color-bg-white: #FFFFFF;
	--color-border: rgba(0,0,0,0.1);
	--color-highlight: #E8D44D;
	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, sans-serif;
	--transition-fast: 0.25s ease;
	--transition-medium: 0.4s ease;
	--transition-slow: 0.8s ease-in-out;
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
	--shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg-warm);
	min-height: var(--viewport-height);
	min-width: 320px;
	overflow-x: hidden;
	word-wrap: break-word;
}

/* Loading State */
body:after {
	background-color: var(--color-bg-warm);
	content: '';
	display: block;
	pointer-events: none;
	position: fixed;
	z-index: 10000;
	height: 100%;
	left: 0;
	opacity: 0;
	top: 0;
	transition: opacity 0.6s ease, visibility 0.6s;
	visibility: hidden;
	width: 100%;
}
body.is-loading:after { opacity: 1; visibility: visible; }
body.is-loading { pointer-events: none; }
body.is-loading #hero,
body.is-loading .section-welcome,
body.is-loading .section-hours,
body.is-loading .section-menu,
body.is-loading .section-gallery,
body.is-loading .section-footer { opacity: 0; transform: translateY(0.5rem); }
body.is-instant:after { display: none !important; transition: none !important; }

/* Typography */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-dark); }
h2 { font-size: 2.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
p { line-height: 1.7; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }
strong { font-weight: 600; }
em { font-style: italic; }

/* =================================
   NAVIGATION
   ================================= */
#navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(26, 26, 46, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

#navbar.scrolled {
	box-shadow: var(--shadow-md);
}

.nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}

.nav-logo {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-bg-white) !important;
	text-decoration: none !important;
}

.nav-logo:hover { color: var(--color-accent) !important; }

.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	flex-direction: column;
	gap: 5px;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-bg-white);
	transition: var(--transition-fast);
	border-radius: 2px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
}

.nav-links li a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-links li a:hover,
.nav-links li a.active {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.nav-cta {
	background: var(--color-primary) !important;
	color: #fff !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: 2rem !important;
	font-weight: 600 !important;
}

.nav-cta:hover {
	background: var(--color-primary-dark) !important;
}

/* =================================
   HERO SECTION
   ================================= */
.section-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	background-color: #000;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, rgba(26,26,46,0.6) 0%, rgba(26,26,46,0.3) 40%, rgba(196,30,58,0.4) 100%);
}

.hero-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.8%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.06%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20filter%3D%22url(%23n)%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E');
	background-size: 512px;
	background-repeat: repeat;
	opacity: 0.5;
}

.hero-content {
	position: relative;
	z-index: 3;
	padding: 2rem;
	max-width: 700px;
}

.hero-badge {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 2rem;
	border: 4px solid var(--color-accent);
	box-shadow: 0 0 30px rgba(245, 166, 35, 0.3), var(--shadow-lg);
}

.hero-badge img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section-hero h1 {
	font-family: var(--font-heading);
	font-size: 5rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 0.25rem;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	color: var(--color-accent);
	font-weight: 400;
	font-style: italic;
	margin-bottom: 1.5rem;
}

.hero-tagline {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2.5rem;
	letter-spacing: 0.02em;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Slideshow Background (for hero) */
.section-hero > .slideshow-background {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background-color: #000;
}

.slideshow-background > div {
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	opacity: 0;
	z-index: -2;
}
.slideshow-background > .visible { opacity: 1; }
.slideshow-background > .top { z-index: -1; }
.slideshow-background.crossfade > div { transition: opacity 2s ease-in-out; visibility: hidden; }
.slideshow-background.crossfade > .visible { visibility: visible; }
.section-hero > .slideshow-background > div { transition-duration: 3s; }

/* =================================
   BUTTONS
   ================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	border-radius: 3rem;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
	white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-primary {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-secondary {
	background: var(--color-secondary);
	color: #fff;
	border-color: var(--color-secondary);
}
.btn-secondary:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: #fff; }

.btn-outline {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary); color: #fff; }

/* =================================
   ACCENT STRIPE
   ================================= */
.accent-stripe {
	height: 6px;
	background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-secondary) 33.33%, var(--color-bg-white) 33.33%, var(--color-bg-white) 36%, var(--color-primary) 36%, var(--color-primary) 64%, var(--color-bg-white) 64%, var(--color-bg-white) 66.66%, var(--color-secondary) 66.66%, var(--color-secondary) 100%);
}

/* =================================
   SECTIONS SHARED
   ================================= */
.section-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 5rem 2rem;
}

section h2 {
	text-align: center;
	position: relative;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

section h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--color-accent);
	border-radius: 2px;
}

.section-subtitle {
	text-align: center;
	color: var(--color-text-light);
	font-size: 1.125rem;
	margin-bottom: 3rem;
}

/* =================================
   WELCOME SECTION
   ================================= */
.section-welcome {
	background: var(--color-bg-white);
	transition: opacity 1s ease, transform 1s ease;
}

.welcome-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.welcome-text h2 {
	text-align: left;
	font-size: 2.25rem;
}

.welcome-text h2::after { left: 0; transform: none; }

.welcome-text p {
	color: var(--color-text-light);
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
}

.welcome-text .btn { margin-top: 0.5rem; }

.welcome-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	position: relative;
}

.welcome-image::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 3px solid var(--color-accent);
	pointer-events: none;
}

.welcome-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =================================
   HOURS & LOCATION SECTION
   ================================= */
.section-hours {
	background: var(--color-bg-warm);
	transition: opacity 1s ease, transform 1s ease;
}

.hours-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: stretch;
}

.hours-card {
	background: var(--color-bg-white);
	border-radius: var(--radius-md);
	padding: 2.5rem;
	box-shadow: var(--shadow-sm);
	border-top: 4px solid var(--color-primary);
}

.hours-card h3 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	text-align: center;
	margin-bottom: 1.5rem;
}

.hours-table {
	width: 100%;
	margin-bottom: 2rem;
}

.hours-table td {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.95rem;
}

.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:first-child { font-weight: 500; color: var(--color-dark); }
.hours-table td:last-child { text-align: right; color: var(--color-text-light); }

.hours-address {
	text-align: center;
	padding-top: 1rem;
	border-top: 2px solid var(--color-accent);
}

.hours-address p {
	margin-bottom: 1rem;
	font-size: 1rem;
	color: var(--color-text);
}

.hours-address .btn {
	font-size: 0.95rem;
	padding: 0.75rem 1.75rem;
}

.hours-map {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	min-height: 400px;
}

.hours-map iframe {
	width: 100%;
	height: 100%;
	min-height: 400px;
	border: 0;
	display: block;
}

/* =================================
   MENU GALLERY SECTION
   ================================= */
.section-menu {
	background: var(--color-bg-white);
	transition: opacity 1s ease, transform 1s ease;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.gallery-grid.wide {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-item {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
	text-decoration: none;
	cursor: pointer;
}

.gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.gallery-item .frame {
	display: block;
	overflow: hidden;
	position: relative;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-medium);
	aspect-ratio: 3/4;
}

.gallery-grid.wide .gallery-item img {
	aspect-ratio: 16/9;
}

.gallery-item:hover img {
	transform: scale(1.05);
}

/* =================================
   GALLERY SECTION
   ================================= */
.section-gallery {
	background: var(--color-bg-warm);
	transition: opacity 1s ease, transform 1s ease;
}

/* =================================
   FOOTER
   ================================= */
.section-footer {
	background: var(--color-dark);
	color: rgba(255, 255, 255, 0.8);
}

.section-footer .section-inner { padding: 4rem 2rem 2rem; }

.section-footer h3 {
	color: var(--color-accent);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin-bottom: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-info p { line-height: 1.8; font-size: 0.95rem; }

.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.95rem;
	transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--color-accent); }

.social-icons {
	display: flex;
	gap: 1rem;
}

.social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.social-icons a:hover {
	background: var(--color-primary);
	transform: translateY(-3px);
}

.social-icons .icon-svg {
	width: 1.25rem;
	height: 1.25rem;
	color: #fff;
	fill: currentColor;
}

.footer-bottom {
	text-align: center;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
.footer-bottom a:hover { color: var(--color-accent); }

/* =================================
   DEFERRED LOADING
   ================================= */
@keyframes loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.deferred:before {
	content: '';
	display: block;
	width: 3rem;
	height: 3rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1.5rem 0 0 -1.5rem;
	animation: loading-spinner 1s infinite linear;
	transition: opacity 0.25s ease;
	transition-delay: 0.5s;
	opacity: 0;
	z-index: -1;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5jaXJjbGUge2ZpbGw6IHRyYW5zcGFyZW50OyBzdHJva2U6ICNDNDFFM0E7IHN0cm9rZS13aWR0aDogMS41cHg7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iY29ybmVyIj48cG9seWdvbiBwb2ludHM9IjAsMCA0OCwwIDQ4LDQ4IDk2LDQ4IDk2LDk2IDAsOTYiIC8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2Nvcm5lcikiPjxjaXJjbGUgY3g9IjQ4IiBjeT0iNDgiIHI9IjMyIi8+PC9nPjwvc3ZnPg==');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3rem;
}
.deferred.loading:before { opacity: 0.35; z-index: 0; }

/* =================================
   GALLERY MODAL (Lightbox)
   ================================= */
@keyframes gallery-modal-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.gallery-modal {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	align-content: center;
	align-items: center;
	background-color: var(--color-background);
	display: grid;
	grid-template-areas: "previous image next" "caption caption caption";
	grid-template-columns: min-content auto min-content;
	height: 100%;
	justify-content: space-between;
	left: 0;
	opacity: 0;
	outline: 0;
	padding: 2rem 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	touch-action: pan-x pinch-zoom;
	transition: opacity 0.5s ease, visibility 0.5s, z-index 0.5s, background-color 0.5s ease;
	user-select: none;
	visibility: hidden;
	width: 100%;
	z-index: 0;
}
.gallery-modal:before {
	animation: gallery-modal-spinner 1s infinite linear;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 4rem;
	content: '';
	display: block;
	height: 4rem;
	left: 50%;
	margin: -2rem 0 0 -2rem;
	opacity: 0;
	position: absolute;
	top: 50%;
	transition: opacity 0.25s ease;
	transition-delay: 0.5s;
	width: 4rem;
}
.gallery-modal .inner {
	box-shadow: 0 1em 3em 0 rgba(0,0,0,0.35);
	grid-area: image;
	height: 100%;
	opacity: 0;
	overflow: hidden;
	transform: translateY(0.75em);
	transition: all 0.5s ease;
	width: 100%;
}
.gallery-modal .inner img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
	max-width: var(--natural-width, none);
	max-height: var(--natural-height, none);
	margin: 0 auto;
}
.gallery-modal .caption {
	color: var(--color-caption-text);
	font-family: var(--font-body);
	font-size: 1rem;
	grid-area: caption;
	line-height: 1.6;
	opacity: 0;
	padding: 2rem 2rem 0;
	pointer-events: none;
	text-align: center;
	transform: translateY(0.25em);
	transition: all 0.5s ease;
}
.gallery-modal .nav {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3rem;
	cursor: pointer;
	height: 6rem;
	transition: opacity 0.25s ease, transform 0.5s ease;
	width: 8rem;
}
.gallery-modal .nav:hover { opacity: 1 !important; }
.gallery-modal .nav.next { grid-area: next; }
.gallery-modal .nav.previous { grid-area: previous; transform: scaleX(-1); }
.gallery-modal .close {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-position: top 1rem right 1rem;
	background-repeat: no-repeat;
	background-size: 3rem;
	cursor: pointer;
	display: block;
	height: 6rem;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.25s ease, transform 0.5s ease;
	width: 6rem;
}
.gallery-modal .close:hover { opacity: 1 !important; }
.gallery-modal.visible { opacity: 1; pointer-events: auto; visibility: visible; z-index: 10001; }
.gallery-modal.visible:before { opacity: 1; }
.gallery-modal.loaded:before { opacity: 0 !important; transition-delay: 0s !important; }
.gallery-modal.loaded .inner { opacity: 1; transform: translateY(0); }
.gallery-modal.loaded .caption { opacity: 1; transform: translateY(0); }
.gallery-modal.switching .inner { transition: opacity 0.375s ease, transform 0.5s ease; }
.gallery-modal.switching.from-left .inner { transform: translateY(0) translateX(-1.5em); }
.gallery-modal.switching.from-right .inner { transform: translateY(0) translateX(1.5em); }
.gallery-modal.switching.done .inner { transition: opacity 0.375s ease; transform: translateY(0) translateX(0); }

.gallery-modal.dark {
	--color-background: rgba(10,10,10,0.9);
	--color-background-zooming: rgba(0,0,0,1);
	--color-caption-text: #FFF;
}
.gallery-modal.dark:before { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iOTZweCIgaGVpZ2h0PSI5NnB4IiB2aWV3Qm94PSIwIDAgOTYgOTYiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5jaXJjbGUge2ZpbGw6IHRyYW5zcGFyZW50OyBzdHJva2U6ICNGRkZGRkY7IHN0cm9rZS13aWR0aDogMS41cHg7IH08L3N0eWxlPjxkZWZzPjxjbGlwUGF0aCBpZD0iY29ybmVyIj48cG9seWdvbiBwb2ludHM9IjAsMCA0OCwwIDQ4LDQ4IDk2LDQ4IDk2LDk2IDAsOTYiIC8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2Nvcm5lcikiPjxjaXJjbGUgY3g9IjQ4IiBjeT0iNDgiIHI9IjMyIi8+PC9nPjwvc3ZnPg=='); }
.gallery-modal.dark .close { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAxLjVweDt9PC9zdHlsZT48bGluZSB4MT0iMjAiIHkxPSIyMCIgeDI9IjQ0IiB5Mj0iNDQiIC8+PGxpbmUgeDE9IjIwIiB5MT0iNDQiIHgyPSI0NCIgeTI9IjIwIiAvPjwvc3ZnPg=='); opacity: 0.25; }
.gallery-modal.dark .nav { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAxLjVweDt9PC9zdHlsZT48bGluZSB4MT0iMjQiIHkxPSI4IiB4Mj0iNDgiIHkyPSIzMiIgLz48bGluZSB4MT0iMjQiIHkxPSI1NiIgeDI9IjQ4IiB5Mj0iMzIiIC8+PC9zdmc+'); opacity: 0.25; }

/* =================================
   MEDIA QUERIES
   ================================= */
@media (orientation: portrait) {
	.gallery-modal { grid-template-areas: "image" "caption"; grid-template-columns: auto; justify-content: center; }
	.gallery-modal .nav { background-image: none !important; mix-blend-mode: difference; opacity: 1 !important; position: absolute; }
	.gallery-modal .nav.next { right: 0; }
	.gallery-modal .nav.previous { left: 0; }
	.gallery-modal .nav:before { background-color: rgba(144,144,144,0.5); background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHpvb21BbmRQYW49ImRpc2FibGUiPjxzdHlsZT5saW5lIHtzdHJva2U6ICNGRkZGRkY7c3Ryb2tlLXdpZHRoOiAzcHg7fTwvc3R5bGU+PGxpbmUgeDE9IjI0IiB5MT0iOCIgeDI9IjQ4IiB5Mj0iMzIiIC8+PGxpbmUgeDE9IjI0IiB5MT0iNTYiIHgyPSI0OCIgeTI9IjMyIiAvPjwvc3ZnPg=='); background-position: center; background-repeat: no-repeat; background-size: 1.5rem; border-radius: 3rem; content: ''; display: block; height: 3rem; position: absolute; right: 1rem; top: calc(50% - 1.5rem); width: 3rem; }
}

@media (max-width: 1024px) {
	.welcome-grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.welcome-text h2 { text-align: center; }
	.welcome-text h2::after { left: 50%; transform: translateX(-50%); }
	.welcome-text { text-align: center; }
	.welcome-image { max-width: 500px; margin: 0 auto; }
	.hours-grid { grid-template-columns: 1fr; }
	.hours-map { min-height: 350px; }
	.hours-map iframe { min-height: 350px; }
}

@media (max-width: 768px) {
	html { font-size: 15px; }
	h2 { font-size: 2rem; }
	.section-inner { padding: 3.5rem 1.5rem; }

	.nav-toggle { display: flex; }
	.nav-links {
		position: fixed;
		top: 4rem;
		left: 0;
		right: 0;
		background: rgba(26, 26, 46, 0.98);
		flex-direction: column;
		padding: 1.5rem;
		gap: 0.5rem;
		transform: translateY(-100%);
		opacity: 0;
		pointer-events: none;
		transition: transform var(--transition-fast), opacity var(--transition-fast);
	}
	.nav-links.open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.nav-links li a { padding: 0.75rem 1rem; display: block; text-align: center; }

	.section-hero h1 { font-size: 3.5rem; }
	.hero-subtitle { font-size: 1.35rem; }
	.hero-tagline { font-size: 1rem; }
	.hero-badge { width: 100px; height: 100px; }

	.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.gallery-grid.wide { grid-template-columns: repeat(2, 1fr); }

	.footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
	.social-icons { justify-content: center; }

	.gallery-modal .nav, .gallery-modal .close { opacity: 1 !important; }
}

@media (max-width: 480px) {
	h2 { font-size: 1.75rem; }
	.section-inner { padding: 3rem 1.25rem; }

	.section-hero h1 { font-size: 2.75rem; }
	.hero-subtitle { font-size: 1.15rem; }
	.hero-badge { width: 80px; height: 80px; margin-bottom: 1.5rem; }
	.hero-buttons { flex-direction: column; align-items: center; }
	.hero-buttons .btn { width: 100%; max-width: 280px; }

	.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.gallery-grid.wide { grid-template-columns: 1fr; }

	.hours-card { padding: 1.5rem; }

	.gallery-modal .close { background-position: top 0.5rem right 0.5rem; }
}

@media (max-width: 360px) {
	.section-inner { padding: 2.5rem 1rem; }
	.section-hero h1 { font-size: 2.25rem; }
	.hero-subtitle { font-size: 1rem; }
	.btn { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
}

/* Icon heart (footer) */
.icon-heart {
	background-image: url(https://assets.michalferber.me/svg/heart.svg);
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
}