/**
 * parts/footer.html — the brand-red footer panel shared by every page.
 *
 * A template part has no block.json to declare its own stylesheet against,
 * so this lives in assets/css/parts/ and is enqueued unconditionally by
 * miraigo_enqueue_part_styles() in inc/assets.php.
 *
 * The panel is one continuous red block (1720x590 = wideSize),
 * but the source order is written for mobile and desktop re-arranges it
 * with grid-template-areas: brand/nav/contact on top, login/divider/legal on the bottom rows, the oneline hand bleeding
 * off the bottom edge as an absolutely positioned decorative layer.
 */

/*
 * stylelint no-descending-specificity is off for this file. Every pair it
 * flags targets different elements that only share a tag: the logo's `a`
 * and `img` against the social, nav and legal links; the login
 * button against the contact pair's buttons; the footer-wide focus ring
 * (outline only) against the social badges (glyph and plate only). None of
 * them can match the same element with the same property.
 */
/* stylelint-disable no-descending-specificity */

/**
 * .site-footer__panel carries .is-surface-brand so the buttons inside it
 * resolve the brand-surface contract (core-button.css). That class also
 * matches section-panel's rules in core-group.css — the 1616px width cap,
 * overflow:clip, the three-stop radius and the panel padding — which are
 * section-panel's box, not the footer's. The overrides below are qualified
 * with .wp-block-group so they win on specificity (0,3,0 vs 0,2,0) and the
 * outcome does not depend on stylesheet order: this panel is 1720px
 * (wideSize via alignwide), keeps the gesture's bottom bleed (overflow
 * visible) and stays at radius.panel-desktop (18px).
 */

/* Section gap above the footer instead of the 40px root blockGap. */
footer.wp-block-template-part {
	margin-block-start: var(--wp--preset--spacing--65);
}

.wp-block-group.site-footer__panel.is-surface-brand {
	position: relative;
	display: grid;
	row-gap: var(--wp--preset--spacing--45);
	grid-template-areas:
		"brand"
		"social"
		"nav"
		"contact"
		"divider"
		"session"
		"legal";
	max-inline-size: var(--wp--style--global--wide-size);
	overflow: visible;
	border-radius: var(--wp--custom--radius--panel-mobile);
	padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

/* The default flow layout would add block-gap margins on top of the grid's
   own row-gap — both would paint, so the margins are reset here. */
.wp-block-group.site-footer__panel.is-surface-brand > * {
	margin-block-start: 0;
}

@media (min-width: 768px) {

	/* Tracks are the column starts at a 1920 canvas (brand 75, nav 705, contact
	   1285 inside a 1720 panel) expressed as ratios, so they scale down.
	   minmax(0, …) lets each track shrink below its content's min-content. */
	.wp-block-group.site-footer__panel.is-surface-brand {
		column-gap: var(--wp--preset--spacing--60);
		row-gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 545fr) minmax(0, 500fr) minmax(0, 375fr);
		grid-template-rows: 1fr auto auto;
		grid-template-areas:
			"brand   nav     contact"
			"session divider divider"
			"social  legal   legal";
		align-items: start;
		min-block-size: var(--wp--custom--footer--panel-min-height);
		border-radius: var(--wp--custom--radius--panel-desktop);
		padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--20));
		padding-inline: var(--wp--preset--spacing--60) var(--wp--preset--spacing--55);
	}
}

/* section-panel wants radius.panel-wide (20px) past 1720px; the footer
   panel keeps its measured 18px at every desktop width. */
@media (min-width: 1720px) {

	.wp-block-group.site-footer__panel.is-surface-brand {
		border-radius: var(--wp--custom--radius--panel-desktop);
	}
}

/**
 * Brand block: negative logo + tagline. The tagline sits flush under the
 * logo on desktop; on mobile it drops to one 14px line under a full-width
 * logo.
 */

.site-footer__brand {
	grid-area: brand;
}

.site-footer .site-footer__brand {
	gap: var(--wp--preset--spacing--25);
}

.site-footer .site-footer__logo {
	margin: 0;
}

/* Block-level so the inline link adds no descender gap under the logo. */
.site-footer .site-footer__logo,
.site-footer .site-footer__logo a,
.site-footer .site-footer__logo img {
	display: block;
	inline-size: 100%;
}

.site-footer__tagline {
	font-size: var(--wp--preset--font-size--body-xs);
}

