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

@layer components {
  html {
    @apply scroll-smooth motion-reduce:scroll-auto;
  }

  body {
    @apply text-lg text-gray-900;
  }

  a {
    @apply underline;
  }

  a:hover {
    @apply no-underline;
  }

  button.header-link {
    @apply appearance-none px-2 lg:px-3 py-2 text-gray-300 hover:text-gray-100;

    span:nth-child(2) {
      @apply text-4xl lg:text-xl align-middle lg:ml-1 pb-1.5;
    }
  }

  h1, h1 a {
    @apply text-3xl font-serif text-gray-800 py-1 no-underline;
  }

  h2 {
    @apply text-xl font-sans font-bold text-blue-600 pt-2 pb-1;
  }

  span.h2 {
    @apply text-xl font-sans font-bold text-blue-600;
  }

  h3 {
    @apply text-lg font-bold text-gray-800 pt-1.5 pb-0.5;
  }

  p {
    @apply py-2;
  }

  label {
    @apply font-bold text-gray-900 inline-block pt-4;
  }

  .error {
    @apply font-bold text-red-600;
  }

  .success {
    @apply font-bold text-green-600;
  }

  form.standard input[type=text], form.standard input[type=email], form.standard input[type=password], form.standard input[type=tel], form.standard textarea, form.standard select, form.standard input.InputElement, form.standard .StripeElement {
    @apply appearance-none border border-gray-400 bg-white w-full py-2 px-3 text-gray-700 leading-tight;
  }

  form.standard input[type=text]:disabled, form.standard input[type=email]:disabled, form.standard input[type=password]:disabled, form.standard input[type=tel]:disabled, form.standard textarea:disabled, form.standard select:disabled, form.standard input.InputElement:disabled, form.standard .StripeElement:disabled {
    @apply bg-gray-400;
  }

  form.standard input[type=text]:focus, form.standard input[type=email]:focus, form.standard input[type=password]:focus, form.standard input[type=tel]:focus, form.standard textarea:focus, form.standard select:focus, form.standard input.InputElement:focus, form.standard .StripeElement:focus {
    @apply outline-none ring;
  }

  form.standard input[type=text]:hover, form.standard input[type=email]:hover, form.standard input[type=password]:hover, form.standard input[type=tel]:hover, form.standard textarea:hover, form.standard select:hover, form.standard input.InputElement:hover, form.standard .StripeElement:hover {
    @apply outline-none ring;
  }

  form.standard input[type=submit], .button, nav.pagination a, nav.pagination span.current {
    @apply font-bold py-2 px-4 inline-block no-underline;
  }

  form.standard input[type=submit]:hover, .button:hover, nav.pagination a:hover, nav.pagination span.current:hover {
    @apply outline-none ring;
  }

  form.standard input[type=submit], .button-blue {
    @apply bg-blue-500 border border-blue-500 text-gray-100;
  }

  form.standard input[type=submit]:hover, .button-blue:hover {
    @apply bg-blue-700 border-blue-700;
  }

  form.essay {
    label:has(~ input:required), label:has(~ textarea:required), label:has(~ select:required) {
      @apply after:ml-1 after:content-['*'] after:text-red-500;
    }
  }

  table.standard {
    @apply w-full border border-gray-600 p-2 my-4;
  }

  table.standard td {
    @apply border border-gray-600 p-2 mx-4;
  }

  table.standard thead {
    @apply bg-blue-400 text-gray-100 font-bold;
  }

  .button-red {
    @apply bg-red-500 text-gray-100 border border-red-500;
  }

  .button-red:hover {
    @apply bg-red-700 text-gray-100 border-red-700;
  }

  .button-green {
    @apply bg-green-600 text-gray-100 border border-green-600;
  }

  .button-green:hover {
    @apply bg-green-700 text-gray-100 border-green-700;
  }

  .button-orange {
    @apply bg-orange-600 text-gray-100 border border-orange-600;
  }

  .button-orange:hover {
    @apply bg-orange-700 text-gray-100 border-orange-700;
  }

  .button-gray, nav.pagination span.current {
    @apply bg-gray-600 text-gray-100 border border-gray-600;
  }

  .button-gray:hover, nav.pagination span.current:hover {
    @apply bg-gray-700 text-gray-100 border-gray-700;
  }

  .button-white {
    @apply bg-white text-gray-700 border border-gray-700;
  }

  .button-white:hover {
    @apply bg-gray-100;
  }

  .button-transparent, nav.pagination a {
    @apply bg-transparent text-gray-700 border border-gray-700;
  }

  .button-transparent:hover, nav.pagination a:hover {
    @apply text-gray-900 border-gray-900;
  }

  .button-form {
    @apply border border-gray-400 bg-white w-full py-2 px-3 text-gray-700 leading-tight;
  }

  .button-form:hover {
    @apply outline-none ring;
  }

  .button-disabled {
    @apply bg-opacity-75 border-opacity-75;
  }

  .button-disabled:hover {
    @apply cursor-not-allowed bg-opacity-75 border-opacity-75;
  }

  .h2-index {
    @apply mb-2 font-sans font-semibold text-xl;
  }

  .box-index {
    @apply border border-solid p-6 flex flex-col mb-2 flex-grow;
  }

  .box-index > div:nth-child(2) {
    @apply flex-grow;
  }

  .button-index {
    @apply block p-4 font-bold text-white text-center place-self-end no-underline;
  }

  .content {
    @apply bg-white p-4 lg:pt-4 lg:pb-6 lg:px-6;
  }

  .content-user {
    @apply px-4 py-2 lg:px-0;
  }

  .content-centered {
    @apply h-full grid text-center content-center pb-8;
  }

  .content-centered h1 {
    @apply mb-4;
  }

  .content-centered p {
    @apply text-lg;
  }

  .content-centered br {
    @apply hidden lg:inline;
  }

  #error_explanation {
    @apply bg-red-300 p-4 text-red-700 mt-2;
  }

  #error_explanation ul {
    @apply list-square list-inside;
  }

  .content-two-columns {
    @apply grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-16;
  }

  .content-two-columns-right {
    @apply bg-gray-100 p-4 border border-solid border-gray-400 self-start;
  }

  .rating-icon {
    @apply pointer-events-none;
  }

  .rating-icon-star {
    @apply text-orange-500;
  }

  .rating-input {
    @apply absolute -left-full;
  }

  .rating-label {
    @apply p-0 text-xl cursor-default; /* cursor-pointer */
  }

  .rating-input:checked ~ .rating-label .rating-icon-star {
    @apply text-white;
  }

  /* .rating-group:hover .rating-label .rating-icon-star {
     @apply text-orange-500;
   }

   .rating-input:hover ~ .rating-label .rating-icon-star {
     @apply text-white;
   } */

  .icon-audio:hover {
    @apply cursor-pointer text-gray-900;
  }

  .banner-shadow {
    @apply shadow-[0_1px_6px_0_rgba(32,33,36,0.28)];
  }

  .title-link-bold {
    -webkit-text-stroke-width: 1px;
  }
}

