/* ============================================================
   Serena Psicología — the native footer (#27)

   Styles the markup `inc/serena-footer.php` emits. Target: a render
   indistinguishable from documents 6512 / 8788, not a redesign.

   ## Every number here was READ, not fitted

   Source of record: `post-6512.css` and `post-8788.css` — Elementor's generated
   sheets — plus the CSSOM of the control at each of the gate's six widths
   (`.f3-runs/issue27/rules-control-home.json`). Where a value looks arbitrary it
   is because the thing it reproduces was arbitrary, and the comment says which
   declaration it came from and in which sheet.

   That method is not style. A constant fitted at one width is wrong at every
   other, twice over in this project's history (#38 on the mobile axis, #41 on
   the desktop one). The box structure below therefore mirrors the control's box
   structure — band -> row -> column, padding-inline on the band and padding-block
   on the row, percentage widths with flex-shrink — so the pixel numbers are
   PRODUCED the same way rather than copied.

   ## This file is #29's checklist

   #29 deletes `post-5993.css`, `post-6512.css` and `post-8788.css`. Every
   declaration reproduced below is, by definition, one of the declarations that
   deletion removes. They are grouped and labelled by their source rule so that
   #29 is a verification pass and not a discovery pass. What must SURVIVE that
   cut, and is deliberately not reproduced here, is at the bottom of this file.

   ## Global colour tokens are resolved to literals

   `post-6512.css` writes `var( --e-global-color-412523be )`; Elementor's kit
   (`post-9.css`, `.elementor-kit-9`) defines it. F5 removes Elementor and the
   kit with it, so the literal is written here with the token name beside it.
   A hex cannot state its own provenance; a comment can.

     --e-global-color-412523be   #FFF        white
     --e-global-color-984d147    #FAFAFA     the newsletter band
     --e-global-color-42ce261    #FF7D53     the newsletter title
     --e-global-color-secondary  #4F4F4F     lead + copyright ink
     --e-global-color-95b6be0    #FF9472     submit button (form section)
     --e-global-color-191993ab   #FFBC02     submit button hover (form section)

   ## What is inherited on purpose, from sheets that are not going anywhere

   The `<footer>` TAG carries `display:block; width:100%; margin:0 auto;
   z-index:100; position:relative` from Bridge's `stylesheet.min.css`. That is
   not reproduced here — it is inherited, identically to the control, by keeping
   the tag. Same for `p { font-size:16px; line-height:28px; margin:16px 0 }`,
   which Bridge's `style_dynamic_callback.php` declares sitewide and which is why
   the newsletter lead and the copyright line are `<p>` and the column titles and
   the email are `<div>`.

   `html { font-size: 62.5% }` (bridge-child/style.css) is what makes the logo's
   `max-width: 22rem` resolve to 220px. The rem is kept rather than resolved,
   because the control's declaration is a rem and the two must move together.
   ============================================================ */

.serena-footer {
	/*
	 * Elementor's container cap, per breakpoint, read off the control's computed
	 * `max-width` on each band's inner row:
	 *
	 *   1600 / 1280 / 1100 -> min(100%, 1300px)
	 *   800                -> min(100%, 1024px)
	 *   430 / 390          -> min(100%,  767px)
	 */
	--sf-container: 1300px;

	/* The two gaps that repeat: Elementor's `--widgets-spacing` default (20px)
	   and the columns' own 20px `--gap`. Written once. */
	--sf-widget-gap: 20px;

	/* Palette, resolved from the kit. See the header of this file. */
	--sf-white: #fff;
	--sf-band-bg: #fafafa;
	--sf-title: #ff7d53;
	--sf-ink: #4f4f4f;
	--sf-icon: #69727d;
}

/* ============================================================
   The stack and the band/row skeleton

   `.e-con` in the control: a flex column with `--gap: 0px 0px` and
   `max-width: 100%` (post-6512.css, element 449fd28).
   ============================================================ */

