/* Tufte-inspired prose styling with proportional modular scale */
.prose-entry {
  /* Base typography */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-title, unset);
    font-weight: var(--font-weight-title, 600);
    letter-spacing: -0.02em;
    color: rgba(var(--theme-900) / 1);

    &:first-child {
      @apply mt-0;
    }
  }

  /* Dark mode heading colors */
  &.dark {
    h1, h2, h3, h4, h5, h6 {
      color: rgba(var(--theme-50) / 1);
    }
  }

  h1 {
    font-size: 3em;        /* 48px with 16px base */
    line-height: 1.1;
    margin-top: 2em;
    margin-bottom: 0.75em;
    font-weight: 700;
  }

  h2 {
    font-size: 2.25em;     /* 36px with 16px base */
    line-height: 1.2;
    margin-top: 1.75em;
    margin-bottom: 0.5em;
    font-weight: 700;
  }

  h3 {
    font-size: 1.75em;     /* 28px with 16px base */
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
  }

  h4 {
    font-size: 1.375em;    /* 22px with 16px base */
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
  }

  h5 {
    font-size: 1.125em;    /* 18px with 16px base */
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
  }

  h6 {
    font-size: 1em;        /* 16px with 16px base */
    line-height: 1.5;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  section {
    margin: 2em 0;
  }

  aside {
    @apply my-8 p-4 lg:p-6 rounded-xl;
    background: rgba(var(--primary-100) / 1);
    border: 1px solid rgba(var(--primary-200) / 1);
    color: rgba(var(--primary-900) / 1);
    font-size: 0.9em;
    line-height: 1.6;

    p {
      margin: 0;
    }
  }
  &.dark aside {
    background: rgba(var(--primary-800) / .7);
    border-color: rgba(var(--primary-700) / 1);
    color: rgba(var(--primary-50) / 1);
    p {
      color: rgba(var(--primary-400) / 1);
    }
  }

  /* Paragraph spacing and styles */
  p {
    line-height: 1.75;
    margin: 1.5em 0;

    &:first-child { @apply mt-0; }
    &:last-child { @apply mb-0; }
  }

  &.dark p {
    color: inherit;
  }

  mark{
    @apply rounded-md;
    padding: 0.05em 0.1em;
    background-color: rgba(var(--primary-100) / 1);
    color: rgba(var(--primary-900) / 1);
  }

  &.dark mark{
    background-color: rgba(var(--primary-800) / 1);
    color: rgba(var(--primary-100) / 1);
  }



  /* Lead paragraph and first paragraph styling */
  .lead, p.lead {
    font-size: clamp(1.125rem, 1vw + 1rem, 1.25rem);
    line-height: 1.6;
    @apply font-medium my-8;
  }

  h1 + p, h2 + p { @apply mt-4; }
  h3 + p, h4 + p { @apply mt-2; }

  /* Links - simplified to underline only */
  a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
    @apply font-medium transition-all duration-300;


    &:hover {
      color: rgba(var(--post-theme-light) / 1);
    }
  }

  &.dark a:hover{
    color: rgba(var(--post-theme-dark) / 1);
  }

  /* Blockquotes - professional style */
  blockquote {
    @apply my-8 ml-2 lg:ml-[.75em] pl-[1.5em] py-2 relative;
    border-radius: 2px;
    max-width: 85ch;
    font-family: var(--font-family-title, unset);
    font-weight: var(--font-weight-title, 600);
    border-left: 3px solid rgba(var(--post-theme-light) / .1);
    line-height: 1.5;
    p {
      margin: .5em 0;

      font-weight: 400;
      line-height: 1.6;
      font-size: clamp(1.1rem, 1.3em, 3rem);
    }

    /* Optional footer for attribution */
    footer {
      @apply mt-4;

      &::before {
        @apply mr-2;
      }
    }
  }

  /* Dark mode blockquote */
  &.dark blockquote {
    color: rgba(var(--theme-100) / 1);
    border-left-color: rgba(var(--post-theme-dark) / .1);

  }

  /* Code blocks */
  pre {
    @apply my-8 p-4 lg:p-6 rounded-lg overflow-auto;
    background: rgba(var(--theme-100) / 1);
    border: 1px solid rgba(var(--theme-200) / 1);
    font-size: 0.9em;
    line-height: 1.6;

    code {
      @apply p-0 bg-transparent;
      color: rgba(var(--theme-800) / 1);
    }
  }

  /* Dark mode code blocks */
  &.dark pre {
    background: rgba(var(--theme-800) / 1);
    border-color: rgba(var(--theme-700) / 1);

    code {
      color: rgba(var(--theme-200) / 1);
    }
  }

   /* Inline code - using :not(pre) > code to exclude code blocks */
   :not(pre) > code {
    border-radius: 5px;
    padding: 0.1em 0.2em;
    font-size: 0.875em;
    background: rgba(var(--theme-100) / 1);
    color: rgba(var(--theme-800) / 1);
  }

  /* Dark mode inline code */
  &.dark :not(pre) > code {
    background: rgba(var(--theme-600) / .5);
    color: rgba(var(--theme-200) / 1);
  }

  /* Lists */
  ul, ol {
    @apply my-6 ml-6;
    line-height: 1.75;

    li {
      @apply pl-2;
    }
    p {
      margin: 0;
    }
  }


  ul { @apply list-disc; }
  ol { @apply list-decimal; }

  /* Figures and Images */
  figure {
    @apply my-8 mx-auto;
    max-width: 100%;

    img {
      @apply rounded-lg;
      border: 1px solid rgba(var(--theme-200) / 1);
    }

    figcaption {
      @apply mt-3 text-center text-sm;
      color: rgba(var(--theme-600) / 1);
      max-width: 55ch;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* Dark mode figures */
  &.dark figure {
    img {
      border-color: rgba(var(--theme-700) / 1);
    }

    figcaption {
      color: rgba(var(--theme-400) / 1);
    }
  }

  /* Horizontal rule */
  hr {
    @apply my-12 border-none;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(var(--theme-200) / 0),
      rgba(var(--theme-300) / 1) 50%,
      rgba(var(--theme-200) / 0)
    );
  }

  /* Dark mode hr */
  &.dark hr {
    background: linear-gradient(
      to right,
      rgba(var(--theme-800) / 0),
      rgba(var(--theme-700) / 1) 50%,
      rgba(var(--theme-800) / 0)
    );
  }

  /* Additional utility classes */
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .drop-cap:first-letter {
    @apply float-left text-7xl font-bold mr-3 mt-2;
    line-height: 0.68;
  }

  .pull-right {
    @apply float-right ml-8 -mr-12 my-4;
    max-width: 40%;
  }

  .pull-left {
    @apply float-left -ml-12 mr-8 my-4;
    max-width: 40%;
  }

  .side-note {
    @apply text-sm py-2 px-4 my-4 inline-block;
    color: rgba(var(--theme-600) / 1);
    border-left: 2px solid rgba(var(--theme-200) / 1);
    max-width: 20rem;
  }

  &.dark .side-note {
    color: rgba(var(--theme-400) / 1);
    border-left-color: rgba(var(--theme-700) / 1);
  }

  /* Responsive embeds */
  .embed-responsive {
    @apply relative my-8;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;

    iframe, object, embed {
      @apply absolute top-0 left-0;
      width: 100%;
      height: 100%;
    }
  }
}
