/* ---------------------------------------------------------------------------
 * Theme overrides
 *
 * Tweaks layered on top of the vendored html/css/styles.css. Each rule is here
 * because the WordPress theme structurally differs from the static template:
 * we don't always have the same children inside flex containers, and a few
 * customizer-driven slots need predictable widths.
 *
 * Keep this file targeted — anything that should live in styles.css proper
 * (because it's a true bug in the static stylesheet) belongs in styles.css,
 * not here.
 * ------------------------------------------------------------------------- */

/* Header — when only the left nav is rendered (no btn-reser button), the
 * static template's `justify-content: space-between` collapses the nav to the
 * left edge. Pin it to the right so it sits flush against the logo. */
.header-inner .header-left {
	justify-content: flex-end;
}

/* Footer top row — give the logo and social columns equal flex-basis so the
 * quote sits at the true horizontal centre of the footer regardless of how
 * many social icons are configured. */
#footer-main .footer-top .footer-logo,
#footer-main .footer-top .wg-social {
	flex: 0 0 220px;
	max-width: 220px;
}
#footer-main .footer-top .footer-logo {
	display: flex;
	justify-content: flex-start;
}
#footer-main .footer-top .wg-social {
	display: flex;
	justify-content: flex-end;
}
#footer-main .footer-top .text {
	flex: 1;
	text-align: center;
	margin: 0 auto;
	padding-left: 0;
}
#footer-main .footer-top .signature {
	margin-top: 0.5em;
	font-size: 0.875em;
	font-style: italic;
	color: var(--Border-7);
}
.header-inner .main-nav .nav-list .item a,
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav .item-menu-mobile {
	text-transform: uppercase;
}
.footer-inner-wrap a {
	color: var(--Text-1);
}
.footer-inner-wrap a:hover {
	color: var(--Sub-color);
}

/* Menu carousel — the static template's CSS doesn't constrain the image
 * inside `.wg-food-offer .image`, so the intrinsic file dimensions
 * (`loggia-menu-card` = 309×508) leak through: too narrow when the slide is
 * wider than the asset, and too tall (via aspect-ratio) when the slot widens.
 * Cap height at the asset's native 508px and let `object-fit: cover` crop
 * width-wise as the slot flexes. */
.wg-food-offer .image {
	height: 508px;
	max-height: 508px;
	overflow: hidden;
}
.wg-food-offer .image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-dish {
	padding-top: 150px;
	padding-bottom: 150px;
}

.food-category-container:not(:first-child) {
	margin-top: 100px;
}



/* Logo customizations */
.logo-site img.img-logo {
	margin-top: -10px;
	padding: 0 0 5px 0;
	filter: brightness(0) invert(1);
}
.header.scrollHeader .header-center .logo-site .img-logo {
  bottom: -11px;
  max-width: 100px;
}
.header.scrollHeader .header-center .logo-site .item-1 {
  top: -20px;
}

/* Mobile menu — the static template puts .mobile-button inside .header-right
 * and the drawer slides from the left, which feels unnatural. We move the
 * button into .header-left so it sits on the same side the drawer opens from.
 * The static's CSS scopes .mobile-button rules to .header-right, so we
 * re-create the hamburger styles at the new location and rebalance the
 * mobile header to: button-left / logo-center / language-switcher-right. */
.header-inner .header-left .mobile-button {
	position: relative;
	width: 26px;
	height: 26px;
	background-color: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: none;
	color: inherit;
}
.header-inner .header-left .mobile-button span,
.header-inner .header-left .mobile-button::before,
.header-inner .header-left .mobile-button::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
}
.header-inner .header-left .mobile-button span {
	top: 50%;
	transform: translateY(-50%);
}
.header-inner .header-left .mobile-button::before {
	top: 4px;
}
.header-inner .header-left .mobile-button::after {
	bottom: 4px;
}

@media (max-width: 1200px) {
	.header-inner .header-left .mobile-button {
		display: block;
	}
	/* The static's .main-nav { display:none !important } hides our 1-link
	 * primary-left/right menus on mobile. Override theme-overrides.css's
	 * `.header-inner .header-left { justify-content: flex-end }` so the
	 * hamburger anchors to the left edge instead. */
	.header-inner .header-left {
		justify-content: flex-start;
	}
	.header-inner .header-right {
		justify-content: flex-end;
	}
}

/* At <= 550px the static template hides .header-style-1 .header-left
 * outright (assets/css/styles.css line 7828) — designed for a layout that
 * never had a hamburger on that side. Force it back on so the button stays
 * visible at phone widths; matches the !important on the source rule. */
@media (max-width: 550px) {
	.header-style-1 .header-left {
		display: flex !important;
	}
	/* assets/css/styles.css line 7825 shifts .header-inner left by -20px,
	 * a hack for the static layout where .header-left was hidden. With the
	 * hamburger back in .header-left we want zero offset so the button has
	 * the .tf-container's 15px gutter, not a negative one. */
	.header-style-1 .header-inner {
		margin-left: 0;
	}
}

/* Drawer logo — the global `.logo-site img.img-logo` inversion only fires
 * inside .logo-site, so the drawer logo renders in its source colors against
 * the drawer's --Bg-2 background. Cap the size to match the static. */
