/* 1. Import Google Fonts Inter family at the very top */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  /* Set the default font family variable to Inter */
  --default-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  /* Color Palette Variables */
  --text-color: #7c1400;
  --main-bg: #e52e02;
  --dark-bg: #aa1c00;
  --darkest-bg: #7c1400;
  --light-bg: #fff4f3;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevent horizontal scroll */
  /* Fallback to global setting */
  font-family: var(--default-font-family);
}

/* Custom Font-Faces kept intact if necessary elsewhere, but variable handles priority styling */
@font-face {
  font-family: 'Nexa';
  src: url('./assets/fonts/Nexa_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('./assets/fonts/Nexa_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('./assets/fonts/Nexa-Heavy.ttf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Ensure header / sidebar container is visible */
.main-container {
  position: fixed;
  top: 0;            /* align at top */
  left: 0;           /* full width from left */
  width: 100%;
  height: 80px;
  background: url(../assets/images/header.png) no-repeat center;
  background-size: cover;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;   /* safe spacing */
  box-sizing: border-box; /* prevents padding from overflowing */
  z-index: 1000;     /* above other content */
}

/* Container for the whole article page */
.article-page-container {
    max-width: 800px;
    margin: 100px auto;
    padding: 0 20px;
    /* CHANGED: Switched from Arial to Inter */
    font-family: var(--default-font-family);
    line-height: 1.6;
    color: #333;
}

/* Top article image */
.article-image-top img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Article header */
.article-header h1 {
    font-size: 2.2rem;
    margin: 0 0 10px 0;
    font-weight: 700;
    color: #222;
}

.article-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
}

/* Article content/body */
.article-content {
    font-size: 1rem;
    color: #444;
    margin-top: 30px;
}

/* Optional: make paragraphs spaced nicely */
.article-content p {
    margin-bottom: 1em;
}

/* Optional: make links inside the content stand out */
.article-content a {
    color: var(--main-bg);
    text-decoration: none;
}

.article-content a:hover {
    text-decoration: underline;
}

.image-caption {
  position: absolute;
  bottom: 0;
  background: rgba(124, 20, 0, 0.75);
  color: #fff;
  text-align: center;
  font-size: 10px;
  padding: 10px;
  font-style: italic;
  backdrop-filter: blur(4px);
}

.comments-header {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.comments-count {
    font-size: 1rem;
    color: #555;
    font-weight: normal;
    margin-left: 6px; /* small gap between "Comments" and number */
}

/* Comments Section */
.comments-section {
    padding: 20px 40px; /* left & right padding */
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 50px;
    font-family: var(--default-font-family);
}

.comments-section h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 8px;
}

/* Each comment box */
.comment-box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* User profile picture */
.comment-user-pic img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* circle */
    object-fit: cover;
    margin-right: 15px;
}

/* Comment content */
.comment-content {
    flex: 1;
}

/* User name */
.comment-user {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Date and time */
.comment-date {
    font-size: 0.8rem;
    color: #777;
    margin: 2px 0 8px;
}

/* Comment text */
.comment-text {
    margin-top: 8px;
    line-height: 1.5;
}

.view-more-btn {
    margin-top: 5px;
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.8;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-left: auto; 
}

.view-more-btn:hover {
    text-decoration: underline;
    opacity: 1;
}


.comments-section{
    margin-top:60px;
    padding:35px;
    border-radius:18px;
    background: var(--light-bg);
    border:1px solid #f0d5d2;
}

.comments-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
}

.comments-header h2{
    margin:0;
    border:none;
    color: var(--darkest-bg);
}

.comment-box{
    display:flex;
    gap:15px;
    padding:18px;
    margin-bottom:18px;

    background:#ffffff;

    border:1px solid #f0d5d2;
    border-radius:14px;

    transition:.2s;
}

.comment-box:hover{
    background:#ffffff;
    box-shadow:0 6px 18px rgba(229,46,2,.08);
}

.comment-user{
    margin:0;
    font-size:15px;
    font-weight:700;
    color: var(--darkest-bg);
}

.comment-date{
    margin-top:2px;
    color:#999;
    font-size:13px;
}

.comment-text{
    margin-top:10px;
    color:#444;
    line-height:1.7;
}

.comment-form{
    margin:30px 0;
}

.comment-form textarea{
    width:100%;
    padding:18px;
    border:1px solid #f0d5d2;
    background:#ffffff;
    border-radius:14px;
    font-size:15px;
    min-height:110px;
    transition:.2s;
}

.comment-form textarea:focus{
    outline:none;
    border-color: var(--main-bg);
    box-shadow:0 0 0 4px rgba(229,46,2,.12);
}

.comment-form button{
    margin-top:12px;
    background: var(--dark-bg);
    color:#fff;
    padding:12px 24px;
    border:none;
    border-radius:10px;
    font-weight:600;
    transition:.2s;
}

.comment-form button:hover{
    background: var(--main-bg);
}

.like-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark-bg);
    padding-left: 0;
}

