/**
 * Sectors mega menu panel.
 *
 * Almost nothing is needed. The theme's compiled stylesheet keys the whole
 * panel off `.mega-panel` rather than off `#mega-panel-service`:
 *
 *   .mega-panel                        the fixed shell, radius, slide-in
 *   .mega-panel.open                   the open state
 *   .mega-panel-inner / .menu-title    padding and layout
 *   .menu-intro / .services-wrap       the three columns
 *   .service-level-one                 left column, link colour and size
 *   .service-level-two                 right column, white text, and the
 *                                      :before that draws the navy backdrop
 *   .service-children                  row hover states
 *   .service-children-wrap[.show]      switching between groups, with fadeIn
 *   .service-parent-link.active        the blue active group
 *
 * So this panel inherits all of it by reusing those class names. The only
 * ID-scoped rules in the theme are for the services panel's third-level
 * accordion, which sectors do not have.
 *
 * What is left are the two rules the theme only ever wrote ID-scoped, and a
 * fallback for the unlikely case that the panel cannot be moved into the
 * header.
 */

/*
 * The theme sets these under `#mega-panel-service` only, so no panel but its
 * own picks them up. Scoped here to `.arth-mega-sectors`, the class both of
 * this plugin's panels carry — not to one panel's id, which is what left the
 * Audiences links rendering navy on navy and therefore invisible.
 */
.arth-mega-sectors .service-children-wrap .service-children a {
	color: #fff;
	font-weight: 500;
	line-height: 130%;
	text-decoration: none;
}

.arth-mega-sectors .service-parent-link.active {
	color: #2566c1;
}

/*
 * The links stay white on hover. The theme turns them #2566c1, which is a blue
 * on a navy ground — legible enough to pass but not by much, and it reads as
 * the text dimming rather than lighting up. The chevron still shifts to blue,
 * so the row keeps its hover cue.
 */
.arth-mega-sectors .service-children:hover a,
.arth-mega-sectors .service-children:focus-within a {
	color: #fff;
}

/*
 * The chevron beside the Audiences menu item.
 *
 * The theme's walker only draws one for items that have child menu items, and
 * Audiences has none — it opens a panel instead. Drawn here rather than given
 * a dummy child item, which would put a stray entry in the menu.
 *
 * Matches the others: the walker's chevron is a down arrow turned -90deg by
 * `header .dropdown-arrow`, so this one points the same way at the same size.
 */
header .mega-parent-audiences > a::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 0.36em;
	height: 0.36em;
	margin-left: 0.5em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
}

/*
 * Fallback only. If there is no `header .relative` to move the panel into, the
 * z-index: -1 the theme relies on would leave it behind the page, so drop the
 * stacking trick and sit above the content instead.
 */
.mega-panel.arth-mega-sectors--detached {
	position: fixed;
	z-index: 999;
}

/* ---------------------------------------------------------------------------
 * Sectors panel for the mobile menu
 *
 * The theme scopes the panel's positioning to `#mobile-child-menu`, an ID that
 * can only exist once, so those values are reproduced here. Everything inside
 * — buttons, arrows, the large link type — comes from the theme's own
 * `.mobile-child-wrap` and `.mobile-child-services` rules.
 * ------------------------------------------------------------------------ */

.arth-mobile-sectors {
	position: fixed;
	top: 3.4rem;
	right: 0;
	width: 100%;
	height: 100vh;
	padding-top: 2.7rem;
	padding-left: clamp(1.5rem, 1rem + 1vw, 2rem);
	padding-right: clamp(1.5rem, 1rem + 1vw, 2rem);
	background-color: #fff;
	border-radius: 30px 0 0 0;
	transform: translateX(100%);
	transition: transform 0.4s ease;
	z-index: 9999;
}

.arth-mobile-sectors.is-open {
	transform: translateX(0);
}

.arth-mobile-sectors .arth-mobile-sectors__panel {
	position: absolute;
	inset: 0;
	padding-top: 2.7rem;
	padding-left: clamp(1.5rem, 1rem + 1vw, 2rem);
	padding-right: clamp(1.5rem, 1rem + 1vw, 2rem);
	background-color: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Group panels slide in over the root, so Back reveals it again underneath. */
.arth-mobile-sectors [data-arth-panel="group"] {
	transform: translateX(100%);
	transition: transform 0.4s ease;
	z-index: 1;
}

.arth-mobile-sectors [data-arth-panel="group"].is-open {
	transform: translateX(0);
}

.arth-mobile-sectors .mobile-child-services {
	list-style: none;
	padding-left: 0;
}

.arth-mobile-sectors .mobile-child-services li {
	list-style: none;
	margin-left: 0;
}

.arth-mobile-sectors .mobile-service-parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ---------------------------------------------------------------------------
 * Level two — the group panel
 *
 * Reproduces what the theme sets under `#mobile-child-menu
 * .mobile-child-panel`: navy ground, white heading, white pill for Back, and
 * white rows with a chevron. Same values, different scope, because that ID can
 * only exist once on the page.
 * ------------------------------------------------------------------------ */

.arth-mobile-sectors .mobile-child-panel {
	background-color: #0e1433;
}

.arth-mobile-sectors .mobile-child-panel h2 {
	margin-top: 2rem;
	color: #fff;
}

.arth-mobile-sectors .mobile-child-panel button {
	all: unset;
}

.arth-mobile-sectors .mobile-child-panel .cta-button {
	display: inline-block;
	padding: 0.9rem 1.5rem;
	background-color: #fff;
	color: #0e1433;
	font-size: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);
	font-weight: 500;
	border-radius: 3px 24px 3px 24px;
	cursor: pointer;
}

