Footer

/* ======================================================================
   # _components.footer.css
   ====================================================================== */

.c-footer {
  @extend .u-print-hidden;

  @apply
    bg-primary
    text-white
    py-12
    md:py-24
  ;

  letter-spacing: 0.05625rem;
}





/* -------------------------------------
   # Main
   ------------------------------------- */

.c-footer__main {
  @apply
    text-tiny
    uppercase

    flex
    flex-col
    ;
}

@screen md {
  .c-footer__main {
    @apply
      flex-row
    ;
  }
}





/* -----------------------------------
 # Page
 ----------------------------------- */

.c-footer__page {
  @apply
    mt-4
  ;
}

@screen md {
  .c-footer__page {
    @apply
      mt-0
      w-1/4
    ;
  }
}



/***
 * Liste page
 */
.c-footer__list-page {
  @apply
    text-center
  ;
}

@screen md {
  .c-footer__list-page {
    @apply
      text-left
    ;
  }
}

.c-footer__list-page > li + li {
  @apply
    mt-4
  ;
}





/* -----------------------------------
 # Social
 ----------------------------------- */

.c-footer__social {
  @apply
    mt-4
  ;
}

@screen md {
  .c-footer__social {
    @apply
      mt-0
      w-1/4
    ;
  }
}



/***
 * Social link
 */

.c-footer__list-social {
  @apply
    flex
    flex-row
    flex-wrap

    justify-center
  ;
}

@screen md {
  .c-footer__list-social {
    @apply
      flex-col
      justify-start
    ;
  }
}

.c-footer__list-social > li {
  @apply
    p-2
  ;
}

@screen md {
  .c-footer__list-social > li {
    @apply
      p-0
    ;
  }

  .c-footer__list-social > li + li {
    @apply
      pt-4
    ;
  }
}

.c-footer__list-social a:focus svg {
  @apply outline-focus;
}

/* -----------------------------------
 # Logo
 ----------------------------------- */

.c-footer__logo {
  @apply
    order-first
  ;
}

@screen md {
  .c-footer__logo {
    @apply
      order-last
      ml-auto
    ;
  }
}

.c-footer__logo > * {
  @apply
    mx-auto
  ;
}





/* -------------------------------------
   # Secondary
   ------------------------------------- */

.c-footer__secondary {
  @apply
    text-center
    mt-12
    text-xs
    uppercase
  ;

  font-size: 0.625rem;
  letter-spacing: 0.0625rem;
}

@screen md {
  .c-footer__secondary {
    @apply
      text-left
    ;
  }
}




/* -------------------------------------
   # Headings
   ------------------------------------- */

.c-footer h3 {
  @apply
    mb-4
    ;
}





/* -----------------------------------
   # Paragraph
   ----------------------------------- */

.c-footer p {
  @apply
    mb-5
    ;
}





/* -----------------------------------
   # Anchor
   ----------------------------------- */

.c-footer a:hover {
  @apply
    underline
    ;
}

.c-footer a:focus {
  @apply
    outline-focus
  ;
}



/* -----------------------------------
   # SVG
   ----------------------------------- */

.c-footer svg {
  @apply
    h-6
    fill-current
    ;
}