/**
 * Casas Choice — site-wide header / nav.
 *
 * 1. "Contactos" header button        (.nav-btn)
 * 2. Language switcher trigger + modal (.cc-lang-*, .cc-modal)
 * 3. Mobile off-canvas menu            (.mobile-menu, .cc-mobile-*, .cc-submenu-*)
 *
 * Uses the theme's own --theme-palette-color-* tokens (style.css) — matches
 * the Penpot "Compras" nav board 1:1. Some rules need !important because
 * Blocksy's own generated header/menu CSS targets the same elements with
 * comparable specificity (confirmed necessary for the header override in
 * assets/css/imovel.css already).
 */

:root {
	/* Fallback only (matches the mobile header's own height) — nav.js
	   measures the real, currently-rendered header (`#header`) on load
	   and on resize and keeps this in sync, so the off-canvas panel sits
	   right below it whether that's 62px on mobile, taller on tablet, or
	   pushed down further by the WP admin bar when logged in. */
	--cc-header-height: 62px;
}

/* -------------------------------------------------------------------- *
 * 0. Off-canvas panel — starts below the header instead of covering it
 * -------------------------------------------------------------------- */

#offcanvas {
	top: var(--cc-header-height) !important;
	height: calc(100vh - var(--cc-header-height)) !important;
}

#offcanvas .ct-panel-actions {
	display: none;
}

#offcanvas .mobile-menu>ul {
	border-top: 0;
}

/* -------------------------------------------------------------------- *
 * 1. "Contactos" header button
 * -------------------------------------------------------------------- */

#header [data-items] ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.menu>li>.ct-menu-link {
	padding: 0;
}

.ct-header .menu-item.nav-btn {
	margin-left: 4px;
}

.ct-header .menu-item.nav-btn {
	height: 36px !important;
}

.ct-header .menu-item.nav-btn > a.ct-menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 26px !important;
	background-color: var(--theme-palette-color-5) !important;
	color: var(--theme-palette-color-9) !important;
	border: 1px solid rgba(196, 199, 202, 0.6);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ct-header .menu-item.nav-btn > a.ct-menu-link:hover,
.ct-header .menu-item.nav-btn > a.ct-menu-link:focus-visible {
	background-color: var(--theme-palette-color-6) !important;
	border-color: var(--theme-palette-color-7);
}

/* -------------------------------------------------------------------- *
 * 2. Language switcher — desktop trigger
 * -------------------------------------------------------------------- */

.cc-lang-item--hidden {
	display: none !important;
}

.ct-header li.cc-lang-trigger {
	display: flex;
	align-items: center;
}

.cc-lang-trigger__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--theme-palette-color-7);
	border-radius: 999px;
	color: var(--theme-palette-color-5);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cc-lang-trigger__btn:hover,
.cc-lang-trigger__btn:focus-visible {
	background-color: var(--theme-palette-color-8);
	border-color: var(--theme-palette-color-5);
}

.cc-lang-trigger__btn svg {
	width: 16px;
	height: 16px;
}

/* Same trigger, restyled small when it ends up inside the mobile off-canvas
   top bar (kept out of scope for content today, styled defensively in case
   the "Off-canvas logo" header row is enabled later). */
#offcanvas .cc-lang-trigger__btn {
	border-color: rgba(51, 53, 56, 0.3);
}

/* Collapsed mobile header bar — sits directly left of the hamburger trigger. */
[data-device="mobile"] .cc-lang-trigger__btn--mobile-bar {
	flex-shrink: 0;
	margin-right: 12px;
}

/* -------------------------------------------------------------------- *
 * 3. Generic modal (shared by the language switcher; reusable for any
 *    future header modal)
 * -------------------------------------------------------------------- */

.cc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.cc-modal[hidden] {
	display: none;
}

.cc-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 21, 16, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cc-modal__panel {
	position: relative;
	width: 100%;
	max-width: 360px;
	background: var(--theme-palette-color-9);
	border-radius: 12px;
	box-shadow: 0 24px 48px rgba(24, 21, 16, 0.24);
	padding: 24px;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cc-modal.is-open .cc-modal__overlay {
	opacity: 1;
}

.cc-modal.is-open .cc-modal__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.cc-modal__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--theme-palette-color-5);
	margin: 0;
}

.cc-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--theme-palette-color-5);
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.cc-modal__close:hover,
.cc-modal__close:focus-visible {
	background-color: var(--theme-palette-color-8);
}

body.cc-modal-open {
	overflow: hidden;
}

/* Language list, specifically */

.cc-lang-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cc-lang-modal__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 400;
	color: var(--theme-palette-color-5);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cc-lang-modal__item:hover,
.cc-lang-modal__item:focus-visible {
	background-color: var(--theme-palette-color-8);
}

.cc-lang-modal__item.is-current {
	font-weight: 600;
	color: var(--theme-palette-color-1);
	background-color: rgba(0, 166, 206, 0.08);
}

.cc-lang-modal__item.is-current svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* -------------------------------------------------------------------- *
 * 4. Mobile off-canvas menu — base nav-row restyle
 * -------------------------------------------------------------------- */

