/* Mediterranean Grill — brand layer. Colours and fonts are Elementor Site Settings globals, exposed as the --mg-*
   design tokens by Restaurant Elementor Widgets (rew-base.css); this file adds composition and ornament only.
   Dish photos are shown at most at their natural 400px size: the source storefront offers nothing larger. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background-color: var(--mg-bg);
}

::selection {
	background: var(--mg-gold);
	color: var(--mg-ink);
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.mg-measure {
	max-width: 38em;
}

.mg-head--center .elementor-widget-text-editor,
.mg-head--center .mg-measure {
	max-width: 42em;
	margin-inline: auto;
}

.mg-head .elementor-heading-title,
.mg-hero__title .elementor-heading-title,
.mg-final__title .elementor-heading-title {
	text-wrap: balance;
}

/* Eyebrow with a short olive rule. */
.mg-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	margin-inline-end: 10px;
	vertical-align: middle;
	background: currentColor;
	opacity: .7;
}

/* Elementor button widgets: brand sizing and gentle motion. */
.mg-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	white-space: nowrap;
	transition: background-color var(--mg-transition-fast), color var(--mg-transition-fast), border-color var(--mg-transition-fast), transform var(--mg-transition-fast), box-shadow var(--mg-transition-fast);
}

.mg-btn--primary .elementor-button:hover,
.mg-btn--primary .elementor-button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--mg-primary) 80%, transparent);
}

.elementor-button:focus-visible {
	outline: 3px solid var(--mg-gold);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- backgrounds */
.mg-glow {
	background-image:
		radial-gradient(48% 60% at 82% 28%, rgba(255, 255, 255, .95), transparent 70%),
		radial-gradient(40% 50% at 8% 92%, color-mix(in srgb, var(--mg-gold) 16%, transparent), transparent 70%);
}

.mg-olive-lines {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* ::after, because Elementor uses a container's ::before for background overlays. */
.mg-olive-lines::after {
	content: "";
	position: absolute;
	top: -40px;
	inset-inline-end: -60px;
	z-index: -1;
	width: min(46vw, 520px);
	aspect-ratio: 1;
	background: var(--mg-olive-art, none) center / contain no-repeat;
	opacity: .14;
	pointer-events: none;
}

.mg-olive-lines--left::after {
	inset-inline-start: -80px;
	inset-inline-end: auto;
	top: auto;
	bottom: -60px;
	transform: scaleX(-1);
}

/* Native Image widgets own the upgraded artwork. Legacy pages keep their existing decoration until patched. */
.mg-art-managed.mg-olive-lines::after {
	content: none;
}

.mg-line-art img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.mg-line-art {
	pointer-events: none;
}

/*
 * 3.1.0 placed the olive line art inside the photo column, where it crossed the food (the photos multiply-blend, so
 * anything beneath them shows through). Graphics & Reviews moves an unchanged one to the section corner; until then,
 * or if the owner customised it, keep it behind the opaque plate disc so only leaves past the disc show. The section
 * (.mg-olive-lines) isolates the stacking, so the branch stays above the section background.
 */
.mg-hero__art .elementor-element.elementor-widget-image.mg-line-art {
	z-index: -1;
	translate: 14% -10%;
}

.rew-editor-preview .mg-line-art,
.rew-editor-preview .elementor-element.mg-orn {
	pointer-events: auto;
}

/* ---------------------------------------------------------------- hero */
.mg-hero {
	overflow: hidden;
}

/* Not isolated: the dish photos multiply-blend with everything behind them (disc and section background). */
.mg-hero__art {
	position: relative;
}

/* A soft disc behind the dishes; the photos keep their natural size. Painted first, the photos follow in DOM order. */
.mg-hero__art::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: min(100%, 540px);
	/* Elementor's overlay rule (.e-con::before) sets height: 100%, which turned the disc into an oval. */
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .4) 58%, transparent 70%),
		var(--mg-bg-soft);
	box-shadow: inset 0 0 0 1px var(--mg-border);
	transform: translate(-50%, -50%);
}

