/*
 * File: assets/css/mappcanada-header.css
 *
 * Scoped styles for the MappCanada global site header (.mc-header namespace).
 *
 * Two-row sticky header layout:
 *   Row 1 (.mc-header__row--brand)  — Logo + user controls (login/profile/Post CTA)
 *   Row 2 (.mc-header__row--search) — Dedicated master search bar (hidden on mobile)
 *   Mobile drawer  — Slide-in with search + province links + user CTA
 *
 * Sections:
 *  1. CSS custom properties (design tokens)
 *  2. Header shell & inner layout (brand row + search row)
 *  3. Logo
 *  4. Search bar
 *  5. Right slot (badge / login)
 *  6. Hamburger button
 *  7. Mobile drawer
 *  8. Responsive breakpoints
 *  9. Theme header suppression
 *
 * @package MappCanada
 */

/* =========================================================================
 * 1. DESIGN TOKENS
 * ======================================================================= */

.mc-header {
	/* Brand row heights (Row 1) */
	--mc-brand-row-height:         48px;   /* mobile */
	--mc-brand-row-height-tablet:  52px;
	--mc-brand-row-height-desktop: 56px;

	/* Search row height (Row 2 — hidden on mobile) */
	--mc-search-row-height:        54px;

	/* Total header heights (brand + search, used for drawer/mega-menu calcs) */
	--mc-header-height:            48px;   /* mobile: brand row only */
	--mc-header-height-mobile:     48px;
	--mc-header-height-tablet:     106px;  /* 52 + 54 */
	--mc-header-height-desktop:    110px;  /* 56 + 54 */

	/* Minimum touch target */
	--mc-header-touch-min:      44px;

	--mc-header-bg:           #1a1a2e;
	--mc-header-text:         #f5f5f5;
	--mc-header-accent:       #d52b1e;  /* Canadian red */
	--mc-header-border:       rgba(255,255,255,.1);
	--mc-header-input-bg:     #ffffff;
	--mc-header-input-text:   #1a1a2e;
	--mc-header-radius:       6px;
	--mc-header-z:            1000;
	--mc-header-transition:   .25s ease;
	--mc-header-drawer-bg:    #12122a;
	--mc-header-search-bg:    #16163a;   /* Row 2 dedicated search row background */

	/* Layout column controls — override via CSS or inline style if needed */
	--mc-header-logo-max-width:   220px;
	--mc-header-search-max-width: 680px;
}

/* =========================================================================
 * 2. HEADER SHELL & INNER LAYOUT
 * ======================================================================= */

.mc-header {
	position: sticky;
	top: 0;
	z-index: var(--mc-header-z);
	width: 100%;
	max-width: 100%;  /* belt-and-suspenders: never exceed viewport width */
	background: var(--mc-header-bg);
	color: var(--mc-header-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	/* overflow: hidden (both axes) replaces overflow-x: hidden.
	 * When only overflow-x is set to a non-visible value the CSS spec silently
	 * promotes overflow-y from visible → auto, making the header a scroll
	 * container.  That caused two regressions:
	 *   1. The typeahead dropdown was trapped inside the header scroll area
	 *      (a scrollbar appeared inside row 2 while suggestions were open).
	 *   2. On iOS Safari, sticky elements that are scroll containers can
	 *      produce a few extra pixels of horizontal layout space, causing
	 *      the residual mobile sideways swipe.
	 * Setting overflow: hidden on BOTH axes prevents the scroll-container
	 * side-effect entirely.  The typeahead and recent-searches panels now use
	 * position: fixed so they are never clipped by this rule. */
	overflow: hidden;
}

/* ---- Row 1: Brand row ---- */

.mc-header__row--brand {
	background: var(--mc-header-bg);
	border-bottom: 1px solid var(--mc-header-border);
	/* overflow-x: hidden was removed — it was redundant (the .mc-header parent already
	 * clips via overflow: hidden) and it promoted overflow-y from visible to auto,
	 * creating an unwanted vertical scroll area in the brand row on desktop. */
}

.mc-header__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;         /* padding included in max-width: prevents 32 px overflow */
	max-width: min(1400px, 100%);   /* cap at viewport width */
	margin: 0 auto;
	padding: 0 16px;
	height: var(--mc-brand-row-height);
}

/* Push the right slot (login / badge / Post CTA) to the far right of the brand row */
.mc-header__row--brand .mc-header__right {
	margin-left: auto;
}

