/**
 * Sub Menu Module
 *
 * Styles for template-parts/modules/sub_menu_module.php
 *
 * Panel open/close is driven by assets/js/modules/sub_menu_module.js, which
 * toggles .is-open and sets an explicit pixel height (same technique as the
 * primary mega menu — see assets/js/main.js setMegaMenuHeight()). Per
 * CLAUDE.md, interactive panel transitions fade via opacity only — no
 * translateX/translateY movement.
**/

.hub-sub-menu {
	background: #F1F2F3;
	border-bottom: 1px solid var(--nec-grey20, #ebeced);
}

.hub-sub-menu__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding: 20px 30px;
}

.hub-sub-menu__left {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.hub-sub-menu__hub-name {
	font-family: var(--nec-font);
	font-weight: 500;
	font-size: 16px;
	color: var(--nec-blue, #1414A0);
	white-space: nowrap;
	text-decoration: none;
}

a.hub-sub-menu__hub-name:hover,
a.hub-sub-menu__hub-name:focus-visible {
	text-decoration: underline;
}

.hub-sub-menu__divider {
	width: 1px;
	height: 20px;
	background: rgba(0,0,0,0.2);
	flex-shrink: 0;
}

.hub-sub-menu__label {
	font-family: var(--nec-font);
	font-size: 16px;
	color: var(--nec-grey);
}

.hub-sub-menu__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 16px;
	color: var(--nec-grey);
}

.hub-sub-menu__trigger:hover,
.hub-sub-menu__trigger[aria-expanded="true"] {
	color: var(--nec-orange);
}

.hub-sub-menu__chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 9px;
  height: auto;
  position: relative;
  top: 1px;
  left: 3px;
}

.hub-sub-menu__trigger[aria-expanded="true"] .hub-sub-menu__chevron {
	transform: rotate(180deg);
}

.hub-sub-menu__right {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.hub-sub-menu__action {
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--black, #0C1526);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.hub-sub-menu__action:hover {
	color: var(--nec-orange);
}

/* Dropdown panel — split-column list of the current section's child pages,
   same pattern as the primary mega menu's level-3 panel (see header.css
   .mega-menu__level3 / template-parts/header/primary-nav.php). */
.hub-sub-menu__panel {
	height: 0;
	overflow: hidden;
	opacity: 0;
	background: #F4F4F4;
	transition: opacity 0.25s ease, height 0.3s ease;
	border-top: 1px solid var(--nec-grey20, #ebeced);
}

.hub-sub-menu__panel.is-open {
	opacity: 1;
}

/* padding-left is overridden inline by assets/js/modules/sub_menu_module.js
   (alignPanel) to line up with .hub-sub-menu__trigger — the 30px here is
   just the pre-JS fallback (matches .container-header's own left padding). */
.hub-sub-menu__panel-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 72px;
	padding: 32px 0 32px 30px;
}

/* Fixed 6-per-column split — see template-parts/modules/sub_menu_module.php
   (array_chunk), not CSS auto-balancing. flex: 1 keeps every column equal
   width and lets them scale up with the panel on wider screens, capped
   between min/max so they don't get too narrow or too wide. */
.hub-sub-menu__col {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 0;
	min-width: 220px;
	max-width: 280px;
}

.hub-sub-menu__col li {
	margin-bottom: 14px;
}

.hub-sub-menu__col li a {
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--nec-grey, #6B6B6B);
	transition: color 0.2s ease;
}

.hub-sub-menu__col li a:hover {
	color: var(--nec-orange);
}

/* Grandchild pages (e.g. an individual solution page nested under a section
   child) — a per-item arrow expands a nested list rather than listing them
   flat. See rh_visible_children() in sub_menu_module.php. The whole item is
   the click target (not just the arrow): clicking toggles the sub-list
   rather than navigating, so the parent page is reachable via the
   duplicated "Overview" entry inside the sub-list instead. */
.hub-sub-menu__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hub-sub-menu__item-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--nec-grey, #6B6B6B);
	transition: color 0.2s ease;
}

