/* ==========================================================================
   Mega menu — top-level nav + brand tabs/panel
   Structure (from Mega_Menu_Walker):

   nav.mega-menu
     ul.mega-menu__list
       li.mega-menu                          (standard WP <li>)
         a                                   (standard WP link)
         div.mega-menu__panel-group
           div.mega-menu__brand[data-brand]
             button.mega-menu__tab
             div.mega-menu__panel[data-panel][hidden]
               div.mega-menu__about           (darker brand shade)
               div.mega-menu__columns         (lighter brand shade)
                 div.mega-menu__column
                   strong.mega-menu__col-heading
                   ul.mega-menu__links
                     li > a
   ========================================================================== */

:root {
	--mega-brand-pa: #ffd200;
	--mega-brand-pa-dark: #f4c500;
	--mega-brand-pa-text: #1a1a1a;

	--mega-brand-upastry: #009a80;
	--mega-brand-upastry-dark: #008e73;
	--mega-brand-upastry-text: #ffffff;

	--mega-brand-pauahmad: #ffd200;
	--mega-brand-pauahmad-dark: #f4c500;
	--mega-brand-pauahmad-text: #1a1a1a;

	--mega-brand-dapurkitchen: #009a80;
	--mega-brand-dapurkitchen-dark: #008e73;
	--mega-brand-dapurkitchen-text: #ffffff;

	--mega-nav-text: #ffffff;
	--mega-nav-accent: #e2231a; /* PA Food red */
	--mega-nav-font: inherit;  /* swap for your brand's actual font-family */
	--mega-tab-width: 160px;
	--mega-container-max: 1300px; /* match your site's actual container/max-width */
	--mega-header-height: 90px;   /* match your actual header height */
}

/* Included as given — sets the tall vertical padding on any top-level item
   with a dropdown (About Us, Why Us?, Products, Services, Latest News),
   which is what creates the tall hover/active box behind the label. */
.desktopmenu > nav > ul > li > a {
	padding: 30px 20px !important;
}
.mega-menu__links a {
	position: relative;
}
.mega-menu__links a:after {
    content:'';
	height: 3px;
	position: absolute;
	left: -5px;
	bottom: -2px;
	width: 0px;
	transition: ease width 0.2s;
	background-color: #e01b2f;
}
.mega-menu__links a:hover:after {
	width: calc(90% - 20px);
}

/* ---- Top-level nav bar ---- */
.mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.mega-menu__list > li {
	position: relative;
}

.mega-menu__list > li.mega-menu {
	position: unset !important;
}

.mega-menu__list > li > a {
	display: inline-block;
	padding: 0 1.2em;
	color: var(--mega-nav-text);
	font-family: var(--mega-nav-font);
	font-weight: 600;
	text-decoration: none;
	position: relative;
}

/* White box + red underline on hover/active — matches the "Products" state
   in your reference screenshot. The tall vertical padding comes from the
   .desktopmenu rule above; this just adds the background/colour swap. */
.mega-menu__list > li:hover > a,
.mega-menu__list > li.is-open > a {
	background: #fff;
	color: #1a1a1a !important;
}

.mega-menu__list > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 3px;
	background: var(--mega-nav-accent);
	transition: right 0.2s ease;
}

.mega-menu__list > li:hover > a::after,
.mega-menu__list > li.is-open > a::after {
	right: 0;
}

/* ---- Standard dropdowns (About Us, Why Us?, Services, etc.) ----
   These are plain WordPress submenus — no custom walker markup involved —
   but they still need show/hide + positioning rules now that the theme's
   own (Ubermenu-scoped) CSS no longer applies to them. */
.mega-menu__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	margin: 0;
	list-style: none;
	background: #fff;
	min-width: 220px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.mega-menu__list .sub-menu li a {
	padding: 1em 1.5em;
}


.mega-menu__list .sub-menu li:last-child {
	margin-bottom: 0;
}

.mega-menu__list .sub-menu a {
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.95rem;
	transition: ease all 0.2s !important;
}

.mega-menu__list .sub-menu a:hover {
    background: #e01b2f;
    color: white;
}

.mega-menu__list > li:hover > .sub-menu,
.mega-menu__list > li.is-open > .sub-menu {
	display: block;
}

/* Nested (third-level) submenus fly out to the side rather than stacking
   under their parent. */
.mega-menu__list .sub-menu li {
	position: relative;
}

.mega-menu__list .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* ---- Brand tab strip + panel ---- */
.mega-menu__panel-group {
	display: none; /* toggled open via JS/hover, see below */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 50;
	background: #fff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	min-width: 1100px;
	min-height: 380px;
	flex-direction: column;
}

.mega-menu__list > li.mega-menu:hover > .mega-menu__panel-group,
.mega-menu__list > li.mega-menu.is-open > .mega-menu__panel-group {
	display: flex;
}

/* Tabs stack in a single column down the left. .mega-menu__panel-group is
   the positioning context every panel lines up against, so it doesn't
   matter which tab is active — the content always appears in the same
   place to the right of the tab column, never shifted per-brand. */
.mega-menu__brand {
	width: var(--mega-tab-width);
	flex: 0 0 auto;
	background: #f4f4f4;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-menu__brand:last-child {
	border-bottom: 0;
}