/* When hamburger is visible, it follows directly after right slot (no extra gap) */
.mc-header__row--brand .mc-header__hamburger {
	margin-left: 0;
}

/* ---- Row 2: Dedicated search row ---- */

.mc-header__row--search {
	background: var(--mc-header-search-bg);
	border-top: 1px solid rgba(255, 255, 255, .06);
}

.mc-header__search-row-inner {
	box-sizing: border-box;         /* padding included in max-width: prevents 32 px overflow */
	max-width: min(1400px, 100%);   /* cap at viewport width */
	margin: 0 auto;
	padding: 8px 16px;
}

/* Search wrap in the dedicated row fills full available width */
.mc-header__row--search .mc-header__search-wrap {
	max-width: none;
	width: 100%;
}

/* =========================================================================
 * 3. LOGO
 *
 * Layout: maple leaf [LEFT] + text block [RIGHT]
 *   Text block stacks "MappCanada" on top and tagline below it.
 *   The logo anchor is always flex-direction: row so the leaf sits
 *   to the left of the text — never above it.
 * ======================================================================= */

.mc-header__logo {
	display: flex;
	flex-direction: row;       /* leaf LEFT, text RIGHT — always */
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	max-width: var(--mc-header-logo-max-width);
	text-decoration: none;
	color: var(--mc-header-text);
	white-space: nowrap;
	/* overflow: visible so logo and tagline are never clipped by the container;
	   the tagline element handles its own text-overflow:ellipsis below */
	overflow: visible;
}

.mc-header__logo:hover,
.mc-header__logo:focus {
	opacity: 0.88;
}

.mc-header__logo-img {
	max-height: 44px;
	width: auto;
	display: block;
}

/* The maple leaf emoji — sits to the left of the text block */
.mc-header__logo-maple {
	font-size: 1.35rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Text block: contains both the site name and the tagline stacked */
.mc-header__logo-textblock {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	line-height: 1;
}

.mc-header__logo-text {
	display: block;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin-bottom: 1px;
}

.mc-header__logo-tagline {
	display: none; /* Hidden by default (mobile-first); shown at desktop via media query */
	font-size: 0.68rem;
	opacity: 0.6;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

/* Show tagline only on large desktop */
@media (min-width: 75em) {
	.mc-header__logo-tagline {
		display: block;
	}
}

/* =========================================================================
 * 4. SEARCH BAR
 *
 * Base styles apply to the search form wherever it lives.
 * Enhanced sizes are applied specifically inside .mc-header__row--search
 * to make the dedicated search row more prominent and polished.
 * ======================================================================= */

.mc-header__search {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.mc-header__search-input {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;   /* fills .mc-header__search-input-wrap regardless of flex context */
	height: 34px;
	padding: 0 10px;
	border: none;
	border-radius: var(--mc-header-radius) 0 0 var(--mc-header-radius);
	background: var(--mc-header-input-bg);
	color: var(--mc-header-input-text);
	font-size: 0.875rem;
	outline: none;
}

.mc-header__search-input:focus {
	box-shadow: 0 0 0 2px var(--mc-header-accent);
}

.mc-header__search-province,
.mc-header__search-category {
	flex-shrink: 0;
	height: 34px;
	padding: 0 6px;
	border: none;
	border-left: 1px solid rgba(0,0,0,.12);
	background: var(--mc-header-input-bg);
	color: var(--mc-header-input-text);
	font-size: 0.82rem;
	cursor: pointer;
	outline: none;
	max-width: 130px;
}

.mc-header__search-province:focus,
.mc-header__search-category:focus {
	box-shadow: 0 0 0 2px var(--mc-header-accent);
}

.mc-header__search-btn {
	flex-shrink: 0;
	height: 34px;
	width: 40px;
	border: none;
	border-radius: 0 var(--mc-header-radius) var(--mc-header-radius) 0;
	background: var(--mc-header-accent);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: background var(--mc-header-transition);
}

/* ---- Enhanced sizes for the dedicated search row ---- */

.mc-header__row--search .mc-header__search-input {
	height: 44px;
	font-size: 1rem;
	padding: 0 16px;
}

.mc-header__row--search .mc-header__search-btn {
	height: 44px;
	width: 50px;
	font-size: 1.2rem;
}

.mc-header__search-btn:hover,
.mc-header__search-btn:focus {
	background: #b02318;
	outline: none;
	box-shadow: 0 0 0 2px #fff;
}

/* =========================================================================
 * 4a. SEARCH ROW — NO-RESULTS FEEDBACK BANNER
 *
 * Displayed by mcFrontPageSearch (hub.js) when a keyword search returns
 * zero results.  Positioned directly below the search form, full-width
 * within the search-wrap so it aligns naturally with the search bar.
 * ======================================================================= */

.mc-header__search-feedback {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 7px 12px;
	font-size: 0.84rem;
	line-height: 1.4;
	color: #8b2d1a;
	background: #fff5f4;
	border: 1px solid #f5c4bc;
	border-radius: var(--mc-header-radius, 6px);
	box-sizing: border-box;
}

.mc-header__search-feedback[hidden] {
	display: none;
}

/* =========================================================================
 * 5. RIGHT SLOT (USER BADGE / LOGIN)
 * ======================================================================= */

.mc-header__right {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.mc-header__badge-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mc-header__login-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	min-height: 34px;
	border: 1px solid var(--mc-header-border);
	border-radius: var(--mc-header-radius);
	color: var(--mc-header-text);
	text-decoration: none;
	font-size: 0.84rem;
	white-space: nowrap;
	transition: background var(--mc-header-transition), border-color var(--mc-header-transition);
}

.mc-header__login-link:hover,
.mc-header__login-link:focus {
	background: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.3);
	outline: none;
}

/* =========================================================================
 * 6. HAMBURGER BUTTON
 * ======================================================================= */

.mc-header__hamburger {
	display: none;          /* Hidden on desktop — shown via media query */
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--mc-header-border);
	border-radius: var(--mc-header-radius);
	cursor: pointer;
	color: var(--mc-header-text);
	transition: background var(--mc-header-transition);
}

.mc-header__hamburger:hover,
.mc-header__hamburger:focus {
	background: rgba(255,255,255,.1);
	outline: none;
	box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}

.mc-header__hamburger-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.mc-header__hamburger-icon span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--mc-header-text);
	border-radius: 2px;
	transition: transform var(--mc-header-transition), opacity var(--mc-header-transition);
}