.hub-sub-menu__item-toggle:hover,
.hub-sub-menu__item-toggle[aria-expanded="true"] {
	color: var(--nec-orange);
}

.hub-sub-menu__item-chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
	width: 8px;
	height: auto;
}

.hub-sub-menu__item-toggle[aria-expanded="true"] .hub-sub-menu__item-chevron {
	transform: rotate(180deg);
}

/* Collapsed/expanded via an explicit pixel height set by JS (setSublistHeight
   in sub_menu_module.js), not height:auto/max-height — auto can't be
   transitioned at all, and a fixed max-height transitions for a constant
   duration regardless of actual content size, so it doesn't finish exactly
   in step with the panel's own height transition. Same 0.3s duration as
   .hub-sub-menu__panel below so both slide open/closed at the same speed,
   in both directions, in unison. */
.hub-sub-menu__sublist {
	list-style: none;
	flex-basis: 100%;
	margin: 0;
	padding: 0 0 0 16px;
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.hub-sub-menu__item.is-open .hub-sub-menu__sublist {
	margin-top: 8px;
	opacity: 1;
}

.hub-sub-menu__sublist li {
	margin-bottom: 10px;
}

.hub-sub-menu__sublist li:last-child {
	margin-bottom: 0;
}

.hub-sub-menu__sublist li a {
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 14px;
	color: var(--nec-grey, #6B6B6B);
	transition: color 0.2s ease;
}

.hub-sub-menu__sublist li a:hover {
	color: var(--nec-orange);
}

@media (max-width: 768px) {
	.hub-sub-menu__inner {
		gap: 8px 24px;
		padding: 16px 20px;
	}

	/* Desktop groups name+divider+trigger together on the left with
	   actions on the right, all on one line. On mobile we want name+
	   actions sharing a top line instead, with the trigger dropping to
	   its own line below — a different grouping than the desktop DOM
	   provides. display:contents unwraps .hub-sub-menu__left so its
	   children (name, divider, trigger) become flex items of
	   .hub-sub-menu__inner directly, alongside .hub-sub-menu__right —
	   then `order` below places them on whichever line/position we want. */
	.hub-sub-menu__left {
		display: contents;
	}

	.hub-sub-menu__hub-name {
		order: 1;
	}

	.hub-sub-menu__right {
		order: 2;
		gap: 4px 16px;
	}

	.hub-sub-menu__divider {
		display: none;
	}

	/* flex-basis:100% forces this onto its own line under the name/actions
	   line above (still within the same wrapping flex row). */
	.hub-sub-menu__trigger,
	.hub-sub-menu__label {
		order: 3;
		flex-basis: 100%;
		padding: 4px 0;
	}

	.hub-sub-menu__action {
		padding: 4px 0;
	}

	/* JS (alignPanel) clears the desktop offset padding-left below this
	   breakpoint, so the panel goes edge-to-edge here. */
	.hub-sub-menu__panel-inner {
		flex-direction: column;
		gap: 0;
		padding: 8px 20px;
	}

	/* A hub with a long child-page list would otherwise push the panel
	   to whatever height JS measures, which on a small viewport can run
	   well past the screen — cap it and let the list itself scroll. */
	.hub-sub-menu__panel {
		max-height: 60vh;
		overflow-y: auto;
	}

	.hub-sub-menu__col {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	.hub-sub-menu__col li {
		margin-bottom: 4px;
	}

	.hub-sub-menu__col li a {
		display: block;
		padding: 8px 0;
	}
}

@media (max-width: 600px) {
	.hub-sub-menu__inner {
		padding: 14px 16px;
	}

	.hub-sub-menu__hub-name,
	.hub-sub-menu__trigger,
	.hub-sub-menu__label {
		font-size: 15px;
	}

	.hub-sub-menu__action {
		font-size: 14px;
	}

	.hub-sub-menu__panel-inner {
		padding: 8px 16px;
	}
}