/* ServIndy fixes for the legacy elixir-lounge template.
   The templatization introduced structural classes (nav-left/nav-right,
   mb-header-*, hero-cta, gallery-grid, main_heading, ...) that the original
   theme CSS never defined, so sparse configs rendered as unstyled HTML
   (bulleted nav, natural-size images, 50vh empty hero band). This layer is
   loaded LAST and only fills those gaps — it does not restyle the theme. */

/* Safety net: no content image may ever explode to its natural size. */
#wrap img,
header img,
footer img {
	max-width: 100%;
	height: auto;
}

/* Topbar strip visibility: the theme slides the hero UP 160px under the nav
   pill (.header-bottom{margin-bottom:-160px; z-index:999}) so the pill floats
   over the hero image. But .header-top had no stacking context, so the
   pulled-up opaque hero painted OVER the address/contact/social strip — only
   the z-index:9 .book-btns showed through. Lift the strip above the hero and
   give it its own bg (inherited from .header, so per-site color rewrites
   apply). The pill keeps its hero-overlap look. */
.header-top {
	position: relative;
	z-index: 998;
	background-color: inherit;
	padding: 12px 0; /* slimmer strip (theme default 20px read as one heavy block) */
}

/* Separate the strip from the nav pill: same-color surfaces were touching and
   merged into one mass. Pad the pill down so the hero shows between them —
   the padded zone is transparent (bg lives on .header-nav-wrap), and the
   scrolled .fixed-header state pins the pill at top:0 unaffected. */
.header-bottom .desktop-header {
	padding-top: 18px;
}

/* Topbar strip: the theme's .book-btn is a section CTA (20px text, 18px
   padding — 59px tall). Reserve/Order Online in the 20px-tall header-top
   bloated the strip, pushed the social icons onto a wrapped second line, and
   left the three columns top-aligned (address/Contact Us looked clipped).
   Compact the buttons, center the row, and keep buttons + social inline. */
.header-top .row {
	align-items: center;
}
.header-top .book-btn {
	font-size: 14px;
	line-height: 16px;
	padding: 7px 16px;
	border-width: 1px;
}
.header-top .col-md-4 .header-top-info {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}
.header-top .social-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Social icons: the theme markup used FontAwesome classes (fab fa-*) but the
   bundle ships only RemixIcon — the icons NEVER rendered. Markup now uses
   ri-* glyphs; TikTok (absent from RemixIcon 2.5) is an inline SVG. */
.social-share svg.tiktok-icon {
	width: 1.15em;
	height: 1.15em;
	vertical-align: middle;
	fill: currentColor;
}
.social-share li {
	display: inline-block;
}
.social-share li a {
	font-size: 20px;
}

/* Desktop nav: the invented nav-left / nav-right ULs around the centered brand. */
.desktop-header .navbar-nav {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}
.nav-left,
.nav-right {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.nav-left .nav-item,
.nav-right .nav-item {
	list-style: none;
}
.nav-center {
	flex: 0 0 auto;
}

/* Brand logo sizing (replaces the invalid height="50%"/width="50%" attributes). */
.navbar-brand img,
.brand-logo-img {
	max-height: 64px;
	width: auto;
}

/* Mobile header pieces. */
.mb-header-right .header-top-info {
	display: flex;
	justify-content: flex-end;
}
.mobile-menu-wrap {
	position: relative;
}

/* Hero CTA buttons (Reserve / Order Online). */
.hero-cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Gallery grid — invented class with no CSS anywhere. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}
.gallery-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 8px;
}

/* Section headings: main_heading wrapper had no CSS (small_heading does). */
.main_heading {
	text-align: center;
	margin: 0 0 24px;
}

/* Empty hero: a compact accent band, not a viewport-height void. style.css
   forces height:100vh on .full-slider and min-height:840px on its .container —
   both must be neutralized in the no-image case. Content-bearing heroes
   (slides) keep their size from style.css. */
.home_page2 .hero-slider.full-slider.hero--no-image,
.home-page.hero-slider.hero--no-image {
	height: auto;
	min-height: 180px;
}
.hero-slider.hero--no-image .inn-slide {
	height: auto;
	min-height: 180px;
}
.hero-slider.hero--no-image .container {
	min-height: 0;
}
.hero-slider.hero--no-image .hero {
	padding: 48px 0;
}

/* Menu item tiles: the theme positions .dish-image absolutely (top -90px,
   right 0) against a 170px area reserved by .food_item_desc's padding. The
   height:auto safety net above defeated the fixed 170x170 square, so tall or
   odd-ratio images (e.g. the olive placeholder) exploded over neighboring
   cards. Restore the uniform square; object-fit keeps uploads undistorted. */
#wrap img.dish-image {
	width: 170px;
	height: 170px;
	object-fit: cover;
	border-radius: 6px;
}

/* Anchor the photo INSIDE the card, vertically centered in the reserved
   right zone. The legacy design floated a price-banner+photo stack 90px above
   the card; with price-less menus the lone photo looked detached and
   misaligned. Mirrored cards (.odd) anchor left. */
.menu-list-item {
	padding-right: 0;
}
/* responsive.css gives mirrored items padding-left:30px, which shifts the
   card but not the absolutely-positioned photo — zero it so both sides use
   the same reference edge. */
.odd .menu-list-item {
	padding-left: 0;
}
.food-img-price {
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	z-index: 1;
}
.odd .food-img-price {
	left: 15px;
	right: auto;
}
.food_item_desc {
	margin-top: 0;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Keep the reserved zones on both mirror variants. */
.food_item_desc {
	padding: 30px 200px 30px 30px;
}
.odd .food_item_desc {
	padding: 30px 30px 30px 200px;
}
/* Small screens: photo above text, in flow. */
@media (max-width: 575.98px) {
	.food-img-price,
	.odd .food-img-price {
		position: static;
		transform: none;
		text-align: center;
		margin-bottom: 12px;
	}
	.food_item_desc,
	.odd .food_item_desc {
		padding: 24px;
		min-height: 0;
	}
}

/* Weekly event (band) photos: cap the height so a portrait shot doesn't
   stretch its whole row into whitespace (rows are align-items-center now).
   NOTE: the events section lives OUTSIDE #wrap — keep this selector bare. */
img.band-photo {
	max-height: 340px;
	width: auto;
	max-width: 100%;
	border-radius: 8px;
}