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

html {
  scroll-behavior: smooth;
}

@layer base {
  body {
    @apply text-body;
  }
}

@layer components {
  .block-letters {
    @apply uppercase text-[#222222] tracking-block leading-none font-normal;
  }

  .block-letters-white {
    @apply uppercase text-white tracking-block leading-none font-normal;
  }

  .btn {
    @apply px-8 py-2 rounded-full uppercase tracking-block text-sm font-normal
    transition-colors duration-300 ease-in-out;
  }

  .btn-outline-white {
    @apply btn border border-white text-white 
    hover:bg-white hover:text-gray-900;
  }

  .btn-outline-dark {
    @apply btn border border-body text-body 
    hover:bg-body hover:text-white;
  }

  .btn-solid {
    @apply btn bg-body text-white border border-body
    hover:bg-transparent hover:text-[#222222];
  }
}

body {
  @apply antialiased;
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 255, 255, 255;
  --background-end-rgb: 255, 255, 255;
  color: #222222;
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Optional: Add custom styles for the navigation links */
.nav-link {
  @apply text-sm font-medium tracking-wider transition-colors;
}

@font-face {
  font-family: "Belinda Avenue";
  src: url("/fonts/BelindaAvenue.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

/* Blog Post Content Styling */
.prose {
  @apply text-[#222222] max-w-none;
}

.prose h1 {
  @apply font-script text-4xl md:text-5xl text-coral mb-8 mt-12;
}

.prose h2 {
  @apply font-script text-3xl md:text-4xl text-coral mb-6 mt-10;
}

.prose h3 {
  @apply font-script text-2xl md:text-3xl text-coral mb-4 mt-8;
}

.prose p {
  @apply text-[1.25rem] leading-8 font-light mb-6;
}

.prose ul,
.prose ol {
  @apply my-6 ml-6 space-y-2;
}

.prose li {
  @apply text-[1.25rem] leading-8 font-light;
}

.prose a {
  @apply text-coral underline hover:text-coral/80 transition-colors;
}

.prose blockquote {
  @apply border-l-4 border-coral pl-4 italic my-8;
}

.prose blockquote p {
  @apply text-[1.35rem] leading-relaxed text-[#222222]/80;
}

.prose img {
  @apply rounded-lg my-8;
}

.prose hr {
  @apply my-12 border-[#222222]/10;
}

.prose strong {
  @apply font-medium;
}

.prose em {
  @apply italic;
}

.prose code {
  @apply bg-[#f7f7f7] px-2 py-1 rounded text-[1rem] font-mono;
}

.prose pre {
  @apply bg-[#f7f7f7] p-4 rounded-lg my-6 overflow-x-auto;
}

.prose pre code {
  @apply bg-transparent p-0;
}

.prose table {
  @apply w-full my-8 border-collapse;
}

.prose th {
  @apply text-left py-2 px-4 border-b-2 border-[#222222]/10 font-medium;
}

.prose td {
  @apply py-2 px-4 border-b border-[#222222]/10;
}

/* Add spacing between consecutive headings */
.prose h1 + h2,
.prose h2 + h3 {
  @apply mt-4;
}
