/*
Theme Name: Westcor
Theme URI: https://www.wltic.com/
Description: Child theme of Hello Elementor for Westcor Land Title Insurance Company. Page layouts are built in Elementor; this theme holds site-wide CSS and the office locator.
Author: Dusty Sun
Author URI: https://www.dustysun.com/
Template: hello-elementor
Version: 1.2.7
Requires PHP: 7.4
Text Domain: westcor
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/*
 * Site-wide CSS goes here. Brand values are exposed as custom properties so
 * new rules (and the office locator) share one source of truth.
 */
:root {
	--westcor-navy: #001235;
	--westcor-blue: #006db7;
	--westcor-text-muted: #4d5a72;
	--westcor-border: #e3e7ee;
	--westcor-field: #f4f6f9;
	--westcor-highlight: #ebf1f8;
	--westcor-font-sans: "Roboto", sans-serif;
	--westcor-font-serif: "Roboto Serif", serif;
}

.glass-cta {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
	box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.1);
}

/*
 * Mobile swipe row: add class westcor-mobile-scroll to an Elementor Grid container and, on
 * phones, its items become one row that scrolls sideways inside the section (snapping to each
 * card, the next one peeking in) instead of stacking. Leave the grid's mobile Width and Columns
 * at their defaults — this sets them. Gap still comes from the container's Gap setting.
 * The row bleeds to the screen edges by --westcor-scroll-bleed, which should match the section's
 * mobile side padding. (Hello's reset.css sets body { overflow-x: clip }, so anything wider
 * than the screen is cut off, never page-scrollable; the scrolling has to happen in here.)
 */
@media (max-width: 767px) {
	.e-con.e-grid.westcor-mobile-scroll {
		--westcor-scroll-bleed: 16px;
		width: auto;
		max-width: none;
		margin-inline: calc(-1 * var(--westcor-scroll-bleed));
		padding-inline: var(--westcor-scroll-bleed);
		grid-template-columns: none;
		grid-template-rows: none;
		grid-auto-flow: column;
		grid-auto-columns: 80%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--westcor-scroll-bleed);
	}
	.e-con.e-grid.westcor-mobile-scroll > .e-con {
		width: auto;
		scroll-snap-align: start;
	}
}

/* Overlap pages: the header floats over the hero instead of taking up space above it. */
body.westcor-header-overlap .westcor-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	background: transparent;
}
body:not(.westcor-header-overlap) .westcor-header {
	position:fixed;
}
body.admin-bar .westcor-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .westcor-header {
		top: 46px; /* the admin bar is taller on small screens */
	}
}
#primary_header_inner {
	background: rgba(0, 0, 0, 0.1);
  	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  	backdrop-filter: blur(22px);
  	-webkit-backdrop-filter: blur(22px);
}
#primary_menu a.elementor-item {
	color: #00123580;
	fill: #00123580;
}
body.westcor-header-overlap #primary_header_inner {
	background: rgba(0, 0, 0, 0.2);
  	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  	backdrop-filter: blur(22px);
  	-webkit-backdrop-filter: blur(22px);
}
.westcor-header-overlap #primary_menu a.elementor-item {
	color: #fff;
	fill: #fff;
}

.westcor-header-overlap #primary_logo img {
	filter: brightness(0) invert(1);
}

/*
 * Overlap header once the page is scrolled (body.westcor-scrolled, added by
 * assets/js/header-scroll.js): the header panel (#primary_header_inner) fills in with the
 * standard header's grey and the menu text turns grey. "Become An Agent" (.btn_menu) keeps its white-on-blue.
 */
body.westcor-header-overlap #primary_header_inner,
body.westcor-header-overlap #primary_logo img,
body.westcor-header-overlap #primary_menu a.elementor-item,
body.westcor-header-overlap .elementor-nav-menu--main .menu_westcor {
	transition: background-color 0.3s ease, color 0.3s ease, fill 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
}

body.westcor-header-overlap.westcor-scrolled #primary_header_inner {
	/* background-color: rgba(229, 229, 229, 0.85); */
}

