/* footer.st.css */
@namespace "Footer";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    --font-family-base,
    --color-accent-1,
    --color-accent-4,
    --color-ui-inverse,
    --spacing-unit,
    --gutter-width-sm,
    --gutter-width-md,
    tablet;
}

:import {
  -st-from: "../../components/Footer/footer.st.css";
  -st-default: Footer;
}

:import {
  -st-from: "../../components/Social/social.st.css";
  -st-default: Social;
}

:import {
  -st-from: "../../mixins/linkFocus.st.css";
  -st-named: linkFocus;
}

@st-scope Base {
  Footer {
    --background-color: var(--color-accent-1);
    --foreground-color: var(--color-ui-inverse);
    --social-bg-color: var(--color-accent-4);
    --social-icon-color: var(--color-accent-1);
    --social-icon-hover-color: var(--color-ui-inverse);
    background: var(--background-color);
    color: var(--foreground-color);
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }

  Footer::inner {
    padding: calc(var(--gutter-width-md) * 2) 0;
  }

  Footer::siteLinks {
    margin-bottom: calc(var(--spacing-unit) * 5);
  }

  Footer::siteLinks::anchor {
    color: var(--foreground-color);
    font-size: 14px;
    line-height: 1.65;
  }

  /* Footer links focus state */
  Footer::siteLinks::anchor:focus-visible {
    color: var(--color-accent-1);
  }

  /* Focus state */
  Footer Social::anchor:focus-visible,
  Footer::siteLinks::anchor:focus-visible {
    -st-mixin: linkFocus;
  }

  Footer::legalInfo {
    font-family: var(--font-family-base);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
  }

  Footer::legalInfo br:first-child {
    line-height: calc(var(--spacing-unit) * 5);
  }

  Footer::socialLinks {
    background: var(--social-bg-color);
    width: 100%;
    padding-top: calc(var(--spacing-unit) * 2);
    padding-bottom: calc(var(--spacing-unit) * 2);
  }

  Footer Social svg {
    color: var(--social-icon-color);
  }

  Footer Social::anchor:hover svg {
    color: var(--social-icon-hover-color);
  }
}

@media value(tablet) {
  @st-scope Base {
    Footer::inner {
      width: 100%;
      margin: 0 auto;
    }

    Footer::socialLinks {
      padding: var(--gutter-width-sm) 0;
    }
  }
}