/* =====================================================
 * Appagentix-style header
 * Top menu: Poppins 500 / 16px / line-height 44px.
 * Dropdown: 4 columns, label 600 + optional description 400.
 * Hover: background #f6f7ff only (no text colour change).
 * ===================================================== */

/* Suppress the mouse-click focus ring, but keep a real indicator for
   keyboard users. The previous rule also cleared :focus-visible, which
   left every link and button on the site with no visible focus state. */
*:focus {
	outline: none;
}

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--tta-purple, #8347EC);
	outline-offset: 3px;
}

.tta-nav, .tta-nav * { box-sizing: border-box; }

/* Nav metrics. Eight top-level links have to share the 1200px
   container with a 179px logo, so the horizontal padding is a token
   rather than a literal - it is the value that decides whether the
   row fits. */
:root {
	--nav-gap: 6px;
	--nav-link-pad: 12px;
}

.tta-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--tta-lavender-dark, #e6dbfc);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tta-header__inner {
	position: relative;
	/* Width comes from the global container in layout.css. */
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
}

/* Logo */
.tta-header__logo { display: flex; align-items: center; align-self: center; padding: 12px 0; flex-shrink: 0; }
.tta-header__logo a { display: inline-flex; align-items: center; text-decoration: none; }
/* 30px tall + the 12px column padding keeps the header at its existing
   54px height. The source file is 274x46, so scaling down leaves headroom
   and the mark stays crisp on HiDPI screens. */
.tta-header__logo img { height: 30px; width: auto; display: block; flex: 0 0 auto; }
.tta-logo-fallback {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--tta-charcoal, #222222);
}

/* Hamburger (mobile): animates to an X when open */
.tta-nav-toggle { display: none; }
.tta-nav-toggle-label {
	display: none;
	position: relative;
	cursor: pointer;
	width: 40px;
	height: 40px;
	padding: 8px;
}
.tta-nav-toggle-label span {
	position: absolute;
	left: 8px;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--tta-charcoal, #222222);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
.tta-nav-toggle-label span:nth-child(1) { top: 10px; }
.tta-nav-toggle-label span:nth-child(2) { top: 19px; }
.tta-nav-toggle-label span:nth-child(3) { top: 28px; }
.tta-nav-toggle:checked ~ .tta-nav-toggle-label span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.tta-nav-toggle:checked ~ .tta-nav-toggle-label span:nth-child(2) { opacity: 0; }
.tta-nav-toggle:checked ~ .tta-nav-toggle-label span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Desktop navigation */
.tta-nav { flex: 1; display: flex; }
.tta-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: var(--nav-gap);
}
.tta-nav > ul > li { display: flex; }

/* Top-level items: full header height (stretch), Poppins 500,
   16px / line-height 44px, with left/right padding */
