/* ==========================================================================
   ECR — "Who we are" section pages · top spacing

   Every rule here is scoped to body.ecr-section-page, which inc/layout/
   section-spacing.php puts only on the pages that already load one of our
   section stylesheets. No page outside that family sees any of this.

   The three paddings being collapsed, and why, are documented in that file.
   In short: 40px (Salient page frame) + 28.8px (WPBakery row) + 80px (our
   section) = 148.8px of white above the page title, chosen by nobody.

   Replaced by a single deliberate step on the section itself.

   30/09/2026: the step is tighter (32 -> 24px at desktop) and now opens
   Publications, the Events views, each event, each Working Group and the
   plain WPBakery pages too (see inc/layout/section-spacing.php). Measured
   from the bottom of the navigation to the top of the first visible thing.
   ========================================================================== */

body.ecr-section-page {
	/* The one number that decides how close the content sits to the navbar.
	   Changing it here changes every page in the family together. */
	--ecr-section-top: 24px;
	/* Between a "Back to …" link and the title under it. */
	--ecr-back-gap: 14px;
}

/* --- 1. Salient's page frame --------------------------------------------- */

body.ecr-section-page .container-wrap {
	padding-top: 0;
}

/* --- 2. WPBakery's first row --------------------------------------------- */

/* Only the FIRST row on the page. Rows further down keep their spacing, which
   is what separates our sections from anything the client stacks after them.
   `top-level` is WPBakery's own marker for a row that is not nested, so a row
   inside another row is never matched.

   `!important` IS NEEDED HERE, and only here.
   WPBakery renders a row's `top_padding` attribute as an INLINE style, so
   /our-people/ — the one page in the family whose row was saved with
   `top_padding="2%"` — carries `style="padding-top: calc(100vw * 0.02)"`,
   i.e. 28.8px at 1440 and growing with the viewport. An inline declaration
   beats any selector, so without this the page kept 28.8px that none of the
   others had, and it was the only page still opening ~60px down.

   The remaining pages already have `padding-top: 0px` inline, so this changes
   nothing on them. */
body.ecr-section-page .container-wrap .main-content > .row > .col.span_12 > .wpb_row.top-level:first-child,
body.ecr-section-page .container-wrap .main-content > .row > .wpb_row.top-level:first-child {
	padding-top: 0 !important;
}

/* --- 3. Our own section -------------------------------------------------- */

/* Top only. The bottom padding is untouched, because it is what holds the
   section off the footer.

   Listed by class rather than with a wildcard so that a section which one day
   wants its own opening — a full-bleed hero, say — simply is not in the list. */
body.ecr-section-page .ecr-op,
body.ecr-section-page .ecr-cp,
body.ecr-section-page .ecr-ct,
body.ecr-section-page .ecr-st,
body.ecr-section-page .ecr-mep,
body.ecr-section-page .ecr-pub,
body.ecr-section-page .ecr-opp,
/* `.ecr-doc` is the brochure download band on /achievements-2019-2024/ and
   /priorities/. Those two pages have no Salient page header, so the band is
   the first thing under the navbar and step 1 above would otherwise leave it
   touching it — the same defect /map/ had. */
body.ecr-section-page .ecr-doc,
/* `.ecr-lp` is the Logos & Branding language selector and the twenty language
   sub-pages. Same reason as `.ecr-doc`: no Salient page header, so without
   this the section would sit flush against the navbar. */
body.ecr-section-page .ecr-lp,
/* The templates that are not pages: each Working Group, each event, and the
   Events views (The Events Calendar's own container carried 96px). */
body.ecr-section-page .ecr-wg-single,
body.ecr-section-page #tribe-events-content.ecr-event,
body.ecr-section-page .tribe-events .tribe-events-l-container {
	padding-top: var(--ecr-section-top);
}

/* --- /map/ and /who-we-are/ --------------------------------------------- */

/* These two are WPBakery compositions, not one of our sections, so they have
   no .ecr-* wrapper to carry the step, and step 1 above left /map/'s heading
   sitting flush on the navbar (measured at -1.2px, i.e. touching).

   The step therefore goes back on the CONTAINER rather than on the row. That
   is deliberate: the row is where WPBakery writes its own inline padding, so
   putting our value there means fighting a stored per-page attribute, while
   .container-wrap is the shared frame both pages have and neither page's
   content controls.

   Scoped to the SECOND body class — .ecr-composition-page, which only pages
   without one of our sections get — because on a page that does have an .ecr-* section this
   would stack on top of the section's own step. 24px rather than the full 32
   because both pages' first row already carries some internal offset of its
   own.

   30/09/2026: the same class now marks every page of this kind (News, Our
   vision for Europe, the legal notice…), and the value is the shared step. */
/* `!important` IS NEEDED HERE, for the same reason as step 2: on a page that
   opens with a posts slider (/news/) Salient's script writes
   `padding-top: 0px` INLINE on .container-wrap, which no selector can beat,
   and the slider then touched the navigation. */
html body.ecr-section-page.ecr-composition-page .container-wrap {
	padding-top: var(--ecr-section-top) !important;
}

/* --- "Back to …" (inc/layout/back-link.php) ------------------------------ */

/* The first thing inside the section, so the section's step is the only
   space above it; the title follows after --ecr-back-gap, whatever template
   it is in. Left-aligned to the content column on every page. */
.ecr-back {
	margin: 0 0 var(--ecr-back-gap, 14px);
	padding: 0;
	line-height: 1.2;
	text-align: left;
	font-size: .9375rem;
}

.ecr-back__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	padding: 4px 2px;
	border-radius: 6px;
	font-weight: 600;
	color: var(--ecr-primary, #1866A5);
	text-decoration: none;
}

.ecr-back__arrow {
	font-size: 1.1em;
	line-height: 1;
	transition: transform .2s ease;
}

.ecr-back__link:hover .ecr-back__label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ecr-back__link:hover .ecr-back__arrow { transform: translateX(-3px); }

.ecr-back__link:focus-visible {
	outline: 3px solid var(--ecr-primary, #1866A5);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ecr-back__arrow { transition: none; }
}

@media print {
	.ecr-back { display: none; }
}

/* --- responsive ---------------------------------------------------------- */

@media only screen and (max-width: 1000px) {
	body.ecr-section-page { --ecr-section-top: 20px; }
}

@media only screen and (max-width: 690px) {
	body.ecr-section-page { --ecr-section-top: 16px; --ecr-back-gap: 10px; }
}