/*
Theme Name:     Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         ThemeIsle
Author URI:     https://themeisle.com
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/

/* Homepage: #content flush against header — no band above hero. The zero
   font-size / line-height on the container collapses the whitespace text
   nodes between the page's HTML blocks. */
body.home #content.neve-main,
body.page-id-174 #content.neve-main {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0;
	line-height: 0;
}

/* Both properties inherit, so the sections must be given concrete values
   here (`revert` would fall back to inherit and hand the zero straight
   down to every descendant that does not set its own line-height —
   wrapped lines then stack on top of each other). */
body.home #content.neve-main > * {
	font-size: 1rem;
	line-height: 1.6;
}

body.home.page .neve-main {
	margin: 0 !important;
}

body.home #content.neve-main > .traxx-hero:first-child,
body.home .traxx-hero:first-child {
	margin-top: 0 !important;
}

/* Site-wide animations are opt-out: only disable them on elements that
   explicitly request reduced motion via [data-no-motion]. Replaces the
   blanket prefers-reduced-motion override that previously stripped all
   animation timing across the entire document tree. */
@media (prefers-reduced-motion: reduce) {
	html:not([data-no-motion]) {
		scroll-behavior: smooth;
	}

	[data-no-motion],
	[data-no-motion] *,
	[data-no-motion] *::before,
	[data-no-motion] *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Free Neve forces the footer bottom row to render even when its layout
   is empty (it exists only to carry the theme credit that
   inc/footer-credit.php detaches). Hide it unless the Customizer later
   puts a real component in it, so .cyber-copyright-row stays the last
   element on the page. */
#site-footer .footer--row.footer-bottom:not(:has(.builder-item)) {
	display: none;
}

/* Contact Form 7's reCAPTCHA v3 integration loads the badge iframe on every
   page (CF7 enqueues the api.js sitewide as soon as reCAPTCHA keys exist).
   Hide the floating badge - Google's Terms of Service allow this provided the
   attribution notice is shown near the form; the Contact page copy carries
   that line. Uses !important because Google's inline styles set visibility
   directly on the element. */
.grecaptcha-badge {
	visibility: hidden !important;
}

/* Header eyebrow: an optional secondary menu (Our Team, Industries) that the
   header builder can place in the desktop top row and at the end of the
   mobile sidebar. It is switched on by docs/audit-baseline/eval-header-eyebrow-nav.php
   and off by eval-header-nav-submenu.php; every rule below keys off the row or
   the secondary-menu component, so the block is inert while the eyebrow is off.

   Desktop: the secondary menu alone, in cyan small caps, sitting tight above
   the primary menu + phone number so the three read as one right-hand group
   rather than a separate strip. The row keeps no border and its bottom margin
   is negative so the main row's top padding absorbs it. */
.header-top {
	--traxx-eyebrow-offset: 170px;
	position: relative;
	z-index: 2;
	margin-bottom: -10px;
}

.header-top .header--row-inner {
	border-bottom: 0;
}

.header-top .builder-item {
	margin: 6px 0 0;
}

.header-top .builder-item--secondary-menu,
.header-menu-sidebar .builder-item--secondary-menu {
	--color: #00d2ff;
	--activecolor: #00d2ff;
}

.header-top .builder-item--secondary-menu {
	--fontsize: 13px;
	--letterspacing: 0.1em;
	--texttransform: uppercase;
	--fontweight: 600;
	--justify: flex-end;
	--textalign: right;
	--padding: 0;
	--height: 18px;
}

/* The last eyebrow link is offset so it straddles the start of the phone
   number below (roughly half of "INDUSTRIES" over the "(208)"). The phone
   block's right edge is 35px in from the container at the wide bands
   (23px at 960-1219px) and its width follows the phone font-size bands
   below, so the right margin is stepped per band. */
.header-top .nav-menu-secondary .nav-ul {
	justify-content: flex-end;
	margin: 0 var(--traxx-eyebrow-offset) 0 0;
}

