/**
 * TCC Group – Navigation styles
 *
 * Desktop: 72px horizontal bar with hover dropdowns
 * Mobile:  burger button + slide-down drawer (<768px)
 */

/* ─── Layout variables ──────────────────────────────────────────────── */
:root {
	--tcc-nav-height:      72px;
	--tcc-nav-bg:          var(--wp--preset--color--paper);
	--tcc-nav-border:      var(--wp--preset--color--line);
	--tcc-nav-ink:         var(--wp--preset--color--ink);
	--tcc-nav-teal:        var(--wp--preset--color--teal);
	--tcc-nav-teal-dk:     var(--wp--preset--color--teal-dk);
	--tcc-nav-accent:      var(--wp--preset--color--accent);
	--tcc-nav-mist:        var(--wp--preset--color--mist);
	--tcc-nav-muted:       var(--wp--preset--color--muted);
	--tcc-nav-shadow:      0 18px 40px -20px rgba(11, 70, 66, 0.4);
	--tcc-nav-max-width:   1080px;
}

/* ─── Skip-to-content link ──────────────────────────────────────────── */
.tcc-skip-link {
	position:    absolute;
	left:        0;
	top:         -9999px;
	z-index:     100;
	padding:     0.75rem 1rem;
	background:  var(--tcc-nav-bg);
	color:       var(--tcc-nav-ink);
	font-weight: 600;
	text-decoration: none;
	clip:        rect(0, 0, 0, 0);
	clip-path:   inset(50%);
	overflow:    hidden;
	white-space: nowrap;
}
.tcc-skip-link:focus {
	left:      0;
	top:       0;
	clip:      auto;
	clip-path: none;
	overflow:  visible;
}

/* ─── Site header wrapper ───────────────────────────────────────────── */
.tcc-site-header {
	background:    var(--tcc-nav-bg);
	border-bottom: 1px solid var(--tcc-nav-border);
	position:      relative;
	z-index:       20;
}

.tcc-header-inner {
	display:         flex;
	align-items:     center;
	gap:             1rem;
	max-width:       var(--tcc-nav-max-width);
	margin:          0 auto;
	padding:         0 1.5rem;
	height:          var(--tcc-nav-height);
}

/* ─── Wordmark / Logo (native Site Logo block) ──────────────────────── */
.tcc-wordmark {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	justify-content: center;
	line-height:    1;
	padding-right:  0.75rem;
	padding-top:    6px;
	padding-bottom: 6px;
	text-decoration: none;
	flex-shrink:    0;
}
/* Site Logo block resets: remove default block margins and constrain size */
.tcc-wordmark.wp-block-site-logo,
.tcc-wordmark .wp-block-site-logo {
	margin:         0;
}
.tcc-wordmark a,
.tcc-wordmark .custom-logo-link {
	display:        flex;
	align-items:    center;
	line-height:    0;
}
.tcc-wordmark__image,
.tcc-wordmark img,
.tcc-wordmark .custom-logo {
	display:        block;
	width:          auto;
	height:         auto;
	max-height:     36px;
	max-width:      160px;
	object-fit:     contain;
	margin-bottom:  0;
}