@media (min-width: 768px) {

	.site-footer .site-footer__brand {
		gap: 0;
	}

	/* The asset's own rendered width, not a spacing value — same as
	   the fixed icon sizes in topbar.css. */
	.site-footer__logo {
		max-inline-size: 436px;
	}

	.site-footer__tagline {
		font-size: var(--wp--preset--font-size--body-lg);
	}
}

/**
 * Social icons — white circles with the logo in brand red. The SVGs are
 * shared with parts/topbar.html: each is a solid shape (disc or square) with
 * the logo knocked out, black inside <img>. The <img> stays in place for its
 * alt text but is hidden; ::before paints brand red through the inverse of
 * the same SVG (box XOR shape = the knocked-out logo), clipped just inside
 * the shape's edge so nothing outside it shows. Facebook's "f" runs to the disc edge, so
 * it drops the badge and is the badge itself at full size, inverted to white.
 * 31px clears the WCAG 2.2 AA 24px target minimum.
 */

.site-footer__social {
	grid-area: social;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.site-footer__social figure {
	margin: 0;
	line-height: 0;
}

.site-footer__social a {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--footer--social-size);
	block-size: var(--wp--custom--footer--social-size);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--background-primary);

	/* Hit area: a transparent border grows the box to the 44px minimum target
	   (rounded up to a whole pixel, since borders snap down) while background-clip keeps the painted plate at social-size, and the
	   negative margin keeps layout identical. The border is part of the link's
	   hit box, so the whole 44px (rounded by the pill radius) is clickable. */
	--miraigo-social-hit: round(up, calc((var(--wp--custom--control--min-target) - var(--wp--custom--footer--social-size)) / 2), 1px);

	box-sizing: content-box;
	border: var(--miraigo-social-hit) solid transparent;
	margin: calc(-1 * var(--miraigo-social-hit));
	background-clip: padding-box;
}

.site-footer__social a:has(img[src*="/instagram.svg"], img[src*="/linkedin.svg"])::before {
	content: "";
	position: absolute;
	inline-size: var(--wp--custom--footer--social-glyph);
	block-size: var(--wp--custom--footer--social-glyph);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--background-brand);
	-webkit-mask-image: var(--miraigo-social-glyph), linear-gradient(currentcolor 0 0);
	mask-image: var(--miraigo-social-glyph), linear-gradient(currentcolor 0 0);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	/* The shape's antialiased outer edge survives the XOR as a faint rim. */
	clip-path: inset(1px round var(--wp--custom--radius--pill));
}

.site-footer__social a:has(img[src*="/instagram.svg"]) {
	--miraigo-social-glyph: url(../../icons/instagram.svg);
}

/* The inverse drops the camera body's outline; a
   brand-red rounded frame restores it. */
.site-footer__social a:has(img[src*="/instagram.svg"])::after {
	content: "";
	position: absolute;
	inline-size: var(--wp--custom--footer--social-glyph);
	block-size: var(--wp--custom--footer--social-glyph);
	box-sizing: border-box;
	border: var(--wp--custom--border--button) solid var(--wp--preset--color--background-brand);
	border-radius: var(--wp--custom--radius--chip);
}

.site-footer__social a:has(img[src*="/linkedin.svg"]) {
	--miraigo-social-glyph: url(../../icons/linkedin.svg);
}

/* LinkedIn's "in" reaches the square's corners; a round clip would cut it. */
.site-footer__social a:has(img[src*="/linkedin.svg"])::before {
	border-radius: 0;
	clip-path: inset(1px);
}

/* Unmatched icons keep their own <img> visible instead of a bare red disc. */
.site-footer__social img {
	inline-size: var(--wp--custom--footer--social-glyph);
	block-size: var(--wp--custom--footer--social-glyph);
}

.site-footer__social a:has(img[src*="/instagram.svg"], img[src*="/linkedin.svg"]) img {
	opacity: 0;
}

.site-footer__social a:has(img[src*="/facebook.svg"]) {
	background-color: transparent;
}

.site-footer__social a:has(img[src*="/facebook.svg"]) img {
	inline-size: 100%;
	block-size: 100%;
	filter: invert(1);
}

