/**
 * Header, mega menu, and mobile drawer — Concierge Bairro Alto Hotel
 *
 * Tokens shared with concierge-base.css. `.site-` prefix for everything
 * that's page structure (header, footer, modals), distinct from the
 * `.exp-`/`.arc-` prefix already used for content.
 */

/* ---------------------------------------------------------------
 * Integration with Blocksy's Header Builder
 *
 * The header is now the parent theme's (Appearance → Customize →
 * Header), assembled from Header Builder items — there's no longer a
 * `.site-header` of our own wrapping everything. The native "Menu" item
 * still uses `wp_nav_menu()` underneath (the mega menu comes in via
 * `bah_inject_mega_menu_walker()`, in concierge-helpers.php, with no need
 * for a "Text" item/shortcode); `[bah_lang_switcher]` is the one that
 * sits in a "Text" item.
 * ------------------------------------------------------------- */

.site-skip {
	position: absolute;
	top: -48px;
	left: 16px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--bah-dark);
	color: var(--bah-on-dark);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.2s ease;
}

.site-skip:focus {
	top: 16px;
}

.site-shell {
	width: 100%;
	max-width: var(--bah-shell);
	margin-inline: auto;
}

/* ---------------------------------------------------------------
 * Header
 * ------------------------------------------------------------- */

/*
 * Two color variants, confirmed pixel by pixel in Figma/Penpot:
 * transparent over the homepage hero (dark background, light text/logo,
 * --bah-on-dark/--bah-border tokens) and solid on the other pages (white
 * background, dark text/logo, --bah-dark/#1C1513). `.site-header` alone
 * sets the light variant by default; `--solid` flips it.
 */
.site-header {
	position: relative;
	z-index: 40;
	width: 100%;
	font-family: var(--bah-sans);
	color: var(--bah-on-dark);
}

.site-header--solid {
	color: var(--bah-dark);
}

.site-header__bar {
	position: relative;
}

.site-header--solid .site-header__bar {
	position: sticky;
	top: 0;
	padding-block: 12px;
	background: var(--bah-paper);
}

.site-header--transparent {
	position: absolute;
	inset-inline: 0;
	top: 0;
}

.site-header--transparent .site-header__bar {
	min-height: 228px;
	padding-top: 16px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
}

/*
 * Thin decorative lines at the bar's outer corners (only on the home,
 * Figma doesn't repeat them on other pages): 32px from the screen's
 * actual margin, not from the site-shell's width — that's why they sit
 * outside it, positioned relative to `.site-header__bar` itself.
 */
.site-header__edge-rule {
	position: absolute;
	top: 46px;
	width: 134px;
	height: 1px;
	background: var(--bah-accent);
	opacity: 0.6;
	pointer-events: none;
}

.site-header__edge-rule--start {
	left: 32px;
}

.site-header__edge-rule--end {
	right: 32px;
}

.site-header__row,
.site-header__search-row {
	/*
	 * Figma doesn't have .site-shell's extra padding-inline here — the
	 * Navbar's content takes up exactly 1488px, flush against that
	 * width's edges (confirmed in the file's coordinates: the menu
	 * group starts ~216px from the screen's actual edge, matching
	 * .site-shell's centering margin alone, without adding the 24px of
	 * padding).
	 */
	padding-inline: 0;
}

.site-header__row {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 60px;
}

@media (min-width: 1181px) {
	.site-header__row {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 32px;
	}

	.site-header__burger {
		grid-row: 1;
		grid-column: 1;
	}

	.site-nav {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
	}

	.site-logo {
		grid-row: 1;
		grid-column: 2;
		justify-self: center;
	}

	.site-header__actions {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
	}
}

