/* ==========================================================================
   CX Skills — header navigation and mega menu
   File:     css/cxskills-nav.css   (wp-content/themes/conferpress-child/css/)
   Version:  1.0.3
   Markup:   inc/cxskills-nav-render.php (content in inc/cxskills-navigation.php)
   Loaded:   wp-content/mu-plugins/cxskills-nav-loader.php, after the tokens.

   CHANGELOG
   v1.0.3  (23 Sep 2026) Open mega panel dims the page below it (Indigo 900
           at 45%, fades in over 150ms), so the white panel stands apart from
           white pages and white cards behind it.
   v1.0.2  (23 Sep 2026) Menu labels 18px (16px under 1200px), baseline-aligned
           with the wordmark. Logo image is the v2 file (bottom no longer
           clipped).
   v1.0.1  (23 Sep 2026) Mega panel buttons changed from Gold to Indigo 700
           (secondary). Gold now appears once: the header's primary button.
   v1.0.0  (23 Sep 2026) First issue.

   Every colour, size, radius and shadow comes from css/cxskills-tokens.css.
   No hex values in this file. No var() fallbacks.

   Everything is scoped to .cxs-nav-wrap / .cxs-nav, so nothing here can touch
   the rest of the page. The one deliberate reach outside is the top bar
   (#top-nav), recoloured from the old green to Indigo 900.

   HEIGHTS — the header sits position:absolute (parent theme) and main.css pads
   #body by 144px (52px top bar + 92px nav) to clear it. The nav row is kept at
   92px on desktop so that padding stays correct. Do not change one without
   the other.

   BREAKPOINTS — 992px and up: full menu with mega panels. Below 992px: menu
   button and accordion. (The old menu wrapped onto two lines from 1280px down.)
   ========================================================================== */

/* ---------- Top bar: recolour only ---------- */
/* The parent theme sets this with !important, so this has to as well. */
html body .cxs-nav-wrap #top-nav .navbar{ background:var(--cxs-ds-indigo-900) !important; }
html body .cxs-nav-wrap #top-nav a,
html body .cxs-nav-wrap #top-nav .top-info,
html body .cxs-nav-wrap #top-nav i{ color:var(--cxs-ds-text-on-dark); }
html body .cxs-nav-wrap #top-nav a:hover{ color:var(--cxs-ds-gold); }

/* ---------- Wrapper ---------- */
.cxs-nav-wrap{ background:none; }
.cxs-nav-wrap [hidden]{ display:none !important; }
#main-nav.cxs-main-nav{ background:var(--cxs-ds-white); border-bottom:1px solid var(--cxs-ds-border); }
#main-nav .cxs-nav{
	position:relative;
	font-family:var(--cxs-ds-font);
	color:var(--cxs-ds-text);
	-webkit-font-smoothing:antialiased;
}
#main-nav .cxs-nav *,#main-nav .cxs-nav *::before,#main-nav .cxs-nav *::after{ box-sizing:border-box; }
/* Resets use :where() so they carry id-only specificity and every component
   rule below (id + class) wins over them without an arms race. */
#main-nav :where(.cxs-nav ul){ list-style:none; margin:0; padding:0; }
#main-nav :where(.cxs-nav p){ margin:0; }
#main-nav :where(.cxs-nav a){ color:inherit; text-decoration:none; }
#main-nav :where(.cxs-nav a:hover,.cxs-nav a:focus){ text-decoration:none; }
/* The theme gives buttons uppercase, letter-spacing and shadows; undo inside the nav. */
#main-nav .cxs-nav button,#main-nav .cxs-nav button *{ font-family:var(--cxs-ds-font); letter-spacing:normal; text-transform:none; }
#main-nav .cxs-nav button,#main-nav .cxs-nav button:hover,#main-nav .cxs-nav button:focus{ box-shadow:none; text-shadow:none; min-width:0; min-height:0; transform:none; }
/* (the parent theme lifts buttons 2px on hover with transform; that made the open menu label jump) */

/* ---------- Row ---------- */
#main-nav .cxs-nav-row{
	max-width:var(--cxs-ds-content-max);
	margin:0 auto;
	padding:0 var(--cxs-ds-space-lg);
	height:92px;
	display:flex;
	align-items:center;
	gap:var(--cxs-ds-space-lg);
}
#main-nav .cxs-brand{ display:block; flex:none; line-height:0; }
#main-nav .cxs-brand img{ height:40px; width:auto; max-width:none; display:block; }

