/*
 * Vitalink Mesotech Skin — Block theme integration (Twenty Twenty-Five)
 * ====================================================================
 * Targets STABLE core block classes (wp-block-navigation, template-part,
 * etc.), so it works on Twenty Twenty-Five and other block themes.
 * If a rule doesn't take effect, Inspect the element and adjust the
 * selector — block markup is consistent but theme spacing can vary.
 * Colours come from the :root variables in brand.css.
 */

/* ==================================================================
 * 1) Sticky solid-blue header (Mesotech signature)
 * ================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--vlk-blue) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
/* neutralise inner group backgrounds so the blue spans full width */
header.wp-block-template-part > .wp-block-group,
header.wp-block-template-part .wp-block-group {
	background-color: transparent !important;
}

/* Logo text, nav links, and search icon → white on the blue bar */
header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation-item__label,
header.wp-block-template-part .wp-block-search button,
header.wp-block-template-part .wp-block-search__button {
	color: var(--vlk-text-on-blue) !important;
}
header.wp-block-template-part svg {
	fill: var(--vlk-text-on-blue);
}
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-site-title a:hover {
	color: var(--vlk-blue-light) !important;
}

/* Brand logo injected into the header (Site Title block). Show the inline
   SVG logo, hide the plain text site-title so only the logo appears. */
header.wp-block-template-part .wp-block-site-title {
	display: none !important;
}
.vlk-header-logo {
	display: inline-flex;
	align-items: center;
}
.vlk-header-logo .vlk-logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--vlk-text-on-blue);
}
.vlk-header-logo .vlk-logo,
.vlk-header-logo .vlk-logo svg {
	display: inline-flex;
	height: 40px;
	width: auto;
}

/* ==================================================================
 * 2) Dropdown submenu — fade + slide animation
 * ================================================================== */
.wp-block-navigation .wp-block-navigation__submenu-container {
	border: none !important;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
	padding: 6px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-submenu.is-open > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Submenu items: dark text on white, brand-blue hover */
.wp-block-navigation__submenu-container .wp-block-navigation-item a {
	color: var(--vlk-text) !important;
	padding: 8px 18px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
	color: var(--vlk-blue) !important;
	background: var(--vlk-blue-light);
}

/* ==================================================================
 * 3) Mobile overlay menu — dark Mesotech style with rounded pills
 * ================================================================== */
/* hamburger + close icon white */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	fill: var(--vlk-text-on-blue);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--vlk-mobile-bg) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close svg {
	fill: var(--vlk-footer-text);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	background: var(--vlk-mobile-pill);
	color: var(--vlk-footer-text) !important;
	border-radius: 999px;
	padding: 14px 24px !important;
	margin: 6px 0;
	transition: background-color .15s ease, color .15s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a:hover {
	background: var(--vlk-blue);
	color: #fff !important;
}
/* submenu items inside the mobile overlay: keep them in the dark theme */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	padding: 0;
}

/* ==================================================================
 * 4) Hide the theme's own footer when our auto-footer is enabled
 *    (a body class is added by the plugin only when the footer is on)
 * ================================================================== */
body.vlk-has-footer footer.wp-block-template-part {
	display: none !important;
}