/* Animated X when open */
.mc-header__hamburger[aria-expanded="true"] .mc-header__hamburger-icon span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.mc-header__hamburger[aria-expanded="true"] .mc-header__hamburger-icon span:nth-child(2) {
	opacity: 0;
}
.mc-header__hamburger[aria-expanded="true"] .mc-header__hamburger-icon span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
 * 7. MOBILE DRAWER
 * ======================================================================= */

.mc-header__drawer {
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s ease, padding .3s ease;
	background: var(--mc-header-drawer-bg);
}

.mc-header__drawer[aria-hidden="false"] {
	max-height: calc(100vh - var(--mc-header-height));
	max-height: calc(100dvh - var(--mc-header-height)); /* dynamic viewport — iOS Safari */
	overflow-y: auto;
	overflow-x: hidden; /* block implicit overflow-x:auto (CSS spec §overflow shorthand) from expanding page scroll width */
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 48em) {
	.mc-header__drawer[aria-hidden="false"] {
		max-height: calc(100vh - var(--mc-header-height-tablet));
		max-height: calc(100dvh - var(--mc-header-height-tablet));
	}
}

@media (min-width: 75em) {
	.mc-header__drawer[aria-hidden="false"] {
		max-height: calc(100vh - var(--mc-header-height-desktop));
		max-height: calc(100dvh - var(--mc-header-height-desktop));
	}
}

.mc-header__drawer nav {
	padding: 14px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mc-header__drawer-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mc-header__drawer-search .mc-header__search-input {
	border-radius: var(--mc-header-radius);
	width: 100%;
}

.mc-header__drawer-search .mc-header__search-province,
.mc-header__drawer-search .mc-header__search-category {
	width: 100%;
	max-width: none;
	border-left: none;
	border-radius: var(--mc-header-radius);
}

.mc-header__drawer-search .mc-header__search-btn {
	width: 100%;
	border-radius: var(--mc-header-radius);
}

.mc-header__drawer-provinces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 7px;
}

.mc-header__drawer-provinces a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	border: 1px solid var(--mc-header-border);
	border-radius: var(--mc-header-radius);
	color: var(--mc-header-text);
	text-decoration: none;
	font-size: 0.82rem;
	transition: background var(--mc-header-transition), border-color var(--mc-header-transition);
}

.mc-header__drawer-provinces a:hover,
.mc-header__drawer-provinces a:focus {
	background: rgba(255,255,255,.12);
	border-color: var(--mc-header-accent);
	outline: none;
}

.mc-header__drawer-user {
	border-top: 1px solid var(--mc-header-border);
	padding-top: 12px;
}

