/* ==========================================================================
   ARDE v2 design-system shim — runway-only.

   ── Why this file exists ───────────────────────────────────────────────────
   The new ARDE design lives in `themes/arde/`. Until that theme is activated
   on prod (big-bang cutover in scratchpad #28), prod runs Twenty Twenty-Five.
   This stylesheet ships the *minimum* design-system layer through the
   `arde-custom` plugin so we can paste arde-v-2-* markup into prod via the
   Site Editor and have it actually look right.

   Loaded only when the active theme is NOT `arde` — see
   includes/v2-shim.php → arde_v2_shim_active(). When `arde` activates, the
   theme ships its own theme.json + assets/css/* and this shim short-circuits.

   ── What's bundled ─────────────────────────────────────────────────────────
   1. :root tokens for every `--wp--preset--*--arde-v-2-*` slug, copied from
      themes/arde/theme.json. KEEP IN SYNC if theme tokens change.
   2. @font-face for the variable Raleway covering 500/600/800 — the weights
      the WP Font Library on prod (Raleway 400/700/900 + Anton 400) doesn't.
   3. Default 10px border-radius on image blocks (brand book).
   4. Button base + variants — copy of themes/arde/assets/css/buttons.css.
   5. Header pill — copy of themes/arde/assets/css/header.css.
   6. Footer — copy of themes/arde/assets/css/footer.css (Súmate signup
      rules included but harmless if the signup group isn't pasted onto prod).

   Asset paths re-pointed for the plugin layout (../img/ instead of
   ../images/). SVGs (arrow-right, heart) live in plugins/arde-custom/img/.

   ── At cutover ─────────────────────────────────────────────────────────────
   Delete this file + the @font-face's raleway.woff2 + the v2-shim.php +
   the require_once in arde-custom.php. See v2-shim.php header for the
   removal checklist.
   ========================================================================== */


/* ── 1. Tokens (mirrors themes/arde/theme.json) ─────────────────────────── */
:root {
	/* Colors */
	--wp--preset--color--arde-v-2-white:      #FFFAF8;
	--wp--preset--color--arde-v-2-black:      #0A090C;
	--wp--preset--color--arde-v-2-cream:      #F7F0DF;
	--wp--preset--color--arde-v-2-foreground: #A7A192;
	--wp--preset--color--arde-v-2-warm-1:     #FA0B57;
	--wp--preset--color--arde-v-2-warm-2:     #FF677E;
	--wp--preset--color--arde-v-2-cold-1:     #017FFD;
	--wp--preset--color--arde-v-2-cold-2:     #6596FF;
	--wp--preset--color--arde-v-2-primary-3:  #E2FAFF;

	/* Spacing (16 / 24 / 36 / 56 / 84 / 120 / 160 px) */
	--wp--preset--spacing--arde-v-2-30: 16px;
	--wp--preset--spacing--arde-v-2-40: 24px;
	--wp--preset--spacing--arde-v-2-50: 36px;
	--wp--preset--spacing--arde-v-2-60: 56px;
	--wp--preset--spacing--arde-v-2-70: 84px;
	--wp--preset--spacing--arde-v-2-80: 120px;
	--wp--preset--spacing--arde-v-2-90: 160px;

	/* Fonts — family names match prod's wp-fonts-local @font-face entries
	   (Anton, Raleway). The @font-face block below only adds the weights
	   prod's Font Library lacks (500/600/800). */
	--wp--preset--font-family--arde-v-2-anton:   "Anton", sans-serif;
	--wp--preset--font-family--arde-v-2-raleway: "Raleway", sans-serif;

	/* Font sizes */
	--wp--preset--font-size--arde-v-2-small:    12px;
	--wp--preset--font-size--arde-v-2-medium:   18px;
	--wp--preset--font-size--arde-v-2-large:    24px;
	--wp--preset--font-size--arde-v-2-x-large:  20px;
	--wp--preset--font-size--arde-v-2-xx-large: 30px;
	--wp--preset--font-size--arde-v-2-display:  50px;
	--wp--preset--font-size--arde-v-2-huge:     80px;
}


