@import './components/navbar.css';
@import './components/buttons.css';
@import './components/social-links.css';
@import './components/link-fancy-arrow.css';

/* Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
@layer base {
  :root {
    --header-height: 62px;
    --container-padding: theme('spacing.4');

    @screen sm {
      --header-height: 72px;
      --container-padding: 62px;
    }

    @screen md {
      --header-height: 109px;
      --container-padding: 84px;
    }

    @screen lg {
      --container-padding: theme('spacing.16');
    }
  }

  * {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-outline;
  }

  html {
    @apply scroll-smooth;
  }

  body {
    padding-top: var(--header-height);
  }

  b,
  strong {
    @apply font-medium;
  }

  a {
    text-decoration: underline;
    color: blue;
  }

  .wysiwyg {
    &.wysiwyg--yellow {
      --color-accent: theme('colors.accent.yellow.DEFAULT');
    }
    &.wysiwyg--purple {
      --color-accent: theme('colors.accent.purple.DEFAULT');
    }
    &.wysiwyg--red {
      --color-accent: theme('colors.accent.red.DEFAULT');
    }
    &.wysiwyg--green {
      --color-accent: theme('colors.accent.green.DEFAULT');
    }
    &.wysiwyg--blue {
      --color-accent: theme('colors.accent.blue.DEFAULT');
    }
    &.wysiwyg--teal {
      --color-accent: theme('colors.accent.teal.DEFAULT');
    }

    ul,
    ol {
      @apply grid pl-8 gap-y-4;

      ul,
      ol {
        @apply pt-4;
      }
    }

    ul {
      @apply list-square;
      @apply marker:text-[var(--color-accent)];

      ul {
        /* @apply list-[circle]; */
        @apply list-["\25A1____"];

        ul {
          /* @apply list-["–___"]; */
          @apply list-["\2013___"];
        }
      }
    }

    ol {
      @apply list-decimal;

      ol {
        @apply list-[lower-latin];

        ol {
          @apply list-[lower-roman];
        }
      }
    }

    dl {
      dt {
        @apply font-medium text-[var(--color-accent)] pt-4 first:pt-0;
      }
    }
  }
}

@layer components {
  .container {
    @apply block w-full lg:max-w-[1322px] mx-auto px-[var(--container-padding)];
  }
  .xl-container {
    @apply block w-full max-w-[1401px] mx-auto md:px-10;
  }
  /*==========================
  Text
  ============================*/
  /* .lead {
    @apply text-sm text-gray-dark font-bold tracking-widest uppercase;
  } */

  /*==========================
  Buttons
  ============================*/
  .btn {
    /* @apply inline-flex justify-center px-6 py-4 cursor-pointer text-center text-h7 text-white bg-black focus:outline-none focus:ring focus:ring-outline transition-colors; */
    @apply inline-flex justify-center px-6 py-4 cursor-pointer text-center text-h7 text-white bg-black transition-colors;
  }

  .btn--white {
    @apply text-black bg-white;
  }

  .btn--blue {
    @apply text-white bg-accent-blue;
  }
}

@layer utilities {
  .clip-path-inset {
    clip-path: inset(0);
  }

  .text-h7,
  .text-h8,
  .text-h9 {
    @apply uppercase;
  }
}