/* Migrated from css/components/header.css. Breakpoints: 767/768.
   Six #region blocks in order: TOKENS, BASE DESKTOP, MOBILE, RESPONSIVE,
   TINT VARIANTS (2 sub-regions: DARK, ACADEMY), MEGA-MENU.

   2026-08-28: TINT — GRAY (.tinted-gray, CSS deleted per explicit user
   decision — see AGENTS.md, this used to guard ~76 live `header_type:
   tinted-gray` pages, now flagged in the manage-code report instead of
   silently dropped), TINT — ABOUT (.about-blue), the loose .single-post/
   .category box-shadow block, TINT — ABOUT-US (.page-template-about-us) and
   TINT — MEDIA-KIT (.hero-media-kit) were all deleted — those pages now
   render the plain `default` nav. TINT — BLUE GLOBAL was renamed TINT —
   DARK and its `.tinted-blue` selectors dropped (deprecated, same fate as
   the regions above) — only `.blog-family` remains as its trigger. The ACF
   `header_type` field itself (includes/modules.acf.php) still offers all
   four choices (default/tinted-gray/tinted-blue/about-blue) — left as-is,
   flagged as an open decision, not removed here. */

/* #region TOKENS */

/* Local tokens for academy-tint rules — not named --main-gradient/--main-white/
   --site-lavender since those collide with different values elsewhere (e.g.
   pricing-cards.css). #ABB9F0 also dedupes two raw-hex uses below. */
:root {
    --site-nav-academy-gradient: linear-gradient(90deg, rgb(53, 87, 143) 1.2%, rgb(17, 32, 63) 100%);
    --site-nav-academy-lavender: var(--medium-lavender);
    --site-nav-height: 12rem;
    --site-nav-height-mobile: 5.8rem;
}

/* #endregion */


/* #region BASE DESKTOP */
/* Triggered by: nothing — this is the default header on every page, with no
   body-context class in play. Everything below is overridden per page by the
   TINT VARIANTS regions further down. */

.site-nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 40;
    transition: box-shadow 0.2s, background 0.2s;

}

.site-nav a::before{
    content: none;
}

.header-pined :where(.site-nav),
.site-nav:has([open]) {
    background-color: #fff;
}

.site-nav .row {
    height: var(--site-nav-height);
    justify-content: flex-start;
    align-items: center;
    transition: height 0.2s;
    flex-wrap: nowrap;
}



body.header-pined .site-nav {
    box-shadow: 0 20px 20px 12px rgba(0, 0, 0, 0.06);
}

body.header-pined .site-nav .row {
    height: 6.5rem;
}

body.admin-bar .site-nav {
    top: 32px;
}

/* --- */

.site-nav .logo {
    width: 20rem;
    height: 3rem;
    background-image: url(./assets/logo-full-color.svg);
    background-position: center;
    background-repeat: no-repeat;
    white-space: nowrap;
    background-size: contain;
    font-size: 0;
    overflow: hidden;
    text-indent: -1000px;
    display: inline-block;
    vertical-align: middle;
    margin-right: auto;
    flex-shrink: 0;
    margin-top: 0.4rem;
    transition: background-image 0.2s;
}

/* --- */

.site-nav .nav {
    width: auto;
    text-align: right;
    font-size: 0;
}

/* first lvl */

.site-nav .nav>ul {
    width: auto;
    height: auto;
}

.site-nav .nav>ul>li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2.5rem;
    position: relative;
}

.site-nav .nav>ul>li:first-child {
    margin-left: 0;
}

.site-nav .nav>ul>li>a {
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: rgba(36, 41, 84, .8);
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    transition: color 0.2s, background-color 0.2s;
}

.site-nav .nav>ul>li>a:hover {
    color: var(--header-2);
}

.site-nav .nav>ul>li>button.mega-trigger {
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: rgba(36, 41, 84, .8);
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, background-color 0.2s;
}

.site-nav .nav>ul>li>button.mega-trigger:hover {
    color: var(--header-2);
}

/* second lvl */

.site-nav .nav>ul>li.menu-item-has-children:hover::after {
    width: 100%;
    height: 200%;
    position: absolute;
    top: 100%;
    left: 0;
    content: '';
    z-index: 0;
}

.site-nav .nav>ul>li.menu-item-has-children:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.site-nav .nav>ul ul {
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2rem);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    position: absolute;
    top: calc(100% + 2rem);
    left: 50%;
    margin-left: -10rem;
    width: 20rem;
    height: auto;
    box-sizing: border-box;
    padding: 2rem 2rem 0.2rem 2rem;
    border: 1px solid #efefef;
    background-color: var(--white);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    text-align: left;
    font-size: 0;
    z-index: 1;
}

