/*
Theme Name:   Astra Child
Theme URI:    https://promilezi.co.za
Description:  Child theme for Astra. Custom CSS and PHP for promilezi.co.za belong here so that parent-theme updates cannot overwrite them.
Author:       Promilezi
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* Add custom CSS below this line. */


/* =========================================================
   Mega menu for the Services item.
   Astra renders the primary nav natively (not Elementor), and swaps to its
   mobile accordion below 922px. Everything here is scoped to desktop so the
   phone keeps the stacked menu, where a three column panel would be unusable.
   Remove this block and the three group items to revert to a plain dropdown.
   ========================================================= */
@media (min-width: 922px) {

	/* Positioning context for the full width panel.
	   Astra sets position:relative on ul.main-header-menu itself, which is only as
	   wide as the nav. That is a closer positioned ancestor than the header bar, so
	   it has to be neutralised or the panel can never exceed the width of the menu.
	   Safe here because Services is the only item with a dropdown. */
	.ast-desktop .main-header-bar { position: relative; }
	.ast-desktop .main-header-menu { position: static; }
	.ast-desktop .main-header-menu .pz-mega { position: static; }

	/* Level two stops being a dropdown and becomes the panel. */
	.ast-desktop .main-header-menu .pz-mega > .sub-menu {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		left: 0;
		right: 0;
		width: 100%;
		padding: 32px 4vw 28px;
		gap: 40px;
	}

	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item {
		position: static;
		flex: 1 1 0;
		width: auto;
		max-width: 340px;
	}

	/* Group label: clickable, anchors into the matching Services section. */
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a {
		font-size: 12px;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		font-weight: 700;
		color: #F4A03A;
		padding: 0 0 10px 0;
		margin-bottom: 10px;
		border-bottom: 2px solid rgba(244, 160, 58, 0.35);
		line-height: 1.3;
	}
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a:hover { color: #195990; }

	/* Level three flattens into its column instead of flying out sideways. */
	.ast-desktop .main-header-menu .pz-mega > .sub-menu .sub-menu {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0;
		padding: 0;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
	}
	.ast-desktop .main-header-menu .pz-mega > .sub-menu .sub-menu > .menu-item > a {
		padding: 7px 0;
		font-size: 14px;
		line-height: 1.35;
	}

	/* The caret on a group label would point at a flyout that no longer exists.
	   Astra draws it as an ::after pseudo element on .menu-link, not only as an
	   .ast-icon span, so both have to go. */
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a .ast-icon,
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a > .sub-arrow,
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > .ast-menu-toggle {
		display: none !important;
	}
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a::after,
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a::before {
		content: none !important;
		display: none !important;
	}
	/* Keep the label a tight block so it cannot stretch down the column. */
	.ast-desktop .main-header-menu .pz-mega > .sub-menu > .menu-item > a {
		display: block;
		height: auto;
		min-height: 0;
	}
}