/**
 * Header: white utility bar over a primary-coloured navigation row.
 *
 * The nav itself is a core/navigation block, so menus stay editable and the
 * responsive overlay, focus trap and Escape handling come from core rather
 * than from theme JavaScript.
 */

.eco-rbc-header {
	position: relative;
	z-index: 20;
	background-color: var(--wp--preset--color--base);
}

/**
 * QA: sticky header — the logo bar and the nav stay at the top while the
 * page scrolls, so visitors can move between pages without scrolling back up.
 *
 * Applied to the template-part wrapper (the first child of .wp-site-blocks),
 * not to .eco-rbc-header itself: a sticky element only sticks within its
 * parent, and the inner header's parent is exactly as tall as the header.
 * The admin-bar offset only matters for logged-in editors; below 601px core
 * makes the admin bar scroll away, so the header sits at the very top there.
 *
 * In-page jumps (#course-content, footnotes, FAQ categories) are kept clear
 * of the header by scroll-padding, sized from the real header height by
 * navigation.js (--eco-rbc-sticky-offset).
 */
.wp-site-blocks > header.wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

html {
	scroll-padding-top: calc(var(--eco-rbc-sticky-offset, 0px) + var(--wp-admin--admin-bar--height, 0px) + 0.5rem);
}

@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part:first-child {
		top: 0;
	}

	html {
		scroll-padding-top: calc(var(--eco-rbc-sticky-offset, 0px) + 0.5rem);
	}
}

/* Utility bar ---------------------------------------------------------- */

/**
 * flex-wrap stays "nowrap" from mobile all the way up: with five logos in the
 * lockup (partner marks plus eCampusOntario), a "wrap" here doesn't wrap the
 * logos individually — it drops the whole Français/Log In block to a second
 * line the moment the row is a few pixels too tight, which happened to land
 * right around 1024px. Logos shrink instead, via the laptop-range rule below.
 */
.eco-rbc-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}

.eco-rbc-header__brand {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

/* The logo lockup is a single link home (inc/blocks.php). It must shrink with
   the brand column like the logo row it wraps. */
.eco-rbc-header__home {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}

.eco-rbc-header__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-left: auto;
}

/**
 * The Français / English link: plain text, not a button.
 *
 * Its colour is per-site (black on Guelph, McGill's dark red on McGill), so it
 * gets its own token rather than inheriting the generic link colour.
 */
.eco-rbc-header__lang {
	color: var(--eco-rbc-lang-link, var(--wp--preset--color--contrast));
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none; /* QA 1.4: plain by default, underlined on hover/focus. */
	white-space: nowrap;
}

.eco-rbc-header__lang:hover,
.eco-rbc-header__lang:focus-visible {
	text-decoration: underline;
}

/**
 * Log In button.
 *
 * Deliberately not the same as the Register button: the Figma gives it its own
 * fill, text and hover on every site, and on McGill it is an outline that
 * fills on hover. --eco-rbc-login-bg resolves to `transparent` when the site is
 * set to the outline style, which is what makes one rule set cover both.
 */
.eco-rbc-header__actions .wp-block-button__link {
	color: var(--eco-rbc-login-text, var(--wp--preset--color--on-accent));
	background-color: var(--eco-rbc-login-bg, var(--wp--preset--color--accent));
	border-color: var(--eco-rbc-login-border, var(--wp--preset--color--accent));
}

.eco-rbc-header__actions .wp-block-button__link:hover,
.eco-rbc-header__actions .wp-block-button__link:focus {
	color: var(--eco-rbc-login-hover-text, var(--wp--preset--color--on-accent));
	background-color: var(--eco-rbc-login-hover-bg, var(--wp--preset--color--accent));
	border-color: var(--eco-rbc-login-hover-bg, var(--wp--preset--color--accent));
}

/**
 * QA 1.7: RBC's header insets its logo row and nav links from the bar edges
 * instead of running them edge to edge. Cap both to the site's content width
 * (1200px), the same column every homepage section uses, so the header and the
 * page share one left and right edge. The bars' own backgrounds stay full
 * width.
 */
.eco-rbc-header__bar,
.eco-rbc-nav .wp-block-navigation {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
}

/* Navigation row -------------------------------------------------------- */

.eco-rbc-nav {
	padding-block: 10px; /* QA 1.6: thicker nav bar. */
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.eco-rbc-nav .wp-block-navigation {
	padding-inline-start: 12px; /* QA 1.6 */
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.eco-rbc-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0;
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

/* Hover and the current-page marker use their own colour — Guelph and McGill
   both underline in orange (#ea9940) against near-white nav text. */
.eco-rbc-nav .wp-block-navigation-item__content:hover,
.eco-rbc-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--eco-rbc-nav-hover, var(--wp--preset--color--on-primary));
	text-decoration: underline;
	text-decoration-color: var(--eco-rbc-nav-hover, currentColor);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Mark the page the visitor is on. aria-current does the announcing; the
   underline does the seeing. */
.eco-rbc-nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--eco-rbc-nav-hover, var(--wp--preset--color--on-primary));
	text-decoration: none;
}

