/* ============================================================
   LAYOUT v3 — Port LITERAL de src/app/components/Layout.tsx
   Header (fixo + logo + lang + busca + MENU)
   Mega Menu Overlay (3 grupos: Conhecer / Está acontecendo / Engajar)
   Newsletter (banner preto)
   Footer (4 cols + redes sociais + bottom bar)
   ============================================================ */


/* ============================================================
   HEADER FIXO
   <header className="fixed top-0 left-0 right-0 bg-white z-50 border-b border-black/10">
     <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
       <div className="flex items-center justify-between h-24">
   ============================================================ */

.v3-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	background: #fff;
	z-index: 50;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* v3.9.34 — Compensa a barra de admin do WordPress (que é fixed top:0 também).
   Sem isso, o header.v3-header fica sobreposto pelos primeiros 32px da admin bar
   e a Livia vê apenas 64px do header em vez de 96px → parece desalinhado/menor. */
body.admin-bar .v3-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .v3-header { top: 46px; }
}
.v3-header__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 6rem; /* h-24 = 96px */
}
@media (min-width: 640px)  { .v3-header__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .v3-header__inner { padding-inline: 2rem; } }

/* Logo (h-16 w-auto object-contain) */
.v3-header__logo { display: inline-flex; align-items: center; }
.v3-header__logo img {
	height: 4rem;
	width: auto;
	object-fit: contain;
	display: block;
}

/* Tools (right side): flex items-center gap-4 */
.v3-header__tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Language Switcher
   <div className="hidden md:flex items-center gap-0 border border-black/15">
     <button px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest>
*/
.v3-lang {
	display: none;
	align-items: center;
	gap: 0;
	border: 1px solid rgba(0,0,0,0.15);
}
@media (min-width: 768px) { .v3-lang { display: inline-flex; } }
.v3-lang__chip {
	font-family: 'Inter', system-ui, sans-serif;
	padding: 0.25rem 0.625rem;   /* py-1 px-2.5 */
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;        /* tracking-widest */
	background: #fff;
	color: rgba(0,0,0,0.4);
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms ease, background 200ms ease;
}
.v3-lang__chip:hover { color: #000; text-decoration: none; }
.v3-lang__chip.is-active {
	background: #000;
	color: #fff;
}

/* Search button — circle/button discreto */
.v3-header__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #000;
	padding: 0.5rem;
	transition: opacity 200ms ease;
}
.v3-header__search:hover { opacity: 0.6; }

/* MENU button:
   <button className="flex items-center gap-3 text-sm font-bold uppercase tracking-widest hover:opacity-60 transition-opacity">
*/
.v3-header__menu-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;  /* gap-3 */
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity 200ms ease;
}
.v3-header__menu-btn:hover { opacity: 0.6; }
.v3-header__menu-btn svg { width: 24px; height: 24px; }
.v3-header__menu-btn .v3-header__icon-close { display: none; }
body.v3-megamenu-open .v3-header__menu-btn .v3-header__icon-menu { display: none; }
body.v3-megamenu-open .v3-header__menu-btn .v3-header__icon-close { display: inline-flex; }


/* ============================================================
   MEGA MENU OVERLAY
   <div className="fixed inset-0 bg-white z-40 transition-transform duration-700 ease-in-out
                   ${megaMenuOpen ? 'translate-y-0' : '-translate-y-full'}">
   ============================================================ */

.v3-megamenu {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 40;
	padding-top: 6rem; /* sob o header */
	transform: translateY(-100%);
	transition: transform 700ms ease-in-out;
	visibility: hidden;
}
.v3-megamenu.is-open {
	transform: translateY(0);
	visibility: visible;
}
.v3-megamenu__scroll {
	height: 100%;
	overflow-y: auto;
	padding-bottom: 6rem; /* pb-24 */
}
.v3-megamenu__container {
	max-width: 1400px;
	margin-inline: auto;
	padding: 3rem 1rem; /* py-12 px-4 */
}
@media (min-width: 640px)  { .v3-megamenu__container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .v3-megamenu__container { padding-inline: 2rem; } }

