/* GHL/Google Forms embeds often ship a fixed inline width/height on their
   <iframe> (e.g. width="640"), which ignores the container and causes
   horizontal overflow on the popup and blog sidebar. Force it responsive. */
.ghl-embed { width: 100%; max-width: 100%; overflow-x: hidden; }
.ghl-embed iframe { display: block; width: 100% !important; max-width: 100% !important; border: 0; }

/* Scroll-triggered GHL form popup — shared across index.html and blog.html */
.ghl-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(11, 14, 23, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ghl-popup-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.ghl-popup-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2.5rem 1.5rem 1.5rem;
  transform: translateY(12px);
  transition: transform 0.25s ease;
  box-shadow: 0 30px 70px -20px rgba(11, 14, 23, 0.45);
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .ghl-popup-overlay { padding: 0.75rem; }
  .ghl-popup-box { padding: 2.25rem 1rem 1rem; max-height: 85vh; }
}
.ghl-popup-overlay.is-visible .ghl-popup-box {
  transform: translateY(0);
}
.ghl-popup-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 32px;
  height: 32px;
  border: none;
  background: #F6F7FA;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ghl-popup-close:hover {
  background: #8B0000;
  color: #fff;
}

/* Site buttons on Bootstrap's .btn set their own colours but not Bootstrap's
   --bs-btn-* variables, so .btn:focus-visible / :active (e.g. when a popup closes
   on Esc and focus returns to the button) fell back to Bootstrap's transparent
   background + dark text. Give them their own colours for those states. */
.btn-hero-p,
.btn-nv-cta {
  --bs-btn-hover-bg: var(--accent2, #B22222);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--accent2, #B22222);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(139, 0, 0, .3);
}
.btn-hero-o {
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--accent, #8B0000);
  --bs-btn-hover-border-color: var(--accent, #8B0000);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--accent, #8B0000);
  --bs-btn-active-border-color: var(--accent, #8B0000);
  --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(139, 0, 0, .2);
}