.mobile-nav-wrap .inner-mobile-nav .logo .img-logo {
	max-width: 173px;
	height: auto;
}

/* Drawer close button — re-use the static .mobile-nav-close visual rules
 * (positioned via .logo .mobile-nav-close) but reset <button> defaults. */
.mobile-nav-wrap .inner-mobile-nav .logo .mobile-nav-close {
	background: transparent;
	border: 0;
	padding: 0;
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

/* Menu listing — the static caps .food-item .name with white-space: nowrap
 * (assets/css/styles.css:3781), so long titles like "Feta cheese wrapped in
 * crispy pastry (Saganaki)" overflow the column on narrow viewports and push
 * the price off-screen. Let the name wrap, and anchor the dotted line and
 * price to the last text line of the wrapped title via align-items: flex-end
 * (the row is the canonical menu-listing pattern: name … line … price). */
/* .wg-menu .food-item .food {
	align-items: flex-end;
	gap: 6px;
} */
.wg-menu .food-item .food .name {
	white-space: normal;
	min-width: 0;
	flex: 0 1 auto;
	max-width: 70%;
}
/* The static sets .line { width: 100% } which makes flex-basis 100% and
 * dominates the row — the name gets shrunk (and wrapped) even when it
 * would otherwise fit. Make .line take only the leftover space so the
 * name keeps its intrinsic single-line width whenever the row allows. */
.wg-menu .food-item .food .line {
	flex: 1 1 0;
	width: auto;
	min-width: 20px;
}

/* Private-grid counter overlay (.wg-counter.style-2) — on mobile the static
 * locks each .number-counter to max-width: 224px (assets/css/styles.css:7593),
 * so they wrap with leftover space on the right of the image and a
 * white-space: nowrap inherited from the 1440px breakpoint truncates labels.
 * Let the two counters split the image width evenly, allow labels to wrap,
 * and cap the label width so it stays visually anchored under the digits. */
@media (max-width: 767px) {
	.wg-counter.style-2 .number-counter {
		max-width: none !important;
		flex: 1 1 0;
		min-width: 0;
		white-space: normal;
	}
	.wg-counter.style-2 .number-counter p {
		max-width: 150px;
		white-space: normal;
		line-height: 1.2;
	}

	/* Other mobile ui fixes */
	#footer-main .footer-top .footer-logo {
		justify-content: center;
	}
	.header-inner .header-center .logo-site .img-logo {
		max-width: 90px;
	}
	.header.scrollHeader .header-center .logo-site .img-logo {
		max-width: 80px;
	}
}

/* Language switcher (desktop) — the dropdown reuses the static
 * `.main-nav .nav-list .item.has-child .sub-nav` hover styling for free. The
 * static gives the active item a persistent underline only when the parent
 * carries `.current-menu` (which also draws a vertical bar above the trigger).
 * The "LANGUAGE" trigger is a control, not a current page, so we skip the bar
 * and re-create just the underline for the active language here. */
.header-inner .main-nav.lang-switcher .nav-list .item.has-child .sub-nav li.current-item a span::before {
	width: 100%;
}

/* Tighten the trigger spacing and centre the dropdown under "LANGUAGE" rather
 * than left-aligning it to the parent edge (the static default). `left: 50%`
 * plus a -50% X translate centres it; the hidden state keeps the same X offset
 * so only the Y (drop-in) and opacity animate, never a sideways slide. */
.header-inner .main-nav.lang-switcher {
	padding-right: 14px;
}
.header-inner .main-nav.lang-switcher .nav-list .item.has-child .sub-nav {
	min-width: 150px;
	left: 50%;
	transform: translate(-50%, 20px);
}
.header-inner .main-nav.lang-switcher .nav-list .item.has-child:hover .sub-nav {
	transform: translate(-50%, 0);
}

/* Drop the static template's trailing space under the mobile nav list; the
 * language switcher's own border-top + padding now provides the separation. */
.mobile-nav-wrap .inner-mobile-nav .mobile-main-nav #menu-mobile-menu {
	padding-bottom: 0;
}

/* Language switcher (mobile drawer) — sits between the nav links and the social
 * icons (parts/header-mobile-drawer.php), always expanded. Styled to match the
 * drawer's CormorantInfant menu items: dark --Text against the light --Bg-2
 * drawer background, with --Sub-color for the active/hovered language (mirrors
 * the drawer's `.menu-item.current a` treatment). */
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher {
	/* Soft gray rule separating the nav links above from the language section. */
	padding-top: 24px;
	padding-bottom: 30px;
	border-top: 1px solid var(--Border);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-switcher__title {
	margin: 0 0 12px;
	font-family: "CormorantInfant";
	font-size: 12px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--Text-2);
}
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-list li {
	padding: 6px 0;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-list li a {
	font-family: "CormorantInfant";
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--Text);
	transition: color 0.3s ease;
}
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-list li a:hover,
.mobile-nav-wrap .inner-mobile-nav .mobile-lang-switcher .mobile-lang-list li.current a {
	color: var(--Sub-color);
}