/**
 * ===========================================
 * = GLOBAL ACSS
 *
 * ACSS CSS for customizing overflow, buttons, forms, and slider effects.
 * This file is meant to override and extend ACSS defaults.
 * ===========================================
 */

/* ========== Table of Contents ==========
 *
 * 1. Global Layout Styles
 *    - Hide horizontal scroll
 * 
 * 2. Enterprise AI Slider
 *    - Slider track gradient effect
 * 
 * 3. Button Styles
 *    - Outline Button Customizations
 *    - Primary Button Customizations
 *    - Custom Buttons (Border Bottom)
 * 
 * 4. Form Styles
 *    - Input Shadows
 *    - Custom Select Styling
 *    - HubSpot Form Styles
 *    - Password Guidance Popup
 * 
 * 5. Single Post Styles
 *    - Hiding custom elements
 * 
 * 6. Global Scroll Behavior
 *    - Smooth scroll
 * =======================================
 */

/* =============================
 * 1. GLOBAL LAYOUT STYLES
 * ----------------------------
 */

/* = Hide horizontal scroll */
html {
  overflow-x: hidden;
	 scroll-padding-top: 176px; 
}

html.scroll-smooth {
  scroll-behavior: smooth !important;
}

html:has(body.no-scroll) {
	overflow: hidden;
}

.line--height-180 * {
	line-height: 1.8;
}

.header {
	top: 0 !important;
}

header {
	z-index: 99999 !important;
}

.hidden:not(.bricks-draggable-item.hidden) {
	display: none;
}

button[disabled] { 
	opacity: .6;
}

.barndoor-directory-usecase-list .usecase-icon {
	border-radius: 0 !important;
}

/* =============================
 * 2. ENTERPRISE AI SLIDER
 * ----------------------------
 */

/* = Slider track gradient effect */
.enterprise--ai-slider .splide__track::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(227, 239, 226, 1) 0%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 75%,
    rgba(227, 239, 226, 1) 100%
  );
}

/* =============================
 * 3. BUTTON STYLES
 * ----------------------------
 */

#brxe-uhlccp .btn--outline.brxe-button {
	padding: 0;
	border-radius: 0;
	border: 0;
	color: white;
	border-bottom: 2px solid var(--secondary);
	min-width: auto;
	padding-bottom: 8px;
	transition: .3s;
	height: fit-content;
}

#brxe-uhlccp .btn--outline.brxe-button:hover {
	background: transparent;
	padding-bottom: 6px;
}


/* = Outline Button Customizations */
.btn--outline svg path {
  transition: 0.3s;
}

.btn--outline:hover svg path {
  stroke: white !important;
}

.btn--outline.btn--s,
.btn--primary.btn--s{
  font-size: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  min-width: 106px !important;
	padding-inline: 25px;
}

.btn--outline:has(svg),
.btn--primary:has(svg) {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
	justify-content: center !important;
}

/* = Custom Buttons (Border Bottom) */
.btn--border-bottom {
  background-color: transparent !important;
  border-width: 0px 0px 2px 0px !important;
  border-radius: 0px !important;
  min-width: auto !important;
  color: var(--body-color) !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) !important;
}

/* =============================
 * 4. FORM STYLES
 * ----------------------------
 */

/* = Input Shadows */
.form--light input,
.form--light textarea {
  box-shadow: 0 1.32px 1.32px 0 rgba(0, 0, 0, 0.1) !important;
}

.bg--base-semi-dark .form--light input:not(.bg--base-semi-dark .form--light input[type=submit]),
.bg--base-semi-dark .form--light select,
.bg--base-semi-dark .form--light textarea,
.bg--acc-form.form--light input:not(.bg--acc-form.form--light input[type=submit]),
.bg--acc-form.form--light select,
.bg--acc-form.form--light textarea{
	background-color: var(--white) !important;
}

/* = Result Messages */
form .message {
	font-size: 14px;
	border-radius: var(--radius-s);
}

form .message.error {
	background: var(--danger-ultra-light);
	color: var(--danger);
}

/* = Custom Select Styling */
select {
  appearance: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('https://barndoor.ai/wp-content/uploads/2025/05/ChevronDown.svg') !important;
  background-repeat: no-repeat;
  background-position-x: calc(100% - var(--f-input-padding-x) + 10px) !important;
  background-size: 14px 14px, 14px 14px !important;
	width: 100% !important;
}

/* = HubSpot Form Styles */
.hbspt-form fieldset {
  width: 100%;
  max-width: 100% !important;
}

.hbspt-form form {
  display: flex;
  flex-direction: column;
  row-gap: 17px;
}

