/**
 * PCA Unified Responsive Nav — v1
 *
 * One stylesheet for both desktop primary nav and mobile offcanvas.
 * Self-contained: does NOT depend on Bootstrap utility classes that
 * the theme's bootstrap-fallback.css build may have tree-shaken.
 *
 * Pattern lineage: hims.ca mobile menu study (offcanvas top-row utility actions),
 * Caribbean brand palette retained from previous mobile-menu.css.
 *
 * Loaded on every request via wp_enqueue_style('pca-nav-primary').
 */

/* =================================================================
   MOBILE OFFCANVAS — shell + header row
   ================================================================= */

#mobileMenu.offcanvas {
	--pca-nav-fg: #1e293b;
	--pca-nav-muted: #64748b;
	--pca-nav-divider: rgba(0, 0, 0, 0.05);
	--pca-nav-accent: var(--color-primary, #324fbe);
	--pca-nav-accent-hover: var(--color-primary-hover, #2a42a1);
	--pca-nav-orange: #FF6B35;
	--pca-nav-whatsapp: #25D366;
}

#mobileMenu .pca-mobile-nav__header {
	background: linear-gradient(135deg, var(--color-primary, #324fbe) 0%, #2a42a1 100%);
	color: #fff;
	border-bottom: none;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#mobileMenu .offcanvas-title {
	font-family: var(--font-display, 'DM Sans', system-ui);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Top utility row — WhatsApp + Phone + Close.
   44x44 tap targets per WCAG 2.5.5. */
#mobileMenu .pca-mobile-nav__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

#mobileMenu .pca-mobile-nav__action {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	transition: background-color 0.15s ease, transform 0.1s ease;
	text-decoration: none;
}

#mobileMenu .pca-mobile-nav__action:hover,
#mobileMenu .pca-mobile-nav__action:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

#mobileMenu .pca-mobile-nav__action:active {
	transform: scale(0.94);
}

#mobileMenu .pca-mobile-nav__action:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

#mobileMenu .pca-mobile-nav__action--whatsapp:hover {
	background: var(--pca-nav-whatsapp);
}

/* Inline-SVG icons inside the action pills inherit currentColor. */
#mobileMenu .pca-mobile-nav__action,
#mobileMenu .pca-mobile-nav__action-icon {
	color: #fff;
}
#mobileMenu .pca-mobile-nav__action svg,
#mobileMenu .pca-mobile-nav__action-icon {
	color: #fff !important;
	stroke: currentColor;
}

#mobileMenu .btn-close.pca-mobile-nav__close {
	filter: brightness(0) invert(1);
	opacity: 0.9;
	width: 32px;
	height: 32px;
	margin-left: 4px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

#mobileMenu .btn-close.pca-mobile-nav__close:hover,
#mobileMenu .btn-close.pca-mobile-nav__close:focus {
	opacity: 1;
	transform: rotate(90deg);
}

/* =================================================================
   MOBILE OFFCANVAS — menu body
   ================================================================= */

/* Defensive — the inline style on <ul> handles tree-shaking, but the
   list-style reset belongs in CSS so admins changing the menu via
   Appearance → Menus don't see bullets if the inline style is removed. */
ul.pca-mobile-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

ul.pca-mobile-nav > li {
	margin: 0;
}

/* Section label — orange accent bar, uppercase muted heading */
.pca-mobile-nav .section-label {
	position: relative;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	color: var(--pca-nav-muted, #64748b);
	padding: 1.25rem 1rem 0.625rem 1.25rem;
	background: linear-gradient(90deg, rgba(255, 107, 53, 0.05) 0%, transparent 60%);
	border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.pca-mobile-nav .pca-section-label-li:first-child .section-label {
	border-top: none;
}

.pca-mobile-nav .section-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	background: linear-gradient(180deg, #FF6B35 0%, #f48120 100%);
	border-radius: 0 3px 3px 0;
}

/* Menu links */
.pca-mobile-nav .nav-link {
	display: flex;
	align-items: center;
	padding: 0.875rem 1rem 0.875rem 1.25rem;
	color: var(--pca-nav-fg, #1e293b);
	font-weight: 500;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--pca-nav-divider, rgba(0, 0, 0, 0.05));
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
}

.pca-mobile-nav .nav-link:active {
	transform: scale(0.97);
	background: rgba(50, 79, 190, 0.12);
}

.pca-mobile-nav .nav-link:hover,
.pca-mobile-nav .nav-link:focus-visible {
	background: linear-gradient(90deg, rgba(50, 79, 190, 0.06) 0%, transparent 80%);
	color: var(--pca-nav-accent);
}

.pca-mobile-nav .nav-link[aria-current="page"] {
	background: rgba(50, 79, 190, 0.08);
	color: var(--pca-nav-accent);
	font-weight: 600;
}

@media (hover: none) {
	.pca-mobile-nav .nav-link:hover {
		background: transparent;
		color: inherit;
	}
}

/* Icon, label, chevron layout */
.pca-mobile-nav__icon {
	flex-shrink: 0;
	margin-right: 0.875rem;
	transition: transform 0.2s ease, color 0.2s ease;
}

.pca-mobile-nav .nav-link:hover .pca-mobile-nav__icon {
	transform: scale(1.08);
}

.pca-mobile-nav__label {
	flex: 1;
	min-width: 0;
}

.pca-mobile-nav__chevron {
	color: var(--pca-nav-muted);
	font-size: 1.25rem;
	line-height: 1;
	margin-left: 0.5rem;
	transition: transform 0.2s ease, color 0.2s ease;
}

.pca-mobile-nav .nav-link:hover .pca-mobile-nav__chevron {
	transform: translateX(2px);
	color: var(--pca-nav-accent);
}

/* Per-icon color tinting — selectors come from menu-item custom CSS class
   set in Appearance → Menus (e.g. "pca-icon-tours"). */
.pca-mobile-nav .pca-icon-tours  .pca-mobile-nav__icon { color: var(--pca-nav-accent); }
.pca-mobile-nav .pca-icon-boats  .pca-mobile-nav__icon { color: #0891b2; }
.pca-mobile-nav .pca-icon-groups .pca-mobile-nav__icon { color: var(--pca-nav-orange); }
.pca-mobile-nav .pca-icon-help   .pca-mobile-nav__icon { color: #8b5cf6; }
.pca-mobile-nav .pca-icon-cart   .pca-mobile-nav__icon { color: #6b7280; }

/* =================================================================
   MOBILE OFFCANVAS — footer
   ================================================================= */

#mobileMenu .pca-mobile-nav__footer {
	background: #f8fafc;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	margin-top: auto;
	position: sticky;
	bottom: 0;
}

#mobileMenu .pca-mobile-nav__footer p {
	color: var(--pca-nav-muted, #64748b);
	font-size: 0.6875rem;
}

/* =================================================================
   REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
	#mobileMenu .btn-close,
	.pca-mobile-nav .nav-link,
	.pca-mobile-nav__icon,
	.pca-mobile-nav__chevron,
	.pca-mobile-nav__action {
		transition: none;
	}
	.pca-mobile-nav .nav-link:active,
	.pca-mobile-nav__action:active {
		transform: none;
	}
}

/* =================================================================
   DESKTOP PRIMARY NAV
   ================================================================= */

/* The desktop menu uses Bootstrap_5_Nav_Walker output inside
   .navbar-collapse — the existing navbar CSS already styles it. We
   only add a tiny consistency rule here for aria-current. */

#navbarSupportedContent .nav-link[aria-current="page"] {
	color: var(--color-primary, #324fbe) !important;
	font-weight: 600;
}