body.westcor-header-overlap.westcor-scrolled #primary_menu .menu-item:not(.btn_menu) > a.elementor-item {
	/* color: #818181; */
	/* fill: #818181; */
}

body.westcor-header-overlap.westcor-scrolled #primary_logo img {
	/* filter: none; */
}

body.westcor-header-overlap.westcor-scrolled .elementor-nav-menu--main .menu_westcor {
	border-left-color: #818181;
}

#primary_menu .sub-menu li.menu-item:not(:last-child):after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 30px;
	width: calc(100% - 60px);
	height: 1px;
	background-color: #E6E6E6;
}
#primary_menu .sub-menu li.menu-item a.elementor-sub-item {
	border: none;
}
.btn_menu a.elementor-item  {
	color: #fff !important;
      background-image: linear-gradient(180deg, #006DB7 0%, #1680C8 100%);
      padding: 12px 20px;

}
/* Westcor Central menu item: round logo before the label */
.elementor-nav-menu .menu_westcor > a {
      display: flex;
      align-items: center;
      padding-left: 30px !important;
}

.elementor-nav-menu .menu_westcor > a::before {
      content: "";
      flex: none;
	  left: 0;
	  opacity: 1 !important;
	  background-color: rgba(0, 0, 0, 0) !important;
      width: 20px;
      height: 20px;
      background: url("/wp-content/themes/hello-elementor-wltic/assets/images/westcor-central.svg") center / contain no-repeat;
}

/*
 * Search menu item (CSS class "menu_search", URL "#search"): magnifier icon that opens the
 * search overlay (includes/class-search-overlay.php). The desktop bar shows only the icon (the
 * label stays for screen readers); the mobile dropdown shows icon + "Search".
 * The icon is a mask, so it takes the link's text color, including hover and the white
 * overlap header.
 */
.elementor-nav-menu .menu_search > a {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* !important: the Nav Menu widget's hover-pointer styles also use ::before. */
.elementor-nav-menu .menu_search > a::before {
	content: "";
	position: static !important;
	flex: none;
	width: 20px !important;
	height: 20px !important;
	opacity: 1 !important;
	transform: none !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Submenu indicator: the Figma line chevron replaces the Nav Menu widget's filled caret.
 * Like the search icon it is a mask, so it follows the link's text color.
 */
#primary_menu .sub-arrow svg {
	display: none;
}
#primary_menu .sub-arrow::before {
	content: "";
	display: block;
	width: 10px;
	height: 6px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.5.5 5 5.5 9.5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.5.5 5 5.5 9.5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* !important: the widget's own typography setting is more specific. */
.elementor-nav-menu--main .menu_search > a {
	font-size: 0 !important;
	gap: 0;
}

/* Divider between search and Westcor Central (desktop bar only). */
.elementor-nav-menu--main .menu_westcor {
	margin-left: 16px;
	padding-left: 30px;
	border-left: 1px solid rgba(0, 18, 53, 0.48);
}

body.westcor-header-overlap .elementor-nav-menu--main .menu_westcor {
	border-left-color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 1025px) and (max-width: 1200px) {
	#primary_header_container {
		width: 96%;
	}
	#primary_menu {
		margin-left: 0;
	}
	#primary_header_inner li:not(.menu_westcor):not(.menu_search):not(.btn_become_agent) a.elementor-item {
		padding: 20px 10px;
	}
		#primary_header_inner a.elementor-item {
		font-size: 14px;
	}	
}
@media (max-width: 1024px) {
	#primary_header_container {
		border: none;
	}
	.elementor-nav-menu .menu_westcor > a {
		padding-left: 50px !important;
	}
	.elementor-nav-menu .menu_westcor > a::before {
		left: 20px;
	}
	.westcor-header-overlap #primary_menu a.elementor-item {
		color: #818181;
    	fill: #818181;
	}
	.westcor-header-overlap .elementor-menu-toggle .e-font-icon-svg {
		fill: #fff;
	}
}
/*
 * Press releases list with year tabs ([westcor_press_releases], includes/class-press-releases.php).
 * Sizes follow the Figma text styles: years 29px, date = Body Medium, title = Body Large.
 */
