/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/

/* Bug real do próprio Houzez: .footer_logo img não tem NENHUMA regra de
   tamanho em lado nenhum do tema (nem largura, nem altura, nem
   max-width) — o logo do rodapé aparece ao tamanho real do ficheiro
   (no nosso caso, 1095x273px, ocupando a barra toda). */
.footer_logo img {
	max-height: 40px;
	width: auto;
}

/* Hero da homepage: banner nativo do Houzez (override de
   template-parts/banners/parallax.php) com uma caixa de pesquisa
   compacta alinhada à esquerda, em vez de centrada — pedido do
   Herminio, a lembrar o modelo "Home Caption". Altura contida
   (preferência por espaçamentos verticais baixos). */
.fo-hero-banner {
	min-height: 420px;
	max-height: 620px;
	height: 60vh;
	overflow: hidden;
	background-color: #000033;
}
.fo-hero-banner-inner {
	height: 100%;
	display: flex;
	align-items: center;
}
.fo-hero-split {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5vw;
	padding: 0 6vw;
}
.fo-hero-box {
	flex: 0 1 420px;
	color: #fff;
	text-align: left;
	max-height: 100%;
	overflow-y: auto;
}
.fo-hero-caption-col {
	flex: 1 1 380px;
	text-align: left;
	color: #fff;
}
.fo-hero-caption-col .banner-title {
	color: #fff;
	font-size: clamp(26px, 3.2vw, 40px);
	margin: 0 0 8px;
}
.fo-hero-caption-col .banner-subtitle {
	color: #D1C292;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}
.fo-hero-box .claudecrm-general-inquiry-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.fo-hero-box .form-group,
.fo-hero-box .form-group-textarea,
.fo-hero-box .form-group-terms {
	grid-column: 1 / -1;
	margin-bottom: 0;
}
/* Telefone + Email lado a lado (2º e 3º campo do formulário) */
.fo-hero-box .form-group:nth-of-type(2) {
	grid-column: 1;
}
.fo-hero-box .form-group:nth-of-type(3) {
	grid-column: 2;
}
.fo-hero-box .form-group-terms .gdpr-text-wrap {
	color: #fff;
	font-size: 12px;
}
/* O link "Política de Privacidade" herda a cor azul-escura do tema —
   ilegível sobre a foto escura. */
.fo-hero-box .form-group-terms .gdpr-text-wrap a {
	color: #fff;
	text-decoration: underline;
}
/* Botão "Pedir Informação": dourado do modelo (#D1C292, usado no
   cabeçalho/Home Land) com texto branco, muda para azul-marinho no
   hover — mesmo par de cores acordado para os botões do site. */
.fo-hero-box .claudecrm-general-inquiry-submit {
	grid-column: 1 / -1;
	background-color: #D1C292;
	border-color: #D1C292;
	color: #fff;
}
.fo-hero-box .claudecrm-general-inquiry-submit:hover {
	background-color: #000033;
	border-color: #000033;
	color: #fff;
}
@media (max-width: 767px) {
	.fo-hero-banner {
		height: auto;
		min-height: 0;
	}
	.fo-hero-banner-inner {
		padding: 32px 0;
		align-items: flex-start;
	}
	.fo-hero-split {
		/* Caption já vem primeiro na ordem do HTML (trocou de lado com o
		   formulário) — "column" simples mantém a caption em cima no
		   telemóvel, sem precisar de "reverse" como antes. */
		flex-direction: column;
		padding: 0 20px;
		gap: 20px;
	}
	.fo-hero-box {
		flex-basis: auto;
		width: 100%;
	}
	.fo-hero-caption-col {
		text-align: center;
	}
	.fo-hero-box .claudecrm-general-inquiry-form {
		grid-template-columns: 1fr;
	}
	.fo-hero-box .form-group:nth-of-type(2),
	.fo-hero-box .form-group:nth-of-type(3) {
		grid-column: 1 / -1;
	}
}

/* Rodapé sentia-se demasiado alto (100px/70px de origem do Houzez +
   texto do "Sobre" longo) — reduzido para um espaçamento mais compacto,
   estrutural apenas. */
.footer-top-wrap {
	padding: 60px 0 40px;
}

/* Botão "voltar ao topo" em dourado First On — o Houzez não tem opção
   nativa só para este botão, partilha .btn-primary com outros botões que
   ficam a navy, por isso este override tem de ser feito à parte. */
#scroll-top.btn-back-to-top {
	background-color: #D1C292 !important;
	border-color: #D1C292 !important;
}
#scroll-top.btn-back-to-top:hover {
	background-color: #B2A57C !important;
	border-color: #B2A57C !important;
}