.site-header__burger {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.site-header__burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.site-header__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/*
 * The actual button that opens the mobile drawer (Blocksy's Header
 * Builder "trigger" item, `.ct-header-trigger`) — unlike
 * `.site-header__burger` above (no longer in use, it was from the
 * pre-Blocksy header), this is the one that actually shows up on the
 * site. Its SVG gets swapped by `bah_header_trigger_burger_svg()` in
 * concierge-helpers.php (`blocksy:header:trigger:svg` filter) to give
 * each bar its own class — Blocksy itself already toggles
 * `aria-expanded` on the `<button>` on open/close (`overlay.js`), so the
 * animation only needs to react to that attribute.
 *
 * Blocksy already brings its own hamburger→X animation for `[data-type]`
 * icons (`trigger.scss`, parent theme): when `aria-expanded="true"`,
 * `:nth-child` rules rewrite the bars' `x`/`y`/`width` to ITS OWN icon's
 * geometry (18px wide, y=6.15px) and apply their own rotation — higher
 * specificity than a plain `.bah-burger__bar--N` (it adds `rect` as an
 * extra type selector), so it always used to win and produced a crooked
 * X, with bar 1/3 jumping to Blocksy's width/position mid-animation
 * instead of staying at Penpot's geometry (viewBox 40x35, 26px bars).
 * The `!important`s below are to guarantee this rule is the one that
 * wins, without depending on beating their specificity selector by
 * selector.
 *
 * Each bar's rotation point is its own center: since
 * `transform-box: fill-box` returned wrong bounding boxes in testing
 * (Chromium only recalculated the untransformed bar's correctly), I use
 * `transform-origin` instead, with each bar's exact coordinates within
 * the `viewBox` (the default value, `view-box`) — with no ambiguity at
 * all.
 */
.bah-burger__bar {
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.ct-header-trigger[aria-expanded="true"] .ct-icon[data-type] .bah-burger__bar {
	x: 7px !important;
	width: 26px !important;
}

.ct-header-trigger[aria-expanded="true"] .ct-icon[data-type] .bah-burger__bar--1 {
	y: 8px !important;
	transform-origin: 20px 9px !important;
	transform: translateY(8.8984px) rotate(45deg) !important;
}

.ct-header-trigger[aria-expanded="true"] .ct-icon[data-type] .bah-burger__bar--2 {
	opacity: 0 !important;
}

.ct-header-trigger[aria-expanded="true"] .ct-icon[data-type] .bah-burger__bar--3 {
	y: 25px !important;
	transform-origin: 20px 26px !important;
	transform: translateY(-8.1016px) rotate(-45deg) !important;
}

.site-logo {
	display: flex;
	align-items: center;
	margin-inline: auto;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.site-logo__mark {
	display: block;
	width: 58px;
	height: 72px;
}

.site-nav {
	flex: 1;
}

/*
 * The menu comes from Blocksy's Header Builder native "Menu" item — not
 * from our own `<nav class="site-nav">` (that no longer exists; Blocksy
 * decides the markup around it). The real anchor is `.menu-container`
 * (Blocksy's `<nav>`, a fixed class regardless of configuration) >
 * `.menu` (the `<ul>`, also a fixed Blocksy class — confirmed by looking
 * at the generated HTML, not the `.site-nav__list` this theme used to
 * use when it had its own header). `<li class="menu-item ...">` is still
 * WordPress's; plain submenus still use `<ul class="sub-menu">` (the
 * mega menu's panel adds that same class too — see
 * `Bah_Mega_Menu_Walker`/`bah_inject_mega_menu_walker()` in
 * concierge-helpers.php). Opening/closing via :hover/:focus-within/
 * .is-menu-intent here is a reinforcement of our own — Blocksy's "Menu"
 * item already brings its own JavaScript interaction (mouse, keyboard,
 * touch) — `.is-menu-intent` specifically is our hover-intent class (see
 * initMegaMenuHoverIntent() in concierge.js), layered on top of that so
 * the panels don't pop open on every stray hover.
 */
.menu-container .menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-container .menu > .menu-item {
	position: relative;
}

.menu-container .menu > .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 8px 0;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.24px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.3s ease;
}

/*
 * The design's chevron (file "chevron-down 1.svg"). The SVG itself is
 * swapped in PHP (`bah_replace_dropdown_chevron_svg()`, in
 * concierge-helpers.php) — the `<span class="ct-toggle-dropdown-desktop">`
 * it lives in is Blocksy's (`blocksy_handle_nav_menu_item_title()`, parent
 * theme), but the SVG inside it becomes ours, with `stroke="currentColor"`
 * already in the markup itself (not a mask/pseudo-element on top). This
 * here is just the animation: rotates 180°.
 *
 * `.is-menu-intent` (our own class, added after the hover-intent delay —
 * see initMegaMenuHoverIntent() in concierge.js) instead of Blocksy's own
 * `.ct-active` (added instantly on mouseenter, no delay): the chevron
 * needs to flip at the same moment the dropdown itself becomes visible
 * (below), not ~200ms earlier — a chevron that's already flipped while
 * nothing else has opened yet reads as broken. `:focus-within` stays
 * separate and undelayed, same reasoning as the dropdown's own trigger
 * just below.
 */
.menu-container .ct-toggle-dropdown-desktop svg {
	transition: transform var(--bah-menu-duration) var(--bah-menu-ease), stroke 0.3s ease;
}

.menu-container .menu-item.is-menu-intent .ct-toggle-dropdown-desktop svg,
.menu-container .menu-item:focus-within .ct-toggle-dropdown-desktop svg {
	transform: rotate(180deg);
}

.menu-container .menu > .menu-item > a:hover,
.menu-container .menu > .menu-item > a:focus-visible {
	color: var(--bah-accent);
}

/*
 * The submenu panel ("supermenu"): wider than a regular dropdown,
 * Playfair titles like the rest of the site, and two columns when it has
 * more than 3 items — to fit Comer e Beber's 5 categories, for example,
 * without a long list. Still just wp_nav_menu's native structure (top
 * item + children); no extra data being invented.
 *
 * `:not(.site-mega)` on every selector in this section: the mega menu's
 * panel is also a `.sub-menu` (see the comment on
 * `Bah_Mega_Menu_Walker::start_lvl()`), and since both classes land on
 * the same element, without this exclusion the two rules used to
 * conflict property by property (same specificity,
 * `.menu-container .menu .sub-menu`/`.site-mega`) — that's what capped
 * the mega menu at 560px wide and shifted it with this rule's
 * `transform: translateX(-50%)`, which `.site-mega` never got around to
 * resetting.
 *
 * Opens on `.is-menu-intent` (our own class, added by
 * initMegaMenuHoverIntent() in concierge.js only once the pointer has
 * rested on the item for `--bah-menu-intent`, ~200ms) instead of a plain
 * `:hover` — a raw `:hover` opened every panel the pointer merely swept
 * past on its way elsewhere, which felt twitchy on a wide nav; the delay
 * commits to opening only once the visitor actually pauses on the item.
 * `:focus-within` stays undelayed on purpose (keyboard Tab should reveal
 * the panel immediately, not make a keyboard user wait out a mouse-only
 * timer) and also keeps this working with JavaScript disabled, since
 * `.is-menu-intent` never gets added at all in that case.
 *
 * `!important` on `transform`: Blocksy's own dropdown-animation.scss
 * (parent theme, "type-1" — the default "Dropdown Animation" Customizer
 * setting) sets its OWN `translate3d(0, 10px, 0)` → `translate3d(0, 0, 0)`
 * on `.ct-active > .sub-menu`, at the exact same specificity as our base
 * rule below. Blocksy adds `.ct-active` the instant the pointer enters
 * (no delay — see menu.js), which is ~200ms before our own
 * `.is-menu-intent` lands; during that gap the tie goes to whichever
 * stylesheet loads later, which isn't guaranteed to be ours. `!important`
 * pins our own horizontal-only `translateX(-50%)` (identical in both
 * states, so Blocksy's vertical shift never gets a chance to show through
 * either) instead of relying on load order.
 *
 * The reveal itself is a `clip-path` wipe, not a `transform` slide: the
 * panel's own box stays pinned at `top: 100%` (flush against the menu
 * item) throughout, so it never occupies space above the nav bar's bottom
 * edge — a `translateY` reveal, whichever direction, means the box starts
 * *somewhere else* before animating into place, and starting above that
 * line is what caused it to visibly slide down across the nav bar's own
 * text in the first place (starting below, the other way around, avoided
 * that overlap but read as rising up rather than unrolling down). `clip-
 * path: inset()` instead keeps the box exactly where it belongs the whole
 * time and only changes how much of it is *visible*: closed, the bottom
 * inset is 100% (nothing shown); open, it's 0% (fully shown) — since the
 * top inset stays 0 throughout, the visible region always grows downward
 * from the panel's own top edge, giving the same top-to-bottom motion as
 * before without the box itself ever leaving its resting position. Because
 * the top inset never moves, this also clips away any shadow that would
 * otherwise blur upward past that top edge — which is what makes it safe to
 * bring the shadow back below (same 5-layer value as the sticky header's
 * own lift, `[data-header*="type-1"] [data-sticky*="yes"]` in
 * concierge-base.css): with the old `translateY` reveal the shadow bled
 * over the nav bar regardless of the panel's position; with `clip-path` it
 * can't, so there's no need to keep the two rules split apart by more than
 * which selector each lives on.
 */
.menu-container .menu .sub-menu:not(.site-mega) {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	margin: 0;
	padding: 28px;
	width: max-content;
	min-width: 320px;
	max-width: 560px;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 4px 32px;
	background: var(--bah-paper);
	color: var(--bah-body);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px -1px rgba(0, 0, 0, 0.04), 0px 10px 16px -2px rgba(0, 0, 0, 0.05), 0px 20px 32px -4px rgba(0, 0, 0, 0.06), 0px 40px 64px -8px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) !important;
	clip-path: inset(0 0 100% 0);
	transition: opacity var(--bah-menu-duration) var(--bah-menu-ease), clip-path var(--bah-menu-duration) var(--bah-menu-ease), visibility var(--bah-menu-duration);
}

.menu-container .menu > .menu-item.is-menu-intent > .sub-menu:not(.site-mega),
.menu-container .menu > .menu-item:focus-within > .sub-menu:not(.site-mega) {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) !important;
	clip-path: inset(0 0 0 0);
}