/*
 * ⚠ `box-sizing: border-box`, declared and not assumed.
 *
 * Neither Bridge nor WordPress sets a global `border-box` on this site — the
 * control's boxes get it from Elementor's own `.elementor-element` reset, which
 * this markup did not carry when these declarations were written (it does now —
 * see the correction below and #28). Measured before they were declared: at
 * 390 the newsletter band came out 430px wide inside a 390px viewport, because
 * `width: 100%` plus `padding-inline: 20px` in content-box is 100% PLUS the
 * padding. Every band was overflowing by exactly twice its inline padding.
 *
 * It is on the four structural classes rather than on `.serena-footer *`: the
 * bridged Elementor form is inside this subtree and already border-box by its
 * own reset, and a universal selector here would be this file reaching outside
 * the boxes it owns.
 */
.serena-footer .serena-footer__stack,
.serena-footer .serena-footer__band,
.serena-footer .serena-footer__row,
.serena-footer .serena-footer__col {
	box-sizing: border-box;
}

/*
 * ⚠ `position: relative`, and it is not decoration — it is 300 129 AE.
 *
 * Elementor puts every container and every widget into the positioned-descendant
 * paint phase, with two rules that say nothing about layout:
 *
 *   custom-frontend.min.css   .elementor-element { position: relative }
 *                             .elementor-widget  { position: relative }
 *
 * This markup left them `static`, and NO GEOMETRY MOVED: the footer's absolute
 * y, every band, every column, every text box and the document height all agreed
 * to the thousandth at all six widths. The full-matrix pass still went red on
 * seven desktop cells, worst 409 853 AE.
 *
 * What it actually is, measured rather than guessed:
 *
 *   - a TEXT-FREE strip of the gradient band, 1280x40, differs by 47 561 AE
 *   - maximum per-channel difference across that strip: exactly **1/255**
 *   - the white copyright band, same capture: **0 AE**
 *
 * So it is the 45° gradient's DITHER, one bit of one channel over ~93% of a
 * large area — invisible to a human, enormous to a metric that counts pixels
 * and does not weight them. Painting the same gradient into the same box from a
 * static element and from a positioned one gives Chromium a different
 * destination phase, and the dither pattern moves.
 *
 * The differential that closed it: `position: relative` on these eleven
 * selectors and nothing else changed took `home__desktop__base` from
 * **300 129 AE to 0**, with `home__mobile__base` staying at its ledger 172.
 *
 * ⚠ Not established, and deliberately left that way: WHY it showed on four
 * routes and not the other seven, and on desktop and not mobile. The footer is
 * identical on all eleven, so the trigger is something about the destination the
 * band is painted into — most plausibly the sub-pixel phase of the footer's
 * absolute y, which differs per route — and no differential has been run on
 * that. It is a real observation with no mechanism behind it yet, and writing a
 * plausible one next to it is exactly what this project keeps paying for.
 */
.serena-footer .serena-footer__band,
.serena-footer .serena-footer__col,
.serena-footer .serena-footer__logo,
.serena-footer .serena-footer__email,
.serena-footer .serena-footer__socials,
.serena-footer .serena-footer__col-title,
.serena-footer .serena-footer__news-title,
.serena-footer .serena-footer__news-lead,
.serena-footer .serena-footer__news-form,
.serena-footer .serena-footer__banner,
.serena-footer .serena-footer__copyright {
	position: relative;
}


.serena-footer .serena-footer__stack {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: 100%;
}

/*
 * A band is `.e-con-boxed`: the OUTER element takes the inline padding and the
 * inner row takes the block padding. That split is Elementor's
 * (`custom-frontend.min.css`: `.e-con` sets `padding-inline` on itself and
 * `.e-con-full, .e-con > .e-con-inner` sets `padding-block` on the inner), and
 * it matters — the band's background paints across the full width while the
 * content stops at the container cap.
 */