.header-top .nav-menu-secondary .nav-ul a {
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

/* A thin " | " divider between the eyebrow links wherever the top row renders
   (desktop and tablet; phones get the sidebar instead). */
.header-top .nav-menu-secondary .nav-ul > li + li::before {
	content: "|";
	display: inline-block;
	margin-right: var(--spacing, 14px);
	color: var(--color);
	opacity: 0.5;
	font-weight: 400;
	line-height: 1;
	vertical-align: middle;
}

.header-top .nav-menu-secondary .nav-ul > li {
	display: flex;
	align-items: center;
}

.header-top .nav-menu-secondary .nav-ul a:hover,
.header-top .nav-menu-secondary .nav-ul .current-menu-item a {
	opacity: 1;
}

/* Five main-nav items plus the phone number at the 18px desktop size only fit
   on one line from ~1600px up; step the menu and the phone (inline clamp() on
   the paragraph) down in three bands below that. */
@media (min-width: 1280px) and (max-width: 1599px) {
	.header-main .builder-item--primary-menu {
		--fontsize: 15px;
		--spacing: 14px;
		--letterspacing: 0.6px;
	}

	.header-main .nv-html-content p {
		font-size: 22px !important;
	}

	.header-top {
		--traxx-eyebrow-offset: 130px;
	}
}

@media (min-width: 960px) and (max-width: 1279px) {
	.header-main .builder-item--primary-menu {
		--fontsize: 14px;
		--spacing: 10px;
		--letterspacing: 0.5px;
	}

	.header-main .nv-html-content p {
		font-size: 18px !important;
	}

	.header-top {
		--traxx-eyebrow-offset: 104px;
	}
}

@media (min-width: 960px) and (max-width: 1219px) {
	.header-main .builder-item--primary-menu {
		--fontsize: 13px;
		--spacing: 7px;
		--letterspacing: 0.2px;
	}

	.header-main .hfg-slot.right > .builder-item {
		padding-right: 8px;
		padding-left: 8px;
	}

	.header-main .builder-item--custom_html {
		--padding: 0 15px 0 0;
	}

	.header-main .nv-html-content p {
		font-size: 15px !important;
	}

	.header-top {
		--traxx-eyebrow-offset: 55px;
	}
}

/* Tablets (769-959px) show the desktop rows (Customizer Additional CSS
   unhides them there), so they inherit the tightest desktop band. The primary
   menu's tablet bottom margin in the Customizer is the 550px phone-sidebar
   fade; it must not apply to the inline desktop row. */
@media (min-width: 769px) and (max-width: 959px) {
	/* Sized so the five items stay on one line as far down as possible: a
	   wrapped item would sit under the faded submenu panel. */
	.header-main .builder-item--primary-menu {
		--margin: 0;
		--fontsize: 12px;
		--spacing: 5px;
		--letterspacing: 0;
	}

	.header-main .hfg-slot.right > .builder-item {
		padding-right: 6px;
		padding-left: 6px;
	}

	.header-main .builder-item--custom_html {
		--padding: 0 10px 0 0;
	}

	.header-main .nv-html-content p {
		font-size: 14px !important;
	}

	.header-top {
		--traxx-eyebrow-offset: 55px;
	}
}

/* Mobile dropdown: the primary menu keeps a large bottom margin so the panel
   background fades over the page. When the eyebrow menu is present, hand that
   spacing to it so it sits directly under the primary items as a smaller,
   dimmer row. */
.header-menu-sidebar:has(.builder-item--secondary-menu) .builder-item--primary-menu {
	--margin: 0;
}

/* Neve caps the dropdown panel at 400px, which is exactly the logo plus five
   primary items; give it room for an expanded submenu (or the eyebrow row) and
   keep the fade-to-transparent confined to the last strip so every link stays
   legible. */
.is-menu-sidebar.menu_sidebar_dropdown .header-menu-sidebar-inner {
	max-height: min(560px, calc(100vh - 60px));
}

.menu_sidebar_dropdown .header-menu-sidebar-bg {
	--bgcolor: linear-gradient(to bottom, #000 0, #000 calc(100% - 70px), rgba(0, 0, 0, 0) 100%);
}

/* The hamburger sidebar only renders at 768px and below (tablets get the
   desktop rows, and with them the " | " divider above), so this is the phone
   treatment: no divider, smaller eyebrow type. */
.header-menu-sidebar .builder-item--secondary-menu {
	--margin: 14px 0 550px 0;
	--fontsize: 12px;
	--letterspacing: 0.05em;
	--texttransform: uppercase;
	--height: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.header-menu-sidebar .nav-menu-secondary .nav-ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: var(--justify, flex-end);
	gap: 0 18px;
	margin: 0;
	padding: 0;
}

.header-menu-sidebar .nav-menu-secondary .nav-ul > li {
	width: auto;
	flex: 0 0 auto;
}

.header-menu-sidebar .nav-menu-secondary .nav-ul > li > .wrap > a {
	padding-top: 6px;
	padding-bottom: 6px;
}

.header-menu-sidebar .nav-menu-secondary .nav-ul a {
	opacity: 0.75;
}

.header-menu-sidebar .nav-menu-secondary .nav-ul a:hover,
.header-menu-sidebar .nav-menu-secondary .nav-ul .current-menu-item a {
	opacity: 1;
}

/* Primary-menu submenus, drawn as a topology tree. Desktop: a yellow trunk
   drops from the parent's dropdown arrow and every child hangs off it on its
   own branch to the LEFT, so the labels sit under the parent, right-aligned,
   each ending at its branch. The trunk is built per child (full-height segment
   on every row, half-height on the last) so it ends exactly at the last branch
   however many children there are. The .sub-menu box hover area starts at the
   parent row's bottom (so the pointer never leaves it between arrow and child),
   but its visible surface is a translucent dark card that only fades in *below*
   the header inner row - the top --traxx-sub-drop pixels of the panel are
   100% transparent, the next --traxx-sub-fade pixels are the gradient into the
   panel body, so the header's bottom line stays visible between the parent row
   and the dropdown. Corners rounded on all four sides, since the top edge is
   no longer flush with the parent row. */
.header-main .nav-ul > li > .sub-menu {
	--traxx-sub-stem: 12px;   /* gap between the panel's opaque top edge and the first child */
	--traxx-sub-arm: 18px;    /* branch length */
	/* The arrow glyph sits 4px in from the parent's right edge and is 0.6em wide,
	   so its centre - where the trunk lands - is 4px + 0.3em in. */
	--traxx-sub-buffer: calc(4px + 0.3em);
	/* Space from the parent row's bottom to the header inner row's bottom -
	   the transparent zone where the header line shows through. Same on every
	   desktop band (measured 18px at 1700/1400/1100/1000, 16.5px at tablet). */
	--traxx-sub-drop: 18px;
	--traxx-sub-fade: 22px;   /* length of the transparent-to-opaque gradient */
	--traxx-sub-bg: rgba(0, 0, 0, 0.7); /* softer than the previous 0.9 */
	/* Same gold as the menu's hover/link colour (Neve secondary accent). */
	--traxx-sub-line: var(--nv-secondary-accent, #f4c133);
	left: auto;
	right: 0;
	top: 100%;
	/* At least the parent's width; grows leftward if a label is longer. */
	min-width: 100%;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) var(--traxx-sub-drop),
		var(--traxx-sub-bg) calc(var(--traxx-sub-drop) + var(--traxx-sub-fade)),
		var(--traxx-sub-bg)
	);
	border: 0;
	border-radius: 14px;
	box-shadow: none;
	/* Wider, softer drop-shadow follows the faded alpha (a box-shadow would
	   redraw a hard rectangle at the invisible top edge). */
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.42));
	/* Top padding must clear the transparent + fade zones so labels sit fully
	   inside the opaque area of the panel. */
	padding: calc(var(--traxx-sub-drop) + var(--traxx-sub-fade) + var(--traxx-sub-stem)) var(--traxx-sub-buffer) 12px 16px;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.header-main .nav-ul > li > .sub-menu::before,
