@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  @font-face {
    font-family: "Averta Regular";
    font-weight: 300;
    src: url(/assets/Averta-Regular-876f603a3dea77764ba21672f475279dac81498b7e5fb4afc5f9ecab3882aab0.woff) format("woff"),
         url(/assets/Averta-Regular-e5f01bca764a1ed94b59391b88c5f3273fa36f44989354450ca9bf32a0d1fb84.ttf) format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "Averta Semibold";
    font-weight: 300;
    src: url(/assets/Averta-Semibold-e5212ce7505ad9deeede2cabdd3ad483e803ef53e9043fa636b2b08935105684.woff) format("woff"),
         url(/assets/Averta-Semibold-11b78ee83a9438f34a2ae5df8dc602782d6a58b0c88b69819def5c378005ee81.ttf) format("truetype");
    font-display: swap;
  }

  @font-face {
    font-family: "Averta Bold";
    font-weight: 300;
    src: url(/assets/Averta-Bold-d78eb92516ae769a0546e4c5ac4f547b099dcdcbe96b63dfd24e8b0a9df3fc61.woff) format("woff"),
         url(/assets/Averta-Bold-2ff5b38d05581a0fbb2daa61a1ab3eb92e4dd0257859f3dfb0bc4936dfa8a79c.ttf) format("truetype");
    font-display: swap;
  }

  html {
    --call-widget-cta: theme('colors.primary');
    --call-widget-input-focus: theme('colors.primary');
    --call-widget-button-bg: theme('colors.primary');
    --call-widget-button-bg-hover: theme('colors.hover');
    --call-widget-button-text: theme('colors.white');
    --viewport-content: 2rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html.has-modal body {
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
  }

  @screen lg {
    html {
      --viewport-content: 5rem;
    }
  }

  @screen xl {
    html {
      --viewport-content: 7rem;
    }
  }

  .scroll-container::-webkit-scrollbar {
    display: none;
  }

  .scroll-container {
    scrollbar-width: none;
  }

  .scroll-items {
    padding: 0 var(--viewport-content);
  }

  .scroll-items--full {
    padding-left: 100vw;
    padding-right: 100vw;
  }

  @media (hover: none) and (pointer: coarse) {
    .prev,
    .next {
      display: none!important;
    }
    div[data-qr="true"] {
      display: none!important;
    }
    div[data-qr="true"] ~ div[data-qr="false"] {
      display: block!important;
    }
  }

  .content {
    @apply text-base/normal lg:text-lg/normal space-y-6;

    a {
      @apply text-primary font-weight-semibold;
    }

    h2 {
      @apply text-2xl font-weight-bold;
    }

    h3 {
      @apply text-xl font-weight-bold;
    }

    hr {
      @apply !my-10;
    }

    ul {
      li {
        display: table;

        &::before {
          content: "•";
          display: table-cell;
          padding-right: 1rem;
        }

      }
    }

  }

  @screen lg {
    .current-page a {
      border-color: #820B8A;
    }
  }
  /* Menu */

  @media (max-width: 1024px) {
    [data-menu="open"] > header {
      @apply fixed inset-0 bg-white z-40;
    }
    [data-menu="open"] > header ul {
      @apply text-center h-screen flex flex-col justify-center fixed top-0 left-0 m-0;
    }
    [data-menu="open"] header {
      @apply text-primary;
    }
  }

  /* Buttons */

    .btn {
      @apply inline-flex items-center justify-center leading-none text-base p-4 px-6 rounded-full font-weight-semibold transition duration-200 ease-in-out;
    }
    .btn--primary {
      @apply text-white bg-primary;
    }
    .btn--primary:hover {
      @apply bg-accent/75;
    }
    .btn--secondary {
      @apply bg-gray-200 text-primary;
    }
    .btn--secondary:hover {
      @apply bg-gray-300;
    }
    .btn--nav:hover {
      @apply bg-gray-200;
    }
    .btn--dark {
      @apply text-white bg-primary transition duration-200 ease-in-out;
    }
    .btn--dark:hover {
      @apply bg-secondary;
    }
    .btn--icon {
      @apply p-4;
    }
    .btn--sm {
      @apply p-3 px-4;
    }
    .btn--xs {
      @apply p-0 px-4 text-xs h-8 leading-8;
    }
    .btn--animate:hover svg {
      @apply animate-wiggle;
    }

  /* Accordion */

    .accordion div {
      @apply py-6;
    }
    .accordion div + div {
      @apply border-t border-gray-300;
    }
    .accordion div header {
      @apply relative flex;
    }
    .accordion div header:after {
      @apply w-6 h-6 ml-auto;
      content: "";
      background-image: url(/icons/icon-accordion--open.svg);
    }
    .accordion p {
      @apply hidden;
    }
    .accordion .open header:after {
      background-image: url(/icons/icon-accordion--close.svg);
    }
    .accordion .open p {
      @apply block;
    }

  /* Tabs */

    .tabs {
      @apply overflow-hidden overflow-x-scroll w-full;
    }
    .tabs--rounded {
      @apply text-sm inline-flex;
    }
    .tabs--rounded ul li a,
    .tabs--rounded ul li button {
      @apply block rounded-full leading-none text-current whitespace-nowrap border border-gray-300 p-0 px-4 text-xs h-8 leading-8 text-secondary outline-none transition duration-200 ease-in-out;
    }
    .tabs--rounded ul li a:hover,
    .tabs--rounded ul li button:hover {
      @apply text-primary border-primary;
    }
    .tabs--rounded ul li a.active,
    .tabs--rounded ul li button.active {
      @apply text-primary border-primary;
    }

  /* Radial */

    .radial:before {
      content: "";
      position: absolute;
      width: 400px;
      aspect-ratio: 1 / 1;
      background-image: url(/radial_white.svg);
      background-repeat: no-repeat;
      background-size: cover;
      right: -200px;
      bottom: -200px;
      scale: 1.5;
      opacity: 0.2;
    }

    @screen lg {

      .radial {
        @apply relative;
      }

      .radial:before {
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
        scale: 1;
        width: 100%;
        background-position: 50% 50%;
      }
    }

    .radial > * {
      @apply relative z-20;
    }

    .modal {
      @apply relative overflow-y-auto w-full rounded-xxl shadow-lg bg-white p-8 pt-16 z-20 text-sm;
      max-height: 90vh;
      max-width: 90vw;
      overscroll-behavior-y: contain;
    }

    @screen sm {
      .modal {
        @apply max-w-2xl p-16 text-base;
      }
    }

    [data-modal]:has(.modal--full),
    [data-modal]:has(.modal--try),
    [data-modal]:has(.modal--book) {
      margin-top: 0!important;
    }

    .modal--full {
      @apply p-0 h-full w-[90dvw] max-w-full;
    }

    .modal--try {
      @apply p-0 w-full h-full max-h-[500px] max-w-[600px];
    }

    .modal--book {
      @apply p-0 w-full h-full max-h-[730px] max-w-[1000px];
    }

    .modal.open {
      @apply block;
    }

    .modal ol,
    .modal ul {
      @apply pt-6 md:pl-12 md:pt-8;
      counter-reset: section;
    }

    .modal li {
      @apply relative;
    }

    .modal li + li {
      @apply mt-3 md:mt-6;
    }

    .modal li::before {
      content: "—";
      @apply block whitespace-nowrap text-primary pb-4 md:absolute md:left-0 md:top-0 md:-ml-12 md:mb-0;
    }

    .modal li > :not(template) ~ :not(template) {
      @apply mt-4;
    }

    .modal li h3 {
      @apply font-weight-semibold;
    }

    .modal ul + .btn,
    .modal ol + .btn {
      @apply mt-6 md:ml-12;
    }

    .modal ol li {
      counter-increment: section;
    }

    .modal ol li::before {
      content: counter(section) " —";
    }

}

/* Header with image */

  .theme--light {
    @apply text-white;

    & .btn--nav {
      @apply hover:bg-white/15 hover:backdrop-blur-lg;
    }
  }

  .has-image {
    @apply absolute w-full z-40;
  }

/* Misc */

  .animate {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.68, -0.4, 0.32, 1.4);
  }

  .slide {
    -webkit-transform: translate3d(0, 0, 0);
  }

  input[type="color"] {
    -webkit-appearance: none;
    border: none;
    aspect-ratio: 1 / 1;
    width: 32px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
  }
  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type="color"]::-webkit-color-swatch {
    border: none;
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */