/* Site-wide overrides for the imported HubSpot CSS. Loaded after
   template_theme-overrides.css so these rules win. Keep edits minimal. */

/* HubSpot's template_theme-overrides.css emits
   `.widget-type-form { background-color: rgba(0,0,0,1.0) !important }`
   from an unresolved template variable. The live site's HubSpot build
   computes this differently and ends up transparent — match that. */
.widget-type-form {
  background-color: transparent !important;
}

/* template_theme-overrides.css sets `hr { border-bottom-color: #12364C }`
   which draws a dark line on every divider widget. Divider widgets style
   themselves with `border-top-color` so the bottom border is extra. */
.divider-module__line {
  border-bottom-color: transparent !important;
}

/* Card module headings (e.g. corporate-finance "Loans", "Equity", "Grants")
   inherit the global h2/h3 sizes (60px / 42px) which are designed for hero
   sections — far too big inside a 3-column card layout. */
.card-module__heading h1,
.card-module__heading h2,
.card-module__heading h3,
.card-module__heading h4,
.card-module__heading h5 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.image-card-module__text-column h1,
.image-card-module__text-column h2,
.image-card-module__text-column h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Icon padding inside card-module is excessive — tighten it */
.card-module__icon .icon--circle {
  padding: 10px !important;
}

.card-module__icon .icon--circle svg {
  width: 28px;
  height: 28px;
}

/* Recent Blog Posts (corporate-finance & similar) — heading h2s pick up the
   global 60px size meant for hero sections. Same issue as card-module. */
.blog-recent-module__article-heading h1,
.blog-recent-module__article-heading h2,
.blog-recent-module__article-heading h3,
.blog-recent-module__article-heading h4 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 1rem 0 0.5rem;
}

/* Module-macro buttons (`Read more` on blog cards, `Contact Paul` on the
   image-card CTA) come through as plain `<a class="g-module-macros-btn">`
   with no visible styling — make them amber pill buttons matching the site. */
.g-module-macros-btn,
.btn-style {
  display: inline-block;
  background-color: #F49F00;
  color: #12364C !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  text-align: center;
  border: 1px solid #F49F00;
  transition: background-color 0.15s ease;
}

.g-module-macros-btn:hover,
.btn-style:hover {
  background-color: #d98e00;
  text-decoration: none;
  color: #12364C !important;
}

/* Full-width hero section — `.dnd-section { padding: 80px 20px }` is the global
   default. Pages mark hero rows with `force-full-width-section`, which should
   strip horizontal padding so the photo runs edge to edge. */
.dnd_area-row-0-force-full-width-section.dnd-section,
.row-fluid-wrapper[class*="force-full-width-section"].dnd-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile hero text — the HubSpot export hard-codes `font-size: 48px` on
   inline <span>s inside hero headlines. The page-level @media query that
   would normally shrink them was not exported, so headlines overflow the
   viewport on phones (each word wraps onto its own line). Cap inline sizes
   inside known hero containers under 768px. */
@media (max-width: 767px) {
  .dr_video-hero h1,
  .dr_video-hero h1 *,
  .dr_video-hero h2,
  .dr_video-hero h2 *,
  .heroimage-module h1,
  .heroimage-module h1 *,
  .heroimage-module_wrp h1,
  .heroimage-module_wrp h1 *,
  .image-heading h1,
  .image-heading h1 * {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .dr_video-hero h3,
  .dr_video-hero h3 *,
  .dr_video-hero h5,
  .dr_video-hero h5 *,
  .heroimage-module h5,
  .heroimage-module h5 * {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* The home-page hero locks to height:500px which doesn't fit on a phone
     once the content is compressed. Let it size to its content. */
  .dr_video-hero {
    height: auto !important;
    min-height: 320px;
  }

  /* Also cap rich-text widget headings that use the same `font-size: 48px`
     pattern (e.g. sector page intros: "Alternative Medicine"). */
  .hs_cos_wrapper_type_rich_text span[style*="font-size: 48px"],
  .hs_cos_wrapper_type_rich_text span[style*="font-size:48px"],
  div[style*="font-size: 48px"],
  div[style*="font-size:48px"] {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}