@import '../components/block--hero-home.css';
@import '../src/safelisted-utilities.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-outline {
    @apply inline-block px-5 py-2 border border-[#2e2e2e] text-[#2e2e2e] text-base font-medium rounded hover:bg-[#f6efe1] transition;
  }
}

/* Typography resets and global defaults */
h1 {
  @apply font-heading text-4xl font-bold text-brand-primary;
}

h2 {
  @apply font-heading text-3xl font-semibold text-brand-primary;
}

h3 {
  @apply font-heading text-2xl font-medium text-brand-primary;
}

p {
  @apply font-sans text-base;
  color: inherit;
}

.block-system-branding-block img {
  @apply w-24 sm:w-32 h-auto;
}

@layer base {
  ul.list-disc {
    list-style-type: disc !important;
    padding-left: 1.5rem !important; /* optional for visual indent */
    margin-left: 0 !important; /* balances the spacing */
  }
  ul.list-disc li a {
    @apply font-medium text-neutral-900;
  }

  ul.list-disc li a:hover {
    @apply text-brown-700;
  }

  ul.list-disc li a::after {
    content: ' →';
    @apply text-neutral-500;
  }

  ul.list-links li {
    @apply mb-1;
  }

  ul.list-links li a {
    @apply inline-flex items-center gap-1 font-medium text-neutral-900;
  }

  ul.list-links li a::after {
    content: ' →';
    @apply text-neutral-500;
  }

  .layout--twocol-section .layout__region--first {
    padding-right: 0.75rem; /* pr-3 */
  }

  .layout--twocol-section .layout__region--second {
    padding-left: 0.75rem; /* pl-3 */
  }

  .dashboard-block {
    @apply bg-neutral-offwhite border rounded shadow-sm p-6;
    /*border: 2px solid #dbd4d9 !important;*/
    /*background-color: #fff2e9 !important;*/
  }

  /*.dashboard-bg {*/
  /*  @apply bg-tint-blue;*/
  /*}*/

  .dashboard-block h2 {
    @apply text-xl font-semibold mb-4;
  }

  .dashboard-debug {
    @apply p-6 border-2 border-red-500 bg-yellow-50;
    border: 2px solid #ef4444 !important;
  }

  .dashboard-test {
    @apply bg-white border  rounded shadow-sm p-6;
    border: 2px solid #dbd4d9 !important;
    background-color: #fff !important;
  }

  .fade-in {
    opacity: 0;
    animation: fade 2s ease-in-out forwards;
  }
  @keyframes fade {
    to {
      opacity: 1;
    }
  }
}
body {
  background-color: #EEE2CC;
}