@media (min-width: 768px) {

	.wp-block-group.site-footer__panel.is-surface-brand > .site-footer__social {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}

/**
 * Nav: one continuous list on mobile; two top-aligned columns on desktop
 * that wrap into one list when the track is too narrow for both.
 */

.site-footer__nav {
	grid-area: nav;
	column-gap: var(--wp--preset--spacing--60);
	row-gap: var(--wp--preset--spacing--30);
}

.site-footer .site-footer__nav {
	flex-wrap: wrap;
	align-items: flex-start;
}

.site-footer__nav .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--30);
}

@media (max-width: 767.98px) {

	.site-footer__nav {
		flex-direction: column;
	}
}

@media (min-width: 768px) {

	.site-footer__nav {
		row-gap: var(--wp--custom--footer--nav-row-gap);
	}

	.site-footer__nav-col {
		flex: 1 1 0;
		min-inline-size: max-content;
	}

	.site-footer__nav .wp-block-navigation__container {
		row-gap: var(--wp--custom--footer--nav-row-gap);
	}
}

/* theme.json styles every link text-brand; on the red panel that is
   invisible, so the nav and legal links take the surface's ink instead.
   Scoped to the link groups — .wp-block-button__link keeps its own
   surface-aware colours from core-button.css. */
.site-footer__nav a,
.site-footer__legal-links a {
	color: var(--wp--preset--color--text-inverse);
}

/**
 * Hit areas. Text links in the footer are 14-27px tall; an invisible ::after
 * grows each one to the 44px minimum target (min() keeps it from shrinking
 * links that are already taller) without moving a pixel of the design.
 * Focus rings stay on the visible link box.
 */
.site-footer__subscribe,
.site-footer__legal-links a {
	position: relative;
}

.site-footer__subscribe::after {
	content: "";
	position: absolute;
	inset-block: min(0px, calc((100% - var(--wp--custom--control--min-target)) / 2));
	inset-inline: 0;
}

/* Stacked legal links sit one row-gap apart, so a full 44px would overlap the
   neighbours: each grows by half the gap on both sides instead (no overlap). */
.site-footer__legal-links a {
	display: inline-block;
}

.site-footer__legal-links a::after {
	content: "";
	position: absolute;
	inset-block: calc(-1 * var(--wp--preset--spacing--30) / 2);
	inset-inline: 0;
}

/**
 * Contact: two overlines and the button pair, which stays one row.
 */

.site-footer__contact {
	grid-area: contact;
}

@media (max-width: 767.98px) {

	.wp-block-group.site-footer__panel.is-surface-brand > .site-footer__contact {
		margin-block-start: var(--wp--preset--spacing--50);
	}
}

.site-footer__overline {
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: var(--wp--custom--letter-spacing--overline-mobile);
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.site-footer__overline {
		letter-spacing: var(--wp--custom--letter-spacing--overline);
	}
}

/* is-cta-pair stacks and centres on mobile for page sections; here the pair
   stays a left-aligned row of equal buttons. nowrap keeps each label on one
   line so the pair wraps as whole buttons only when the column is too narrow. */
.site-footer__contact .wp-block-buttons.is-cta-pair {
	flex-direction: row;
	inline-size: 100%;
	margin-inline: 0;
	gap: var(--wp--preset--spacing--40);
}

.site-footer__contact .wp-block-buttons.is-cta-pair > .wp-block-button {
	flex: 1 1 0;
	inline-size: auto;
}

.site-footer__contact .wp-block-buttons.is-cta-pair > .wp-block-button > .wp-block-button__link {
	inline-size: 100%;
	padding-inline: var(--wp--preset--spacing--40);
	white-space: nowrap;
}

/**
 * Mobile only: the pair's fills swap — the
 * first button ("Consulta rápida") renders as the white solid and
 * "Solicitar Demo" as the outline. Same DOM order, inverted treatment,
 * painted here with the same surface-contract variables so the pair still
 * tracks whatever surface the footer sits on.
 */

@media (max-width: 767.98px) {

	.site-footer__contact .wp-block-button.is-style-outline > .wp-block-button__link {
		background-color: var(--miraigo-solid-fill);
		border-color: var(--miraigo-solid-fill);
		color: var(--miraigo-solid-ink);
	}

	.site-footer__contact .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
		background-color: transparent;
		border: var(--wp--custom--border--button) solid var(--miraigo-outline-border);
		color: var(--miraigo-outline-ink);
	}

	.site-footer__contact .wp-block-buttons.is-cta-pair {
		gap: var(--wp--preset--spacing--25);
	}

	.site-footer__contact .wp-block-buttons.is-cta-pair > .wp-block-button > .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--25);
		font-size: var(--wp--preset--font-size--button-md);
	}
}

