/**
 * Mini-Site Global Styles
 *
 * Responsive navigation styles for mini-site pages with dropdown support
 *
 * @package BB_Child_Theme
 * @since 1.0.0
 * @updated 2026-01-30 - Added dropdown styles
 */

/* CSS Custom Properties for easy theming */
:root {
	--msn-bg: #f8f9fa;
	--msn-text: #333333;
	--msn-active-bg: #0073aa;
	--msn-active-text: #ffffff;
	--msn-hover-bg: #e9ecef;
	--msn-hover-text: #0073aa;
	--msn-border: #dee2e6;
	--msn-border-radius: 4px;
	--msn-padding: 12px 20px;
	--msn-font-size: 14px;
	--msn-mobile-breakpoint: 768px;
	/* Dropdown specific */
	--msn-dropdown-bg: #ffffff;
	--msn-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	--msn-dropdown-min-width: 220px;
}

/* Mini-Site Navigation Container */
.mini-site-nav {
	background-color: var(--msn-bg);
	border: 1px solid var(--msn-border);
	border-radius: var(--msn-border-radius);
	margin-bottom: 2rem;
	padding: 0.5rem;
}

/* Navigation List */
.mini-site-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap; /* Changed from wrap to nowrap for dropdown version */
	gap: 0.25rem;
	align-items: center;
}

/* Navigation Items */
.mini-site-nav__item {
	margin: 0;
	padding: 0;
	position: relative; /* For dropdown positioning */
}

/* Navigation Links */
.mini-site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: var(--msn-padding);
	color: var(--msn-text);
	background-color: transparent;
	text-decoration: none;
	border-radius: var(--msn-border-radius);
	font-size: var(--msn-font-size);
	font-weight: 500;
	transition: all 0.2s ease-in-out;
	border: 1px solid transparent;
	white-space: nowrap;
	cursor: pointer;
}

/* Button reset for dropdown toggle */
button.mini-site-nav__link {
	font-family: inherit;
	line-height: inherit;
}

/* Link Hover State */
.mini-site-nav__link:hover {
	background-color: var(--msn-hover-bg);
	color: var(--msn-hover-text);
	text-decoration: none;
}

/* Link Focus State (accessibility) */
.mini-site-nav__link:focus {
	outline: 2px solid var(--msn-active-bg);
	outline-offset: 2px;
}

/* Active Link */
.mini-site-nav__item--active .mini-site-nav__link {
	background-color: var(--msn-active-bg);
	color: var(--msn-active-text);
	font-weight: 600;
	border-color: var(--msn-active-bg);
}

.mini-site-nav__item--active .mini-site-nav__link:hover {
	background-color: var(--msn-active-bg);
	color: var(--msn-active-text);
}

/* ========================================
   DROPDOWN STYLES
   ======================================== */

/* Dropdown Toggle Button */
.mini-site-nav__dropdown-toggle {
	/* Inherits from .mini-site-nav__link */
}

/* Dropdown Arrow */
.mini-site-nav__dropdown-arrow {
	font-size: 0.7em;
	transition: transform 0.2s ease;
	margin-left: 0.15rem;
}

/* Arrow rotation when open */
.mini-site-nav__item--dropdown.is-open .mini-site-nav__dropdown-arrow {
	transform: rotate(180deg);
}

/* Dropdown Menu (hidden by default) */
.mini-site-nav__dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: var(--msn-dropdown-min-width);
	background-color: var(--msn-dropdown-bg);
	border: 1px solid var(--msn-border);
	border-radius: var(--msn-border-radius);
	box-shadow: var(--msn-dropdown-shadow);
	padding: 0.5rem 0;
	margin-top: 0.25rem;
	list-style: none;
}

/* Show dropdown on hover (desktop) AND when .is-open class is present */
.mini-site-nav__item--dropdown:hover .mini-site-nav__dropdown,
.mini-site-nav__item--dropdown.is-open .mini-site-nav__dropdown {
	display: block;
}

/* Dropdown Items */
.mini-site-nav__dropdown-item {
	margin: 0;
	padding: 0;
}

