/* Change full site background color to purple */
body {
  background-color: #eee2d9 !important; /* Deep purple shade */
}


/* Change background color of content area only */
.site-content,
.content-area,
.entry-content,
.page-content {
  background-color: #eee2d9 !important; /* deep purple */
  color: #2E2E2E; /* optional: makes text readable */
  padding: 2rem; /* adds breathing room */
  border-radius: 8px; /* optional: softer edges */
}

/* Adjust page margins on mobile (screen width < 768px) */
@media (max-width: 768px) {
    .hp-page, 
    .site-main,
    .content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* === Mobile: reduce side margins / let content breathe === */
@media only screen and (max-width: 768px) {

  /* Broadly target common container wrappers used by WP themes and HivePress */
  .site,
  .site-inner,
  .wrap,
  .container,
  .container-fluid,
  .hp-page,
  .hp-container,
  .site-content,
  .content-area,
  .hp-content,
  .page-content,
  .entry-content,
  .elementor-section,
  .elementor-column-wrap,
  .main,
  .primary,
  .content {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;      /* allow full available width on small screens */
    padding-left: 8px !important;    /* small left padding */
    padding-right: 8px !important;   /* small right padding */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove extra inner paddings on listing/grid containers */
  .hp-listings,
  .listing-grid,
  .hp-listings--grid,
  .hp-listings__items,
  .hp-listings__item,
  .hp-listing {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

	/* Make button labels stay on one line on mobile; prevent forced letter stacking */
@media only screen and (max-width: 768px) {
  /* Generic selector — adjust to match your button markup */
  button,
  .button,
  .wp-block-button__link,
  .hp-button,
  .hp-page .wp-block-buttons .wp-block-button a {
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 80px !important;     /* or whatever minimum width works */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }