/*
 * usability.css — correções do relatório de usabilidade de hvalois.com
 *
 * Carregado depois de style.css, style2.css e helper.css. Reúne em um só
 * lugar o que muda, sem reescrever o CSS original, para que cada bloco possa
 * ser revisto ou desligado separadamente. Os números (#1, #2…) seguem a tabela
 * do relatório.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Links e acentos em texto usam a versão escura da cor do projeto.
	   No padrão, --cor2 = #00424d (brand-deep, 9,6:1 sobre #eee). */
	--corLink: var(--cor2);
	/* Texto secundário (citações, legendas): #666, 4,9:1 sobre #eee. */
	--corSuave: #666;
	--foco: var(--cor1);
	/* Permite animar height: auto no menu em navegadores que suportam. */
	interpolate-size: allow-keywords;
}

/* ==========================================================================
   #3 Contraste
   ========================================================================== */

a,
a:visited {
	color: var(--corLink);
}

/* Antes o hover trocava teal-escuro por teal; agora sublinha, sem perder contraste. */
a:hover,
a:focus {
	color: var(--corLink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

blockquote {
	color: var(--corSuave);
}

figcaption,
.wp-caption-text,
.wp-element-caption,
.gallery-caption,
.well {
	color: var(--corSuave);
	opacity: 1;
}

.entry sub {
	color: var(--corLink);
}

/* Botão "ver mais": texto branco sobre teal a 20% virou teal escuro. */
.seemore a,
.seemore a:visited {
	color: var(--corLink);
}

/* Cabeçalho: fundo um pouco mais escuro (0,46 → 0,6) para o título e a
   descrição passarem de 4,5:1. A descrição era #505050 sobre cinza (2:1). */
#masthead {
	background: rgba(0, 0, 0, 0.6);
}

.site-description {
	color: #ddd;
}

/* ==========================================================================
   Foco visível (teclado)
   ========================================================================== */

a:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--foco);
	outline-offset: 2px;
}

#masthead :focus-visible,
.imgheader :focus-visible {
	outline-color: #fff;
}

/* ==========================================================================
   #2 #9 Imagens reais no lugar de background-image
   ========================================================================== */

.imgheader {
	position: relative;
}

.imgheader > img.tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	transition: transform 0.5s ease-in-out;
}

.imgheader > .metabox {
	position: relative;
	z-index: 1;
}

/* Abaixo de 1200 px o card não tinha véu escuro: título branco direto
   sobre a imagem. Um degradê garante a leitura sem esconder a peça. */
@media (max-width: 1199px) {
	.imgheader > .metabox {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.15) 100%);
	}
}

/* ==========================================================================
   #1 Card inteiro clicável
   ========================================================================== */

.tile {
	position: relative;
	cursor: pointer;
}

.tile .metabox {
	height: 100%;
}

/* O link do título estica até as bordas do card. */
.tile .tile-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Tags e função continuam clicáveis por cima da área esticada. */
.tile .project-medium a,
.tile .postmetadata a {
	position: relative;
	z-index: 2;
}

.tile:hover > img.tile-img,
.tile:focus-within > img.tile-img {
	transform: scale(1.04);
}

.tile .tile-link:focus-visible {
	outline: none;
}

.tile:focus-within {
	outline: 3px solid var(--foco);
	outline-offset: 3px;
}

.tile:focus-within:not(:has(:focus-visible)) {
	outline: none;
}

@media screen and (min-width: 1200px) {
	.metabox:focus-within {
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* Na home o texto do card só aparecia no hover: agora também no foco
	   do teclado e em telas de toque, onde não existe hover. */
	.home .metabox:focus-within * {
		opacity: 1;
	}
}

@media screen and (min-width: 1200px) and (hover: none) {
	.home .metabox * {
		opacity: 1;
	}
}

/* ==========================================================================
   Grade abaixo de 1200 px (melhoria sugerida 2)
   O mosaico de 1200 px em diante não muda. Abaixo disso, cada card ocupava
   uma tela inteira (100vh); agora é 4:3 e, de 900 a 1199 px, em duas colunas.
   ========================================================================== */

@media (max-width: 1199px) {
	.tile.imgheader {
		height: auto;
		aspect-ratio: 4 / 3;
		margin-bottom: 1em;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.main-width.grid:has(> .tile),
	#portfolio.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1em;
	}

	.main-width.grid > .tile,
	#portfolio.grid > .tile {
		margin: 0;
	}

	.main-width.grid > .page-navigation,
	#portfolio.grid > .page-navigation {
		grid-column: 1 / -1;
	}

	.tile.imgheader h2 {
		font-size: 1.15em;
	}
}

