/* ==========================================================================
   Blocksy mega-menu interaction safety
   ========================================================================== */

/*
 * Let Blocksy keep full control of opening/closing the dropdown.
 *
 * The important fix is to disable pointer hit-testing not only on the closed
 * .sub-menu itself, but on EVERY descendant inside it. The active gallery panel
 * intentionally has pointer-events:auto, which can otherwise make an invisible
 * closed mega menu catch the mouse over page content.
 */
[data-device="desktop"] .arbu-mega-parent:not(.ct-active) > .sub-menu,
[data-device="desktop"] .arbu-mega-parent:not(.ct-active) > .sub-menu * {
	pointer-events: none !important;
}

/*
 * Once Blocksy genuinely activates the top-level menu, normal pointer behaviour
 * is restored. Individual inactive image panels remain non-interactive below.
 */
[data-device="desktop"] .arbu-mega-parent.ct-active > .sub-menu {
	pointer-events: auto !important;
}


/* ==========================================================================
   Reusable interactive mega menus
   ========================================================================== */

.arbu-dna-menu,
.arbu-switch-menu {
	display: grid;
	grid-template-columns: minmax(190px, 0.3fr) minmax(0, 0.7fr);
	gap: clamp(2.5rem, 5vw, 5.5rem);
	align-items: flex-start;
	width: 100%;
}


/* Navigation
   ========================================================================== */

.arbu-dna-menu__nav,
.arbu-switch-menu__nav {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
}

.arbu-dna-trigger,
.arbu-switch-trigger {
	position: relative;
	width: 100%;
	margin: 0 !important;
	padding: 0.7em 0;
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
	transition: color 160ms ease;
}

.arbu-dna-trigger:hover,
.arbu-dna-trigger:focus-within,
.arbu-switch-trigger:hover,
.arbu-switch-trigger:focus-within {
	color: rgb(37, 49, 146);
}

/* Small editorial indicator — only for the active item. */
.arbu-dna-trigger.is-active::after,
.arbu-switch-trigger.is-active::after {
	content: "→";
	display: inline-block;
	margin-left: 0.45rem;
	font-size: 0.9em;
	font-weight: 400;
	transition: transform 160ms ease;
}

.arbu-dna-trigger.is-active:hover::after,
.arbu-switch-trigger.is-active:hover::after {
	transform: translateX(0.15rem);
}

.arbu-dna-trigger a,
.arbu-switch-trigger a {
	color: inherit;
	text-decoration: none;
}

.arbu-dna-trigger a:hover,
.arbu-dna-trigger a:focus,
.arbu-switch-trigger a:hover,
.arbu-switch-trigger a:focus {
	color: inherit;
}


/* Galleries
   ========================================================================== */

.arbu-dna-menu__visuals,
.arbu-switch-menu__visuals {
	display: grid;
	min-width: 0;
}

.arbu-dna-panel,
.arbu-switch-panel {
	grid-area: 1 / 1;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.65rem, 1vw, 1rem);
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 200ms ease,
		visibility 200ms ease;
}

.arbu-dna-panel.is-active,
.arbu-switch-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* Images — force 4:5 regardless of Gutenberg's available ratios
   ========================================================================== */

.arbu-dna-image,
.arbu-switch-image {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0 !important;
	overflow: hidden;
}

.arbu-dna-image img,
.arbu-switch-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
}


/* Smaller desktop / tablet
   ========================================================================== */

@media (max-width: 1024px) {
	.arbu-dna-menu,
	.arbu-switch-menu {
		grid-template-columns: minmax(170px, 0.32fr) minmax(0, 0.68fr);
		gap: 2rem;
	}
}

/* ==========================================================================
   Shop mega menu
   ========================================================================== */

.arbu-shop-menu {
	display: grid;
	grid-template-columns:
		minmax(120px, 0.7fr)
		minmax(180px, 1.1fr)
		minmax(150px, 0.9fr)
		minmax(0, 1fr)
		minmax(0, 1fr);

	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: start;
	width: 100%;
}

.arbu-shop-menu__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0;
}

#header .arbu-shop-menu__column h2,
#header .arbu-shop-menu__column h3 {
	margin: 0 0 0.7rem !important;
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
} 

.arbu-shop-menu__column p {
	margin: 0 !important;
}

.arbu-shop-menu__column a {
	display: block;
	padding: 0.32rem 0;
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	transition: color 160ms ease;
}

.arbu-shop-menu__column a:hover,
.arbu-shop-menu__column a:focus {
	color: rgb(37, 49, 146);
}

.arbu-shop-menu__image {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0 !important;
	overflow: hidden;
}

.arbu-shop-menu__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.arbu-shop-menu__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;

	transition: transform 300ms ease;
}

.arbu-shop-menu__image:hover img {
	transform: scale(1.025);
}

@media (max-width: 1180px) {
	.arbu-shop-menu {
		grid-template-columns:
			minmax(100px, 0.6fr)
			minmax(160px, 1fr)
			minmax(140px, 0.9fr)
			minmax(0, 0.9fr)
			minmax(0, 0.9fr);

		gap: 1.5rem;
	}
}

.arbu-shop-menu__links {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.arbu-shop-menu__links li {
	margin: 0;
	padding: 0;
	padding: 0.32rem 0;
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	transition: color 160ms ease;
}

.arbu-shop-menu__links a {
	display: block;
	color: var(--theme-palette-color-2);
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}

.arbu-shop-menu__links a:hover,
.arbu-shop-menu__links a:focus,
.arbu-shop-menu__links li:hover,
.arbu-shop-menu__links li:focus {
	color: rgb(37, 49, 146);
}