/*
 * Cresset native PHP footer (template-parts/footer/).
 * Replaces layout/footer.css, which targeted the retired Elementor footer
 * template #23440. Visual spec measured from that template on the local
 * clone: #EEEEEE frame, #F9F9F9 card holding nav columns (left) +
 * newsletter (~570px right) + centered brand block; legal row and 9px
 * disclosures below the card. Headings Metropolis 16px/500 #1F2124;
 * body links #414042 15px.
 *
 * The .newsletter-tooltip /  .newsletter-signup rules at the bottom target
 * the Elementor form widget that is embedded (saved template) inside
 * newsletter.php — those classes ride with the widget, keep them.
 */

/* The old footer template rendered a white spacer section between the page
   content and #site-footer on every page; keep that breathing room. */

/* Elememtor changes */

.cr-footer__newsletter .elementor-field-option {
	line-height: 1rem;
	margin-bottom: .5rem;
}

.cr-footer__newsletter .elementor-field-subgroup label {
	line-height: 1rem;
}

.cr-footer__newsletter .elementor-field-group  {
	padding: 7px 0;
}

/* Env-agnostic: the newsletter form is a per-environment saved template
   (local 29791, prod 30750, …), so key on the stable widget element id
   (f459aa0, cloned verbatim) instead of the document id. !important because
   dropping the doc-id ancestor lowers specificity below Elementor's own
   .elementor-field-group margin default (staging won via the doc-id selector). */
.cr-footer__newsletter .elementor-element-f459aa0 .elementor-field-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The form is an Elementor embed whose column carries Elementor's default 10px
   "populated" padding, indenting the form ~10px from the PHP heading above it.
   Zero the horizontal column padding so the form's left/right edges line up with
   the heading. (Prod form template 30750 has this padding; staging's 29791 does
   not — this makes prod match staging.) */
.cr-footer__newsletter .elementor-element-f459aa0 > .elementor-widget-container,
.cr-footer__newsletter .elementor-element-f459aa0.elementor-widget,
.cr-footer__newsletter .elementor-widget-wrap.elementor-element-populated {
	padding-left: 0 !important;
	padding-right: 0 !important;
	/* Also drop the column's default 10px top padding: it stacked on the
	   heading's 10px margin-bottom for a 20px heading→form gap; removing it
	   leaves just the heading margin (half the gap). */
	padding-top: 0 !important;
}

.cr-footer .elementor-field-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}



.cr-footer {
	background: #eeeeee;
	color: #414042;
	font-size: 15px;
	line-height: 1.6;
}



.cr-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 10px 20px;
}

/* --- Card (nav + newsletter + brand) ----------------------------------- */

.cr-footer__card {
	background:#f9f9f9;
	padding: 75px 100px;
}

/* Measured: nav block 570px (three 180px columns), newsletter 450px. */
.cr-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 730px) minmax(0, 520px);
	justify-content: start;
	gap: 49px;
}

/* --- Nav columns ------------------------------------------------------ */

.cr-footer__nav {
	display: flex;
	gap: 15px;
}

.cr-footer__col {
	width: 33%;
	padding-right: 20px;
}

.cr-footer__col-heading {
	margin: 0;
}



/* all:unset kills the global kit/button styling that would otherwise turn
   these headings into pill buttons; the .cr-footer button.… compound keeps
   this selector more specific than the kit's `.elementor-kit-N button`. */
.cr-footer button.cr-footer__col-toggle {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 23px;
	color: #1f2124;
	cursor: default;
}

.cr-footer__col-caret {
	display: none;
	transition: transform 0.2s ease;
}

