/* ==========================================================================
   ConstructCo — primary navigation (spec 2.1)

   Two things to know before editing:

   1. Positioning. The old mega menu used `left: 88%; transform:
      translateX(-50%); width: 1400px` — a magic offset tuned for a nav with a
      single dropdown in a fixed spot. With eight top-level items and three
      dropdowns it pushed the panel off the left edge of the viewport. The panel
      is now anchored to <header>, which is already `position: absolute; width:
      100%`, so it spans the header at any breakpoint with no per-item offsets.

   2. Specificity. style.css styles the menu with ID selectors that are designed
      for a dark transparent header and actively fight panel content:
        #mainmenu li a            { color: #eceff3 }   -> white text on white panel
        #mainmenu a               { padding: 25px 0 }  -> enormous row spacing
        #mainmenu a span:not(...) { width: 0; color: #fff }  -> hides label text
      Every rule for panel internals is therefore scoped under
      `#mainmenu .mega-menu` so it outranks those. Do not "simplify" these
      selectors — the labels disappear if you do.
   ========================================================================== */

/* ---------------------------------------------------------------- Nav card */

/*
* One dropdown treatment for every nav item: a compact card anchored under its
* own item, two columns of plain links, nothing else.
*
* This replaces a full-width panel that spanned the header. That panel is why
* the item had `position: static` — it was anchored to <header> so it could span
* it. A card that belongs to one item is positioned against that item instead,
* so the li goes back to `relative` and the card centres itself under the label.
*
* Specificity note still applies: style.css styles the menu with ID selectors
* built for a dark transparent header, and they actively fight card content
* (`#mainmenu a span:not(.badge)` zeroes span width and turns it white, and
* `#mainmenu li:hover a span:not(.badge)` stretches it to 100%). Every rule below
* is scoped under `#mainmenu` to outrank them. Do not "simplify" these selectors
* — the labels disappear if you do.
*/

#mainmenu > li.has-mega { position: relative; }

#mainmenu .mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: 0;
	transform: translateX(-50%) translateY(6px);
	width: max-content;
	max-width: min(560px, calc(100vw - 40px));
	background: var(--cc-surface);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
	padding: 26px 34px;
	z-index: 1002;

	/* #mainmenu sets centred text and 5px letter-spacing for top-level items;
	   neither should reach the card contents. */
	text-align: left;
	letter-spacing: normal;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* The caret. Also bridges the gap between the item and the card so the pointer
   can cross without the card closing under it. */
#mainmenu .mega-menu:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	border: 9px solid transparent;
	border-bottom-color: var(--cc-surface);
}

/* focus-within keeps the card usable for keyboard navigation. */
#mainmenu .has-mega:hover > .mega-menu,
#mainmenu .has-mega:focus-within > .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------------- Links */

#mainmenu .mega-menu .nav-card__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 44px;
}

/* Column-major, so a two-column card reads down then across. */
#mainmenu .mega-menu .nav-card__list--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--nav-card-rows, 6), auto);
	/* Short labels only — see the two-column note in constructco_render_nav_card. */
	white-space: nowrap;
}

#mainmenu .mega-menu .nav-card__link,
#mainmenu .mega-menu .nav-card__all {
	display: block;
	font-family: var(--body-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	color: var(--title-font-color);
	padding: 11px 0;
	transition: color .2s ease;
}

#mainmenu .mega-menu .nav-card__link:hover,
#mainmenu .mega-menu .nav-card__link:focus,
#mainmenu .mega-menu .nav-card__all:hover,
#mainmenu .mega-menu .nav-card__all:focus { color: var(--secondary-color); }

/* Beats #mainmenu a span:not(.badge), which zeroes the width and whitens it,
   and #mainmenu li:hover a span:not(.badge), which stretches it to 100%. */
#mainmenu .mega-menu .nav-card__link span,
#mainmenu .mega-menu .nav-card__all span {
	position: static;
	display: inline;
	width: auto;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	border: 0;
}

#mainmenu .mega-menu .nav-card__all {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--cc-border);
	font-size: 13px;
	color: var(--secondary-color);
}

@media (max-width: 1199px) {
	#mainmenu .mega-menu { padding: 20px 26px; }
	#mainmenu .mega-menu .nav-card__list { gap: 0 30px; }
	#mainmenu .mega-menu .nav-card__link { font-size: 14px; padding: 9px 0; }
}

/* ------------------------------------------------------- Mobile collapsibles */

.prevent-menu-close {
	padding-left: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

.prevent-menu-close[aria-expanded="true"] i { transform: rotate(180deg); }

#mainmenu .navbar-nav .nav-link.is-child { padding-left: 18px; opacity: .85; font-size: 13px; }
#mainmenu .navbar-nav .nav-link.is-lead { font-weight: 600; }

@media (max-width: 991px) {
	header.header-mobile #mainmenu li ul { height: auto !important; }
	#mainmenu .navbar-nav .nav-item { padding-left: 0; }
	/* The desktop panel never applies on mobile; the collapsibles replace it. */
	#mainmenu .mega-menu { display: none; }
}

/* -------------------------------------------------------------- Breadcrumbs */

.constructco-breadcrumbs ul.crumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-left: 0;
	margin: 0 0 10px;
}

/* The theme's .crumb styling already supplies a chevron between items, so no
   separator is added here — doing so renders two. */
.constructco-breadcrumbs ul.crumb li { display: flex; align-items: center; }

/* --------------------------------------------------------------- Header CTA */

/* Moved out of an inline style attribute on the button itself. */
#mainheader .menu_side_area a.header-cta {
	background: var(--secondary-color);
	border: 1px solid var(--secondary-color);
	color: var(--cc-on-accent);
}

#mainheader .menu_side_area a.header-cta:hover,
#mainheader .menu_side_area a.header-cta:focus {
	background: var(--primary-color);
	
	color: var(--cc-on-accent);
}

/* Previously an inline <style> block in header.php. */
.menu-item i.la-angle-right {
	color: var(--title-font-color);
	float: left;
	margin: 4px 5px 10px 0;
	font-weight: bold;
}

.menu-item img { display: none; }