.menu-container .menu .sub-menu:not(.site-mega) a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 4px;
	font-family: var(--bah-display);
	font-size: clamp(16px, calc(15.65px + 0.091vw), 17px);
	font-weight: 500;
	color: var(--bah-ink);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--bah-rule);
}

.menu-container .menu .sub-menu:not(.site-mega) li:last-child > a {
	border-bottom: 0;
}

.menu-container .menu .sub-menu:not(.site-mega) a:hover,
.menu-container .menu .sub-menu:not(.site-mega) a:focus-visible {
	color: var(--bah-accent);
}

/*
 * The mega menu's panel (Bah_Mega_Menu_Walker), measured directly from
 * the Figma file ("Menu - Comer e Beber", "Menu - Experiências", "Menu -
 * Compras" — all three use the same layout): a bar spanning the full
 * width of the screen (not a floating card attached to the menu item),
 * --bah-paper background, --bah-border border, the same soft 5-layer
 * shadow as the sticky header's own lift (`[data-header*="type-1"]
 * [data-sticky*="yes"]` in concierge-base.css — see the comment on
 * `.menu-container .menu .sub-menu:not(.site-mega)` above for why it's
 * safe to reuse here now). Inside, a centered 1488px core with two
 * subcategory columns
 * (448px each, 64px gap) and the "featured" column.
 *
 * `position: fixed` instead of `absolute` on purpose: an `absolute`
 * element only spans the full screen width if its nearest positioned
 * ancestor is also that wide, and there's no guarantee of that inside
 * Blocksy's "Menu" item — Blocksy's own `<nav class="menu-container">`
 * already comes with `position: relative` (for its own regular
 * dropdowns), which is closer than anything of ours and locks `.site-mega`
 * to the menu's (narrow) width, not the screen's — that's what happened
 * in practice. Fixed ignores ancestors and always positions itself
 * against the viewport. `top` uses `--header-height`, the variable
 * Blocksy itself calculates and maintains (used in its own dropdowns'
 * `max-height`, instead of a fixed pixel value) — it matches the
 * header's actual height whatever Header Builder row the "Menu" item
 * ends up on.
 *
 * `.site-mega` accumulates the `sub-menu` class (see
 * `Bah_Mega_Menu_Walker::start_lvl()`) so Blocksy's "Menu" item's
 * JavaScript doesn't break — but that also brings in Blocksy's dropdown
 * CSS (`[class*="animated-submenu"] > .sub-menu`), which sets
 * `position`, `width: 200px`, and `border-radius` by default. The
 * `!important`s below (only on the position/width properties) guarantee
 * the full-width bar regardless of stylesheet load order; opening/
 * closing (opacity/visibility) is deliberately left out, so both the
 * `:hover`/`:focus-within` below and the `.ct-active` class Blocksy adds
 * to the `<li>` can still reveal the panel.
 *
 * `top: 84px` is the header's actual height (without the admin bar). The
 * WordPress admin bar is `position: fixed`, so it doesn't shift other
 * `fixed` elements like this one — only the rest of the page, via
 * `margin-top` on `<html>`. `body.admin-bar` (a class WP adds on its own
 * when the bar is visible) adds its 32px; `.site-mega` only exists
 * ≥1181px (see the `@media (max-width: 1180px)` further below, which
 * hides `.site-nav` and switches to the mobile drawer), a range where the
 * admin bar never goes above 46px — so it doesn't need the bar's mobile
 * variant.
 */