.site-nav .nav>ul ul::after,
.site-nav .nav>ul ul::before {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -0.7rem;
    left: 50%;
    margin-left: -0.4rem;
    content: '';
}

.site-nav .nav>ul ul::after {
    border-width: 0 0.7rem 0.8rem 0.7rem;
    border-color: transparent transparent var(--white) transparent;
    z-index: 1;
}

.site-nav .nav>ul ul::before {
    border-width: 0 0.7rem 0.8rem 0.7rem;
    border-color: transparent transparent #efefef transparent;
    z-index: 0;
    top: -0.8rem;
}

.site-nav .nav>ul ul li {
    margin-bottom: 1.4rem;
}

.site-nav .nav>ul ul li a {
    font-size: 1.3rem;
    line-height: 2rem;
    color: var(--gray);
    font-weight: 600;
    transition: color 0.4s;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.8rem;
}

.site-nav .nav>ul ul li .icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.site-nav .nav>ul ul li .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.site-nav .nav>ul ul li a:hover {
    color: var(--header-2);
}

/* hrefs status */

.site-nav .nav>ul>li.current-menu-item>a::after,
.site-nav .nav>ul>li.current-menu-parent>a::after {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--red);
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    margin-bottom: 0.1rem;
}

.site-nav .nav>ul>.current-menu-parent>a,
.site-nav .nav>ul>.current-menu-item>a {
    color: var(--header-2);
    font-weight: 800;
}

.site-nav .nav>ul ul .current-menu-parent>a,
.site-nav .nav>ul ul .current-menu-item>a {
    color: var(--header-2);
}

.site-nav .nav>ul .current-menu-parent>a .icon,
.site-nav .nav>ul .current-menu-item>a .icon {
    filter: saturate(0);
}

/* custom buttons */

.site-nav .nav>ul .login-button a:hover {
    color: var(--red);
    text-decoration: underline;
}

.site-nav .nav .try-button a {
    background: var(--black);
    font-size: 1.4rem;
    line-height: 3.3rem;
    padding: 0 1.5rem;
    color: var(--white);
    border-radius: 0.5rem;
    font-weight: 600;
    box-shadow: 0px 0px 24px 0px rgba(36, 41, 84, 0.25);
    position: relative;
}

.site-nav .nav>ul .try-button a:hover {
    text-decoration: none;
    background: none transparent;
    color: var(--black);
    box-shadow: none;
}

.site-nav .nav>ul .try-button a:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    background: var(--black);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    border-radius: .5rem;
    padding: .2rem;
}

.site-nav .nav>ul .white-button a {
    background: transparent;
    color: var(--figma-gama-hover);
    border: .1rem solid var(--figma-gama-hover);
    box-shadow: none;
}

.site-nav .nav>ul .white-button a i {
    margin-right: .5rem;
    top: 0.1rem;
    position: relative;
}

.site-nav .nav>ul .white-button a:hover {
    background-color: var(--figma-gama);
    color: var(--figma-gama-hover);
}

.site-nav .nav>ul .white-button a:hover::before {
    content: none;
}

/* --- */

.site-nav .hamburger {
    width: 2.5rem;
    height: 3rem;
    line-height: 3.2rem;
    font-size: 2.4rem;
    text-align: center;
    color: var(--header-2);
    flex-shrink: 0;
    margin-left: 1.5rem;
    display: inline-block;
    vertical-align: top;
    transition: color 0.2s;
}

.site-nav .hamburger .open {
    display: none;
}

body.mobile-header-open .site-nav .hamburger i {
    display: none;
}

body.mobile-header-open .site-nav .hamburger .open {
    display: inline-block;
}

/* #endregion */


/* #region MOBILE */
/* Triggered by .site-nav-mobile, revealed via body.mobile-header-open. Same
   internal order as BASE DESKTOP, kept separate — its own DOM subtree. */

.site-nav-mobile {
    width: 100%;
    height: calc(100% - var(--site-nav-height-mobile));
    position: fixed;
    top: var(--site-nav-height-mobile);
    left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    background-color: var(--white);
    overflow: auto;
    z-index: 999999999;
    box-shadow: 0 0 20px 12px rgba(0, 0, 0, 0.03);
    transform: translateY(-120%);
    transition: transform .3s cubic-bezier(.2, 0, 0, 1) 0s, background 0.2s;
}

body.mobile-header-open .site-nav-mobile {
    transform: translateY(0);
}

/* --- */

.site-nav-mobile .nav {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.8rem 1.8rem 1.8rem;
}

/* first lvl */