.hbspt-form fieldset.form-columns-2 {
  display: flex;
  column-gap: 17px;
}

.hbspt-form .input label {
  display: none;
  position: relative;
}

.hbspt-form .input {
  padding: 0;
}

.hbspt-form input:not(.hbspt-form input[type=submit], .hbspt-form input[type=button]),
.hbspt-form select,
.hbspt-form textarea {
	width: 100% !important;
}

.hbspt-form .input:has(input[type=checkbox]) {
  background: transparent !important;
  margin-top: 3px;
}

.hbspt-form .input:has(input[type=checkbox]) label {
  display: block;
}

.hbspt-form .input ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hbspt-form .input:has(input[type=checkbox]) span::before {
  content: "";
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid var(--f-light-option-border-color, var(--secondary));
  border-radius: 0.2em;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transition: all 0.2s, background 0.2s ease-in-out;
  background-color: var(--f-light-option-background-color, var(--transparent));
}

.hbspt-form input[type="checkbox"]:checked + span::after {
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  left: 0;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  background: url("https://barndoor.aiwp-content/uploads/2025/05/Check.svg") 45% no-repeat;
  background-size: 50%;
}

.hbspt-form input[type="checkbox"]:checked + span::before {
  background-color: var(--secondary);
}

.hbspt-form .input:has(input[type=checkbox]) label span {
  position: relative;
  padding-top: 2px;
  padding-left: 2em;
	line-height: 2;
}

.bg--base-semi-dark .hbspt-form .input:has(input[type=checkbox]) label span {
	color: var(--bg-dark-text);
}

.hbspt-form .hs-error-msgs {
  list-style-type: none;
  padding: 0;
  margin-top: 10px;
}

.hbspt-form .hs-error-msgs label {
  font-size: var(--text-s) !important;
  color: var(--white--trans-50) !important;
}

/* = Password Guidance Popup */
.password-guidance-form .form-group:has(.password-guidance) {
  margin-bottom: 0 !important;
  background-color: white;
  padding: var(--space-s);
  border-radius: var(--radius-l);
  
  position: absolute;
  bottom: 0rem;
  left: calc(100% - 20px);
  width: max-content;
  box-shadow: -1px 1.32px 1.32px 0px rgba(0, 0, 0, 0.1);
	display: none;
}

.password-guidance-form .password-guidance {
  position: relative;
}

.password-guidance-form .password-guidance::before {
  content: '';
  width: 15px;
  height: 15px;
  background: var(--white);
  position: absolute;
  left: -27px;
  transform: rotate(45deg);
  box-shadow: -1px 1.32px 1.32px 0px rgba(0, 0, 0, 0.1);
}

.password-guidance-form .password-guidance ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.password-guidance-form .password-guidance ul li {
  font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.password-guidance-form .password-guidance ul li img {
	width: 15px;
	height: 15px;
}

@media screen and (max-width: 991px) {
	.password-guidance-form .form-group:has(.password-guidance) {
		position: relative;
		left: 0;
		margin-bottom: 1.5em !important;
	}
	
	.password-guidance-form .password-guidance::before {
		left: calc(50% - 7.5px);
		top: -27px;
		box-shadow: none;
	}
}

/* = HubSpot Footer Newsletter Form */
.footer input[type=submit] {
	--btn-background: var(--tertiary) !important;
  --btn-background-hover: var(--tertiary-ultra-light)  !important;
  --btn-text-color: var(--body-color)  !important;
  --btn-text-color-hover: var(--body-color)  !important;
  --btn-border-color: var(--tertiary)  !important;
  --btn-border-color-hover: var(--tertiary-hover)  !important;
  --focus-color: var(--tertiary-light)  !important;
}

.footer .hbspt-form form {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 15px;
}

.footer .hbspt-form .form-columns-1:not(.footer .hbspt-form .form-columns-1:has(input[type=email])),
.footer .hbspt-form .form-columns-2,
.footer .hbspt-form .form-columns-3 {
	display: none;
}

.footer .hbspt-form label {
	display: none;
}


.footer .hbspt-form .hs_email input {
	background-color: var(--base-semi-dark);
	color: white;
	font-weight: 600;
	height: 60px;
}

/* =============================
 * 5. SINGLE POST STYLES
 * ----------------------------
 */

/* = Hiding Custom Elements */

.sharedaddy {
	display: none !important;
}

.post-content .jp-relatedposts {
	display: none !important;
}


/* =============================
 * 6. GLOBAL SCROLL BEHAVIOR
 * ----------------------------
 */