/* Section labels in the drawer */
.mc-header__drawer-section-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: rgba(245,245,245,.45);
	margin-bottom: 6px;
}

/* =========================================================================
 * 8. RESPONSIVE BREAKPOINTS  (mobile-first)
 *
 * Tier 1 — Mobile portrait  (< 480px  / 30em)  — extra compact brand row
 * Tier 2 — Mobile           (< 640px  / 40em)  — search row hidden; search in drawer
 * Tier 3 — Compact tablet   (640px–767px)       — search row visible + hamburger
 * Tier 4 — Desktop          (≥ 768px / 48em)   — full layout, no hamburger
 * Tier 5 — Large desktop    (≥ 1200px)          — tagline + extra brand row height
 * ======================================================================= */

/* --- Tier 1: Mobile portrait (< 480px) ---------------------------------
   Logo text always visible but scaled down to save space. */
@media (max-width: 29.99em) {
	.mc-header__inner {
		gap: 6px;
		padding-inline: 8px;
	}

	.mc-header__logo {
		font-size: 0.875rem; /* 14px */
		gap: 4px;
	}

	.mc-header__logo-maple {
		font-size: 1.125rem; /* 18px */
	}

	.mc-header__logo-textblock {
		display: flex; /* Always show */
	}

	.mc-header__logo-text {
		font-size: 0.875rem; /* 14px */
	}

	.mc-header__logo-tagline {
		display: none; /* Tagline still hidden — not enough room */
	}
}

/* Extra small screens (≤ 384px / 24em) — even more compact */
@media (max-width: 23.99em) {
	.mc-header__logo {
		font-size: 0.8125rem; /* 13px */
	}

	.mc-header__logo-maple {
		font-size: 1rem; /* 16px */
	}

	.mc-header__logo-text {
		font-size: 0.8125rem; /* 13px */
	}
}

/* --- Tier 2: Mobile (< 640px) ------------------------------------------
   Hide the dedicated search row — search is available in the mobile drawer.
   Keep brand row compact so logo/login are always reachable. */
@media (max-width: 39.99em) {
	/* Entire search row is hidden on mobile; search lives in the drawer */
	.mc-header__row--search {
		display: none;
	}

	/* Right slot: show login/badge only — hide language toggle */
	.mc-header__right .mc-header__lang-toggle:not(.mc-header__lang-toggle--mobile) {
		display: none;
	}

	/* Post a Listing: icon only — text hidden to keep brand row uncluttered.
	   The drawer has the full-width CTA. */
	.mc-header__post-btn-text {
		display: none;
	}

	.mc-header__hamburger {
		display: inline-flex;
	}

	.mc-header__inner {
		height: var(--mc-brand-row-height);
		gap: 8px;
		padding: 0 12px;
	}
}

/* --- Tier 3: Compact tablet (640px–767px) ------------------------------
   Search row visible; hamburger still shown for province/nav drawer.
   Moved upper bound from 899px to 767px so the full desktop layout
   kicks in at 768px instead of 900px. */
@media (min-width: 40em) and (max-width: 47.99em) {
	.mc-header {
		--mc-header-height: var(--mc-header-height-tablet);
	}

	.mc-header__inner {
		height: var(--mc-brand-row-height-tablet);
		gap: 8px;
		padding: 0 14px;
	}

	/* Language toggle moves to drawer at this size */
	.mc-header__right .mc-header__lang-toggle:not(.mc-header__lang-toggle--mobile) {
		display: none;
	}

	/* Hamburger visible */
	.mc-header__hamburger {
		display: inline-flex;
	}

	/* Search row padding adjustments */
	.mc-header__search-row-inner {
		padding: 7px 14px;
	}
}

/* --- Tier 4: Desktop (≥ 768px) ----------------------------------------
   Full layout: brand row + search row. No hamburger.
   Moved threshold from 900px (56.25em) to 768px (48em) so tablets and
   larger phones in landscape retain the two-row desktop layout. */
@media (min-width: 48em) {
	.mc-header {
		--mc-header-height: var(--mc-header-height-tablet);
	}

	.mc-header__inner {
		height: var(--mc-brand-row-height-tablet);
		gap: 12px;
		padding: 0 18px;
	}

	.mc-header__hamburger {
		display: none;
	}

	.mc-header__search-row-inner {
		padding: 8px 18px;
	}
}

/* --- Tier 5: Desktop (≥ 1200px) ----------------------------------------
   Taller brand row, tagline visible. */
