/**
 * Fenceology header navigation.
 *
 * Companion to inc/fenceology-nav.php and assets/js/fenceology-nav.js.
 * Tokens and measurements follow the design handoff, with two agreed changes:
 * the active item uses brand cyan rather than the handoff's purple, and the
 * panel footer strip / Service Areas note are omitted (not in the WP menu).
 *
 * Above 1200px: horizontal bar, full-viewport dropdown panels.
 * Below 1200px: off-canvas drawer with accordions.
 *
 * Measured, the bar needs 1334px with everything showing: logo 200 + nav 724 +
 * phone 161 + CTA 249. Between 1200 and 1333 fenceology-header.css hides the
 * phone block and trims the CTA, which frees far more room than squeezing the
 * nav ever could — the phone stays reachable as the drawer's cyan call button
 * below 1200 and in the utility bar above it.
 *
 * IMPORTANT: this breakpoint is duplicated as DESKTOP_MIN in
 * assets/js/fenceology-nav.js. Change both together.
 *
 * The panels are `position: fixed` and their top edge comes from
 * --fen-panel-top, which the JS sets from the live header's bottom edge. That
 * keeps them full-bleed and correctly placed under the sticky header without
 * hard-coding a header height.
 *
 * @package roofio
 */

.fen-nav-root {
	--fen-navy: #0f1c2e;
	--fen-navy-bar: #131e2e;
	--fen-cyan: #00aeef;
	--fen-cyan-dark: #0098c9;
	--fen-panel-link: #dbe4ef;
	--fen-muted: #93a4b8;
	--fen-divider: rgba(148, 163, 184, 0.22);
	--fen-divider-strong: rgba(148, 163, 184, 0.35);
	--fen-hover-bg: rgba(0, 174, 239, 0.14);
	--fen-panel-shadow: 0 24px 48px rgba(4, 12, 22, 0.35);
	--fen-panel-top: 132px;

	position: relative;
	display: flex;
	align-items: center;
	font-family: "Poppins", var(--e-global-typography-primary-font-family, system-ui), sans-serif;
}

.fen-nav-root *,
.fen-nav-root *::before,
.fen-nav-root *::after {
	box-sizing: border-box;
}

.fen-nav-root .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lists: the theme and Bootstrap both style ul/li, so reset explicitly. */
.fen-nav__list,
.fen-panel__grid,
.fen-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fen-nav a {
  text-decoration: none;
  font-family: 'Nunito Sans';
}

/* ---------------------------------------------------------------------------
   Caret — 8px square rotated, shared by desktop items and drawer accordions
   ------------------------------------------------------------------------ */

