/* ==========================================================================
   Custom Nav Overlay
   ========================================================================== */

/* Reset so the theme/Elementor's default button styling (background,
   border, border-radius, padding) can't bleed into these — they render
   as bare icon buttons only. */
.cno-toggle,
.cno-close,
.cno-back {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
}

.cno-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: currentColor;
	z-index: 10;
}
/* The overlay's own close (X) button takes over once it's open, so the
   header toggle hides rather than sitting on top of it. */
body.cno-locked .cno-toggle {
	opacity: 0;
	pointer-events: none;
}

.cno-toggle-bars {
	display: block;
	width: 24px;
	height: 16px;
	position: relative;
}
.cno-toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.5s ease, opacity 0.5s ease;
}
.cno-toggle-bars span:nth-child(1) { top: 0; }
.cno-toggle-bars span:nth-child(2) { top: 7px; }
.cno-toggle-bars span:nth-child(3) { top: 14px; }
.cno-toggle[aria-expanded="true"] .cno-toggle-bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.cno-toggle[aria-expanded="true"] .cno-toggle-bars span:nth-child(2) {
	opacity: 0;
}
.cno-toggle[aria-expanded="true"] .cno-toggle-bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.cno-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 99999;
	display: flex;
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.5s;
	background: #fff;
}
.cno-overlay.is-open {
	visibility: visible;
	transform: translateY(0);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.cno-close {
	position: absolute;
	top: 24px;
	right: 32px;
	z-index: 10;
	color: #fff;
}

/* Image column */
.cno-image-col {
	position: relative;
	width: 42%;
	flex: 0 0 42%;
	overflow: hidden;
	background: #eee;
}
.cno-panel-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.cno-panel-image.cno-panel-image-active {
	opacity: 1;
}

/* Content column */
.cno-content-col {
	position: relative;
	flex: 1 1 auto;
	overflow-y: auto;
}

.cno-panel {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	padding: 100px 64px 40px;
	background: var(--cno-child-bg, #85B09A);
	color: var(--cno-text-colour, #ffffff) !important;
	opacity: 0;
	transition: opacity 0.5s ease;
	overflow-y: auto;
}
#panel-root {
	background: var(--cno-parent-bg, #013857);
}
.cno-panel.is-active {
	display: flex;
	opacity: 1;
}

.cno-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	border: 1px solid color-mix(in srgb, var(--cno-text-colour, #fff) 50%, transparent);
	border-radius: 999px;
	color: var(--cno-text-colour, #ffffff) !important;
	padding: 10px 20px;
	font-size: 14px;
}
.cno-back:hover {
	border-color: var(--cno-text-colour, #ffffff);
}

.cno-panel-title {
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 22px;
	color: var(--cno-text-colour, #ffffff) !important;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--cno-text-colour, #fff) 25%, transparent);
}

.cno-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
	row-gap: 28px;
}

.cno-item .cno-link,
.cno-item .cno-link:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cno-text-colour, #ffffff) !important;
	text-decoration: none;
	font-family: var(--cno-font-family, inherit);
	font-size: var(--cno-font-size, 17px);
	font-weight: var(--cno-font-weight, 600);
	padding-left: 0;
	transition: padding-left 0.5s ease;
}
/* Hover (mouse only) reveals the arrow and shifts the text. Keyboard focus
   gets its own plain outline below — intentionally NOT tied to this, so
   the auto-focus the JS sets when a panel opens doesn't visually look
   like every panel's first item is permanently hovered (this was the
   cause of the arrow overlapping text on touch devices — there's no
   mouse hover on touch to pair with the text shift). */
.cno-item .cno-link:hover {
	padding-left: 22px;
	text-decoration: underline;
}
.cno-item .cno-link:hover .cno-hover-arrow {
	opacity: 1;
	transform: translateX(0);
}
.cno-item .cno-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.cno-hover-arrow {
	position: absolute;
	left: 0;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	color: var(--cno-hover-arrow-colour, #ffffff);
}
.cno-hover-arrow svg {
	width: var(--cno-hover-arrow-size, 14px);
	height: var(--cno-hover-arrow-size, 14px);
}
.cno-arrow-icon {
	color: var(--cno-arrow-colour, #8fbf9f);
	display: inline-flex;
}
.cno-arrow-icon svg {
	width: var(--cno-arrow-size, 13px);
	height: var(--cno-arrow-size, 13px);
}

.cno-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--cno-text-colour, #fff) 25%, transparent);
}
.cno-contact {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--cno-text-colour, #ffffff) !important;
}
.cno-contact-label {
	color: var(--cno-arrow-colour, #8fbf9f);
	margin-right: 4px;
}
.cno-contact a,
.cno-contact a:visited {
	color: var(--cno-text-colour, #ffffff) !important;
	font-weight: 700;
	text-decoration: none;
	margin-right: 24px;
}
.cno-social {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--cno-text-colour, #fff) 25%, transparent);
	color: var(--cno-text-colour, #ffffff) !important;
}
.cno-social-label {
	color: var(--cno-arrow-colour, #8fbf9f);
	margin-right: 4px;
}
.cno-social-icon,
.cno-social-icon:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: #fff;
	color: var(--cno-parent-bg, #013857) !important;
}
.cno-social-icon i {
	font-size: 15px;
	line-height: 1;
}

/* Submenu (green) panels use their own text colours instead of the main
   menu's — set under Overlay Menu > Settings > Submenu Text Colours. */
.cno-panel:not(#panel-root) .cno-item .cno-link,
.cno-panel:not(#panel-root) .cno-item .cno-link:visited {
	color: var(--cno-child-text-colour, #013857) !important;
}
.cno-panel:not(#panel-root) .cno-item .cno-link:hover,
.cno-panel:not(#panel-root) .cno-item .cno-link:focus-visible {
	color: var(--cno-child-text-hover-colour, #ffffff) !important;
}
.cno-panel:not(#panel-root) .cno-panel-title,
.cno-panel:not(#panel-root) .cno-back {
	color: var(--cno-child-text-colour, #013857) !important;
	border-color: color-mix(in srgb, var(--cno-child-text-colour, #013857) 50%, transparent);
}
.cno-panel:not(#panel-root) .cno-back:hover {
	border-color: var(--cno-child-text-colour, #013857);
}
.cno-panel:not(#panel-root) .cno-contact,
.cno-panel:not(#panel-root) .cno-social {
	color: var(--cno-child-contact-label-colour, #013857) !important;
}
.cno-panel:not(#panel-root) .cno-contact-label,
.cno-panel:not(#panel-root) .cno-social-label {
	color: var(--cno-child-contact-label-colour, #013857) !important;
}
.cno-panel:not(#panel-root) .cno-contact a,
.cno-panel:not(#panel-root) .cno-contact a:visited {
	color: var(--cno-child-contact-value-colour, #ffffff) !important;
}
.cno-panel:not(#panel-root) .cno-contact a:hover {
	color: var(--cno-child-contact-value-hover-colour, #013857) !important;
}

/* Body scroll lock while overlay open */
body.cno-locked {
	overflow: hidden;
}

/* ==========================================================================
   Mobile — image column hidden, single-column list
   ========================================================================== */
@media (max-width: 782px) {
	.cno-image-col {
		display: none;
	}
	.cno-content-col {
		flex: 1 1 100%;
	}
	.cno-panel {
		padding: 90px 24px 32px;
	}
	.cno-list {
		grid-template-columns: 1fr;
		row-gap: 22px;
	}
	.cno-close {
		right: 20px;
		top: 16px;
	}

	/* The hover-arrow is a mouse-hover affordance with no real touchscreen
	   equivalent — rather than rely on any hover/focus state on a
	   touchscreen (fragile across browser engines), it's switched off
	   entirely below this breakpoint. Items are plain text; the
	   has-children arrow (→ on the right) still indicates a submenu. */
	.cno-hover-arrow {
		display: none;
	}
	.cno-item .cno-link:hover,
	.cno-item .cno-link:focus-visible {
		padding-left: 0;
	}

	/* Submenu panel tidy-up on mobile */
	.cno-back {
		padding: 6px 14px;
		font-size: 12px;
		gap: 6px;
		margin-bottom: 20px;
	}
	.cno-back svg {
		width: 12px;
		height: 12px;
	}
	.cno-panel-title {
		font-size: 19px;
	}
	/* "Stay Connected:" sits on its own line above the icons */
	.cno-social {
		flex-wrap: wrap;
	}
	.cno-social-label {
		flex: 0 0 100%;
		margin-right: 0;
	}
}