.menu-container .menu .site-mega {
	position: fixed !important;
	top: 84px !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	margin-top: 0;
	/*
	 * `position: fixed` only escapes ancestors' width/position
	 * constraints — it doesn't escape their stacking context. This site
	 * has the header inside `.ct-sticky-container` (sticky active,
	 * confirmed by testing), which on its own already creates a stacking
	 * context; a low z-index here could end up underneath things from
	 * that context. 999 is so there's no doubt about it.
	 */
	z-index: 999;
	background: var(--bah-paper);
	border-block: 1px solid var(--bah-border);
	border-radius: 0;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.03), 0px 4px 8px -1px rgba(0, 0, 0, 0.04), 0px 10px 16px -2px rgba(0, 0, 0, 0.05), 0px 20px 32px -4px rgba(0, 0, 0, 0.06), 0px 40px 64px -8px rgba(0, 0, 0, 0.07);
	opacity: 0;
	visibility: hidden;
	/*
	 * Same `clip-path` wipe as the smaller `.sub-menu:not(.site-mega)`
	 * dropdown above (see the comment on that rule for the full reasoning):
	 * the bar's own box stays pinned at `top: 84px` throughout — a
	 * `transform` reveal, whichever direction, meant the box spent part of
	 * the animation somewhere other than its resting position, and starting
	 * above that line (its original `translateY(-18px)`) is what let it
	 * slide down across the nav bar's own text. The bottom inset shrinking
	 * from 100% to 0% still reads as the same top-to-bottom motion, just
	 * without the box ever leaving where it belongs. `!important` on
	 * `transform` for the same reason as that rule: Blocksy's own type-1
	 * dropdown-animation sets a competing `translate3d` on `.ct-active >
	 * .sub-menu`, and `.site-mega`'s `<li>` still carries Blocksy's
	 * `animated-submenu` class (needed so its own JS keeps working — see
	 * the comment on `.menu-container .menu .site-mega` below), so it's
	 * just as exposed to that tie; pinning a static `translateY(0)` in both
	 * states neutralizes it instead of animating transform at all.
	 */
	transform: translateY(0) !important;
	clip-path: inset(0 0 100% 0);
	transition: opacity var(--bah-menu-duration) var(--bah-menu-ease), clip-path var(--bah-menu-duration) var(--bah-menu-ease), visibility var(--bah-menu-duration);
}