.eco-rbc-nav .wp-block-navigation__responsive-container-open,
.eco-rbc-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--on-primary);
}

/**
 * The hamburger needs a real hit area, but it must only exist below core's
 * overlay breakpoint.
 *
 * Core hides it above 600px with
 *   .wp-block-navigation__responsive-container-open:not(.always-shown)
 * which is the same specificity as a `.eco-rbc-nav .…-open` rule of ours. Ours
 * loads later, so an unscoped `display: flex` here silently wins and the
 * hamburger sits above the full menu at every width. Scope it to the same
 * breakpoint core uses instead of fighting it.
 */
@media (max-width: 599px) {
	.eco-rbc-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		min-width: 44px;
		min-height: 44px;
		padding-inline: 0;
	}
}

/* Core's overlay defaults to the site background; force the brand colours so
   the mobile menu doesn't invert. */
.eco-rbc-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--on-primary);
	background-color: var(--wp--preset--color--primary);
}

.eco-rbc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 48px;
	font-size: var(--wp--preset--font-size--large);
	border-bottom: 0;
}

/* Layout ---------------------------------------------------------------- */

@media (max-width: 781px) {
	.eco-rbc-header__bar {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}

	.eco-rbc-header__actions {
		gap: var(--wp--preset--spacing--20);
	}

	/**
	 * Below 782px the full lockup won't fit. Baseline behaviour: show only the
	 * first logo of the row via the nth-child rule below.
	 *
	 * KNOWN ISSUE: on a site with more than one header logo entry (e.g. a
	 * merged partner mark plus a separate eCampusOntario mark), this hide
	 * rule is not taking effect in testing as of 2026-09-03 — the second logo
	 * still renders at full width on mobile and pushes the Français/Log In
	 * actions off-screen, despite the rule being confirmed present in the
	 * served CSS and working correctly in an isolated test page outside
	 * WordPress. The max-width/overflow rules just below were an attempt at
	 * a containment backstop and did not resolve it either in testing.
	 * Needs inspection with real browser DevTools (computed styles, cascade
	 * view) rather than further blind CSS changes.
	 */
	.eco-rbc-header__brand {
		flex: 1 1 auto;
		max-width: 60vw;
		overflow: hidden;
		min-width: 0;
	}

	.eco-rbc-header__brand .eco-rbc-logos--header {
		max-width: 100%;
		overflow: hidden;
		flex-wrap: nowrap;
	}

	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__item:nth-child(n + 2) {
		display: none !important;
	}

	/* Better behaviour where :has() is available — if the site configured a
	   dedicated compact logo, swap the whole row for it. Browsers without
	   :has() keep the single-logo fallback above, which is still correct. */
	.eco-rbc-header__brand:has(.eco-rbc-header__mobile-logo) .eco-rbc-logos--header {
		display: none;
	}

	.eco-rbc-header__mobile-logo img {
		display: block;
		width: auto;
		max-height: var(--wp--custom--header--logo--height-mobile);
		object-fit: contain;
	}
}

@media (min-width: 782px) {
	.eco-rbc-header__mobile-logo {
		display: none;
	}
}

/**
 * Laptop range: the full five-logo lockup plus Français/Log In no longer fits
 * at the header's full-size 56px logo height once real logos replace the
 * placeholders — 1024px is the common failure point. Shrink the logos and
 * tighten their gap here rather than letting the bar wrap; the row reclaims
 * full size again once there is enough width for it at 1367px.
 */
/**
 * With the header capped to the content column (QA 1.7), the full-size 56px
 * lockup no longer fits beside Français/Log In on wide screens either, and the
 * base .eco-rbc-logos rule wraps — eCampusOntario dropped to its own line at
 * 1440px. Keep the row on one line at every desktop width and cap the logo
 * height so it fits the column.
 */
@media (min-width: 782px) {
	.eco-rbc-header__brand .eco-rbc-logos--header {
		flex-wrap: nowrap;
		gap: clamp(0.75rem, 1.6vw, 1.5rem);
	}

	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__image {
		max-height: 44px;
	}

	/* eCampusOntario and long wordmarks at ~62% (see base.css). */
	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__item--wide .eco-rbc-logos__image {
		max-height: 27px;
	}
}

@media (min-width: 782px) and (max-width: 1366px) {
	.eco-rbc-header__brand .eco-rbc-logos--header {
		gap: clamp(0.5rem, 1.6vw, 1.25rem);
	}

	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__image {
		max-height: 36px;
	}

	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__item--ecampus .eco-rbc-logos__image,
	.eco-rbc-header__brand .eco-rbc-logos--header .eco-rbc-logos__item--wide .eco-rbc-logos__image {
		max-height: 22px;
	}
}