/* =============================================================================
   New Mega-Menu Header Styles (light + dark variants)
   Extracted from template-parts/header/header-about-us.php
                 template-parts/header/header-about-us-dark.php

   Both header templates render the same markup/classes; only the color
   scheme differs. Rules identical between the two variants are unscoped
   below. Rules that differ are scoped off `.menu-dark`, a class present
   only on the dark header's <header class="main-header menu-dark ...">
   (header-about-us-dark.php) — the light header never carries that class,
   so `header:not(.menu-dark)` / `header.menu-dark` are mutually exclusive
   and only one branch of each pair is ever active per page.
   ============================================================================= */

/* ── Mega panel curtain drop ── */
.mega-panel {
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 100% 0); /* fully hidden from bottom */
    transition:
        clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}

/* active state */
.nav-item.active .mega-panel {
    opacity: 1;
    pointer-events: all;
    clip-path: inset(0 0 0 0); /* fully visible */
}

/* Chevron flip when active */
.nav-link .nav-chevron        { transition: transform 0.25s; }
.nav-item.active .nav-chevron { transform: rotate(180deg); }

/* ── Mobile drawer ── */
.new-drawer {
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.new-drawer.open { transform: translateX(0); }

.new-drawer-overlay { opacity: 0; transition: opacity 0.3s; }
.new-drawer-overlay.visible { opacity: 1; }

/* ── Accordion chevron ── */
.d-chevron { transition: transform 0.25s; }
.d-item.open .d-chevron { transform: rotate(180deg); }

/* ── Hamburger X morph ── */
.new-ham-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #000;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: center;
}
header.menu-dark .new-ham-line {
    background: #fff;
}
#new-mobile-toggle.open .new-ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#new-mobile-toggle.open .new-ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#new-mobile-toggle.open .new-ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero-img {
    width: 390px;
}
.hero-img-common {
    width: 290px;
    height: 250px;
    object-fit: contain;
}
.custom-padding-mega {
    padding: 30px 30px 30px 0;
}

/* ── Header shell ── */
header {
    color: #000;
    padding: 54px 0 25px;
    background: #f4f8f5f2;
    width: 98%;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif !important;
}
header.menu-dark {
    background: rgba(22, 22, 29, 0.90);
    border: none;
    isolation: isolate;
}
@media screen and (min-width: 1024px) {
    header.menu-dark::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        backdrop-filter: blur(10px);
        z-index: -1;
    }
}

.nav-button-v2, .new-btn, .pricing-section .button_slide.slide_right {
    border-radius: 3px;
    border: 1px solid #FF4D04;
    padding: 4px 17px;
    align-content: center;
    font-weight: 500;
    transition: all 0.3s ease;
    color: #FF4D04;
    font-size: 14px;
}
.nav-button-v2:hover, .new-btn:hover, .pricing-section .button_slide.slide_right:hover {
    background-color: #FF4D04;
    color: #fff;
}

.nav-item > button {
    font-size: 14px;
    font-weight: 300;
    color: #16161D;
    transition: all 0.3s ease;
    cursor: pointer;
}
.nav-item > button:hover {
    color: #FF4D04;
}
header.menu-dark .nav-item > button {
    color: #fff;
}

/* Scoped to `.nav-item .mega-panel` (rather than bare `.mega-panel`) so this
   reliably outranks the `fixed left-0 right-0 w-full` Tailwind utilities
   already present on the same element — both are single-class selectors of
   equal specificity to a bare `.mega-panel`, so a plain `.mega-panel{width:98%}`
   rule can lose the tie depending on stylesheet load order. `.mega-panel` is
   always rendered inside an `<li class="nav-item ...">`, so this scoping is
   always safe. */