/* Menu labels sit on the same baseline as the "CX Skills" wordmark. The logo
   image is centred in the row but its lettering sits low in the image (the cap
   rises above it), so centred labels read 12px high. Measured 23 Sep 2026:
   label baseline 106px vs wordmark baseline 118px at 18px type. */
#main-nav .cxs-nav-list{ display:flex; align-items:center; gap:var(--cxs-ds-space-2xs); position:relative; top:var(--cxs-ds-space-sm); }
#main-nav .cxs-nav-btn{
	display:flex; align-items:center; gap:6px;
	font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-medium); line-height:1.2;
	color:var(--cxs-ds-text);
	background:none; border:0; cursor:pointer;
	padding:10px 12px; margin:0;
	border-radius:var(--cxs-ds-radius-md);
	text-transform:none; letter-spacing:normal; box-shadow:none;
}
#main-nav .cxs-nav-btn:hover,
#main-nav .cxs-nav-item.is-open > .cxs-nav-btn{ color:var(--cxs-ds-indigo-700); background:var(--cxs-ds-indigo-50); }
#main-nav .cxs-nav-btn svg{ transition:transform .15s; }
#main-nav .cxs-nav-item.is-open > .cxs-nav-btn svg{ transform:rotate(180deg); }

#main-nav .cxs-nav-cta{
	margin-left:auto; flex:none; white-space:nowrap;
	background:var(--cxs-ds-btn-primary-bg); color:var(--cxs-ds-btn-primary-text);
	font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold); line-height:1.2;
	padding:13px 20px; border-radius:var(--cxs-ds-radius-md);
}
#main-nav .cxs-nav-cta:hover{ background:var(--cxs-ds-btn-primary-bg-hover); color:var(--cxs-ds-btn-primary-text); }

#main-nav .cxs-burger{ display:none; margin-left:auto; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer; }
#main-nav .cxs-burger i{ display:block; height:2px; margin:6px 9px; background:var(--cxs-ds-indigo-800); border-radius:2px; transition:transform .2s, opacity .2s; }
#main-nav .cxs-burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(8px) rotate(45deg); }
#main-nav .cxs-burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
#main-nav .cxs-burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

#main-nav .cxs-nav :focus-visible{ outline:2px solid var(--cxs-ds-focus); outline-offset:2px; }

/* ---------- Mega panels ---------- */
#main-nav .cxs-mm-panel{
	position:absolute; left:0; right:0; top:100%; z-index:1000;
	background:var(--cxs-ds-white);
	border-top:3px solid var(--cxs-ds-indigo-700);
	/* Drop shadow, plus a 100vmax spread that dims the page below the panel.
	   clip-path trims the spread above the panel's top edge, so the header
	   itself is never dimmed. Clicking the dimmed area closes the panel
	   (js/cxskills-nav.js, click outside). */
	box-shadow:0 18px 36px color-mix(in srgb, var(--cxs-ds-indigo-900) 16%, transparent),
	           0 0 0 100vmax color-mix(in srgb, var(--cxs-ds-indigo-900) 45%, transparent);
	clip-path:inset(0 -100vmax -100vmax -100vmax);
	animation:cxs-mm-dim .15s ease-out;
	max-height:calc(100vh - 160px); overflow-y:auto; overscroll-behavior:contain;
}
@keyframes cxs-mm-dim{
	from{ box-shadow:0 18px 36px transparent, 0 0 0 100vmax transparent; }
}
@media (prefers-reduced-motion:reduce){ #main-nav .cxs-mm-panel{ animation:none; } }
#main-nav .cxs-mm-inner{
	max-width:var(--cxs-ds-content-max); margin:0 auto;
	padding:28px var(--cxs-ds-space-lg) 30px;
	display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:36px;
}
#main-nav .cxs-mm-cols3{ column-count:3; column-gap:32px; }
#main-nav .cxs-mm-cols2{ display:grid; grid-template-columns:1.2fr 1fr; gap:36px; }
#main-nav .cxs-mm-group{ break-inside:avoid; margin-bottom:22px; }
#main-nav .cxs-mm-h{ margin:0 0 8px; }
#main-nav .cxs-mm-h a,#main-nav .cxs-mm-h span{
	font-size:12px; font-weight:var(--cxs-ds-weight-semibold); letter-spacing:.1em; text-transform:uppercase;
	color:var(--cxs-ds-indigo-700);
}
#main-nav .cxs-mm-h a:hover{ color:var(--cxs-ds-indigo-900); text-decoration:underline; }
#main-nav .cxs-mm-group li a,#main-nav .cxs-mm-group li span,
#main-nav .cxs-lcol li a{
	display:block; font-size:14.5px; line-height:1.45; padding:5px 0; color:var(--cxs-ds-text); text-transform:none;
}
#main-nav .cxs-mm-group li a:hover,#main-nav .cxs-lcol li a:hover{ color:var(--cxs-ds-link); }
#main-nav .cxs-two{ columns:2; column-gap:24px; }
#main-nav .cxs-rich li a{ padding:8px 10px; margin:0 -10px; border-radius:var(--cxs-ds-radius-md); }
#main-nav .cxs-rich li a:hover{ background:var(--cxs-ds-indigo-50); }
#main-nav .cxs-rich b{ display:block; font-weight:var(--cxs-ds-weight-semibold); font-size:14.5px; color:var(--cxs-ds-text); }
#main-nav .cxs-rich span{ display:block; font-size:13px; color:var(--cxs-ds-text-muted); padding:0; }