@media (min-width: 75em) {
	.mc-header {
		--mc-header-height: var(--mc-header-height-desktop);
	}

	.mc-header__inner {
		height: var(--mc-brand-row-height-desktop);
		gap: 14px;
		padding: 0 20px;
	}

	.mc-header__hamburger {
		display: none;
	}

	.mc-header__search-row-inner {
		padding: 8px 20px;
	}
}

/* --- Tier 6: Large desktop (≥ 1440px) --------------------------------- */
@media (min-width: 90em) {
	.mc-header__inner {
		padding: 0 24px;
	}

	.mc-header__search-row-inner {
		padding: 8px 24px;
	}
}

/* --- Mobile landscape: compact search row for phones in landscape orientation.
   Phones in landscape are typically 568–767px wide — they fall into Tier 3
   (640–767px) where the search row is visible.  Reduce row padding slightly
   on narrow-height viewports so the search bar doesn't dominate too much
   vertical space. */
@media (max-width: 47.99em) and (max-height: 500px) and (orientation: landscape) {
	.mc-header__search-row-inner {
		padding: 4px 14px;
	}

	.mc-header__row--search .mc-header__search-input,
	.mc-header__row--search .mc-header__search-btn {
		height: 38px;
	}
}

/* =========================================================================
 * 9. THEME HEADER SUPPRESSION
 *
 * When our global header is active (body.has-mc-header), hide the
 * WordPress theme's default header element to prevent a double-header
 * situation. These selectors cover the most common theme header IDs/classes.
 *
 * Notes:
 *  - `.wp-block-template-part.header`      targets FSE themes that output a
 *    bare `header` class alongside `wp-block-template-part`.
 *  - `.wp-block-template-part-header`      targets Twenty Twenty-Four and
 *    other FSE/block themes that use the slugified `-header` suffix class
 *    (e.g. `wp-block-template-part-header`) instead of a bare `header` class.
 * ======================================================================= */

body.has-mc-header #masthead,
body.has-mc-header .site-header,
body.has-mc-header header.header,
body.has-mc-header #site-header,
body.has-mc-header #header,
body.has-mc-header #headerimg,
body.has-mc-header .wp-block-template-part.header,
body.has-mc-header .wp-block-template-part-header {
	display: none !important;
}

/* Prevent mobile horizontal overflow / sideways page drag.
 *
 * Primary containment: .mc-header now uses overflow: hidden (see Section 2)
 * which clips any child overflow before it reaches the document scroll width
 * and works on all browsers including iOS Safari < 16.
 *
 * This body-level rule is a belt-and-suspenders fallback that ensures no
 * stray element anywhere on the page (not just inside the header) can create
 * a horizontal scroll area.  The rule targets only pages with the MappCanada
 * header active (body.has-mc-header is added by PHP on every front-end page).
 *
 * Fixed-position elements (mega menu, typeahead) are NOT affected
 * because overflow on an ancestor does not clip position: fixed descendants.
 */
body.has-mc-header {
	overflow-x: hidden;
}
/* =========================================================================
 * 10. SEARCH WRAP & TYPEAHEAD (Feature 1)
 * ======================================================================= */

.mc-header__search-wrap {
	flex: 1 1 0;
	position: relative;
	min-width: 0;
	max-width: var(--mc-header-search-max-width);
}

.mc-header__search {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mc-header__search-input-wrap {
	flex: 1 1 0;
	position: relative;
	min-width: 0;
	/* display: flex activates the input's flex: 1 1 0 so it fills the wrap;
	   width: 100% on the input itself also ensures fill in any legacy context */
	display: flex;
	align-items: stretch;
}

/* Hidden legacy province select (kept for no-JS fallback) */
.mc-header__search-province--hidden {
	display: none !important;
}

/* Province mega-menu trigger button */
.mc-header__province-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 8px;
	border: none;
	border-right: 1px solid rgba(0,0,0,.12);
	background: var(--mc-header-input-bg);
	color: var(--mc-header-input-text);
	font-size: 0.82rem;
	cursor: pointer;
	white-space: nowrap;
	border-radius: var(--mc-header-radius) 0 0 var(--mc-header-radius);
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background var(--mc-header-transition);
}

.mc-header__province-btn:hover,
.mc-header__province-btn:focus {
	background: #f0f0f0;
	outline: none;
	box-shadow: 0 0 0 2px var(--mc-header-accent);
}

.mc-header__province-btn--active {
	background: #fff3f3;
	color: var(--mc-header-accent);
	font-weight: 600;
}

