/**
 * Navigation � sidebar, top bar, breadcrumb, tabs, pagination, section header
 */

/* Link style system (EXPERIENCE-01F) */
.fc-link--prose {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.fc-nav-link {
	text-decoration: none;
}

.fc-nav-link:hover,
.fc-nav-link:focus-visible {
	text-decoration: none;
}

.fc-menu-item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.fc-menu-item:hover,
.fc-menu-item:focus-visible {
	text-decoration: none;
	background: var(--fc-color-surface-muted, #e8eef2);
	outline: none;
}

.fc-link--action {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: var(--fc-weight-semibold);
	text-decoration: none;
	color: var(--fc-color-ocean-navy);
}

.fc-link--action::after {
	content: "\2192";
	font-size: 0.9em;
}

.fc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fc-space-4);
	min-height: 3.5rem;
	padding: var(--fc-space-3) var(--fc-space-4);
	border-bottom: 1px solid var(--fc-color-border);
	background: var(--fc-color-surface);
}

.fc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--fc-space-3);
	text-decoration: none;
	color: var(--fc-color-ocean-navy);
	font-weight: var(--fc-weight-semibold);
}

.fc-logo {
	display: block;
	width: var(--fc-logo-width);
	height: var(--fc-logo-height);
	object-fit: contain;
	object-position: left center;
}

.fc-logo-slot {
	display: inline-flex;
	align-items: center;
	width: var(--fc-logo-width);
	height: var(--fc-logo-height);
	flex: 0 0 var(--fc-logo-width);
}

.fc-breadcrumb,
.fc-portal-breadcrumb {
	margin: 0 0 var(--fc-space-2);
}

.fc-breadcrumb-list,
.fc-portal-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fc-text-small);
}

.fc-breadcrumb-sep,
.fc-portal-breadcrumb-sep {
	color: var(--fc-color-muted);
}

.fc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-1);
	border-bottom: 1px solid var(--fc-color-border);
	margin-bottom: var(--fc-space-5);
}

.fc-tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--fc-touch-min);
	padding: 0.5rem 0.85rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--fc-color-muted);
	font: inherit;
	font-weight: var(--fc-weight-medium);
	text-decoration: none;
	cursor: pointer;
}

.fc-tab:hover { color: var(--fc-color-ocean-navy); }
.fc-tab[aria-current="page"],
.fc-tab.is-current {
	color: var(--fc-color-deep-blue);
	border-bottom-color: var(--fc-color-seafoam);
}

.fc-tab:focus-visible {
	outline: 3px solid var(--fc-color-focus);
	outline-offset: 2px;
}

.fc-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--fc-space-3);
	margin-bottom: var(--fc-space-4);
}

.fc-section-header__title {
	margin: 0;
}

.fc-section-header__desc {
	margin: var(--fc-space-1) 0 0;
	color: var(--fc-color-muted);
	font-size: var(--fc-text-small);
}

.fc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-2);
	align-items: center;
	justify-content: center;
	margin-top: var(--fc-space-6);
}

.fc-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fc-touch-min);
	min-height: var(--fc-touch-min);
	padding: 0 var(--fc-space-3);
	border: 1px solid var(--fc-color-border);
	border-radius: var(--fc-radius-md);
	background: var(--fc-color-surface);
	color: var(--fc-color-ocean-navy);
	text-decoration: none;
}

.fc-page-link[aria-current="page"],
.fc-page-link.is-current {
	background: var(--fc-color-deep-blue);
	border-color: var(--fc-color-deep-blue);
	color: var(--fc-color-text-inverse);
}

.fc-page-link:focus-visible {
	outline: 3px solid var(--fc-color-focus);
	outline-offset: 2px;
}

/* ACCOUNT-01 ? avatar account menu */
.fc-account-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.fc-account-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--fc-space-2);
	min-height: var(--fc-touch-min);
	padding: 0.15rem 0.35rem;
	border: 0;
	border-radius: var(--fc-radius-pill, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: var(--fc-weight-semibold);
	cursor: pointer;
}