/* Tabs (Courses) */
#main-nav .cxs-mm-tabs{ border-bottom:1px solid var(--cxs-ds-border); }
#main-nav .cxs-mm-tabs-in{ max-width:var(--cxs-ds-content-max); margin:0 auto; padding:14px var(--cxs-ds-space-lg) 0; display:flex; gap:6px; }
#main-nav .cxs-mm-tab{
	font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold);
	background:none; border:0; border-bottom:3px solid transparent; border-radius:0;
	padding:6px 12px 10px; margin:0; cursor:pointer; color:var(--cxs-ds-text-muted); box-shadow:none;
}
#main-nav .cxs-mm-tab.is-on{ color:var(--cxs-ds-indigo-700); border-bottom-color:var(--cxs-ds-gold); }

/* Side panel */
#main-nav .cxs-mm-side{ background:var(--cxs-ds-indigo-50); border-radius:var(--cxs-ds-radius-lg); padding:20px; align-self:start; }
#main-nav .cxs-mm-side-h{ font-weight:var(--cxs-ds-weight-semibold); font-size:15px; margin:0 0 4px; color:var(--cxs-ds-text); }
#main-nav .cxs-mm-side-p{ font-size:13px; line-height:1.55; color:var(--cxs-ds-text-muted); margin:0 0 12px; }
/* Panel buttons are SECONDARY (Indigo). Gold is reserved for the one primary
   action on screen, the "Upcoming public courses" button in the header row,
   so the two never compete when a panel is open. */
#main-nav .cxs-mm-cta{
	display:block; text-align:center; margin-top:12px; padding:11px;
	background:var(--cxs-ds-btn-secondary-bg); color:var(--cxs-ds-btn-secondary-text);
	font-weight:var(--cxs-ds-weight-semibold); font-size:var(--cxs-ds-text-small); border-radius:var(--cxs-ds-radius-md);
}
#main-nav .cxs-mm-cta:hover{ background:var(--cxs-ds-btn-secondary-bg-hover); color:var(--cxs-ds-btn-secondary-text); }
#main-nav .cxs-mm-more{ display:block; text-align:center; margin-top:10px; font-size:13.5px; font-weight:var(--cxs-ds-weight-medium); color:var(--cxs-ds-link); }
#main-nav .cxs-mm-more:hover{ color:var(--cxs-ds-link-hover); }

