/*
Theme Name: Plataforma OSC Design
Theme URI: https://plataformaosc.org.br
Description: Tema filho do Plataforma OSC para alterações de design. Pinta de azul o menu do celular e replica o zigue-zague da linha do tempo do site antigo na página Legado. O tema pai — o do ambiente de referência — não é tocado: aqui vive só o que diverge.
Author: Plataforma OSC
Author URI: https://plataformaosc.org.br
Template: plataformaosc
Version: 1.1.2
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plataformaosc-design
Tags: block-theme, child-theme
*/

/* ===========================================================================
   AZUL DO CELULAR — menu (medido em plataformaosc.org.br, 393x844)
   painel do menu: 340x844, fundo rgb(45,50,101), texto branco, sem separadores.
   O cabeçalho do antigo é BRANCO nos três estados (topo, rolando, menu aberto),
   então aqui o azul é só o menu. Para pintar o cabeçalho também, ver o bloco
   comentado abaixo — e leia o motivo de ele estar desligado.

   O !important do cabeçalho não é preguiça: o pai fixa a cor com !important em
   cabecalho.css (linha 133, transparente; 143, transparente e rolado). Duas
   declarações !important se resolvem por ESPECIFICIDADE, não por ordem — por
   isso o estado rolado, que tem seletor mais forte, precisa estar na lista.

   @media ( max-width: 900px ) {
   	body .cabecalho-site .cabecalho-site__interno,
   	body .cabecalho-transparente .cabecalho-site__interno,
   	body .cabecalho-transparente .cabecalho-site.esta-rolado .cabecalho-site__interno,
   	body .cabecalho-fixo .cabecalho-site.esta-rolado .cabecalho-site__interno {
   		background-color: #2d3265 !important;
   	}
   	.cabecalho-site img.custom-logo { filter: brightness(0) invert(1); }
   	.cabecalho-site .plataformaosc-menu__toggle,
   	.cabecalho-site .plataformaosc-menu__toggle-barras,
   	.cabecalho-site .plataformaosc-menu__toggle-barras::before,
   	.cabecalho-site .plataformaosc-menu__toggle-barras::after { color: #ffffff; }
   }
   =========================================================================== */

@media ( max-width: 900px ) {

	/* --- menu do celular: painel azul, links brancos --- */
	.plataformaosc-menu--com-toggle .plataformaosc-menu__nav,
	.cabecalho-site .plataformaosc-menu__nav {
		background-color: #2d3265;
	}

	.plataformaosc-menu__nav a,
	.plataformaosc-menu__nav .menu-item > a,
	.plataformaosc-menu__nav .menu-item a {
		color: #ffffff;
	}

	/* No legado o item corrente também é branco: sem marca de cor diferente. */
	.plataformaosc-menu__nav .current-menu-item > a,
	.plataformaosc-menu__nav .current-menu-ancestor > a {
		color: #ffffff;
	}
}

/* ===========================================================================
   LINHA DO TEMPO DA PÁGINA LEGADO — zigue-zague do site antigo
   Medido em plataformaosc.org.br/legado/, 1180px:

     container          : 1000px, centralizado
     item               : duas colunas de 475px com 20px de gutter no meio
     ponto (marcador)   : 20x20, fundo rgb(46,50,102), raio 50%, centrado no
                          gutter, alinhado com a linha da data (+40px do topo)
     cartão             : branco, raio 10px, padding 20px, sombra
                          0 10px 40px rgba(0,0,0,.1), e BORDA DE 4px navy no
                          lado que encara o eixo (esquerda no cartão da direita,
                          direita no cartão da esquerda)
     data               : 18px/600 rgb(51,51,51), na METADE OPOSTA ao cartão,
                          25px para dentro do item
     título             : 18px/700 rgb(68,68,68)
     corpo              : 18px/400 rgb(103,103,103)
     eixo               : NÃO existe linha desenhada. Amostragem de pixel no
                          print do antigo (x=586..594, 1.200 linhas): só 24
                          pixels navy, que são os pontos. E varredura por
                          gradiente/pseudo-elemento não achou nenhum traço.
                          Então: pontos sem linha. (Se um dia quiserem linha,
                          é um ::before no .posc-legado-lista.)

   O markup já vem pronto para isso e mora no tema PAI (pattern
   plataformaosc/legado): cada marco é article.posc-legado-item, com o
   modificador --invertido nos alternados e --midia quando tem imagem ou vídeo.
   Aqui só há CSS: nenhum template ou part do pai foi copiado.
   =========================================================================== */

