/* =============================================================================
   ECR — brand refinements from Website-suggestions-1_14.04.pdf p.1
   Phase 8. Site-wide items from the client's visual document.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   MENU UNDERLINE — ONE COLOUR (client feedback, September 2026)
   Website feedback 11 Sept 2026 p.1: "Use simple white line when mouse over
   (not the 2-3 colored one)". Modifiche_sept 26.docx then settles the colour:
   "instead of putting 2-3 different colors in the line, just keep one color
   blue or grey".

   The line had three colours: ECR blue on hover (Salient's own), the ECR
   yellow on the ACTIVE item (Phase 8, from the April suggestions document) and
   white on the transparent homepage header. It is now the ECR blue in every
   state and on every header, so hover, focus and "you are here" are the same
   simple line. The yellow block this replaces lived here; only its colour
   changed, the 2px weight and the position are kept.

   Salient paints the line as a `border-bottom` on `.menu-title-text::after`.
   The transparent-header selectors mirror Salient's own shape (two ids plus
   [data-lhe] and .transparent) because a shorter one loses on specificity.
   -------------------------------------------------------------------------- */

#header-outer nav li.current-menu-item > a .menu-title-text::after,
#header-outer nav li.current_page_item > a .menu-title-text::after,
#header-outer nav li.current-menu-ancestor > a .menu-title-text::after,
#header-outer nav li.current-menu-parent > a .menu-title-text::after,
#header-outer nav li.current_page_ancestor > a .menu-title-text::after {
	border-bottom-color: var(--ecr-primary, #1866A5) !important;
	border-bottom-width: 2px !important;
	border-bottom-style: solid !important;
	transform: scaleX(1) !important;
	bottom: -4px;
}

#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text::after,
#header-outer[data-lhe="animated_underline"].transparent #top nav > ul > li > a .menu-title-text::after,
#header-outer[data-lhe="animated_underline"].transparent.dark-slide #top nav > ul > li > a .menu-title-text::after,
#header-outer[data-lhe="animated_underline"].transparent.light-text #top nav > ul > li > a .menu-title-text::after {
	border-color: var(--ecr-primary, #1866A5) !important;
	border-bottom-width: 2px !important;
}

/* Keyboard focus gets the same line as hover, so the state is visible without
   a pointer. */
#header-outer[data-lhe="animated_underline"] #top nav > ul > li > a:focus-visible .menu-title-text::after {
	transform: scaleX(1) !important;
}

#header-outer .mobile-header li.current-menu-item > a .menu-title-text::after,
#slide-out-widget-area li.current-menu-item > a .menu-title-text::after,
#mobile-menu li.current-menu-item > a .menu-title-text::after {
	border-bottom-color: var(--ecr-primary, #1866A5) !important;
	transform: scaleX(1) !important;
}

/* -----------------------------------------------------------------------------
   FOOTER — "no black on the footer. Use dark brand blue."
   The band already moved to #114C7D in Phase 6. Salient's own footer shell
   still carries #000000 / #1F1F1F in its theme options; it renders at zero
   height today, but this makes sure it can never paint black if a widget is
   ever added to it.
   -------------------------------------------------------------------------- */

#footer-outer,
#footer-outer #copyright {
	background-color: var(--ecr-primary-dark, #114C7D) !important;
}

/* -----------------------------------------------------------------------------
   FOOTER BUTTONS — one typeface, one weight, one size (September 2026)
   Feedback: "Please use the same typeface inside the buttons." Docx answer:
   "They should all be Proxima Nova regular and centered. (Not one in bold and
   the other not ....) The size of the buttons should be the same."

   The footer (Global Section "Ecr-Footer") has two button-style CTAs:
   "Subscribe now" (Salient text-reveal-wave, an <h4> at weight 900) and
   "Discover more about us" (arrow-animation, a <p> at 400). Both become the
   site's Proxima Nova at 400, 18px, centred in a box of the same size. The
   underline-style Navigate links are a different component and are not
   matched. Colours, links and hover colours are unchanged.
   -------------------------------------------------------------------------- */
.nectar-global-section.before-footer .nectar-cta[data-style="text-reveal-wave"] > h4,
.nectar-global-section.before-footer .nectar-cta[data-style="arrow-animation"] > p {
	margin: 0;
	font-family: proxima-nova, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
}

.nectar-global-section.before-footer .nectar-cta[data-style="text-reveal-wave"] .link_wrap,
.nectar-global-section.before-footer .nectar-cta[data-style="arrow-animation"] .link_wrap {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* !important: Salient's data-display="block" rule sets the wrap to the
	   full column width, which made "Subscribe now" 398px beside a 300px
	   "Discover more about us". */
	width: 300px !important;
	max-width: 100% !important;
	height: 56px !important;
	padding: 0 24px !important;
	text-align: center;
}