.serena-footer .serena-footer__band {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.serena-footer .serena-footer__row {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: min(100%, var(--sf-container));
	margin-inline: auto;
	gap: var(--sf-widget-gap);
}

/* ============================================================
   Band 1 — logo, email, socials and the three menus
   post-6512.css element 6dc98ed
   ============================================================ */

.serena-footer .serena-footer__band--brand {
	/*
	 * --padding-top:60px; --padding-bottom:40px; --padding-left:0; --padding-right:0
	 * The gradient is declared as `#FF9472BF -> #B11972BF` (BF = alpha 0.75) and
	 * computes to the rgba() pair below on both trees.
	 */
	padding-inline: 0;
	background-image: linear-gradient(45deg, rgba(255, 148, 114, 0.75) 0%, rgba(177, 25, 114, 0.75) 100%);
}

.serena-footer .serena-footer__row--brand {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;              /* --gap: 0px 0px */
	padding-block: 60px 40px;
}

/*
 * The four columns.
 *
 * Base `--width: 25%` at min-width 768 for all four (post-6512.css). Their
 * percentages do NOT sum to 100 in the 768-1366 band — 31 + 25 + 23 + 23 = 102 —
 * and the row is `flex-wrap: nowrap` there, so the browser shrinks them
 * proportionally. That overflow-and-shrink IS the mechanism: it is why the
 * measured widths at 1280 are 376.781 / 303.938 / 279.641 / 279.641 rather than
 * the round percentages, and why writing those four numbers down instead would
 * be wrong at 1100 and at 1600.
 */
.serena-footer .serena-footer__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
	flex: 0 1 auto;      /* --flex-grow:0; --flex-shrink:1; --flex-basis:auto */
	min-width: 0;        /* .e-con .elementor-widget { min-width: 0 } */

	/*
	 * The BASE is 100%, not `auto`.
	 *
	 * `custom-frontend.min.css` declares `.e-con.e-flex { --width: 100% }` inside
	 * `@media (max-width: 767px)`, and every one of these columns resolves its
	 * width through that variable. Leaving it `auto` makes each column
	 * shrink-to-fit instead: measured, the brand column came out 251px wide at a
	 * 390px viewport where the control gives it the full 390, and the logo then
	 * centred itself against the wrong box.
	 */
	width: 100%;
}

/*
 * ⚠ Every width below is written at the SAME specificity, `:nth-of-type()`
 * included, so that source order decides — which is how `post-6512.css`
 * arranges it (every selector there is `.elementor-6512 .elementor-element.
 * elementor-element-XXX`, all identical, all resolved by order).
 *
 * Measured cost of getting that wrong: with `.serena-footer__col--menu` at
 * (0,1,0) in the 1024 block and `.serena-footer__col--menu:nth-of-type(3)` at
 * (0,2,0) in the 1366 block, the later media query LOST and the last two menu
 * columns came out 170.188px wide at 800 where the control gives them 244.188 —
 * 23% instead of 33%, on the only width where those two rules overlap.
 */
@media (min-width: 768px) {
	.serena-footer .serena-footer__col:nth-of-type(1),
	.serena-footer .serena-footer__col:nth-of-type(2),
	.serena-footer .serena-footer__col:nth-of-type(3),
	.serena-footer .serena-footer__col:nth-of-type(4) { width: 25%; }
}

@media (max-width: 1366px) and (min-width: 768px) {
	/* 12065b8 -> 31%, 890c34a -> 23%, 23b4d3c -> 23%. bcba228 has NO rule in
	   this band and stays at 25% — checked against the generated sheet, not
	   assumed from symmetry. */
	.serena-footer .serena-footer__col:nth-of-type(1) { width: 31%; }
	.serena-footer .serena-footer__col:nth-of-type(3),
	.serena-footer .serena-footer__col:nth-of-type(4) { width: 23%; }
}

@media (max-width: 1024px) and (min-width: 768px) {
	.serena-footer .serena-footer__col:nth-of-type(1) { width: 100%; }
	.serena-footer .serena-footer__col:nth-of-type(2),
	.serena-footer .serena-footer__col:nth-of-type(3),
	.serena-footer .serena-footer__col:nth-of-type(4) { width: 33%; }
}

/* ============================================================
   Band 1, the brand column's internals
   ============================================================ */

/* post-6512.css: `.elementor-element-3f4e1e8 { text-align: start }` and
   `.elementor-element-3f4e1e8 img { max-width: 22rem }` */
