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

/* ─── Layout variables ──────────────────────────────────────────────── */
:root {
	--tcc-nav-height:      65px;
	--tcc-nav-bg:          var(--wp--preset--color--navy);
	--tcc-nav-panel-hover-ink: var(--wp--preset--color--navy);
	--tcc-nav-border:      color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
	--tcc-nav-ink:         var(--wp--preset--color--paper);
	--tcc-nav-teal:        var(--wp--preset--color--cyan);
	--tcc-nav-teal-dk:     var(--wp--preset--color--teal-dk);
	--tcc-nav-accent:      var(--wp--preset--color--cyan);
	--tcc-nav-mist:        var(--wp--preset--color--mist);
	--tcc-nav-muted:       var(--wp--preset--color--sky);
	--tcc-nav-shadow:      0 18px 40px -20px rgba(11, 70, 66, 0.4);
	--tcc-nav-max-width:   var(--wp--style--global--wide-size);
	scroll-padding-top: 84px;
}

/* ─── 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);
	padding-inline: 2rem;
	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;
	height:          var(--tcc-nav-height);
	width:           100%;
}

/* ─── 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 {
	box-sizing:    border-box;
	display:       inline-flex;
	align-items:   center;
	gap:           5px;
	height:        var(--tcc-nav-height);
	padding:       3px 0.75rem 0;
	border:        none;
	border-bottom: 3px solid transparent;
	background:    none;
	font-family:   inherit;
	font-size:     0.7475rem;
	font-weight:   500;
	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: transparent;
}

/* ─── Hybrid top-level item (own page + dropdown) ───────────────────── */
/* The hybrid variant splits one top-level item into a link to its own page
   and a separate dropdown toggle. Both children must inherit the shared
   top-level presentation, otherwise the link falls back to the default body
   link colour and the toggle renders as an unstyled native button. */
.tcc-nav-top--hybrid {
	gap:     0;
	padding: 3px 0 0;
	cursor:  default;
}

.tcc-nav-top__link,
.tcc-nav-top__toggle {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	height:          100%;
	margin:          0;
	border:          none;
	background:      none;
	font-family:     inherit;
	font-size:       inherit;
	font-weight:     inherit;
	line-height:     inherit;
	color:           inherit;
	text-decoration: none;
	cursor:          pointer;
	white-space:     nowrap;
}

.tcc-nav-top__link {
	padding: 0 0.25rem 0 0.75rem;
}

.tcc-nav-top__toggle {
	padding: 0 0.75rem 0 0.25rem;
}

.tcc-nav-top__link:hover,
.tcc-nav-top__toggle:hover,
.tcc-nav-item[data-open] .tcc-nav-top__link,
.tcc-nav-item[data-open] .tcc-nav-top__toggle {
	color: var(--tcc-nav-teal);
}

.tcc-nav-chevron {
	font-size:  0.46rem;
	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:      1px solid var(--tcc-nav-border);
	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.6325rem; /* 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.805rem;
	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-panel-hover-ink);
}
.tcc-nav-panel a .tcc-nav-panel__desc {
	display:     block;
	font-size:   0.6613rem; /* 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(--wp--preset--color--cyan);
	color:         var(--wp--preset--color--navy);
	font-weight:   600;
	font-size:     0.7475rem;
	border-radius: 2px;
	text-decoration: none;
	white-space:   nowrap;
	flex-shrink:   0;
}
.tcc-header-cta:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--navy);
}

.tcc-site-header :is(a, button) {
	-webkit-tap-highlight-color: color-mix(in srgb, var(--tcc-nav-teal) 24%, transparent);
}

.tcc-site-header :is(a, button):focus-visible {
	outline: 3px solid var(--wp--preset--color--cyan);
	outline-offset: 3px;
	transition: none;
}

.tcc-site-header :is(a, button):focus:not(:focus-visible) {
	outline: 0;
}

/* ─── Burger button (mobile only) ───────────────────────────────────── */
.tcc-burger {
	display:         none;
	flex-direction:  column;
	justify-content: center;
	gap:             6px;
	width:           44px;
	height:          44px;
	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 {
	box-sizing:      border-box;
	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.8625rem;
	font-weight:     600;
	color:           var(--tcc-nav-ink);
	cursor:          pointer;
	text-align:      left;
}
.tcc-mobile-accordion-btn .tcc-nav-chevron {
	font-size: 0.575rem;
}
/* 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 {
	box-sizing:      border-box;
	display:         block;
	min-height:      44px;
	padding:         0.625rem 1.5rem 0.625rem 2rem;
	font-size:       0.805rem;
	color:           var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom:   1px solid var(--tcc-nav-border);
}
.tcc-mobile-submenu a:hover {
	color: var(--wp--preset--color--teal);
}

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

@media (max-width: 32rem) {
	.tcc-site-header {
		padding-inline: 1.5rem;
	}
}

/* =====================================================================
 * Sticky site header.
 * Matches the approved design: the header pins to the top of the viewport
 * on every template at 65px tall, navy, with a faint teal hairline. The
 * design shows no change of appearance on scroll, so nothing is animated
 * and no scroll listener is required.
 * ===================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #0e2841;
	border-bottom: 0.8px solid rgba(0, 179, 190, 0.2);
}

/* The admin bar is fixed above the document, so the header pins beneath it
 * rather than underneath it. */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}