/*
Theme Name: Vanessa Rahal Canado
Theme URI: https://vanessarc.com.br
Author: Radish Lab
Author URI: https://radishlab.com
Description: Custom Full Site Editing (block) theme for vanessarc.com.br. Replaces the previous Elementor build. Design tokens (colors, typography, spacing) live in theme.json; sections are core-block patterns.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vanessarc
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   Values below are matched to the live site (vanessarc.com.br), measured with
   headless Chrome computed styles. theme.json handles palette + base; these
   rules pin the exact per-section typography, spacing and color context.
   ========================================================================== */

:root {
	--vrc-navy: var(--wp--preset--color--primary);
	--vrc-gold: var(--wp--preset--color--secondary);
	--vrc-accent: var(--wp--preset--color--accent);
	--vrc-cream: var(--wp--preset--color--cream);
	--vrc-sand: var(--wp--preset--color--sand);
	--vrc-paper: var(--wp--preset--color--paper);
	--vrc-grey: var(--wp--preset--color--grey);
	--vrc-lightgrey: var(--wp--preset--color--light-grey);
}

/* --- Type scale (N27 display + Roboto body), matched to source --- */
.t-display {  /* intro "Transformar…" — 66px N27 Light */
	font-family: "N27", sans-serif;
	font-weight: 300;
	font-size: clamp(2.125rem, 1rem + 3.4vw, 4.125rem);
	line-height: 1.12;
	letter-spacing: -0.06em;
}
.t-h2 {  /* section titles "Quem somos", "O que fazemos"… — 60px N27 Light */
	font-family: "N27", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 1rem + 3vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.06em;
}
.t-name {  /* team card names — 40px N27 */
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.07em;
}
.t-lead {  /* section lead copy — 30px N27 */
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 0.9rem + 1.4vw, 1.875rem);
	line-height: 1.4;
	letter-spacing: -0.033em;
}
.t-pub {  /* publication titles — 32px N27 */
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2rem);
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.t-eyebrow {  /* "DIREITO TRIBUTÁRIO…" label — 36px N27 accent */
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: clamp(1.375rem, 0.9rem + 1.5vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.04em;
}
.t-tagline {  /* header tagline — 34px N27 accent */
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: -0.05em;
}
.t-body {  /* body copy — 20px Roboto */
	font-family: "Roboto", sans-serif;
	font-size: 1.25rem;
	line-height: 1.7;
}
.t-body-sm {  /* card body — 17.5px Roboto */
	font-family: "Roboto", sans-serif;
	font-size: 1.09rem;
	line-height: 1.5;
}
.t-bio {  /* team bio — 20px Roboto, matched to source */
	font-family: "Roboto", sans-serif;
	font-size: 1.25rem;
	line-height: 1.55;
}

/* --- Section vertical rhythm --- */
.vrc-section { padding-block: clamp(3rem, 5vw, 5rem); }
.vrc-section-lg { padding-block: clamp(4rem, 7vw, 7.5rem); }

/* Full-width colour bands butt directly against each other (no white gaps).
   The gaps come from the constrained-layout blockGap applied as sibling margins. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > * { margin-block: 0; }

/* --- Standardised spacing -------------------------------------------------
   Two site-wide rules, applied via semantic classes so they hold no matter
   which inline margins the block editor baked into the page content
   (hence !important — inline styles otherwise win):
     1. Section title (.t-h2) → its lead / body / list content: 48px
     2. Prose paragraphs (lead, body, bio): 24px apart
   Composed layouts keep their own intentional rhythm (stepper, team cards,
   testimonial quote→name). */
.t-h2 + .t-lead,
.t-h2 + .t-body { margin-top: 48px !important; }

.t-lead + .t-lead,
.t-body + .t-body,
.t-bio  + .t-bio  { margin-top: 24px !important; }

/* Missão / Valores / Visão — three-column feature living in its own navy
   group (.mvv-band) that butts against the intro group (.mvv-intro) with no
   visual break: the intro drops its bottom padding, the band drops its top
   padding to 48px, so the lead→columns gap stays 48px over continuous navy. */
.mvv-intro { padding-bottom: 0 !important; }
.mvv-band  { padding-top: 48px !important; }
.mvv-columns { column-gap: 60px !important; }
/* Column copy matches the publications link size (24px). */
.mvv-columns .t-lead { font-size: 24px; }

/* --- Header --- */
/* Fixed navigation: the <nav> is pinned to the top of the viewport on every
   scroll (fixed, not sticky — sticky can't span the whole page from inside the
   short header). On desktop this is the horizontal menu bar; on mobile it
   carries the open (hamburger) / close (X) toggle button. */
.site-header .wp-block-navigation {
	font-family: "N27", sans-serif;
	font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.375rem);
	letter-spacing: -0.01em;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--vrc-lightgrey);
	padding-block: 10px;
	padding-inline: var(--wp--style--root--padding-left, 100px) var(--wp--style--root--padding-right, 100px);
}
/* Offset anchor targets so the fixed nav doesn't cover the section heading
   when jumping to #quem-somos, #o-que-fazemos, etc. */