@font-face {
  font-family: 'icomoon';
  src:  url(/assets/fonts/icomoon-e0e0926736e9df7109e3feaa4b07c0e3d539eb9cdf6ca58504926dc7fccfdb4b.eot?qnclif);
  src:  url(/assets/fonts/icomoon-e0e0926736e9df7109e3feaa4b07c0e3d539eb9cdf6ca58504926dc7fccfdb4b.eot?qnclif#iefix) format('embedded-opentype'),
    url(/assets/fonts/icomoon-b17e39f56b080ff70c1459be306cdf24ebe67dbdb93e9311adc093313790d944.ttf?qnclif) format('truetype'),
    url(/assets/fonts/icomoon-468b8816c7cc47d14f75563876ef38b14467a2801f6e50c91fa81f60a6ba19f0.woff?qnclif) format('woff'),
    url(/assets/fonts/icomoon-d6221ca55805ae1f9b73dd4e32e54ceb2a91a54e5c1e9e4e3ca2c0f863656f09.svg?qnclif#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fade-out {
  position: relative;
}

.fade-out:after {
  content: "";
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-external-link:before {
  content: "\e908";
  display:inline-block;
  text-decoration:none;
}

.icon-home:before {
  content: "\e906";
  display:inline-block;
  text-decoration:none;
}

.icon-search:before {
  content: "\e90e";
  display:inline-block;
  text-decoration:none;
}

.icon-user:before {
  content: "\e90d";
  display:inline-block;
  text-decoration:none;
}

.icon-user-solid:before {
  content: "\e901";
  display:inline-block;
  text-decoration:none;
}

.icon-user-regular:before {
  content: "\e909";
  display:inline-block;
  text-decoration:none;
}

.icon-star-solid:before {
  content: "\e907";
  display:inline-block;
  text-decoration:none;
}

.icon-star-regular:before {
  content: "\e90d";
  display:inline-block;
  text-decoration:none;
}

.icon-email:before {
  content: "\e902";
  display:inline-block;
  text-decoration:none;
}

.icon-link:before {
  content: "\e903";
  display:inline-block;
  text-decoration:none;
}

.icon-x:before {
  content: "\e904";
  display:inline-block;
  text-decoration:none;
}

.icon-facebook:before {
  content: "\e905";
  display:inline-block;
  text-decoration:none;
}

.icon-mastodon:before {
  content: "\e90b";
  display:inline-block;
  text-decoration:none;
}

.icon-diaspora:before {
  content: "\e90a";
  display:inline-block;
  text-decoration:none;
}

.icon-download:before {
  content: "\e900";
  display:inline-block;
  text-decoration:none;
}

.icon-not-available:before {
  content: "\e90f";
  display:inline-block;
  text-decoration:none;
}

.icon-audio:before {
  content: "\e90c";
  display:inline-block;
  text-decoration: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.
 *


 */