/* ==========================================================================
   Just For TasteMyAruba — layout fixes
   Static rules that are always safe. Anything controlled by a toggle in the
   admin panel is printed inline by class-tma-frontend.php instead, so turning
   a toggle off actually removes its rules.
   ========================================================================== */

/* Elementor's page wrapper must not introduce its own gutters — every
   template section already carries the 1180px .wrap. */
.tma-page .elementor,
.tma-page .elementor > .elementor-element {
	max-width: none;
}

/* The header section in the templates is the sticky one. */
.tma-page .tma-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* WordPress admin bar must not sit over the sticky header. */
.admin-bar .tma-page .tma-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .tma-page .tma-header {
		top: 46px;
	}
}

/* Images uploaded through the media library inherit theme rules that can add
   borders or shadows; the design system expects them clean. */
.tma-page .tma img,
.tma-page .elementor-widget-image img {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Skip-links and screen-reader text some themes render above the content. */
.tma-page .skip-link,
.tma-page .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Nothing in the design may push the page wider than the viewport.
   This used to be `.tma *{max-width:100%}`, which also capped Elementor's
   stretched mobile-menu dropdown at the 40px width of the burger icon — the
   squashed "Hom / Our Sto / Coo Exp" menu on the five Elementor pages. The
   overflow actually came from media and from the two-column footer grid, so
   those are now handled directly. */
.tma-page .tma img,
.tma-page .tma video,
.tma-page .tma iframe {
	max-width: 100%;
}

.tma-page .tma .tma-footer-grid > .e-con {
	min-width: 0;
}

.tma-page .tma .tma-footer-col a,
.tma-page .tma .tma-footer-col .elementor-icon-list-text,
.tma-page .tma .tma-footer-brand p {
	overflow-wrap: anywhere;
}

.tma-page .tma-hero-art {
	overflow: hidden;
}

/* ==========================================================================
   Header, phones and tablets (every page — the header template is shared)
   ========================================================================== */

/* The actual menu fix: the dropdown is sized by Elementor (it sets an inline
   full-viewport width), so nothing may clamp it. */
.tma-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	max-width: none !important;
}

@media (max-width: 1024px) {
	/* Elementor gives the header container a fixed 1600px width at tablet
	   size, which pushed Reserve and the burger off-screen on iPads. */
	.tma.tma-header {
		--width: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		/* Logo on the page's left gutter, Reserve on the right one, instead
		   of both floating toward the middle. */
		justify-content: space-between !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	/* Two burgers were showing between 901px and 1024px: the desktop menu's
	   own tablet toggle and the mobile one. Keep only the mobile one. */
	.tma.tma-header .tma-navlinks {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.tma.tma-header {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* ==========================================================================
   Mobile menu — brand styling (Settings > Layout > "Mobile menu")
   Scoped to body.tma-menu, which the plugin adds only while that toggle is on.
   ========================================================================== */

@media (max-width: 1024px) {
	.tma-menu .tma-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		background: #F4F1E8;
		border-top: 1px solid rgba(23, 59, 44, .10);
		border-radius: 0 0 22px 22px;
		box-shadow: 0 28px 44px -20px rgba(23, 59, 44, .45);
	}

	/* Taller than the screen (a phone on its side): scroll inside the panel
	   instead of running off the bottom of a fixed header. */
	.tma-menu .tma-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
		max-height: min(var(--menu-height, 100vh), calc(100vh - 90px));
		max-height: min(var(--menu-height, 100dvh), calc(100dvh - 90px));
		overscroll-behavior: contain;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown .elementor-nav-menu {
		padding: 6px 0 14px;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown .elementor-nav-menu > li {
		margin: 0 20px;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown .elementor-nav-menu > li + li {
		border-top: 1px solid rgba(23, 59, 44, .09);
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 56px;
		padding: 12px 4px !important;
		border: 0 !important;
		background: transparent !important;
		color: #173B2C !important;
		font-family: 'Baloo 2', sans-serif !important;
		font-size: 22px !important;
		font-weight: 700 !important;
		line-height: 1.15 !important;
		letter-spacing: -0.01em;
		white-space: normal;
		transition: color .15s ease, padding .2s ease;
	}

	/* A quiet chevron on each row; the current page gets a coral dot.
	   Elementor reuses ::after for its hover pointer (absolute, opacity 0),
	   so both are reset here. */
	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item::before {
		display: none !important;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item::after {
		content: '' !important;
		position: static !important;
		display: block !important;
		flex: none;
		width: 9px !important;
		height: 9px !important;
		margin-right: 4px;
		border-top: 2px solid #4E7079;
		border-right: 2px solid #4E7079;
		background: none !important;
		transform: rotate(45deg);
		opacity: .55 !important;
		transition: none !important;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item:hover,
	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item:focus-visible {
		color: #2E8B57 !important;
		padding-left: 10px !important;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item:focus-visible {
		outline: 3px solid #2E8B57;
		outline-offset: -3px;
		border-radius: 10px;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
		color: #2E8B57 !important;
	}

	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active::after {
		width: 10px !important;
		height: 10px !important;
		border: 0;
		border-radius: 50%;
		background: #E8874A !important;
		transform: none;
		opacity: 1 !important;
	}

	/* The burger itself: a proper 44px touch target. */
	.tma-menu .tma-header .elementor-menu-toggle {
		min-width: 44px;
		min-height: 44px;
		border-radius: 12px;
		-webkit-tap-highlight-color: transparent;
	}

	.tma-menu .tma-header .elementor-menu-toggle.elementor-active {
		background-color: rgba(23, 59, 44, .07) !important;
	}

	/* Dim the page behind the open menu; tapping it closes the menu. */
	.tma-menu-scrim {
		position: fixed;
		inset: 0;
		z-index: 45; /* under the header (50), over the page */
		background: rgba(14, 34, 25, .42);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.tma-menu-open .tma-menu-scrim {
		opacity: 1;
		visibility: visible;
	}
}

@media (min-width: 1025px) {
	.tma-menu-scrim {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tma-menu .tma-header .elementor-nav-menu__container,
	.tma-menu .tma-header .elementor-nav-menu--dropdown a.elementor-item,
	.tma-menu-scrim {
		transition: none !important;
	}
}

@media print {
	.tma-page .tma-header,
	.tma-page .tma-strip {
		display: none;
	}
}