#quem-somos,
#o-que-fazemos,
#publicacoes,
#clientes,
#contato {
	scroll-margin-top: 5rem;
}
.site-header .wp-block-navigation a { color: var(--vrc-navy); }
.site-header .wp-block-navigation a:hover { color: var(--vrc-accent); }
/* Header logo (theme-asset image) sizing. */
.site-logo-img img { width: 50vw; max-width: 390px; height: auto; display: block; }

/* Mobile menu overlay — keep items off the screen edges. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 3rem clamp(1.5rem, 7vw, 3rem);
}
/* Close (X) button is positioned separately — give it a matching right/top offset. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.5rem;
	right: clamp(1rem, 6vw, 2.5rem);
}

/* --- Footer (gold band) --- */
.site-footer .wp-block-navigation {
	font-family: "N27", sans-serif;
	font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.5rem);
	letter-spacing: -0.02em;
}
.site-footer .wp-block-navigation a { color: var(--vrc-navy); }
.site-footer .wp-block-navigation a:hover { color: var(--vrc-accent); }
.footer-contact a { color: var(--vrc-accent); }
.footer-contact a:hover { color: var(--vrc-navy); }

/* Card contact links (email / LinkedIn) inherit the paragraph's terracotta. */
.team-card .has-accent-color a { color: inherit; }

/* Card "Leia mais" toggle — reveal/hide the rest of the bio (stays on page). */
.bio-more { display: none; }
.team-card.bio-expanded .bio-more { display: block; }
.leia-mais-wrap { text-align: right; margin-top: var(--wp--preset--spacing--30); }
.bio-toggle {
	font-family: "Roboto", sans-serif;
	font-size: 0.95rem;
	color: var(--vrc-navy);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.bio-toggle:hover { text-decoration: underline; }

/* Quem somos cards overlap down into the following (O que fazemos) section. */
.team-cards { position: relative; z-index: 2; margin-top: 48px !important; margin-bottom: -220px !important; justify-content: center; }
.team-card { max-width: 484px; }
.oqf { padding-top: clamp(17rem, 20vw, 19rem); }

/* Responsive content gutters: 100px large / 50px ≤1200 / 15px ≤768.
   WP declares these vars on `body`, so override there (with !important to beat it). */
@media (max-width: 1200px) {
	body {
		--wp--style--root--padding-left: 50px !important;
		--wp--style--root--padding-right: 50px !important;
	}
}
@media (max-width: 768px) {
	body {
		--wp--style--root--padding-left: 15px !important;
		--wp--style--root--padding-right: 15px !important;
	}
}

/* --- Team portraits: grayscale, small square crop like source (~269px) --- */
.team-card .wp-block-image { max-width: 269px; }
.team-card figure img,
.team-photo img { filter: grayscale(100%); width: 100%; height: auto; display: block; }
.team-card .wp-block-image img { aspect-ratio: 269 / 262; object-fit: cover; }

/* --- "O que fazemos" process stepper --- */
.step-circle {
	width: 4.3rem;
	height: 4.3rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: 1.75rem;
}
.step-label {
	font-family: "N27", sans-serif;
	font-size: 1.1875rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 1.45;
	text-align: center;
}
/* Larger gap between the section title and the stepper (matches source ~138px). */
.stepper { position: relative; margin-top: 48px !important; }
/* Connector line running behind the circles (as on source). */
.stepper::before {
	content: "";
	position: absolute;
	top: 2.15rem;
	left: 12%;
	right: 12%;
	height: 1px;
	background: var(--vrc-cream);
	opacity: 0.55;
	z-index: 0;
}
.stepper > .wp-block-column { position: relative; z-index: 1; }
/* Stacked (mobile): the horizontal connector line no longer makes sense. */
@media (max-width: 781px) {
	.stepper::before { display: none; }
}

/* --- "Como trabalhamos" eixo cards --- */
.eixo-card { padding: 1.75rem 1.75rem 2rem; position: relative; }
/* Right-pointing arrow ribbon between the first two cards (desktop only, when columns are side-by-side) */
@media (min-width: 782px) {
	.eixo-card:not(:last-child) {
		clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%);
	}
	.eixo-card:not(:last-child) > * { max-width: calc(100% - 0.9rem); }
}
/* When the cards stack (mobile), point the arrow ribbon downward (to the footer of each card). */
@media (max-width: 781px) {
	.eixo-card:not(:last-child) {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.4rem), 50% 100%, 0 calc(100% - 1.4rem));
		padding-bottom: 3.4rem;
	}
}
.eixo-card .eixo-num {
	font-family: "N27", sans-serif;
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1.2;
}
.eixo-card h3 {
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.055em;
	text-transform: uppercase;
	margin-block: 0.25rem 0.5rem;
}

