/**
 * Primary navigation.
 *
 * Written so the useful state is the default. If no script ever runs,
 * the burger is hidden, the panel is part of the page and every
 * submenu is open, so the menu is a plain list of links that works.
 * Collapsing is gated on one of two signals: `html.js`, set by a one-
 * line script in the head before anything is painted, or
 * `is-enhanced`, which the view script adds when it attaches the
 * behaviour. Every collapsed rule names both through
 * `:is(.is-enhanced, .js *)`, at the same specificity as the class
 * pair it replaced. A script failure therefore leaves more navigation
 * on screen, never less — and a working script no longer paints the
 * expanded menu first and then shrinks it, which was a layout shift of
 * about 0.5 on every desktop load.
 *
 * Palette is locked: Deep Navy, Warm Sand, Seafoam, Charcoal. Seafoam
 * appears here only as an underline, a border or a focus ring — never
 * as text on a light surface, where it would fail contrast.
 */

.tt-nav-root {
	inline-size: 100%;
}

/* ---------------------------------------------------------------
 * The list
 * --------------------------------------------------------------- */

.tt-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-nav__item {
	position: relative;
	margin: 0;
}

.tt-nav__link,
.tt-nav__sublink {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
}

/* The color is restated on hover on purpose. The theme's global link
   style turns a hovered link navy, which is right on a light page and
   made every label in this navy menu vanish under the pointer — the
   parent label while its dropdown was open, and each link in it
   (5 October 2026). */
.tt-nav__link:hover,
.tt-nav__sublink:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--seafoam);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.tt-nav__link[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--seafoam);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* A group heading with no page of its own. Not interactive, so it must
   not look interactive. */
.tt-nav__link--static {
	cursor: default;
	opacity: 0.92;
}


/* ---------------------------------------------------------------
 * Submenu disclosure
 * --------------------------------------------------------------- */

.tt-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.tt-nav__chevron {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-inline-end: 2px solid currentcolor;
	border-block-end: 2px solid currentcolor;
	transform: rotate(45deg) translate(-25%, -25%);
	transition: transform 150ms ease;
}

.tt-nav__item--parent.is-open > .tt-nav__toggle .tt-nav__chevron {
	transform: rotate(225deg) translate(-25%, -25%);
}

.tt-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------
 * Grouped submenu
 *
 * AREAS lists its six under two headings — Topsail Island and Mainland
 * Communities — so the wrapper is a div holding a labelled list per
 * group rather than one flat list. Everything above still applies: the
 * wrapper keeps the `.tt-nav__submenu` class, so the disclosure
 * behaviour, the desktop dropdown and the mobile accordion do not need
 * to know which shape they are holding.
 *
 * The heading is a paragraph, not a link and not a button. It names no
 * destination, and making it operable would put something in the tab
 * order that goes nowhere. The list beneath it points at it with
 * `aria-labelledby`, so the grouping is announced as well as drawn.
 * --------------------------------------------------------------- */

.tt-nav__sublist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-nav__subgroup-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;

	/* Sand rather than white, so the heading reads as subordinate to the
	   links beneath it without dropping below the contrast it needs.
	   Sand on navy measures about 11:1. */
	color: var(--wp--preset--color--sand);
}

.tt-nav__subgroup + .tt-nav__subgroup {
	margin-block-start: 0.75rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid rgb(232 223 203 / 22%);
}

/* ---------------------------------------------------------------
 * Panel actions — call and text, inside the mobile menu
 * --------------------------------------------------------------- */

.tt-nav__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

.tt-nav__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-block-size: 48px;
	padding-inline: 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------------------------------------------------------------
 * Burger
 *
 * Hidden until the script confirms it can manage the panel. Showing a
 * control that cannot do anything is worse than showing none.
 * --------------------------------------------------------------- */

.tt-nav__burger {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: 0.5rem 0.75rem;
	background: none;
	border: 1px solid rgb(255 255 255 / 45%);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.tt-nav__burger-bars {
	position: relative;
	display: block;
	inline-size: 18px;
	block-size: 2px;
	background-color: currentcolor;
}

.tt-nav__burger-bars::before,
.tt-nav__burger-bars::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	background-color: currentcolor;
}

.tt-nav__burger-bars::before {
	inset-block-start: -6px;
}

.tt-nav__burger-bars::after {
	inset-block-start: 6px;
}

.is-panel-open .tt-nav__burger-bars {
	background-color: transparent;
}

.is-panel-open .tt-nav__burger-bars::before {
	transform: translateY(6px) rotate(45deg);
}

.is-panel-open .tt-nav__burger-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ---------------------------------------------------------------
 * Enhanced — desktop
 *
 * The row appears where it fits on one line beside the two header marks:
 * the header's full 73rem width, reached at 1216px (29 September 2026,
 * T-82). Below that the menu collapses rather than folding to two rows.
 * --------------------------------------------------------------- */