.mg-photo {
	max-width: 400px;
}

.mg-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* No z-index or transform here: either would isolate the photo and stop its white background blending away. */
.mg-photo--main {
	position: relative;
	width: min(100%, 400px) !important;
}

.elementor-element.mg-photo--side {
	z-index: 3;
}

.mg-photo--side {
	max-width: 200px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--mg-surface);
	box-shadow: var(--mg-shadow-md), 0 0 0 6px var(--mg-surface);
}

.elementor-element.mg-dish-chip {
	z-index: 5;
}

.mg-dish-chip {
	padding: 12px 16px 12px 14px;
	border-inline-start: 4px solid var(--mg-accent);
	border-radius: var(--mg-radius-md);
	background: var(--mg-surface);
	box-shadow: var(--mg-shadow-md);
}

.mg-dish-chip p {
	margin: 0;
}

.mg-dish-chip .mg-chip__title {
	color: var(--mg-text);
	font: 600 17px / 1.2 var(--mg-font-display);
}

.mg-dish-chip .mg-chip__sub {
	color: var(--mg-text-muted);
	font: 400 13px / 1.4 var(--mg-font-ui);
}

.elementor-element.mg-orn {
	z-index: 4;
	pointer-events: none;
}

.mg-hours-chip {
	align-self: flex-start;
}

.mg-hours-chip .rew-hours--summary {
	gap: 8px 12px;
	padding: 8px 14px;
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius-pill);
	background: var(--mg-surface);
}

.mg-hours-chip .rew-hours__summary {
	font-size: 15px;
}

.mg-hours-chip .rew-hours__status {
	padding: 3px 10px 3px 8px;
	font-size: 13px;
}

/* First-screen motion (CSS only). Photos and the H1 move but are never invisible, so they paint at once. */
@keyframes mg-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes mg-rise-solid {
	from { transform: translate3d(0, 12px, 0); }
	to { transform: none; }
}

@keyframes mg-plate-in {
	from { transform: scale(.95) rotate(-5deg); }
	to { transform: none; }
}

.mg-enter { animation: mg-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.mg-enter--2 { animation-name: mg-rise-solid; animation-delay: .04s; }
.mg-enter--3 { animation-delay: .14s; }
.mg-enter--4 { animation-delay: .22s; }
.mg-enter--5 { animation-delay: .32s; }
.mg-enter--art { animation: mg-plate-in .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.mg-enter--art2 { animation: mg-plate-in .9s cubic-bezier(.2, .7, .2, 1) .3s both; }

/* ---------------------------------------------------------------- order method, steps, cards */
.mg-order-method .rew-fulfilment,
.mg-order-method .rew-catalog-order {
	height: 100%;
}

.mg-step {
	border: 1px solid var(--mg-border);
	border-radius: var(--mg-radius-lg);
	background: var(--mg-surface);
}

.mg-step--dark {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .05);
}

.mg-step__num .elementor-heading-title {
	font-variant-numeric: lining-nums;
	line-height: 1;
}

.mg-steps-list .mg-step {
	box-shadow: var(--mg-shadow-sm);
}

.mg-card {
	border: 1px solid var(--mg-border);
	box-shadow: var(--mg-shadow-sm);
}

.mg-list .elementor-icon-list-item {
	position: relative;
	padding-inline-start: 22px;
}

.mg-list .elementor-icon-list-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mg-accent);
}

/* Quality points in the story section. */
.mg-quality {
	border-top: 1px solid var(--mg-border);
}

.mg-quality__title .elementor-heading-title {
	font-size: 18px;
}

/* Category tiles. */
.mg-tile {
	border: 1px solid var(--mg-border);
	color: inherit;
	text-decoration: none;
	transition: transform var(--mg-transition-normal), box-shadow var(--mg-transition-normal), border-color var(--mg-transition-normal);
}

