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

@layer base {
  input::placeholder {
    font-style: italic;
  }

  h1 {
    @apply text-3xl;
  }

  a.admin {
    @apply border-b-2 border-violet-500 hover:border-b-2;
  }

  a.nav-inactive {
    @apply border-slate-300 border-b-2;
  }

  a.nav-active {
    @apply border-violet-500 border-b-2;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  /* STUDY SPECIFIC BASE STYLES */
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

  /* =================== */
  /* BEWELL */
  /* =================== */

  body.bewell {
    @apply font-bewell;
  }

  body.bewell h2 {
    @apply text-2xl md:text-3xl text-sky-50 font-semibold mx-2 mb-2 py-2;
  }

  body.bewell p {
    @apply p-2 mb-2 text-blue-50 sm:text-xl sm:leading-8;
  }

  body.bewell ul {
    @apply list-disc pl-8;
  }

  body.bewell li::marker {
    @apply text-amber-300;
  }

  /* =================== */
  /* MGH */
  /* =================== */

  body.mgh {
    @apply font-bewell;
  }

  body.mgh h2 {
    @apply text-slate-800;
  }

  body.mgh p {
    @apply text-slate-800;
  }

  body.mgh ul {
    @apply list-disc pl-8;
  }

  body.mgh li::marker {
    @apply text-amber-300;
  }

  body.mgh .btn-primary {
    @apply text-violet-50 bg-violet-600 px-4 py-2 border-2 rounded border-violet-600 hover:border-b-2 hover:bg-violet-500 hover:ease-in hover:text-white hover:cursor-pointer font-semibold;
  }
}

@layer utilities {
}

@layer components {
  .btn {
    @apply text-slate-600 px-2 py-1 border-2 rounded border-slate-600 hover:border-violet-800 hover:text-violet-800;
  }

  .btn-primary {
    @apply text-violet-600 px-4 py-2 border-2 rounded border-violet-600 hover:border-b-2 hover:bg-violet-500 hover:ease-in hover:text-white hover:cursor-pointer;
  }

  .btn-secondary {
    @apply text-slate-600 px-4 py-2 border-2 rounded border-slate-600 hover:border-b-2 hover:bg-slate-500 hover:ease-in hover:text-white hover:cursor-pointer;
  }

  .btn-danger {
    @apply text-red-600 px-2 py-1 border-2 rounded border-red-600 hover:border-b-2 hover:text-white hover:bg-red-500 hover:ease-in hover:cursor-pointer;
  }

  .nice-input {
    @apply mt-1 rounded-md border-slate-300 shadow-sm focus:ring focus:ring-violet-200 focus:ring-opacity-50;
  }
}
.chapter_1_tile { background-image: url(/assets/bewell/1-f512835d2d6b590a158219588e7cf36f2958d679488f1a6bb990717efb7a0184.png) }
.chapter_2_tile { background-image: url(/assets/bewell/2-2248e8fb31491cae4a34abd814a5db0286588c94b450cba850105e422b60bfba.png) }
.chapter_3_tile { background-image: url(/assets/bewell/3-d92cb46fdcf1f056c1ae647195baa933d71f7e2ba2d0792c3b91532de259ce4a.png) }
.chapter_4_tile { background-image: url(/assets/bewell/4-a82ee57135d6dc8aeded67773e31598805765f5e1cdf6a1ab8cb178c7bb76bdb.png) }
body.mgh {
  background-color: #f5f3ff;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237c3aed' fill-opacity='0.09' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.rush p {
  line-height: 1.7em;
  margin-bottom: 1em;
}

.rush h2 {
  margin-bottom: 1em;
}
/*
 * 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.
 *


 */

 body { 
  /* font-family: 'Open Sans'; */
  font-family: 'Roboto Slab';
 }

 .admin {
  font-family: 'Open Sans';
 }

 /* Fix for Mobile Safari due to bottom address bar not included in 100vh calculation */
 @supports (-webkit-touch-callout: none) {
   .h-screen {
     height: 100dvh;
   }
   .min-h-screen {
     min-height: 100dvh;
   }
 }

 .sfr_brand {
   font-family: 'Roboto Slab';
   text-transform: uppercase;
   color: #555;
   border-bottom: 4px solid #7be0ad;
   font-weight: normal;
   font-size: 1.5em;
 }

 #nav-logo:hover {
   border: none;
 }

 
 
 .box:checked + .label-checkbox {
   font-weight: bold;
 }
 
 input[type=checkbox] {
   
 }

.separator {
  border: none;
  border-block-start: 1px dotted #e2e8f0;
  flex-grow: 1;
  min-inline-size: 2ch;
}