/*
Theme Name: Mamativa
Theme URI: https://mamativa.pt
Author: Mamativa
Author URI: https://mamativa.pt
Description: Tema de blocos nativo (FSE) da Associação Mamativa — apoio a pessoas com cancro da mama no Algarve. Cores, tipografia e espaçamentos fiéis ao design da marca; sem plugins de construção de páginas.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.5.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mamativa
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, translation-ready

Todas as cores, tipos de letra e espaçamentos deste tema são definidos em theme.json.
Este ficheiro só acrescenta os elementos puramente decorativos do hero (círculo
em gradiente e botão de "play") que não têm equivalente nativo em blocos —
título, subtítulo e botões continuam a ser blocos normais, editáveis.
*/

/* WP's global blockGap (theme.json styles.spacing.blockGap) puts a top
   margin on every direct child of .wp-site-blocks except the first — so the
   header (first child) sits flush, but everything after it (hero, page
   banners, footer) gets pushed down by that gap, leaving a stray band of
   background color between the sticky header and the section below it.
   Sections already carry their own padding for visual spacing, so this
   extra margin is never wanted at the top level. Zero it here once,
   globally, instead of overriding it block-by-block in every template. */
.wp-site-blocks > * {
	margin-top: 0;
}

@keyframes mamativa-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(10px, -16px) scale(1.03); }
}

/* Hero: decorative blob behind the title, and a "play" affordance over the photo.
   Both are visual-only (aria-hidden) — they never carry editable content. */
.mamativa-hero-text-col {
	position: relative;
	z-index: 2;
}

.mamativa-hero-blob {
	position: absolute;
	top: 8%;
	left: -46px;
	width: 230px;
	height: 230px;
	border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
	background: rgba(255, 255, 255, 0.22);
	filter: blur(1px);
	animation: mamativa-float 10s ease-in-out infinite;
	z-index: -1;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.mamativa-hero-blob {
		animation: none;
	}
}

.mamativa-hero {
	position: relative;
}

/* The hero photo bleeds to the true right edge of the viewport (not just its
   1240px content column) and fades into the gradient on its left edge — the
   two-column grid still reserves the layout space for it, but the image
   itself breaks out of that column via absolute positioning, exactly like
   the original design. This can't be done with block supports alone
   (no native "bleed past the container, masked" option), so it lives here. */
.mamativa-hero-image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62%;
	min-height: 0 !important;
	border-radius: 0 !important;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 55%);
	mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 55%);
	z-index: 1;
}

.mamativa-play-button {
	position: absolute;
	top: 50%;
	right: 22%;
	transform: translateY(-50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
}

@media (max-width: 781px) {
	.mamativa-hero-blob {
		display: none;
	}

	.mamativa-hero-image {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}
}