.header-main .nav-ul > li > .sub-menu li::before,
.header-main .nav-ul > li > .sub-menu li::after {
	content: "";
	position: absolute;
	background: var(--traxx-sub-line);
	pointer-events: none;
}

/* Stem: starts just under the arrow glyph (above the panel, inside the parent
   row) and runs down through the panel's transparent + fade zones to the first
   child row. */
.header-main .nav-ul > li > .sub-menu::before {
	right: calc(var(--traxx-sub-buffer) - 1px);
	top: -8px;
	width: 2px;
	height: calc(var(--traxx-sub-drop) + var(--traxx-sub-fade) + var(--traxx-sub-stem) + 8px);
}

/* Tablet band header is 58px (~8px shorter than desktop), so the transparent
   zone above the submenu panel shrinks to match the measured 16.5px gap
   between parent row and header inner-row bottom. Placed here (not in the
   main tablet block earlier in the file) so it wins the cascade against the
   .sub-menu base rule above. */
@media (min-width: 769px) and (max-width: 959px) {
	.header-main .nav-ul > li > .sub-menu {
		--traxx-sub-drop: 16px;
	}
}

.header-main .nav-ul > li > .sub-menu li {
	position: relative;
	min-width: 0;
	width: auto;
}

/* Trunk segment per row, half height on the last row so the trunk stops at
   the final branch. */