/* ─── Desktop primary nav ───────────────────────────────────────────── */
.tcc-primary-nav {
	display:     flex;
	flex:        1;
	align-items: stretch;
	height:      100%;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.tcc-nav-item {
	position: relative;
	display:  flex;
	align-items: center;
}

.tcc-nav-top {
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	height:        var(--tcc-nav-height);
	padding:       8px 0.875rem 0 0.875rem;
	border:        none;
	border-bottom: 3px solid transparent;
	background:    none;
	font-family:   inherit;
	font-size:     0.90625rem; /* 14.5px */
	font-weight:   600;
	color:         var(--tcc-nav-ink);
	cursor:        pointer;
	white-space:   nowrap;
	text-decoration: none;
}
.tcc-nav-top:hover,
.tcc-nav-item[data-open] .tcc-nav-top {
	color:               var(--tcc-nav-teal);
	border-bottom-color: var(--tcc-nav-accent);
}

.tcc-nav-chevron {
	font-size:  0.5rem;
	color:      var(--tcc-nav-muted);
	line-height: 1;
	display:    inline-block;
}

/* ─── Dropdown panel ────────────────────────────────────────────────── */
.tcc-nav-panel {
	position:        absolute;
	top:             calc(var(--tcc-nav-height) + 1px);
	left:            0;
	min-width:       290px;
	background:      var(--tcc-nav-bg);
	border:          1px solid var(--tcc-nav-border);
	border-top:      3px solid var(--tcc-nav-accent);
	border-radius:   0 0 12px 12px;
	box-shadow:      var(--tcc-nav-shadow);
	padding:         0.5rem;
	z-index:         200;
	list-style:      none;
	margin:          0;
}

.tcc-nav-panel__subtitle {
	font-size:      0.6875rem; /* 11px */
	color:          var(--tcc-nav-muted);
	font-style:     italic;
	padding:        0.25rem 0.75rem 0.5rem;
	border-bottom:  1px dashed var(--tcc-nav-border);
	margin-bottom:  0.25rem;
}

.tcc-nav-panel a {
	display:         block;
	text-decoration: none;
	color:           var(--tcc-nav-ink);
	font-size:       0.875rem;
	padding:         0.5625rem 0.75rem;
	border-radius:   8px;
	line-height:     1.4;
}
.tcc-nav-panel a:hover {
	background: var(--tcc-nav-mist);
	color:      var(--tcc-nav-teal);
}
.tcc-nav-panel a .tcc-nav-panel__desc {
	display:     block;
	font-size:   0.71875rem; /* 11.5px */
	color:       var(--tcc-nav-muted);
	margin-top:  2px;
	font-weight: 400;
}

/* ─── Header CTA button ─────────────────────────────────────────────── */
.tcc-header-cta {
	margin-left:   auto;
	padding:       0.5rem 1.25rem;
	background:    var(--tcc-nav-accent);
	color:         var(--wp--preset--color--paper);
	font-weight:   600;
	font-size:     0.875rem;
	border-radius: 6px;
	text-decoration: none;
	white-space:   nowrap;
	flex-shrink:   0;
}
.tcc-header-cta:hover {
	background: var(--tcc-nav-teal-dk);
}

/* ─── Burger button (mobile only) ───────────────────────────────────── */
.tcc-burger {
	display:         none;
	flex-direction:  column;
	justify-content: center;
	gap:             6px;
	width:           40px;
	height:          40px;
	padding:         8px;
	background:      none;
	border:          none;
	cursor:          pointer;
	margin-left:     auto;
}
.tcc-burger-bar {
	display:       block;
	width:         100%;
	height:        2px;
	background:    var(--tcc-nav-ink);
	border-radius: 2px;
	transform-origin: center;
}

/* ─── Mobile nav drawer ─────────────────────────────────────────────── */
.tcc-mobile-nav {
	display:          none;
	overflow:         hidden;
	background:       var(--tcc-nav-bg);
	border-top:       1px solid var(--tcc-nav-border);
}
.tcc-mobile-nav__list {
	list-style: none;
	margin:     0;
	padding:    0;
}
.tcc-mobile-accordion-btn {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         0.875rem 1.5rem;
	background:      none;
	border:          none;
	border-bottom:   1px solid var(--tcc-nav-border);
	font-family:     inherit;
	font-size:       0.9375rem;
	font-weight:     600;
	color:           var(--tcc-nav-ink);
	cursor:          pointer;
	text-align:      left;
}
.tcc-mobile-accordion-btn .tcc-nav-chevron {
	font-size: 0.625rem;
}
/* Anchor variant of the accordion button (top-level links with no submenu). */
a.tcc-mobile-accordion-btn {
	text-decoration: none;
}
.tcc-mobile-submenu {
	list-style: none;
	margin:     0;
	padding:    0;
	background: var(--tcc-nav-mist);
}
.tcc-mobile-submenu a {
	display:         block;
	padding:         0.625rem 1.5rem 0.625rem 2rem;
	font-size:       0.875rem;
	color:           var(--tcc-nav-ink);
	text-decoration: none;
	border-bottom:   1px solid var(--tcc-nav-border);
}
.tcc-mobile-submenu a:hover {
	color: var(--tcc-nav-teal);
}

/* ─── Responsive breakpoints ────────────────────────────────────────── */
@media (max-width: 767px) {
	.tcc-primary-nav,
	.tcc-header-cta {
		display: none;
	}
	.tcc-burger {
		display: flex;
	}
	.tcc-mobile-nav {
		display: block;
	}
	.tcc-header-inner {
		height:  60px;
		padding: 0 1rem;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.tcc-nav-top {
		padding:   8px 0.625rem 0 0.625rem;
		font-size: 0.8125rem;
	}
}