/* ==========================================================================
   ECR — the two top-bar CTAs
   "Achievements 2019-2024" and "Priorities"

   WHERE THESE BELONG
   On the old site (ecrgroup.eu) these two are not main navigation. They sit on
   a second line of the upper navigation as their own blocks, separate from the
   ordinary menu links — `.ecr22-desktop-menu-1-item-1`, at 14px/500 in a
   padded block, against `.ecr22-desktop-menu-1-item` at 16px/500 with no
   block. Carrying them in the main menu on the new site made them read as two
   more sections of the site, and pushed the main navigation to eleven items.

   inc/nav/migrate.php moves the same two menu items into the Secondary menu
   and tags them `ecr-nav-cta`. This file is what makes them look like CTAs.

   THE TREATMENT
   Solid ECR blue with white text, darkening on hover — the site's own button
   language, so the blocks match the "Our members" and "Subscribe now" buttons
   already on the site rather than importing the old site's yellow. The block,
   the padding and the separation from the icons are the old site's.

   Scoped to `.ecr-nav-cta` inside the top bar and the mobile menu, so no other
   navigation item is affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop — inside the top bar
   -------------------------------------------------------------------------- */

#header-secondary-outer .sf-menu > li.ecr-nav-cta {
	display: inline-flex;
	align-items: center;
	/* Holds the pair off the social icons, which is what separates the two
	   kinds of thing sharing this bar. 10px between the two CTAs — they are
	   one group — and a wider break before the first one, which is the
	   boundary between the icons and the CTAs. See the TOP BAR GROUPING block
	   in css/social.css, which sets the icon side of the same break. */
	margin-left: 10px;
}

/* THE `li` MARGINS HAVE TO BE THE ONLY ONES THAT COUNT.
   Salient sets `#header-secondary-outer .sf-menu > li > a { margin: 0 10px }`
   on EVERY top-bar link. css/social.css overrides that for the icons and
   Newsletter, but the CTA anchors were left carrying it — so 10px of anchor
   margin was still being added on each side of each block. Measured: the two
   CTAs sat 28px apart (10 + 8 + 10) while the boundary that is supposed to
   separate them FROM the icons was 30px. The two spacings were within 2px of
   each other, so the bar read as three unrelated blocks instead of one group
   of two held off the icons — the opposite of what the block above intends.

   Zeroing it here makes the `li` margins the single source of the spacing.
   The tap target does not shrink: the block's clickable area is its padding
   (4px 11px), and margin was never part of it. */
#header-secondary-outer .sf-menu > li.ecr-nav-cta > a {
	margin-left: 0;
	margin-right: 0;
}

/* THE BOUNDARY BETWEEN THE ICONS AND THE CTAs.
   This was `li.ecr-nav-cta:first-of-type`, which never matched anything:
   `:first-of-type` means "the first `li` among its siblings", and that is the
   Newsletter item, not the first CTA — so the wider break it was meant to
   create has never been applied. The sibling combinator says what was meant:
   a CTA that follows something which is NOT a CTA is the first of the pair. */
#header-secondary-outer .sf-menu > li:not(.ecr-nav-cta) + li.ecr-nav-cta {
	margin-left: 26px;
}

#header-secondary-outer .sf-menu > li.ecr-nav-cta > a {
	display: inline-flex;
	align-items: center;

	padding: 4px 11px !important;
	border-radius: 4px;

	background: var(--ecr-primary, #1866A5);
	color: #FFFFFF !important;

	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: .01em;
	text-transform: none;
	white-space: nowrap;

	transition: background-color .25s ease, color .25s ease;
}

/* Salient underlines top-bar links on hover with a pseudo-element; on a solid
   block that reads as a defect. */
#header-secondary-outer .sf-menu > li.ecr-nav-cta > a:after,
#header-secondary-outer .sf-menu > li.ecr-nav-cta > a:before {
	display: none !important;
}

#header-secondary-outer .sf-menu > li.ecr-nav-cta > a:hover,
#header-secondary-outer .sf-menu > li.ecr-nav-cta > a:focus-visible {
	background: var(--ecr-primary-dark, #114C7D);
	color: #FFFFFF !important;
}

#header-secondary-outer .sf-menu > li.ecr-nav-cta > a:focus-visible {
	outline: 2px solid var(--ecr-primary-dark, #114C7D);
	outline-offset: 2px;
}

/* The top bar is a single row of small text; at narrow desktop widths the two
   blocks plus eight icons plus "Newsletter" can crowd. The labels are the
   client's and are not shortened, so the blocks tighten instead. */
@media only screen and (max-width: 1200px) {

	#header-secondary-outer .sf-menu > li.ecr-nav-cta > a {
		padding: 3px 8px !important;
		font-size: 11px !important;
	}

	#header-secondary-outer .sf-menu > li.ecr-nav-cta { margin-left: 8px; }
	#header-secondary-outer .sf-menu > li:not(.ecr-nav-cta) + li.ecr-nav-cta { margin-left: 20px; }
}

/* --------------------------------------------------------------------------
   Mobile — inside the off-canvas menu

   Salient does not render the Secondary menu in the mobile off-canvas panel,
   so moving these two items out of the main menu would have made them
   unreachable on a phone. They are given the block treatment there too, as
   two full-width buttons under the navigation, which keeps them at least as
   reachable as they were in the main menu.
   -------------------------------------------------------------------------- */

#slide-out-widget-area .ecr-nav-cta > a,
#mobile-menu .ecr-nav-cta > a {
	display: block;
	margin: 8px 0;
	padding: 12px 16px !important;
	border-radius: 6px;
	background: var(--ecr-primary, #1866A5);
	color: #FFFFFF !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center;
}

#slide-out-widget-area .ecr-nav-cta > a:hover,
#mobile-menu .ecr-nav-cta > a:hover {
	background: var(--ecr-primary-dark, #114C7D);
	color: #FFFFFF !important;
}