.tta-nav > ul > li > a {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 44px;
	color: #000000;
	text-decoration: none;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 var(--nav-link-pad);
	border-bottom: 2px solid transparent;
}
/* Hover: bottom border + background #f6f7ff; text colour stays black */
.tta-nav > ul > li > a:hover {
	background: #f6f7ff;
	color: #000000;
	border-bottom-color: var(--wp--preset--color--tta-purple, #973dd9);
}

/* ---------- Full-width 4-column dropdown panel ---------- */
.tta-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	display: block;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--tta-lavender-dark, #e6dbfc);
	border-top: 3px solid var(--wp--preset--color--tta-purple, #973dd9);
	box-shadow: 0 20px 40px rgba(20, 20, 43, 0.14);
	padding: 22px 10px;
	opacity: 0;
	visibility: hidden;
	transition: 0.18s ease;
}
.tta-mega-body { display: flex; width: 100%; }
/* 4 equal columns; the dividers sit on the columns, not the items */
.tta-mm-col {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 12px;
}
/* Left border applies to every column except the first */
.tta-mm-col + .tta-mm-col {
	border-left: 1px solid var(--wp--preset--color--tta-lavender-dark, #e6dbfc);
}
.tta-mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tta-mega ul li { margin: 0; padding: 0; }
.tta-mega ul a {
	display: block;
	font-family: "Poppins", sans-serif;
	text-decoration: none;
	color: #000000;
	padding: 10px 10px;
	border-radius: 6px;
}
/* Label: Poppins 600 / 13px / 18px */
.tta-mm-title {
	display: block;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	color: #000000;
}
/* Description: Poppins 400 / 12px / 17px, 60% black (optional) */
.tta-mm-desc {
	display: block;
	margin-top: 3px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 17px;
	color: rgba(0, 0, 0, 0.6);
}
/* Dropdown hover: background only, no text colour change */
.tta-mega ul a:hover {
	background: #f6f7ff;
	color: #000000;
}
.tta-mega ul a:hover .tta-mm-title { color: #000000; }
.tta-mega ul a:hover .tta-mm-desc { color: rgba(0, 0, 0, 0.6); }

/* Reveal panel on hover OR keyboard focus (desktop) */
@media (min-width: 1024px) {
	.tta-has-mega:hover .tta-mega,
	.tta-has-mega:focus-within .tta-mega {
		opacity: 1;
		visibility: visible;
	}

	/* Single-column dropdown: a top-level menu item without the "Mega
	   menu" box ticked in Appearance -> Menus. The same panel, hung from
	   its own item instead of spanning the header; the last item's opens
	   leftwards so it stays on screen. Mobile needs nothing extra: there
	   every panel is already a full-width accordion. */
	.tta-nav > ul > li.tta-has-dropdown { position: relative; }
	.tta-has-dropdown > .tta-mega {
		left: 0;
		right: auto;
		width: 280px;
	}
	.tta-nav > ul > li.tta-has-dropdown:last-child > .tta-mega {
		left: auto;
		right: 0;
	}

	/* Dropdown chevron after every item that has a submenu. header.php
	   adds .tta-parent exactly when an item has 'links', so adding or
	   removing a dropdown there adds or removes its chevron - no item is
	   named here. Drawn as a mask so it takes the link's colour; the path
	   is chevron-down from inc/icons.php. Desktop only: the mobile drawer
	   has its own +/- toggle on these links. */
	.tta-parent > a::after {
		content: "";
		flex: 0 0 auto;
		width: 10px;
		height: 10px;
		margin-left: 6px;
		background-color: currentColor;
		-webkit-mask: var(--tta-chevron) center / contain no-repeat;
		mask: var(--tta-chevron) center / contain no-repeat;
		transition: transform 0.18s ease;
	}

	/* High-contrast modes force backgrounds to the page colour, which
	   would erase a mask painted with one: paint it in the system link
	   colour instead, so it matches the label in any contrast theme. */
	@media (forced-colors: active) {
		.tta-parent > a::after {
			forced-color-adjust: none;
			background-color: LinkText;
		}
	}

	/* Points up while the panel is open: the same hover and focus that
	   reveal it, above. */
	.tta-has-mega:hover > a::after,
	.tta-has-mega:focus-within > a::after {
		transform: rotate(180deg);
	}
}

.tta-nav {
	/* Cropped to the glyph (viewBox 5 5 14 14) so the chevron fills the
	   10px box at a stroke that matches the 500-weight labels. */
	--tta-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 14 14' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* The chevrons widen the four parents by 16px each. Narrower desktops
   give that width back from the link padding, so the row still fits on
   one line from the same width it did before the chevrons. */
@media (min-width: 1024px) and (max-width: 1135px) {
	:root {
		--nav-link-pad: 8px;
	}
}

/* ---------- Mobile: full-height white drawer + animated menu ---------- */
@media (max-width: 1023px) {
	.tta-nav-toggle-label {
		width: 24px;
		height: 24px;
		top: 6px;
		display: flex;
	}

	/* Full-height drawer, slides in from the top (smooth) */
	.tta-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #ffffff;
		height: calc(100vh - 60px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
		overflow-y: auto;
		overflow-x: hidden;
		border-top: 3px solid var(--wp--preset--color--tta-purple, #973dd9);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
		scrollbar-width: thin;
		scrollbar-color: #c8c8c8 #f1f1f1;
	}
	.tta-nav::-webkit-scrollbar { width: 12px; }
	.tta-nav::-webkit-scrollbar-track { background: #f1f1f1; }
	.tta-nav::-webkit-scrollbar-thumb { background: #c8c8c8; border-radius: 6px; }
	.tta-nav::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
	.tta-nav-toggle:checked ~ .tta-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Full-width items */
	.tta-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		justify-content: flex-start;
	}
	.tta-nav > ul > li { display: block; width: 100%; }
	.tta-nav > ul > li > a {
		display: block;
		width: 100%;
		line-height: 28px;
		padding: 12px 20px;
		color: #000000;
		border-bottom: 1px solid var(--wp--preset--color--tta-lavender, #f5f0ff);
		font-family: "Poppins", sans-serif;
		font-weight: 500;
		font-size: 16px;
		transition: background-color 0.25s ease, color 0.25s ease;
		overflow-wrap: break-word;
	}
	.tta-nav > ul > li > a:hover { background: #f6f7ff; color: #000000; border-bottom-color: var(--wp--preset--color--tta-lavender, #f5f0ff); }

	/* +/- toggle icon on parent items (animated) */
	.tta-parent > a { position: relative; }
	.tta-parent > a::before,
	.tta-parent > a::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		width: 12px;
		height: 2px;
		background: #000000;
		border-radius: 1px;
		transition: transform 0.3s ease, opacity 0.3s ease;
	}
	.tta-parent > a::before { transform: translateY(-50%); }
	.tta-parent > a::after { transform: translateY(-50%) rotate(90deg); }
	.tta-parent.is-open > a { background: #f6f7ff; }
	.tta-parent.is-open > a::after { transform: translateY(-50%) rotate(180deg); opacity: 0; }

	/* Dropdown panels: white, collapsed by default, open/close smoothly
	   with exact content height (grid-template-rows technique) */
	.tta-mega {
		display: grid;
		grid-template-rows: 0fr;
		position: static;
		width: 100%;
		background: #ffffff;
		box-shadow: none;
		border: none;
		border-left: 3px solid var(--wp--preset--color--tta-purple, #973dd9);
		padding: 0;
		margin: 0;
		visibility: visible;
		opacity: 0;
		transition: grid-template-rows 0.45s ease, opacity 0.3s ease;
		overflow-wrap: break-word;
	}
	.tta-mega-body {
		display: block;
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}
	.tta-has-mega.is-open .tta-mega {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
	}
	/* Long panels never exceed 60% of the viewport; they scroll inside */
	.tta-has-mega.is-open .tta-mega-body {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 60vh;
	}
	.tta-mm-col + .tta-mm-col { border-left: none; }
	.tta-mm-col { padding: 0; width: 100%; flex: none; }
	.tta-mega ul { padding: 6px 10px 10px; }
	.tta-mega ul li { padding: 2px 0; }

	.tta-mega ul a {
		color: #000000;
		background: transparent;
		transition: background-color 0.25s ease, color 0.25s ease;
		overflow-wrap: break-word;
	}
	.tta-mm-title { color: #000000; }
	.tta-mm-desc { color: rgba(0, 0, 0, 0.6); }
	.tta-mega ul a:hover { background: #f6f7ff; color: #000000; }
	.tta-mega ul a:hover .tta-mm-title { color: #000000; }
	.tta-mega ul a:hover .tta-mm-desc { color: rgba(0, 0, 0, 0.6); }

	.tta-parent.tta-has-mega a, .tta-parent.tta-has-mega.is-open a{
		max-height: max-content;
	}
}