/*
 Theme Name:   Astra Child - Ricardo Correia
 Theme URI:    https://ricardocorreia.com.pt/
 Description:  Tema-filho do Astra para personalizacoes do site de Ricardo Correia (nao perde as alteracoes quando o Astra atualizar).
 Author:       Ricardo Pedro
 Author URI:   https://ricardocorreia.com.pt/
 Template:     astra
 Version:      1.0.4
 Text Domain:  astra-child-ricardo-correia
*/

/* Este ficheiro pode ficar vazio - o CSS da pagina "Criacoes" ja vai
   embutido dentro do proprio template (page-criacoes.php).
   Usa este ficheiro apenas se mais tarde quiseres CSS que se aplique
   ao site todo (nao so a esta pagina). */

/* ---------------------------------------------------------------
   Comutador de idioma (rc_language_switcher / [rc_language_switcher])
   Estrutura: <ul.rc-lang-switcher> > <li.rc-lang-switcher__current>
   contendo o idioma atual (abreviatura) + uma <ul> aninhada que serve
   de dropdown com os restantes idiomas. Abre com hover/focus, sem JS.

   Posição: fixo no canto superior direito do CABEÇALHO (20px do topo,
   20px da direita), independentemente de onde o widget for colocado
   dentro do Astra Header Builder — a posição "absolute" ignora o fluxo
   normal do layout e ancora sempre a esse canto. Para isso funcionar,
   o cabeçalho em si (".site-header"/"#masthead", os seletores que o
   Astra usa) precisa de ser a referência de posicionamento — por isso
   a regra logo a seguir garante-lhe "position: relative".
   ------------------------------------------------------------- */
.site-header,
#masthead {
	position: relative;
}

.rc-lang-switcher {
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	z-index: 999;
}

.rc-lang-switcher__current {
	position: relative;
}

.rc-lang-switcher__abbr {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: 4px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	user-select: none;
}

/* Seta simples a indicar que é um dropdown */
.rc-lang-switcher__abbr::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
}

/* Nota: o Astra Header Builder aplica o seu proprio CSS aos widgets que
   coloca no cabecalho (para os widgets normais aparecerem sempre "abertos"
   inline). Isso pode ganhar por especificidade ao nosso "display: none"
   simples e deixar o dropdown sempre visivel. Por isso aqui usamos um
   seletor mais especifico (.rc-lang-switcher em vez de sozinho) e
   "!important" como garantia extra de que o estado fechado/aberto manda
   sempre, independentemente de onde o comutador for colocado. */
/* IMPORTANTE: sem "margin-top" aqui. Um espaço entre o botão "PT" e o
   dropdown cria um intervalo onde o rato deixa de estar em cima de
   ".rc-lang-switcher__current" a meio do movimento — e como é esse :hover
   que mantém o dropdown aberto, isso fechava-o mal o rato saía do botão.
   O dropdown fica encostado (top: 100%, margin: 0); o "respiro" visual
   vem do padding-top: 4px cá dentro (que já faz parte da área hover). */
.rc-lang-switcher .rc-lang-switcher__dropdown {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	white-space: nowrap;
}

/* O :hover/:focus-within está no elemento pai (.rc-lang-switcher, o <ul>
   de fora) e não no filho (.rc-lang-switcher__current, o <li> só à volta
   do botão). Assim a zona que mantém o dropdown aberto é o widget inteiro
   (botão + dropdown), sem depender de o rato ficar exatamente dentro dos
   limites apertados do <li> — mais tolerante a paddings/margens que o
   wrapper do widget no Astra Header Builder possa acrescentar à volta. */
.rc-lang-switcher:hover .rc-lang-switcher__dropdown,
.rc-lang-switcher:focus-within .rc-lang-switcher__dropdown {
	display: block !important;
}

/* Cor de texto fixa (nao "inherit"): o dropdown tem fundo branco proprio,
   por isso precisa de texto escuro mesmo quando o botao "PT" esta dentro
   de um cabecalho escuro - senao o texto fica branco sobre branco. */