.mc-header__province-btn-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Typeahead dropdown
 * position: fixed so the panel escapes any overflow:hidden ancestor
 * (same approach as .mc-header__mega-menu).  top/left/width are
 * injected by positionPanel() in mappcanada-header.js each time the
 * panel opens and on window resize. */
.mc-header__typeahead {
	position: fixed;
	z-index: calc(var(--mc-header-z) + 10);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: var(--mc-header-radius);
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
	max-height: 400px;
	overflow-y: auto;
}

.mc-header__typeahead[hidden] { display: none; }

.mc-header__typeahead-section {
	padding: 8px 12px 4px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #888;
	background: #f9f9f9;
	border-bottom: 1px solid #eee;
}

.mc-header__typeahead-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	color: #1a1a2e;
	text-decoration: none;
	font-size: 0.92rem;
	border-bottom: 1px solid #f3f3f3;
	transition: background .12s;
	cursor: pointer;
}

.mc-header__typeahead-item:last-child { border-bottom: none; }

.mc-header__typeahead-item:hover,
.mc-header__typeahead-item--focused,
.mc-header__typeahead-item:focus {
	background: #f0f4ff;
	outline: none;
}

.mc-header__typeahead-title {
	flex: 1 1 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-header__typeahead-badge {
	flex-shrink: 0;
	font-size: 0.75rem;
	padding: 2px 7px;
	background: #ebebeb;
	border-radius: 12px;
	color: #555;
	text-transform: capitalize;
}

.mc-header__typeahead-no-results {
	padding: 1rem;
	text-align: center;
	color: #666;
	font-size: 0.875rem;
	font-style: italic;
}

/* =========================================================================
 * 11. RECENT SEARCHES PANEL (Feature 2)
 * ======================================================================= */

.mc-header__recent-searches {
	/* position: fixed — escapes overflow:hidden ancestor; JS sets top/left/width */
	position: fixed;
	z-index: calc(var(--mc-header-z) + 10);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: var(--mc-header-radius);
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
	padding: 8px 0;
}

.mc-header__recent-searches[hidden] { display: none; }

.mc-header__recent-header {
	padding: 6px 14px 4px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #888;
}

.mc-header__recent-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 14px;
	background: none;
	border: none;
	font-size: 0.92rem;
	color: #1a1a2e;
	cursor: pointer;
	transition: background .12s;
}

.mc-header__recent-item:hover,
.mc-header__recent-item:focus {
	background: #f0f4ff;
	outline: none;
}

.mc-header__recent-clear {
	display: block;
	width: calc(100% - 28px);
	margin: 6px 14px 2px;
	padding: 6px 0;
	background: none;
	border: 1px solid #ddd;
	border-radius: var(--mc-header-radius);
	font-size: 0.82rem;
	color: #888;
	cursor: pointer;
	text-align: center;
	transition: border-color .12s, color .12s;
}

.mc-header__recent-clear:hover,
.mc-header__recent-clear:focus {
	border-color: var(--mc-header-accent);
	color: var(--mc-header-accent);
	outline: none;
}

/* =========================================================================
 * 12. PROVINCE MEGA MENU (Feature 3)
 * ======================================================================= */

.mc-header__mega-menu {
	/*
	 * position: fixed so the panel escapes any overflow:hidden ancestor,
	 * stacking contexts created by sticky/transform, etc.
	 * top / left / right are calculated and injected by JS in initMegaMenu().
	 */
	position: fixed;
	z-index: calc(var(--mc-header-z) + 100);
	background: #fff;
	border-top: 3px solid var(--mc-header-accent);
	box-shadow: 0 8px 32px rgba(0,0,0,.22);
	animation: mc-mega-drop .2s ease;
	max-height: calc(100vh - var(--mc-header-height) - 8px);
	overflow-y: auto;
}

.mc-header__mega-menu[hidden] { display: none; }

@keyframes mc-mega-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mc-header__mega-menu-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 16px 20px 24px;
}

.mc-header__mega-menu-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.mc-header__mega-menu-top .mc-header__mega-close {
	margin-left: auto;
}

.mc-header__near-me-mega-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	background: var(--mc-header-accent);
	color: #fff;
	border: none;
	border-radius: var(--mc-header-radius);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background var(--mc-header-transition);
}

.mc-header__near-me-mega-btn:hover,
.mc-header__near-me-mega-btn:focus {
	background: #b02318;
	outline: none;
	box-shadow: 0 0 0 2px #d52b1e;
}

