/*
Theme Name: WISE Redesign
Theme URI: https://wisewomen.pt/
Description: Child theme do Blocksy para a reformulação pública do projeto WISE.
Author: WISE
Template: blocksy
Version: 0.1.0
Text Domain: wise-redesign
*/

/*
 * WISE Design Tokens
 * Nesta primeira versão, os estilos de componentes estão intencionalmente
 * limitados a wrappers com a classe .wise-site para não interferir com a
 * aplicação WISE Database.
 */

:root {
	--wise-navy: #030069;
	--wise-orange: #ff5a00;
	--wise-cream: #fdfbf7;
	--wise-grey: #e0e0e0;
	--wise-indigo: #4B0082;
	--wise-ink: #1F1F24;
	--wise-white: #ffffff;

	--wise-radius-sm: 8px;
	--wise-radius-md: 16px;
	--wise-radius-lg: 28px;

	--wise-shadow-sm: 0 8px 24px rgba(3, 0, 105, 0.08);
	--wise-shadow-md: 0 18px 48px rgba(3, 0, 105, 0.12);

	--wise-content: 1200px;
	--wise-reading: 760px;

	--wise-space-1: 0.5rem;
	--wise-space-2: 0.75rem;
	--wise-space-3: 1rem;
	--wise-space-4: 1.5rem;
	--wise-space-5: 2rem;
	--wise-space-6: 3rem;
	--wise-space-7: 4.5rem;
	--wise-space-8: 6rem;
}

/* Acessibilidade */
.wise-site :focus-visible {
	outline: 3px solid var(--wise-orange);
	outline-offset: 3px;
}

.wise-site ::selection {
	background: var(--wise-orange);
	color: var(--wise-navy);
}

/* Estrutura base das páginas editoriais */
.wise-site {
	color: var(--wise-ink);
	background: var(--wise-cream);
}

.wise-site .wise-container {
	width: min(calc(100% - 2rem), var(--wise-content));
	margin-inline: auto;
}

.wise-site .wise-reading {
	width: min(100%, var(--wise-reading));
}

.wise-site .wise-section {
	padding-block: clamp(3.5rem, 7vw, 7rem);
}

.wise-site .wise-section--compact {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.wise-site .wise-section--navy {
	background: var(--wise-navy);
	color: var(--wise-cream);
}

.wise-site .wise-section--indigo {
	background: var(--wise-indigo);
	color: var(--wise-white);
}

.wise-site .wise-section--white {
	background: var(--wise-white);
}

/* Pequeno rótulo editorial */
.wise-site .wise-kicker {
	margin: 0 0 0.75rem;
	color: var(--wise-orange);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Tipografia editorial; família tipográfica será definida no Blocksy */
.wise-site .wise-display {
	margin-top: 0;
	color: var(--wise-navy);
	font-size: clamp(2.8rem, 7vw, 6.5rem);
	line-height: 0.96;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.wise-site .wise-lead {
	max-width: 48rem;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.55;
}

.wise-site .wise-section-title {
	margin-top: 0;
	color: var(--wise-navy);
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* Botões WISE */
.wise-site .wise-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.wise-site .wise-button,
.wise-site a.wise-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.25rem;
	border: 2px solid var(--wise-navy);
	border-radius: 999px;
	background: var(--wise-navy);
	color: var(--wise-cream);
	font-weight: 750;
	line-height: 1.1;
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.wise-site .wise-button:hover,
.wise-site a.wise-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--wise-shadow-sm);
	color: var(--wise-cream);
}

.wise-site .wise-button--orange,
.wise-site a.wise-button--orange {
	border-color: var(--wise-orange);
	background: var(--wise-orange);
	color: var(--wise-navy);
}

.wise-site .wise-button--orange:hover,
.wise-site a.wise-button--orange:hover {
	color: var(--wise-navy);
}

.wise-site .wise-button--outline,
.wise-site a.wise-button--outline {
	background: transparent;
	color: var(--wise-navy);
}

/* Cards */
.wise-site .wise-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1rem, 2.4vw, 1.75rem);
}

.wise-site .wise-card {
	overflow: hidden;
	border: 1px solid var(--wise-grey);
	border-radius: var(--wise-radius-md);
	background: var(--wise-white);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.wise-site .wise-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wise-shadow-md);
}

.wise-site .wise-card__body {
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

.wise-site .wise-card img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bloco editorial / contributos */
.wise-site .wise-contribute {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: var(--wise-radius-lg);
	background: var(--wise-navy);
	color: var(--wise-cream);
}

.wise-site .wise-contribute::after {
	content: "";
	position: absolute;
	right: -5rem;
	bottom: -8rem;
	width: 20rem;
	height: 20rem;
	border: 3.5rem solid var(--wise-orange);
	border-radius: 50%;
	opacity: 0.95;
	pointer-events: none;
}

.wise-site .wise-contribute > * {
	position: relative;
	z-index: 1;
}

/* Utilitários */
.wise-site .wise-text-navy { color: var(--wise-navy); }
.wise-site .wise-text-orange { color: var(--wise-orange); }
.wise-site .wise-text-indigo { color: var(--wise-indigo); }
.wise-site .wise-bg-cream { background: var(--wise-cream); }
.wise-site .wise-bg-white { background: var(--wise-white); }

@media (prefers-reduced-motion: reduce) {
	.wise-site *,
	.wise-site *::before,
	.wise-site *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (max-width: 782px) {
	.wise-site .wise-container {
		width: min(calc(100% - 1.25rem), var(--wise-content));
	}

	.wise-site .wise-section {
		padding-block: 3.5rem;
	}
}