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

@layer base {
  h1, h2, h3 { @apply font-marcellus text-sky-900 drop-shadow-[1px_1px_1px_white]; }
  h1 { @apply text-3xl sm:text-4xl mt-2 mb-2 sm:mb-5; }
  h2 { @apply text-2xl sm:text-3xl mt-2 mb-2 sm:mb-4; }
  h3 { @apply text-xl  sm:text-2xl mt-2 mb-2 sm:mb-3; }

  p { @apply mb-3 sm:mb-5; }
  a { @apply text-sky-800; }
  p a { @apply underline; }

  ul { @apply list-disc list-inside m-5; }
  li { @apply list-outside m-0 mb-1 p-0; }

  table { @apply mb-5; }
  td { @apply pr-5; }

  hr { @apply border-gray-400 mb-8; }
}

@layer components {
  .content-block   { @apply px-1 sm:px-10 pt-1 sm:pt-5 pb-0; }
  .price-block     { @apply bg-white bg-opacity-80 p-3 sm:p-5 mb-2; }
  .promo-block     { @apply bg-white bg-opacity-50 p-5 sm:p-10 mb-2 sm:mb-5 text-center; }
  .promo-block p   { @apply last:pb-0 mb-0; }
  .button          { @apply inline-block p-1.5 px-3 rounded; }
  .button-simple   { @apply inline-block p-1.5 px-3 rounded bg-white; }
  .button-buy      { @apply inline-block p-1.5 px-3 rounded bg-indigo-600 text-white; }
  
  .price_stone { @apply bg-indigo-100 p-1; }
  .big { @apply sm:text-lg; }
  
  .menu a { @apply p-2 leading-7 whitespace-nowrap; }

  .post     { @apply max-w-4xl; } /* text-center */
  .post h1  { @apply text-center mb-7; }
  .post h2  { @apply mt-3 sm:mt-10; }
  .post ul  { @apply text-left; }
  .post li  { @apply mb-3; }
  .post img { @apply mb-5 inline-block; }
   
  .quest_box { @apply bg-white bg-opacity-50 text-left p-5 sm:p-10 pt-1; }
  .quest_box .question { @apply block text-lg font-medium mt-8 mb-2; }
  .quest_box .radio_field { @apply mb-2; }
  .quest_box .radio_field input { @apply mr-2; }

/* admin */
  .admin h4 { @apply text-lg font-medium mt-2 mb-2 border-b-2 border-gray-500 inline-block; }
  .admin input, .admin textarea { @apply py-1 px-2; }
  .admin a { @apply underline cursor-pointer; }
  .admin .edit_block { @apply border-l-4 border-gray-500 p-3 mb-3; }
  .admin .button { @apply inline-block py-[2px] px-3 mb-2 text-lg rounded bg-amber-200 text-black no-underline; }
}
/*
 * 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.
 *


 */