body.admin-bar .menu-container .menu .site-mega {
	top: 116px !important;
}

.menu-container .menu > .menu-item.is-menu-intent > .site-mega,
.menu-container .menu > .menu-item:focus-within > .site-mega {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.menu-container .menu .sub-menu:not(.site-mega),
	.menu-container .menu .site-mega,
	.menu-container .ct-toggle-dropdown-desktop svg {
		transition-duration: 0.01ms !important;
	}
}

/*
 * `max-width`/`margin-inline` now come from the `.ct-container` added
 * alongside this class in the walker (`Bah_Mega_Menu_Walker::start_lvl()`)
 * — the same responsive width/margins as the rest of the header, instead
 * of a fixed `max-width: 1488px` with no breathing room below that.
 * `flex-wrap` as a safety net: between the ~1181px where the mega menu
 * starts appearing and the width where the 3 columns fit comfortably, it
 * lets them wrap to a second row instead of squeezing them.
 */
.site-mega__inner {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 64px;
	padding-block: 32px;
}

.site-mega__col {
	flex: 1 1 320px;
	max-width: 448px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-mega__col li {
	padding: 4px 0;
	border-bottom: 1px solid #D8C6B0;
}

.site-mega__col a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--bah-display);
	font-size: clamp(19px, calc(17.93px + 0.273vw), 22px);
	font-weight: 500;
	color: var(--bah-ink);
	text-decoration: none;
}

.site-mega__col a svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--bah-soft);
}

.site-mega__col a:hover,
.site-mega__col a:focus-visible {
	color: var(--bah-accent);
}

.site-mega__col a:hover svg path {
	fill: var(--bah-accent);
}

.site-mega__panel {
	flex: 1 1 320px;
	max-width: 448px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.site-mega__panel-eyebrow {
	margin: 0;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--bah-soft);
}

.site-mega__panel-title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(26px, calc(23.16px + 0.729vw), 34px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--bah-body);
}

.site-mega__panel-text {
	margin: 0;
	font-family: var(--bah-display);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--bah-body);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: none;
}