.fc-account-menu__toggle:hover {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.fc-account-menu__toggle:focus {
	outline: none;
}

.fc-account-menu__toggle:focus-visible {
	outline: 2px solid var(--fc-color-focus, #0b6e99);
	outline-offset: 3px;
}

.fc-account-menu__avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	flex: 0 0 auto;
	background: var(--fc-color-surface-muted, #e8eef2);
}

.fc-account-menu__label {
	line-height: 1.2;
	max-width: 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 48rem) {
	.fc-account-menu__label {
		max-width: 6.5rem;
	}
}

.fc-account-menu__panel {
	position: absolute;
	top: calc(100% + 0.25rem);
	right: 0;
	left: auto;
	z-index: 40;
	width: 12rem;
	min-width: 10.5rem;
	max-width: min(14.5rem, calc(100vw - 1.5rem));
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var(--fc-color-surface, #fff);
	border: 1px solid var(--fc-color-border);
	border-radius: var(--fc-radius-md, 0.5rem);
	box-shadow: var(--fc-shadow-md, 0 8px 24px rgba(11, 37, 69, 0.12));
}

.fc-account-menu__panel > li {
	width: 100%;
}

.fc-account-menu__link {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	min-height: var(--fc-touch-min, 2.75rem);
	padding: 0.5rem 0.85rem;
	border: 0;
	border-top: 0;
	color: var(--fc-color-ocean-navy);
	text-decoration: none;
	font-size: var(--fc-text-small);
	font-weight: var(--fc-weight-medium);
	line-height: 1.25;
	text-align: center;
	box-sizing: border-box;
}

.fc-account-menu__panel > li:first-child .fc-account-menu__link {
	border-top: 0;
	box-shadow: none;
}

.fc-account-menu__link:hover {
	background: var(--fc-color-surface-muted, #e8eef2);
}

.fc-account-menu__link:focus {
	outline: none;
}

.fc-account-menu__link:focus-visible {
	background: var(--fc-color-surface-muted, #e8eef2);
	outline: 2px solid var(--fc-color-focus, #0b6e99);
	outline-offset: -2px;
}

.fc-account-menu__link[aria-current="page"],
.fc-account-menu__link.is-current {
	background: color-mix(in srgb, var(--fc-brand-warm-sand, #f5f0e8) 55%, var(--fc-color-surface));
	color: var(--fc-color-ocean-navy);
	font-weight: var(--fc-weight-semibold);
}

.fc-account-menu__link--logout {
	margin-top: 0;
	border-top: 1px solid var(--fc-color-border);
	color: var(--fc-color-muted);
}

.fc-account-menu__link--logout:hover {
	color: var(--fc-color-danger, #b42318);
	background: color-mix(in srgb, var(--fc-color-danger, #b42318) 8%, transparent);
}

.fc-account-menu__link--logout:focus-visible {
	color: var(--fc-color-danger, #b42318);
	background: color-mix(in srgb, var(--fc-color-danger, #b42318) 8%, transparent);
	outline: 2px solid var(--fc-color-focus, #0b6e99);
	outline-offset: -2px;
}

.fc-page__header--navy .fc-account-menu__toggle {
	color: var(--fc-color-on-navy, #fff);
}

.fc-page__menu .fc-account-menu {
	width: 100%;
}

.fc-page__menu .fc-account-menu__panel {
	position: static;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: 0;
}

.fc-page__menu .fc-account-menu__link {
	width: 100%;
	justify-content: flex-start;
	text-align: start;
	padding-inline: 0.85rem;
}

@media (max-width: 47.99rem) {
	.fc-page__menu .fc-account-menu__panel {
		position: static;
		inset: auto;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		background: transparent;
		width: 100%;
		min-width: 0;
		max-width: none;
		padding: 0;
	}

	.fc-page__menu .fc-account-menu__link {
		justify-content: flex-start;
		text-align: start;
	}
}