.serena-footer .serena-footer__logo { text-align: start; }

.serena-footer .serena-footer__logo-img {
	max-width: 22rem;    /* = 220px against bridge-child/style.css `html{font-size:62.5%}` */
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

/*
 * The email line. `.elementor-heading-title { line-height: 1; margin: 0 }`
 * (custom-frontend.min.css) is what gives the control's box a height of exactly
 * its font-size; a bare <div> would default to `line-height: normal`, which for
 * Nunito at 16px is not 16px. Typography from post-6512.css element da81ede:
 * `--e-global-typography-secondary` = Nunito 400, colour --e-global-color-412523be.
 */
.serena-footer .serena-footer__email {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: var(--sf-white);
	text-align: start;
}

.serena-footer .serena-footer__email a,
.serena-footer .serena-footer__email a:hover,
.serena-footer .serena-footer__email a:visited {
	/* Bridge's `a, p a { color: #303030 }` would otherwise win over inheritance. */
	color: var(--sf-white);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/*
 * The two social icons.
 *
 * post-6512.css element 20ae998: `--icon-size: 20px`, `--grid-column-gap: 10px`,
 * `--grid-row-gap: 0px`, `text-align: left`, and on the icon itself
 * `background-color: #FF947200` (alpha 00 — transparent), `--icon-padding: 0px`,
 * `border-style: none`.
 *
 * ⚠ The GLYPH IS WHITE, and that is the one value here that a reading of
 * computed colour would have got wrong. The anchor's computed `color` is
 * rgb(105,114,125) — Elementor's `.elementor-icon` default — and the obvious
 * move is `fill: currentColor`. But `widget-social-icons.min.css` declares
 * `.elementor-social-icon { --e-social-icon-icon-color: #fff }` and
 * `.elementor-social-icon svg { fill: var(--e-social-icon-icon-color) }`, so the
 * painted glyph is #fff and the anchor's colour never reaches it. Two grey
 * icons on a coral-to-magenta gradient instead of two white ones is a defect a
 * plausible reading produces and only the declaration refutes.
 */
.serena-footer .serena-footer__socials {
	display: flex;
	flex-direction: row;
	column-gap: 10px;
	row-gap: 0;
	justify-content: flex-start;
	align-items: center;
	line-height: 1;
	text-align: left;
}

.serena-footer .serena-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;         /* calc(--icon-size + 2 * --icon-padding) = 20 + 0 */
	height: 20px;
	font-size: 20px;     /* the svg is sized in em, below */
	line-height: 20px;
	background-color: transparent;
	border-style: none;
	color: var(--sf-icon);
}

.serena-footer .serena-footer__social-icon {
	/* custom-frontend.min.css: `.elementor-icon svg { width:1em; height:1em; position:relative }` */
	width: 1em;
	height: 1em;
	position: relative;
	display: block;
	fill: var(--sf-white);
}

/* custom-frontend.min.css `.elementor-screen-only` — the accessible label the
   control also carries, kept out of flow so it cannot move a pixel. */
.serena-footer .serena-footer__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}

/* ============================================================
   Band 1, the menu columns
   ============================================================ */

/*
 * The column title. The control's heading widget carries the class `h5`, which
 * is what pulls Bridge's h5 typography onto it; the values are reproduced
 * directly instead so that nothing here depends on a class whose meaning lives
 * in a compiled sheet. Measured on the control at every width: Nunito 14px,
 * weight 600, line-height 1, letter-spacing 2.5px, uppercase, white.
 */
.serena-footer .serena-footer__col-title {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--sf-white);
	text-align: start;
}

.serena-footer .serena-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * post-6512.css, on each of the three nav-menu widgets:
 *   `.elementor-nav-menu--main:not(...horizontal) .elementor-nav-menu > li:not(:last-child)
 *      { margin-bottom: 10px }`   and 7px at max-width 767.
 */