.site-header__contact {
	height: 44px;
	padding: 8px 24px;
	background: var(--bah-border);
	border-color: var(--bah-border);
	color: #1C1513;
	font-family: "Inter", var(--bah-sans);
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.site-header__contact:hover,
.site-header__contact:focus-visible {
	background: #EAD9C0;
	border-color: #EAD9C0;
	color: #1C1513;
}

/* On the light header, the button flips: dark background, light text —
   always standing out from whatever background surrounds it. */
.site-header--solid .site-header__contact {
	background: var(--bah-dark);
	border-color: var(--bah-dark);
	color: var(--bah-on-dark);
}

.site-header--solid .site-header__contact:hover,
.site-header--solid .site-header__contact:focus-visible {
	background: #3A2A25;
	border-color: #3A2A25;
	color: var(--bah-on-dark);
}

/*
 * Header "Contacto" button — mobile only (≤689px, Blocksy's own
 * breakpoint). On tablet/desktop, Blocksy's native button stays
 * ("FALE CONNOSCO", `.ct-button` class, unchanged) — see
 * `template-parts/header-button-inline.php` and
 * `bah_header_button_item_view_path()` in concierge-helpers.php: both
 * buttons (the native one, included as-is, and this one) live in the
 * markup, and it's just this pair of media queries that decides which
 * one stays visible at each width.
 *
 * "Outline" style matching the mobile drawer header's "Contacto" button
 * in Penpot's "Mobile Menu - light" (`.site-mobile-nav__contact`, further
 * below in this file) — not `.site-header__contact` above, which is the
 * old, pre-Blocksy header's solid variant and is no longer in use.
 */
@media (max-width: 689px) {
	.ct-header-cta {
		display: none !important;
	}

	.ct-header-cta.site-header__cta-mobile-only {
		display: block !important;
	}
}

@media (min-width: 690px) {
	.site-header__cta-mobile-only {
		display: none !important;
	}
}

.site-header__cta {
	flex: none;
	padding: 8px;
	line-height: 1.2;
	background: transparent;
	border: 1px solid var(--bah-dark);
	border-radius: var(--bah-radius);
	color: var(--bah-dark);
	font-family: var(--bah-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
	background: var(--bah-dark);
	color: var(--bah-on-dark);
}

/*
 * Transparent row over the hero (e.g. homepage, before scrolling) —
 * `[data-transparent-row="yes"]` is set by Blocksy itself on the row,
 * depending on the Header Builder's configuration; on scroll, the fixed
 * ("sticky slide") bar is a separate second instance, already with
 * `data-transparent-row="no"`, so it goes back to the default dark-on-
 * light style above on its own, with no JS needed.
 */
[data-transparent-row="yes"] .site-header__cta {
	border-color: var(--bah-border);
	color: var(--bah-on-dark);
}

[data-transparent-row="yes"] .site-header__cta:hover,
[data-transparent-row="yes"] .site-header__cta:focus-visible {
	background: var(--bah-on-dark);
	border-color: var(--bah-on-dark);
	color: var(--bah-dark);
}

.site-lang {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--bah-sans);
	font-size: 18px;
	font-weight: 600;
}

/*
 * Dark-on-light by default (most header rows in Blocksy have a light
 * background). `--on-dark` flips it, for when
 * `[bah_lang_switcher variant="on-dark"]` is placed on a transparent/dark
 * Header Builder row — see bah_language_switcher().
 */
.site-lang li a {
	color: rgba(36, 25, 22, 0.5);
	text-decoration: none;
}

.site-lang li a.is-current,
.site-lang li a:hover {
	color: var(--bah-dark);
}

.site-lang li + li::before {
	content: "/";
	margin-right: 6px;
	color: rgba(36, 25, 22, 0.5);
}

.site-lang--on-dark li a {
	color: rgba(238, 231, 222, 0.5);
}

.site-lang--on-dark li a.is-current,
.site-lang--on-dark li a:hover {
	color: var(--bah-border);
}

.site-lang--on-dark li + li::before {
	color: rgba(238, 231, 222, 0.5);
}

.site-lang--static {
	font-family: var(--bah-sans);
	font-size: 18px;
	font-weight: 600;
	color: var(--bah-dark);
}

.site-lang--static.site-lang--on-dark {
	color: var(--bah-border);
}

/*
 * Search bar injected via the `[bah_site_search]` shortcode (see
 * concierge-helpers.php) into a "Text" item on the Header Builder's
 * bottom row (`data-row="bottom"`) — there's no longer a
 * `.site-header__search-row` of our own centering this, Blocksy is what
 * wraps the item; `margin-inline: auto` here is what centers the bar
 * within that row.
 *
 * Two color variants, just like `.site-lang`/`.site-lang--on-dark`:
 * dark-on-light by default (most pages, solid header),
 * `.site-search--on-dark` light-on-dark for when the shortcode carries
 * `variant="on-dark"` (transparent row over the homepage hero).
 */
.site-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 44px;
	width: 326px;
	margin-inline: auto;
	padding-inline: 16px;
	background: rgba(0, 0, 0, 0.004);
	border: 1px solid var(--bah-dark);
	border-radius: 999px;
}