/* O container do pai é a coluna de leitura (700px). A timeline do antigo tem
   1000px, então ela sai da coluna — sem mexer no layout do pai.

   Cuidado que custou uma medição: o WordPress aplica nos filhos de um grupo
   `is-layout-constrained`
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: var(--wp--style--global--content-size);
        margin-left: auto !important; margin-right: auto !important;
     }
   ou seja: (a) só `width` não basta — o `max-width` limita de volta aos 700px;
   e (b) mexer em `margin-left` é inútil, tem `!important`. Por isso a saída é
   `left: 50%` + `translateX(-50%)` sobre a própria largura, e declarar o
   `max-width` também. Com auto margins num filho mais largo que o pai, a caixa
   encosta na esquerda do pai; aí +50% do pai (metade de 700) e -50% da própria
   largura (metade de 1000) centram na viewport: (1180-1000)/2 = 90px. */
.posc-legado-lista {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1000px, calc(100vw - 40px));
	max-width: min(1000px, calc(100vw - 40px));
}

/* Cada marco: duas metades. O cartão ocupa uma, a data a outra.
   O padding de 15px nas laterais é o recuo do item no antigo (o item medido tem
   970px dentro do container de 1000px), e é ele que faz a data cair em x=130 e
   o cartão em x=630, como no original. */
.posc-legado-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	padding: 20px 15px;
}

/* O ponto do eixo, centrado no gutter (a coluna do meio), na linha da data. */
.posc-legado-item::before {
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	background-color: #2e3466;
	border-radius: 50%;
	z-index: 2;
}

/* O cartão é desenhado por trás do texto e da mídia, para os dois ficarem
   DENTRO de um cartão só — o markup traz texto e mídia como irmãos. */
.posc-legado-item::after {
	content: "";
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: calc(50% + 40px);
	right: 15px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	border-left: 4px solid #2e3466;
	z-index: 0;
}

/* Cartão à esquerda nos itens invertidos. */
.posc-legado-item--invertido::after {
	left: 15px;
	right: calc(50% + 40px);
	border-left: 0;
	border-right: 4px solid #2e3466;
}

/* Conteúdo acima do cartão; sem fundo próprio.
   SEM `position: relative` aqui, de propósito: a data é filha do bloco de
   texto, e se o bloco virar bloco de contenção a data passa a se posicionar
   pelo CARTÃO — foi assim que ela foi parar em x=625 em vez de x=130. Item de
   grid aceita z-index sem position, então a sobreposição continua garantida. */
.posc-legado-texto,
.posc-legado-midia {
	z-index: 1;
	grid-column: 2;
	background: none;
}

.posc-legado-item--invertido .posc-legado-texto,
.posc-legado-item--invertido .posc-legado-midia {
	grid-column: 1;
}

/* Ritmo interno do cartão: 20px de padding, igual ao antigo. */
.posc-legado-texto {
	padding: 20px 20px 0;
}

.posc-legado-midia {
	margin: 0;
	padding: 0 20px 20px;
}

/* Sem mídia, o texto fecha o cartão (padding inferior de verdade). */
.posc-legado-item:not(.posc-legado-item--midia) .posc-legado-texto {
	padding-bottom: 20px;
}

.posc-legado-midia img,
.posc-legado-midia iframe {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* A data vai para a METADE OPOSTA ao cartão: 25px dentro do item que, com o
   recuo de 15px, dá 40px do container — x=130 no antigo. */
.posc-legado-data {
	position: absolute;
	top: 38px;
	left: 40px;
	width: calc(50% - 60px);
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	line-height: 1.2;
	margin: 0;
}

.posc-legado-item--invertido .posc-legado-data {
	left: calc(50% + 40px);
}

/* Tipografia do antigo. */
.posc-legado-titulo {
	font-size: 18px;
	font-weight: 700;
	color: #444444;
	margin: 0 0 5px;
}

.posc-legado-desc {
	font-size: 18px;
	font-weight: 400;
	color: #676767;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   CELULAR — medido em 393px: o eixo vai para a ESQUERDA (ponto a 19px da
   borda do container) e todos os cartões ficam à direita dele (a partir de
   70px), com a data acima do cartão.
   --------------------------------------------------------------------------- */
@media ( max-width: 900px ) {

	.posc-legado-lista {
		position: relative;
		left: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
	}

	.posc-legado-item {
		display: block;
		padding: 46px 0 14px 70px;
	}

	.posc-legado-item::before {
		top: 26px;
		left: 19px;
		margin-left: 0;
	}

	.posc-legado-item::after {
		top: 46px;
		bottom: 14px;
		left: 70px;
		right: 0;
		border-left: 4px solid #2e3466;
		border-right: 0;
	}

	.posc-legado-item--invertido::after {
		left: 70px;
		right: 0;
		border-left: 4px solid #2e3466;
		border-right: 0;
	}

	.posc-legado-texto,
	.posc-legado-item--invertido .posc-legado-texto,
	.posc-legado-midia,
	.posc-legado-item--invertido .posc-legado-midia {
		grid-column: auto;
	}

	/* Data acima do cartão, começando na altura do ponto. */
	.posc-legado-data,
	.posc-legado-item--invertido .posc-legado-data {
		position: absolute;
		top: 16px;
		left: 30px;
		width: auto;
		margin: 0;
		text-align: left;
	}
}