/*
Theme Name: Coalición LAC - Consulta Regional
Description: Landing de la Consulta Regional de la Intendencia de Montevideo, Mundo Afro y la Coalición LAC.
Version: 4.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coalicion-lac
*/

:root {
	--radius-card: 20px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 2px rgb(34 22 46 / 0.06), 0 12px 32px -12px rgb(34 22 46 / 0.18);
	--pending-bg: #fff1a8;
	--tap-size: 52px;
	/* Brief round 2: every button and link gets a 48 x 48 px touch area. */
	--tap-min: 48px;
	--muted: #5f4f68;
	--icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.9 0-1.4.7-2 1-2.3.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.4c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.1 1.3Z'/%3E%3C/svg%3E");
	--icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
	--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
	--icon-city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l5-3v15M10 21V4l9 4v13M13 10h3M13 14h3M13 18h3M7 13h1M7 17h1'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	/* Territory card icons are drawn light (stroke #FBF6EE) because they sit on the plum band as background images. */
	--icon-root: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6EE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='0.5'/%3E%3C/svg%3E");
	--icon-city-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6EE' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V9l5-3v15M10 21V4l9 4v13M13 10h3M13 14h3M13 18h3M7 13h1M7 17h1'/%3E%3C/svg%3E");
	--icon-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF6EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 7'/%3E%3C/svg%3E");
	--icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3Z'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > footer,
.wp-site-blocks > main { margin-block-start: 0; }

/* Keyboard users must always see where they are (WCAG AA + keyboard navigation). */
:where(a, button, summary, input):focus-visible { outline: 3px solid var(--wp--preset--color--oro); outline-offset: 3px; border-radius: 6px; }
.has-crema-background-color :where(a, summary):focus-visible,
.has-arena-background-color :where(a, summary):focus-visible,
.has-blanco-background-color :where(a, summary):focus-visible { outline-color: var(--wp--preset--color--vino); }

/* Toolbar format "Por confirmar" (assets/editor.js), kept for Paula's own future edits. */
mark.por-confirmar { background: var(--pending-bg); color: var(--wp--preset--color--tinta); padding: 0.05em 0.35em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Text links that stand alone get a full touch area without changing how they look. */
.microtext a, .qr-link a, .closing-contact a, .contest-contact a {
	display: inline-flex; align-items: center; min-height: var(--tap-min); text-underline-offset: 3px;
}

/* ---------- Header: logos in the brief's order (Mundo Afro, Intendencia, Coalición LAC) ---------- */
/* Sticky so the language switch is always one tap away; the parent part must be sticky, not the group. */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header { top: var(--wp-admin--admin-bar--height, 32px); }
/* White, not cream: the Intendencia logo has a white background and must sit on a light, flat band. */
.site-header { gap: 1rem; padding-inline: var(--wp--style--root--padding-left, 1.25rem); border-bottom: 1px solid var(--wp--preset--color--arena); }
.logo-row { gap: clamp(0.75rem, 2.5vw, 1.75rem); }
.logo-row .wp-block-image { margin: 0; }
/* Newer Polylang wraps the list in .pll-switcher.pll-layout-vertical (full width, stacked); keep our compact pill. */
.lang-switch { flex: none; width: auto; }
.lang-switch ul, ul.lang-switch { display: flex; flex-direction: row !important; width: auto; gap: 0.25rem; margin: 0; padding: 0.25rem; list-style: none; background: var(--wp--preset--color--arena); border-radius: var(--radius-pill); }
.lang-switch li { margin: 0; }
.lang-switch a { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 0.9rem; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.875rem; color: var(--wp--preset--color--tinta); text-decoration: none; }
.lang-switch .current-lang a { background: var(--wp--preset--color--bordo); color: var(--wp--preset--color--blanco); }

/* ---------- Shared pieces (sentence case everywhere: brief, round 2) ---------- */
.eyebrow { margin-bottom: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--oro); }
.eyebrow--dark { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--wp--preset--color--vino); }
.section-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 0.75rem; border-radius: 2px; background: var(--wp--preset--color--coral); }
.section-title.has-text-align-center::after { margin-inline: auto; }
.has-blanco-color .section-title::after { background: var(--wp--preset--color--oro); }
.section-head > p, .section-lead { max-width: 62ch; }
.section-lead { margin-inline: auto; }
.microtext { margin-top: 0.75rem; font-size: 0.8125rem; opacity: 0.92; }
.microtext a { color: inherit; }
.microtext--dark { color: var(--muted); opacity: 1; }

.card { height: 100%; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card--accent { border-top: 5px solid var(--wp--preset--color--vino); }
.step-label { display: inline-block; align-self: flex-start; margin: 0; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 800; background: var(--wp--preset--color--crema); color: var(--wp--preset--color--vino); }

.equal-cards > .wp-block-column { display: flex; flex-direction: column; flex-grow: 0; }
.equal-cards > .wp-block-column > .wp-block-group { display: flex; flex-direction: column; flex-grow: 1; }
.equal-cards .cta-bottom, .doc-card .cta-bottom { margin-top: auto; }

.toggle summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--tap-min); cursor: pointer; font-weight: 700; color: var(--wp--preset--color--vino); }
.has-blanco-color .toggle summary { color: inherit; }

/* ---------- Buttons: one mustard button (the form), everything else outlined ---------- */
.wp-block-button__link { min-height: var(--tap-size); display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.btn-main .wp-block-button__link { box-shadow: 0 10px 24px -10px rgb(245 197 24 / 0.7); }
.btn-main .wp-block-button__link:hover { background: #ffd43b; }
.is-style-outline > .wp-block-button__link { background: transparent; border: 2px solid currentColor; }
.btn-light .wp-block-button__link { color: var(--wp--preset--color--blanco); }
.btn-light .wp-block-button__link:hover { background: rgb(255 255 255 / 0.12); }
.btn-dark .wp-block-button__link { color: var(--wp--preset--color--tinta); }
.btn-dark .wp-block-button__link:hover { background: var(--wp--preset--color--tinta); color: var(--wp--preset--color--blanco); }
/* WhatsApp: green stays only on these buttons, as an outline (brief: "con borde, nunca mostaza"). */
.btn-wa .wp-block-button__link { color: var(--wp--preset--color--verde); font-size: 1.125rem; }
.btn-wa .wp-block-button__link:hover { background: var(--wp--preset--color--verde); color: var(--wp--preset--color--tinta); }
.btn-download .wp-block-button__link::before,
.btn-wa .wp-block-button__link::before { content: ""; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.btn-download { --icon: var(--icon-download); }
.btn-wa { --icon: var(--icon-whatsapp); }
@media (max-width: 600px) {
	.wp-block-buttons > .wp-block-button, .wp-block-buttons > .wp-block-button .wp-block-button__link { width: 100%; }
}

/* ---------- Motion ---------- */
.fade-up { opacity: 0; transform: translateY(24px); animation: fadeUp 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero .fade-up:nth-child(2) { animation-delay: 0.08s; }
.hero .fade-up:nth-child(3) { animation-delay: 0.16s; }
.hero .fade-up:nth-child(4) { animation-delay: 0.24s; }
.hero .fade-up:nth-child(n+5) { animation-delay: 0.32s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* Only hide when JS is running, so content never stays invisible if the script fails. */
.js .animate-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.js .animate-on-scroll.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.fade-up, .animate-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* Editor: the observer only runs on the front end, so keep everything visible while editing. */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }