/**
 * Sub Navigation Block Styles - Child Theme Override
 *
 * Extends the parent plugin styles with product name anchor feature.
 * Product name displays on the left with navigation links on the right.
 *
 * @package TMW_Core_Child
 * @since 1.0.0
 * @version 1.9.0
 */

/* ==========================================
   BASE STYLES
   ========================================== */

.sub-navigation-block {
	position: relative;
}

/* Compact vertical padding for the nav row. Overrides the section-padding-*
   default class so the bar stays tight regardless of the Theme Settings default.
   Individual Gutenberg spacing (inline styles) still overrides this per-instance.
   Uses physical padding-top/padding-bottom (not padding-block) because the
   parent theme's .section-padding-3xl sets padding-top/padding-bottom directly;
   a logical property here does not reliably out-cascade those physical ones.
   --space-md (not --space-xl) keeps this slim pill nav visually tight against
   whatever section follows it. */
.sub-navigation-block:not([style*="padding"]) {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
}

/* Default white background - Gutenberg's .has-background class overrides this */
.sub-navigation-block:not(.has-background) {
	background-color: var(--color-white);
}

/* ==========================================
   INNER WRAPPER (FLEXBOX LAYOUT)
   ========================================== */

.sub-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	width: 100%;
	line-height: var(--line-height-tight);
	text-align: center;
	text-wrap: balance;
}

/* When product name is present, use space-between layout */
.sub-navigation-block--has-product .sub-nav__inner {
	justify-content: flex-start;
	gap: 0; /* List handles spacing via space-evenly */
}

/* ==========================================
   MENU LABEL (LEFT)
   ========================================== */

.sub-nav__product {
	flex-shrink: 0;
}

.sub-nav__product-name {
	font-size: var(--font-size-lead);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
	white-space: nowrap;
	color: var(--color-heading);
}

/* When block has custom text color */
.sub-navigation-block.has-text-color .sub-nav__product-name {
	color: inherit;
}


/* ==========================================
   MOBILE SELECT DROPDOWN
   Native <select> shown in place of the full nav list once
   items overflow their container (see checkOverflow() in JS).
   ========================================== */

.sub-nav__select-wrap {
	display: none;
	position: relative;
	width: 100%;
}

.sub-navigation-block.is-collapsed .sub-nav__select-wrap {
	display: block;
}

.sub-nav__select-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--space-md);
	width: 10px;
	height: 10px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.sub-nav__select {
	display: block;
	width: 100%;
	padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-md);
	background-color: var(--color-white);
	border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
	border-radius: var(--radius-button);
	color: var(--color-text-primary);
	font-family: inherit;
	font-weight: var(--font-weight-medium);
	appearance: none;
	cursor: pointer;
}

.sub-nav__select:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==========================================
   DROPDOWN WRAPPER
   Full-width nav list; hidden in favor of the <select>
   once the block is in its collapsed (overflow) state.
   ========================================== */

.sub-nav__dropdown {
	display: block;
}

.sub-navigation-block.is-collapsed .sub-nav__dropdown {
	display: none;
}

/* ==========================================
   NAVIGATION LIST
   ========================================== */

.sub-nav__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* When product name is present: list layout is defined in the
   CLIENT-SPECIFIC CUSTOMIZATIONS section below (space-evenly, full width). */

/* ==========================================
   NAVIGATION ITEMS
   ========================================== */

.sub-nav__item {
	position: relative;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
}

/* ==========================================
   NAVIGATION LINKS
   ========================================== */

.sub-nav__link {
	display: inline-block;
	padding-block: var(--space-sm);
	text-decoration: none;
	transition: color var(--transition-fast);
}

/* Posts/CPTs cap the content column at 900px (--max-width-content-lg) with no
   matching cap on fluid body text, so pill labels keep growing with viewport
   width until they outgrow the fixed container once type hits its max size
   at the theme's 1600px fluid-typography breakpoint. A fixed size decouples
   pill width from viewport width so the row keeps fitting above that point. */
.single-post .sub-nav__link,
.single-resources .sub-nav__link {
	font-size: 16px;
}

/* ==========================================
   NUMBERED LINKS (OPTIONAL)
   Toggleable via the "Number the Links" field.
   Counts link items only; the Menu Label is not numbered.
   ========================================== */

.sub-nav__list--numbered {
	counter-reset: sub-nav-counter;
}

.sub-nav__list--numbered .sub-nav__item {
	counter-increment: sub-nav-counter;
}

.sub-nav__list--numbered .sub-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
}

.sub-nav__list--numbered .sub-nav__link::before {
	content: counter(sub-nav-counter);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	color: var(--color-primary);
	background-color: var(--color-bg-secondary);
	border-radius: var(--radius-full);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	text-decoration: none; /* Prevent wireframe-mode underline bleeding onto the badge */
}

/* ==========================================
   ACTIVE STATE
   ========================================== */

/* Active & Hover indicator - underline at bottom of block */
.sub-nav__item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--color-primary);
	border-radius: var(--radius-full);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

/* Show underline on hover */
.sub-nav__item:hover::after {
	opacity: 1;
}

/* Active state - always show underline */
.sub-nav__item.is-active::after {
	opacity: 1;
}

/* ==========================================
   WHEN BLOCK HAS CUSTOM COLORS
   ========================================== */

/* Inherit text color when set via WordPress */
.sub-navigation-block.has-text-color .sub-nav__link {
	color: inherit;
}

.sub-navigation-block.has-text-color .sub-nav__link:hover,
.sub-navigation-block.has-text-color .sub-nav__link:focus {
	opacity: 0.8;
}

.sub-navigation-block.has-text-color .sub-nav__item.is-active .sub-nav__link {
	opacity: 1;
}

/* ==========================================
   COLLAPSED STATE (HAMBURGER MODE)
   ========================================== */

/* When navigation is collapsed (overflow detected), the full nav list is
   replaced by the .sub-nav__select-wrap dropdown (see MOBILE SELECT DROPDOWN
   section above) — .sub-nav__dropdown is hidden entirely via display: none. */
.sub-navigation-block.is-collapsed {
	padding-block: var(--space-sm);
}

/* Inherit text color for select when block has custom colors */
.sub-navigation-block.has-text-color .sub-nav__select {
	color: inherit;
}

/* ==========================================
   RESPONSIVE - MOBILE
   ========================================== */