.westcor-press {
	--westcor-press-divider: rgba(0, 18, 53, 0.15);
	width: 100%;
	max-width: 760px;
	font-family: var(--westcor-font-sans);
	color: var(--westcor-navy);
}

.westcor-press__years {
	display: none;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-bottom: 64px;
}

.westcor-press--tabs .westcor-press__years {
	display: flex;
}

.westcor-press .westcor-press__year {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font: 300 29px/1.5 var(--westcor-font-sans);
	color: var(--westcor-navy);
	cursor: pointer;
}

.westcor-press .westcor-press__year:hover,
.westcor-press .westcor-press__year:focus {
	background: none;
	color: var(--westcor-blue);
}

.westcor-press .westcor-press__year[aria-selected="true"] {
	font-weight: 400;
	color: var(--westcor-blue);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.westcor-press .westcor-press__year:focus-visible {
	outline: 2px solid var(--westcor-blue);
	outline-offset: 4px;
}

/* Year headings only show when JavaScript is off and every year is listed. */
.westcor-press__panel-year {
	margin: 0 0 24px;
	font: 300 29px/1.5 var(--westcor-font-sans);
	color: var(--westcor-navy);
}

.westcor-press--tabs .westcor-press__panel-year {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.westcor-press__panel + .westcor-press__panel {
	margin-top: 64px;
}

.westcor-press__list {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.westcor-press__item {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--westcor-press-divider);
}

.westcor-press__date {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.westcor-press .westcor-press__title {
	font-size: 21.6px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--westcor-navy);
	text-decoration: none;
}

@media (max-width: 767px) {
	.westcor-press .westcor-press__year,
	.westcor-press__panel-year {
		font-size: 24px;
	}

	.westcor-press .westcor-press__title {
		font-size: 19px;
	}
}
/*
 * Single post template: show the press-release back link on press releases, the news one
 * everywhere else. Both stay visible in the Elementor editor (body.elementor-editor-active).
 */
body:not(.elementor-editor-active) .elementor-location-single.category-press-release .back-to-news,
body:not(.elementor-editor-active) .elementor-location-single:not(.category-press-release) .back-to-press {
        display: none;
}
/*
 * All News, press release list and search results: underline draws left to right under the post
 * title on hover. Press titles draw on the inline span inside the link, so a wrapped title is
 * underlined line by line.
 */
.westcor-news .elementor-widget-theme-post-title .elementor-heading-title a,
.westcor-press .westcor-press__title-text,
.westcor-search-results .e-loop-item .elementor-widget-heading .elementor-heading-title a {
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 1px;
        padding-bottom: 2px;
        transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.westcor-news .e-loop-item:hover .elementor-widget-theme-post-title .elementor-heading-title a,
.westcor-news .elementor-widget-theme-post-title .elementor-heading-title a:focus-visible,
.westcor-press .westcor-press__title:hover .westcor-press__title-text,
.westcor-press .westcor-press__title:focus-visible .westcor-press__title-text,
.westcor-search-results .e-loop-item .elementor-widget-heading .elementor-heading-title a:hover,
.westcor-search-results .e-loop-item .elementor-widget-heading .elementor-heading-title a:focus-visible {
        background-size: 100% 1px;
}

/* Search results: the title keeps its navy on hover (the "Search Result" loop item turns it blue). */
.westcor-search-results .e-loop-item .elementor-widget-heading .elementor-heading-title a:hover {
        color: inherit;
}

@media (prefers-reduced-motion: reduce) {
        .westcor-news .elementor-widget-theme-post-title .elementor-heading-title a,
        .westcor-press .westcor-press__title-text,
        .westcor-search-results .e-loop-item .elementor-widget-heading .elementor-heading-title a {
                transition: none;
        }
}

/*
 * Search results "Search" button: uppercase like the site's other buttons, not the small caps the
 * template's custom CSS sets. The extra classes outrank that custom CSS.
 */
.westcor-search-results .elementor-widget-search-form .elementor-search-form .elementor-search-form__container .elementor-search-form__submit {
        font-variant-caps: normal;
        text-transform: uppercase;
        letter-spacing: 0.02em;
}
/*
 * Search overlay (includes/class-search-overlay.php): a panel that drops from the top of the
 * screen over a dimmed page. The <dialog> itself has no padding so a click on the backdrop
 * (target = dialog) closes it while clicks inside the panel don't.
 */
.westcor-search {
	position: fixed;
	inset: 0 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--westcor-navy);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.westcor-search[open] {
	animation: westcor-search-in 0.25s ease-out;
}

.westcor-search::backdrop {
	background: rgba(0, 18, 53, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

@keyframes westcor-search-in {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.westcor-search[open] {
		animation: none;
	}
}

.westcor-search__inner {
	position: relative;
	max-width: 808px;
	margin: 0 auto;
	padding: 64px 24px 56px;
}

.westcor-search__label {
	display: block;
	margin-bottom: 16px;
	font: 300 32px/1.3 var(--westcor-font-serif);
	color: var(--westcor-navy);
}

.westcor-search__field {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

.westcor-search .westcor-search__input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid rgba(0, 18, 53, 0.3);
	border-radius: 0;
	background: transparent;
	font: 300 21.6px/1.5 var(--westcor-font-sans);
	color: var(--westcor-navy);
}

.westcor-search .westcor-search__input:focus {
	outline: none;
	border-bottom-color: var(--westcor-blue);
}

.westcor-search .westcor-search__input::placeholder {
	color: rgba(0, 18, 53, 0.48);
}

.westcor-search .westcor-search__submit {
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background-image: linear-gradient(180deg, #006DB7 0%, #1680C8 100%);
	font: 400 16px/1.5 var(--westcor-font-sans);
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

.westcor-search .westcor-search__submit:hover,
.westcor-search .westcor-search__submit:focus-visible {
	background-image: none;
	background-color: var(--westcor-navy);
}

.westcor-search .westcor-search__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--westcor-navy);
	cursor: pointer;
}

.westcor-search .westcor-search__close:hover,
.westcor-search .westcor-search__close:focus-visible {
	background: none;
	color: var(--westcor-blue);
}

@media (max-width: 767px) {
	.westcor-search__inner {
		padding: 56px 16px 32px;
	}

	.westcor-search__label {
		font-size: 26px;
	}

	.westcor-search__field {
		flex-direction: column;
	}
}

/*
 * "All Offices" list on the Contact page: a Text Editor widget with class westcor-office-directory
 * holding one <div> per state (<h4> state, then <p><strong>Office</strong><br>address</p>).
 * The states flow down three columns, alphabetically, like the Figma. (Elementor's optimized
 * markup puts the editor HTML straight inside the widget element — no .elementor-widget-container.)
 */
.westcor-office-directory {
	columns: 3;
	column-gap: 60px;
}

.westcor-office-directory > div {
	break-inside: avoid;
	padding-bottom: 40px;
}

.westcor-office-directory h4 {
	margin: 0 0 20px;
	font: 400 22px/1.4 var(--westcor-font-serif);
	color: var(--westcor-navy);
}

.westcor-office-directory p {
	margin: 0 0 18px;
	font: 400 14px/1.6 var(--westcor-font-sans);
	color: var(--westcor-navy);
}

.westcor-office-directory p:last-child {
	margin-bottom: 0;
}

.westcor-office-directory strong {
	display: inline-block;
	margin-bottom: 6px;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.westcor-office-directory {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.westcor-office-directory {
		columns: 1;
	}
}


.hs-form-html [data-hsfc-id="Renderer"] {
        --hsf-global__font-family: var(--westcor-font-sans, "Roboto", sans-serif);
        --hsf-global__font-size: 16px;
        --hsf-global__color: #fff;
        --hsf-global__error-color: #ff8a8a;
        --hsf-background__padding: 0;
        --hsf-background__background-color: transparent;
        --hsf-background__border-style: none;
        --hsf-row__horizontal-spacing: 30px;
        --hsf-row__vertical-spacing: 32px;
        --hsf-module__vertical-spacing: 8px;
        --hsf-field-label__color: #fff;
        --hsf-field-label__font-size: 16px;
        --hsf-field-input__color: #fff;
        --hsf-field-input__background-color: transparent;
        --hsf-field-input__placeholder-color: rgba(255, 255, 255, 0.7);
        --hsf-field-input__border-color: rgba(255, 255, 255, 0.6);
        --hsf-field-input__border-style: solid;
        --hsf-field-input__border-width: 0 0 1px 0;
        --hsf-field-input__border-radius: 0;
        --hsf-field-input__padding: 8px 0;
        --hsf-field-textarea__color: #fff;
        --hsf-field-textarea__background-color: transparent;
        --hsf-field-textarea__border-color: rgba(255, 255, 255, 0.6);
        --hsf-field-textarea__border-width: 0 0 1px 0;
        --hsf-field-textarea__border-radius: 0;
        --hsf-field-textarea__padding: 8px 0;
        --hsf-field-checkbox__background-color: transparent;
        --hsf-field-checkbox__border-color: rgba(255, 255, 255, 0.6);
        --hsf-field-checkbox__color: #fff;
        --hsf-field-radio__background-color: transparent;
        --hsf-field-radio__border-color: rgba(255, 255, 255, 0.6);
        --hsf-field-radio__color: #fff;
        --hsf-field-description__color: rgba(255, 255, 255, 0.7);
        --hsf-field-footer__color: rgba(255, 255, 255, 0.7);
        --hsf-richtext__color: #fff;
        --hsf-infoalert__color: #fff;
        --hsf-erroralert__color: #ff8a8a;
        --hsf-button__font-family: var(--westcor-font-sans, "Roboto", sans-serif);
        --hsf-button__font-size: 16px;
        --hsf-button__font-weight: 400;
        --hsf-button__color: #fff;
        --hsf-button__background-color: var(--westcor-blue, #006db7);
        --hsf-button__border-radius: 0;
        --hsf-button__padding: 10px 25px 12px;
        --hsf-button--hover__color: #fff;
        --hsf-button--hover__background-color: var(--westcor-navy, #001235);
        --hsf-button--focus__color: #fff;
        --hsf-button--focus__background-color: var(--westcor-navy, #001235);
        --hsf-navigationrow-buttons__justify-content: start;
        --hsf-navigationrow-buttons-single__justify-content: start;
}

.hs-form-html { padding-top: 45px; }

/*
 * TEMPORARY: hides a form's leading rich-text block until that intro text is removed in HubSpot.
 * The thank-you screen after submit (.hsfc-PostSubmit) is left alone. Delete once the forms are cleaned up.
 */
.hs-form-html .hsfc-Step__Content > .hsfc-Row:first-child:has(> .hsfc-RichText):not(.hsfc-PostSubmit *) { display: none; }

/*
 * Rich text (intro text, thank-you message): HubSpot's editor writes inline font-family styles
 * (Helvetica, Arial…). Drop them so the text stays in the site font; sizes, colors and bold set
 * in HubSpot still apply.
 */
.hs-form-html .hsfc-RichText [style*="font-family"] { font-family: inherit !important; }

.hs-form-html .hsfc-FieldLabel { font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.hs-form-html .hsfc-FieldLabel span:has(> strong) { text-transform: none; }
.hs-form-html .hsfc-FieldLabel strong { font-weight: 500; text-transform: uppercase; }
.hs-form-html .hsfc-FieldLabel a,
.hs-form-html .hsfc-FieldLabel a span,
.hs-form-html .hsfc-FieldLabel span[style] { color: #fff !important; }
.hs-form-html .hsfc-FieldLabel a { text-decoration: underline; }
.hs-form-html .hsfc-FieldLabel__RequiredIndicator { display: none; } 

.hs-form-html .hsfc-TextInput,
.hs-form-html .hsfc-TextareaInput { line-height: 1.5; box-shadow: none !important; }
.hs-form-html .hsfc-TextInput:focus,
.hs-form-html .hsfc-TextareaInput:focus { border-color: #fff; }
.hs-form-html .hsfc-TextInput:-webkit-autofill {
        -webkit-text-fill-color: #fff;
        transition: background-color 9999s ease-out; /* keep Chrome's autofill tint off the glass */
}

.hs-form-html .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret { border-right: 0; padding-right: 12px; }
.hs-form-html .hsfc-PhoneInput__FlagAndCaret:hover { filter: none; }

.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret { padding: 0 4px; }
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions {
        background-color: var(--westcor-navy, #001235);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 0;
        margin-top: 4px;
}
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions__Search { padding: 8px 12px; }
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem { padding: 10px 12px; }
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:hover,
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:focus,
.hs-form-html [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem--selected { filter: none; background-color: rgba(255, 255, 255, 0.12); }

.hs-form-html .hsfc-NavigationRow { margin-top: 48px; }
.hs-form-html .hsfc-Button { line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em; }
.hs-form-html .hsfc-Button:not([disabled]):hover { transform: none; }
.hs-form-html .hsfc-Button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hs-form-html [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):focus,
.hs-form-html [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):hover {
	background-color: var(--hsf-button__background-color, var(--hsf-default-button__background-color));
}

/*
 * Slot-machine flip on the form button, same timing as .flip-button. assets/js/flip-buttons.js
 * lays .westcor-flip-overlay over the label; HubSpot's own text stays (it still sizes the button
 * and gives it its accessible name) but is see-through. The overlay takes the button's color,
 * hover color included.
 */
.hs-form-html .hsfc-Button:has(> .westcor-flip-overlay) {
	position: relative;
	-webkit-text-fill-color: transparent;
}
.hs-form-html .westcor-flip-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-text-fill-color: currentColor;
	pointer-events: none;
}
.hs-form-html .westcor-flip-overlay .flip-label {
	display: block;
	overflow: hidden;
	height: 1.3em;
	line-height: 1.3em;
}
.hs-form-html .westcor-flip-overlay .flip-inner {
	display: block;
	transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.hs-form-html .westcor-flip-overlay .flip-inner > span {
	display: block;
	height: 1.3em;
	line-height: 1.3em;
	white-space: nowrap;
}
.hs-form-html .hsfc-Button:not([disabled]):hover .flip-inner,
.hs-form-html .hsfc-Button:focus-visible .flip-inner {
	transform: translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
	.hs-form-html .westcor-flip-overlay .flip-inner {
		transition: none;
		transform: none !important;
	}
}

@media (max-width: 767px) {
        .hs-form-html [data-hsfc-id="Renderer"] { --hsf-row__vertical-spacing: 24px; }
        .hs-form-html .hsfc-NavigationRow { margin-top: 32px; }
}


/* Light HubSpot forms: add .hs-form-light to the form's container (or the embed div). */
.hs-form-light [data-hsfc-id="Renderer"] {
        --hsf-global__font-family: var(--westcor-font-sans, "Roboto", sans-serif);
        --hsf-global__font-size: 16px;
        --hsf-global__color: var(--westcor-navy, #001235);
        --hsf-global__error-color: #c8102e;
        --hsf-background__padding: 0;
        --hsf-background__background-color: transparent;
        --hsf-background__border-style: none;
        --hsf-row__horizontal-spacing: 30px;
        --hsf-row__vertical-spacing: 32px;
        --hsf-module__vertical-spacing: 8px;
        --hsf-field-label__color: var(--westcor-navy, #001235);
        --hsf-field-label__font-size: 18px;
        --hsf-field-input__color: var(--westcor-navy, #001235);
        --hsf-field-input__background-color: transparent;
        --hsf-field-input__placeholder-color: rgba(0, 18, 53, 0.5);
        --hsf-field-input__border-color: rgba(0, 18, 53, 0.2);
        --hsf-field-input__border-style: solid;
        --hsf-field-input__border-width: 0 0 1px 0;
        --hsf-field-input__border-radius: 0;
        --hsf-field-input__padding: 8px 0;
        --hsf-field-textarea__color: var(--westcor-navy, #001235);
        --hsf-field-textarea__background-color: transparent;
        --hsf-field-textarea__placeholder-color: rgba(0, 18, 53, 0.5);
        --hsf-field-textarea__border-color: rgba(0, 18, 53, 0.2);
        --hsf-field-textarea__border-width: 0 0 1px 0;
        --hsf-field-textarea__border-radius: 0;
        --hsf-field-textarea__padding: 8px 0;
        --hsf-field-checkbox__background-color: #fff;
        --hsf-field-checkbox__border-color: rgba(0, 18, 53, 0.3);
        --hsf-field-checkbox__color: var(--westcor-navy, #001235);
        --hsf-field-radio__background-color: #fff;
        --hsf-field-radio__border-color: rgba(0, 18, 53, 0.3);
        --hsf-field-radio__color: var(--westcor-navy, #001235);
        --hsf-field-description__color: rgba(0, 18, 53, 0.6);
        --hsf-field-footer__color: rgba(0, 18, 53, 0.6);
        --hsf-richtext__color: var(--westcor-navy, #001235);
        --hsf-infoalert__color: var(--westcor-navy, #001235);
        --hsf-erroralert__color: #c8102e;
        --hsf-button__font-family: var(--westcor-font-sans, "Roboto", sans-serif);
        --hsf-button__font-size: 16px;
        --hsf-button__font-weight: 400;
        --hsf-button__color: var(--westcor-blue, #006db7);
        --hsf-button__background-color: transparent;
        --hsf-button__border-width: 1px;
        --hsf-button__border-style: solid;
        --hsf-button__border-color: var(--westcor-blue, #006db7);
        --hsf-button__border-radius: 0;
        --hsf-button__padding: 14px 30px 15px;
        --hsf-button--hover__color: #fff;
        --hsf-button--hover__background-color: var(--westcor-blue, #006db7);
        --hsf-button--hover__border-color: var(--westcor-blue, #006db7);
        --hsf-button--focus__color: #fff;
        --hsf-button--focus__background-color: var(--westcor-blue, #006db7);
        --hsf-button--focus__border-color: var(--westcor-blue, #006db7);
        --hsf-navigationrow-buttons__justify-content: start;
        --hsf-navigationrow-buttons-single__justify-content: start;
}

/* Undo the dark card's uppercase labels and white links */
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-FieldLabel,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-FieldLabel strong {
        text-transform: none;
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-FieldLabel span[style] {
        color: inherit !important;
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-FieldLabel a,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-FieldLabel a span {
        color: var(--westcor-blue, #006db7) !important;
}

.hs-form-light [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus {
        border-color: var(--westcor-blue, #006db7);
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-TextInput:-webkit-autofill {
        -webkit-text-fill-color: var(--westcor-navy, #001235);
}

/* Chevron carets instead of HubSpot's solid triangles */
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret__Caret {
        width: 8px;
        height: 8px;
        border: solid rgba(0, 18, 53, 0.45);
        border-width: 0 1.5px 1.5px 0;
        transform: translateY(-2px) rotate(45deg);
}

/* Dropdown options on white */
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-DropdownOptions {
        background-color: #fff;
        border: 1px solid rgba(0, 18, 53, 0.2);
        box-shadow: 0 8px 24px rgba(0, 18, 53, 0.08);
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:hover,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem:focus,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-DropdownOptions__List__ListItem--selected {
        background-color: var(--westcor-highlight, #ebf1f8);
}

/*
 * Button: the dark form's rule above keeps the resting background on hover/focus, which is
 * transparent here. Clicked (plain :focus) goes back to the resting outline style; hover and
 * keyboard focus fill blue.
 */
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):focus {
        color: var(--westcor-blue, #006db7);
        background-color: transparent;
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover,
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):focus-visible {
        color: #fff;
        background-color: var(--westcor-blue, #006db7);
}
.hs-form-light [data-hsfc-id="Renderer"] .hsfc-Button:focus-visible {
        outline-color: var(--westcor-blue, #006db7);
}