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

@layer components {
  /* Button */
  /* ======================================================================== */

  .btn,
  .btn-sm {
    @apply inline-block text-center font-semibold rounded shadow transition-all duration-200 cursor-pointer;
  }

  .btn:hover,
  .btn-sm:hover {
    @apply bg-opacity-75;
  }

  .btn {
    @apply px-4 py-2;
  }

  .btn-sm {
    @apply px-2 py-1 text-sm;
  }

  /* Link */
  /* ======================================================================== */

  .link {
    @apply underline hover:no-underline cursor-pointer;
  }

  /* Form */
  /* ======================================================================== */

  .label {
    @apply font-semibold block mb-0.5;
  }

  .hint {
    @apply text-sm mb-0.5 text-gray-600;
  }

  .input_wrapper {
    @apply mb-4;
  }

  .input.string input,
  .input.tel input,
  .input.select input,
  .input.integer input,
  .input.date input,
  .input.datetime input,
  .input.text input,
  .trix-editor input,
  .field input {
    @apply block shadow rounded border-2 border-gray-400 outline-none px-3 py-2 w-full;
  }
  .field_with_errors .error {
    @apply text-sm text-red-600;
  }
  .field_with_errors .error:first-letter {
    text-transform: capitalize;
  }

  .field_with_errors .input,
  .field_with_errors .trix-editor {
    @apply border-red-600;
  }

  .check_boxes {
    margin-right: .5rem;
  }

  /* Typography */
  /* ======================================================================== */

  h1 {
    @apply text-3xl font-bold mb-4;
  }

  h2 {
    @apply text-xl font-bold mb-3;
  }
}
/*
 * 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.
 *


 */
/* line 16, app/assets/stylesheets/application.scss */
h1, h2, h3, p {
  font-family: "Helvetica", "Arial", sans-serif;
}

@font-face {
  font-family: 'ReithSans';
  src: url(/assets/ReithSans-4827f7c957359c2ccd1406a4e3b42ae9d9550fb0886a5e751cec89784e55741f.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'ReithSansBold';
  src: url(/assets/ReithSansBold-b14b0766f2de4d2a41d9fb888d654a650c8d976639d675967bb568c5ede89c73.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}

/* line 34, app/assets/stylesheets/application.scss */
h1 {
  line-height: 1.4 !important;
  font-family: 'ReithSansBold';
}

/* line 39, app/assets/stylesheets/application.scss */
h2 {
  line-height: 1.3 !important;
}

/* line 43, app/assets/stylesheets/application.scss */
h2, h3, h4, h5, h6, p, a, span, div, li, td, th, label, input, textarea, select, button {
  font-family: 'ReithSans';
}

/* line 47, app/assets/stylesheets/application.scss */
.form-checkbox {
  margin-right: .5rem !important;
}

/* line 51, app/assets/stylesheets/application.scss */
.input.radio_buttons {
  margin-right: .5rem !important;
}

/* line 56, app/assets/stylesheets/application.scss */
.boolean.field_with_errors .error {
  display: block;
}

@media screen and (max-width: 768px) {
  /* line 62, app/assets/stylesheets/application.scss */
  .hero-banner {
    height: fit-content;
  }
}

/* line 67, app/assets/stylesheets/application.scss */
.font-bold {
  font-family: 'ReithSansBold';
}

/* line 71, app/assets/stylesheets/application.scss */
.error {
  color: red;
  display: block;
}

/* line 76, app/assets/stylesheets/application.scss */
body {
  background-color: #fefefe;
}

/* line 80, app/assets/stylesheets/application.scss */
ol {
  list-style: decimal;
}

/* line 84, app/assets/stylesheets/application.scss */
.hero-banner {
  background: url(/assets/children-playing-fd2d1c7b3cadb9a1c985b2d5970095df6cb98208a0b4493f8a968650f1beb1f4.jpg) no-repeat center center;
  background-size: cover;
  opacity: .9;
}

/* line 90, app/assets/stylesheets/application.scss */
.thank-you-banner {
  background: url(/assets/family-playing-09c561a643388d795dfbd93b10275ecee72802b69888fec1b1209783d48afd5e.jpg) no-repeat 0% 25%;
  background-size: cover;
  opacity: .9;
}

/* line 96, app/assets/stylesheets/application.scss */
.h-85svh {
  height: 85svh;
}

@media (max-width: 768px) {
  /* line 96, app/assets/stylesheets/application.scss */
  .h-85svh {
    height: fit-content;
  }
}