.fen-nav__caret {
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* The ink of a two-border chevron sits below the box centre when it points
	   down and above it when it points up, so the optical nudge has to flip
	   sign with the rotation — a fixed margin-top looks right closed and too
	   high open. translateY is listed before rotate so it stays in screen space
	   rather than being rotated along with the chevron. */
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.fen-nav__item.is-open > .fen-nav__link .fen-nav__caret,
.fen-nav__item.is-open > .fen-nav__toggle .fen-nav__caret,
.fen-col.is-open > .fen-col__toggle .fen-nav__caret {
	transform: translateY(2px) rotate(-135deg);
}

/* ---------------------------------------------------------------------------
   Desktop
   ------------------------------------------------------------------------ */

@media only screen and (min-width: 1200px) {

	/* Mobile-only chrome. */
	.fen-nav__bar,
	.fen-nav__backdrop,
	.fen-nav__head,
	.fen-nav__foot,
	.fen-nav__toggle,
	.fen-col__toggle {
		display: none;
	}

	.fen-nav__list {
		display: flex;
		align-items: stretch;
	}

	.fen-nav__item {
		display: flex;
    padding: 0 20px;
	}

	.fen-nav-root .fen-nav__link {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		min-height: 55px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		color: var(--fen-navy-bar);
		border-bottom: 3px solid transparent;
		transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	}

	/* Every hover colour in this component is prefixed with .fen-nav-root.
	   Three generic `a:hover` rules reach these links — bootstrap.min.css,
	   default.css, and the Customizer's inline `a:hover { color: #152132 }` —
	   all at specificity (0,1,1). A bare `.fen-col__title` (0,1,0) loses
	   outright, and a bare `.fen-nav__link:hover` (0,1,1) merely ties and then
	   loses on source order, because the Customizer's inline CSS prints after
	   this file. The prefix lifts these to (0,2,1) and settles it. On the navy
	   panel, losing meant hovered text turned #152132 on #0F1C2E — invisible. */
	.fen-nav-root .fen-nav__link:hover,
	.fen-nav-root .fen-nav__link:focus-visible {
		color: var(--fen-cyan);
	}

	/* Active item: the handoff's solid block, in brand cyan. */
	.fen-nav__item.is-current > .fen-nav__link {
		padding: 0 22px;
		font-weight: 600;
		color: #fff;
		background-color: var(--fen-cyan);
	}

	.fen-nav__item.is-current > .fen-nav__link:hover,
	.fen-nav__item.is-current > .fen-nav__link:focus-visible {
		color: #fff;
		background-color: var(--fen-cyan-dark);
	}

	.fen-nav__item.is-ancestor > .fen-nav__link {
		color: var(--fen-cyan);
	}

	/* Open parent: cyan label + cyan underline. */
	.fen-nav__item.is-open > .fen-nav__link {
		color: var(--fen-cyan);
		border-bottom-color: var(--fen-cyan);
	}

	/* Caret rotation is handled once, above the media queries, so the optical
	   nudge stays paired with the rotation. */

	.fen-nav-root .fen-nav__link:focus-visible {
		outline: 2px solid var(--fen-cyan);
		outline-offset: -2px;
	}

	/* --- Panels ---------------------------------------------------------- */

	.fen-panel {
		position: fixed;
		top: var(--fen-panel-top);
		left: 0;
		right: 0;
		z-index: 999;
		background-color: var(--fen-navy);
		border-top: 3px solid var(--fen-cyan);
		box-shadow: var(--fen-panel-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
		max-height: calc(100vh - var(--fen-panel-top));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.fen-nav__item.is-open > .fen-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.fen-panel__inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 38px 32px 34px;
	}

	.fen-panel__grid {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 28px 24px;
	}

	/* Two-level panels (Service Areas) are a narrow grid of plain links. */
	.fen-panel--flat .fen-panel__grid {
		grid-template-columns: repeat(3, minmax(0, 180px));
		gap: 4px 24px;
	}

	.fen-col {
		display: flex;
		flex-direction: column;
		gap: 14px;
		min-width: 0;
	}

	.fen-col--plain {
		gap: 0;
	}

	.fen-nav-root .fen-col__title {
		padding-bottom: 12px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--fen-cyan);
		border-bottom: 1px solid var(--fen-divider);
	}
	.fen-nav-root .fen-col__title:hover,
	.fen-nav-root .fen-col__title:focus-visible {
		color: var(--fen-cyan);
	}

	.fen-col__list {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.fen-nav-root .fen-col__list a,
	.fen-nav-root .fen-col__link {
		display: block;
		margin-left: -10px;
		padding: 8px 10px;
		border-radius: 7px;
		font-size: 14.5px;
		line-height: 1.35;
		color: var(--fen-panel-link);
		text-wrap: pretty;
		transition: color 0.18s ease, background-color 0.18s ease;
	}

	.fen-nav-root .fen-col__link {
		font-size: 15px;
	}

	.fen-nav-root .fen-col__list a:hover,
	.fen-nav-root .fen-col__list a:focus-visible,
	.fen-nav-root .fen-col__item.current-menu-item > a,
	.fen-nav-root .fen-col__link:hover,
	.fen-nav-root .fen-col__link:focus-visible {
		color: #fff;
		background-color: var(--fen-hover-bg);
	}

	.fen-panel a:focus-visible {
		outline: 2px solid var(--fen-cyan);
		outline-offset: 1px;
	}

	/* The 20px item padding above adds ~136px across six items. It fits from
	   1440 up, but at 1400-1439 it leaves as little as 1px between the last nav
	   item and the phone block, so item spacing comes from the link padding
	   alone below 1440. This boundary is deliberately not 1400 — the phone
	   number and full CTA return at 1400, the extra item spacing at 1440. */
	@media only screen and (max-width: 1439px) {

		.fen-nav__item {
			padding: 0;
		}
	}

	/* 1200–1399px: 3 columns, tighter nav padding (handoff §Responsive). */
	@media only screen and (max-width: 1399px) {

		.fen-panel__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.fen-panel__inner {
			padding: 32px 24px;
		}

		.fen-nav-root .fen-nav__link {
			padding: 0 12px;
		}

		.fen-nav__item.is-current > .fen-nav__link {
			padding: 0 14px;
		}
	}

}

/* ---------------------------------------------------------------------------
   Mobile + tablet — off-canvas drawer
   ------------------------------------------------------------------------ */

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

	/* The root fills its column, so the buttons are pushed to the right edge
	   from inside it rather than by margin on the root itself. */
	.fen-nav-root {
		justify-content: flex-end;
	}

	/* Call + burger pair, 48x48 each per the handoff. */
	.fen-nav__bar {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
	}

	.fen-nav-root .fen-nav__call,
	.fen-nav-root .fen-nav__burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.fen-nav-root .fen-nav__call {
		background-color: var(--fen-cyan);
		font-size: 22px;
		line-height: 1;
	}

	.fen-nav-root .fen-nav__call:hover,
	.fen-nav-root .fen-nav__call:focus-visible {
		background-color: var(--fen-cyan-dark);
		color: #fff;
	}

	.fen-nav-root .fen-nav__burger {
		background-color: var(--fen-navy-bar);
	}

	.fen-nav-root .fen-nav__burger:hover,
	.fen-nav-root .fen-nav__burger:focus-visible {
		background-color: var(--fen-cyan);
	}

	/* Three 20x2 bars, 5px apart. */
	.fen-nav__burger-bars,
	.fen-nav__burger-bars::before,
	.fen-nav__burger-bars::after {
		display: block;
		width: 20px;
		height: 2px;
		background-color: currentColor;
	}

	.fen-nav__burger-bars {
		position: relative;
	}

	.fen-nav__burger-bars::before,
	.fen-nav__burger-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.fen-nav__burger-bars::before {
		top: -5px;
	}

	.fen-nav__burger-bars::after {
		top: 5px;
	}

	.fen-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 9998;
		background-color: rgba(4, 12, 22, 0.5);
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	.fen-nav-root.is-drawer-open .fen-nav__backdrop {
		opacity: 1;
	}

	/* --- Drawer ---------------------------------------------------------- */

	.fen-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: auto;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		width: min(88vw, 380px);
		background-color: var(--fen-navy);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow: hidden;
	}

	.fen-nav-root.is-drawer-open .fen-nav {
		transform: translateX(0);
	}

	.fen-nav__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex: none;
		padding: 16px 20px;
		border-bottom: 1px solid rgba(148, 163, 184, 0.14);
	}

	.fen-nav-root .fen-nav__head-logo {
		display: flex;
		align-items: center;
		max-width: 150px;
		color: #fff;
		font-size: 15px;
	}

	/* Knock the logo out to white against the navy drawer. */
	.fen-nav-root .fen-nav__head-logo img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 40px;
		filter: brightness(0) invert(1);
	}

	.fen-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background-color: rgba(148, 163, 184, 0.15);
		color: #fff;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	.fen-nav__close:hover,
	.fen-nav__close:focus-visible {
		background-color: var(--fen-cyan);
	}

	.fen-nav__list {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Top-level rows: 52px, label and caret on one line. */
	.fen-nav__item {
		position: relative;
		display: block;
		border-bottom: 1px solid rgba(148, 163, 184, 0.14);
	}

	.fen-nav-root .fen-nav__link {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 8px 20px;
		padding-right: 64px;
		font-size: 16px;
		line-height: 1.3;
		color: #fff;
	}

	.fen-nav__item.is-current > .fen-nav__link {
		background-color: var(--fen-cyan);
		color: #fff;
		font-weight: 600;
	}

	/* Drawer rows had no hover state of their own, so the theme's generic
	   `a:hover` supplied one — #152132 on the #0F1C2E drawer, i.e. the row went
	   blank. The current item keeps its white-on-cyan. */
	.fen-nav-root .fen-nav__item:not(.is-current) > .fen-nav__link:hover,
	.fen-nav-root .fen-nav__item:not(.is-current) > .fen-nav__link:focus-visible {
		color: var(--fen-cyan);
	}

	/* The link stays a link; the caret button owns the accordion. */
	.fen-nav-root .fen-nav__link .fen-nav__caret {
		display: none;
	}

	.fen-nav__toggle,
	.fen-col__toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(148, 163, 184, 0.14);
		background: none;
		color: #fff;
		cursor: pointer;
	}

	.fen-nav__toggle {
		height: 52px;
	}

	/* Caret rotation is handled once, above the media queries. */

	.fen-nav__item.is-open > .fen-nav__toggle {
		color: var(--fen-cyan);
	}

	/* --- Panels become accordion bodies --------------------------------- */

	.fen-panel {
		display: none;
		background-color: rgba(4, 12, 22, 0.35);
	}

	.fen-nav__item.is-open > .fen-panel {
		display: block;
	}

	.fen-panel__inner {
		padding: 0;
	}

	.fen-panel__grid {
		display: block;
	}

	.fen-col {
		position: relative;
		border-top: 1px solid rgba(148, 163, 184, 0.14);
	}

	/* Group heading: 48px, uppercase, cyan when open. */
	.fen-nav-root .fen-col__title {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 8px 64px 8px 32px;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #fff;
	}

	.fen-col.is-open > .fen-col__title {
		color: var(--fen-cyan);
	}

	/* Same generic `a:hover` problem as on desktop — without this the heading
	   turns #152132 on the navy drawer and disappears. Touch devices latch
	   :hover after a tap, so this is not desktop-only. */
	.fen-nav-root .fen-col__title:hover,
	.fen-nav-root .fen-col__title:focus-visible {
		color: var(--fen-cyan);
	}

	.fen-col__toggle {
		height: 48px;
	}

	.fen-col__list {
		display: none;
	}

	.fen-col.is-open > .fen-col__list {
		display: block;
	}

	.fen-nav-root .fen-col__list a,
	.fen-nav-root .fen-col__link {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 8px 20px 8px 44px;
		font-size: 15px;
		line-height: 1.35;
		color: var(--fen-panel-link);
	}

	/* Flat panels (Service Areas) have no headings, so indent one level less. */
	.fen-col--plain {
		border-top: 1px solid rgba(148, 163, 184, 0.14);
	}

	.fen-nav-root .fen-col__link {
		padding-left: 32px;
	}

	.fen-nav-root .fen-col__list a:hover,
	.fen-nav-root .fen-col__list a:focus-visible,
	.fen-nav-root .fen-col__item.current-menu-item > a,
	.fen-nav-root .fen-col__link:hover,
	.fen-nav-root .fen-col__link:focus-visible {
		background-color: var(--fen-hover-bg);
		color: #fff;
	}

	.fen-nav a:focus-visible,
	.fen-nav button:focus-visible {
		outline: 2px solid var(--fen-cyan);
		outline-offset: -2px;
	}

	/* --- Sticky drawer footer ------------------------------------------- */

	.fen-nav__foot {
		flex: none;
		padding: 16px 20px 20px;
		border-top: 1px solid rgba(148, 163, 184, 0.14);
		background-color: var(--fen-navy);
	}

	.fen-nav-root .fen-nav__foot-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 52px;
		padding: 12px 20px;
		border-radius: 10px;
		background-color: var(--fen-cyan);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-align: center;
		text-transform: uppercase;
	}

	.fen-nav-root .fen-nav__foot-cta:hover,
	.fen-nav-root .fen-nav__foot-cta:focus-visible {
		background-color: var(--fen-cyan-dark);
		color: #fff;
	}

	.fen-nav__foot-contact {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 6px 16px;
		margin-top: 12px;
		font-size: 13.5px;
	}

	.fen-nav__foot-contact a {
		color: var(--fen-muted);
	}

	.fen-nav__foot-contact a:hover,
	.fen-nav__foot-contact a:focus-visible {
		color: var(--fen-cyan);
	}
}

/* Scroll lock while the drawer is open. */
body.fen-nav-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.fen-nav-root .fen-nav,
	.fen-nav-root .fen-panel,
	.fen-nav-root .fen-nav__caret,
	.fen-nav-root .fen-nav__backdrop {
		transition-duration: 0.01ms;
	}
}