/* ==========================================================================
   SamSam Navbar — structural CSS
   All colours/spacing/typography come from the widget's Elementor controls
   (per-instance CSS). This file only holds structure, the full-bleed
   breakout, and the mobile hamburger + dropdown.
   Mobile / tablet breakpoint: 1024px and narrower.
   ========================================================================== */

/* The widget root doubles as the "band" behind the bar. It sits above the
   content that follows it so the dropdown and the overhanging logo are
   never hidden underneath the next section. X/Y nudge is applied with the
   individual `translate` property, so it never fights other transforms. */
.samsam-navbar-widget {
	position: relative;
	z-index: 500;
	box-sizing: border-box;
	--samsam-nav-x: 0px;
	--samsam-nav-y: 0px;
	translate: var(--samsam-nav-x) var(--samsam-nav-y);
}

.samsam-navbar-fullbleed {
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

.samsam-navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

/* Top corners are always square. This is intentionally not exposed as an
   Elementor control — only the bottom corners are adjustable. */
.samsam-navbar-inner {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.samsam-navbar-side {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
}

.samsam-navbar-side--left {
	justify-content: flex-start;
}

.samsam-navbar-side--right {
	justify-content: flex-end;
}

.samsam-navbar-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.samsam-navbar-menu li {
	list-style: none;
	margin: 0;
}

.samsam-navbar-menu a {
	display: inline-block;
	text-decoration: none;
	white-space: nowrap;
}

/* Logo slot. One element, one place in the markup — its desktop position
   (left / centre / right) is just a flex `order`, so it can never be
   rendered twice. Offset X/Y + width come from the widget controls. */
.samsam-navbar-logo-wrap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 510;
}

.samsam-logo-pos-left .samsam-navbar-logo-wrap {
	order: -1;
}

.samsam-logo-pos-right .samsam-navbar-logo-wrap {
	order: 99;
}

.samsam-navbar-logo-wrap img {
	display: block;
	width: 100%;
	height: auto;
}

.samsam-navbar-logo-link {
	display: block;
}

/* ---------- Hamburger (ONE button, mobile only) ----------
   Hidden everywhere by default (the selector is deliberately specific so a
   theme's generic button rules can't make it appear on desktop). It is only
   switched on inside the mobile media queries at the bottom of this file. */
.samsam-navbar-widget .samsam-navbar-toggle {
	display: none;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	background-color: transparent;
	cursor: pointer;
	position: relative;
	z-index: 520;
	--samsam-hb-x: 0px;
	--samsam-hb-y: 0px;
	transform: translate(var(--samsam-hb-x), var(--samsam-hb-y));
}

/* Themes (Hello Elementor etc.) style EVERY <button> on hover/focus with a
   burgundy background, and on touch screens that hover state "sticks"
   after a tap. This neutralises it; the hover colour is driven by
   --samsam-hb-hover-bg (Elementor control), transparent unless set. */
.samsam-navbar-widget .samsam-navbar-toggle,
.samsam-navbar-widget .samsam-navbar-toggle:hover,
.samsam-navbar-widget .samsam-navbar-toggle:focus,
.samsam-navbar-widget .samsam-navbar-toggle:active {
	border: none;
	box-shadow: none;
	text-decoration: none;
	border-radius: 8px;
}

.samsam-navbar-widget .samsam-navbar-toggle:hover,
.samsam-navbar-widget .samsam-navbar-toggle:focus,
.samsam-navbar-widget .samsam-navbar-toggle:active {
	background-color: var(--samsam-hb-hover-bg, transparent);
}

.samsam-navbar-widget .samsam-navbar-toggle:focus:not(:focus-visible) {
	outline: none;
}

/* The icon: an inline SVG of three horizontal stripes. */
.samsam-navbar-toggle .samsam-hb-icon {
	display: block;
	width: 28px;
	height: 28px;
	fill: none;
	stroke: #1a1a1a;
	stroke-width: 2;
	stroke-linecap: round;
	overflow: visible;
	pointer-events: none;
}

.samsam-navbar-toggle .samsam-hb-line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.28s ease, opacity 0.2s ease;
}