@media (width <= 768px) {
	.sub-nav__inner {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.sub-navigation-block--has-product .sub-nav__inner {
		flex-direction: column;
		align-items: center;
	}

	.sub-nav__product {
		margin-bottom: var(--space-xs);
	}

	.sub-nav__list {
		justify-content: center;
	}

	.sub-nav__link {
		text-align: center;
		line-height: 1.2em;
	}
}

/* ==========================================
   STICKY MODE
   ========================================== */

.sub-navigation-block--sticky {
	position: relative;
	z-index: 90;
}

/* When sticky is active (class added by JS on scroll) */
.sub-navigation-block--sticky.is-stuck {
	position: fixed;
	top: calc(var(--header-height, 80px) + var(--announcement-bar-height, 0px));
	left: 0;
	right: 0;

	/* !important overrides the block's inline Gutenberg padding-top/bottom,
	   but only while stuck — the normal (in-flow) state keeps its inline spacing. */
	padding-block: var(--wp--preset--spacing--sm) !important;
	box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
	animation: slide-down 0.3s ease-out;
}

/* Reduced padding when sticky */
.sub-navigation-block--sticky.is-stuck .sub-nav__item {
	padding-block: var(--space-2xs);
}

.sub-navigation-block--sticky.is-stuck .sub-nav__link {
	padding-block: var(--space-xs);
}

/* Placeholder to prevent content jump when sticky activates */
.sub-navigation-block--sticky-placeholder {
	display: none;
}

.sub-navigation-block--sticky-placeholder.is-active {
	display: block;
}

/* Slide down animation */
@keyframes slide-down {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Admin bar adjustments */
.admin-bar .sub-navigation-block--sticky.is-stuck {
	top: calc(var(--header-height, 80px) + var(--announcement-bar-height, 0px) + 32px);
}

@media (width <= 782px) {
	.admin-bar .sub-navigation-block--sticky.is-stuck {
		top: calc(var(--header-height, 80px) + var(--announcement-bar-height, 0px) + 46px);
	}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.sub-navigation-block--sticky.is-stuck {
		animation: none;
	}
}

/* ==========================================
   PREVIEW MODE
   ========================================== */

.sub-navigation-preview {
	padding: var(--space-md);
}

.sub-navigation-preview-content {
	width: 100%;
}

.sub-navigation-preview .sub-nav {
	width: 100%;
}

.sub-navigation-preview .sub-nav__inner {
	width: 100%;
}

.sub-navigation-preview .preview-placeholder {
	text-align: center;
	padding: var(--space-lg);
	margin: 0;
}

.sub-navigation-preview .preview-instruction {
	font-size: var(--font-size-small);
	opacity: 0.8;
}

/* ==========================================
   CLIENT-SPECIFIC CUSTOMIZATIONS
   ========================================== */

/* --- Product-name layout: centered underline links, evenly spaced --- */
.sub-navigation-block--has-product .sub-nav__link:hover,
.sub-navigation-block--has-product .sub-nav__link:focus {
	color: var(--color-heading);
}

.sub-navigation-block--has-product .sub-nav__item {
	padding: var(--space-sm);
}

.sub-navigation-block--has-product .sub-nav__list {
	gap: 0; /* Let space-evenly handle all spacing */
	width: 100%;
	justify-content: space-evenly; /* Equal gaps that adjust to fill available space */
}

/* Active state link */
.sub-navigation-block--has-product .sub-nav__item.is-active .sub-nav__link {
	color: var(--color-heading);
}

/* Active indicator underline */
.sub-navigation-block--has-product .sub-nav__item.is-active::after,
.sub-navigation-block--has-product .sub-nav__item:hover::after {
	background-color: var(--color-heading);
}

/* ==========================================
   PILL / SEGMENTED-CONTROL LAYOUT
   Used when no product name is set (e.g. About Osteoarthritis).
   A bordered rounded container hugs the links; the active link
   renders as a filled brand-blue pill with white text.
   ========================================== */

/* Filled pale-blue container spans the full row width; items distribute evenly */
.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__list {
	display: inline-flex;
	gap: var(--space-md);
	width: auto;
	margin: 0 auto;
	padding: var(--space-2xs);
	background-color: var(--color-accent);
	border-radius: var(--radius-button);
	justify-content: center;
}

/* The link is now the padded, rounded target — drop item padding & underline */
.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__item {
	padding: 0;
}

.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__item::after {
	display: none;
}

.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__link {
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-button);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Hover / focus on inactive links — lifted white tint against the blue field */
.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__item:not(.is-active) .sub-nav__link:hover,
.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__item:not(.is-active) .sub-nav__link:focus {
	background-color: var(--color-white);
	color: var(--color-primary);
}

/* Active — filled brand-blue pill with white text */
.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__item.is-active .sub-nav__link {
	background-color: var(--color-primary);
	color: var(--color-white);
}

/* Responsive font size reduction to prevent text wrapping */
@media (width <= 1200px) {
	.sub-navigation-block--has-product .sub-nav__item {
		padding: var(--space-xs);
	}
}

/* ==========================================
   RESPONSIVE - INTERMEDIATE (VERTICAL ALIGNMENT FIX)
   Ensure all nav items are vertically centered when
   text wraps within individual items at narrower viewports.
   ========================================== */

@media (width <= 1024px) {
	/* Ensure items stretch to fill height and center content */
	.sub-navigation-block--has-product .sub-nav__item {
		display: flex;
		align-items: center;
	}

	/* Make link a flex container to vertically center multi-line text */
	.sub-navigation-block--has-product .sub-nav__link {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

@media (width <=768px) {
	.sub-navigation-block:not(.sub-navigation-block--has-product) .sub-nav__link {
		padding: var(--space-xs) var(--space-md);
		line-height: var(--line-height-tight);
	}
}