/**
 * HubSpot Overrides
 * 
 * This file contains CSS overrides for HubSpot's built-in components.
 * It's loaded directly without PostCSS processing to preserve :has() selectors.
 */

/* ==========================================================================
   Replace HubSpot built-in arrow icons in rich text with custom icons
   Color is inherited from the parent span's fill property
   ========================================================================== */

/* Make HubSpot icon wrapper inherit fill for dynamic coloring */
[data-hs-icon-hubl] .hs_cos_wrapper_type_icon {
	fill: inherit;
}

/* HubSpot RTE inserts icons as a separate block div (hs_cos_wrapper_type_icon) AFTER
   the <p> that contains the placeholder span. Making that <p> inline lets the icon
   div flow on the same visual line as the preceding text.
   Only in edit mode (.hs-inline-edit on html) - live pages don't need this. */
html.hs-inline-edit p:has([data-hs-icon-hubl]) {
	display: inline;
}

.hs_cos_wrapper_type_icon:has(g[id^="Arrow Right"]) {
	display: inline-block !important;
	width: 15px !important;
	height: 13px !important;
	background-color: currentColor !important;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width%3D'15' height%3D'13' viewBox%3D'0 0 15 13' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d%3D'M14.87 6.335l-6.3-6.3a.12.12 0 0 0-.171 0L7.715.72a.12.12 0 0 0 0 .171l4.72 4.72a.12.12 0 0 1-.086.206H.121a.12.12 0 0 0-.121.12v.967a.12.12 0 0 0 .12.122h12.23a.12.12 0 0 1 .085.206l-4.72 4.72a.12.12 0 0 0 0 .17l.684.684a.12.12 0 0 0 .17 0l6.3-6.3a.121.121 0 0 0 0-.17' fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E") !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-size: contain !important;
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width%3D'15' height%3D'13' viewBox%3D'0 0 15 13' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d%3D'M14.87 6.335l-6.3-6.3a.12.12 0 0 0-.171 0L7.715.72a.12.12 0 0 0 0 .171l4.72 4.72a.12.12 0 0 1-.086.206H.121a.12.12 0 0 0-.121.12v.967a.12.12 0 0 0 .12.122h12.23a.12.12 0 0 1 .085.206l-4.72 4.72a.12.12 0 0 0 0 .17l.684.684a.12.12 0 0 0 .17 0l6.3-6.3a.121.121 0 0 0 0-.17' fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E") !important;
	mask-repeat: no-repeat !important;
	mask-size: contain !important;
}

.hs_cos_wrapper_type_icon:has(g[id^="Arrow Right"]) > svg {
	display: none !important;
}

.hs_cos_wrapper_type_icon:has(g[id^="Arrow Left"]) {
	display: inline-block !important;
	width: 15px !important;
	height: 13px !important;
	background-color: currentColor !important;
	-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width%3D'15' height%3D'13' viewBox%3D'0 0 15 13' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d%3D'M.035 6.506l6.3 6.299a.12.12 0 0 0 .17 0l.684-.684a.12.12 0 0 0 0-.17L2.47 7.23a.12.12 0 0 1 .086-.206h12.229a.12.12 0 0 0 .12-.121v-.967a.12.12 0 0 0-.12-.121H2.555a.12.12 0 0 1-.085-.207L7.19.89a.12.12 0 0 0 0-.17L6.504.034a.12.12 0 0 0-.17 0l-6.3 6.3a.121.121 0 0 0 0 .17' fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E") !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-size: contain !important;
	mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width%3D'15' height%3D'13' viewBox%3D'0 0 15 13' xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath d%3D'M.035 6.506l6.3 6.299a.12.12 0 0 0 .17 0l.684-.684a.12.12 0 0 0 0-.17L2.47 7.23a.12.12 0 0 1 .086-.206h12.229a.12.12 0 0 0 .12-.121v-.967a.12.12 0 0 0-.12-.121H2.555a.12.12 0 0 1-.085-.207L7.19.89a.12.12 0 0 0 0-.17L6.504.034a.12.12 0 0 0-.17 0l-6.3 6.3a.121.121 0 0 0 0 .17' fill-rule%3D'evenodd'%2F%3E%3C%2Fsvg%3E") !important;
	mask-repeat: no-repeat !important;
	mask-size: contain !important;
}

.hs_cos_wrapper_type_icon:has(g[id^="Arrow Left"]) > svg {
	display: none !important;
}

.carouselItem .itemContent .hs_cos_wrapper_type_icon {
	display: inline-block !important;
}

/* ==========================================================================
   Stack .section-content-container two-column layout at 768px–991px
   so the rich text sits on top and FeaturePanels drops below at full width
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
	.section-content-container>.row-fluid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		width: 100%;
		.dnd-column {
			width: 100% !important;
			min-width: 0;
			float: none !important;
		}
	}

    /* NEW — higher specificity (3 classes) beats HubSpot inline style (2 classes) */
    [class*="-vertical-alignment"].section-content-container>.row-fluid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }	
}

/* ==========================================================================
   Offer strap (BannerImage[data-offer-headline]) overlaps parallax geometry only.
   No z-index on #hs_cos_wrapper_ContentHero or .container-fluid.dnd-area — stacking
   is handled in BannerImage.module.css (isolate reset + .offerHeadlineBar z-index).
   ========================================================================== */

main:has([data-offer-headline]:not([hidden])) .container-fluid.dnd-area {
	margin-top: -64px;
}

main:has([data-offer-headline]:not([hidden])) .section-parallax-container {
	padding-top: calc(36px + 64px);
}

@media (min-width: 768px) {
	main:has([data-offer-headline]:not([hidden])) .section-parallax-container {
		padding-top: calc(60px + 64px);
	}
}