.mg-tile:hover,
.mg-tile:focus-visible {
	border-color: var(--mg-border-strong);
	box-shadow: var(--mg-shadow-md);
	transform: translateY(-3px);
}

.mg-tile:focus-visible {
	outline: 3px solid var(--mg-focus);
	outline-offset: 3px;
}

.mg-tile__img {
	width: min(80%, 168px);
	aspect-ratio: 1;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 50%;
	background: var(--mg-bg-soft);
}

.mg-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.mg-tile:hover .mg-tile__img img {
	transform: scale(1.05) rotate(-3deg);
}

.mg-tile__title .elementor-heading-title {
	font-size: 20px;
}

/* Visit card. */
.mg-visit__card {
	border: 1px solid var(--mg-border);
	box-shadow: var(--mg-shadow-sm);
}

/* ---------------------------------------------------------------- menu / order page */
.mg-page-head .rew-open-badge {
	display: inline-flex;
}

.mg-order-bar .rew-fulfilment {
	padding: 18px 20px;
	box-shadow: none;
}

.mg-order-bar .rew-fulfilment__title {
	margin-bottom: 10px;
	font-size: var(--mg-step-0);
}

/* Catalog mode in the compact bar: title, line and button on one row where there is room. */
.mg-order-bar .rew-catalog-order {
	flex-flow: row wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 16px 20px;
	box-shadow: none;
}

.mg-order-bar .rew-catalog-order__title {
	font-size: var(--mg-step-1);
}

.mg-order-bar .rew-catalog-order__text {
	flex: 1 1 260px;
}

.mg-order-bar .rew-catalog-order__btn {
	margin-top: 0;
}

.mg-order-bar .rew-search--page {
	align-self: end;
}

/* ---------------------------------------------------------------- FAQ (Elementor Nested Accordion: details/summary) */
.mg-faq .e-n-accordion {
	border-top: 1px solid var(--mg-border);
}

.mg-faq .e-n-accordion-item {
	border-bottom: 1px solid var(--mg-border);
}

.mg-faq .e-n-accordion-item > .e-n-accordion-item-title {
	position: relative;
	display: flex;
	justify-content: flex-start;
	padding: 22px 48px 22px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	list-style: none;
}

.mg-faq .e-n-accordion-item > .e-n-accordion-item-title::-webkit-details-marker {
	display: none;
}

.mg-faq .e-n-accordion-item-title-text {
	margin: 0;
	color: var(--mg-text);
	font: 600 21px / 1.3 var(--mg-font-display);
}

.mg-faq .e-n-accordion-item > .e-n-accordion-item-title::after {
	content: "";
	position: absolute;
	inset-inline-end: 6px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background:
		linear-gradient(currentColor, currentColor) center / 18px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 18px no-repeat;
	color: var(--mg-primary);
	transition: transform var(--mg-transition-normal);
}

.mg-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
	transform: rotate(45deg);
}

.mg-faq .e-n-accordion-item > .e-n-accordion-item-title:focus-visible {
	outline: 3px solid var(--mg-focus);
	outline-offset: 2px;
}

.mg-faq .e-n-accordion-item > .e-con {
	border: 0;
}

.mg-form-card {
	box-shadow: var(--mg-shadow-lg);
}

.mg-map iframe {
	display: block;
	border-radius: var(--mg-radius-lg);
}

/* ---------------------------------------------------------------- closing band */
.mg-final {
	overflow: hidden;
	background-image:
		radial-gradient(50% 80% at 85% 40%, color-mix(in srgb, var(--mg-gold) 26%, transparent), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(255, 255, 255, .08), transparent 70%);
}

.mg-final .mg-photo {
	margin-inline: auto;
}

/* ---------------------------------------------------------------- long-form text */
.mg-prose h2 {
	margin: 40px 0 12px;
	color: var(--mg-text);
	font: 600 28px / 1.2 var(--mg-font-display);
}