/* ── 1b. WP utility classes (.has-…-color / -background-color / -border-color
       / -font-family / -font-size). When `arde` is active, WP auto-generates
       these from theme.json slugs; on TT5 they're undefined, so the markup
       loses backgrounds, font assignments, etc. Generate them manually. */

/* Colors */
.has-arde-v-2-white-color            { color: var(--wp--preset--color--arde-v-2-white) !important; }
.has-arde-v-2-white-background-color { background-color: var(--wp--preset--color--arde-v-2-white) !important; }
.has-arde-v-2-white-border-color     { border-color: var(--wp--preset--color--arde-v-2-white) !important; }

.has-arde-v-2-black-color            { color: var(--wp--preset--color--arde-v-2-black) !important; }
.has-arde-v-2-black-background-color { background-color: var(--wp--preset--color--arde-v-2-black) !important; }
.has-arde-v-2-black-border-color     { border-color: var(--wp--preset--color--arde-v-2-black) !important; }

.has-arde-v-2-cream-color            { color: var(--wp--preset--color--arde-v-2-cream) !important; }
.has-arde-v-2-cream-background-color { background-color: var(--wp--preset--color--arde-v-2-cream) !important; }
.has-arde-v-2-cream-border-color     { border-color: var(--wp--preset--color--arde-v-2-cream) !important; }

.has-arde-v-2-foreground-color            { color: var(--wp--preset--color--arde-v-2-foreground) !important; }
.has-arde-v-2-foreground-background-color { background-color: var(--wp--preset--color--arde-v-2-foreground) !important; }
.has-arde-v-2-foreground-border-color     { border-color: var(--wp--preset--color--arde-v-2-foreground) !important; }

.has-arde-v-2-warm-1-color            { color: var(--wp--preset--color--arde-v-2-warm-1) !important; }
.has-arde-v-2-warm-1-background-color { background-color: var(--wp--preset--color--arde-v-2-warm-1) !important; }
.has-arde-v-2-warm-1-border-color     { border-color: var(--wp--preset--color--arde-v-2-warm-1) !important; }

.has-arde-v-2-warm-2-color            { color: var(--wp--preset--color--arde-v-2-warm-2) !important; }
.has-arde-v-2-warm-2-background-color { background-color: var(--wp--preset--color--arde-v-2-warm-2) !important; }
.has-arde-v-2-warm-2-border-color     { border-color: var(--wp--preset--color--arde-v-2-warm-2) !important; }

.has-arde-v-2-cold-1-color            { color: var(--wp--preset--color--arde-v-2-cold-1) !important; }
.has-arde-v-2-cold-1-background-color { background-color: var(--wp--preset--color--arde-v-2-cold-1) !important; }
.has-arde-v-2-cold-1-border-color     { border-color: var(--wp--preset--color--arde-v-2-cold-1) !important; }

.has-arde-v-2-cold-2-color            { color: var(--wp--preset--color--arde-v-2-cold-2) !important; }
.has-arde-v-2-cold-2-background-color { background-color: var(--wp--preset--color--arde-v-2-cold-2) !important; }
.has-arde-v-2-cold-2-border-color     { border-color: var(--wp--preset--color--arde-v-2-cold-2) !important; }

.has-arde-v-2-primary-3-color            { color: var(--wp--preset--color--arde-v-2-primary-3) !important; }
.has-arde-v-2-primary-3-background-color { background-color: var(--wp--preset--color--arde-v-2-primary-3) !important; }
.has-arde-v-2-primary-3-border-color     { border-color: var(--wp--preset--color--arde-v-2-primary-3) !important; }

/* Font families */
.has-arde-v-2-anton-font-family   { font-family: var(--wp--preset--font-family--arde-v-2-anton) !important; }
.has-arde-v-2-raleway-font-family { font-family: var(--wp--preset--font-family--arde-v-2-raleway) !important; }

