/* ==========================================================================
   CAP Mega Menu — styles v1.1
   Token values extracted verbatim from the live site's computed styles and
   authored CSS rules (July 2026 console extraction), so the new menu is
   visually indistinguishable from the current Divi implementation.
   ========================================================================== */

.cap-mega-nav {
	/* --- Exact tokens from live-site extraction --- */
	--cap-mm-accent: #fcab17;          /* card title bars, panel top border  */
	--cap-mm-ink: #333333;             /* top-level link colour              */
	--cap-mm-black: #000000;           /* card title text, desc text         */
	--cap-mm-hover-dark: #0b6159;      /* rgb(11,97,89): link hover + title hover bg */
	--cap-mm-teal: #31c5b7;            /* rgb(49,197,183): JOIN NOW pill     */
	--cap-mm-teal-light: #32c5b7;      /* rgb(50,197,183): sub-link hover    */
	--cap-mm-card-bg: #f8f4f3;         /* rgb(248,244,243): warm beige card  */
	--cap-mm-panel-bg: #ffffff;
	--cap-mm-panel-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
	--cap-mm-pill-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	--cap-mm-font: var(--et_global_body_font, 'Moderat - Thin', sans-serif);
	--cap-mm-z: 9999;

	position: relative;
	width: 100%;
	min-width: 0;
	font-family: var(--cap-mm-font);
	color: var(--cap-mm-ink);
	z-index: var(--cap-mm-z);
}

/* Hard list reset — beats theme/Divi content-area list styling wherever
   the shortcode is placed (test pages included). */
.cap-mega-nav ul,
.cap-mega-nav ol {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.cap-mega-nav li {
	list-style: none !important;
	list-style-type: none !important;
}
.cap-mega-nav li::marker { content: none !important; }

/* Panel that has been switched to fixed positioning by the clip-escape JS */
.cap-mega-nav__panel.cap-mm-panel--fixed {
	position: fixed;
	left: var(--cap-mm-fixed-left, 0);
	top: var(--cap-mm-fixed-top, 0);
	width: var(--cap-mm-fixed-width, 100%);
	right: auto;
}

/* --------------------------------------------------------------------------
   Top-level bar — matches: ul centred, ~22px item spacing, 16px/600 links,
   #333 → #0B6159 hover with 0.4s ease-in-out
   -------------------------------------------------------------------------- */
.cap-mega-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* Distribute items across the full column width so the bar reads
	   as filling the space, with JOIN NOW flush to the right edge —
	   matching how the original menu (item padding + search icon)
	   occupied its row. gap acts as the minimum spacing floor. */
	justify-content: space-between;
	gap: 22px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cap-mega-nav__item { position: static; }

.cap-mega-nav__top {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.cap-mega-nav__link {
	display: inline-block;
	padding: 8px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 14px;
	text-decoration: none;
	color: var(--cap-mm-ink);
	white-space: nowrap;
	transition: 0.4s ease-in-out;
}
.cap-mega-nav__link:hover,
.cap-mega-nav__item--open > .cap-mega-nav__top .cap-mega-nav__link {
	color: var(--cap-mm-hover-dark);
	opacity: 1;
}

.cap-mega-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: 0.4s ease-in-out;
}
.cap-mega-nav__toggle:hover { color: var(--cap-mm-hover-dark); }
.cap-mega-nav__chev { transition: transform 0.2s ease; }
.cap-mega-nav__toggle[aria-expanded="true"] .cap-mega-nav__chev {
	transform: rotate(180deg);
}

/* CTA pill (JOIN NOW) — teal #31C5B7, white uppercase, 15px 40px, radius 50px */
.cap-mega-nav__item--cta .cap-mega-nav__link {
	background: var(--cap-mm-teal);
	color: #ffffff;
	text-transform: uppercase;
	padding: 15px 40px;
	border-radius: 50px;
	line-height: 9px;
	text-align: center;
}
.cap-mega-nav__item--cta .cap-mega-nav__link:hover {
	background: var(--cap-mm-teal);
	color: #ffffff;
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Mega panel — white, 30px padding, 3px amber top border,
   0 2px 5px shadow, anchored at calc(100% - 1px)
   -------------------------------------------------------------------------- */
.cap-mega-nav__panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px);
	background: var(--cap-mm-panel-bg);
	border-top: 3px solid var(--cap-mm-accent);
	box-shadow: var(--cap-mm-panel-shadow);
	padding: 30px;
	z-index: var(--cap-mm-z);
	text-align: left;
}

/* Column scheme mirrors the current mega-menu-parent-N widths:
   1 card → 100%, 2 → 50%, 3 → 33.33%, 4+ → 25%.
   Card gutters were margin 0 10px 20px → 20px grid gap. */
.cap-mega-nav__grid {
	display: grid;
	gap: 20px;
	align-items: start;
	grid-template-columns: repeat(4, 1fr);
}
.cap-mega-nav__grid[data-cols="1"] { grid-template-columns: 1fr; }
.cap-mega-nav__grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.cap-mega-nav__grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   Cards — beige #F8F4F3, radius 8px.
   Title bar: amber bg, BLACK text, 700, 16px, line-height 2, 0 20px padding,
   radius "8px 0" (top-left + bottom-right), hover inverts to
   dark teal bg + white text.
   -------------------------------------------------------------------------- */
