/*
 * Native destination (geo) page styles.
 *
 * This file used to carry the hero heading/heart-icon layout, the head
 * button sizing, and body-copy typography for destination pages. All of
 * that duplicated rules already present in the shared geo stylesheets (see
 * src/lib/geo-presentation.ts): `.services-banner-head` centering, the h1
 * layout and its `:after` yellow-heart-icon-2.png decoration, and the
 * `a.et_pb_button.tpm-head-buttom` 10px/20px sizing all come from
 * a998ea424de75617.css (the 13th shared stylesheet, loaded on every geo
 * page); the body h2/h3/h4/p/li sizing this file invented (28/22/18px,
 * 17px body copy) does NOT match what the live captures actually render --
 * the shared sheets (a402a1101868a60d.css) set h2 at 26px, etc. -- and a
 * screenshot comparison confirmed the invented sizes rendered visibly
 * smaller than live. Removing the duplicate/wrong rules and letting the
 * shared geo stylesheets + geo-chrome.css own that styling, unopposed, is
 * simpler and correct; body typography is now entirely inherited.
 *
 * The one rule this file still owns is the hr divider: rendering Markdown
 * `---` produces a bare <hr>, which has no Divi-native equivalent element,
 * so nothing in the captures already styles it.
 *
 * Scoped under .geo-destination (the wrapper the template puts on
 * <div id="main-content">) so it cannot leak onto posts or static pages that
 * share the same Divi module classes.
 */

/* Markdown `---` renders as <hr>; style it like the Divi divider module the
 * captures used between text sections (a thin colored rule with vertical
 * rhythm), since a bare <hr> would otherwise render with the browser default. */
.geo-destination .et_pb_text_2 .et_pb_text_inner hr {
  margin: 10px 0 30px 0;
  border: 0;
  border-top: 1px solid #7ebec5;
}

/* Mobile readability (owner-approved departure from the live captures):
 * the captured Divi layout nests three 90%-width containers (section, row,
 * text module), leaving the body column at ~73% of the viewport with 16px/
 * 26px copy, zero h2 margins, and bullets flush to the edge. On phones this
 * reads noticeably worse than the blog pages. Widen the text modules to the
 * full row, restore blog-like body size/leading, and give headings and
 * lists breathing room. Mobile only; desktop rendering is untouched and
 * still matches the live captures. */
@media only screen and (max-width: 767px) {
  .geo-destination .et_pb_section_1 .et_pb_row {
    width: 100%;
  }

  .geo-destination .et_pb_text_1,
  .geo-destination .et_pb_text_2 {
    width: 100%;
  }

  .geo-destination .et_pb_text_2 .et_pb_text_inner p,
  .geo-destination .et_pb_text_2 .et_pb_text_inner li {
    font-size: 17px;
    line-height: 1.7em;
  }

  .geo-destination .et_pb_text_2 .et_pb_text_inner h2,
  .geo-destination .et_pb_text_2 .et_pb_text_inner h3,
  .geo-destination .et_pb_text_2 .et_pb_text_inner h4 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
  }

  .geo-destination .et_pb_text_2 .et_pb_text_inner ul,
  .geo-destination .et_pb_text_2 .et_pb_text_inner ol {
    padding-left: 1.5em;
  }
}

/* Tablet (owner-approved departure from the live captures): Divi stacks the
 * three action buttons (Get A Quote / How It Works / About US) vertically
 * below 981px, wasting the tablet-width row. The three pills together are
 * only ~400px wide, so keep them on one centered row down to 768px; below
 * that (phones) they stay stacked as before. */
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .geo-destination .et_pb_row_3 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .geo-destination .et_pb_row_3 .et_pb_column {
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    float: none;
  }

  .geo-destination .et_pb_row_3 .et_pb_button_module_wrapper {
    margin-bottom: 0 !important;
  }
}