.rc-lang-switcher__dropdown li a {
	display: block;
	padding: 6px 14px;
	text-decoration: none;
	color: #1a1a1a;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.rc-lang-switcher__dropdown li a:hover,
.rc-lang-switcher__dropdown li a:focus {
	background: #f5f5f5;
}

/* ---------------------------------------------------------------
   Cabecalho: titulo do site + itens do menu principal.

   - Titulo: mesma tipografia em todas as paginas (Fraunces, 400,
     48px); so a COR muda consoante a pagina.
   - Menu: so a COR muda (mantem a tipografia/tamanho que o Astra
     ja define) - pedido explicito de so alterar cores nos itens.

   Distincao homepage vs restantes paginas: o WordPress acrescenta
   a classe "home" ao <body> so na pagina inicial (is_front_page),
   por isso ".home"/" :not(.home)" chega para separar os dois casos
   sem precisarmos de saber qual e o template de cada pagina.

   "!important" aqui porque o Astra gera o CSS do cabecalho de forma
   dinamica (Personalizar > Cabecalho) com selectores bastante
   especificos (ex: ".ast-builder-menu-1 .menu-item > .menu-link") -
   sem isto, alteracoes futuras nesse painel podiam voltar a ganhar
   por especificidade e revert estas cores sem se perceber porque.
   ------------------------------------------------------------- */
.site-title,
.site-title a {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: 48px;
}

body.home .site-title,
body.home .site-title a,
body.home .site-title a:hover,
body.home .site-title a:focus,
body.home .site-title a:visited {
	color: #f5f2ec !important;
}

body:not(.home) .site-title,
body:not(.home) .site-title a,
body:not(.home) .site-title a:hover,
body:not(.home) .site-title a:focus,
body:not(.home) .site-title a:visited {
	color: #5c6155 !important;
}

body.home .main-header-menu a.menu-link,
body.home .main-header-menu .menu-item.current-menu-item > a.menu-link {
	color: #f5f2ec !important;
}

body:not(.home) .main-header-menu a.menu-link,
body:not(.home) .main-header-menu .menu-item.current-menu-item > a.menu-link {
	color: #5c6155 !important;
}

/* ---------------------------------------------------------------
   Rodapé: copyright centrado, com os itens lado a lado e um
   espaçamento generoso entre eles; e a tag <footer> sem padding
   proprio (o espaçamento vem antes de dentro do wrapper do Astra,
   nao da tag footer em si).
   ------------------------------------------------------------- */
footer.site-footer {
	padding: 0;
}

.ast-footer-copyright {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 100px;
	text-align: center;
}

/* ---------------------------------------------------------------
   Botao do menu mobile (hamburger) invisivel.

   Causa: o Astra tem uma regra global de "Botoes" (Personalizar >
   Botoes Globais) que aplica "color: transparent" a uma lista de
   selectores que inclui ".menu-toggle" - a classe do proprio botao
   do menu mobile. O icone (SVG) usa fill="currentColor", por isso
   herda esse "transparent" e fica completamente invisivel, mesmo
   que o botao exista no DOM e esteja no sitio certo (nao e um
   problema de breakpoint/responsividade, e so a cor do icone).

   Correcao: repor uma cor visivel no botao e no seu icone, a par
   das mesmas duas cores ja usadas no titulo/menu do cabecalho
   (creme na home, verde-acinzentado nas restantes paginas).
   "!important" pela mesma razao das regras acima: a regra global
   de botoes do Astra e bastante especifica e pode voltar a ganhar.
   ------------------------------------------------------------- */
body.home .main-header-menu-toggle,
body.home .main-header-menu-toggle .mobile-menu-toggle-icon,
body.home .main-header-menu-toggle svg {
	color: #f5f2ec !important;
}

body:not(.home) .main-header-menu-toggle,
body:not(.home) .main-header-menu-toggle .mobile-menu-toggle-icon,
body:not(.home) .main-header-menu-toggle svg {
	color: #5c6155 !important;
}

/* ---------------------------------------------------------------
   Menu mobile: mesmo conteudo do desktop (isso resolveu-se atribuindo
   o mesmo "Menu Principal" de cada idioma ao "Off-Canvas Menu" em
   Personalizar > Cabecalho > Mobile - antes nao tinha nenhum menu
   WP atribuido e por isso caia no menu de paginas por omissao do
   WordPress, em vez do menu real do site).

   Aqui: o proprio painel passa a fullscreen (cobre o ecra todo por
   cima do conteudo da pagina) e os itens ficam na cor pedida.

   Fullscreen: o painel do menu mobile (".ast-mobile-header-content")
   e por omissao "position:static" - so ocupa o espaco logo abaixo do
   cabecalho. Quando o menu esta aberto (o Astra acrescenta a classe
   "ast-main-header-nav-open" ao <body>), passamos esse painel a
   "position:fixed" a cobrir o ecra inteiro. A barra do titulo+botao
   de fechar (".ast-builder-grid-row-has-sides") recebe um z-index
   maior para continuar por cima do overlay e o botao continuar
   clicavel para fechar o menu.
   ------------------------------------------------------------- */
.ast-header-break-point .ast-builder-grid-row-has-sides {
	position: relative;
	z-index: 3;
}

.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-content {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	z-index: 2;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding: 100px 30px 60px;
}

body.home .ast-mobile-header-content .main-header-menu a.menu-link,
body.home .ast-mobile-header-content .main-header-menu .menu-item.current-menu-item > a.menu-link,
body.home .ast-mobile-header-content .main-header-menu .ast-menu-toggle,
body:not(.home) .ast-mobile-header-content .main-header-menu a.menu-link,
body:not(.home) .ast-mobile-header-content .main-header-menu .menu-item.current-menu-item > a.menu-link,
body:not(.home) .ast-mobile-header-content .main-header-menu .ast-menu-toggle {
	color: #5c6155 !important;
}

/* Comutador de idioma clonado para dentro do menu mobile (ver
   rc_mobile_menu_language_switcher_script em functions.php). O
   original usa position:absolute para se ancorar ao canto do
   cabecalho no desktop - aqui repomos um posicionamento normal,
   como mais um bloco dentro do painel do menu, com espaco e
   separador por cima para o distinguir dos itens do menu. */
.ast-mobile-header-content .rc-lang-switcher--mobile {
	position: static;
	display: flex;
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid rgba(92, 97, 85, 0.2);
}

.ast-mobile-header-content .rc-lang-switcher--mobile .rc-lang-switcher__abbr {
	color: #5c6155;
	border-color: #5c6155;
}