.serena-footer .serena-footer__menu > li {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.serena-footer .serena-footer__menu > li:last-child { margin-bottom: 0; }

/*
 * post-6512.css: `.elementor-nav-menu--main .elementor-item { color: #FFF;
 * fill: #FFF; padding: 0 }` and `.elementor-nav-menu .elementor-item
 * { font-family: Nunito; font-weight: 400 }`. `display:flex; align-items:center`
 * and `line-height: 20px` come from Elementor's nav-menu widget sheet — which
 * #29 does NOT cut, but which F5 does, so they are written here.
 */
.serena-footer .serena-footer__menu > li > a,
.serena-footer .serena-footer__menu > li > a:hover,
.serena-footer .serena-footer__menu > li > a:visited {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	font-family: "Nunito", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: var(--sf-white);
	fill: var(--sf-white);
	text-align: start;
	text-decoration: none;
}

/* ============================================================
   Band 2 — the newsletter
   post-6512.css element 30b256a (absent from post-8788.css, which is the
   whole difference between the two footer documents)
   ============================================================ */

.serena-footer .serena-footer__band--newsletter {
	padding-inline: 50px;
	background-color: var(--sf-band-bg);   /* --e-global-color-984d147 */
}

.serena-footer .serena-footer__row--newsletter {
	padding-block: 50px 40px;
	gap: var(--sf-widget-gap);
}

@media (min-width: 768px) {
	/* `--content-width: 900px` — the only band with a cap of its own. */
	.serena-footer .serena-footer__row--newsletter { max-width: min(100%, 900px); }
}

/* post-6512.css element 802d6d0 */
.serena-footer .serena-footer__news-title {
	margin: 0;
	font-family: "Nunito", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2em;
	letter-spacing: 1px;
	color: var(--sf-title);                /* --e-global-color-42ce261 */
	text-align: center;
}

/*
 * post-6512.css element 7a86b94. A <p>, so `font-size:16px; line-height:28px;
 * margin:16px 0` arrives from Bridge's dynamic sheet exactly as it does on the
 * control — that 16px top and bottom margin is part of the band's height and
 * reproducing it by hand would be reproducing an accident.
 */
.serena-footer .serena-footer__news-lead {
	font-family: "Nunito", sans-serif;
	font-weight: 400;
	color: var(--sf-ink);                  /* --e-global-color-secondary */
	text-align: center;
}

/*
 * The bridged form widget's own box.
 *
 * post-6512.css element ef1c6ab:
 *   `margin: 0 0 calc(var(--kit-widget-spacing, 0px) + 20px) 0; padding: 0`
 * `--kit-widget-spacing` is 0 in this kit, so the bottom margin is 20px, and it
 * is 20 of the band's 344px.
 */
.serena-footer .serena-footer__news-form {
	margin: 0 0 20px;
	padding: 0;
	width: 100%;
	max-width: 100%;
}

/* ============================================================
   Band 3 — the Kit Digital banner
   post-6512.css elements c47c1a2 and 4768dbd
   ============================================================ */

.serena-footer .serena-footer__band--banner {
	padding-inline: 20px;
}

.serena-footer .serena-footer__row--banner {
	padding-block: 20px 30px;
	justify-content: center;
	align-items: center;
}

.serena-footer .serena-footer__banner {
	text-align: center;
	max-width: 100%;
}

/*
 * `.elementor-element-4768dbd img { max-width: 900px }`, and `100%` at both
 * max-width 1024 and max-width 767.
 *
 * The RESPONSIVE part is not here and must not be: which file the browser picks
 * comes from `srcset`/`sizes` on the <img>, which `wp_get_attachment_image()`
 * emits from the attachment metadata. Measured on the control:
 * 390/430 -> -700x82, 800 -> -1024x119, 1100/1280/1600 -> the full file. A
 * hard-coded `src` would satisfy the e2e suite, which pins 390 and 1280, and
 * fail the tablet-800 column of the matrix, which is the only thing holding the
 * middle candidate.
 */
.serena-footer .serena-footer__banner-img {
	max-width: 900px;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

/* ============================================================
   Band 4 — the copyright strip
   post-6512.css element d0e180c
   ============================================================ */

.serena-footer .serena-footer__band--legal {
	padding-inline: 10px;
	background-color: var(--sf-white);      /* --e-global-color-412523be */
	border-radius: 1px 0 0 0;               /* --border-radius: 1px 0px 0px 0px */
	box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, 0.08);
}

.serena-footer .serena-footer__row--legal {
	padding-block: 10px;
}

/* post-6512.css element 23a62be. A <p> for the same reason as the lead. */
.serena-footer .serena-footer__copyright {
	font-family: "Nunito", sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--sf-ink);                   /* --e-global-color-secondary */
	text-align: center;
}