/* Bug real do próprio Houzez (confirmado de novo ao voltar à base nativa):
   .grid-view-3-cols, usado pelo [houzez-properties module_type="grid_3_cols"]
   e por toda a grelha de cartões de imóvel (pesquisa, semelhantes, etc.),
   não tem NENHUMA regra CSS a dar-lhe layout de grelha em lado nenhum do
   tema — fica display:block, cartões empilhados a 100% de largura. Fix
   estrutural mínimo, sem cor/tipografia — isso fica para a personalização. */
/* Bug real do próprio Houzez: o carrossel de fotos do cartão (Slick) usa
   JS para definir a altura de cada slide consoante a proporção da SUA
   própria foto (inline style="height:...") — em vez de cartões alinhados,
   cada um fica com uma altura diferente conforme a forma da foto de capa.
   Força-se altura fixa e igual (!important vence o inline do Slick) com
   a foto a preencher/cortar (object-fit:cover), nunca a esticar. */
.listing-gallery-wrap .slick-list {
	height: 260px !important;
}
.listing-gallery-wrap .slide-img img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover !important;
}

.grid-view-3-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 991px) {
	.grid-view-3-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 575px) {
	.grid-view-3-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Bug real do próprio Houzez: .block-map-wrap não tem altura nenhuma
   definida em main.css para o mapa da secção Morada da ficha de imóvel
   (só existe para a página de Projeto) — sem isto o mapa existe no DOM
   mas fica com 0px de altura, invisível. */
#property-address-wrap .block-map-wrap {
	height: 360px;
}

/* Outro bug real do Houzez: o botão "Other Features" do painel de
   pesquisa avançada vem a branco (pensado para search bars com fundo
   escuro de outras demos) — no nosso painel claro fica texto branco
   sobre fundo branco, invisível. Não encontrámos a regra de origem no
   main.css (o seletor está agrupado com dezenas de outros e o CSSOM não
   a reflete), por isso corrige-se aqui à parte. */
.btn-features-list {
	color: #22222c !important;
}

/* Mesmo bug, mesma causa: os nomes das comodidades dentro da lista
   também vêm a branco (o texto lá estava sempre, só invisível). */
.features-list .control--checkbox {
	color: #22222c !important;
}

/* Etiquetas públicas do Empreendimento (fase de vendas + urgência) —
   canto superior esquerdo da foto de capa, encostadas ao topo (posição
   absoluta, tal como a primeira versão). O breadcrumb/título/endereço
   (ver regra mais abaixo) foram empurrados para a direita, alinhados
   com o fim da caixa "Em Comercialização" — por isso a 2ª etiqueta
   (Últimas Unidades) tem via livre para se estender para a direita sem
   nunca chegar ao texto, sejam quais forem os dois estados presentes. */
.claudecrm-project-badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

/* Fase de vendas: tamanho da 1ª versão (a que o Herminio gostou) — é
   esta largura que define onde o texto do cabeçalho começa (ver
   $claudecrm-badge-safe-width mais abaixo). */
.claudecrm-badge-pill {
	background-color: #000033;
	color: #D1C292;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 0 4px 4px 0;
}

/* Últimas Unidades / Esgotado: mesmo tamanho da pílula de cima (agora
   há espaço à direita para isso, depois de empurrar o texto). */
