/* ============================================================
   Primary mega-menu — desktop dropdown + mobile accordion.
   Renders template-parts/header/mega-menu.php. Desktop reveal is
   pure CSS (:hover / :focus-within); mobile toggling is mega-menu.js.
   ============================================================ */

.mega-nav { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- */
/* Desktop                                                          */
/* ---------------------------------------------------------------- */
.mega-nav--desktop { display: flex; align-items: center; gap: .1rem; position: relative; }
.mega-nav--desktop .mega-item { position: relative; }

.mega-nav--desktop .mega-item-head { display: flex; align-items: center; }
.mega-nav--desktop .mega-link {
	padding: .5rem .7rem; color: #111; font-weight: 500; font-size: .95rem;
	text-decoration: none; white-space: nowrap; border-radius: 8px;
}
.mega-nav--desktop .mega-item:hover > .mega-item-head .mega-link,
.mega-nav--desktop .mega-link:focus-visible { background: #f4f4f4; }

.mega-nav--desktop .mega-caret-btn {
	background: none; border: 0; padding: 0; margin-left: .3rem;
	cursor: pointer; display: inline-flex; align-items: center;
}
/* CSS chevron (font-independent — the ▾ glyph renders badly in Tomato Grotesk) */
.mega-nav--desktop .mega-caret {
	font-size: 0; line-height: 0; width: 6px; height: 6px;
	border: solid #111; border-width: 0 1.4px 1.4px 0;
	transform: translateY(-2px) rotate(45deg); opacity: .5;
	transition: transform .15s ease;
}
.mega-nav--desktop .mega-item:hover .mega-caret,
.mega-nav--desktop .mega-item:focus-within .mega-caret {
	transform: translateY(0) rotate(225deg); opacity: .8;
}

.mega-nav--desktop .contact-cta {
	background: #C2FFC2; border-radius: 999px; padding: .55rem 1.1rem;
	color: #111; font-weight: 500; text-decoration: none; margin-left: .4rem;
	transition: background-color .15s ease;
}
.mega-nav--desktop .contact-cta:hover { background: #b0f5b0; }

/* Panels — hidden until hover / keyboard focus within the item */
.mega-nav--desktop .mega-panel {
	position: absolute; top: calc(100% + 12px); left: 0;
	background: #fff; border: 1px solid #ededed; border-radius: 16px;
	box-shadow: 0 24px 48px -12px rgba(0,0,0,.18); padding: 1.1rem; z-index: 60;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.mega-nav--desktop .mega-item.has-panel:hover > .mega-panel,
.mega-nav--desktop .mega-item.has-panel:focus-within > .mega-panel {
	opacity: 1; visibility: visible; transform: translateY(0);
}
/* invisible bridge so the pointer can cross the gap without closing */
.mega-nav--desktop .mega-item.has-panel::after {
	content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}

/* Wide (mega) panels centre under the nav so they never overflow the edge */
.mega-nav--desktop .mega-item.has-mega { position: static; }
.mega-nav--desktop .mega-item.has-mega > .mega-panel {
	left: 50%; transform: translate(-50%, 6px);
}
.mega-nav--desktop .mega-item.has-mega:hover > .mega-panel,
.mega-nav--desktop .mega-item.has-mega:focus-within > .mega-panel {
	transform: translate(-50%, 0);
}

.mega-simple { min-width: 210px; display: flex; flex-direction: column; }
.mega-simple a {
	display: block; padding: .5rem .6rem; border-radius: 8px;
	color: #1f1f1f; text-decoration: none; font-size: .9rem; font-weight: 500;
}
.mega-simple a:hover { background: #f5fdf5; color: #22C62C; }

/* Give the wide panel a fixed width so the group grid can lay out; an
   absolutely-positioned shrink-to-fit panel otherwise collapses the
   flex-wrap columns into a single tall column. */
.mega-nav--desktop .mega-item.has-mega > .mega-panel { width: 640px; }
.mega-nav--desktop .mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem 1.75rem; }
.mega-col { min-width: 0; }
.mega-col-title {
	display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
	color: #9a9a9a; font-weight: 700; margin: .3rem .55rem .4rem;
}
.mega-col ul li a {
	display: block; padding: .3rem .55rem; border-radius: 7px;
	color: #1f1f1f; text-decoration: none; font-size: .875rem;
}
.mega-col ul li a:hover { background: #f5fdf5; color: #22C62C; }
.mega-more { border-top: 1px solid #f0f0f0; margin-top: .5rem; padding-top: .55rem; }
.mega-more a { color: #22C62C; font-weight: 600; font-size: .85rem; text-decoration: none; padding: .25rem .55rem; }

/* Flat panel (Customer cases) — a plain 3-column grid of links, no groups. */
.mega-nav--desktop .mega-flat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem 1.75rem; }
.mega-flat li a { display: block; padding: .3rem .55rem; border-radius: 7px; color: #1f1f1f; text-decoration: none; font-size: .875rem; }
.mega-flat li a:hover { background: #f5fdf5; color: #22C62C; }

/* ---------------------------------------------------------------- */
/* Mobile (accordion)                                               */
/* ---------------------------------------------------------------- */
.mega-nav--mobile { display: block; }
.mega-nav--mobile .mega-item { border-bottom: 1px solid #f0f0f0; }
.mega-nav--mobile .mega-item-head { display: flex; align-items: center; justify-content: space-between; }
.mega-nav--mobile .mega-link {
	display: block; padding: .85rem 0; color: #111; font-size: 1.05rem;
	font-weight: 600; text-decoration: none; flex: 1;
}
.mega-nav--mobile .mega-caret-btn { background: none; border: 0; padding: .85rem .5rem; cursor: pointer; }
.mega-nav--mobile .mega-caret { display: inline-block; font-size: .9rem; transition: transform .2s ease; }
.mega-nav--mobile .mega-item.is-open .mega-caret { transform: rotate(180deg); }

.mega-nav--mobile .mega-panel { display: none; padding: 0 0 .85rem .25rem; }
.mega-nav--mobile .mega-item.is-open > .mega-panel { display: block; }
.mega-nav--mobile .mega-simple a { padding: .5rem 0; font-size: .95rem; }
.mega-nav--mobile .mega-cols { display: block; }
.mega-nav--mobile .mega-flat li a { padding: .4rem 0; font-size: .95rem; }
.mega-nav--mobile .mega-col { margin-bottom: .7rem; }
.mega-nav--mobile .mega-col ul li a { padding: .35rem 0; }
.mega-nav--mobile .mega-more { margin-top: .3rem; }
.mega-nav--mobile .mega-item--cta { border-bottom: 0; }
.mega-nav--mobile .contact-cta {
	display: inline-block; background: #C2FFC2; border-radius: 999px;
	padding: .6rem 1.3rem; margin-top: .9rem; color: #111; font-weight: 600; text-decoration: none;
}