/* --- Clear Province Filter button (inside mega menu top bar) --- */
.mc-header__clear-province-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	background: #fff;
	color: #333;
	border: 1px solid #ccc;
	border-radius: var(--mc-header-radius);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background var(--mc-header-transition), border-color var(--mc-header-transition);
}

.mc-header__clear-province-btn:hover,
.mc-header__clear-province-btn:focus {
	background: #f5f5f5;
	border-color: #999;
	outline: none;
	box-shadow: 0 0 0 2px #ccc;
}

.mc-header__mega-close {
	background: none;
	border: 1px solid #ddd;
	border-radius: var(--mc-header-radius);
	padding: 4px 10px;
	font-size: 1rem;
	cursor: pointer;
	color: #666;
	transition: background var(--mc-header-transition);
}

.mc-header__mega-close:hover,
.mc-header__mega-close:focus {
	background: #f5f5f5;
	outline: none;
}

.mc-header__province-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}

.mc-header__province-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	background: #f9f9f9;
	border: 2px solid #eee;
	border-radius: var(--mc-header-radius);
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .1s;
	text-align: center;
}

.mc-header__province-card:hover,
.mc-header__province-card:focus {
	background: #fff3f3;
	border-color: var(--mc-header-accent);
	outline: none;
	transform: translateY(-2px);
}

.mc-header__province-card--selected {
	background: #fff0f0;
	border-color: var(--mc-header-accent);
	box-shadow: 0 0 0 2px rgba(213,43,30,.25);
}

.mc-header__province-flag { font-size: 1.5rem; }

.mc-header__province-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: #1a1a2e;
}

.mc-header__province-count {
	font-size: 0.74rem;
	color: #888;
}

/* =========================================================================
 * 12b. NEAR ME BUTTON STATES
 * ======================================================================= */

/* Near Me pin button — base */
.mc-header__near-me-btn {
	flex-shrink: 0;
	height: 34px;
	width: 34px;
	border: none;
	background: var(--mc-header-input-bg);
	border-left: 1px solid rgba(0,0,0,.12);
	color: var(--mc-header-input-text);
	font-size: 1rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--mc-header-transition), color var(--mc-header-transition);
	outline: none;
}

.mc-header__near-me-btn:hover,
.mc-header__near-me-btn:focus {
	background: #f0f0f0;
	box-shadow: 0 0 0 2px var(--mc-header-accent);
}

/* Loading state: pulsing animation while geolocation is running */
.mc-header__near-me-btn--loading {
	animation: mc-near-me-pulse 0.9s ease-in-out infinite;
	background: #fff8e1;
	color: #e67e00;
}

@keyframes mc-near-me-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.6; transform: scale(1.18); }
}

/* Active/success state: province has been detected */
.mc-header__near-me-btn--active {
	background: #e8f5e9;
	color: #2e7d32;
	box-shadow: 0 0 0 2px #2e7d32;
}

/* Near Me button in mobile drawer */
.mc-header__drawer-search .mc-header__near-me-btn {
	width: 100%;
	border-left: none;
	border-radius: var(--mc-header-radius);
	height: 40px;
	font-size: 1rem;
	justify-content: center;
	gap: 6px;
}

/* =========================================================================
 * 13. @USERNAME USER CARDS (Feature 4)
 * ======================================================================= */

.mc-header__user-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	text-decoration: none;
	color: #1a1a2e;
	border-bottom: 1px solid #f3f3f3;
	transition: background .12s;
}

.mc-header__user-card:hover,
.mc-header__user-card:focus {
	background: #f0f4ff;
	outline: none;
}

.mc-header__user-card-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.mc-header__user-card-info {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mc-header__user-card-info strong {
	font-size: 0.92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mc-header__user-card-info span {
	font-size: 0.78rem;
	color: #888;
}

.mc-header__user-card-cta {
	flex-shrink: 0;
	font-size: 0.78rem;
	color: var(--mc-header-accent);
}

/* =========================================================================
 * 14. EN/FR LANGUAGE TOGGLE (Feature 6)
 * ======================================================================= */

.mc-header__lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	border: 1px solid var(--mc-header-border);
	border-radius: var(--mc-header-radius);
	overflow: hidden;
}

.mc-header__lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	background: transparent;
	border: none;
	color: var(--mc-header-text);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	letter-spacing: .03em;
	opacity: 0.65;
	transition: background var(--mc-header-transition), opacity var(--mc-header-transition);
	text-decoration: none;
}

