/*
============================================================
  Custom Styles for Displaying Quill Editor Content
============================================================
  This CSS works WITH Quill's output, not against it.
*/

/* --- Basic Typography and Layout --- */
.post-content {
    font-family: sans-serif; /* Or your site's font */
    font-size: 1.125rem;     /* 18px base font size */
    line-height: 1.7;
    color: #333;
  }
  
  .post-content h1 { font-size: 2.5em; font-weight: 800; margin: 1.5em 0 0.5em; }
  .post-content h2 { font-size: 2em; font-weight: 700; margin: 1.5em 0 0.5em; }
  .post-content h3 { font-size: 1.5em; font-weight: 700; margin: 1.5em 0 0.5em; }
  .post-content p { margin: 1em 0; }
  .post-content a { color: #007bff; text-decoration: underline; }
  .post-content ul, .post-content ol { padding-left: 2em; margin: 1em 0; }
  .post-content blockquote {
    border-left: 4px solid #ccc;
    margin: 1.5em 0;
    padding: 0.5em 1.5em;
    color: #555;
    font-style: italic;
  }
  
  /* 
  --- The Fix for Alignment --- 
    We target Quill's specific classes directly.
  */
  .post-content .ql-align-center {
    text-align: center;
  }
  .post-content .ql-align-right {
    text-align: right;
  }
  .post-content .ql-align-justify {
    text-align: justify;
  }
  
  /* 
  --- The Fix for Images --- 
    This ensures images scale correctly and respect alignment.
  */
  .post-content img {
    max-width: 100%; /* Prevents overflow */
    height: auto;
    display: block;  /* Allows margins to work correctly for centering */
  }
  
  /* Center-aligned images (Quill adds a class to the <p> tag) */
  .post-content p.ql-align-center img {
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Right-aligned images */
  .post-content p.ql-align-right img {
    margin-left: auto;
  }