.v3-megamenu__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem; /* gap-12 */
}
@media (min-width: 768px) {
	.v3-megamenu__grid {
		grid-template-columns: repeat(12, 1fr);
	}
}
@media (min-width: 1024px) {
	.v3-megamenu__grid { gap: 4rem; } /* lg:gap-16 */
}

/* Group 1 — md:col-span-6 */
.v3-megamenu__group--main {
	display: block;
}
@media (min-width: 768px) {
	.v3-megamenu__group--main { grid-column: span 6 / span 6; }
}

/* Group 2+3 wrapper — md:col-span-5 md:col-start-8 */
.v3-megamenu__group--side {
	display: flex;
	flex-direction: column;
	gap: 3rem; /* gap-12 */
}
@media (min-width: 768px) {
	.v3-megamenu__group--side {
		grid-column: 8 / span 5;
	}
}

/* Kicker (h3 das groups) */
.v3-megamenu__kicker {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(0,0,0,0.3);
	margin: 0 0 2rem 0;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.v3-megamenu__kicker--noborder {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1.5rem;
}
.v3-megamenu__kicker--acent { color: #00C1AC; }

/* Nav lists */
.v3-megamenu__nav {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* gap-3 */
}

/* Links grandes (Group 1) — clamp(2rem,4vw,3.5rem) */
.v3-megamenu__link--big {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em; /* tracking-tighter */
	line-height: 1;
	color: #000;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	transition: color 200ms ease, opacity 200ms ease;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	width: 100%;
}
.v3-megamenu__link--big[data-color]:hover { color: var(--menu-color, #CA047A); }
/* Botões expansíveis (Quem Somos / A Bienal) — literal TSX hover:opacity-70.
   Os links com data-color (CCBA, Sobre as Águas, Editora, Parceiros) mudam de cor;
   já os botões expansíveis fazem fade 70% no hover, conforme Layout.tsx. */
button.v3-megamenu__link--big:hover { opacity: 0.7; }

/* Plus icon (expansível) */
.v3-megamenu__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	border: 1.5px solid rgba(0,0,0,0.25);
	flex-shrink: 0;
	margin-top: 0.2rem;
	transition: transform 200ms ease;
}
.v3-megamenu__link--big.is-expanded .v3-megamenu__plus {
	transform: rotate(45deg);
}

/* Submenu */
.v3-megamenu__submenu {
	margin-top: 1rem;
	padding-left: 1.25rem;
	border-left: 2px solid rgba(0,0,0,0.1);
	display: none;
	flex-direction: column;
	gap: 0;
}
.v3-megamenu__submenu.is-open { display: flex; }
.v3-megamenu__sublink {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #000;
	text-decoration: none;
	padding: 0.5rem 0;
	display: block;
	transition: opacity 200ms ease;
}
.v3-megamenu__sublink:hover { opacity: 0.6; text-decoration: none; }

/* Group 2 (Está acontecendo) — links médios */
.v3-megamenu__link--mid {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: #000;
	text-decoration: none;
	transition: opacity 200ms ease;
}
.v3-megamenu__link--mid:hover { opacity: 0.6; text-decoration: none; }
.v3-megamenu__link--mid.is-accent { color: #00C1AC; }

/* Group 3 (Engajar) — links pequenos */
.v3-megamenu__link--small {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: clamp(0.875rem, 1.5vw, 1.1rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: #000;
	text-decoration: none;
	transition: opacity 200ms ease;
}
.v3-megamenu__link--small:hover { opacity: 0.5; text-decoration: none; }

/* Trava scroll do body quando menu aberto */
body.v3-megamenu-open { overflow: hidden; }


/* ============================================================
   NEWSLETTER (banner preto)
   <section className="bg-black text-white py-20">
   ============================================================ */

.v3-newsletter {
	background: #000;
	color: #fff;
	padding-block: 5rem; /* py-20 */
}
.v3-newsletter__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 1rem;
}
@media (min-width: 640px)  { .v3-newsletter__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .v3-newsletter__inner { padding-inline: 2rem; } }

.v3-newsletter__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem; /* gap-12 */
	align-items: end;
}
@media (min-width: 768px) {
	.v3-newsletter__grid { grid-template-columns: 1fr 1fr; gap: 6rem; } /* md:gap-24 */
}

.v3-newsletter__tag {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #CA047A;
	margin: 0 0 1rem 0;
}
.v3-newsletter__title {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 36px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	line-height: 0.9;
	color: #fff;                /* explícito — preto sobre preto sumia */
	margin: 0;
}
@media (min-width: 768px) { .v3-newsletter__title { font-size: 48px; } }
.v3-newsletter__sub {
	color: rgba(255,255,255,0.5);
	font-weight: 500;
	margin: 1rem 0 0 0;
}

.v3-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 0;
}
@media (min-width: 640px) {
	.v3-newsletter__form { flex-direction: row; }
}
.v3-newsletter__input {
	flex: 1;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	color: #fff;
	padding: 1rem 1.5rem;
	font-weight: 500;
	font-family: 'Inter', system-ui, sans-serif;
	transition: border-color 200ms ease;
}
.v3-newsletter__input::placeholder { color: rgba(255,255,255,0.3); }
.v3-newsletter__input:focus { outline: none; border-color: #CA047A; }
.v3-newsletter__btn {
	background: #CA047A;
	color: #fff;
	padding: 1rem 2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background 200ms ease;
}
.v3-newsletter__btn:hover { background: #a0035f; }
.v3-newsletter__lgpd {
	color: rgba(255,255,255,0.3);
	font-size: 12px;
	font-weight: 500;
	margin: 0.75rem 0 0 0;
}


/* ============================================================
   FOOTER
   <footer className="bg-white text-black border-t border-black/10">
   ============================================================ */

.v3-footer {
	background: #fff;
	color: #000;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.v3-footer__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding: 5rem 1rem; /* py-20 px-4 */
}
@media (min-width: 640px)  { .v3-footer__inner { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .v3-footer__inner { padding-inline: 2rem; } }

/* Grid 4 cols */
.v3-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
@media (min-width: 640px) { .v3-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .v3-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 4rem; } }

/* Coluna 1 — Endereço */
.v3-footer__col img {
	height: 3.5rem; /* h-14 */
	width: auto;
	object-fit: contain;
	filter: brightness(0); /* brightness-0 = preto puro */
	display: block;
	margin-bottom: 1.5rem;
}
.v3-footer__address {
	font-style: normal;
	font-size: 14px;
	color: rgba(0,0,0,0.5);
	font-weight: 500;
	line-height: 1.625;
	margin: 0 0 0.75rem 0;
}
.v3-footer__hours {
	font-size: 14px;
	color: rgba(0,0,0,0.5);
	font-weight: 500;
	margin: 0 0 1rem 0;
}
.v3-footer__map {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #000;
	text-decoration: none;
	transition: color 200ms ease;
	margin-bottom: 1.25rem;
}
.v3-footer__map:hover { color: #00C1AC; text-decoration: none; }

/* Kicker das colunas */
.v3-footer__h3 {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(0,0,0,0.4);
	margin: 0 0 1.5rem 0;
}

/* Lista de links */
.v3-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* space-y-3 */
}
.v3-footer__list a {
	font-size: 14px;
	font-weight: 500;
	color: rgba(0,0,0,0.6);
	text-decoration: none;
	transition: color 200ms ease;
}
.v3-footer__list a:hover { color: #000; text-decoration: none; }

/* Redes sociais */
.v3-footer__social {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.v3-footer__social-label {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(0,0,0,0.4);
	margin: 0 0 1rem 0;
}
.v3-footer__social-icons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.v3-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.2);
	color: rgba(0,0,0,0.5);
	transition: color 200ms ease, border-color 200ms ease;
}
.v3-footer__social-icon:hover {
	color: #000;
	border-color: #000;
}

/* Bottom bar */
.v3-footer__bottom {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	font-size: 12px;
	color: rgba(0,0,0,0.35);
	font-weight: 500;
}
@media (min-width: 768px) {
	.v3-footer__bottom { flex-direction: row; align-items: center; }
}
.v3-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}
.v3-footer__bottom-links a {
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: color 200ms ease;
}
.v3-footer__bottom-links a:hover { color: #000; text-decoration: none; }


/* ============================================================
   Ajuste main: desloca conteúdo pra baixo do header fixo
   ============================================================ */
.bdas-main {
	margin-top: 6rem; /* mt-24 */
}
/* Mas a Home tem hero que pula isso com margin-top negativo no .v3-hero */