.mc-header__lang-btn + .mc-header__lang-btn {
	border-left: 1px solid var(--mc-header-border);
}

.mc-header__lang-btn--active {
	background: var(--mc-header-accent);
	opacity: 1;
}

.mc-header__lang-btn:hover,
.mc-header__lang-btn:focus {
	opacity: 1;
	background: rgba(255,255,255,.1);
	outline: none;
}

.mc-header__lang-btn--active:hover,
.mc-header__lang-btn--active:focus {
	background: #b02318;
}

/* Mobile drawer lang toggle */
.mc-header__lang-toggle--mobile {
	border-color: var(--mc-header-border);
	margin-top: 8px;
}

/* =========================================================================
 * 16. NEAR ME BUTTON (Feature 7)
 * ======================================================================= */

.mc-header__near-me-btn {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 10px;
	background: var(--mc-header-input-bg);
	border: none;
	border-left: 1px solid rgba(0,0,0,.12);
	color: var(--mc-header-input-text);
	font-size: 1rem;
	cursor: pointer;
	transition: background var(--mc-header-transition);
}

.mc-header__near-me-btn:hover,
.mc-header__near-me-btn:focus {
	background: #f0f4ff;
	outline: none;
	box-shadow: 0 0 0 2px var(--mc-header-accent);
}

.mc-header__near-me-btn--active { color: var(--mc-header-accent); }

.mc-header__near-me-btn--loading { opacity: 0.6; cursor: wait; }

/* Tooltip */
.mc-header__near-me-tip {
	display: none;
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #1a1a2e;
	color: #fff;
	font-size: 0.78rem;
	padding: 4px 10px;
	border-radius: var(--mc-header-radius);
	white-space: nowrap;
	pointer-events: none;
	z-index: calc(var(--mc-header-z) + 30);
}

/* In mobile drawer, near me button shows as a full-width pill */
.mc-header__drawer-search .mc-header__near-me-btn {
	width: 100%;
	border-left: none;
	border-radius: var(--mc-header-radius);
	gap: 6px;
	justify-content: center;
	font-size: 0.9rem;
}

/* =========================================================================
 * 17. PHASE 1 RESPONSIVE OVERRIDES  (≤ compact tablet: < 768px / 48em)
 * ======================================================================= */

@media (max-width: 47.99em) {
/* Province mega menu positioning on mobile/tablet is handled
   by JS (positionMegaMenu) which sets left:0 / right:0
   at narrow viewports. border-radius: 0 still applied via CSS. */
.mc-header__mega-menu {
	border-radius: 0;
}

/* Language toggle in mobile/tablet: hide from desktop right slot, show in drawer */
.mc-header__right .mc-header__lang-toggle:not(.mc-header__lang-toggle--mobile) {
	display: none;
}
}

/* =========================================================================
 * Job card in typeahead dropdown
 * ======================================================================= */

.mc-header__typeahead-job-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mc-header__typeahead-company {
	font-size: 0.85rem;
	color: #666;
}

.mc-header__typeahead-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.8rem;
}

.mc-header__typeahead-badge--job-type {
	background: #4CAF50;
	color: white;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 600;
}

.mc-header__typeahead-location,
.mc-header__typeahead-category,
.mc-header__typeahead-province {
	color: #666;
}

/* =========================================================================
 * 18. ACCESSIBILITY — REDUCED MOTION
 * ======================================================================= */

@media (prefers-reduced-motion: reduce) {
	.mc-header,
	.mc-header *,
	.mc-header *::before,
	.mc-header *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================================
 * 19. PRINT STYLES
 * ======================================================================= */

@media print {
	.mc-header {
		position: static;
		box-shadow: none;
	}

	.mc-header__hamburger,
	.mc-header__search-wrap,
	.mc-header__right,
	.mc-header__drawer {
		display: none !important;
	}
}

/* =========================================================================
 * 20. MINIMAL LAYOUT VARIANT
 *
 * Applied via .mc-header--minimal when mappcanada_header_layout = 'minimal'.
 * Hides the search bar and Post a Listing CTA — shows only logo + login/badge.
 * ======================================================================= */

.mc-header--minimal .mc-header__search-wrap,
.mc-header--minimal .mc-header__post-btn,
.mc-header--minimal .mc-header__hamburger {
	display: none;
}

/* =========================================================================
 * 21. USER SLOT
 *
 * Wraps the nav badge into a flex group in the right slot.
 * ======================================================================= */

.mc-header__user-slot {
	display: flex;
	align-items: center;
	gap: 4px;
}