/* ============================================================
   Responsive — every breakpoint below is one that post-6512.css declares.
   No breakpoint was invented, and none was moved.
   ============================================================ */

@media (max-width: 1366px) {
	/* 6dc98ed: --padding-top:50px; --padding-bottom:020px (sic, Elementor's own
	   zero-padded literal); --padding-left:20px; --padding-right:20px */
	.serena-footer .serena-footer__band--brand { padding-inline: 20px; }
	.serena-footer .serena-footer__row--brand { padding-block: 50px 20px; }
}

@media (max-width: 1024px) {
	.serena-footer { --sf-container: 1024px; }

	/* 6dc98ed: --flex-wrap:wrap; padding 25/20/30/30 */
	.serena-footer .serena-footer__band--brand { padding-inline: 30px; }
	.serena-footer .serena-footer__row--brand { padding-block: 25px 20px; flex-wrap: wrap; }

	/*
	 * 12065b8 changes shape here, not just size: `--flex-direction: column`,
	 * `--justify-content: space-between`, `--align-items: center`,
	 * `--gap: 15px 0px`, `--margin-bottom: 20px`. That 20px bottom margin is
	 * what puts the menus on their own row and it is 20 of the band's height at
	 * both 800 and 390.
	 */
	.serena-footer .serena-footer__col--brand {
		justify-content: space-between;
		align-items: center;
		row-gap: 15px;
		column-gap: 0;
		margin-bottom: 20px;
	}

	.serena-footer .serena-footer__col--menu { row-gap: 15px; column-gap: 0; }

	/* 802d6d0 */
	.serena-footer .serena-footer__news-title { font-size: 23px; }

	/* 4768dbd img */
	.serena-footer .serena-footer__banner-img { max-width: 100%; }
}

@media (max-width: 767px) {
	.serena-footer { --sf-container: 767px; }

	/* 6dc98ed: padding 20/020/0/0 */
	.serena-footer .serena-footer__band--brand { padding-inline: 0; }
	.serena-footer .serena-footer__row--brand { padding-block: 20px; }

	/* 12065b8: --align-items:center; --gap:10px 10px */
	.serena-footer .serena-footer__col--brand { align-items: center; row-gap: 10px; column-gap: 10px; }

	/*
	 * bcba228 and 890c34a take `--width: 50%`; 23b4d3c takes none and falls back
	 * to the `.e-con.e-flex { --width: 100% }` that this breakpoint declares, so
	 * the legal menu gets a row to itself. Reproduced as written rather than as
	 * "two columns then one", because the two are the same only at these widths.
	 */
	.serena-footer .serena-footer__col:nth-of-type(2),
	.serena-footer .serena-footer__col:nth-of-type(3) { width: 50%; }
	.serena-footer .serena-footer__col:nth-of-type(4) { width: 100%; }

	.serena-footer .serena-footer__col--menu:nth-of-type(2),
	.serena-footer .serena-footer__col--menu:nth-of-type(3),
	.serena-footer .serena-footer__col--menu:nth-of-type(4) { row-gap: 10px; column-gap: 0; }

	/* 4e562cc / 8a13769 / 539a677: `margin-bottom: 7px`, not 10 */
	.serena-footer .serena-footer__menu > li { margin-bottom: 7px; }
	.serena-footer .serena-footer__menu > li:last-child { margin-bottom: 0; }

	/* 30b256a */
	.serena-footer .serena-footer__band--newsletter { padding-inline: 20px; }
	.serena-footer .serena-footer__row--newsletter { padding-block: 40px 20px; }

	/* 802d6d0 / 7a86b94 */
	.serena-footer .serena-footer__news-title { font-size: 21px; }
	.serena-footer .serena-footer__news-lead { font-size: 15px; line-height: 1.2em; letter-spacing: 0; text-align: justify; }

	/* c47c1a2 */
	.serena-footer .serena-footer__band--banner { padding-inline: 10px; }
	.serena-footer .serena-footer__row--banner { padding-block: 10px; }
}