/* Font sizes */
.has-arde-v-2-small-font-size    { font-size: var(--wp--preset--font-size--arde-v-2-small) !important; }
.has-arde-v-2-medium-font-size   { font-size: var(--wp--preset--font-size--arde-v-2-medium) !important; }
.has-arde-v-2-large-font-size    { font-size: var(--wp--preset--font-size--arde-v-2-large) !important; }
.has-arde-v-2-x-large-font-size  { font-size: var(--wp--preset--font-size--arde-v-2-x-large) !important; }
.has-arde-v-2-xx-large-font-size { font-size: var(--wp--preset--font-size--arde-v-2-xx-large) !important; }
.has-arde-v-2-display-font-size  { font-size: var(--wp--preset--font-size--arde-v-2-display) !important; }
.has-arde-v-2-huge-font-size     { font-size: var(--wp--preset--font-size--arde-v-2-huge) !important; }


/* ── 2. Raleway 500/600/800 (variable font, only the weights prod's Font
       Library doesn't already cover) ────────────────────────────────────── */
@font-face {
	font-family: "Raleway";
	src: url("fonts/raleway.woff2") format("woff2-variations"),
	     url("fonts/raleway.woff2") format("woff2");
	font-weight: 500 800;
	font-style: normal;
	font-display: swap;
}


/* ── 3. Image radius (brand book default 10px) ──────────────────────────── */
.wp-block-image img,
.wp-block-image .wp-block-image__inner-container > img,
.wp-block-cover img.wp-block-cover__image-background {
	border-radius: 10px;
}
/* Cover backgrounds are full-bleed by definition — keep them square. */
.wp-block-cover img.wp-block-cover__image-background {
	border-radius: 0;
}


/* ── 4. Buttons — copy of themes/arde/assets/css/buttons.css.
       Asset path rewritten ../images/ → ../img/. ──────────────────────── */

.wp-block-button__link {
	border: 2px solid #de054a;
	border-radius: 16px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Primary button fill. When `arde` is active, theme.json carries this
   via styles.blocks.core/button. On non-arde sites theme.json's styles
   are inert, so set the fill explicitly here. Variants below override. */
.wp-block-button .wp-block-button__link {
	background-color: var(--wp--preset--color--arde-v-2-warm-1);
	color: var(--wp--preset--color--arde-v-2-white);
}

/* Filled primary (default) hover */
.wp-block-button:not(.is-style-arde-v-2-secondary-light):not(.is-style-arde-v-2-secondary-dark):not(.is-style-arde-v-2-outlined-secondary-light):not(.is-style-arde-v-2-outlined-secondary-dark) .wp-block-button__link:hover {
	background-color: #e6054c !important;
}

/* Filled secondary-light */
.wp-block-button.is-style-arde-v-2-secondary-light .wp-block-button__link {
	background-color: var(--wp--preset--color--arde-v-2-cream);
	border-color: #f4ead2;
	color: var(--wp--preset--color--arde-v-2-black);
}
.wp-block-button.is-style-arde-v-2-secondary-light .wp-block-button__link:hover {
	background-color: #f2e6ca;
}

/* Filled secondary-dark */
.wp-block-button.is-style-arde-v-2-secondary-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--arde-v-2-black);
	border-color: var(--wp--preset--color--arde-v-2-black);
	color: var(--wp--preset--color--arde-v-2-white);
}
.wp-block-button.is-style-arde-v-2-secondary-dark .wp-block-button__link:hover {
	background-color: rgba(10, 9, 12, 0.8);
}

/* Outlined secondary-light (for dark backgrounds) */
.wp-block-button.is-style-arde-v-2-outlined-secondary-light .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--arde-v-2-cream);
	color: var(--wp--preset--color--arde-v-2-cream);
}
.wp-block-button.is-style-arde-v-2-outlined-secondary-light .wp-block-button__link:hover {
	background-color: #f2e6ca;
	border-color: #f4ead2;
	color: var(--wp--preset--color--arde-v-2-black);
}

/* Outlined secondary-dark (for light backgrounds) */
.wp-block-button.is-style-arde-v-2-outlined-secondary-dark .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--arde-v-2-black);
	color: var(--wp--preset--color--arde-v-2-black);
}
.wp-block-button.is-style-arde-v-2-outlined-secondary-dark .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--arde-v-2-foreground);
	color: var(--wp--preset--color--arde-v-2-foreground);
}