.header-main .nav-ul > li > .sub-menu li::before {
	right: -1px;
	top: 0;
	width: 2px;
	height: 100%;
}

.header-main .nav-ul > li > .sub-menu li:last-child::before {
	height: 50%;
}

/* Branch: from the trunk leftward to the label, on the row's centre line. */
.header-main .nav-ul > li > .sub-menu li::after {
	right: 0;
	top: 50%;
	width: var(--traxx-sub-arm);
	height: 2px;
	margin-top: -1px;
}

.header-main .nav-ul > li > .sub-menu li > .wrap {
	background: transparent;
	padding: 5px calc(var(--traxx-sub-arm) + 8px) 5px 0;
	border: 0;
	box-shadow: none;
	white-space: nowrap;
	text-align: right;
}

.header-main .nav-ul > li > .sub-menu li > .wrap > a {
	justify-content: flex-end;
	font-size: 0.9em;
	letter-spacing: 0.06em;
	line-height: 1.4;
	min-height: 0;
}

/* Phone sidebar: the same yellow tree, no panel. The sidebar is right-aligned,
   so the trunk drops from the arrow on the right and each branch reaches left
   to within 8px of the label's last letter. */
.header-menu-sidebar .nav-ul .sub-menu.dropdown-open {
	--traxx-sub-arm: 18px;
	--traxx-sub-line: var(--nv-secondary-accent, #f4c133);
	position: relative;
	/* The 45px caret target is 4px from the panel edge, so its centre - and the
	   trunk - is 26.5px in. */
	margin: 0 26px 6px 0;
	padding: 6px var(--traxx-sub-arm) 0 0;
}

.header-menu-sidebar .nav-ul .sub-menu.dropdown-open::before,
.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li::before,
.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li::after {
	content: "";
	position: absolute;
	background: var(--traxx-sub-line);
	pointer-events: none;
}

/* Stem from under the arrow glyph to the first child row. */
.header-menu-sidebar .nav-ul .sub-menu.dropdown-open::before {
	right: -1px;
	top: -18px;
	width: 2px;
	height: 24px;
}

.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li {
	position: relative;
}

.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li::before {
	right: calc(-1 * var(--traxx-sub-arm) - 1px);
	top: 0;
	width: 2px;
	height: 100%;
}

.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li:last-child::before {
	height: 50%;
}

.header-menu-sidebar .nav-ul .sub-menu.dropdown-open li::after {
	right: calc(-1 * var(--traxx-sub-arm));
	top: 50%;
	width: var(--traxx-sub-arm);
	height: 2px;
	margin-top: -1px;
}

.header-menu-sidebar .nav-ul .sub-menu li > .wrap {
	padding: 0;
}

/* Neve's inline CSS gives every caret-less sidebar link padding-right:
   calc(1em + 36px) so it lines up with the caret-bearing parents. Children
   must instead end a fixed 8px short of the branch tip (same gap as desktop),
   so the :not() chain here out-specifies that rule and replaces it. */
.header-menu-sidebar .nav-ul .sub-menu li:not([class*="block"]) > .wrap > a,
.header-menu-sidebar .nav-ul .sub-menu li:not([class*="block"]):not(.menu-item-has-children) > .wrap > a {
	padding: 10px 8px 10px 0;
	font-size: 0.9em;
	letter-spacing: 0.04em;
}

/* Dropdown arrows are gold from the start (desktop, tablet and phone), not
   only once hovered/opened. */
.header-main .nav-ul .caret-wrap,
.header-menu-sidebar .nav-ul .caret-wrap {
	color: var(--nv-secondary-accent, #f4c133);
}

/* Phone sidebar: top-level items without children keep Neve's caret-width
   padding so their labels line up with the parents'. Fill that slot with a
   gold dash centred where the arrow glyph would be (the 45px caret target is
   4px in, so its centre is 26.5px from the item's edge). */
.header-menu-sidebar .nav-ul > li:not(.menu-item-has-children) > .wrap {
	position: relative;
}

.header-menu-sidebar .nav-ul > li:not(.menu-item-has-children) > .wrap::after {
	content: "";
	position: absolute;
	right: 19px;
	top: 50%;
	width: 15px;
	height: 2px;
	margin-top: -1px;
	background: var(--nv-secondary-accent, #f4c133);
	pointer-events: none;
}