.claudecrm-badge-flag {
	background-color: #000033;
	color: #D1C292;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 26px 6px 16px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}

/* Empurra o Caminho + Nome + Localização para a direita, alinhados com
   o fim da caixa "Em Comercialização" (~185px de largura na versão
   atual, arredondado para 200px com margem de segurança) — cria uma
   fronteira vertical fixa entre a coluna das etiquetas e o texto, que
   nenhuma das duas precisa de respeitar em altura. O preço, à direita,
   não é afetado (fica ancorado à direita da mesma linha). */
.property-detail-v2 .breadcrumb,
.property-detail-v2 .property-title-wrap {
	margin-left: 200px;
}

/* Nome do Empreendimento + preço, sobre a foto de capa — a branco lia-se
   mal em fotos claras (o Herminio reparou); dourado tem mais contraste
   sobre praticamente qualquer foto e mantém a paleta da marca. */
.property-detail-v2 .page-title h1,
.property-detail-v2 .property-price-wrap .item-price {
	color: #D1C292;
}

/* Etiquetas nativas de property_status (Venda/Arrendamento/Reservado/
   Vendido/Arrendado) na lista de imóveis e na ficha — por termo, via a
   classe .status-color-{term_id} que o próprio Houzez já gera
   (item-labels.php / property-details/partials/item-labels.php). Cores
   fixadas aqui em vez de pelo seletor de cor do wp-admin do termo —
   opções geridas pelo Redux já provaram reverter sozinhas neste projeto
   (ver "Redux Framework instalado" no README), CSS fixo não tem esse
   risco. IDs fixos desta instalação: 23838 Venda, 23839 Arrendamento,
   24528 Reservado, 24529 Vendido, 24530 Arrendado — se algum dia forem
   apagados e recriados, os IDs mudam e esta lista tem de ser atualizada. */
.status-color-23838,
.status-color-23839 {
	background-color: #D1C292 !important;
	color: #fff !important;
}
.status-color-23838:hover,
.status-color-23839:hover {
	color: #000033 !important;
}
.status-color-24528 {
	background-color: #000033 !important;
	color: #D1C292 !important;
}
.status-color-24528:hover {
	color: #fff !important;
}
.status-color-24529,
.status-color-24530 {
	background-color: #B2A57C !important;
	color: #000033 !important;
}

/* Arquivo de Empreendimentos (/project/, archive-project.php) — mesmo
   bug estrutural do .grid-view-3-cols (ver acima): .listing-view.grid-view
   .card-deck (a grelha nativa que o Houzez usa na sua própria "Template
   Projects Listings", nunca ligada a nenhuma página deste site) também
   não tem NENHUMA regra de grelha - .card-deck é uma classe do Bootstrap
   4, removida no Bootstrap 5.3.3 que este site usa. Pedido do Herminio,
   2026-09-07: cartões de Empreendimento (foto/badge/título/localização/
   preço) ao estilo da concorrência (JLL/DILS/Porta da Frente). */
.claudecrm-projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 991px) {
	.claudecrm-projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 575px) {
	.claudecrm-projects-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.claudecrm-project-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.claudecrm-project-card .item-wrap-v6 {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.claudecrm-project-card .item-header,
.claudecrm-project-card .listing-image-wrap,
.claudecrm-project-card .listing-thumb {
	position: relative;
}
.claudecrm-project-card .listing-thumb img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.claudecrm-project-card .item-body {
	padding: 16px 20px 20px;
}
.claudecrm-project-card-title {
	font-family: "Newsreader", serif;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 6px;
}
.claudecrm-project-card-title a {
	color: #000033;
}
.claudecrm-project-card-address {
	color: #6b6b6b;
	font-size: 14px;
	margin: 0 0 10px;
}
.claudecrm-project-card-price {
	color: #000033;
	font-weight: 700;
	font-size: 16px;
	margin: 0;
}
/* Dentro do cartão da grelha, a etiqueta fica encostada à foto (canto
   superior esquerdo), não ao layout com o desvio de 200px da ficha
   individual - essa regra (.property-detail-v2 .breadcrumb) não se
   aplica aqui, este cartão nunca teve esse deslocamento. */
.claudecrm-project-card .claudecrm-project-badges {
	top: 12px;
}

/* Popup de galeria em ecrã inteiro (property-details/lightbox.php) —
   2 achados reais, pedido do Herminio, 2026-09-07:
   1. O logótipo do cabeçalho do popup vinha do logo de demonstração do
      próprio Houzez (opção Redux "lightbox_logo", nunca configurada —
      mesma classe de bug de sempre: opção nunca ligada ao Redux seed).
      Corrigido apontando para o mesmo ficheiro branco já usado no
      cabeçalho transparente da homepage (custom_logo_splash).
   2. O fundo do cabeçalho/rodapé (as duas barras finas, #2d2d2d de
      fábrica) trocado para o navy da marca - para não haver nenhum
      preto "genérico" a escapar à paleta. Só o cabeçalho/rodapé, não o
      .modal-content todo (1ª tentativa pintava a caixa inteira, ficava
      escura de mais - apanhado pelo Herminio ao vivo - o corpo do popup
      à volta da foto mantém-se claro, tal como no design original do
      Houzez, só as duas barras finas são navy). */
.property-lightbox .modal-header,
.property-lightbox .modal-footer {
	background-color: #000033 !important;
}

/* Formulários de página inteira das Operações/Contactos no dashboard
   público (houzez-child/template-parts/dashboard/board/operacoes|contactos).
   Reaproveitam a marcação .form-table do wp-admin (a mesma das meta boxes),
   mas essa folha de estilos só carrega no wp-admin — dá-se aqui um
   equivalente mínimo, sem replicar o resto do wp-admin. */
.claudecrm-frontend-form .form-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}
.claudecrm-frontend-form .form-table th {
	text-align: left;
	padding: 10px 12px 10px 0;
	width: 220px;
	vertical-align: top;
	font-weight: 600;
	color: #000033;
}
.claudecrm-frontend-form .form-table td {
	padding: 8px 0;
	vertical-align: top;
}
.claudecrm-frontend-form input[type="text"],
.claudecrm-frontend-form input[type="email"],
.claudecrm-frontend-form input[type="date"],
.claudecrm-frontend-form input[type="time"],
.claudecrm-frontend-form input[type="number"],
.claudecrm-frontend-form select,
.claudecrm-frontend-form textarea {
	width: 100%;
	max-width: 420px;
	padding: 8px 10px;
	border: 1px solid #d8d8d8;
	border-radius: 6px;
}
.claudecrm-frontend-form .widefat {
	width: 100%;
}
.claudecrm-frontend-form h2,
.claudecrm-frontend-form h3 {
	margin-top: 28px;
	margin-bottom: 10px;
	color: #000033;
}
.claudecrm-frontend-form table.widefat {
	max-width: 100%;
	border: 1px solid #eee;
}
.claudecrm-frontend-form table.widefat th,
.claudecrm-frontend-form table.widefat td {
	padding: 6px 8px;
}
.claudecrm-frontend-form .description {
	display: block;
	color: #777;
	font-size: 12px;
	margin-top: 4px;
}

/* Logótipo da First On no topo do dashboard (Redux "dashboard_logo") —
   sem esta regra, o ficheiro (1095x273, horizontal) fica ao tamanho real
   dentro da faixa de 64px do Houzez, que não tem nenhum limite de altura
   nativo para esta imagem (mesmo bug já visto no cabeçalho/rodapé do
   site público: o Houzez nunca limita o <img> do logo por CSS). */
.sidebar-logo .logo img {
	max-height: 32px;
	width: auto;
}

/* Botão "Create Listing" (cabeçalho normal, cabeçalho transparente da
   homepage, e nav mobile): fixado a dourado+navy da marca com !important,
   independente das opções Redux que o controlam (header_4_btn_bg_color no
   cabeçalho normal, header_4_transparent_btn_bg_color no transparente,
   houzez_primary_color no mobile) — essas opções já reverteram sozinhas
   para o azul de fábrica do Houzez mais de uma vez (mesma classe de bug
   de opções Redux instáveis documentada no projeto), fazendo o botão
   "voltar" ao azul sem ninguém o ter mudado à mão. Mesmo princípio já
   aplicado ao botão "voltar ao topo" acima: não confiar numa opção
   Redux para uma cor de marca fixa, sobrepor sempre à parte. */
.header-main-wrap .btn-create-listing,
.header-transparent-wrap .header-v4 a.btn-create-listing,
.nav-mobile .btn-create-listing,
.navi-login-register .btn-create-listing,
.btn.btn-create-listing {
	background-color: #D1C292 !important;
	border-color: #D1C292 !important;
	color: #fff !important;
}
.header-main-wrap .btn-create-listing:hover,
.header-main-wrap .btn-create-listing:active,
.header-transparent-wrap .header-v4 a.btn-create-listing:hover,
.header-transparent-wrap .header-v4 a.btn-create-listing:active,
.nav-mobile .btn-create-listing:hover,
.nav-mobile .btn-create-listing:active,
.navi-login-register .btn-create-listing:hover,
.navi-login-register .btn-create-listing:active,
.btn.btn-create-listing:hover,
.btn.btn-create-listing:active {
	background-color: #000033 !important;
	border-color: #000033 !important;
	color: #fff !important;
}

/* Paginação (listagem/pesquisa): números a dourado no hover (incluindo a
   página ativa — o Houzez, sem esta regra, tinha uma combinação própria
   para ".page-item.active .page-link:hover" que ficava fundo navy com
   texto também navy, tornando o número ilegível); setas < > com fundo
   dourado leve (30% de opacidade — 10% confundia-se com o fundo da
   página, também dourado claro) em repouso, subindo para dourado
   sólido mais carregado no hover — mesmo tom #B2A57C já usado no botão
   "voltar ao topo". A 1ª e a última entrada da lista são normalmente as
   setas (estrutura fixa do Houzez), por isso :first-child/:last-child
   identificam-nas sem depender de classes de ícone — mas o Houzez não
   desenha a seta "next" na última página, por isso aí o número ativo
   passa a ser o :last-child; ":not(.active)" nas regras das setas evita
   que herdem o estilo de seta nesse caso. Cor de texto fixada a navy em
   vez de herdar houzez_primary_color, pela mesma razão de estabilidade
   do botão Create Listing acima. */
.pagination-wrap .pagination > .page-item:not(:first-child):not(:last-child) .page-link:hover {
	background-color: #D1C292 !important;
	border-color: #D1C292 !important;
	color: #000033 !important;
}
.pagination-wrap .pagination > .page-item.active .page-link {
	background-color: #000033 !important;
	border-color: #000033 !important;
	color: #fff !important;
}
.pagination-wrap .pagination > .page-item.active .page-link:hover {
	background-color: #D1C292 !important;
	border-color: #D1C292 !important;
	color: #000033 !important;
}
.pagination-wrap .pagination > .page-item:first-child:not(.active) .page-link,
.pagination-wrap .pagination > .page-item:last-child:not(.active) .page-link {
	background-color: rgba(209, 194, 146, 0.3) !important;
	border-color: rgba(209, 194, 146, 0.3) !important;
	color: #000033 !important;
}
.pagination-wrap .pagination > .page-item:first-child:not(.active) .page-link:hover,
.pagination-wrap .pagination > .page-item:last-child:not(.active) .page-link:hover {
	background-color: #B2A57C !important;
	border-color: #B2A57C !important;
	color: #000033 !important;
}

/* Texto de consentimento RGPD (checkbox "I consent to having this
   website store...") herdava o mesmo estilo de label do formulário
   Elementor da homepage — maiúsculas + letter-spacing:4px, pensado para
   labels curtas tipo "NAME"/"EMAIL", mas que numa frase inteira
   transbordava para 2+ linhas e passava dos limites da caixa. Regra
   direta no próprio .gdpr-text-wrap (não no <label> pai) para sobrepor a
   herança sem depender de especificidade — aplica-se a qualquer
   formulário do site que use este componente nativo do Houzez, não só
   à homepage. */
.gdpr-text-wrap {
	font-size: 11px;
	letter-spacing: 0.3px;
	line-height: 1.4;
}

/* Bug real do próprio Houzez, confirmado por leitura de código: no menu
   lateral de edição de imóvel (.menu-edit-property-link, em
   houzez_property.js), clicar num separador só troca de bloco se
   form.valid() (jQuery Validate) passar para os campos visíveis do bloco
   atual — senão devia mostrar ".validate-errors" com o aviso. Mas esse
   aviso é um alerta Bootstrap 5 com a classe "fade" e SEM a classe
   "show" já no HTML (edit-property-form.php); o JS só faz
   errorBlock.show() (jQuery, mexe no display) e nunca acrescenta a
   classe "show" (Bootstrap, mexe na opacidade) — o Bootstrap mantém
   ".fade:not(.show){opacity:0}", por isso o aviso fica com display:block
   mas opacity:0: existe no layout, mas é invisível. Resultado: parece
   que o clique "não faz nada", quando na verdade está bloqueado por um
   campo obrigatório em falta, só que o aviso que o diria nunca se vê.
   Correção mínima: forçar sempre opacity:1 nestes dois avisos — quando
   estão escondidos (display:none, por inline style ou por
   .houzez-hidden) a opacity é irrelevante, por isso isto nunca os torna
   visíveis por engano. */
.validate-errors,
.validate-errors-gal {
	opacity: 1 !important;
}

/* Seleção múltipla + apagar em lote na galeria de fotos do imóvel (ver
   template-parts/dashboard/submit/media.php, override do child theme, e
   assets/js/gallery-bulk-delete.js). */
.claudecrm-bulk-toolbar {
	font-size: 14px;
}
.claudecrm-bulk-toolbar #claudecrm_delete_selected {
	color: #a94442;
	border-color: #a94442;
}
.claudecrm-bulk-toolbar #claudecrm_delete_selected:not(:disabled):hover {
	background-color: #a94442;
	border-color: #a94442;
	color: #fff;
}
/* .property-thumb (coluna Bootstrap) não tem position própria — sem
   isto o checkbox ficava ancorado ao ecrã em vez de à foto. */