/* ============================================================
   The bridged newsletter form — instance styles ported off post-6512.css

   ⚠ THIS SECTION DIES WITH F4.

   Everything below reproduces the ~28 INSTANCE-level declarations that
   `post-6512.css` carries for form widget `ef1c6ab`. They are here because #29
   deletes that sheet while #28's bridge keeps rendering the widget, so without
   them the form loses its sizing, its colours and its field order between the
   two issues.

   They are scoped under `.serena-footer__news-form` ON PURPOSE. Declaring
   `.elementor-field-group { … }` globally would style every Elementor form on
   the site from the footer's stylesheet — a dependency that resolves itself
   today, outlives whatever maintained it, and breaks months later with nothing
   pointing back here. Scoped, the blast radius is the band that owns it.

   When F4 replaces this form with `swbn_forms`, this section goes with it. It
   is the only part of this file that hooks `elementor-*` class names, and that
   is the price of the bridge, taken deliberately and in one place.

   NOT reproduced here, and therefore what #29 must prove still loads:
     - `widget-form.min.css`         — Elementor Pro's generic form sheet
     - `widget-social-icons.min.css` — see the note at the end
   ============================================================ */

/*
 * ⚠ Elementor's box-sizing reset, reproduced for the bridged subtree.
 *
 * `.elementor *, .elementor *::before, .elementor *::after { box-sizing:
 * border-box }` is scoped to the `.elementor` class, which the control's footer
 * root carries and this markup did not. Without it the form's
 * field groups came out 381px wide against the control's 366 and 61px tall
 * against 47 — `width: 366px` plus `padding: 0 7.5px` in content-box — and the
 * whole newsletter band was 69px too tall at every desktop width.
 *
 * ⚠ CORRECTION. This comment used to end "reproduced here rather than fixed by
 * adding `class="elementor"` to the wrapper, because that would pull in every
 * other `.elementor`-scoped generic rule". The wrapper now DOES carry
 * `.elementor`, and not for CSS: without it the bridged form's JavaScript never
 * binds and the form cannot submit at all (#28 — Elementor's frontend declares
 * `selectors.elementor = ".elementor"` and initialises widget handlers only
 * inside that scope).
 *
 * The reasoning above was sound about CSS and wrong about scope: the surface
 * `.elementor` brings is exactly the surface the control's own form sits in,
 * because the control's footer root carries it. Adding it moves this subtree
 * TOWARD the control, not away.
 *
 * These declarations stay anyway. `.elementor` now supplies the same reset, so
 * they are redundant — and they are kept because they are the ones that are
 * still true when Elementor is gone. F5 deletes the class; the box model must
 * not leave with it.
 */
.serena-footer .serena-footer__news-form *,
.serena-footer .serena-footer__news-form *::before,
.serena-footer .serena-footer__news-form *::after {
	box-sizing: border-box;
}

.serena-footer .serena-footer__news-form .elementor-form-fields-wrapper {
	margin-left: calc(-15px / 2);
	margin-right: calc(-15px / 2);
	margin-bottom: -8px;
}

.serena-footer .serena-footer__news-form .elementor-field-group {
	padding-right: calc(15px / 2);
	padding-left: calc(15px / 2);
	margin-bottom: 8px;
}

.serena-footer .serena-footer__news-form .elementor-field-group.recaptcha_v3-bottomleft,
.serena-footer .serena-footer__news-form .elementor-field-group.recaptcha_v3-bottomright {
	margin-bottom: 0;
}

.serena-footer .serena-footer__news-form .elementor-field-type-html { padding-bottom: 0; }