.arth-mobile-sectors .mobile-grandchild-services {
	list-style: none;
	padding-left: 0;
}

/*
 * The row rule the theme only applies to its accordion panels — a hairline
 * between rows. Sectors have no accordion, but the separator is what makes the
 * list readable, and it is what the Services panel shows.
 */
.arth-mobile-sectors .mobile-grandchild-services > li {
	display: block;
	list-style: none;
	margin-left: 0;
	margin-bottom: 0.75rem;
	padding-bottom: 10px;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.arth-mobile-sectors .mobile-grandchild-services a {
	display: flex;
	gap: 1rem;
	padding: 8px 0;
	color: #fff;
	font-size: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);
	text-decoration: none;
}

.arth-mobile-sectors .mobile-grandchild-services svg {
	flex: 0 0 auto;
}

/* Desktop never sees it — the burger menu is mobile-only. */
@media (min-width: 769px) {
	.arth-mobile-sectors {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * "Who We Help" panel
 *
 * The panel itself needs almost nothing: it uses the same `.menu-intro`,
 * `.service-level-one` and `.service-level-two` classes as Sectors, so the
 * column widths, the white-then-navy backgrounds, the chevrons and the type
 * all come from the theme. Only the card grid in the navy column is new.
 * ------------------------------------------------------------------------ */

/*
 * List colours, stated rather than inherited.
 *
 * The theme already sets `.mega-panel .service-parent-link { color: #0e1433 }`
 * and by the cascade that should win here too, but the entries were rendering
 * blue at rest - LiteSpeed's CSS optimisation reorders and inlines rules, so
 * which of two same-specificity declarations lands last is not reliable. These
 * are more specific, so the resting state cannot drift either way.
 */
.arth-wwh .service-level-one .service-parent-link {
	color: #0e1433;
}

.arth-wwh .service-level-one .service-parent-link path {
	stroke: #0e1433;
	transition: stroke 0.3s ease;
}

.arth-wwh .service-level-one .service-parent-link.active,
.arth-wwh .service-level-one .service-parent-link:hover,
.arth-wwh .service-level-one .service-parent-link:focus-visible {
	color: #2566c1;
}

.arth-wwh .service-level-one .service-parent-link.active path,
.arth-wwh .service-level-one .service-parent-link:hover path,
.arth-wwh .service-level-one .service-parent-link:focus-visible path {
	stroke: #2566c1;
}

/* ---- The card grid ----
 *
 * `auto-fit` with a minimum width is what makes this take any number of
 * entries: three across when there is room, dropping to two and then one as
 * the column narrows, with no breakpoint per count to maintain. Six entries or
 * sixteen, the grid reflows on its own.
 */
.arth-wwh__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	align-content: start;
}

.arth-wwh__card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 3px 24px 3px 24px;
	text-decoration: none;
	background-color: #0b1029;
}

.arth-wwh__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.arth-wwh__card:hover img,
.arth-wwh__card:focus-visible img {
	transform: scale(1.05);
}

/*
 * A gradient rather than a flat overlay: the titles sit low on the card, and
 * the photographs are light at the top and busy at the bottom.
 */
.arth-wwh__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 20, 51, 0.8) 0%, rgba(14, 20, 51, 0.15) 55%, rgba(14, 20, 51, 0) 100%);
	pointer-events: none;
}

/* Without a photo the card still needs to read as a card, not a gap. */
.arth-wwh__card--plain {
	background-color: #1b2347;
}

.arth-wwh__card--plain::after {
	content: none;
}

.arth-wwh__card--plain .arth-wwh__card-title {
	position: static;
	display: flex;
	align-items: flex-end;
	height: 100%;
	padding: 1rem;
}

.arth-wwh__card-title {
	position: absolute;
	right: 1rem;
	bottom: 0.9rem;
	left: 1rem;
	z-index: 1;
	color: #fff;
	font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

/* The same cards inside the mobile group panel. */
.arth-mobile-wwh .arth-wwh__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.75rem;
}