@import '../components/block--hero-home.css';
@import '../components/block--random-quote.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-primary;
}

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

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

p {
  @apply font-sans text-base text-neutral-dark;
}

.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 border-tint-medium_sand 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 border-tint-medium_sand rounded shadow-sm p-6;
    border: 2px solid #dbd4d9 !important;
    background-color: #fff !important;
  }
}

@layer components {
  .board-login-wrapper {
    @apply max-w-sm mx-auto bg-white border border-neutral-200 rounded-lg p-8 shadow-sm;
  }

  .board-login-title {
    @apply text-3xl font-heading font-semibold text-primary mb-2;
  }

  .login-intro {
    @apply text-sm text-neutral-700 mb-6;
  }
}

@layer base {
  input[type="text"],
  input[type="password"],
  input[type="email"] {
    @apply block w-full border border-neutral-300 rounded px-3 py-2 bg-white text-neutral-900;
  }

  .form-submit,
  input[type="submit"] {
    @apply mt-4 inline-block bg-primary text-white px-5 py-2 rounded hover:opacity-90 transition;
  }

  .description {
    @apply text-xs text-neutral-500 mt-1;
  }
}

body.path-user-login .block-local-tasks,
body.path-user-password .block-local-tasks {
  display: none;
}

/* Space between form element descriptions and next field */
.form-item .description {
  margin-bottom: 1.25rem;
}

.hover\:text-accent:hover{
  --tw-text-opacity: 1;
  color: rgb(200 174 125 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
@media (min-width: 640px){
  .sm\:h-20{
    height: 5rem;
  }
  .sm\:max-w-sm{
    max-width: 24rem;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px){
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
@media (min-width: 1024px){
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.\[\&\>\:not\(\:where\(\[class\~\=\'not-prose\'\]\)\)\]\:text-red-500>:not(:where([class~='not-prose'])){
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}


/* Board meeting block: ensure links look like links */
.views-element-container.dashboard-block a {
  color: var(--color-link);
  text-decoration: underline;
}

.views-element-container.dashboard-block a:hover {
  text-decoration: none;
}

/* Board blog / article content typography */
#block-abgfoundation-content article {
  color: var(--color-text-primary);
}

#block-abgfoundation-content article p,
#block-abgfoundation-content article li {
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* Headings inside board posts */
#block-abgfoundation-content article h2,
#block-abgfoundation-content article h3 {
  color: var(--color-heading);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Lists need breathing room */
#block-abgfoundation-content article ul {
  margin-left: 1.25rem;
  margin-bottom: 1.25rem;
}

#block-abgfoundation-content article li {
  margin-bottom: 0.75rem;
}

/* Emphasis should not change color */
#block-abgfoundation-content article strong {
  color: inherit;
  font-weight: 600;
}

/* Breadcrumbs */
nav[aria-labelledby="system-breadcrumb"] ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav[aria-labelledby="system-breadcrumb"] li {
  display: flex;
  align-items: center;
}

nav[aria-labelledby="system-breadcrumb"] li::after {
  content: "›";
  margin: 0 0.5rem;
  color: var(--color-muted, #666);
}

nav[aria-labelledby="system-breadcrumb"] li:last-child::after {
  content: "";
}

.webform-section {
  margin-top: 2rem;
}