#offcanvas .mobile-menu {
	padding: 0;
	overflow: hidden;
	/* Blocksy's panel lays this out as a flex item; `overflow: hidden` (needed
	   to clip the drill-down slide) otherwise disables the browser's default
	   "don't shrink below content size" behaviour for flex items, and the
	   panel was squeezing the menu shorter than its own rows (clipping the
	   last one) to make room for whatever comes after it. */
	flex-shrink: 0;
}

#offcanvas .mobile-menu > ul {
	position: relative;
}

#offcanvas .mobile-menu .menu-item {
	border-bottom: 1px solid rgba(196, 199, 202, 0.5);
}

#offcanvas .mobile-menu > ul > li > a.ct-menu-link,
#offcanvas .mobile-menu .ct-sub-menu-parent > a.ct-menu-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 !important;
	min-height: 57px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px !important;
	font-weight: 400 !important;
	color: var(--theme-palette-color-5) !important;
	line-height: 1.4;
}

#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
	display: flex;
	align-items: center;
	justify-content: center;
	position: static;
	width: 24px;
	height: 24px;
	color: var(--theme-palette-color-5);
}

#offcanvas .mobile-menu .ct-toggle-dropdown-mobile svg {
	width: 24px;
	height: 24px;
}

/* Off-Market row: text stays left, lock icon sits right after it (not
   pushed to the far right like the chevron rows). */
#offcanvas .mobile-menu > ul > li > a.ct-menu-link {
	justify-content: flex-start;
}

.cc-lock-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--theme-palette-color-5);
}

.cc-lock-icon svg {
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------- *
 * 5. Submenu drill-down
 *
 * The main <ul> and each submenu are independent sliding layers stacked
 * in the same box (nav.js reparents every .sub-menu out of its <li> and
 * into .cc-submenu-screens for exactly this reason — nesting a submenu
 * inside a <li> that itself gets transformed would compound the two
 * transforms instead of keeping them independent).
 * -------------------------------------------------------------------- */

#offcanvas .mobile-menu {
	position: relative;
}

#offcanvas .mobile-menu > ul {
	transition: transform 0.25s ease;
}

#offcanvas .mobile-menu.cc-submenu-open > ul {
	transform: translateX(-100%);
}

.ct-toggle-dropdown-desktop {
	--toggle-button-margin-start: 0 !important;
}

.ct-menu-link:hover .ct-icon {
	transform: rotate(180deg);
}

.cc-submenu-screens {
	/* .mobile-menu carries no horizontal padding of its own any more (the
	   gutter now lives once, on .ct-panel-content-inner) — so this just
	   fills .mobile-menu's own box, same as the main <ul> does. */
	position: absolute;
	inset: 0;
	pointer-events: none;
}

#offcanvas .mobile-menu .cc-submenu-screen {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
	background-color: var(--theme-palette-color-8);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
	pointer-events: none;
}

/* Whichever screen JS marks .is-active slides in; class lives on the
   screen itself so this scales to any number of submenus with one rule. */
#offcanvas .mobile-menu .cc-submenu-screen.is-active {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.25s ease;
	pointer-events: auto;
}

.cc-submenu-back {
	border-bottom: 1px solid rgba(196, 199, 202, 0.5);
}

.cc-submenu-back__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 0;
	min-height: 57px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--theme-palette-color-5);
	text-align: left;
}

.cc-submenu-back__btn svg {
	flex-shrink: 0;
}

.cc-submenu-heading > .ct-menu-link {
	display: flex;
	align-items: center;
	padding: 8px 0 !important;
	min-height: 57px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	font-weight: 400;
	color: var(--theme-palette-color-5);
}

#header .menu li.menu-item, #header .menu li.page_item {
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	#offcanvas .mobile-menu > ul,
	#offcanvas .mobile-menu .cc-submenu-screen {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------- *
 * 6. Mobile off-canvas — "Contactos" block + CTA buttons
 * -------------------------------------------------------------------- */

.cc-mobile-contacts {
	padding: 32px 0 0;
}

.cc-mobile-contacts__heading {
	margin: 0 0 24px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--theme-palette-color-5);
}

.cc-mobile-contacts__address {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 400;
	color: var(--theme-palette-color-5);
}

.cc-mobile-contacts__line {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 400;
	color: var(--theme-palette-color-5);
	text-decoration: none;
}

.cc-mobile-contacts__line:hover {
	text-decoration: underline;
}

.cc-mobile-contacts__socials:empty {
	display: none;
}

.cc-mobile-contacts__socials {
	margin-top: 20px;
}

.cc-mobile-contacts__socials .ct-header-socials {
	padding: 0;
}

.cc-mobile-contacts__socials .ct-social-box {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.cc-mobile-contacts__socials .ct-social-box a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(51, 53, 56, 0.22);
	border-radius: 50%;
}

.cc-mobile-cta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 32px;
}

#offcanvas .ct-panel-content-inner>* {
	width: 100%;
}

[data-header*="type-1"] #offcanvas .ct-panel-inner {
	box-shadow: none;
}

.cc-mobile-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background-color: var(--theme-palette-color-5);
	border: 1px solid rgba(196, 199, 202, 0.6);
	border-radius: 6px;
	color: var(--theme-palette-color-9) !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cc-mobile-cta__btn:hover,
.cc-mobile-cta__btn:focus-visible {
	background-color: var(--theme-palette-color-6);
}

.cc-mobile-cta__icon {
	flex-shrink: 0;
}