/* =========================================================
   COSMIC BIRTH MATCH — STABLE APPEARANCE CSS
   - Desktop untouched
   - Mobile: removes boxed container limits without shrinking
   - Keeps Forecast / Terms / Privacy styles
   - FIX: stops “must zoom out” on mobile WITHOUT breaking widths
   ========================================================= */


/* =========================================================
   0) GLOBAL SAFETY (does not change layout)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }


/* =========================================================
   1) GLOBAL MOBILE WIDTH FIX — MINIMAL & SAFE
   ========================================================= */
@media (max-width: 767px) {

  html, body {
    max-width: 100% !important;
    overflow-x: clip !important; /* better than hidden for mobile */
  }

  /* Remove theme “boxed” limits (KEEP YOUR ORIGINAL BEHAVIOR) */
  .site,
  .site-content,
  .page_wrap,
  .page_content_wrap,
  .content_wrap,
  .content,
  .wrap,
  .wrapper,
  .container {
    max-width: none !important;
    width: auto !important;
  }

  /* Elementor containers (old + new) */
  .elementor-section .elementor-container,
  .elementor-section.elementor-section-boxed > .elementor-container,
  .e-con,
  .e-con-inner {
    max-width: none !important;
    width: auto !important;
  }

  /* Stop common 100vw offenders from creating 1–6px overflow */
  .elementor-section,
  .e-con,
  .e-con-inner,
  .elementor-container,
  img,
  video,
  iframe {
    max-width: 100% !important;
  }
}


/* =========================================================
   2) COSMIC FORECAST PAGE STYLES (.cf-forecast)
   ========================================================= */

.cf-forecast { padding-top: 0; }

.cf-title-star-left,
.cf-title-star-right {
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #c89230;
}

.cf-title-text {
  color: #c89230;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.cf-hero-line-1,
.cf-hero-line-2 {
  font-size: 2.1rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

.cf-separator-stars {
  color: #c89230;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.cf-list-desc,
.cf-list-item,
.cf-list-footer,
.cf-intro,
.cf-body {
  font-size: 1.3rem;
  line-height: 1.45;
}

/* Desktop scale */
@media (min-width: 768px) {
  .cf-list-desc,
  .cf-list-item,
  .cf-list-footer,
  .cf-intro,
  .cf-body {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

/* Mobile overrides */
@media (max-width: 767px) {

  /* FIX: remove nowrap that can squeeze layout */
  .cf-forecast h1 {
    white-space: normal !important;
  }

  .cf-title-star-left,
  .cf-title-star-right {
    font-size: 21px;
  }

  .cf-title-text {
    font-size: 2rem;
  }

  .cf-separator-stars {
    font-size: 18px;
  }

  .cf-forecast h2 {
    font-size: 1.15rem;
  }

  .cf-list-desc,
  .cf-list-item,
  .cf-list-footer,
  .cf-intro,
  .cf-body {
    font-size: 1rem;
  }

  .cf-forecast p.cf-hero-line-1,
  .cf-forecast p.cf-hero-line-2 {
    font-size: 1.2rem;
  }
}


/* =========================================================
   3) TERMS PAGE (.cbm-terms)
   ========================================================= */

.cbm-terms {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 20px;
  line-height: 1.6;
  color: #ffffff;
}

@media (max-width: 767px) {
  .cbm-terms {
    font-size: 18px;
  }
}

.cbm-terms h2,
.cbm-terms h3,
.cbm-terms h2 strong,
.cbm-terms h3 strong {
  color: #c89230 !important;
}


/* =========================================================
   4) PRIVACY PAGE (.cbm-privacy)
   ========================================================= */

.cbm-privacy {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 20px;
  line-height: 1.6;
  color: #ffffff;
}

@media (max-width: 767px) {
  .cbm-privacy {
    font-size: 18px;
  }
}

.cbm-privacy h2,
.cbm-privacy h3,
.cbm-privacy h4,
.cbm-privacy h2 strong,
.cbm-privacy h3 strong,
.cbm-privacy h4 strong {
  color: #c89230 !important;
}

/* =========================================================
   3/4) TERMS + PRIVACY — Responsive desktop type + width
   Mobile stays the same
   ========================================================= */

.cbm-terms,
.cbm-privacy {
  /* Wider on large screens, still elegant */
  max-width: clamp(960px, 70vw, 1240px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;

  /* Responsive desktop body text */
  font-size: clamp(18px, 0.45vw + 16px, 21px);
  line-height: 1.65;
  color: #ffffff;
}

/* Keep mobile exactly how you like it */
@media (max-width: 767px) {
  .cbm-terms,
  .cbm-privacy {
    max-width: 1040px; /* doesn't really matter on mobile, but keeps intent */
    font-size: 18px;
    line-height: 1.6;
  }
}

.cbm-terms h2,
.cbm-terms h3,
.cbm-terms h2 strong,
.cbm-terms h3 strong,
.cbm-privacy h2,
.cbm-privacy h3,
.cbm-privacy h4,
.cbm-privacy h2 strong,
.cbm-privacy h3 strong,
.cbm-privacy h4 strong {
  color: #c89230 !important;
}

/* =========================================================
   5) MOBILE EDGE BREATHING ROOM — SAFE VERSION
   - DOES NOT pad body (prevents zoom-out + overflow)
   - Adds a tiny adaptive gutter to the main page wrappers
   - Does NOT touch your Forecast title centering
   ========================================================= */
@media (max-width: 767px) {

  /* remove the old culprit */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* adaptive gutter: ~9px to ~14px depending on device */
  .page_content_wrap,
  .content_wrap,
  .site-content {
    padding-left: clamp(9px, 2.4vw, 14px) !important;
    padding-right: clamp(9px, 2.4vw, 14px) !important;
  }

  /* make sure your Forecast title/separator never get “double padded” */
  .cf-forecast .cf-title-container,
  .cf-forecast .cf-separator-container,
  .cf-forecast .cf-page-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}