.like-btn:hover {
    text-decoration: underline;
    color: var(--main-bg);
}

.like-count {
    margin-left: 5px;
    font-weight: bold;
    color: #333;
}

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .article-page-container {
        padding: 0 15px;
    }

    .article-header h1 {
        font-size: 1.8rem;
    }

    .article-meta {
        font-size: 0.85rem;
    }
    
    .image-caption {
      font-size: 10px;
    }
    
    .section-articles .wrapper {
        display: none !important;
    }
}

@media screen and (min-width: 1020px) {
    .comments-section {
        padding: 20px 40px; /* left & right padding */
        max-width: 800px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 50px;
        border-radius: 10px; /* optional: makes it softer */
    }

    .image-caption {
      font-size: 12px;
    }
}

.section-container {
  padding: 10px;
}

.section-articles {
  display: flex;
  justify-content: space-between; /* pushes NEWS left, VIEW MORE right */
  align-items: center;

  width: 85%;          /* make container full width */
  max-width: 100%;     /* keep your design max width */
  margin: 0 auto;       /* center it */
  padding: 0 0;      /* add 15px space on left and right */
  box-sizing: border-box;
}

.section-header {
    display: flex;
    justify-content: flex-start; /* NEWS left, VIEW MORE right */
    align-items: center;
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
}

/* Tablet: keep horizontal, adjust spacing */
@media (min-width: 601px) and (max-width: 1439px) {
    .section-articles {
      width: 80%;          /* make container full width */
      max-width: 100%;     /* keep your design max width */
    }
    .section-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 10px;
    }

    .text-s {
        font-size: 12px;
    }

    .view-more-btn {
        font-size: 11px;
    }
    .image-caption {
      font-size: 15px;
    }
}

/* Desktop: full width, max spacing */
@media (min-width: 1440px) {
    .section-articles {
      width: 70%;          /* make container full width */
      max-width: 100%;     /* keep your design max width */
    }
    .section-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 15px;
    }

    .text-s {
        font-size: 14px;
    }

    .view-more-btn {
        font-size: 12px;
    }
    .image-caption {
      font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
  .section-header {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 15px;
    }
}

.sectionH {
    display: flex;               /* ensure content is horizontal inside pill */
    align-items: center; 
    justify-content: center; /* center content horizontally */
    background: var(--darkest-bg);
    border-radius: 78.728px;
    padding: 2px 15px; /* add spacing inside the pill */
}

.text-s {
  margin-left: 10px;    
  color: #ffffff;
  /* CHANGED: Switched to Inter framework style */
  font-family: var(--default-font-family);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  width: 125px;
  text-align: center;   /* center text inside element */
  margin: 0; 
}

.sectionM {
  display: flex;               /* ensure content is horizontal inside pill */
  align-items: center; 
  justify-content: center; /* center content horizontally */
  background: var(--darkest-bg);
  border-radius: 78.728px;
  padding: 2px 20px; /* add spacing inside the pill */
}

.text-m {
  margin-left: 10px;    
  color: #ffffff;
  /* CHANGED: Switched to Inter framework style */
  font-family: var(--default-font-family);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  width: 150px;
  text-align: center;   /* center text inside element */
  margin: 0; 
}

.wrapper {
  margin-left: 0;
}

.view-more-btn {
  color: var(--darkest-bg);
  /* CHANGED: Switched to Inter framework style */
  font-family: var(--default-font-family);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.8;

  cursor: pointer; 
  text-decoration: none;
  /* force alignment right */
  margin-left: auto;
}

.view-more-btn:hover {
  color: var(--main-bg);
  opacity: 1;
}

.article-container {
    display: grid;                  /* use grid for better control */
    gap: 10px;                      /* spacing between articles */
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    max-width: 360px;               /* optional: keep design width */
    margin: 0 auto;
    padding: 10px 15px;
    box-sizing: border-box;

    grid-template-columns: 1fr;     /* default: 1 article per row (mobile) */
}

/* Tablet view: 2 articles per row */
@media (min-width: 820px) and (max-width: 1439px) {
    .article-container {
        max-width: 720px;           /* optional: wider container */
        grid-template-columns: repeat(2, 1fr); /* 2 articles per row */
    }
}

/* Desktop view: 3 articles per row */
@media (min-width: 1440px) {
    .article-container {
        max-width: 1080px;          /* optional: full-width container for 3 articles */
        grid-template-columns: repeat(3, 1fr); /* 3 articles per row */
    }
}