.nav-item .mega-panel {
    top: 132px;
    border: none;
    padding: 30px 30px 30px 0;
    background: #f4f8f5f2;
    width: 98%;
    margin: 0 auto;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
header:not(.menu-dark) .mega-panel {
    backdrop-filter: blur(10px);
}
/* Same reasoning as above: a plain `.mega-menu-dark{background:...}` rule has
   equal specificity to `.mega-panel{background:#f4f8f5f2}` above, so which one
   wins would depend on stylesheet order rather than intent. This compound
   selector is unconditionally more specific, so the dark background always
   applies on elements carrying both classes regardless of rule order. */
.nav-item .mega-panel.mega-menu-dark {
    background: rgba(22, 22, 29, 0.90);
}
.main-header.is-stuck .mega-panel {
    top: 116px;
}

.about-text {
    font-size: 22px;
    font-weight: 400;
}
.icons-wrapper {
    display: flex;
    gap: 25px;
}
.gap-custom-hire {
    gap: 130px;
}

.hire-custom-color-text {
    color: #16161D;
    transition: all 0.3s ease;
}
.hire-custom-color-text:hover {
    color: #FF4D04;
}
header.menu-dark .hire-custom-color-text {
    color: #fff;
}

.weight-500 {
    font-weight: 500;
}

/* ── Pricing mega-menu calculator overrides ──
   (dead today — mega-menu-pricing.php is commented out in both header
   templates — kept 1:1 with the original inline blocks so nothing changes
   if the pricing panel is ever re-enabled) */
header:not(.menu-dark) .pricing-mega-menu p,
header:not(.menu-dark) .pricing-mega-menu label {
    color: #000;
}

#calc-v2-quantity, #calc-v2-experience, #calc-v2-skill, #calc-v2-countries {
    border-radius: 3px;
    border: 0.5px solid #912D2D;
    background: transparent;
    color: #000;
}
header.menu-dark #calc-v2-quantity,
header.menu-dark #calc-v2-experience,
header.menu-dark #calc-v2-skill,
header.menu-dark #calc-v2-countries {
    color: #fff;
}

.pricing-mega-menu #calc-v2-card-smart p.text-\[3rem\].font-\[800\].text-\[\#1E1E1E\].my-6,
.pricing-mega-menu #calc-v2-card-other p.text-\[3rem\].font-\[800\].text-white.my-6 {
    color: #FF4D04;
    font-weight: 700;
    font-size: 65px;
}
.pricing-mega-menu #calc-v2-card-smart p.hiring-text.text-\[1\.5rem\].lg\:text-\[22px\].md\:text-\[22px\].font-\[600\].text-\[\#1E1E1E\].mt-10,
.pricing-mega-menu #calc-v2-card-other p.hiring-text.text-\[1\.5rem\].lg\:text-\[22px\].md\:text-\[22px\].font-\[400\].text-white.mt-10 {
    color: #FF4D04;
    font-size: 18px;
}
.pricing-mega-menu #calc-v2-card-smart p.text-\[0\.875rem\].font-\[500\].text-center.text-\[\#1f1f1f\],
.pricing-mega-menu #calc-v2-card-other p.text-\[0\.875rem\].font-\[500\].text-center.text-white {
    color: #FF4D04;
    font-weight: 300;
    text-align: left;
}
.pricing-mega-menu #calc-v2-card-smart p.text-\[0\.875rem\].font-\[500\].text-center.text-\[\#1f1f1f\] img,
.pricing-mega-menu #calc-v2-card-other p.text-\[0\.875rem\].font-\[500\].text-center.text-white img {
    display: none;
}
.pricing-mega-menu #calc-v2-card-smart p.text-\[0\.875rem\].font-\[500\].text-center.text-\[\#1f1f1f\]::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-right: 6px;
    background-image: url("https://smartworking.io/wp-content/uploads/2026/03/cal-icon-1.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* light used the correct #calc-v2-card-other id; dark's original inline
   block had a typo'd `#calc-v2-calc-v2-card-other` id that never matched
   anything — preserved as-is below so dark output is unchanged */
header:not(.menu-dark) .pricing-mega-menu #calc-v2-card-other p.text-\[0\.875rem\].font-\[500\].text-center.text-white::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-right: 6px;
    background-image: url("https://smartworking.io/wp-content/uploads/2026/03/cal-icon-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
header.menu-dark .pricing-mega-menu #calc-v2-calc-v2-card-other p.text-\[0\.875rem\].font-\[500\].text-center.text-white::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-right: 6px;
    background-image: url("https://smartworking.io/wp-content/uploads/2026/03/cal-icon-2.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

header:not(.menu-dark) .pricing-mega-menu #calc-v2-card-smart p.text-\[0\.875rem\].font-\[500\].text-center.text-\[\#1f1f1f\] span {
    padding-left: 42px;
}

.pricing-mega-menu #calc-v2-card-smart .w-\[100\%\].min-h-\[26\.25rem\].bg-white.border.border-\[\#F2F2F2\].p-\[1\.5rem\].rounded-\[1rem\].shadow-\[0px_4px_12px_0px_rgba\(12\,12\,12\,0\.12\)\].relative.overflow-hidden.ml-auto {
    border-radius: 2px;
    border: 0;
}
.pricing-mega-menu #calc-v2-card-smart .w-\[100\%\].absolute.h-\[110px\].bg-\[\#F5F5F5\].border-t.border-\[\#EEEEEE\].left-0.bottom-0.p-\[20px\].md\:px-\[30px\].content-center,
.pricing-mega-menu #calc-v2-card-other .w-\[100\%\].absolute.h-\[110px\].bg-\[\#202020\].border-t.border-\[\#4A4A4A\].left-0.bottom-0.p-\[20px\].md\:px-\[30px\].content-center {
    border: none;
    background: transparent;
}