/**
 * Login pill. The user icon is painted as a mask so it takes the link's
 * currentColor on any surface. Its 1.25em size is taller than the text line,
 * so theme.json's `login` style derives the block padding from it to keep the
 * pill at `control.min-target`; change both together.
 */

.site-footer__session {
	grid-area: session;
}

.site-footer__login .wp-block-button__link {
	gap: var(--wp--preset--spacing--20);
}

/* theme.json's button:hover paints brand-hover red — invisible over this
   red panel. The dark pill keeps its fill and signals the state by lifting
   the ink's underline instead. */
.site-footer__login .wp-block-button__link:hover,
.site-footer__login .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--background-inverse);
	text-decoration: underline;
}

.site-footer__login .wp-block-button__link::before {
	content: "";
	inline-size: 1.25em;
	block-size: 1.25em;
	background-color: currentcolor;
	-webkit-mask-image: url(../../icons/user.svg);
	mask-image: url(../../icons/user.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.site-footer .site-footer__divider {
	grid-area: divider;
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-inverse);
}

@media (min-width: 768px) {

	/* The rule is centred on the login pill. */
	.site-footer .site-footer__divider {
		align-self: center;
	}
}

/**
 * Legal: copyright then links on desktop, spread across the divider's
 * width; on mobile a small vertical list with the copyright last.
 */

.site-footer__legal {
	grid-area: legal;
}

.site-footer__legal .site-footer__legal-links {
	align-self: stretch;
}

.site-footer__legal .site-footer__legal-links .wp-block-navigation__container {
	row-gap: var(--wp--preset--spacing--30);
}

.site-footer__legal .site-footer__legal-links .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--body-xs);
}

.site-footer__copyright {
	font-size: var(--wp--preset--font-size--caption-xs);
}

@media (max-width: 767.98px) {

	/* Leaves the band beside the list clear for the hand. Positioned so that
	   below ~360px, where the two meet, the links paint over the stroke. */
	.wp-block-group.site-footer__panel.is-surface-brand > .site-footer__legal {
		position: relative;
		margin-block-start: var(--wp--preset--spacing--55);
	}

	/* Capped to wrap onto two lines left of the hand. */
	.site-footer__legal .site-footer__copyright {
		order: 2;
		max-inline-size: 55%;
		margin-block-start: var(--wp--preset--spacing--35);
	}
}

@media (min-width: 768px) {

	.site-footer__copyright,
	.site-footer__legal .site-footer__legal-links .wp-block-navigation-item {
		font-size: var(--wp--preset--font-size--body-md);
	}

	.site-footer__legal .site-footer__legal-links .wp-block-navigation__container {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: var(--wp--preset--spacing--45);
	}
}

/**
 * The oneline hand. Decorative (alt=""). The asset is the whole one-line
 * drawing (hand plus a long baseline stroke), so the figure is a clipping
 * frame: the image is scaled up inside it and offset so only the hand shows,
 * Percentages rather than tokens: a positioned ornament
 * scaled with the panel, not spacing.
 */

.site-footer__gesture {
	position: absolute;
	inline-size: 44%;
	aspect-ratio: 1 / 2;
	inset-inline-end: 0;
	inset-block-end: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.site-footer__gesture img {
	inline-size: 182%;
	max-inline-size: none;
	block-size: auto;
	margin-inline-start: -31%;
}

@media (min-width: 768px) {

	.site-footer__gesture {
		inline-size: 14.8%;
		aspect-ratio: 254 / 400;
		inset-inline-start: 24.2%;
		inset-inline-end: auto;
		inset-block-end: calc(-1 * var(--wp--preset--spacing--45));
	}

	.site-footer__gesture img {
		inline-size: 213%;
		margin-inline-start: -30%;
	}
}

/**
 * Focus ring follows the brand surface, not the page default.
 */

.site-footer a:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-color: var(--wp--preset--color--border-inverse);
	outline-offset: var(--wp--custom--focus--offset);
}

/* The social links' transparent hit-area border pushes the outline out to the
   44px box; pulling the offset in by the border width hugs the visible disc. */
.site-footer__social a:focus-visible {
	outline-offset: calc(var(--wp--custom--focus--offset) - var(--miraigo-social-hit));
}