/* ==========================================================================
   #10 Título de página legível + marca d'água decorativa
   ========================================================================== */

.title-stack,
.page .entry-header {
	position: relative;
}

.page-watermark {
	display: block;
	font-family: var(--cabecaTexto);
	font-weight: 700;
	line-height: 1.1;
	text-transform: lowercase;
	white-space: nowrap;
	overflow: hidden;
	color: #2c333824;
	pointer-events: none;
	user-select: none;
}

/* Páginas comuns (Bio, Contact Me…): a marca d'água mantém o tamanho e a cor
   originais; o h1 real fica legível, apoiado na base da marca d'água. */
.entry-watermark {
	font-size: 4em;
}

.page h1.entry-title.page-title {
	position: relative;
	margin: -1.1em 0 0.75em 0.1em;
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--corTexto);
	text-transform: none;
	white-space: normal;
	text-wrap: balance;
}

/* Barra lateral (Portfolio, home, taxonomias): abaixo de 1200 px o título já
   era visível, então a marca d'água só aparece a partir de 1200 px. */
.sidebar .page-watermark {
	display: none;
}

@media screen and (min-width: 1200px) {
	.sidebar .page-watermark {
		display: block;
		font-size: 2em;
		line-height: 1.5em;
		text-align: right;
		color: #2c33380f;
		margin: 3em 25px 0 0;
	}

	.sidebar h1.page-title {
		position: relative;
		margin: -1.6em 25px 0 0;
		font-size: 1em;
		line-height: 1.3;
		text-align: right;
		color: var(--corTexto);
		text-transform: none;
		white-space: normal;
	}
}

/* ==========================================================================
   #11 Rótulos da barra lateral (Contractor, Filed under…)
   ========================================================================== */

.sidebar h3 {
	font-size: 0.75em; /* era 0.55em ≈ 10,6 px; agora ≈ 14,4 px */
}

/* ==========================================================================
   #4 #12 Botões do cabeçalho: menu, idioma, texto, modo escuro
   ========================================================================== */

#site-navigation button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px; /* alvo mínimo da WCAG 2.2 */
	width: 24px;
	height: 24px;
	padding: 0;
	color: #fff;
	background-color: transparent; /* o fundo claro padrão do navegador deixava o glifo a 1,1:1 */
	border-color: rgba(255, 255, 255, 0.7);
	font-family: var(--corpoTexto);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

#site-navigation button:hover {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.12);
}

#site-navigation button[aria-pressed="true"] {
	background-color: rgba(255, 255, 255, 0.28);
	border-color: #fff;
}

#controls svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Com os controles visíveis o cabeçalho pode passar dos 270 px da primeira
   linha do grid (ou com texto grande); a linha agora cresce junto. */
@media (min-width: 500px) {
	.pagegrid {
		grid-template-rows: minmax(270px, auto) 1fr 80px;
	}
}

#controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin: 0.5em 0 0;
}

#controls .lang-toggle {
	width: auto;
	padding: 0 6px;
	letter-spacing: 0.04em;
}

/* Ícone de menu: três traços que viram "×" quando o menu está aberto. */
.menu-toggle {
	position: relative;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
	position: absolute;
	display: block;
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.menu-icon {
	top: 50%;
	left: 50%;
	margin: -1px 0 0 -6px;
}

.menu-icon::before,
.menu-icon::after {
	content: "";
	left: 0;
}

.menu-icon::before {
	top: -4px;
}

.menu-icon::after {
	top: 4px;
}

.menu-toggle[aria-expanded="true"] .menu-icon {
	background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
	transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
	transform: translateY(-4px) rotate(-45deg);
}

/* Menu fechado: os links ficavam com altura 0, mas ainda recebiam foco pelo
   teclado. visibility: hidden os tira da ordem de tabulação. */
.main-navigation:not(.toggled) #primary-menu {
	visibility: hidden;
}

