/*
Theme Name: UIB Multi-Union
Theme URI: https://example.com
Author: Mark Duwe
Description: Block theme for multi-union single-install WordPress. Union palettes, logos and contact details are driven by the companion plugin "UIB Unions" via the /union-slug/ URL prefix.
Version: 1.0.5
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: uib
*/

/* Union-agnostic base rules. Union colours arrive as CSS custom
   properties (--wp--preset--color--union-*) injected by the plugin. */

.site-logo-union img {
	max-height: 90px;
	width: auto !important;
}

/* Footer sits on the primary colour: links take the footer's own text
   colour (the block also sets this via elements.link; this is the fallback). */
footer.wp-block-template-part a:not(.wp-element-button) {
	color: inherit;
	text-decoration-color: currentColor;
}
footer.wp-block-template-part a:not(.wp-element-button):hover,
footer.wp-block-template-part a:not(.wp-element-button):focus {
	opacity: 0.8;
}

/* ---- Union primary, darkened ----
   Hovers across the site use the union's own primary colour darkened by 25%,
   worked out in the browser because the union colours only arrive at request
   time. The flat fallback is for browsers without color-mix(); it is the
   theme.json default primary at 75% brightness. */
:root {
	--union-primary-dark: #141423;
}

@supports (color: color-mix(in srgb, red 50%, black)) {
	:root {
		--union-primary-dark: color-mix(in srgb, var(--wp--preset--color--union-primary, #1a1a2e) 75%, #000);
	}
}

/* ---- Navigation ----
   Menu items are blocks of the union's primary colour with the union's
   background colour for the text, and darken on hover. */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.85rem;
	border-radius: 4px;
	background-color: var(--wp--preset--color--union-primary);
	color: var(--wp--preset--color--union-background);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* An item with a submenu is a label and a separate arrow button, so the fill
   moves to the list item around them both: hovering, opening or landing on the
   current page then colours the arrow with the label, not just the words. */
.wp-block-navigation .wp-block-navigation-item.has-child {
	border-radius: 4px;
	background-color: var(--wp--preset--color--union-primary);
	transition: background-color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--union-primary-dark);
	color: var(--wp--preset--color--union-background);
}

.wp-block-navigation .current-menu-ancestor {
	background-color: var(--union-primary-dark) !important;
}

.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--union-primary);
	outline-offset: 2px;
}

.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	background-color: transparent;
	color: var(--wp--preset--color--union-background);
}

/* Core sizes the arrow button at 0.6em square with the icon dropped slightly,
   which leaves it sitting low and able to poke past the item's edge. Let it
   take the item's full height and centre the icon in it instead. */
.wp-block-navigation .wp-block-navigation-item.has-child {
	align-items: stretch;
}

.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0.7rem 0 0.15rem;
	border: 0;
	border-radius: 0 4px 4px 0;
	line-height: 0;
}

.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg {
	width: 0.75em;
	height: 0.75em;
	margin: 0;
}

.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	padding-right: 0.35rem;
	border-radius: 4px 0 0 4px;
}

.wp-block-navigation .wp-block-navigation-item.has-child:hover,
.wp-block-navigation .wp-block-navigation-item.has-child:focus-within,
.wp-block-navigation .wp-block-navigation-item.has-child.current-menu-item,
.wp-block-navigation .wp-block-navigation-item.has-child:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ) {
	background-color: var(--union-primary-dark);
}

/* While the submenu is showing, the item and its panel read as one shape: the
   corners where they meet are squared off so there is no notch between them. */
.wp-block-navigation .wp-block-navigation-item.has-child:hover,
.wp-block-navigation .wp-block-navigation-item.has-child:focus-within,
.wp-block-navigation .wp-block-navigation-item.has-child:has( > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* The label keeps its own hover fill inside a parent item, which would show as
   a darker patch over an already dark pill. */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
}

/* ---- Submenus ----
   Same colours as the parent: no white panel, no black text. */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	left: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 4px 4px 4px;
	background-color: var(--wp--preset--color--union-primary);
	color: var(--wp--preset--color--union-background);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	min-width: 12rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	background-color: transparent;
}

.wp-block-navigation .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--union-background);
}

.wp-block-navigation .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container > li > .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation__submenu-container > li.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--union-primary-dark);
	color: var(--wp--preset--color--union-background);
}

/* The hover fill follows the panel's rounded corners. The top-left corner stays
   square, because that is where the panel joins its parent item. */
.wp-block-navigation .wp-block-navigation__submenu-container > li:first-child > .wp-block-navigation-item__content {
	border-top-right-radius: 4px;
}

.wp-block-navigation .wp-block-navigation__submenu-container > li:last-child > .wp-block-navigation-item__content {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* Submenus of submenus sit beside their parent, so they need the fill too. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-navigation .wp-block-navigation-item.has-child {
		transition: none;
	}
}