/* Global header — mobile navigation (hamburger + slide-down panel).
   Loaded on every page after app.css. The desktop nav uses Tailwind utilities
   in header.php (hidden md:flex); these rules cover only the mobile-only pieces,
   so no Tailwind recompile is needed. Breakpoint matches the nav's `md` (768px). */

.te-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #0d1f3c;
	cursor: pointer;
}
.te-nav-toggle svg { width: 26px; height: 26px; }
.te-nav-toggle__open { display: block; }
.te-nav-toggle__close { display: none; }
.te-nav-toggle.is-open .te-nav-toggle__open { display: none; }
.te-nav-toggle.is-open .te-nav-toggle__close { display: block; }

.te-mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	background: #ffffff;
	border-top: 1px solid #f3f4f6;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
	padding: 8px 0 14px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}
.te-mobile-menu.is-open { display: block; }
.te-mobile-menu a {
	display: block;
	padding: 12px 24px;
	color: #0d1f3c;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	text-decoration: none;
}
.te-mobile-menu a:hover { background: #f9fafb; }
.te-mobile-menu a.is-active { color: #1a5fa8; font-weight: 600; }
/* "Our Brands" is a collapsible toggle styled as a peer of the other menu
   links, with a caret that rotates when expanded. */
.te-mobile-menu__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 12px 24px;
	border: 0;
	background: none;
	color: #0d1f3c;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}
.te-mobile-menu__toggle:hover { background: #f9fafb; }
.te-mobile-menu__caret { flex-shrink: 0; transition: transform .2s ease; }
.te-mobile-menu__toggle[aria-expanded="true"] .te-mobile-menu__caret { transform: rotate(180deg); }
/* Brand sub-links: collapsed by default, revealed when the toggle is expanded.
   Indent only — same typography as the other links (hierarchy shown by indent). */
.te-mobile-menu__sub { display: none; }
.te-mobile-menu__toggle[aria-expanded="true"] + .te-mobile-menu__sub { display: block; }
.te-mobile-menu__sub a {
	padding-left: 40px;
	color: #4a5565;
}

/* Desktop: the hamburger + panel are mobile-only; the nav itself shows via md:flex. */
@media (min-width: 768px) {
	.te-nav-toggle,
	.te-mobile-menu { display: none !important; }
}

/* Mobile: the inline header logo is left-aligned (its px-28 centering padding
   is for the desktop 3-column header only). Drop the padding so it sits at the
   container edge, in line with the menu items below. The floating circle logo
   is retired here entirely — the regular left logo shows at all times, same
   as the expanded-menu state (!important outranks the scroll JS's inline styles). */
@media (max-width: 767.98px) {
	.te-header-logo-wrap { padding-left: 0; padding-right: 0; }
	#te-floating-logo { display: none !important; }
	#te-header-logo { opacity: 1 !important; pointer-events: auto !important; }
}

/* Logo initial state. global.js overrides opacity / transform / display /
   pointer-events at runtime (scroll + mobile-menu state); these are the values
   the elements start with (formerly inline). */
#te-floating-logo {
	top: 80px;
	transform: translateX(-50%) translateY(-50%);
}
/* Slightly larger floating circle + wordmark than the Tailwind w-32/h-20
   defaults in the markup (those utilities' larger steps aren't compiled). */
#te-floating-logo > a > div { width: 144px; height: 144px; }
#te-floating-logo img { height: 92px; }
#te-header-logo {
	opacity: 0;
	pointer-events: none;
}
#te-header-logo img { height: 80px; }

/* Tablet: the logo's 112px side paddings crowd the nav links out of the tight
   header — slim them so the nowrap links fit without wrapping or overflow. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.te-header-logo-wrap { padding-left: 32px; padding-right: 32px; }
}

/* Retire the floating circle logo below full desktop — always show the inline
   header logo instead (!important outranks the scroll JS's inline styles).
   With the circle gone, the brands dropdown can anchor LEFT under its toggle
   and grow rightward without being cut off at the viewport's left edge (the
   right-anchored menu only clears it above ~1220px) or covering the logo. */
@media (min-width: 768px) and (max-width: 1319.98px) {
	#te-floating-logo { display: none !important; }
	#te-header-logo { opacity: 1 !important; pointer-events: auto !important; }
	#te-brands-menu { right: auto; left: 0; margin-top: 24px; }
}

/* Smart sticky header (all levels): slides away on scroll-down, returns as
   soon as the user scrolls up. global.js toggles .is-hidden by scroll
   direction; the header stays put near the top of the page and while the
   mobile menu is open. */
.te-header-bar { transition: transform 0.3s ease; }
.te-header-bar.is-hidden { transform: translateY(-100%); }

/* Global footer. */
.te-footer { background: #06162F; }
/* Below desktop the footer columns are narrow, so the brand name wraps
   awkwardly beside the logo — stack it under the logo instead. */
.te-footer__brand { flex-direction: column; align-items: flex-start; }
@media (min-width: 1024px) {
	.te-footer__brand { flex-direction: row; align-items: center; }
}
.te-footer__divider { max-width: 660px; margin-left: auto; margin-right: auto; }
.te-footer__copyright {
	font-family: Inter, system-ui, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.8);
}
.te-footer__copyright a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.te-footer__copyright a:hover { color: #ffffff; }

/* Mobile: footer brand lockup — the name drops a touch further below the
   logo (12px → 20px), hugs the tagline tighter (16px → 8px), and
   "Educate. Develop. Deploy." steps up 1pt (14px → 15px). */
@media (max-width: 767.98px) {
	.te-footer__brand { gap: 20px; margin-bottom: 8px; }
	.te-footer__brand + p { font-size: 15px; }
}

/* Accessible validation colors for ANY Contact Form 7 form site-wide — a
   fallback for forms not wrapped in .te-form / on pages that don't load
   forms.css. #dc2626 meets WCAG AA contrast on light backgrounds. The
   .te-form-scoped rules in forms.css still win on the two styled forms. */
.wpcf7-not-valid { border-color: #dc2626; }
.wpcf7-not-valid-tip {
	display: block;
	color: #dc2626;
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

/* Hide the reCAPTCHA v3 floating badge site-wide. Contact Form 7 loads reCAPTCHA
   on every page, which injects a fixed .grecaptcha-badge in the bottom-right.
   Google's terms permit hiding the badge as long as the reCAPTCHA + Google
   Privacy Policy / Terms attribution is shown near the protected form — that
   text is printed below every CF7 form by te_cf7_disclaimer() in inc/cf7.php.
   visibility:hidden (not display:none) keeps the widget functional. */
.grecaptcha-badge { visibility: hidden !important; }

/* CookieYes: once the visitor has responded (Accept All / Save My Preferences),
   assets/js/cookieyes.js adds the cky-consent-approved body class. This keeps the
   banner, revisit button, and overlay hidden on later loads — no flash of the
   banner before the JS removes the elements. (Reject All does NOT add the class,
   so the revisit button stays available.) */
.cky-consent-approved .cky-consent-container,
.cky-consent-approved .cky-btn-revisit-wrapper,
.cky-consent-approved .cky-overlay { display: none !important; }