.article-img {
    position: relative;
    width: 100%;
    max-width: 359px;
    height: 240px;
    background: url(./assets/images/DOS04774.jpg) no-repeat center;
    background-size: cover;
    overflow: visible auto;
    flex-shrink: 0;      /* prevent shrinking */
    overflow-x: hidden;  
}

.article-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: absolute;   /* absolute to position from bottom */
    bottom: 10px;         /* distance from bottom of image */
    left: 10px;            /* distance from left */
    right: 5px;           /* optional: prevent overflow */
    gap: 5px;
    z-index: 1;
}

.title1 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 300px;
    min-width: 0;
    color: #ffffff;
    /* CHANGED: Switched to Inter framework style */
    font-family: var(--default-font-family);
    font-size: 25px;
    font-weight: 900;
    line-height: 23.603px;
    text-align: left;
    z-index: 2;
    white-space: normal;
    word-wrap: break-word;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
    text-decoration: none;
}

.article-text a.title1:hover {
  cursor: pointer;
  color: #fff4f3;
}

.date1 {
    align-self: stretch;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    min-width: 0;
    height: 10px;
    color: #ffffff;
    /* CHANGED: Switched to Inter framework style */
    font-family: var(--default-font-family);
    font-size: 10px;
    font-weight: 700;
    line-height: 9.037px;
    text-align: left;
    white-space: nowrap;
    z-index: 3;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

.author1 {
    align-self: stretch;
    flex-shrink: 0;
    flex-basis: auto;
    position: relative;
    min-width: 0;
    height: 10px;
    color: #ffffff;
    /* CHANGED: Switched to Inter framework style */
    font-family: var(--default-font-family);
    font-size: 10px;
    font-weight: 400;
    line-height: 9.037px;
    text-align: left;
    white-space: nowrap;
    z-index: 4;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-menu{
    position:relative;
}

.menu-icon{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    color:#666;

    border-radius:50%;
    cursor:pointer;
    transition:.2s;
}

.menu-icon:hover{
    background:#f5f5f5;
    color:#111;
}

.dropdown-menu{
    position:absolute;
    right:0;
    top:42px;

    min-width:190px;

    background:#fff;
    border:1px solid #ececec;
    border-radius:14px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    overflow:hidden;
    display:none;

    z-index:100;
}

.dropdown-menu button{
    width:100%;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px;

    background:none;
    border:none;

    font-size:14px;
    font-weight:500;

    cursor:pointer;
    transition:.2s;

    color:#333;
}

.dropdown-menu button:hover{
    background:#f7f7f7;
}

.modal {
  z-index: 9999 !important;
}

.delete-btn{
    color:#d32f2f;
}

.delete-btn:hover{
    background:#fff3f3;
}

.dropdown-menu hr{
    margin:0;
    border:none;
    border-top:1px solid #eee;
}

/* ===========================
   ARTICLE ACTIONS
=========================== */

.article-actions{
    display:flex;
    align-items:center;
    gap:12px;
    margin:28px 0;
    padding:8px;
    background: var(--light-bg);
    border:1px solid #f0d5d2;
    border-radius:14px;
    width:fit-content;
}

.action-btn-form{
    margin:0;
}

.action-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 18px;

    background:#fff;
    border:1px solid #f0d5d2;
    border-radius:10px;

    font-family:var(--default-font-family);
    font-size:15px;
    font-weight:600;
    color:#555;

    transition:.25s ease;
    cursor:pointer;
}

.action-btn:hover{
    background: var(--light-bg);
    color: var(--darkest-bg);
    border-color: var(--main-bg);
}

.action-btn i{
    font-size:16px;
}

/* count */

.action-btn .count{
    font-size:13px;
    color:#777;
}

/* active */

.like-btn.liked{
    background: var(--darkest-bg);
    color:#fff;
    border-color: var(--darkest-bg);
}

.like-btn.liked .count{
    color:#fff;
}

.save-btn.saved{
    background: #fff8ea;
    color: #9c6a00;
    border-color: #f3d37a;
}

.share-btn:hover{
    background:#eef6ff;
    color:#0066cc;
}

/* Modal Overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  transition: 0.3s;
}

/* Modal Content Box */
.modal-content {
  background-color: #fff;
  margin: 80px auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-out;
  position: relative;
  font-family: var(--default-font-family);
}

/* Close Button */
.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #555;
  transition: 0.2s;
}
.close-modal:hover {
  color: #000;
}

/* Form Styles */
.modal-content textarea {
  width: 95%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  resize: vertical;
  font-size: 1rem;
  margin-bottom: 15px;
  font-family: var(--default-font-family);
}

