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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer components {
  h1, .title {
    strong {
      @apply text-nc-pink;
      font-weight: inherit;
    }
  }
  
  .title {
    @apply font-bold text-nc-blue text-[2.5rem] leading-[1.1] lg:text-6xl lg:leading-[1.2] text-wrap break-words;
  }

  .altered-h1-container {
    h1 {
      @apply lg:text-5xl lg:leading-[1.3];
    }

    &.white-h1 h1 {
      @apply text-white;
    }
  }

  h2, .h2 {
    @apply text-nc-blue text-[1.85rem] font-semibold;
  }

  .altered-h2-container {
    h2 {
      @apply text-xl leading-[1.4] lg:text-5xl lg:leading-[1.3];
    }

    &.white-h2 h2 {
      @apply text-white;
    }

    &.extrabold-h2 h2 {
      @apply font-extrabold;
    }

  }

  .pink-h2 {
    @apply font-bold text-3xl text-nc-pink;
  }

  .white-h2 {
    @apply font-bold text-3xl text-white;
  }

  .article {
    img {
      @apply rounded-[1.25rem] w-full;
    }

    h2, .h2 {
      @apply mt-20 mb-14;
    }

    li {
      @apply list-disc pl-1 ml-6
    }

    a {
      @apply underline
    }

    iframe {
      @apply w-full min-h-[350px] lg:min-h-[450px];
    }

    blockquote {
      @apply pl-2.5 border-l-nc-pink border-l-[5px] my-2;
    }
  }

  .answer {
    li {
      @apply list-disc pl-1 ml-6
    }
    a {
      @apply underline
    }
  }

  .active {
    p.text-nc-blue {
      @apply text-white bg-nc-blue font-bold;

      svg {
        @apply fill-white stroke-white -rotate-45
      }
    }
  }

  /* Menus */
  .mobile-menu {
    li.active {
      > a {
        @apply text-nc-pink;
      }

      svg {
        @apply text-nc-pink -rotate-180;
      }
    }
    .mobile-menu-item {
      @apply text-white font-semibold text-xl;
    }
    .scrolled {
      @apply !bg-white;

      svg {
        @apply !text-nc-blue;
      }
      .burger {
        @apply !bg-nc-blue before:!bg-nc-blue after:!bg-nc-blue;
      }
    }
  }

  .desktop-menu {
    li.active,
    li:hover {
      > a {
        @apply text-nc-pink;
      }

      a {
        @apply hover:text-nc-pink;
      }

      svg {
        @apply text-nc-pink -rotate-180;
      }
    }
    .menu-item {
      @apply text-white hover:text-nc-pink font-medium;
    }
    &.scrolled {
      @apply !bg-nc-blue;

      svg {
        @apply !text-white;
      }
    }
  }

  /* Tabs */
  .tab-container-white .active {
    @apply text-white bg-nc-blue;
  }
  .tab-container-blue .active {
    @apply text-nc-blue bg-white;
  }

  /* Solution */
  [data-controller*="solution"] {
    path.active {
      @apply fill-nc-pink;
    }

    svg rect.active {
      @apply fill-white stroke-white;
    }

  }

  /* Buttons */
  .button {
    @apply flex items-center lg:inline-block py-1 lg:py-2.5 pl-5 pr-2.5 text-white font-bold border border-nc-pink rounded-full text-[14px] lg:text-base;
  }
  .blue-button {
    @apply text-nc-blue border-nc-blue;
  }
  .pink-solid-button {
    @apply bg-nc-pink;
  }
  .blue-solid-button {
    @apply bg-nc-blue border-nc-blue;
  }
  .transparent-button {
    @apply border-transparent;
  }
  .button.disabled {
    @apply text-nc-gray border-nc-gray cursor-not-allowed;
  }

  /* Lists */
  .arrow-list ul {
    @apply flex flex-col gap-5;
  }
  .arrow-list ul li {
    @apply flex font-semibold items-start gap-3 before:content-[url(/assets/list-arrow-9fd48a21cb42f9ec59b79c057227005a8455105ea08d0f3151b747da26e1146d.svg)];
  }

  .check-list ul {
    @apply flex flex-col gap-5;
  }
  .check-list ul li {
    @apply flex font-semibold items-start gap-3 before:content-[url(/assets/list-check-dd667eab498d82e83d94b2fc74892498f4e5bfaa596c2cf997332090d1d9d79c.svg)];
  }
  .disk-list ul {
    @apply list-disc list-inside;
  }

  /* forms */
  form .error-field {
    @apply ring-1 ring-inset ring-nc-pink file:ring-1 file:ring-inset file:ring-nc-pink file:rounded-l-md;
  }

  .list-containing li {
    @apply ml-[2rem] my-[0.5rem]
  }
}

@layer utilities {
  .hamburger-toggle {
    @apply [&>div]:h-0 [&>div]:bg-white [&>div]:before:translate-y-0 [&>div]:before:rotate-45 [&>div]:after:translate-y-0 [&>div]:after:-rotate-45;
  }
}
/*
 * 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.
 *


 */
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}