/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Footer component */
@layer components {
  .footer {
    background-color: var(--color-surface-variant);
    padding-block: var(--space-2xl) var(--space-l);
    border-top: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
    color: var(--color-text);
    font-family: var(--font-sans);

    & .footer__inner {
      max-width: var(--max-content);
      margin-inline: auto;
      padding-inline: var(--space-m);
    }

    & .footer__grid {
      display: grid;
      gap: var(--space-xl);
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      margin-bottom: var(--space-2xl);
    }

    & .footer__title {
      font-family: var(--font-serif);
      font-size: var(--size-step-2);
      color: var(--color-primary);
      margin-block-start: 0;
      margin-block-end: var(--space-s);
    }

    & .footer__description {
      max-width: 35ch;
      opacity: 0.9;
      font-size: var(--size-step-0);
      margin: 0;
    }

    & .footer__nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: var(--space-l);
    }

    & .footer__nav-title {
      font-family: var(--font-serif);
      font-size: var(--size-step-1);
      margin-block-start: 0;
      margin-block-end: var(--space-m);
      color: var(--color-primary);
    }

    & .footer__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: var(--space-xs);
    }

    & .footer__link {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s ease, opacity 0.2s ease;
      opacity: 0.8;

      &:hover {
        color: var(--color-primary);
        opacity: 1;
      }
    }

    & .footer__bottom {
      border-top: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
      padding-top: var(--space-l);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-m);
      font-size: var(--size-step-0);
      opacity: 0.7;
    }

    & .footer__attribution a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.2s ease;

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