/* Trailing arrow icon */
.wp-block-button__link.has-arrow::after,
.wp-block-button.has-arrow > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 23px;
	height: 12px;
	margin-left: 8px;
	background-color: currentColor;
	-webkit-mask: url(../img/arrow-right.svg) center / contain no-repeat;
	mask: url(../img/arrow-right.svg) center / contain no-repeat;
	flex-shrink: 0;
}


/* ── 5. Header — copy of themes/arde/assets/css/header.css.
       Asset path rewritten ../images/ → ../img/. ─────────────────────── */

.arde-v-2-header {
	position: fixed;
	top: 32px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 2 * var(--wp--preset--spacing--arde-v-2-40));
	max-width: 1244px;
	z-index: 100;
	padding-top: 0;
	padding-bottom: 0;
	padding-inline: 0 !important;
}

.admin-bar .arde-v-2-header {
	top: calc(32px + 32px);
}

@media (max-width: 782px) {
	.admin-bar .arde-v-2-header {
		top: calc(32px + 46px);
	}
}

.arde-v-2-header__bar {
	background-color: var(--wp--preset--color--arde-v-2-cream);
	border-radius: 30px;
	box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
	padding: 12px 24px;
	gap: 33.389px;
}

.arde-v-2-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.arde-v-2-header__logo-svg {
	display: block;
	height: 46px;
	width: auto;
}

.arde-v-2-header__right {
	gap: 33.389px;
}

.arde-v-2-nav {
	gap: 33.389px;
}

.arde-v-2-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 600;
	font-size: 13.356px;
	line-height: 1.2;
	color: var(--wp--preset--color--arde-v-2-black);
}

.arde-v-2-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--arde-v-2-warm-1);
}

/* Desktop submenu (Campañas dropdown) — single-element card with
   transparent gap-zone + ::before paint. Hover scope and paint area
   in one box to avoid sub-pixel seams. See themes/arde/assets/css/
   header.css for the full rationale. */
@media (min-width: 1024px) {
	.arde-v-2-nav .wp-block-navigation__submenu-container {
		--gap: 14px;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: var(--gap) 0 0 !important;
		left: 0 !important;
		right: auto !important;
		transform: none !important;
		margin-top: -1px !important;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: var(--gap);
		left: 0;
		right: 0;
		height: calc(100% - var(--gap));
		background: #FFFFFF;
		border-radius: 16px;
		pointer-events: none;
		z-index: 0;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: relative;
		z-index: 1;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--arde-v-2-black);
		transition: color 150ms ease-out;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-icon svg {
		transition: transform 150ms ease-out;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-icon svg path {
		stroke: currentColor;
	}
	.arde-v-2-nav .has-child:hover > .wp-block-navigation-item__content,
	.arde-v-2-nav .has-child:focus-within > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--arde-v-2-warm-1);
		text-decoration: underline;
	}
	.arde-v-2-nav .has-child:hover > .wp-block-navigation__submenu-icon,
	.arde-v-2-nav .has-child:focus-within > .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--arde-v-2-warm-1);
	}
	.arde-v-2-nav .has-child:hover > .wp-block-navigation__submenu-icon > svg,
	.arde-v-2-nav .has-child:focus-within > .wp-block-navigation__submenu-icon > svg {
		transform: rotate(180deg);
	}
	.arde-v-2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 16px !important;
	}
	/* Card pt/pb: items define the card's visible top/bottom edges (the
	   container has no inner padding), so restore generous top on the
	   first item and bottom on the last to keep the card breathing. */
	.arde-v-2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
		padding-top: 16px !important;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
		padding-bottom: 16px !important;
	}
}

.arde-v-2-dona-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 16px;
}

.arde-v-2-dona-button .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../img/heart.svg) center / contain no-repeat;
	mask: url(../img/heart.svg) center / contain no-repeat;
}