.cap-mega-card-group {
	background: var(--cap-mm-card-bg);
	border-radius: 8px;
	overflow: hidden;
}

.cap-mega-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cap-mega-card__title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--cap-mm-accent);
	color: var(--cap-mm-black);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	padding: 0 20px;
	border-radius: 8px 0;
	border-bottom: 1px solid var(--cap-mm-accent);
	transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out,
		color 0.2s ease-in-out;
}
.cap-mega-card:hover .cap-mega-card__title,
.cap-mega-card:focus-visible .cap-mega-card__title {
	background: var(--cap-mm-hover-dark);
	color: #ffffff;
}

/* Description — rendered as the white pill box, matching the current
   sub-menu link boxes: white bg, radius 6px, 8px 15px padding,
   0 1px 2px shadow. Text matches the <small> styling: 14px/600 black. */
.cap-mega-card__desc {
	display: block;
	margin: 4.8px 6.4px 5px;
	padding: 8px 15px;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: var(--cap-mm-pill-shadow);
	color: var(--cap-mm-black);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	transition: 0.2s;
}

/* Third-level real links (e.g. Publications → E-Bulletins):
   white pill, TEAL-DARK text 16px/600, hover text → light teal */
.cap-mega-card__sublist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 4.8px 6.4px;
	list-style: none;
}
.cap-mega-card__sublist li { line-height: 1.1; }
.cap-mega-card__sublist a {
	display: block;
	padding: 8px 15px;
	margin-bottom: 0;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: var(--cap-mm-pill-shadow);
	color: var(--cap-mm-hover-dark);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	transition: 0.2s;
}
.cap-mega-card__sublist a:hover {
	color: var(--cap-mm-teal-light);
	background: #ffffff;
	box-shadow: var(--cap-mm-pill-shadow);
}
.cap-mega-card__subdesc {
	display: block;
	margin-top: 6px;
	color: var(--cap-mm-black);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* Open state */
.cap-mega-nav__item--open > .cap-mega-nav__panel[hidden] { display: block; }
.cap-mega-nav__item--open > .cap-mega-nav__panel {
	animation: cap-mm-in 0.16s ease both;
}
@keyframes cap-mm-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.cap-mega-nav__panel,
	.cap-mega-card__title,
	.cap-mega-nav__link,
	.cap-mega-nav__chev { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Hamburger (hidden on desktop)
   -------------------------------------------------------------------------- */
.cap-mega-nav__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	margin-left: auto;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.cap-mega-nav__hamburger span {
	display: block;
	height: 3px;
	width: 100%;
	background: var(--cap-mm-accent); /* matches --gcid-primary-color used by
	                                     the current mobile menu bar icon */
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.cap-mega-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cap-mega-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cap-mega-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile / tablet ≤980px — accordion, styled after the current #mobile_menu1
   card treatment: white cards, 4px amber left accent on section links.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.cap-mega-nav__hamburger { display: flex; }

	.cap-mega-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cap-mm-panel-bg);
		border-top: 3px solid var(--cap-mm-accent);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.14);
		max-height: calc(100vh - 120px);
		max-height: calc(100dvh - 120px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cap-mega-nav--mobile-open .cap-mega-nav__list {
		display: flex;
		justify-content: flex-start;
	}

	.cap-mega-nav__top {
		justify-content: space-between;
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		padding: 0 16px;
	}
	.cap-mega-nav__link {
		position: relative;
		padding: 14px 0 14px 12px;
		line-height: 1.3;
		white-space: normal;
	}
	.cap-mega-nav__link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 10px;
		bottom: 10px;
		width: 4px;
		border-radius: 2px;
		background: var(--cap-mm-accent);
	}
	.cap-mega-nav__item--cta .cap-mega-nav__link::before { display: none; }
	.cap-mega-nav__toggle { width: 44px; height: 44px; }

	.cap-mega-nav__panel {
		position: static;
		border-top: 0;
		box-shadow: none;
		padding: 12px 16px 16px;
		background: var(--cap-mm-card-bg);
	}
	.cap-mega-nav__grid,
	.cap-mega-nav__grid[data-cols] { grid-template-columns: 1fr; }

	.cap-mega-card-group {
		background: #ffffff;
		border: 1px solid #eeeeee;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	}

	.cap-mega-nav__item--cta { padding: 16px; }
	.cap-mega-nav__item--cta .cap-mega-nav__link {
		display: block;
		padding: 15px 40px;
	}
}

/* --------------------------------------------------------------------------
   Fallback nav (only shown if the menu itself could not be loaded)
   -------------------------------------------------------------------------- */
.cap-mega-nav--fallback .cap-mega-nav__list { justify-content: center; }
.cap-mega-nav--fallback a {
	color: var(--cap-mm-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	padding: 8px 11px;
	display: inline-block;
	transition: 0.4s ease-in-out;
}
.cap-mega-nav--fallback a:hover { color: var(--cap-mm-hover-dark); }