/* ============================================================================
   CONTENT BOX COMPONENT

   Glassmorphism content container with backdrop blur effect, border,
   and shadow. Used for legal documents, articles, and long-form content.

   Purpose: Present long-form text content in an elegant, readable container
   that stands out against the dark background.

   Required HTML Structure:

   <section class="sidebar-page-container">
     <div class="auto-container">
       <div class="row clearfix">
         <div class="content-side col-lg-12 col-md-12 col-sm-12">
           <div class="blog-details">
             <div class="inner-box">
               <!-- Your content here -->
               <h2>Section Title</h2>
               <p>Content paragraph...</p>
               <ul class="list-style-one">
                 <li>List item</li>
              </ul>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>

   Typography:
   - h2, h3, h4: Styled with --text-primary color
   - p, li: Styled with --text-secondary color
   - a: Styled with --sky-blue color (hover: --light-blue)
   - ol: Numbered lists with proper spacing
   - .list-style-one: Custom bullet list (defined in common.css)

   Modifiers:
   - .content-box--compact    # Reduced padding for shorter content

   Notes:
   - Automatically reduces padding on mobile (<768px)
   - Links have underline on hover
   - Lists inherit proper spacing from common.css
   ============================================================================ */

/* ===== Container Section ===== */

.sidebar-page-container {
  background: var(--section-dark);
  padding: 40px 0 80px;
  border-top: none;
  margin-top: 0;
}


/* ===== Content Container ===== */

.content-side {
  width: 100%;
}

.blog-details .inner-box {
  background: rgba(30, 58, 138, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: var(--radius-lg);
  padding: 50px;
  box-shadow: var(--shadow-lg);
}


/* ===== Typography Styles ===== */

.blog-details h2,
.blog-details h3,
.blog-details h4 {
  color: var(--text-primary) !important;
  font-weight: 500;
}

.blog-details h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.blog-details h3 {
  font-size: 22px;
  margin-bottom: 15px;
}

.blog-details h4 {
  font-size: 18px;
  margin-bottom: 15px;
}

.blog-details p,
.blog-details li {
  color: var(--text-secondary) !important;
  font-size: 16px;
  line-height: 1.8em;
}

.blog-details p {
  margin-bottom: 20px;
}

.blog-details p strong {
  color: var(--text-primary);
}

.blog-details a {
  color: var(--sky-blue) !important;
}

.blog-details a:hover {
  color: var(--light-blue) !important;
  text-decoration: underline;
}


/* ===== Section Spacing ===== */

.blog-details .section {
  margin-bottom: 40px;
}

.blog-details .section:last-child {
  margin-bottom: 0;
}


/* ===== List Styles ===== */

.blog-details ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

.blog-details ol li {
  margin-bottom: 8px;
}

.blog-details ul {
  margin-bottom: 15px;
}

.blog-details ul li {
  margin-bottom: 8px;
}


/* ===== Responsive ===== */

@media (max-width: 768px) {
  .blog-details .inner-box {
    padding: 30px 20px;
  }
}


/* ===== Modifier: Compact ===== */

.content-box--compact .blog-details .inner-box {
  padding: 30px;
}

@media (max-width: 768px) {
  .content-box--compact .blog-details .inner-box {
    padding: 20px 15px;
  }
}