/* --- Publications (two columns of article links) --- */
.pub-item + .pub-item { margin-top: 1.25rem; }
.pub-columns { align-items: start; margin-top: 48px !important; column-gap: 60px !important; }
.pub-col-title {
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 48px;
}
.pub-link { margin: 0; }
.pub-link a {
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--vrc-cream);
	text-decoration: none;
}
.pub-link a:hover { color: var(--vrc-navy); }
.pub-item hr.wp-block-separator {
	border-color: rgb(212, 209, 202);
	color: rgb(212, 209, 202);
	border-top-width: 1px;
	margin-block: 1.25rem 0;
}
a.leia-mais {
	font-family: "Roboto", sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-decoration: none;
}
a.leia-mais:hover { text-decoration: underline; }
.pub-item a.leia-mais { color: rgba(237, 229, 218, 0.75); }
.pub-item a.leia-mais:hover { color: var(--vrc-cream); }
/* "Ver mais" toggle — reveal/hide older publications */
.pub-more { display: none; }
.pub-col.expanded .pub-more { display: block; }
.pub-toggle-wrap { margin-top: 2rem; }
.pub-toggle {
	font-family: "Roboto", sans-serif;
	font-weight: 500;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--vrc-cream);
	background-color: var(--vrc-accent);
	border: 0;
	padding: 1rem 2rem;
	cursor: pointer;
}
.pub-toggle:hover { background-color: var(--vrc-navy); }

/* --- Depoimentos (clients) carousel --- */
/* width intentionally left auto: as an alignfull block it stretches edge-to-edge
   via WP's negative root-padding margins. An explicit width:100% would resolve to
   the padded content width and only shift left, leaving a gap on the right. */
.depoimentos-swiper { padding-bottom: 0.5rem; margin-top: 48px !important; }
/* Equal-height slides (CSS only). The swiper-wrapper is a flex row, so slides
   stretch to the tallest via align-items:stretch (default) + height:auto.
   CRUCIAL: the wrapper is a WP flow-layout group, which injects a block-gap
   `margin-block-start` on every slide except the first. In a flex row that
   vertical margin eats into the stretched cross-size, making all-but-the-first
   slide shorter (and inflating the first). Zeroing it lets stretch equalize.
   The card fills its slide with height:100%. */
.depoimentos-swiper .swiper-slide { height: auto; margin-top: 0; }
.client-card {
	padding: 1.75rem;
	height: 100%;
}
/* brand zone at the TOP of the card: holds the logo image, or the client name
   as a text fallback when no logo is provided */
.client-logo {
	min-height: 80px;
	display: flex;
	align-items: center;
	margin: 0 0 1.25rem;
}
.client-logo-img {
	max-width: 140px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
/* Ambev logo runs visually larger than the others — cap its height. */
.client-logo-img[src*="ambev"] { max-height: 55px; }
.client-text { min-width: 0; }
.client-text > *:first-child { margin-top: 0 !important; }
.client-card .client-name {
	font-family: "N27", sans-serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: -0.05em;
}
.client-card .client-person {
	font-family: "N27", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.2;
	opacity: 0.85;
}
.depoimentos-swiper .swiper-pagination {
	position: static;
	margin-top: 1.75rem;
}
.depoimentos-swiper .swiper-pagination-bullet { background: var(--vrc-navy); opacity: 0.3; }
.depoimentos-swiper .swiper-pagination-bullet-active { background: var(--vrc-accent); opacity: 1; }

/* --- Intro down-arrow: terracotta circle straddling the hero/gold boundary --- */
.hero { position: relative; }
.hero .scroll-arrow {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	margin: 0 !important;
	z-index: 5;
}
.scroll-arrow .wp-block-button__link {
	width: 4.5rem !important;
	height: 4.5rem !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	line-height: 0;
}
.scroll-arrow .wp-block-button__link::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M12 4v15M6 13l6 6 6-6'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M12 4v15M6 13l6 6 6-6'/></svg>") center / contain no-repeat;
}