.cr-footer__menu {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.cr-footer__menu li {
	margin: 0 0 13px;
}

.cr-footer__menu a {
	display: block;
	line-height: 20px;
	transition: color ease .4s;
	text-align: left;
}

.cr-footer__menu a:hover {
	color: var(--e-global-color-secondary);
    fill: var(--e-global-color-secondary);
}

/* --- Newsletter ------------------------------------------------------- */

.cr-footer h2.cr-footer__newsletter-heading {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 23px;
	color: #005172;
}

.cr-footer__consent {
	margin: .8rem 0 0;
	font-size: 9px;
	display: block;
}

.cr-footer__consent a {
	text-decoration: underline;
	
}

/* --- Brand / locations / social --------------------------------------- */

.cr-footer__brand-block {
	margin-top: 50px;
	text-align: center;
}

.cr-footer__logo {
	width: 207px;
	height: auto;
}

.cr-footer__locations {
	margin: 30px auto 10px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 2;
	max-width: 300px;
	margin-block-end: 0;
}

/*TODO: create a single class for the site.*/
.cr-footer__locations-a,
.cr-footer__animate-a,
.cr-footer__consent a,
.cr-footer__legal-menu a {
	    background-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(rgb(209, 211, 212), rgb(209, 211, 212)), linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0));
    background-size: 10px 1px, 100% 1px, 0px 1px;
    background-position: calc(-10px) 100%, 100% 100%, 0px 100%;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease-out, background-position 0.5s ease-out, color 0.5s;
}

.cr-footer__locations-a:hover,
.cr-footer__animate-a:hover,
.cr-footer__consent a:hover,
.cr-footer__legal-menu a:hover {
	color: rgb(65, 64, 66);
    background-size: 10px 1px, 0px 1px, 100% 1px;
    background-position: calc(100% + 10px) 100%, 100% 100%, 0px 100%;
}

/* "See more locations" toggle (mobile only; cr-footer.js unhides it below
   768px). all:unset beats the annoying `.elementor-kit-N button` pill styling,  same as .cr-footer__col-toggle; the [hidden] rule  so the  button stays hidden without JS and on desktop. */
.cr-footer button.cr-footer__locations-toggle {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.4;
	color: #1f2124;
	cursor: pointer;
}

.cr-footer button.cr-footer__locations-toggle[hidden] {
	display: none;
}

.cr-footer__locations-caret {
	display: inline-block;
	transition: transform 0.2s ease;
	width: .8rem;
}

.cr-footer__locations-toggle[aria-expanded="true"] .cr-footer__locations-caret {
	transform: rotate(180deg);
}

.cr-footer__social {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1.8rem;
	margin: 2rem 0 0;
	padding: 0;
}

/* 50px hit-boxes with 25px glyphs, matching the Elementor social widget. */
.cr-footer__social-a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.cr-footer__social .cr-icon {
	width: 25px;
	height: 25px;
	transition: fill ease .4s;
}

.cr-footer__social .cr-icon:hover {
	fill: var(--e-global-color-bc3f5cd);
}


/* --- Legal row / disclosures (outside the card, on #EEE) --------------- */

.cr-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 40px;
	margin-top: 30px;
	font-size: 15px;
	line-height: 20px;
}

.cr-footer__copyright {
	margin: 0;
	line-height: 15px;
	margin-block-end: .5rem !important;
}

.cr-footer__legal-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 1rem;
	margin: 0;
	padding: 0;
}

.cr-footer__osano {
	margin: 16px 0 0;
	text-align: center;
	font-size: 16px;
	line-height: 23px;
}

.cr-footer__disclosures {
	max-width: 1170px;
	margin: 24px auto 0;
	text-align: center;
	font-size: 9px;
	line-height: 1.8;
}



.cr-footer__disclosures p {
	margin: 0 0 1em;
}