/* Mobile (≤1023): smaller pill, hamburger trigger, Dona-center layout.
   __right wrapper flattens via display:contents so __bar sees nav + cta
   as direct flex children for ordering. */
@media (max-width: 1023px) {
	.arde-v-2-header {
		top: 24px;
		width: calc(100% - 28px) !important;
	}
	.admin-bar .arde-v-2-header {
		top: calc(24px + 46px);
	}
	.arde-v-2-header__bar {
		gap: 8px;
		padding: 12px 24px;
	}
	.arde-v-2-header__logo-svg {
		height: 40px;
		width: 54.78px;
	}
	.arde-v-2-header__right {
		display: contents !important;
	}
	.arde-v-2-header__cta {
		order: 1;
	}
	.arde-v-2-nav {
		order: 2;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-open {
		width: 40px;
		height: 40px;
		background: transparent;
		border: 0;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 28px;
		height: 28px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><rect x='0' y='2' width='28' height='4' rx='2' fill='%230A090C'/><rect x='0' y='12' width='28' height='4' rx='2' fill='%230A090C'/><rect x='0' y='22' width='28' height='4' rx='2' fill='%230A090C'/></svg>");
		background-size: contain;
		background-repeat: no-repeat;
	}
	.arde-v-2-dona-button .wp-block-button__link {
		min-height: 40px;
		padding: 6px 14px;
		font-size: 14px;
		gap: 6px;
	}
	.arde-v-2-dona-button .wp-block-button__link::before {
		width: 18px;
		height: 18px;
	}

	/* Mobile nav overlay (open hamburger menu) — full-viewport cream
	   on black, Campañas submenu expanded. */
	.arde-v-2-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
		transform: none;
		left: 0;
		width: 100% !important;
		max-width: none;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		padding: 32px 32px 48px;
		background-color: var(--wp--preset--color--arde-v-2-cream);
		z-index: 200;
		overflow-y: auto;
		animation: arde-v-2-nav-fade 200ms ease-out;
	}
	.admin-bar .arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: 32px;
		height: calc(100vh - 32px);
		height: calc(100dvh - 32px);
	}
	.admin-bar .arde-v-2-nav .wp-block-navigation__responsive-container-close {
		top: calc(32px + 24px);
	}
	@media (max-width: 782px) {
		.admin-bar .arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open {
			top: 46px;
			height: calc(100vh - 46px);
			height: calc(100dvh - 46px);
		}
		.admin-bar .arde-v-2-nav .wp-block-navigation__responsive-container-close {
			top: calc(46px + 24px);
		}
	}
	@keyframes arde-v-2-nav-fade {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@media (prefers-reduced-motion: reduce) {
		.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open {
			animation: none;
		}
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 24px;
		right: 24px;
		width: 40px;
		height: 40px;
		padding: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--arde-v-2-black);
		z-index: 201;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
		fill: currentColor;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		display: block;
		flex: 0 0 auto;
		align-items: flex-start;
		justify-content: flex-start;
		margin: 0;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container-content {
		display: block;
		width: 100%;
		padding: 0;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 8px;
		padding: 0;
		margin: 0;
		list-style: none;
		width: 100%;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		display: block;
		width: 100%;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: block;
		padding: 12px 0;
		font-family: var(--wp--preset--font-family--arde-v-2-raleway);
		font-weight: 700;
		font-size: 24px;
		line-height: 1.2;
		color: var(--wp--preset--color--arde-v-2-black);
		text-decoration: none;
		transition: color 150ms ease-out;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:hover,
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--arde-v-2-warm-1);
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus {
		outline: none;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--wp--preset--color--arde-v-2-warm-1);
		outline-offset: 4px;
		border-radius: 2px;
	}
	/* Submenu: not gated on .is-menu-open because at >600px WP still applies
	   its desktop hover-dropdown CSS (position:absolute, opacity:0,
	   visibility:hidden) even when our mobile overlay is open. Safe to
	   force unconditionally — at ≤1023px the responsive container is
	   display:none when closed, so submenu isn't in layout flow then. */
	.arde-v-2-nav .wp-block-navigation__submenu-container {
		position: static !important;
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		opacity: 1 !important;
		visibility: visible !important;
		/* WP's default rule sets width:0; height:0; overflow:hidden on the
		   submenu (3-class specificity, beats ours), collapsing it to a
		   zero box — !important here defeats that. */
		width: 100% !important;
		height: auto !important;
		min-width: 0;
		overflow: visible !important;
		/* padding-top forced to 0 to defeat WP core's
		   `.is-menu-open .…-content .__submenu-container { padding-top: var(--wp--style--block-gap, 2em) }`
		   (4-class specificity beats ours otherwise). */
		padding: 0 0 8px 24px !important;
		margin: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		list-style: none;
		/* Prod also has a legacy "Simple Custom CSS and JS" rule
		   `header nav .has-child ul { transform: translateX(-50%); left: 50%; top: 110% }`
		   at min-width:600px with !important — designed for the old TT5
		   desktop dropdown, breaks our overlay by shifting items off-screen.
		   These !importants neutralize it. */
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
	}
	.arde-v-2-nav .wp-block-navigation__submenu-container
		.wp-block-navigation-item,
	.arde-v-2-nav .wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		visibility: visible !important;
		opacity: 1 !important;
	}
	/* !important needed: parent overlay rule
	   `.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
	    .wp-block-navigation-item__content { font-weight:700; font-size:24px; padding:12px 0 }`
	   (4-class) outranks ours (3-class) — submenu items would inherit the
	   parent-link styling otherwise. WP core also forces `padding:0` via a
	   different 4-class selector. */
	.arde-v-2-nav .wp-block-navigation__submenu-container
		.wp-block-navigation-item__content {
		padding: 4px 0 !important;
		font-weight: 500 !important;
		font-size: 18px !important;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__submenu-icon {
		display: none;
	}
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		button.wp-block-navigation-item__content,
	.arde-v-2-nav .wp-block-navigation__responsive-container.is-menu-open
		button.wp-block-navigation-submenu__toggle {
		background: transparent;
		border: 0;
		text-align: left;
		cursor: default;
	}
	body.has-modal-open {
		overflow: hidden;
	}
}