.property-thumb {
	position: relative;
}
.claudecrm-thumb-select {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	margin: 0;
	line-height: 0;
}
.claudecrm-thumb-select input[type="checkbox"] {
	width: 20px;
	height: 20px;
	cursor: pointer;
	accent-color: #000033;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Barra lateral do dashboard: o Houzez usa um azul-escuro de fábrica
   (#002b4b) que não é o navy da marca, e destaca o item ativo com o azul
   forte de fábrica (#00aeff) em vez de dourado. */
.dashboard-sidebar,
.sidebar-logo {
	background-color: #000033 !important;
}
.nav-box ul li a:hover,
.nav-box ul li a.active {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
}
.nav-box ul li a.active {
	border-color: #D1C292 !important;
}

/* Bug real do próprio Houzez: a lista "row list-lined" (Morada:
   Cidade/Distrito/Código Postal/Área/País) é um .row do Bootstrap (flex),
   que por defeito estica todos os itens da mesma linha à altura do mais
   alto (align-items:stretch) — qualquer campo com texto um pouco mais
   comprido (ex.: nomes de Freguesia antes de encurtados para "UDF ...",
   ver data/shorten-udf-terms.php) esticava também o vizinho vazio até à
   mesma altura, dando a sensação de espaço morto enorme. Defensivo, para
   qualquer campo futuro que volte a ter texto comprido. */
.list-lined.row {
	align-items: flex-start;
}

/* Botão "Nota Informativa a Reter" do simulador de crédito: dourado da
   marca em vez de vermelho (pedido explícito — "odeio vermelho") ou do
   cinza pouco chamativo do Bootstrap, para chamar mesmo a atenção para
   o aviso legal por baixo. Mesmo par de cores hover já usado nos outros
   botões dourados do site. */
.claudecrm-notes-toggle {
	background-color: #D1C292;
	border-color: #D1C292;
	color: #000033;
}
.claudecrm-notes-toggle:hover,
.claudecrm-notes-toggle:focus {
	background-color: #000033;
	border-color: #000033;
	color: #fff;
}
.claudecrm-legal-notice {
	padding: 12px 14px;
	border-left: 3px solid #D1C292;
	background-color: rgba(209, 194, 146, 0.12);
	font-size: 13px;
	font-style: italic;
}

/* Paginas legais (Politica de Privacidade #26, Politica de Cookies #18796,
   RAL #18797): os titulos de seccao herdavam o h2 generico do Houzez
   (32px, pensado para heros de landing page) - um documento legal com
   varias seccoes fica visualmente pesado/gritado nesse tamanho. Reduzido
   so nestas paginas, sem tocar no h2 geral do site. */
.page-id-26 .page-content-wrap h2,
.page-id-18796 .page-content-wrap h2,
.page-id-18797 .page-content-wrap h2 {
	font-size: 20px;
	line-height: 1.4;
	margin-top: 28px;
	margin-bottom: 8px;
}
.page-id-26 .page-content-wrap h2:first-of-type,
.page-id-18796 .page-content-wrap h2:first-of-type,
.page-id-18797 .page-content-wrap h2:first-of-type {
	margin-top: 0;
}

/* Cabecalho mobile: decisao deliberada de manter o comportamento nativo
   do Houzez (fundo branco solido + logotipo a cores, sempre, em todas as
   paginas) em vez de replicar a transparencia do desktop. No Houzez, o
   fundo do cabecalho mobile (#header-mobile) e uma opcao Redux global
   (mob_menu_bg_color), sem variacao por pagina como o desktop tem
   (fave_main_menu_trans) - reproduzir a transparencia so na home exigia
   um filtro CSS a converter o logotipo a branco, mais fragil para um
   ganho so estetico. Confirmado a funcionar bem num telemovel real
   (2026-09-05) com o comportamento nativo - decisao explicita de nao
   complicar. Ver README para o raciocinio completo. */

/* Fotos em retrato na galeria da ficha de imóvel (camada v3/v4, a que
   está realmente em uso - ver README): o carrossel principal
   (#property-gallery-js, um slider Slick que o Houzez dimensiona à
   janela) e o herói (#gallery-featured-placeholder) usam object-fit:cover
   a preencher uma caixa de altura fixa - uma foto vertical ficava com a
   maior parte cortada. Descoberta importante: não bastava trocar o
   object-fit - o TAMANHO de imagem registado para esta galeria
   ("houzez-gallery", 1170x785, crop=1) já corta o ficheiro a martelo
   para um retângulo horizontal antes de chegar a esta CSS, destruindo a
   foto vertical na origem. Por isso o PHP (houzez-child/property-details/
   partials/gallery-v3-4.php) pede antes o tamanho "large" do WordPress
   (sem corte) quando a foto é vertical (deteção em houzez-child/inc/
   portrait-photo-fit.php), e só depois esta CSS mostra-a inteira dentro
   da janela, com faixas laterais, em vez de cortada. Fotos em paisagem
   continuam exatamente como estavam. */
.houzez-gallery-img.is-portrait {
	/* !important porque o próprio lightSlider (css/lightslider.css é
	   inócuo, mas o `.lslide img{object-fit:cover}` vive em
	   all-css.min.css) tem a mesma classe de estabilidade das outras
	   opções do Houzez - achado ao vivo com uma foto real do Herminio
	   (FO1), 2026-09-06: o `is-portrait` era aplicado certo, com o
	   tamanho de imagem certo, mas o object-fit não "ganhava" apesar de
	   ter mais especificidade nos meus cálculos - mais seguro forçar. */
	object-fit: contain !important;
	background-color: #000033;
}
#gallery-featured-placeholder img.is-portrait {
	background-color: #000033;
}

/* Mesma correção, para a camada "prop-top-area = v6" (não usada agora,
   mas fica pronta se um dia se mudar de novo - ver overrides em
   houzez-child/property-details/top-area-v6.php e
   partials/gallery-v6.php, mesmo tamanho "houzez-gallery" crop=1). */
.hs-gallery-v4-grid img.is-portrait {
	width: auto !important;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0 auto;
	display: block;
	background-color: #000033;
}
.property-featured-image.is-portrait {
	object-fit: contain !important;
	background-color: #000033;
}

/* Rede de segurança geral: o popup em ecrã inteiro (property-details/
   lightbox.php, carrossel Slick próprio, independente da galeria
   principal) tinha o MESMO problema, só descoberto porque o Herminio
   testou lá também - a foto já vinha sem corte (lightbox.php sempre usou
   o tamanho "full"), mas sem a classe "is-portrait" nem nenhuma regra a
   proteger o object-fit. Em vez de continuar a caçar plugin a plugin
   (lightSlider na galeria, Slick no popup, o que vier a seguir), esta
   regra cobre QUALQUER sítio que use a classe, presente ou futuro. */
img.is-portrait {
	object-fit: contain !important;
	background-color: #000033;
}

/* Recorte "Ver mais/Ver menos" em mobile - Descrição, Features e
   "What's Nearby?" (ver assets/js/collapsible-sections.js). Só ativo
   abaixo do breakpoint md do Bootstrap (768px), o mesmo já usado em todo
   o resto do tema para mobile/desktop - no desktop já há espaço de
   sobra, mostra-se tudo sem clique nenhum.
   Exceção: "What's Nearby?" (.claudecrm-collapsible-wrap--nearby) também
   recorta em desktop - pedido do Herminio, 2026-09-07, com a ficha FO17
   como exemplo: em zonas de cidade a lista de pontos de interesse fica
   enorme mesmo em ecrã largo. Ver bloco @media (min-width:768px) mais
   abaixo, que readiciona o recorte só para esse modificador. */
@media (max-width: 767px) {
	.claudecrm-collapsible-content {
		max-height: 4.5em;
		overflow: hidden;
		position: relative;
	}
	.claudecrm-collapsible-content::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2em;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}
	.claudecrm-collapsible-wrap.is-expanded .claudecrm-collapsible-content {
		max-height: none;
	}
	.claudecrm-collapsible-wrap.is-expanded .claudecrm-collapsible-content::after {
		display: none;
	}
	.claudecrm-collapsible-toggle {
		display: inline-block;
		margin-top: 12px;
		background: none;
		border: none;
		padding: 0;
		color: #000033;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}
@media (min-width: 768px) {
	.claudecrm-collapsible-toggle {
		display: none !important;
	}

	/* Exceção só para o Nearby, ver comentário acima. */
	.claudecrm-collapsible-wrap--nearby .claudecrm-collapsible-content {
		max-height: 18em;
		overflow: hidden;
		position: relative;
	}
	.claudecrm-collapsible-wrap--nearby .claudecrm-collapsible-content::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2.5em;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}
	.claudecrm-collapsible-wrap--nearby.is-expanded .claudecrm-collapsible-content {
		max-height: none;
	}
	.claudecrm-collapsible-wrap--nearby.is-expanded .claudecrm-collapsible-content::after {
		display: none;
	}
	.claudecrm-collapsible-wrap--nearby .claudecrm-collapsible-toggle {
		display: inline-block !important;
		margin-top: 12px;
		background: none;
		border: none;
		padding: 0;
		color: #000033;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* Tabela "Unidades neste empreendimento" (ver
   property-details/partials/project-units-table.php) - com 9 colunas de
   dados fica larga demais para a coluna de conteúdo (col-lg-8), que é mais
   estreita que a página toda por causa da sidebar fixa ao lado. Apanhado
   pelo Herminio ao vivo, 2026-09-07: sem isto a tabela ficava mais larga
   que o espaço disponível e passava visualmente por baixo da caixa do
   formulário. Fonte e espaçamento mais compactos + .table-responsive (já
   do Bootstrap, só a dar scroll horizontal como último recurso em vez de
   overlap) resolvem sem mexer no "Sub Listings" nativo do Houzez, que
   continua a usar o tamanho normal noutros sítios. */
.claudecrm-units-table-wrap {
	overflow-x: auto;
}
.claudecrm-units-table {
	font-size: 0.75rem;
	table-layout: fixed;
	width: 100%;
}
.claudecrm-units-table th,
.claudecrm-units-table td {
	padding: 5px 4px;
}
.claudecrm-units-table th {
	/* Sem nowrap de propósito: títulos como "Estacionamento" e "Área
	   Exterior" são mais largos que os valores das colunas - deixá-los
	   quebrar em 2 linhas encolhe a tabela toda o suficiente para caber
	   sem precisar de scroll horizontal na maioria dos ecrãs. Apanhado
	   pelo Herminio ao vivo, 2026-09-07: com nowrap sobrava sempre uma
	   barra de scroll ridícula, de uns milímetros só. */
	white-space: normal;
	word-break: break-word;
}
.claudecrm-units-table td {
	white-space: nowrap;
}
.claudecrm-units-table .btn {
	padding: 3px 6px;
	font-size: 0.68rem;
	white-space: nowrap;
}

/* Toggle "Reservar / Saber Mais" no modal (ver
   partials/project-unit-inquiry-modal.php) - usa as classes normais do
   Bootstrap (.btn-check + .btn-outline-primary), que o Houzez nunca
   reestiliza (as cores da marca aqui são todas por classes próprias
   dele, tipo .btn-primary-outlined, nunca a variável --bs-primary do
   Bootstrap) - por isso ficava sempre no azul genérico do Bootstrap em
   vez do navy da marca. Apanhado pelo Herminio ao vivo, 2026-09-07. */
#claudecrm-unit-inquiry-modal .btn-outline-primary {
	color: #000033 !important;
	border-color: #000033 !important;
}
#claudecrm-unit-inquiry-modal .btn-outline-primary:hover,
#claudecrm-unit-inquiry-modal .btn-check:checked + .btn-outline-primary,
#claudecrm-unit-inquiry-modal .btn-outline-primary.active,
#claudecrm-unit-inquiry-modal .btn-outline-primary:active {
	background-color: #000033 !important;
	border-color: #000033 !important;
	color: #fff !important;
}