.cr-footer__disclosures a {
	text-decoration: underline;
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.cr-footer__top {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.cr-footer__inner {
		padding: 0 10px 20px;
	}

	.cr-footer__card {
		padding: 50px 20px;
		box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, .5);
	}

	.cr-footer h2.cr-footer__newsletter-heading {
		font-size: 16px;
	}

	.cr-footer__legal-row {
		font-size: 12px;
	}

	.cr-footer__nav {
		flex-direction: column;
		gap: 0;
	}

	.cr-footer__col {
		width: 100%;
		border-bottom: 1px solid #ddd;
		padding: 12px 0;
	}

	.cr-footer button.cr-footer__col-toggle {
		cursor: pointer;
	}

	.cr-footer__col-caret {
		display: inline-block;
	}

	.cr-footer__col-toggle[aria-expanded="true"] .cr-footer__col-caret {
		transform: rotate(180deg);
	}

	/* JS-driven accordion (cr-footer.js toggles the panel's hidden attr);
	   without JS nothing is hidden and the columns stay expanded. */
	.cr-footer__col-panel[hidden] {
		display: none;
	}

	.cr-footer__menu {
		text-align: center;
	}

	.cr-footer__menu li {
		margin-bottom: 8px;
	}

	.cr-footer__menu a {
		padding-left: 10px;
	}
}

/* --- Embedded Elementor newsletter form -------------------------------
   Rules kept verbatim from layout/footer.css: they style the form widget's
   own classes (newsletter-signup / newsletter-tooltip), which come along
   with the embedded saved template. */

@media (min-width: 768px) {
	.cr-footer__newsletter .elementor-field-option {
		margin-bottom: 0rem;
	}
	.newsletter-tooltip .elementor-field-subgroup.elementor-subgroup-inline {
		display: grid;
		grid-template-columns: 192px 169px 165px;
		justify-content: start;
	}

	.newsletter-tooltip .elementor-field-subgroup.elementor-subgroup-inline > span {
		display: flex;
		padding-bottom: 7px;
		align-items: center;
		gap: 2px;
		justify-content: flex-start;
	}

	.newsletter-tooltip .elementor-field-subgroup.elementor-subgroup-inline > span > label {
		flex-grow: 1;
		display: flex;
	}

	.newsletter-tooltip .elementor-field-subgroup.elementor-subgroup-inline > span > label > span {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
	}

	.cr-footer__inner {
		padding: 0 20px 20px;
	}

	.cr-footer__card {
		padding: 45px 50px;
		box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, .5);
	}

	.cr-footer__locations {
		max-width: 90%;
	}

	.cr-footer__brand-block {
		margin-top: 30px;
	}
}

@media (min-width: 768px) and (max-width: 1366px) {
	.newsletter-tooltip .elementor-field-subgroup.elementor-subgroup-inline {
		display: grid;
		grid-template-columns: 192px auto;
	}

	.cr-footer__newsletter {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media  (min-width: 1367px) {
	.cr-footer__newsletter {
min-width: 520px;
	}
		
}

@media (max-width: 767px) {
	.newsletter-signup .elementor-field-subgroup {
		flex-direction: column;
	}

	.cr-footer__brand-block .cr-footer__locations  {
		font-size: .9rem;
		line-height: 1.4;
        display: flex;
        flex-flow: column;
        gap: .8rem;
		border-bottom: 1px solid #ddd;
		padding-bottom: 1rem;
		margin-block-end: 1rem;
	}

	.cr-footer__locations a {
		background:none;
	}

	.cr-footer__locations-separator {
		display: none;
	}

	/* Collapsed: show the first 7 cities; the toggle flips data-collapsed. */
	.cr-footer__locations[data-collapsed="true"] .cr-footer__loc-item--extra {
		display: none;
	}
}

.newsletter-tooltip .elementor-field-group-autocampaigns .elementor-field-subgroup .elementor-field-option i {
	color: #005172;
	font-size: 1rem;
	margin-left: 7px;
	transition: color 0.3s;
	position: relative;
}

.newsletter-tooltip .elementor-field-group-autocampaigns .elementor-field-subgroup .elementor-field-option i:hover {
	color: #407590;
}

/* The ⓘ icons are FontAwesome <i> tags inside the form labels; the icon
   font no longer loads, so cr-footer.js injects an inline SVG into each.
   Size it to the former glyph box. */
.newsletter-tooltip .elementor-field-option i .cr-icon--info {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
}