/* ── 6. Footer — copy of themes/arde/assets/css/footer.css.
       Asset path rewritten ../images/ → ../img/. The Súmate signup
       rules below are harmless if the signup group isn't pasted onto
       prod (no markup → selectors match nothing). ────────────────── */

.arde-v-2-footer {
	padding-top: 100px;
	padding-bottom: 50px;
}

.arde-v-2-footer > * {
	margin-block: 0;
}
.arde-v-2-footer > * + * {
	margin-top: 50px;
}

.arde-v-2-footer__upper {
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: stretch;
}
.arde-v-2-footer__contact {
	display: flex;
	flex-direction: row;
	gap: 50px;
	align-items: flex-start;
}
.arde-v-2-footer__contact-block {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.arde-v-2-footer__upper > .arde-v-2-signup {
	box-sizing: border-box;
	width: 100%;
}

.arde-v-2-footer__label {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--arde-v-2-white);
	margin: 0;
}

.arde-v-2-footer__social {
	list-style: none;
	display: flex;
	gap: 20px;
	padding: 0;
	margin: 0;
}
.arde-v-2-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--arde-v-2-white);
	width: 44px;
	height: 44px;
}
.arde-v-2-footer__social svg {
	width: 44px;
	height: 44px;
	fill: currentColor;
}
/* Teaming icon is a PNG <img>, not an inline SVG — give it the same
   bounding-box so it lines up with the row. The source PNG is already
   white-on-transparent, so no recolor needed. */
.arde-v-2-footer__social img {
	display: block;
	width: 44px;
	height: 44px;
	object-fit: contain;
}

.arde-v-2-footer__email {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 400;
	font-size: 30px;
	margin: 0;
}
.arde-v-2-footer__email a {
	color: var(--wp--preset--color--arde-v-2-white);
	text-decoration: none;
}

