/*
 * Supplemental styles for markup that has no stylesheet in the migration.
 *
 * Two sources of gaps:
 *  1. Modules whose CSS was served from a DIFFERENT HubSpot account's CDN
 *     (7052064) and so was never captured by the wget mirror.
 *  2. Squarespace-era blog markup (accordions, video blocks) carried through
 *     HubSpot's own import, whose original Squarespace CSS never existed here.
 *
 * Filename is prefixed zz- so it loads last and can override earlier modules.
 */

/* --- Responsive video embeds (YouTube/Vimeo) -------------------------------
   The wrapper divs already carry inline padding-bottom/position styles from
   the original markup; only the iframe fill rule is missing, without which
   embeds collapse to zero height. */
.hs-responsive-embed-inner-wrapper{position:relative}
.hs-responsive-embed-iframe,
.hs-responsive-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.intrinsic,.intrinsic-inner{max-width:100%}

/* --- Squarespace-era accordions ------------------------------------------- */
.accordion-items-container{list-style:none;margin:0;padding:0}
.accordion-item{list-style:none;margin:0;padding:0}
.accordion-divider{background-color:currentColor;opacity:.15;width:100%}
.accordion-item__title-wrapper{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 0;cursor:pointer}
.accordion-item__title{margin:0;flex:1 1 auto}
.accordion-icon-container{flex:0 0 auto;display:flex;align-items:center;transition:transform .2s ease}
.accordion-item__dropdown{overflow:hidden;padding:0 0 16px}
.accordion-item__description{margin:0}
/* collapsed state is applied by the small script in the theme footer */
.accordion-item.is-collapsed .accordion-item__dropdown{display:none}
.accordion-item.is-collapsed .accordion-icon-container{transform:rotate(-90deg)}

/* --- Squarespace-era video blocks ----------------------------------------- */
.video-block{margin:0 0 1.5rem}
.video-block .intrinsic{position:relative;width:100%}
.video-caption-wrapper{margin-top:.5rem}
.video-caption{font-size:.875em;opacity:.75}
.video-none{display:none}

/* --- Misc module bits with no captured stylesheet -------------------------- */
.hs-image-widget{max-width:100%;height:auto}
.hs-horizontal-spacer{width:100%}
.card-item___link{display:block;text-decoration:none;color:inherit}
.simple-cta-section__left{flex:1 1 auto}

/* --- blog index / archive listing ------------------------------------------
   The site header is overlaid on the page rather than sitting above it, and
   imported pages clear it via their own per-page padding. Dynamically
   generated listings have no such per-page CSS, so without this the header
   covers the top of the listing - which also made the tag dropdown
   unclickable, since the header sat over it. */
.body-container--blog-index{
  padding-top:150px;
}
@media (max-width:767px){
  .body-container--blog-index{padding-top:110px}
}

/* Wrapper around the heading and the tag filter. Everything else in the
   listing reuses classes that already exist in template_main.min.css. */
.blog-index__header{
  position:relative;
  z-index:2;              /* keep the dropdown above any overlaying chrome */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 1.5rem;
}
.blog-index__header h1{margin:0}
.blog-index__header .blog-tag-filter{margin:0}
/* The authentic module_blog-tag-filter.min.css came from a different HubSpot
   account and carries that account's brand colours (#00326d text, #00c6ab
   arrow). Bring it in line with this site's form controls instead. */
.blog-tag-filter{width:auto}
.blog-tag-filter__drop-down{
  width:auto;
  min-width:240px;
  max-width:100%;
  background-color:#fff;
  border:1px solid #bbb;
  border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
  color:#494a52;
  font-size:.875rem;
  padding:.7rem 2.2rem .7rem .7rem;
}
.blog-tag-filter__drop-down:focus{border-color:#122142;outline:none}
.blog-tag-filter:after{
  color:#494a52;
  font-size:.8rem;
  right:.85rem;
}
@media (max-width:640px){
  .blog-index__header{flex-direction:column;align-items:flex-start}
  .blog-index__header .blog-tag-filter__drop-down{width:100%}
}

/* Pagination reuses .blog-pagination* from template_main.min.css; this only
   adds breathing room above it. */
.body-container--blog-index .blog-pagination{margin-top:2.5rem}