////
///
/// Nav Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `nav` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 20 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Nav
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- nav-container  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: q(1200);
        margin: 0 auto;
        padding: var(--ss-spacing-4) var(--ss-spacing-6);
    }

    // -- nav-brand  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-brand {
        z-index: calc(var(--ss-z-dropdown) + 1);
    }

    // -- nav-toggle  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: q(44);
        height: q(44);
        gap: q(5);
        z-index: calc(var(--ss-z-dropdown) + 1);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            display: none;
        }
    }

    // -- nav-toggle-line  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-toggle-line {
        display: block;
        width: q(24);
        height: q(2);
        background: var(--ss-color-primary);
        transition: all var(--ss-duration-200) ease;
    }

    // -- nav-menu  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-menu {
        @media (max-width: calc(map.get(breakpoints.$ss-breakpoints, "lg") - q(1))) {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--ss-color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all var(--ss-duration-300) ease;

            &.is-open {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    // -- nav-links  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-links {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-8);

        @media (max-width: calc(map.get(breakpoints.$ss-breakpoints, "lg") - q(1))) {
            flex-direction: column;
            gap: var(--ss-spacing-6);
        }
    }

    // -- nav-link  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-link {
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-gray-600);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: color var(--ss-duration-200) ease;

        &:hover,
        &.active {
            color: var(--ss-color-primary);
        }

        @media (max-width: calc(map.get(breakpoints.$ss-breakpoints, "lg") - q(1))) {
            font-size: var(--ss-font-size-3xl);
            text-transform: none;
            letter-spacing: normal;
        }
    }

    // -- nav-link--cta  (from site-scape_ventures/src/static/scss/layout/_header.scss) --
    .ss-c-nav-link--cta {
        color: var(--ss-color-white);
        background: var(--ss-color-primary);
        padding: var(--ss-spacing-2) var(--ss-spacing-4);
        border-radius: var(--ss-radius-none);

        &:hover {
            background: var(--ss-color-primary);
            color: var(--ss-color-white);
        }
    }

    // -- menu__sublist  (from site-scape_press/src/static/scss/layout/_nav.scss) --
    .ss-c-menu__sublist {
        list-style: none;
        margin: var(--ss-spacing-3) 0 var(--ss-spacing-2) q(56);
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--ss-spacing-2) var(--ss-spacing-5);

        li a {
            font-family: var(--ss-font-family-sans);
            font-size: var(--ss-font-size-sm);
            color: color-mix(in srgb, var(--ss-color-white) 60%, transparent);
            text-decoration: none;
            text-transform: none;
            letter-spacing: 0;

            &:hover {
                color: var(--ss-color-white);
            }
        }
    }

    // -- works-nav  (from site-scape_agency/src/static/scss/app/_metadata.scss) --
    .ss-c-works-nav {
        display: flex;
        flex-direction: column;
        gap: q(8);
    }

    // -- work-nav-item  (from site-scape_agency/src/static/scss/app/_metadata.scss) --
    .ss-c-work-nav-item {
        padding: q(4) 0;
        font-size: q(14);
        color: inherit;
        text-decoration: none;
        opacity: 0.5;
        transition: opacity var(--ss-duration-300) ease;

        &:hover {
            opacity: 0.8;
        }

        &.is-active {
            opacity: 1;
            font-weight: 600;
        }
    }

    // -- nav-mobile  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-nav-mobile {
        display: none;
    }

    // -- nav-horizontal  (from site-scape_agency/src/static/scss/temp/_temp_fixes.scss) --
    .ss-c-nav-horizontal {
        display: flex;
        flex-direction: row;
        gap: q(24);
        margin: 0;
        padding: 0;

        li {
            margin: 0;
        }
    }

    // -- mobile-nav  (from site-blockfoundation_io/src/static/scss/layout/_header.scss) --
    .ss-c-mobile-nav {
        position: fixed;
        top: q(72);
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--ss-color-background);
        z-index: unset;
        padding: var(--ss-spacing-6);
        transform: translateX(100%);
        transition: transform var(--ss-duration-300) ease;

        &--open {
            transform: translateX(0);
        }

        // (stripped @include block)


        &__link {
            display: block;
            padding: var(--ss-spacing-4) 0;
            font-size: var(--ss-font-size-base);
            font-weight: var(--ss-font-weight-normal);
            color: var(--ss-color-gray-700);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: q(1) solid var(--ss-color-gray-300);

            &:hover {
                color: var(--ss-color-white);
            }
        }
    }

    // -- nav  (from site-kockums_foundation/src/static/scss/layout/_navigation.scss) --
    // Scoped under .ss-c-kockums: the bare `display: none` (a mobile-first
    // site nav) hid the nav module everywhere.
    .ss-c-kockums .ss-c-nav {

      // (stripped @include block)


      &__list {
        display: flex;
        align-items: center;
        gap: var(--ss-spacing-8);
      }

      &__item {
        position: relative;
      }

      &__link {
        font-size: var(--ss-font-size-base);
        font-weight: var(--ss-font-weight-normal);
        transition: color var(--ss-duration-150) ease;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: q(-2);
          left: 0;
          width: 0;
          height: q(1);
          background-color: var(--ss-color-primary);
          transition: width var(--ss-duration-150) ease;
        }

        &:hover {

          &::after {
            width: 100%;
          }
        }

        &--active {
          &::after {
            width: 100%;
          }
        }
      }
    }

    // -- nav-overlay  (from site-kockums_foundation/src/static/scss/layout/_navigation.scss) --
    .ss-c-nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: unset;
      background-color: color-mix(in srgb, var(--ss-color-black) 30%, transparent);
      opacity: 0;
      visibility: hidden;
      transition: all var(--ss-duration-200) ease;

      &.is-visible {
        opacity: 1;
        visibility: visible;
      }
    }

    // -- nav-number  (from site-matter_tech/src/static/scss/layout/_header.scss) --
    .ss-c-nav-number {
        // (stripped @include)
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-300);

        // (stripped @include block)

    }

    // -- nav-list  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-nav-list {
        display: flex;
        align-items: center;
        gap: unset;
    }

    // -- mobile-nav-toggle  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: q(40);
        height: q(40);
        background: none;
        border: none;
        cursor: pointer;
        border-radius: 0;

        @media (min-width: q(1024)) {
            display: none;
        }

        &:hover {
            background: var(--ss-color-gray-100);
        }
    }

    // -- hamburger  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-hamburger {
        width: q(20);
        height: q(2);
        background: var(--ss-color-gray-700);
        position: relative;

        &::before, &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: q(2);
            background: var(--ss-color-gray-700);
            left: 0;
        }

        &::before { top: q(-6); }
        &::after { bottom: q(-6); }
    }
}