header:not(.menu-dark) .pricing-mega-menu #calc-v2-card-other .w-\[100\%\].min-h-\[26\.25rem\].bg-\[\#1E1E1E\].border.border-\[\#4A4A4A\].p-\[1\.5rem\].rounded-\[1rem\].shadow-\[0px_4px_12px_0px_rgba\(12\,12\,12\,0\.12\)\].relative.overflow-hidden.ml-auto {
    background: none;
    border: none;
    border-radius: 3px;
}
header.menu-dark .pricing-mega-menu #calc-v2-card-other .w-\[100\%\].min-h-\[26\.25rem\].bg-\[\#1E1E1E\].border.border-\[\#4A4A4A\].p-\[1\.5rem\].rounded-\[1rem\].shadow-\[0px_4px_12px_0px_rgba\(12\,12\,12\,0\.12\)\].relative.overflow-hidden.ml-auto {
    border: none;
    border-radius: 3px;
}

header:not(.menu-dark) .pricing-mega-menu #calc-v2-card-other p.text-\[0\.75rem\].font-\[400\].text-center.text-\[\#F5F5F5\].mt-\[0\.89rem\] svg path {
    fill: black;
}

header.menu-dark .pricing-mega-menu #calc-v2-card-smart p.text-\[1rem\].font-\[400\].text-\[\#1E1E1E\].mb-3,
header.menu-dark .pricing-mega-menu #card-smart p.text-\[1rem\].font-\[400\].text-\[\#1E1E1E\] {
    color: #000;
}

.icon-mega-hire {
    width: 30px;
    height: 44px;
}

/* Hire Talent role-category icons are light/white glyphs (see $custom_icons
   in mega-menu-hire.php, and the menu_icon_id ACF field per taxonomy term)
   meant for the dark panel's dark background. On the light panel they wash
   out. Rather than needing a second "-black" asset uploaded per icon,
   brightness(0) forces any opaque pixel to black while preserving the
   source image's transparency — works for any icon regardless of taxonomy
   term, without touching the PHP or the icon library. */
header:not(.menu-dark) .hire-custom-color-text img {
    filter: brightness(0);
}
a[href*="hire-talent/trending"] {
    display: none !important;
}

.text-menu-item {
    /* Explicitly includes `color` alongside `transform` — otherwise, on
       elements that also carry `.hire-custom-color-text` (transition: all)
       or Tailwind's `transition-colors duration-150` utility, whichever rule
       wins the cascade tie fully overwrites this shorthand's implied property
       list, so the hover color change can end up snapping instantly while
       the translateX slide still animates, feeling out of sync. */
    transition: transform 0.3s ease, color 0.3s ease;
}
.text-menu-item:hover {
    transform: translateX(6px);
    color: #FF4D04;
}
header.menu-dark .text-menu-item:hover {
    color: #FF4D04 !important;
}

header:has(.nav-item.relative.active) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Dark mega menu ── */
.mega-menu-dark {
    background: rgba(22, 22, 29, 0.90);
    color: #fff !important;
    backdrop-filter: blur(10px);
}
.mega-menu-dark .dark-menu-text {
    color: #fff !important;
}
.mega-menu-dark.pricing-mega-menu option {
    color: #000 !important;
}