/* Nav Styles */

/* ///////////////////// */

/* -------------- */
/* DESKTOP */
/* TABLET */
/* MOBILE */
/* MINI-MOBILE */
/* -------------- */

/* DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

/*
-----------------------------------------------------------------------------

01. Navigation

-----------------------------------------------------------------------------
*/

/***** Display */

.nav--desktop {
  display: block;
}

.nav--mobile {
  display: none;
}

/***** Nav-Wrap */

.nav--desktop .nav-wrap {
  width: 100%;
  height: var(--nav__height);
  position: fixed;
  top: 0;
  z-index: 100;
  background: var(--color__light);
  overflow: visible;
}

/***** Top Navigation */

.nav--desktop .nav-wrap__inner {
  position: relative;
  margin: auto;
  height: var(--nav__height);
  width: 100%;
  padding: 0.6em 2.5em;
  z-index: 20;
}

.nav--desktop .logo-wrap {
  --logo__height: calc(var(--nav__height) - 1.5rem);

  height: var(--logo__height);
  width: calc(var(--logo__height) * 0.874);
  -webkit-transform: translateY(-48%);
  -ms-transform: translateY(-48%);
  transform: translateY(-48%);

  /* take the logo-wrap out of the horizontal flex-flow */
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.nav--desktop .nav-wrap__inner .cta-block {
  position: absolute;
  right: 3em;
  /* top: 3em; */
  width: auto;
  display: flex;
}

.nav--desktop .nav-wrap__inner .cta-wrap {
  display: inline-block;
}

.nav--desktop .nav-wrap__inner .nav-bg {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color__light);
  z-index: -1;
  pointer-events: none;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

body:not(.home) .nav--desktop .nav-wrap__inner .nav-bg {
  display: none;
}

/***** Nav-Wrap Trigger */

.nav--desktop .nav-trigger {
  position: relative;
  cursor: pointer;
}

.nav--desktop .nav-trigger span.burger-bun {
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.08rem;
  width: 3rem;
  background: var(--color__accent);
}

.nav--desktop .nav-trigger span.label {
  display: block;
  margin-left: 4.5rem;
  color: var(--color__accent);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/***** Flyout */

.nav--desktop .flyout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--nav__height);
  height: calc(100 * var(--vh, 1vh));
  width: 100%;
  z-index: 10;
  -webkit-transform: translateY(calc(-100% + var(--nav__height)));
  -ms-transform: translateY(calc(-100% + var(--nav__height)));
  transform: translateY(calc(-100% + var(--nav__height)));
  background: var(--color__light);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.nav--desktop .flyout .flex-wrap {
  max-width: 72rem;
}

.nav--desktop .flyout .left-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.nav--desktop .flyout .left-box ul.nav-list {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.nav--desktop .flyout .right-box {
  position: relative;
}

.nav--desktop .flyout .right-box::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.25em;
  width: 0;
  height: calc(100% - 0.5em);
  border-left: var(--border__regular);
  border-color: var(--color__secondary);
  font-size: var(--fsize__h2);
}

.nav--desktop .flyout ul.nav-list {
  padding: 0;
  margin: 0;
}

.nav--desktop .flyout ul.nav-list li {
  font-family: "Practice", sans-serif;
  font-weight: 400;
  font-size: var(--fsize__h2);
  line-height: 1.17em;
  margin: 0.25em 2em 0.25em 1em;
  letter-spacing: 0em;
  color: var(--color__accent);
  text-decoration: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  display: block;
  opacity: 0;
  width: 100%;
}

.nav--desktop .flyout li.sub-item .word {
  display: inline-block;
  margin-left: 0.25em;
}

.nav--desktop .flyout li.sub-item .svg-wrap {
  height: 0.35em;
  display: inline-block;
  -webkit-transform: translateY(-0.14em);
  -ms-transform: translateY(-0.14em);
  transform: translateY(-0.14em);
}

.nav--desktop .flyout li.sub-item .svg-wrap .fill {
  fill: var(--color__accent);
}

.nav--desktop .flyout a {
  color: var(--color__accent);
}

.nav--desktop .flyout a:hover,
.nav--desktop .flyout a.actual-parent,
.nav--desktop .flyout a.actual-site {
  color: var(--color__primary);
}

/***** HOME overrides */

.home .nav--desktop .nav-wrap {
  background: rgba(255, 255, 255, 0);
}

.home .nav--desktop .flyout {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

/***** Breadcrumb */

.breadcrumb .current-page {
  color: var(--color__error);
}

/* MINI-DESKTOP //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 80em) {
  .nav--desktop .nav-wrap__inner .cta-block {
    flex-direction: column;
    align-items: flex-end;
    margin-top: -0.75em;
    right: 2.5em;
  }

  .nav--desktop .nav-wrap__inner .cta-block .cta-wrap {
    margin-top: 0.75em;
  }

  /* SPECIAL BREAKPOINT: hide logo letters */
  /* @media only screen and (min-width: 55.01em) and (max-width: 70em) {
    .nav--desktop .logo-wrap {
      width: calc(var(--logo__height) * 1.05);
    }

    .svg-wrap svg.delfinhorsetraining-logo .letters {
      display: none;
    }
  } */
}

/* TABLET //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 55em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */
  :root {
    --nav__height: 5rem;
  }

  /***** Display */

  .nav--desktop {
    display: none;
  }

  .nav--mobile {
    display: block;
  }

  /***** Nav-Wrap */

  .nav--mobile .nav-wrap {
    z-index: 100;
    position: fixed;
    bottom: 0;
    top: unset;
    border-bottom: 0;
    width: 100%;
    height: var(--nav__height);
    background: var(--color__light);
    -webkit-box-shadow: 0 0 0.5em 0.125em rgb(0 0 0 / 10%);
    box-shadow: 0 0 0.5em 0.125em rgb(0 0 0 / 10%);
  }

  .nav--mobile .nav-wrap__inner {
    margin: auto;
    height: 100%;
    width: 100%;
    padding: 0.6em 1.5em;
  }

  .nav--mobile .nav-scroll-wrap {
    position: absolute;
    bottom: var(--nav__height);
    left: 1.5em;
    width: calc(100% - 3em);
    height: calc(100dvh - var(--nav__height) - 1em);
    overflow-y: scroll;
    scrollbar-width: none;
    opacity: 0;
    pointer-events: none;
  }

  .nav-scroll-wrap::-webkit-scrollbar {
    display: none;
  }

  /**/

  .nav--mobile ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
  }

  .nav--mobile ul.nav-list {
    overflow: visible;
    width: 100%;
    left: 0;
    top: 1em;
    margin: 0;
    height: auto;
    padding: 1em 0;
  }

  .nav--mobile .hline {
    display: block;
    width: 100%;
    height: 0;
    margin: 0.5em 0;
    background: transparent;
    border-bottom: var(--border__regular);
  }

  .nav--mobile ul.nav-list li {
    font-family: "Practice", sans-serif;
    font-weight: 400;
    font-size: var(--fsize__h3);
    line-height: 1.17em;
    margin: 0.175em 0;
    letter-spacing: 0em;
    text-decoration: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    display: block;
  }

  .nav--mobile ul.nav-list li .word {
    color: var(--color__accent);
  }

  .nav--mobile ul.nav-list li.sub-item .word {
    display: inline-block;
    margin-left: 0.25em;
  }

  .nav--mobile ul.nav-list li.sub-item .svg-wrap {
    height: 0.35em;
    display: inline-block;
    -webkit-transform: translateY(-0.14em);
    -ms-transform: translateY(-0.14em);
    transform: translateY(-0.14em);
  }

  .nav--mobile ul.nav-list li.sub-item .svg-wrap .fill {
    fill: var(--color__accent);
  }

  /**/

  .nav--mobile .logo-wrap {
    --logo__height: calc(var(--nav__height) - 1.5rem);

    height: var(--logo__height);
    width: calc(var(--logo__height) * 0.874);
    position: absolute;
    bottom: 0.75em;
    left: 1.5em;
  }

  /***** Nav-Wrap Trigger */

  .nav--mobile .nav-trigger {
    display: block;
    right: 0;
    bottom: 0;
    position: fixed;
    height: var(--nav__height);
    width: 6.75rem;
    cursor: pointer;
    z-index: 99;
  }

  .nav--mobile .nav-trigger span {
    position: absolute;
    right: 1.5em;
    bottom: 50%;
    height: 0.08rem;
    width: 2.5rem;
    background: var(--color__accent);
  }
}

/* MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 36em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */
}

/* MINI-MOBILE //////////////////////////////////////////////////////////////// */
/*
01. Navigation
*/

@media only screen and (max-width: 27em) {
  /*
  -----------------------------------------------------------------------------

  01. Navigation

  -----------------------------------------------------------------------------
  */

  /***** Nav-Wrap */

  /***** Nav-Styling */

  /***** Nav-Wrap Trigger */
}