.site-nav-mobile .nav>ul {
    width: 100%;
    height: auto;
}

.site-nav-mobile .nav>ul>li {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-nav-mobile .nav>ul>li>a {
    width: 100%;
    font-size: 1.8rem;
    line-height: 1.8rem;
    padding: 1.5rem 0;
    box-sizing: border-box;
    color: var(--gray);
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
}

/* second lvl */

.site-nav-mobile .nav>ul ul {
    box-sizing: border-box;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.site-nav-mobile .nav>ul ul li {
    width: 100%;
}

.site-nav-mobile .nav>ul ul li a {
    width: 100%;
    box-sizing: border-box;
    padding: 1.4rem 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    font-size: 1.4rem;
    color: var(--gray);
    font-weight: 600;
}

.site-nav-mobile .nav>ul ul li a .icon {
    display: none;
}

/* hrefs status */

.site-nav-mobile .nav>ul>.current-menu-parent>a,
.site-nav-mobile .nav>ul>.current-menu-item>a {
    font-weight: 900;
    color: var(--header-2);
}

.site-nav-mobile .nav>ul ul .current-menu-parent>a,
.site-nav-mobile .nav>ul ul .current-menu-item>a {
    font-weight: 700;
    color: var(--header-2);
}

/* custom buttons */

.site-nav-mobile .nav>ul .login-button:not(.try-button) {
    display: none;
}

.site-nav-mobile .nav>ul .try-button a {
    background: var(--figma-degrade-boton);
    line-height: 3.3rem;
    padding: 0.8rem;
    text-align: center;
    color: var(--white);
    border-radius: 0.5rem;
    font-weight: 600;
    margin-top: 2rem;
}

.site-nav-mobile .nav>ul .try-button a:hover {
    background-color: var(--black);
    color: var(--white);
}

.site-nav-mobile .nav>ul .white-button a {
    background: var(--figma-gama);
    color: var(--figma-gama-hover);
}

.site-nav-mobile .nav>ul .white-button a i {
    margin-right: .5rem;
}

.site-nav-mobile .nav>ul .white-button a:hover {
    background-color: var(--figma-gama-hover);
    color: var(--figma-gama);
}

/* #endregion */


/* #region RESPONSIVE */
/* Triggered by: viewport width only — no page-context class. These adjust the
   BASE DESKTOP rules above. Breakpoints that belong to one tint variant live
   inside that variant's own region instead, never here. */

/* Tablet: the row needs its own inline padding between 768 and 1194. */
@media screen and (max-width: 1194px) and (min-width: 768px) {
    .site-nav .row {
        padding-inline: 1.5rem;
    }
}

/* Mobile: desktop nav is hidden, .site-nav-mobile takes over. */
@media only screen and (min-width : 0px) and (max-width : 767px) {

    .site-nav {
        box-sizing: border-box;
        padding: 0 1.8rem;
        position: fixed;
        top: 0;
        left: 0;
    }

    .site-nav .row {
        height: var(--site-nav-height-mobile);
    }

    body.header-pined.mobile-header-open .site-nav {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    body.header-pined .site-nav .row {
        height: var(--site-nav-height-mobile);
    }

    /* --- */

    .site-nav .logo {
        width: 15rem;
        height: 3rem;
        margin-top: 0.2rem;
    }

    /* --- */

    .site-nav .nav {
        display: none;
    }

}

/* #endregion */


/* #region TINT — DARK */
/* Solid black nav for any blog-family page (single post, category/category-blog
   archive, tag archive — is_home() too, moot since index.php is orphaned on
   this site), same treatment whether pinned or not (unlike `default`, which
   goes transparent-at-top / white-once-pinned). Renamed from
   `TINT — BLUE GLOBAL` (2026-08-28) — user-facing concept is called `dark`,
   not `tinted`, going forward. `.tinted-blue` dropped from every selector in
   this region in the same pass: it was a second `header_type` ACF choice
   (blue-violet bg) sharing this region with `.blog-family`, now deprecated
   per user decision — its CSS deleted so the ~12 pages that had it fall
   through to plain `default`. The ACF choice itself is left in the field
   (includes/modules.acf.php) — flagged as a pending decision, not removed.

   Was `.archive.category, .single-post` (2026-08-26: replaced with
   `.blog-family` — .archive.category never matched tag archives, WP emits
   `.archive.tag` there, which is why tag.php's nav silently stayed on the
   default white/light treatment instead of black; `.blog-family`, already
   computed in header.php for this exact set of templates, fixes it in one
   place instead of enumerating each WP-native class here).

   `:not(.pass-tinted-section)` removed from every selector in this region
   (2026-08-26) — that guard cancelled the tint once the user scrolled past
   the tinted hero section (site-nav/script.js's `scroll()` toggled the class
   based on hero height); the tint is now permanent for the whole page
   regardless of scroll position. `pass-tinted-section` itself, and the
   `tintedSection`/`tintedComp` detection that computed it, were removed from
   site-nav/script.js in the same pass — nothing reads that class anymore.

   `box-shadow: none` folded in below (2026-08-28) — previously lived in a
   loose, unlabeled block further down this file scoped only to
   `.single-post`/`.category` (pre-dating the `.blog-family` consolidation);
   folded here so every blog-family page (incl. tag/home) gets the same
   treatment instead of a mix, per this project's CSS hygiene rule #6
   (AGENTS.md). The `#inner-wrapper` padding-top mechanic that prevents the
   fixed dark nav overlapping page content is NOT duplicated here — the
   combined selector in the ACADEMY region below
   (`:is(..., .blog-family) #inner-wrapper { padding-top: ... }`) already
   covers `.blog-family`, confirmed before this edit. */
.blog-family :is(.site-nav, .site-nav-mobile) {
    background: var(--black);
}

/* `body` prefix (not just `.blog-family`) matches body.header-pined .site-nav's
   own specificity (0,2,1) exactly; this region loading after BASE DESKTOP in
   source order then wins the tie without !important — same effective result,
   lower specificity (2026-08-31 hygiene pass). */
body.blog-family .site-nav {
    box-shadow: none;
}

/* logo */
.blog-family .site-nav .logo {
    background-image: url('./assets/logo-full-white-color.svg');
}

.blog-family .site-nav svg path {
    fill: var(--white);
}

.blog-family .site-nav .try-button a {
    background: var(--white);
    color: var(--black);
}

/* nav-links */
.blog-family .site-nav .nav>ul>li:not(.try-button):not(.login-button) > :is(a, button.mega-trigger) {
    color: #d8d8d8;
}

.blog-family .site-nav .nav>ul>li:not(.try-button):not(.login-button):is(.current-menu-ancestor, .current-menu-item) > :is(a, button.mega-trigger) {
    color: var(--white);
}

.blog-family .site-nav-mobile .nav>ul li:not(.try-button):not(.login-button) a {
    color: #b6c1da;
}

.blog-family .site-nav-mobile .nav>ul li:not(.try-button):not(.login-button):is(.current-menu-ancestor, .current-menu-item) > a,
.blog-family .site-nav-mobile .nav>ul li:not(.try-button):not(.login-button) .current-menu-item > a {
    color: var(--white);
}

.blog-family .site-nav .nav>ul .white-button a {
    border-color: var(--white);
    color: var(--white);
}

/* hover-states */
.blog-family .site-nav .nav>ul>li:not(.try-button):not(.login-button) > :is(a, button.mega-trigger):hover {
    color: var(--white);
}

.blog-family .site-nav .nav>ul .try-button:not(.white-button) a:hover {
    color: var(--white);
}

.blog-family .site-nav .nav>ul .try-button:not(.white-button) a:hover::before {
    background: var(--white);
}

.blog-family .site-nav .nav>ul .white-button a:hover {
    background-color: var(--white);
    color: var(--figma-gama-hover);
}

/* hamburger */
.blog-family .site-nav .hamburger {
    color: var(--white);
}

/* #endregion */


/* #region TINT — ACADEMY */
/* Triggered by .academy-family (header.php's $is_academy, covers the main
   page + children — .page-template-academy is a redundant subset, dropped)
   plus WP-core .blog-post-academy/.tax-academy_category/etc. */

/* background */
:is(.blog-post-academy, .academy-family) .site-nav { background-color: unset; background: var(--black); }

/* logo */
:is(.blog-post-academy, .tax-academy_category, .post-type-archive-academy, .single-academy, .academy-family) .site-nav .logo {
    background-image: url('./assets/logo-tracking-academy.svg'); width: 16.7rem;
    background-position: left;
    background-size: auto 100%;
    margin-right: 0;
}
:is(.post-type-archive-academy, .tax-academy_category, .single-academy, .blog-post-academy, .academy-family) .site-nav .logo.academy {
    background-position: right;
    width: 13rem;
}
:is(.single-academy, .tax-academy_category, .post-type-archive-academy) .site-nav .logo {
    background-image: url('./assets/logo-tracking-academy-black.svg');
}
:is(.post-type-archive-academy, .tax-academy_category, .single-academy) .site-nav .logo.academy {
    background-image: url('./assets/logo-tracking-academy-black.svg');
}

/* nav-links */
:is(.blog-post-academy, .academy-family) .site-nav .nav>ul > li > :is(a, button.mega-trigger) { color: var(--white); }

:is(.blog-post-academy, .academy-family) .site-nav .nav>ul > .current-menu-parent > :is(a, button.mega-trigger) { color: var(--white); font-weight: 600; }

/* hover-states */
:is(.blog-post-academy, .academy-family) .site-nav .nav>ul > li > :is(a, button.mega-trigger):hover { color: var(--site-nav-academy-lavender); }

/* hamburger */
:is(.blog-post-academy, .academy-family) .site-nav .hamburger { color: var(--white); }

:is(.blog-post-academy, .academy-family) .site-nav .hamburger.mobile { margin-left: auto; }

:is(.blog-post-academy, .academy-family) #inner-wrapper { padding-top: var(--site-nav-height-mobile); }

/* Academy desktop layout: taller unpinned header, transparent over the gradient
   painted on #inner-wrapper::before, wider logo, roomier nav. */
@media only screen and (min-width: 769px) {
    :is(.blog-post-academy, .single-academy, .tax-academy_category, .post-type-archive-academy, .academy-family) .site-nav .nav { margin-left: auto; }
    body:not(.header-pined):is(.blog-post-academy, .academy-family) .site-nav { background: var(--black); }
    body:not(.header-pined).academy-family .site-nav .row { height: var(--site-nav-height); }


    :is(.blog-post-academy, .academy-family, .single-academy, .blog-family, .search-results, .term-integrations) #inner-wrapper { padding-top: var(--site-nav-height); }

    :is(.blog-post-academy, .academy-family) #inner-wrapper::before { content: ''; height: var(--site-nav-height); width: 100%; background: var(--black); position: absolute; top: 0; left: 0; }

    :is(.blog-post-academy, .academy-family) .site-nav .logo { width: 22.3rem; height: 4rem; }

    :is(.blog-post-academy, .academy-family) .site-nav .logo.academy {
        width: 17.3rem;
    }

    .header-pined:is(.blog-post-academy, .single-academy, .tax-academy_category, .post-type-archive-academy, .academy-family) .site-nav .logo { width: 13.9rem; height: 2.5rem; }
    .header-pined:is(.blog-post-academy, .single-academy, .tax-academy_category, .post-type-archive-academy, .academy-family) .site-nav .logo.academy { width: 10.8rem; }

    :is(.blog-post-academy, .academy-family) .site-nav .nav>ul > li { margin-left: 4.8rem; }

    :is(.blog-post-academy, .academy-family) .site-nav .nav>ul ul { width: 14rem; margin-left: -7rem; }

    :is(.single-academy, .tax-academy_category, .post-type-archive-academy) .site-nav .logo:not(.academy) { margin-left: 1.15rem; }
}

/* #endregion */


/* #region MEGA-MENU */
/* Triggered by: the mega-menu markup inside the nav (components/mega-menu/).
   Only the site-nav side lives here — the panel itself is styled in
   components/mega-menu/style.css. */

/* Academy entry: the trigger label is swapped for the academy wordmark icon,
   white on any tinted header. */
/* .site-nav .nav>ul>li.academy-logo .mega-trigger {
    background: url('./assets/academy_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
    width: 2.2rem;
    height: 1.9rem;
}

:is(.archive, .single-post) .site-nav .nav>ul>li.academy-logo .mega-trigger {
    background: url('./assets/academy_logo_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
} */

/* Old-menu equivalent: default Walker_Nav_Menu output has no .mega-trigger
   button, classes land on the <li> and the icon target is the plain <a>. */
.site-nav .nav>ul>li.academy-logo > a {
    background: url('./assets/academy_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 2.2rem;
    height: 1.9rem;
    font-size: 0;
    overflow: hidden;
    text-indent: -1000px;
    white-space: nowrap;
}

:is(.archive, .single-post) .site-nav .nav>ul>li.academy-logo > a {
    background: url('./assets/academy_logo_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Active-section dot indicator, desktop only. */
@media screen and (min-width : 768px) {

    .site-nav #menu-mega-menu .mega-trigger {
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    .site-nav #menu-mega-menu .mega-trigger.active {
        font-weight: 800;
    }

    .site-nav #menu-mega-menu .mega-trigger::after {
        --_s: 0.5rem;
        content: '';
        width: var(--_s);
        height: var(--_s);
        background: var(--red);
        border-radius: 100%;
        overflow: hidden;
        display: block;
        margin-top: -0.25rem;

        opacity: 0;
        pointer-events: none;
        transition: 0.5s;
    }

    .site-nav #menu-mega-menu .mega-trigger.active::after {
        opacity: 1;
    }
}

/* #endregion */