.modal-content .btn-save {
  padding: 10px 20px;
  background-color: var(--dark-bg);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--default-font-family);
}
.modal-content .btn-save:hover {
  background-color: var(--main-bg);
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}

.author-link {
    color: var(--dark-bg);
    text-decoration: none;
    font-weight: 600;
}
.author-link:hover {
    text-decoration: underline;
    color: var(--main-bg);
}

.extra-images-section {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
}

.extra-image-container {
  position: relative;
  width: 90%;
  max-width: 800px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.extra-article-image {
  width: 100%;
  height: auto;
  display: block;
}

.authors-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    padding: 40px 20px;
    font-family: var(--default-font-family);
}

.author-card {
    background: #f7f7f7;
    border-radius: 10px;
    width: 220px;
    text-align: center;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.author-card:hover {
    transform: translateY(-5px);
}

.author-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--main-bg);
}

.author-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.author-role {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}

.author-email {
    font-size: 0.85rem;
    color: var(--main-bg);
    text-decoration: none;
    word-break: break-all;
}

.article-category {
    font-weight: 500;
    color: var(--main-bg); /* accent color */
    text-decoration: none;
    transition: color 0.2s;
}

.article-category:hover {
    color: var(--dark-bg);
    text-decoration: underline;
}

.search-account-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ddd;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-icon:hover {
  transform: scale(1.05);
  border-color: #555;
  background: #eee;
}

.profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-icon i {
  font-size: 20px;
  color: #555;
  transition: color 0.2s ease;
}

.profile-icon:hover i {
  color: #222;
}

.share-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.share-modal-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 20px;
  border-radius: 12px 12px 0 0;
  font-family: var(--default-font-family);
}

.share-options {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
}

.share-options a, .share-options button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #000;
  margin: 10px;
  font-size: 14px;
}

.share-options i {
  font-size: 24px;
  margin-bottom: 5px;
}

.copy-link-btn {
  background: #f0f0f0;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-family: var(--default-font-family);
}

/* Ensure the newly converted 'a.article-img' behaves as a block element */
a.article-img {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Ensure title remains styled correctly inside the link block */
.article-text .title1 {
    color: #ffffff;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

.article-img:hover .title1 {
    color: var(--light-bg);
}

/* ==========================================================================
   HORIZONTAL SPLIT CARD GRID LAYOUT (Image-Left)
   ========================================================================== */

.latest-horizontal-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default mobile single column */
    gap: 20px;
    width: 85%;
    max-width: 100%;
    margin: 20px auto 40px auto;
    padding: 0;
    box-sizing: border-box;
}

/* Tablet view */
@media (min-width: 820px) and (max-width: 1439px) {
    .latest-horizontal-grid {
        width: 80%;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* Large desktop screens */
@media (min-width: 1440px) {
    .latest-horizontal-grid {
        width: 70%;
        grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns matching image */
    }
}

/* Individual split-horizontal card configuration */
.horizontal-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.horizontal-card:hover {
    transform: translateY(-2px);
}

/* Card thumbnail with exact aspect ratio dimensions */
.horizontal-card-img {
    width: 130px;
    height: 85px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px; /* Clean rounded edges */
    flex-shrink: 0;
}

/* Typography on right side of split cards */
.horizontal-card-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.horizontal-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    color: #111111;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Clips long headers beautifully */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.horizontal-card:hover .horizontal-card-title {
    color: var(--darkest-bg); /* Accent hover state */
}

.horizontal-card-date {
    margin: 3px 0 0 0;
    font-size: 11px;
    color: #777777;
    font-weight: 500;
}

.horizontal-card-author {
    margin: 0;
    font-size: 11px;
    color: #777777;
    font-weight: 500;
}


/* Base Article Styling */
.article-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2b2b2b;
    word-break: break-word;
}

/* Paragraph Spacing for Rich Text */
.article-content p {
    margin-bottom: 1.2em;
}

/* Inline Styles */
.article-content strong, 
.article-content b {
    font-weight: 700;
}

.article-content em, 
.article-content i {
    font-style: italic;
}

.article-content u {
    text-decoration: underline;
}

/* Lists */
.article-content ul, 
.article-content ol {
    margin: 1em 0 1.2em 2em;
    padding-left: 1em;
}

.article-content li {
    margin-bottom: 0.4em;
}

/* Quill Alignment Helper Classes */
.article-content .ql-align-center {
    text-align: center;
}

.article-content .ql-align-right {
    text-align: right;
}

.article-content .ql-align-justify {
    text-align: justify;
}

/* Headings inside body content */
.article-content h1, 
.article-content h2, 
.article-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}