/* ============================================================
   Site chrome — header nav fixes.

   Loads AFTER assets/theme/css/main.css (and after theme_app_landing),
   which is the whole point: every rule here is correcting a theme rule,
   so it has to win on source order. It is NOT a page stylesheet — it's
   linked from main.html.twig and applies to every page, legacy ones
   included.

   Fixes three long-standing problems with the "Get Started" button and
   the divider beside it:

   1  THE GAP. The <li> wrapping the button carried `padding-right:2rem`
      (32px) while the second <ul> carried `padding-left:2rem` plus the
      1px divider on its left edge. So the button ended, then 24-32px of
      dead space, then the line. The button now runs flush to the
      divider and the breathing room all sits on the icon's side.

   2  THE COLOUR. The button was the theme's #0060ff, which matches
      nothing else on the site. It now uses the brand cyan — the same
      accent as the v2.3 logo and the homepage headline highlights.
      Cyan is light, so the label is deliberately dark navy: white on
      cyan measures about 1.9:1 contrast (unreadable), navy on cyan
      about 12:1.

   3  THE SCROLLED STATE. `header.transparent-bg.small #nav > ul > li > a
      { color:#000 }` set EVERY nav link black once the header went
      white — including this button, giving black-on-blue at roughly
      3:1. The button now keeps one appearance in both header states,
      which removes the failure mode entirely rather than patching it.

   Alignment: the button and the divider are both pinned to the full
   header height, so they line up with each other and with the header
   edge in both the tall and the scrolled state (they were 81px and
   84px inside an 85px header — close enough to look like a mistake).
   ============================================================ */

/* ---------- the Get Started button ---------- */
/* Specificity has to beat `header.transparent-bg.small #nav > ul > li > a`
   (0,3,3), hence the header + #nav + li chain on every rule below. */
header #nav > ul > li > a.button.filled,
header.small #nav > ul > li > a.button.filled,
header.transparent-bg.small #nav > ul > li > a.button.filled,
header.light-bg #nav > ul > li > a.button.filled,
header.black-bg #nav > ul > li > a.button.filled {
	background: var(--cyan, #00d4ff);
	border-color: var(--cyan, #00d4ff);
	/* dark label — cyan is far too light to carry white text */
	color: #04070f;
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	border-radius: 0;
	transition: background .18s ease, color .18s ease;
}

header #nav > ul > li > a.button.filled:hover,
header #nav > ul > li > a.button.filled:focus,
header.small #nav > ul > li > a.button.filled:hover,
header.small #nav > ul > li > a.button.filled:focus,
header.transparent-bg.small #nav > ul > li > a.button.filled:hover,
header.transparent-bg.small #nav > ul > li > a.button.filled:focus,
header.light-bg #nav > ul > li > a.button.filled:hover,
header.black-bg #nav > ul > li > a.button.filled:hover {
	/* lighten rather than darken — going darker on a light fill reads as
	   "disabled", and the theme's default hover is a purple that belongs
	   to no palette here */
	background: #5ce1ff;
	border-color: #5ce1ff;
	color: #04070f;
}

/* the icon inside the button, if one is ever added, follows the label */
header #nav > ul > li > a.button.filled i {
	color: #04070f;
}

/* ---------- kill the gap, align the divider ---------- */
/* The button's own <li> loses its right padding so the fill runs right
   up to the divider. Everything after the divider keeps its spacing. */
/* :last-child is the durable selector — the button is always the last
   item in the first <ul>. :has() is repeated for the case where the
   nav order ever changes; both are harmless together. */
header #nav > ul:first-of-type > li:last-child,
header #nav > ul > li:has(> a.button.filled) {
	padding-right: 0;
}

/* Height parity. The two <ul>s were 118.2px and 121.2px because their
   links carry different padding (4.1rem/4.0rem vs a 2rem/1rem override),
   so the button and the divider could never agree. Making #nav a flex
   row with stretch forces both columns to the same height, whatever the
   padding underneath does. Desktop only — below 1024px the theme turns
   #nav into a slide-out push menu and this would fight it. */
@media only screen and (min-width: 1025px) {
	header #nav {
		display: flex;
		align-items: stretch;
	}
	header #nav > ul {
		display: flex;
		align-items: stretch;
		max-height: none;
	}
	header #nav > ul > li {
		display: flex;
		align-items: stretch;
	}
	header #nav > ul + ul {
		max-height: none;
	}
	/* The button's own vertical padding was 65.6px top / 64px bottom —
	   asymmetric, so the label sat ~1.6px low. Height now comes from the
	   stretched row and centring from flex, so the vertical padding is
	   dropped and only the horizontal padding is kept. */
	header #nav > ul > li > a.button.filled,
	header.small #nav > ul > li > a.button.filled,
	header.transparent-bg.small #nav > ul > li > a.button.filled {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ---------- the divider itself ---------- */
/* One colour per header state, at a weight that actually reads. The
   theme set three different values across .black-bg / .transparent-bg
   .small / the base rule, which is why it looked inconsistent. */
header #nav > ul + ul {
	border-left: 1px solid rgba(255, 255, 255, .22);
}
header.small #nav > ul + ul,
header.transparent-bg.small #nav > ul + ul,
header.light-bg #nav > ul + ul {
	border-left: 1px solid rgba(0, 0, 0, .12);
}

/* ---------- mobile ---------- */
/* The nav collapses to a stacked push-menu below 1024px, where a
   full-height flex button and a vertical divider make no sense. */
@media only screen and (max-width: 1024px) {
	header #nav > ul,
	header #nav > ul > li {
		display: block;
	}
	header #nav > ul > li > a.button.filled,
	header.small #nav > ul > li > a.button.filled,
	header.transparent-bg.small #nav > ul > li > a.button.filled {
		display: inline-flex;
		height: auto;
		border-radius: 3px;
	}
	header #nav > ul + ul {
		border-left: 0;
	}
}