@media (min-width: 1216px) {

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__bar {
		display: none;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__actions {
		display: none;
	}

	/* Anchored to the parent's trailing edge, not its leading one.
	   The menu is right-aligned in the header, so a dropdown opening
	   rightwards from the last few items runs off the page — at 1024 the
	   AREAS panel put 99px of document past the viewport and dragged a
	   horizontal scrollbar onto the whole page with it. Opening leftwards
	   from the item is the correct direction for a right-aligned menu and
	   keeps every panel inside the viewport at every width. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: 0;
		z-index: 40;
		display: none;
		min-inline-size: 15rem;
		padding: 0.5rem 0;
		background-color: var(--wp--preset--color--navy);
		border-block-start: 2px solid var(--wp--preset--color--seafoam);
		box-shadow: 0 12px 28px rgb(27 42 65 / 22%);
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item--parent.is-open > .tt-nav__submenu {
		display: block;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu .tt-nav__sublink {
		display: flex;
		padding: 0.35rem 1.15rem;
		letter-spacing: 0.08em;
	}

	/* The grouped dropdown is wider than a flat one, because two of its
	   labels are longer than any of the links under them and a heading
	   that wraps mid-phrase reads as two headings. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu--grouped {
		min-inline-size: 18rem;
		padding-block: 0.85rem;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__subgroup-label {
		padding-inline: 1.15rem;
		margin-block-end: 0.25rem;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__subgroup + .tt-nav__subgroup {
		margin-block-start: 0.65rem;
		padding-block-start: 0.65rem;
	}

	/* The parent link and its toggle read as one control visually while
	   remaining two controls in the accessibility tree. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item--parent {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;
	}

	/* Kept at the full target size rather than trimmed to fit. It is a
	   real control, and the row has the room. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__toggle {
		inline-size: 44px;
	}
}

/* ---------------------------------------------------------------
 * Enhanced — mobile panel
 * --------------------------------------------------------------- */

@media (max-width: 1215px) {

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__burger {
		display: inline-flex;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__panel {
		--tt-panel-head: 5.5rem;

		position: fixed;
		inset: 0;
		z-index: 60;
		display: none;
		overflow-y: auto;
		padding: 0 1.5rem 2.5rem;

		/* A link brought into view by the keyboard stops below the band
		   that holds the close button, not underneath it. */
		scroll-padding-block-start: var(--tt-panel-head);
		background-color: var(--wp--preset--color--navy);
	}

	/* The close button sits above the panel, in a band the list must not
	   scroll through. With a submenu open the list is taller than a phone
	   screen, and its rows used to slide up behind the button and show
	   through it (5 October 2026). This band is the panel's first row and
	   takes the place of its top padding: it stays at the top while the
	   list scrolls, opaque, so rows pass beneath it and cannot be seen or
	   tapped there. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__panel::before {
		content: "";
		position: sticky;
		inset-block-start: 0;
		z-index: 1;
		display: block;
		block-size: var(--tt-panel-head);
		margin-inline: -1.5rem;
		background-color: var(--wp--preset--color--navy);
		border-block-end: 1px solid rgb(232 223 203 / 22%);
	}

	/* Below 360px the menu button has its own row beneath the two marks,
	   so the list starts below the taller header (T-82, T-86). */
	@media (max-width: 359px) {

		.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__panel {
			--tt-panel-head: 9.5rem;
		}
	}

	.tt-nav-root:is(.is-enhanced, .js *).is-panel-open .tt-nav__panel {
		display: block;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item {
		border-block-end: 1px solid rgb(232 223 203 / 22%);
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item--parent {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__link,
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__sublink {
		min-block-size: 52px;
		font-size: 0.9375rem;
	}

	/* Accordion. Collapsed until its toggle says otherwise. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu {
		display: none;
		grid-column: 1 / -1;
		padding-block-end: 0.5rem;
		padding-inline-start: 1rem;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item--parent.is-open > .tt-nav__submenu {
		display: block;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu .tt-nav__item {
		border-block-end: 0;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__submenu .tt-nav__sublink {
		font-size: 0.875rem;
		letter-spacing: 0.06em;
		opacity: 0.9;
	}

	/* In the accordion the group heading sits inline with the links it
	   labels, so it needs the height that separates it from them rather
	   than the horizontal padding the dropdown uses. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__subgroup-label {
		margin-block: 0.85rem 0.35rem;
	}

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__subgroup:first-child .tt-nav__subgroup-label {
		margin-block-start: 0.35rem;
	}

	/* The burger must stay above the panel it opens, so it can close it. */
	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__bar {
		position: relative;
		z-index: 70;
		display: flex;
		justify-content: flex-end;
	}
}

/* Scroll lock, applied while the overlay is open. */
html.tt-scroll-locked,
html.tt-scroll-locked body {
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * Footer variant — one flat list, no disclosure behaviour
 * --------------------------------------------------------------- */

.tt-nav--compact {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.tt-nav--compact .tt-nav__link {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------
 * Contact, as a distinct action
 *
 * An approved content decision: Contact reads as an action rather than
 * another link in the row. It also groups the direct actions beneath
 * it, so it is a bordered control that still discloses a submenu — the
 * border wraps the link and its toggle together.
 *
 * Last in the file on purpose. These rules are more specific than the
 * single-class ones above, so declaring them here keeps specificity
 * ascending down the stylesheet.
 * --------------------------------------------------------------- */

.tt-nav__item--action {
	border: 1px solid rgb(255 255 255 / 55%);
}

/* The label is centred in the border: the same padding each side,
   less the trailing letter-space the last glyph carries, so the ink
   rather than the box sits in the middle. 0.75rem keeps the box close
   to its approved width, so the row still fits on one line beside the
   two header marks. A toggle beside the link brings its own 44px, so
   the link then keeps no end padding. */
.tt-nav__item--action .tt-nav__link {
	padding-inline: 0.75rem calc( 0.75rem - 0.1em );
}

.tt-nav__item--action .tt-nav__link:not(:last-child) {
	padding-inline-end: 0;
}

.tt-nav__item--action:hover {
	background-color: var(--wp--preset--color--base);
}

.tt-nav__item--action:hover .tt-nav__link,
.tt-nav__item--action:hover .tt-nav__toggle {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

/* On mobile the panel is already a full-width list, so the border would
   read as a stray box rather than a button. */
@media (max-width: 1215px) {

	.tt-nav-root:is(.is-enhanced, .js *) .tt-nav__item--action {
		border-inline: 0;
		border-block-start: 0;
	}
}