.nectar-global-section.before-footer .nectar-cta[data-style="text-reveal-wave"] .link_wrap *,
.nectar-global-section.before-footer .nectar-cta[data-style="arrow-animation"] .link_wrap * {
	font-family: proxima-nova, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* "Subscribe now" sits in a column with id="subscribe-button", which carries
   `#subscribe-button .nectar-cta .link_wrap { width:100% !important;
   display:block !important }` from the site's custom CSS — an id rule, so only
   another id rule can bring it to the shared size. */
.nectar-global-section.before-footer #subscribe-button .nectar-cta .link_wrap {
	display: inline-flex !important;
	width: 300px !important;
	max-width: 100% !important;
}

.nectar-global-section.before-footer #subscribe-button .nectar-cta,
.nectar-global-section.before-footer #subscribe-button .nectar-cta h4 {
	width: auto !important;
}

.nectar-global-section.before-footer .nectar-cta[data-style="text-reveal-wave"] .link_text,
.nectar-global-section.before-footer .nectar-cta[data-style="arrow-animation"] .link_text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* -----------------------------------------------------------------------------
   HOMEPAGE HERO GRADIENT
   "the blu shading can finish at 1/3 botoom part of the image"

   Measured on the rendered hero:
     linear-gradient(0deg, #000 0%, #1866A5 0%, rgba(0,0,0,0) 43%,
                     rgba(0,0,0,.455) 100%)
   0deg runs bottom-to-top, so the ECR blue currently fades out at 43% of the
   image height. The client asked for it to finish at one third.

   Only the blue stop moves — 43% to 33%. The dark top stop is left alone
   because it is what keeps the header legible over a bright photograph, and
   no text sits over the blue, so shortening it costs no contrast.
   -------------------------------------------------------------------------- */

.home .row-bg-overlay {
	background-image: linear-gradient(
		0deg,
		rgb(0, 0, 0) 0%,
		var(--ecr-primary, #1866A5) 0%,
		rgba(0, 0, 0, 0) 33%,
		rgba(0, 0, 0, .455) 100%
	) !important;
}

/* -----------------------------------------------------------------------------
   LOGO — "make logo a bit smaller (on the big screen display)"
   Measured 205x60 at 1280, 1440, 1600 AND 1920 — it never grows, so it is only
   "big" in the sense of occupying the same space on a wider header. Reduced on
   large screens only; every smaller breakpoint is untouched.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 1600px) {

	#header-outer #logo img,
	#header-outer .logo img,
	#header-outer #logo .starting-logo img {
		max-width: 178px;
		height: auto;
	}
}

/* -----------------------------------------------------------------------------
   ARTICLE TYPOGRAPHY
   "use grey color for bold texts (like introduction) and black for
    light/regular for long article"
   "we can try and use some bigger text for quotes"

   Measured: article body copy was 18px in #676767 (grey) — i.e. the long-form
   text was grey and there was nothing distinguishing it from the introduction.
   The long article body becomes near-black; the introduction/excerpt stays
   grey, which is what the client described. Black on white also lifts body
   copy from 5.9:1 to 16.1:1.
   -------------------------------------------------------------------------- */

/* Posts are built with WPBakery, so the body copy lives in
   `.wpb_text_column .wpb_wrapper p`, not `.entry-content` — verified by
   walking the DOM up from a real paragraph. */
.single-post .wpb_text_column p,
.single-post .wpb_text_column li {
	color: #1E293B;
}

/* "grey color for bold texts (like introduction)" — bold stays grey, which is
   what separates the lead from the long-form copy. */
.single-post .wpb_text_column p strong,
.single-post .wpb_text_column p b,
.single-post .wpb_text_column li strong {
	color: #667085;
}

/* Quotes, a step up in size so they read as a pull-quote. */
.single-post blockquote,
.single blockquote,
.entry-content blockquote {
	font-size: 1.375rem;
	line-height: 1.5;
	color: var(--ecr-primary, #1866A5);
	border-left: 3px solid var(--ecr-primary, #1866A5);
	padding-left: 24px;
	margin: 28px 0;
	font-style: normal;
}

@media only screen and (max-width: 690px) {

	.single-post blockquote,
	.single blockquote,
	.entry-content blockquote {
		font-size: 1.125rem;
		padding-left: 16px;
	}
}

/* -----------------------------------------------------------------------------
   OUR VISION — the capitalised words of the six blocks in semibold
   (September 2026). Markup: inc/home/vision-blocks.php. 600, not bold/extra
   bold; the rest of each phrase keeps its own weight.
   -------------------------------------------------------------------------- */
strong.ecr-vision-lead {
	font-weight: 600;
}