/*
 * Site-wide design overrides. Loads after theme.css and page CSS, so rules here win.
 */

.mobile-callbar {
  display: none;
}

/* Keep the orange footer panel below page content. The legacy theme pulls it
   upward by 40%, which covers the bottom of pages with longer content. */
#footerwrap .tb_u2ok248.module_row {
  margin-top: 24px !important;
}

/* ---------- Phones (Themify's mobile breakpoint is 680px) ---------- */
@media (max-width: 680px) {
  /* Header: solid dark bar so the white logo and menu icon are readable
     over any hero image (and over the white strip at the top of the homepage). */
  .transparent-header #headerwrap,
  .transparent-header #headerwrap.fixed-header {
    background-color: rgba(24, 24, 24, 0.94);
  }

  /* Tap-to-call strip at the top of the header (markup in partials/header.njk). */
  :root {
    --callbar-h: 50px;
  }
  .mobile-callbar {
    /* Above the theme's blur layer on the sticky header (#headerwrap.fixed-header:before). */
    position: relative;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    height: var(--callbar-h);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .mobile-callbar-phones {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 1.6;
    text-transform: uppercase;
  }
  .mobile-callbar-phones a {
    color: #222;
    text-decoration: none;
  }
  .mobile-callbar .shortcode.button {
    margin: 0;
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Keep the menu icon in the logo row, below the call strip. */
  #headerwrap .header-icons {
    transform: translateY(var(--callbar-h));
  }
  /* On pages whose header overlays the hero, push content down by the strip's height. */
  .transparent-header #pagewrap {
    padding-top: var(--callbar-h);
  }

  /* Stack page-builder columns full width instead of squeezing them side by side. */
  .themify_builder_row > .row_inner {
    grid-template-columns: 100% !important;
    grid-template-areas: none !important;
  }
  .themify_builder_row > .row_inner > .module_column {
    grid-area: auto !important;
  }

  /* Two-up sub-columns (e.g. "Info" / "MAIL Address") are too narrow on phones: stack them too. */
  .module_subrow {
    grid-template-columns: 100% !important;
    grid-template-areas: none !important;
  }
  .module_subrow > .module_column {
    grid-area: auto !important;
  }

  /* Footer: centered single column. */
  #footerwrap .tb_text_wrap,
  #footerwrap .module-buttons {
    text-align: center;
    justify-content: center;
  }
  #footerwrap .module_column.tb-column + .module_column.tb-column {
    margin-top: 12px;
  }
}