.mg-prose p {
	max-width: 70ch;
	margin-bottom: 1em;
}

.mg-prose a,
.mg-footer__privacy a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mg-note p {
	opacity: .9;
}

/* ---------------------------------------------------------------- footer */
.mg-footer {
	position: relative;
}

.mg-footer__links .elementor-icon-list-item a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.mg-footer__links .elementor-icon-list-item a:hover .elementor-icon-list-text,
.mg-footer__links .elementor-icon-list-item a:focus-visible .elementor-icon-list-text {
	color: #FFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mg-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.mg-footer__privacy a {
	color: var(--mg-text-on-dark);
}

.mg-footer__privacy a:hover,
.mg-footer__privacy a:focus-visible {
	color: #FFF;
}

.mg-footer__brand-name .elementor-heading-title {
	letter-spacing: -.01em;
}

.mg-footer .rew-hours__label {
	color: var(--mg-text-on-dark);
}

.mg-footer .rew-hours__value a,
.mg-footer .rew-hours__value {
	color: #FFF;
}

.mg-footer .rew-hours .rew-hours__table th,
.mg-footer .rew-hours .rew-hours__table td {
	color: #FFF;
}

/* Theme resets style labels and tables; keep the restaurant widgets on brand. */
.rew-field__label,
.rew-choice {
	line-height: 1.4;
}

.rew-hours .rew-hours__table,
.rew-hours .rew-hours__table th,
.rew-hours .rew-hours__table td {
	border-width: 0 0 1px;
	border-style: solid;
	border-color: var(--rew-hours-line, var(--mg-border));
	background-color: transparent;
	font-size: 1rem;
	line-height: 1.45;
}

.rew-hours .rew-hours__table {
	margin: 0;
	border-bottom: 0;
}

.rew-hours .rew-hours__table tr.is-today th,
.rew-hours .rew-hours__table tr.is-today td {
	background-color: var(--rew-hours-today);
}

/* ---------------------------------------------------------------- version 2 layouts kept because the owner edited them */
.mg-stage {
	isolation: isolate;
}

.mg-plate {
	--mg-plate-bg: var(--mg-bg);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--mg-plate-bg);
	box-shadow: var(--mg-shadow-md);
}

.mg-plate > .elementor-widget-container {
	height: 100%;
}

.mg-plate img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mg-plate--side {
	z-index: 3;
	box-shadow: var(--mg-shadow-md), 0 0 0 8px var(--mg-surface);
}

.mg-trust .mg-trust__title .elementor-heading-title {
	font-size: 19px;
}

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 1023px) {
	.mg-hero__art::before {
		width: min(92%, 440px);
	}
}

@media (max-width: 767px) {
	.mg-photo--main {
		width: min(100%, 320px) !important;
	}

	.mg-photo--side {
		max-width: 132px;
	}

	.mg-dish-chip {
		padding: 8px 12px;
	}

	.mg-dish-chip .mg-chip__title {
		font-size: 15px;
	}

	.mg-dish-chip .mg-chip__sub {
		font-size: 12px;
	}

	.mg-hours-chip .rew-hours--summary {
		border-radius: 18px;
	}

	.mg-tile__title .elementor-heading-title {
		font-size: 17px;
	}

	.mg-tile__body {
		display: none;
	}

	.mg-olive-lines::after {
		width: 70vw;
		opacity: .1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mg-enter,
	.mg-enter--art,
	.mg-enter--art2 {
		animation: none;
	}

	.mg-tile,
	.mg-tile__img img,
	.mg-btn .elementor-button,
	.mg-faq .e-n-accordion-item > .e-n-accordion-item-title::after {
		transition: none;
	}

	.mg-tile:hover,
	.mg-tile:hover .mg-tile__img img,
	.mg-btn--primary .elementor-button:hover {
		transform: none;
	}
}