/* Dropdown Links */
.mini-site-nav__dropdown-link {
	display: block;
	padding: 0.625rem 1rem;
	color: var(--msn-text);
	text-decoration: none;
	font-size: var(--msn-font-size);
	font-weight: 400;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.mini-site-nav__dropdown-link:hover {
	background-color: var(--msn-hover-bg);
	color: var(--msn-hover-text);
	text-decoration: none;
}

/* Active item in dropdown */
.mini-site-nav__dropdown-item--active .mini-site-nav__dropdown-link {
	background-color: rgba(0, 115, 170, 0.1);
	color: var(--msn-active-bg);
	font-weight: 600;
	border-left: 3px solid var(--msn-active-bg);
	padding-left: calc(1rem - 3px);
}

/* Parent button shows active state when child is active */
.mini-site-nav__item--dropdown-active > .mini-site-nav__dropdown-toggle {
	background-color: rgba(0, 115, 170, 0.15);
	color: var(--msn-active-bg);
	border-color: var(--msn-active-bg);
}

/* ========================================
   LAYOUT VARIANTS
   ======================================== */

/* Horizontal Layout (Default) */
.mini-site-nav--horizontal .mini-site-nav__list {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

/* Vertical Layout */
.mini-site-nav--vertical .mini-site-nav__list {
	flex-direction: column;
	align-items: stretch;
}

.mini-site-nav--vertical .mini-site-nav__link {
	display: block;
	width: 100%;
}

.mini-site-nav--vertical .mini-site-nav__dropdown {
	position: static;
	box-shadow: none;
	border: none;
	border-left: 2px solid var(--msn-border);
	margin-left: 1rem;
	margin-top: 0;
	padding: 0;
	background: transparent;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

@media screen and (max-width: 768px) {
	/* Stack navigation vertically on mobile */
	.mini-site-nav__list {
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0;
	}

	.mini-site-nav__item {
		width: 100%;
		border-bottom: 1px solid var(--msn-border);
	}

	.mini-site-nav__item:last-child {
		border-bottom: none;
	}

	.mini-site-nav__link {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 1rem;
		border-radius: 0;
		text-align: left;
	}

	/* Dropdown adjustments for mobile */
	.mini-site-nav__dropdown {
		position: static;
		box-shadow: none;
		border: none;
		border-radius: 0;
		margin: 0;
		padding: 0;
		background-color: rgba(0, 0, 0, 0.03);
	}

	/* Disable hover on mobile - only click works */
	.mini-site-nav__item--dropdown:hover .mini-site-nav__dropdown {
		display: none;
	}

	.mini-site-nav__item--dropdown.is-open .mini-site-nav__dropdown {
		display: block;
	}

	.mini-site-nav__dropdown-link {
		padding: 0.875rem 1rem 0.875rem 2rem;
	}

	/* Active state more prominent on mobile */
	.mini-site-nav__item--active .mini-site-nav__link {
		border-left: 4px solid var(--msn-active-bg);
		padding-left: calc(1rem - 4px);
	}
}

/* Tablet Breakpoint */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.mini-site-nav__link {
		padding: 10px 14px;
		font-size: 13px;
	}

	.mini-site-nav__dropdown-link {
		padding: 0.5rem 0.875rem;
		font-size: 13px;
	}
}

/* ========================================
   UTILITY STYLES
   ======================================== */

/* Print Styles */
@media print {
	.mini-site-nav {
		display: none;
	}
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.mini-site-nav {
		border-width: 2px;
	}

	.mini-site-nav__link {
		border-width: 2px;
	}

	.mini-site-nav__item--active .mini-site-nav__link {
		border-width: 2px;
	}

	.mini-site-nav__dropdown {
		border-width: 2px;
	}
}

/* Reduced Motion Support (accessibility) */
@media (prefers-reduced-motion: reduce) {
	.mini-site-nav__link,
	.mini-site-nav__dropdown-link,
	.mini-site-nav__dropdown-arrow {
		transition: none;
	}
}

/* Dark Mode Support (optional - can be customized) */
@media (prefers-color-scheme: dark) {
	:root {
		--msn-bg: #1e293b;
		--msn-text: #e2e8f0;
		--msn-active-bg: #3b82f6;
		--msn-active-text: #ffffff;
		--msn-hover-bg: #334155;
		--msn-hover-text: #60a5fa;
		--msn-border: #475569;
		--msn-dropdown-bg: #1e293b;
		--msn-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	}
}