body:not(.rtl) .serena-footer .serena-footer__news-form .elementor-labels-inline .elementor-field-group > label { padding-right: 0; }
body.rtl .serena-footer .serena-footer__news-form .elementor-labels-inline .elementor-field-group > label { padding-left: 0; }
body .serena-footer .serena-footer__news-form .elementor-labels-above .elementor-field-group > label { padding-bottom: 0; }

.serena-footer .serena-footer__news-form .elementor-field-group .elementor-field { color: #000; }

.serena-footer .serena-footer__news-form .elementor-field-group .elementor-field,
.serena-footer .serena-footer__news-form .elementor-field-subgroup label {
	font-family: "Rubik", sans-serif;
	font-size: 15px;
	font-weight: 300;
}

.serena-footer .serena-footer__news-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
.serena-footer .serena-footer__news-form .elementor-field-group .elementor-select-wrapper select {
	background-color: #fff;
	border-color: #e2e2e2;
	border-width: 1px;
	border-radius: 0;
}

.serena-footer .serena-footer__news-form .elementor-field-group .elementor-select-wrapper::before { color: #e2e2e2; }

.serena-footer .serena-footer__news-form .elementor-button {
	font-family: "Nunito", sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.6em;
	letter-spacing: 2px;
	border-radius: 0;
	padding: 0;
}

.serena-footer .serena-footer__news-form .elementor-button[type="submit"],
.serena-footer .serena-footer__news-form .e-form__buttons__wrapper__button-next {
	background-color: #ff9472;   /* --e-global-color-95b6be0 */
	color: #fff;
}

.serena-footer .serena-footer__news-form .elementor-button[type="submit"]:hover,
.serena-footer .serena-footer__news-form .e-form__buttons__wrapper__button-next:hover {
	background-color: #ffbc02;   /* --e-global-color-191993ab */
	color: #fff;
}

.serena-footer .serena-footer__news-form .elementor-button[type="submit"] svg *,
.serena-footer .serena-footer__news-form .elementor-button[type="submit"]:hover svg * { fill: #fff; }

.serena-footer .serena-footer__news-form .e-form__buttons__wrapper__button-previous,
.serena-footer .serena-footer__news-form .e-form__buttons__wrapper__button-previous:hover { color: #fff; }

/*
 * The custom CSS the editor holds against this form, at the bottom of
 * `post-6512.css`:
 *
 *   /* Start custom CSS for form, class: .elementor-element-ef1c6ab * /
 *   .elementor-element-ef1c6ab .elementor-field-group-tsncs { order: 3 }
 *
 * It puts the consent checkbox BELOW the name/email row instead of between
 * them. Losing it does not change any element's size, only the reading order of
 * three boxes — which is the kind of thing that is obvious in a screenshot and
 * invisible in a review.
 */
.serena-footer .serena-footer__news-form .elementor-field-group-tsncs { order: 3; }

@media (max-width: 1024px) {
	.serena-footer .serena-footer__news-form .elementor-field-group .elementor-field,
	.serena-footer .serena-footer__news-form .elementor-field-subgroup label { font-size: 15px; }
}

@media (max-width: 767px) {
	.serena-footer .serena-footer__news-form .elementor-field-group .elementor-field,
	.serena-footer .serena-footer__news-form .elementor-field-subgroup label { font-size: 15px; }
}

/* ============================================================
   What #29 must NOT cut

   - `widget-form.min.css`  — the bridged form's structural sheet (field widths,
     the `elementor-size-md` input box, the button's box). Measured in the served
     document TODAY: it is in the `<head>`, exactly where the control puts it,
     because `Locations_Manager::enqueue_styles()` still queues the styles of
     every document matching the footer location. After #29 cuts those documents
     the only thing left enqueueing it is the widget's own render, and it will
     move to the footer as a late style. Assert it, before and after; do not
     infer it from a green cell.

   - `widget-social-icons.min.css` — and this one is #27's problem, not #29's.
     The native footer emits its own inline SVGs and no Elementor social-icons
     widget renders anywhere in it any more, so Elementor has no reason to
     enqueue that sheet. Everything the icons need is declared above
     (`--icon-size`, the 10px gap, the white fill, the transparent background),
     precisely so that the icons do not depend on whether it loads.
   ============================================================ */