.site-search svg {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--bah-dark);
	pointer-events: none;
}

.site-search input {
	flex: 1;
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--bah-sans);
	font-size: 16px !important;
	line-height: 1.7;
	color: #1C1513;
}

.site-search input::placeholder {
	color: #1C1513;
	opacity: 1;
}

.site-search--on-dark {
	border-color: var(--bah-border);
}

.site-search--on-dark svg {
	color: #F9F9F9;
}

.site-search--on-dark input {
	color: #F9F9F9 !important;
}

.site-search--on-dark input::placeholder {
	color: #F9F9F9;
	opacity: 1;
}

.site-search input:focus-visible {
	outline: 2px solid var(--bah-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Shared overlay (mobile mega menu closed by clicking outside, modals)
 * ------------------------------------------------------------- */

/*
 * `z-index: 55`: above Blocksy's `#header` (`.ct-header`, z-index 50) —
 * the dark overlay has to cover the navigation bar too when a modal
 * opens, not just the content underneath it. Below 60
 * (`.site-mobile-nav`) and 999 (`.site-mega`): those two also use this
 * overlay (showOverlay(), in concierge.js) but need to sit above it, not
 * below, while open.
 */
.site-overlay {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(36, 25, 22, 0.55);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.site-overlay[hidden] {
	display: none;
}

.site-overlay.is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.site-overlay {
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
 * Mobile drawer content injected into Blocksy's own offcanvas
 * (bah_offcanvas_mobile_top()/bottom(), in concierge-helpers.php) —
 * always the light variant ("Mobile Menu - light" in Penpot), regardless
 * of the page. These are bare classes (no `.site-mobile-nav` ancestor
 * requirement) since the elements now render inside Blocksy's `#offcanvas`
 * rather than a wrapper of our own.
 * ------------------------------------------------------------- */

.site-mobile-nav__eyebrowrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.site-mobile-nav__eyebrow {
	margin: 0;
	font-family: var(--bah-sans);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.site-mobile-nav__eyebrowrule {
	display: block;
	width: 40px;
	height: 1px;
	background: rgba(170, 136, 102, 0.5);
}

.site-mobile-nav__search {
	background: transparent;
	border-color: var(--bah-border);
	margin-inline: 0;
}

.site-mobile-nav__search svg {
	color: var(--bah-soft);
}

.site-mobile-nav__search input {
	color: #6C635B;
}

.site-mobile-nav__search input::placeholder {
	color: #6C635B;
	opacity: 1;
}

/*
 * `.site-mobile-nav__arrow` is also reused as `bah_icon_arrow_right()`'s
 * markup elsewhere (e.g. the archive category cards' "Saber Mais" link,
 * in section-categories.php) — kept as a bare class for that reason, even
 * though the mobile-menu list it was originally paired with
 * (`.site-mobile-nav__toplist`, pre-Blocksy) no longer exists.
 */
.site-mobile-nav__arrow {
	flex: none;
	width: 17px;
	height: 15px;
	color: var(--bah-accent);
	transition: transform 0.2s ease;
}

.site-mobile-nav__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(36, 25, 22, 0.12);
}

.site-mobile-nav__contactsheading {
	margin: 0 0 4px;
	font-family: var(--bah-display);
	font-size: clamp(18px, calc(17.29px + 0.182vw), 20px);
	font-weight: 700;
	color: var(--bah-accent);
}

.site-mobile-nav__contactline {
	margin: 0;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(36, 25, 22, 0.6);
}

.site-mobile-nav__contactline a {
	color: inherit;
	text-decoration: none;
}

.site-mobile-nav__contactline a:hover {
	color: var(--bah-accent);
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

@media (max-width: 1180px) {
	.site-nav,
	.site-header__edge-rule {
		display: none;
	}

	/*
	 * The header's search bar (Header Builder's bottom row,
	 * `data-row="bottom"`) disappears on mobile/tablet just like
	 * `.site-nav` — the mobile drawer already brings its own
	 * (`.site-mobile-nav__search`, different markup, added via
	 * `bah_offcanvas_mobile_top()` in concierge-helpers.php).
	 */
	#header [data-row="bottom"] {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__row {
		min-height: 72px;
	}

	.site-logo {
		margin-inline: auto;
	}

	.site-header__actions .site-lang {
		display: none;
	}

	.site-header--transparent .site-header__bar {
		background: var(--bah-dark);
	}

	.site-header__contact {
		padding: 10px 16px;
		background: transparent;
		border: 1px solid rgba(216, 198, 176, 0.6);
		color: inherit;
	}

	.site-header--solid .site-header__contact {
		border-color: rgba(36, 25, 22, 0.6);
	}
}

@media (max-width: 560px) {
	.site-header__row {
		gap: 12px;
	}

	.site-header__contact span {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Responsive Mobile Menu
 *
 * `#offcanvas` is also `position: fixed` (set by Blocksy), so it suffers
 * from the same issue as `.site-mega` above: the WordPress admin bar
 * doesn't shift it on its own. `body.admin-bar` adds its 32px; below
 * 782px (WordPress's own default breakpoint — not ours — where the
 * admin bar becomes 46px tall) 46px is added instead.
 * ------------------------------------------------------------- */

 #offcanvas {
	top: 58px;
	height: calc(100dvh - 58px);
 }

body.admin-bar #offcanvas {
	top: 90px;
	height: calc(100dvh - 90px);
}

@media screen and (max-width: 782px) {
	body.admin-bar #offcanvas {
		top: 104px;
		height: calc(100dvh - 104px);
	}
}

/* ---------------------------------------------------------------
 * Mobile drawer menu items (`.mobile-menu`, Blocksy's Header Builder
 * "Mobile Menu" item — the one actually in use, unlike the pre-Blocksy
 * dead code that used to live above this section). Font/size/color
 * already come from the Customizer (Header Builder → "Mobile Menu" item),
 * already matching Penpot; only missing the arrow on each link
 * (`bah_mobile_menu_item_arrow()` in concierge-helpers.php) and the "Fale
 * Connosco" button (`.contact-btn`, a CSS class added to the item under
 * Appearance → Menus).
 * ------------------------------------------------------------- */

.mobile-menu .menu-item:not(.contact-btn) .ct-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between !important;
	gap: 12px;
}

.mobile-menu .site-mobile-menu__arrow {
	flex: none;
}

/*
 * "Fale Connosco" — a solid button, just like in Penpot, instead of a
 * category link: no arrow (excluded in `bah_mobile_menu_item_arrow()`),
 * the site's normal font instead of the links' large Playfair Display
 * (`!important` to beat the Customizer's dynamic CSS, which also sets a
 * font for `.mobile-menu .ct-menu-link`), solid dark background.
 */
.mobile-menu .contact-btn {
	margin-top: 8px;
	border-bottom: 0 !important;
}

.mobile-menu .contact-btn .ct-menu-link {
	justify-content: center;
	padding: 8px 24px !important;
	background: var(--bah-dark);
	border-radius: var(--bah-radius);
	color: var(--bah-on-dark) !important;
	font-family: var(--bah-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
	margin-top: 16px;
}

.mobile-menu .contact-btn .ct-menu-link:hover,
.mobile-menu .contact-btn .ct-menu-link:focus-visible {
	background: #3A2A25;
}

.ct-panel-content {
	justify-content: start !important;
}

#offcanvas .ct-panel-content-inner {
	gap: 24px !important; 
}

#offcanvas .ct-panel-content-inner>* {
	--margin: 0 !important;
}

#offcanvas .ct-header-text p {
	display: none;
}

#offcanvas .site-search {
	width: 100% !important;
	max-width: 100% !important;
}

#offcanvas .site-mobile-nav__contacts {
	width: 100%;
}

#offcanvas .site-lang {
	margin: 0;
}

#offcanvas .ct-header-socials {
	order: 7;
	display: flex;
	justify-content: start;
	width: 100%;
}

#offcanvas .ct-header-socials .ct-social-box a svg {
	width: 24px !important;
	height: 24px !important;
}