/* ------------------------------------ *\
    $VARIABLES
\* ------------------------------------ */
:root {
  --color-light: #F5F4EE;
  --color-dark: #18181A;
  --color-stone: #D2CDC2;
  --color-gold: #B08725;
  --color-copper: #4D1A04;
  --color-slate: #505A6B;
  --color-platinum: #C8D2EC;

  --space-xxs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-base: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-xxl: 4rem; /* 64px */
  --space-max: 4.5rem; /* 72px */

  --font-primary: 'Aime', serif;
  --font-secondary: 'Aptos', sans-serif;
}

/* ------------------------------------ *\
    $FOOTER
\* ------------------------------------ */
.c-main-footer {
  background: var(--color-dark);
  /*padding: var(--space-lg) var(--space-lg);*/
  
  @media (max-width: 1919px) {
      padding: var(--space-xxl) var(--space-lg) var(--space-lg);
    }
    @media (max-width: 767px) {
    padding: var(--space-xxl) var(--space-base) var(--space-lg)
    }

  & .c-main-footer__wrapper {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-xxl);
  }

  & .c-main-footer__upper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xl);

    @media (min-width: 1024px) {
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-md);
    }

    & .logo-wrapper {
      grid-column: 1 / span 6;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;

      @media (min-width: 1024px) {
        grid-column: 1 / span 4;
      }

      & .o-logo-footer {
        & svg {
          & path {
            transition: all 350ms ease-out;
          }
        }

        &:hover {
          cursor: pointer;

          & svg {
            & path {
              fill: var(--color-light);
            }
          }
        }
      }
    }

    & .c-menu-footer {
      grid-column: 1 / span 6;
      position: relative;
      z-index: 2;

      @media (min-width: 1024px) {
        grid-column: 5 / span 8;
      }

      > ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--space-xl);

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(4, 1fr);
        }
      }
    }
  }

  & .c-menu-footer__graphic {
    display: none;
    transform: translateY(64px);

    @media (min-width: 1024px) {
      display: block;
    }
  }

  & .c-menu-footer__graphic--mobile {
    display: block;
    width: 100%;
    object-fit: contain;
    position: absolute;
    right: 0;
    z-index: 1;
    transform: translateY(calc(-100% - 24px));

    @media (min-width: 600px) {
      max-width: 330px;
    }

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

  & .c-menu-footer__menu-item {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-base);
    color: var(--color-light);
    font-family: Aptos;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0.006em;
    text-transform: uppercase;
  }

  & .c-menu-footer--sub-menu {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-xs);
	padding:0px;

    & .c-menu-footer--sub-menu__menu-item {
      color: var(--color-light);
      font-family: var(--font-secondary);
      font-weight: 400;
      font-size: 16px;
      line-height: 20.8px;
      letter-spacing: 0;
      text-transform: none;

      &:hover {
        cursor: pointer;
        color: var(--color-gold);
      }

      & a {
        color: currentColor;
      }
    }
  }

  & .c-main-footer__utility {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--space-xl);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-stone);
    position: relative;

    @media (min-width: 1024px) {
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: baseline;
    }

    & .copyright {
     /* display: flex;
      gap: var(--space-xs);
      margin-bottom: var(--space-base);

      @media (min-width: 768px) {
        margin-bottom: var(--space-xs);
      }*/
	   @media (min-width: 768px) {
        padding: 0px 0px 0px var(--space-base);
        border-left: 1px solid var(--color-light);

        &:first-child {
          padding: 0;
          border-left: none;
        }
      }

      & a {
        color: currentColor;
		line-height:130%;
      }
    }

    & .c-menu-utility > ul {
      display: flex;
      flex-flow: column nowrap;
      gap: var(--space-base);

      @media (min-width: 768px) {
        flex-flow: row nowrap;
        align-items: center;
      }

      > li {
        color: var(--color-light);
        font-family: var(--font-secondary);
        font-weight: 400;
        font-size: 0px;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
      }
    }

    & .c-menu-utility__menu-item {
      @media (min-width: 768px) {
        padding: 0px 0px 0px var(--space-base);
        border-left: 1px solid var(--color-light);

        &:first-child {
          padding: 0;
          border-left: none;
        }
      }

      &:hover {
        cursor: pointer;
        color: var(--color-gold);
      }

      & a {
        color: currentColor;
      }
    }

    & .c-menu-social {
		  margin-top: var(--space-base);

  @media(min-width:1281px) {
    margin-top: 0;
  }
      > ul {
        display: flex;
        flex-flow: row nowrap;
        gap: var(--space-md);
		align-items: center;
		vertical-align: middle;
      }
	

  

  li {
    text-align: center;
    margin: auto var(--space-xs);

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

      & a {
        color: var(--color-stone);

        > span {
          display: inline-block;
        }

        &:hover {
          color: var(--color-gold);

          & svg {
            color: var(--color-gold);
  
            & path,
            & rect {
              fill: var(--color-gold);
            }
          }
        }

        & svg {
          color: var(--color-stone);

          & path,
          & rect {
            fill: var(--color-stone);
          }
        }
      }
    }
  }
}