/* Open state: top + bottom stripes cross into an X, middle one fades. */
.samsam-navbar-inner.samsam-nav-open .samsam-hb-line--top {
	transform: translateY(6px) rotate(45deg);
}

.samsam-navbar-inner.samsam-nav-open .samsam-hb-line--mid {
	opacity: 0;
}

.samsam-navbar-inner.samsam-nav-open .samsam-hb-line--bot {
	transform: translateY(-6px) rotate(-45deg);
}

/* Dropdown panel (hidden on desktop). */
.samsam-navbar-panel {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.samsam-navbar-panel,
	.samsam-navbar-toggle .samsam-hb-line {
		transition: none !important;
	}
}

/* ==========================================================================
   MOBILE LAYOUT
   Written once as a template and emitted for two cases:
     • default ("Tablet + phone")  : 1024px and narrower
     • .samsam-hb-mobile-only      : phones only, 767px and narrower
   ========================================================================== */
@media (max-width: 1024px) {

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) {
		flex-wrap: nowrap;
	}

	/* The two desktop menus are replaced by the single dropdown. */
	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-side {
		display: none;
	}

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-toggle {
		display: flex;
		order: 1;
	}

	/* Mirror-image spacer keeps the bar balanced around the hamburger. */
	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only)::after {
		content: "";
		display: block;
		flex: 0 0 40px;
		width: 40px;
		order: 3;
	}

	/* Logo hangs centred on the bar's bottom edge. `translate` (the
	   individual property) does the centring so it stacks cleanly with
	   the logo's X/Y `transform` controls. */
	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-logo-wrap {
		position: absolute;
		left: 50%;
		top: 100%;
		order: 2;
		translate: -50% -55%;
	}

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 16px;
		right: 16px;
		margin-top: 8px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
		padding: 10px 8px;
		/* Above the logo (510) and the hamburger (520). */
		z-index: 530;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only).samsam-nav-open .samsam-navbar-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-panel a {
		display: block;
		padding: 12px 16px;
		color: #1a1a1a;
		text-decoration: none;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		border-radius: 10px;
		transition: background-color 0.15s ease;
	}

	.samsam-navbar-widget .samsam-navbar-inner:not(.samsam-hb-mobile-only) .samsam-navbar-panel a:hover {
		background-color: rgba(143, 170, 27, 0.12);
	}
}

@media (max-width: 767px) {

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only {
		flex-wrap: nowrap;
	}

	/* The two desktop menus are replaced by the single dropdown. */
	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-side {
		display: none;
	}

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-toggle {
		display: flex;
		order: 1;
	}

	/* Mirror-image spacer keeps the bar balanced around the hamburger. */
	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only::after {
		content: "";
		display: block;
		flex: 0 0 40px;
		width: 40px;
		order: 3;
	}

	/* Logo hangs centred on the bar's bottom edge. `translate` (the
	   individual property) does the centring so it stacks cleanly with
	   the logo's X/Y `transform` controls. */
	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-logo-wrap {
		position: absolute;
		left: 50%;
		top: 100%;
		order: 2;
		translate: -50% -55%;
	}

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 16px;
		right: 16px;
		margin-top: 8px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
		padding: 10px 8px;
		/* Above the logo (510) and the hamburger (520). */
		z-index: 530;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only.samsam-nav-open .samsam-navbar-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-panel a {
		display: block;
		padding: 12px 16px;
		color: #1a1a1a;
		text-decoration: none;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		border-radius: 10px;
		transition: background-color 0.15s ease;
	}

	.samsam-navbar-widget .samsam-navbar-inner.samsam-hb-mobile-only .samsam-navbar-panel a:hover {
		background-color: rgba(143, 170, 27, 0.12);
	}
}