/* Altura fixa de 100 px cortava o menu com texto grande. */
.main-navigation.toggled #primary-menu {
	height: auto;
}

/* ==========================================================================
   #7 Bilíngue
   Classes aceitas nos blocos (editor > Avançado > Classe CSS adicional):
   português: lang-pt, br, portugues   |   inglês: lang-en, english
   ========================================================================== */

html[data-lang="pt"] :is(.lang-en, .english),
html[data-lang="en"] :is(.lang-pt, .br, .portugues) {
	display: none !important;
}

/* ==========================================================================
   #8 Navegação entre projetos
   ========================================================================== */

.project-navigation {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 3em 0 1em;
	padding-top: 2em;
	border-top: var(--borda);
}

.project-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex: 1 1 14em;
	max-width: 22em;
	padding: 0.5em 1.25em 0.5em 0.5em;
	line-height: 1.25;
	background-color: rgba(0, 0, 0, 0.05);
	text-decoration: none;
}

.project-nav-link:hover {
	background-color: var(--cor5);
	text-decoration: none;
}

.project-nav-link:hover .project-nav-title {
	text-decoration: underline;
}

.next-project {
	justify-content: flex-end;
	margin-left: auto;
	padding: 0.5em 0.5em 0.5em 1.25em;
	text-align: right;
}

.post .project-nav-thumb,
.project-nav-thumb {
	flex: none;
	width: 64px;
	height: 64px;
	margin: 0;
	object-fit: cover;
	border-radius: 0.75em;
}

.project-nav-dir {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--corTexto);
}

.project-nav-title {
	display: block;
	font-family: var(--cabecaTexto);
	font-weight: 700;
}

.project-nav-all {
	margin: 0;
	padding: 0.35em 1em;
	font-size: 0.8em;
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   Filtros por tipo de trabalho (melhoria sugerida 3)
   ========================================================================== */

.sidebar .project-filters ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em;
	margin: 1.5em 0 1em;
	padding: 0;
}

.sidebar .project-filters li {
	height: auto;
	line-height: 1.2;
	margin: 0;
}

.sidebar .project-filters li::before {
	content: none;
	display: none;
}

.sidebar .project-filters a,
#sidebar .project-filters a {
	display: inline-block;
	margin: 0;
	padding: 0.35em 0.8em;
	border-right: 0;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.sidebar .project-filters a:hover,
.sidebar .project-filters a[aria-current="page"],
#sidebar .project-filters a:hover,
#sidebar .project-filters a[aria-current="page"] {
	border-right: 0;
	background-color: var(--cor5);
}

@media screen and (min-width: 1200px) {
	.sidebar .project-filters ul {
		justify-content: flex-end;
		margin-right: 25px;
	}
}

/* ==========================================================================
   #6 Modo escuro com cores próprias (no lugar de invert())
   ========================================================================== */

html.dark-mode {
	color-scheme: dark;
	--corTexto: #c4c4c4;
	--corSuave: #b3b3b3;
	--corLink: var(--cor3);
	--foco: var(--cor3);
}

html.dark-mode body {
	background-color: #1d1f21;
}

html.dark-mode #masthead {
	background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .page-watermark {
	color: rgba(255, 255, 255, 0.07);
}

html.dark-mode .sidebar .page-watermark {
	color: rgba(255, 255, 255, 0.05);
}

html.dark-mode .whitebox,
html.dark-mode .whitewell {
	background-color: #2a2c2f !important;
}

html.dark-mode .key,
html.dark-mode .well,
html.dark-mode .main-navigation li,
html.dark-mode .page-navigation a.prev-post,
html.dark-mode .page-navigation a.next-post,
html.dark-mode .project-nav-link {
	background-color: rgba(255, 255, 255, 0.06);
}

html.dark-mode .engraved,
html.dark-mode .main-navigation li {
	text-shadow: none;
}

html.dark-mode pre {
	background: #2a2c2f;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
	background-color: #2a2c2f;
	color: var(--corTexto);
	border-color: #555;
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.tile:hover > img.tile-img,
	.tile:focus-within > img.tile-img {
		transform: none;
	}
}