/* Length cards (side panel) and length columns */
#main-nav .cxs-len{
	display:grid; grid-template-columns:1fr auto; row-gap:1px; column-gap:10px; width:100%;
	text-align:left; cursor:pointer; margin:0 0 8px; padding:9px 12px;
	background:var(--cxs-ds-white); border:1px solid var(--cxs-ds-border); border-radius:var(--cxs-ds-radius-md); box-shadow:none;
}
#main-nav .cxs-len:hover{ border-color:var(--cxs-ds-indigo-300); }
#main-nav .cxs-len b,#main-nav .cxs-lhead b{ font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-indigo-700); }
#main-nav .cxs-len b{ font-size:14px; }
#main-nav .cxs-len em,#main-nav .cxs-lhead em{ grid-column:2; grid-row:1; align-self:baseline; font-style:normal; font-size:12.5px; font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-text); }
#main-nav .cxs-len span,#main-nav .cxs-lhead span{ grid-column:1 / 3; font-size:12.5px; color:var(--cxs-ds-text-muted); }
#main-nav .cxs-lcols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
#main-nav .cxs-lhead{ display:grid; grid-template-columns:1fr auto; column-gap:10px; border-bottom:2px solid var(--cxs-ds-indigo-100); padding-bottom:10px; margin-bottom:8px; }
#main-nav .cxs-lhead b{ font-size:17px; font-weight:var(--cxs-ds-weight-bold); }

/* ---------- Mobile drawer ---------- */
#main-nav .cxs-drawer{
	background:var(--cxs-ds-white); border-top:1px solid var(--cxs-ds-border);
	padding:4px var(--cxs-ds-space-lg) 20px;
	max-height:calc(100vh - 120px); overflow-y:auto; overscroll-behavior:contain;
	box-shadow:0 18px 36px color-mix(in srgb, var(--cxs-ds-indigo-900) 16%, transparent);
}
#main-nav .cxs-acc{ border-bottom:1px solid var(--cxs-ds-border); }
#main-nav .cxs-acc summary{
	list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
	font-weight:var(--cxs-ds-weight-semibold); font-size:16px; padding:14px 0; color:var(--cxs-ds-text);
}
#main-nav .cxs-acc summary::-webkit-details-marker{ display:none; }
#main-nav .cxs-acc summary::after{ content:"+"; color:var(--cxs-ds-indigo-600); font-size:22px; line-height:1; }
#main-nav .cxs-acc[open] summary::after{ content:"\2013"; }
#main-nav .cxs-mg{ padding:0 0 12px; }
#main-nav .cxs-mg-h a,#main-nav .cxs-mg-h span{
	display:block; font-size:12px; font-weight:var(--cxs-ds-weight-semibold); letter-spacing:.08em; text-transform:uppercase;
	color:var(--cxs-ds-indigo-700); margin:6px 0 4px;
}
#main-nav .cxs-mg > a,#main-nav .cxs-mg > span{ display:block; padding:8px 0; font-size:15px; color:var(--cxs-ds-text); }
#main-nav .cxs-m-link{ display:block; padding:14px 0; font-weight:var(--cxs-ds-weight-semibold); font-size:16px; border-bottom:1px solid var(--cxs-ds-border); color:var(--cxs-ds-text); }
#main-nav .cxs-m-cta{
	display:block; margin-top:16px; padding:14px; text-align:center;
	background:var(--cxs-ds-btn-primary-bg); color:var(--cxs-ds-btn-primary-text);
	font-weight:var(--cxs-ds-weight-semibold); border-radius:var(--cxs-ds-radius-md);
}

/* ---------- Responsive ---------- */
@media (max-width:1199px){
	#main-nav .cxs-nav-btn{ padding:10px 9px; font-size:var(--cxs-ds-text-body); }
	#main-nav .cxs-nav-row{ gap:var(--cxs-ds-space-md); }
	#main-nav .cxs-mm-inner{ grid-template-columns:minmax(0,1fr) 250px; gap:28px; }
}
@media (max-width:991px){
	#main-nav .cxs-nav-main,#main-nav .cxs-nav-cta,#main-nav .cxs-mm-panel{ display:none !important; }
	#main-nav .cxs-burger{ display:block; }
}
@media (max-width:767px){
	#main-nav .cxs-nav-row{ height:68px; padding:0 var(--cxs-ds-space-md); }
	#main-nav .cxs-brand img{ height:32px; }
	#main-nav .cxs-drawer{ padding:4px var(--cxs-ds-space-md) 20px; }
}
@media (prefers-reduced-motion:reduce){
	#main-nav .cxs-nav *{ transition:none !important; }
}