/* ==========================================================================
   LAYOUT / PAGE WRAPPER
   The <main class="main-content"> shell used by every inner page (fills the
   space between the fixed header and the footer, and draws the repeating
   canvas-texture background). Page-specific content goes in a
   pages/_*.css file, not here.
   ========================================================================== */
.main-content {
  position: relative;
  width: 100%;
  min-height: calc(100vh - var(--header-height) - var(--footer-min-height));
  padding-top: 100px; /* Spacing below fixed header */
  padding-bottom: 110px;
  background-repeat: repeat;
  direction: rtl;
  overflow-x: hidden; /* clip the decorative texture only — NOT overflow-y:
    dropdown/mega-menu panels are absolutely-positioned overlays that need
    to extend below this box without being clipped */
  background-size: contain;
  max-width: var(--container-max);
  margin: 0 auto;
  margin-top: 100px;
}

.main-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../../images/backgrounds/pattern-texture.jpg');
  background-repeat: repeat;
  background-position: top center;
  background-size: auto;
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* --- Inner container ("container/inner") — nested inside the full-width
   main-content shell, same pattern as .header-inner. Page content and
   floral decorations go inside this; it has no "position" of its own,
   so any position:absolute decoration still resolves against
   .main-content (its nearest positioned ancestor) — no coordinates
   need to change. --- */
.main-content-inner {
  width: 100%;
  max-width: var(--container-inner-max);
  margin: 0 auto;
}

/* ==========================================================================
   RESPONSIVE — Page wrapper
   Keep in sync with the header's own responsive height (see
   layout/_header.css, max-width: 899px), so main content never sits
   under (or leaves a gap below) the fixed header.
   ========================================================================== */
@media (max-width: 899px) {
  .main-content {
    padding-top: 76px;
    margin-top: 76px;
  }
}

@media (max-width: 767px) {
  .main-content {
    padding-bottom: 64px;
  }
}