.mega-menu__tab {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 1.1em 1em;
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	color: #1a1a1a;
	height: 120px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	text-align: center;
}

.mega-menu__brand[data-brand="pa-food"] .mega-menu__tab.is-active { background: var(--mega-brand-pa); color: var(--mega-brand-pa-text); }
.mega-menu__brand[data-brand="upastry"] .mega-menu__tab.is-active { background: var(--mega-brand-upastry); color: var(--mega-brand-upastry-text); }
.mega-menu__brand[data-brand="pau-ahmad"] .mega-menu__tab.is-active { background: var(--mega-brand-pauahmad); color: var(--mega-brand-pauahmad-text); }
.mega-menu__brand[data-brand="dapur-kitchen"] .mega-menu__tab.is-active { background: var(--mega-brand-dapurkitchen); color: var(--mega-brand-dapurkitchen-text); }

.mega-menu__brand[data-brand="upastry"] a,
.mega-menu__brand[data-brand="dapur-kitchen"] a {
	color: white !important;
}

img.mega-menu__tab-logo {
	max-height: 60px;
}

/* The revealed panel — positioned relative to .mega-menu__panel-group
   (its nearest positioned ancestor), NOT relative to its own .mega-menu__brand,
   so every brand's panel lands in exactly the same place regardless of
   which tab in the stack triggered it. Padding now lives on .mega-menu__about
   and .mega-menu__columns individually (see below) so each can carry its
   own full-bleed background colour with no gap or lighter border between
   them. */
.mega-menu__panel {
	position: absolute;
	top: 0;
	left: var(--mega-tab-width);
	right: 0;
	bottom: 0;
	overflow-y: auto;
	display: flex;
	font-size: 0.95rem;
	line-height: 1.5;
}

.mega-menu__panel[hidden] { display: none; }

/* Base (lighter) brand colour — shows through .mega-menu__columns since
   that div itself has no background of its own. */
.mega-menu__brand[data-brand="pa-food"] .mega-menu__panel { background: var(--mega-brand-pa); color: var(--mega-brand-pa-text); }
.mega-menu__brand[data-brand="upastry"] .mega-menu__panel { background: var(--mega-brand-upastry); color: var(--mega-brand-upastry-text); }
.mega-menu__brand[data-brand="pau-ahmad"] .mega-menu__panel { background: var(--mega-brand-pauahmad); color: var(--mega-brand-pauahmad-text); }
.mega-menu__brand[data-brand="dapur-kitchen"] .mega-menu__panel { background: var(--mega-brand-dapurkitchen); color: var(--mega-brand-dapurkitchen-text); }

/* Darker (About) brand colour — sits on top as its own full-bleed block. */
.mega-menu__about {
	flex: 0 0 260px;
	padding: 20px;
}

.mega-menu__brand[data-brand="pa-food"] .mega-menu__about { background: var(--mega-brand-pa-dark); }
.mega-menu__brand[data-brand="upastry"] .mega-menu__about { background: var(--mega-brand-upastry-dark); }
.mega-menu__brand[data-brand="pau-ahmad"] .mega-menu__about { background: var(--mega-brand-pauahmad-dark); }
.mega-menu__brand[data-brand="dapur-kitchen"] .mega-menu__about { background: var(--mega-brand-dapurkitchen-dark); }

.mega-menu__about strong { display: block; margin-bottom: 0.5em; font-size: 15px; }
.mega-menu__about em { display: block; margin: 0.6em 0; font-style: italic; font-size: 13px; }
.mega-menu__about p { font-size: 13px; }

.mega-menu__columns {
	display: flex;
	gap: 0.5em;
	flex: 1;
	flex-wrap: wrap;
	padding: 20px;
}

.mega-menu__column { min-width: 140px; }
.mega-menu__col-heading { display: block; margin-bottom: 0.6em; font-size: 1rem; }
.mega-menu__links { list-style: none; margin: 0 0 1em; padding: 0; }
.mega-menu__links li { margin: 0 0 0.45em; }
.mega-menu__links a { text-decoration: none; color: inherit; font-size: 0.9rem; }
.mega-menu__links a:hover { text-decoration: underline; }

@media (min-width:769px) {
    #masterhead.fixed-header ul.mega-menu__list > li > a {
        color: #222 !important;
    }
}

/* ==========================================================================
   Mobile — collapse into a normal stacked accordion.
   Adjust the breakpoint to match your theme's mobile-menu breakpoint.
   ========================================================================== */
@media (max-width: 768px) {

	.mega-menu__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.mega-menu__panel-group {
		display: none;
		position: static;
		min-width: 0;
		min-height: 0;
		box-shadow: none;
	}

	.mega-menu__list > li.mega-menu.is-open > .mega-menu__panel-group {
		display: flex;
	}

	.mega-menu__brand { width: 100%; }

	.mega-menu__panel {
		position: static;
		flex-direction: column;
		gap: 0;
	}

	/* Each brand's panel only shows when THAT brand is expanded (accordion,
	   not the desktop "one absolute panel over the rest" trick). */
	.mega-menu__panel:not(.is-active) { display: none; }

	.mega-menu__about,
	.mega-menu__columns {
		padding: 1.5em;
	}

	.mega-menu__columns { flex-direction: column; gap: 1.25em; }
}