.arde-v-2-signup {
	background-color: var(--wp--preset--color--arde-v-2-white);
	border-radius: 20px;
	padding: 80px 40px;
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.arde-v-2-signup__heading {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 800;
	font-size: 50px;
	line-height: 1.2;
	color: var(--wp--preset--color--arde-v-2-black);
	width: 304px;
	flex-shrink: 0;
	margin: 0;
}

.arde-v-2-signup__form-wrap {
	flex: 1 0 0;
}

.arde-v-2-signup__row {
	display: flex;
	align-items: center;
	gap: 24px;
}

.arde-v-2-signup__input {
	flex: 1 0 0;
	min-width: 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--arde-v-2-foreground);
	background: transparent;
	padding: 20px 0;
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-size: 18px;
	color: var(--wp--preset--color--arde-v-2-black);
}
.arde-v-2-signup__input::placeholder {
	color: var(--wp--preset--color--arde-v-2-black);
	opacity: 0.9;
}
.arde-v-2-signup__input:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--arde-v-2-warm-1);
}

.arde-v-2-signup__button {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 2px solid #de054a;
	border-radius: 18px;
	background-color: var(--wp--preset--color--arde-v-2-warm-1);
	color: var(--wp--preset--color--arde-v-2-white);
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 700;
	font-size: 18px;
	min-height: 54px;
	padding: 0 24px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.arde-v-2-signup__button::after {
	content: "";
	display: inline-block;
	width: 23px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url(../img/arrow-right.svg) center / contain no-repeat;
	mask: url(../img/arrow-right.svg) center / contain no-repeat;
	flex-shrink: 0;
}
.arde-v-2-signup__button:hover {
	background-color: #e6054c;
}

.arde-v-2-signup__note {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-size: 12px;
	color: var(--wp--preset--color--arde-v-2-black);
	margin: 10px 0 0;
}

.arde-v-2-footer__legal {
	gap: 24px;
}
.arde-v-2-footer__copyright,
.arde-v-2-footer__privacy {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-size: 18px;
	margin: 0;
}
.arde-v-2-footer__copyright {
	color: var(--wp--preset--color--arde-v-2-white);
}
.arde-v-2-footer__privacy a {
	color: var(--wp--preset--color--arde-v-2-white);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.arde-v-2-footer {
		padding: 60px 24px;
		max-width: 100vw;
		box-sizing: border-box;
	}
	.arde-v-2-footer > * + * {
		margin-top: 60px;
	}
	.arde-v-2-footer__upper {
		gap: 60px;
	}
	.arde-v-2-footer__contact {
		flex-direction: column;
		gap: 40px;
		align-items: stretch;
	}
	.arde-v-2-footer__contact-block {
		padding: 20px 0;
		gap: 20px;
	}
	.arde-v-2-footer__social {
		justify-content: flex-start;
		padding-inline: 0;
		gap: 20px;
	}
	.arde-v-2-footer__social a,
	.arde-v-2-footer__social svg,
	.arde-v-2-footer__social img {
		width: 32px;
		height: 32px;
	}
	.arde-v-2-footer__email {
		font-size: 30px;
	}
	.arde-v-2-signup {
		flex-direction: column;
		padding: 80px 40px;
		gap: 40px;
		border-radius: 20px;
	}
	.arde-v-2-signup__heading {
		width: 100%;
		max-width: 304px;
		font-size: 50px;
		line-height: 1.2;
		font-weight: 800;
	}
	.arde-v-2-signup__row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.arde-v-2-signup__input {
		padding: 20px 0;
		font-size: 18px;
		border-bottom-color: #A7A192;
	}
	.arde-v-2-signup__button {
		border-radius: 18px;
		font-size: 18px;
		font-weight: 700;
	}
	.arde-v-2-signup__note {
		font-size: 12px;
		line-height: normal;
	}
	.arde-v-2-footer__legal {
		flex-direction: column;
	}
	.arde-v-2-footer__copyright,
	.arde-v-2-footer__privacy {
		font-size: 18px;
		line-height: 1.4;
	}
	/* Figma mobile footer shows only the copyright paragraph. */
	.arde-v-2-footer__privacy {
		display: none;
	}
}