/**
 * Jocelyne MARAYA Page - Modular CSS
 * Specific styles for MARAYA page template
 * Author: Theme Developer
 * Version: 1.0.0
 */

/* ========================================
   MARAYA Page - Content Width
   ======================================== */
.jocelyne-page.page-maraya section .content-wrapper {
  max-width: 80%;
}

/* ========================================
   Association Page - Content Width
   ======================================== */
.jocelyne-page.page-association section .content-wrapper {
  max-width: 80%;
}

/* ========================================
   Paragraph Borders (shared with Our History, Archive Circulation & Association)
   Applies bordered paragraph style to match Archive Circulation look
   ======================================== */
.jocelyne-page.page-maraya .content-wrapper > p,
.jocelyne-page.page-our-history .content-wrapper > p,
.jocelyne-page.page-archive-circulation .content-wrapper > p,
.jocelyne-page.page-association .content-wrapper > p {
  border: 1px solid rgba(112, 128, 144, 0.25);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background-color: rgba(255, 255, 255, 0.4);
}

/* Subtle hover effect for bordered paragraphs */
.jocelyne-page.page-maraya .content-wrapper > p:hover,
.jocelyne-page.page-our-history .content-wrapper > p:hover,
.jocelyne-page.page-archive-circulation .content-wrapper > p:hover,
.jocelyne-page.page-association .content-wrapper > p:hover {
  border-color: rgba(112, 128, 144, 0.4);
  background-color: rgba(255, 255, 255, 0.6);
}

/* First paragraph after heading - slightly different style */
.jocelyne-page.page-maraya .content-wrapper h2 + p,
.jocelyne-page.page-maraya .content-wrapper h3 + p,
.jocelyne-page.page-our-history .content-wrapper h2 + p,
.jocelyne-page.page-our-history .content-wrapper h3 + p,
.jocelyne-page.page-archive-circulation .content-wrapper h2 + p,
.jocelyne-page.page-archive-circulation .content-wrapper h3 + p,
.jocelyne-page.page-association .content-wrapper h2 + p,
.jocelyne-page.page-association .content-wrapper h3 + p {
  border-left: 3px solid var(--jocelyne-slate);
  background-color: rgba(159, 179, 200, 0.08);
}

/* ========================================
   Responsive Styles
   ======================================== */
@media (max-width: 768px) {
  .jocelyne-page.page-maraya section .content-wrapper {
    max-width: 100%;
  }

  .jocelyne-page.page-maraya .content-wrapper > p,
  .jocelyne-page.page-our-history .content-wrapper > p,
  .jocelyne-page.page-archive-circulation .content-wrapper > p,
  .jocelyne-page.page-association .content-wrapper > p {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
  }
}