/* WP BrandFlow - Utility Classes */
/* Auto-generated - Do not edit manually */

/* Blurred Header - Frosted glass effect for sticky elements */
.blurred-header {
  position: relative;
  transition: backdrop-filter 0.6s ease, background-color 0.6s ease, box-shadow 0.6s ease, padding 0.6s ease, min-height 0.6s ease, max-height 0.6s ease;
}

/* Apply blur effect ONLY when sticky (on scroll) - White frosted glass */
.blurred-header.elementor-sticky--effects,
.blurred-header.elementor-sticky--active,
.blurred-header.elementor-sticky.elementor-sticky--active,
body .blurred-header.elementor-sticky--effects,
body .blurred-header.elementor-sticky--active,
body .e-con.blurred-header.elementor-sticky--effects,
body .e-con.blurred-header.elementor-sticky--active {
  backdrop-filter: blur(10px) saturate(180%) brightness(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.2) !important;
  background-color: rgba(255, 255, 255, 0.28) !important;
  background-image: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  --wpb-sticky-header-foreground: rgba(17, 24, 39, 0.92);
  --wpb-sticky-header-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  color: var(--wpb-sticky-header-foreground) !important;
  max-height: 130px !important;
  min-height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Sticky glossy header legibility helpers */
.blurred-header.elementor-sticky--effects a,
.blurred-header.elementor-sticky--active a,
body .blurred-header.elementor-sticky--effects a,
body .blurred-header.elementor-sticky--active a,
body .e-con.blurred-header.elementor-sticky--effects a,
body .e-con.blurred-header.elementor-sticky--active a {
  color: inherit !important;
}

.blurred-header.elementor-sticky--effects .elementor-heading-title,
.blurred-header.elementor-sticky--active .elementor-heading-title,
body .blurred-header.elementor-sticky--effects .elementor-heading-title,
body .blurred-header.elementor-sticky--active .elementor-heading-title,
body .e-con.blurred-header.elementor-sticky--effects .elementor-heading-title,
body .e-con.blurred-header.elementor-sticky--active .elementor-heading-title {
  color: inherit !important;
  text-shadow: var(--wpb-sticky-header-text-shadow);
}

.blurred-header.elementor-sticky--effects img,
.blurred-header.elementor-sticky--active img,
.blurred-header.elementor-sticky--effects svg,
.blurred-header.elementor-sticky--active svg,
body .blurred-header.elementor-sticky--effects img,
body .blurred-header.elementor-sticky--active img,
body .blurred-header.elementor-sticky--effects svg,
body .blurred-header.elementor-sticky--active svg,
body .e-con.blurred-header.elementor-sticky--effects img,
body .e-con.blurred-header.elementor-sticky--active img,
body .e-con.blurred-header.elementor-sticky--effects svg,
body .e-con.blurred-header.elementor-sticky--active svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

/* Logo visibility boost - dark backdrop chip behind logo when sticky */
.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo,
.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo,
body .blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo,
body .blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo,
body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo,
body .e-con.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo {
  position: relative;
}

@supports selector(:has(*)) {
  .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']),
  .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']),
  body .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']),
  body .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']),
  body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']),
  body .e-con.blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) {
    position: relative;
  }
}

.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo::before,
.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo::before,
body .blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo::before,
body .blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo::before,
body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo::before,
body .e-con.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo::before {
  content: '';
  position: absolute;
  inset: -8px -12px;
  background: rgba(17, 24, 39, 0.35);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: -1;
  transition: background 0.3s ease;
}

@supports selector(:has(*)) {
  .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo'])::before,
  .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo'])::before,
  body .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo'])::before,
  body .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo'])::before,
  body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo'])::before,
  body .e-con.blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo'])::before {
    content: '';
    position: absolute;
    inset: -8px -12px;
    background: rgba(17, 24, 39, 0.35);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
    transition: background 0.3s ease;
  }
}

/* Stronger filter for logo images/SVGs when sticky */
.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo img,
.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo img,
.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo svg,
.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo svg,
body .blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo img,
body .blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo img,
body .blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo svg,
body .blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo svg,
body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo img,
body .e-con.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo img,
body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-theme-site-logo svg,
body .e-con.blurred-header.elementor-sticky--active .elementor-widget-theme-site-logo svg {
  filter: contrast(1.15) brightness(0.85) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
  transition: filter 0.3s ease;
}

@supports selector(:has(*)) {
  .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) img,
  .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) img,
  .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) svg,
  .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) svg,
  body .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) img,
  body .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) img,
  body .blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) svg,
  body .blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) svg,
  body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) img,
  body .e-con.blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) img,
  body .e-con.blurred-header.elementor-sticky--effects .elementor-widget-image:has(img[src*='logo']) svg,
  body .e-con.blurred-header.elementor-sticky--active .elementor-widget-image:has(img[src*='logo']) svg {
    filter: contrast(1.15) brightness(0.85) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    transition: filter 0.3s ease;
  }
}

.blurred-header > * {
  position: relative;
  z-index: 1;
}

/* Image Border Radius Reset Utilities */
/* Use these classes or set border-radius: 0 in Elementor to remove image border-radius */
/* Remove border-radius when explicitly set to 0 in inline styles */
body.brandflow img[style*='border-radius: 0'],
body.brandflow img[style*='border-radius:0'],
body.brandflow img[style*='border-radius: 0px'],
body.brandflow img[style*='border-radius:0px'],
body.brandflow .elementor-image img[style*='border-radius: 0'],
body.brandflow .elementor-image img[style*='border-radius:0'],
body.brandflow .elementor-image img[style*='border-radius: 0px'],
body.brandflow .elementor-image img[style*='border-radius:0px'],
body.brandflow .elementor-widget-image img[style*='border-radius: 0'],
body.brandflow .elementor-widget-image img[style*='border-radius:0'],
body.brandflow .elementor-widget-image img[style*='border-radius: 0px'],
body.brandflow .elementor-widget-image img[style*='border-radius:0px'],
body.brandflow .elementor-widget-image .elementor-image img[style*='border-radius: 0'],
body.brandflow .elementor-widget-image .elementor-image img[style*='border-radius:0'],
body.brandflow .elementor-widget-image .elementor-image img[style*='border-radius: 0px'],
body.brandflow .elementor-widget-image .elementor-image img[style*='border-radius:0px'] {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* Utility class for removing border-radius - applies to widget and all children */
body.brandflow .no-radius,
body.brandflow .no-radius *,
body.brandflow .no-radius img,
body.brandflow .elementor-widget-image.no-radius,
body.brandflow .elementor-widget-image.no-radius *,
body.brandflow .elementor-widget-image.no-radius img,
body.brandflow .elementor-widget-image.no-radius .elementor-image,
body.brandflow .elementor-widget-image.no-radius .elementor-image *,
body.brandflow .elementor-widget-image.no-radius .elementor-image img,
body.brandflow .elementor-image.no-radius,
body.brandflow .elementor-image.no-radius *,
body.brandflow .elementor-image.no-radius img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Support Elementor border-radius control when set to 0 */
body.brandflow .elementor-widget-image[data-settings*='"border_radius":{"unit":"px","size":0}'] img,
body.brandflow .elementor-widget-image[data-settings*='"border_radius":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0"}'] img,
body.brandflow .elementor-widget-image[data-settings*='"border_radius":{"size":0}'] img,
body.brandflow .elementor-widget-image[data-settings*='"border_radius":{"top":"0"}'] img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* Target Elementor's border-radius control output - check widget wrapper */
body.brandflow .elementor-widget-image[style*='border-radius: 0'] .elementor-image img,
body.brandflow .elementor-widget-image[style*='border-radius:0'] .elementor-image img,
body.brandflow .elementor-widget-image[style*='border-radius: 0px'] .elementor-image img,
body.brandflow .elementor-widget-image[style*='border-radius:0px'] .elementor-image img {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
}

/* Accessibility - Focus States and Keyboard Navigation */
/* Ensure all interactive elements have visible focus indicators */

body.brandflow a:focus-visible,
body.brandflow a:focus {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

body.brandflow button:focus-visible,
body.brandflow button:focus,
body.brandflow .elementor-button:focus-visible,
body.brandflow .elementor-button:focus,
body.brandflow input[type='button']:focus-visible,
body.brandflow input[type='button']:focus,
body.brandflow input[type='submit']:focus-visible,
body.brandflow input[type='submit']:focus {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

body.brandflow input:focus-visible,
body.brandflow input:focus,
body.brandflow textarea:focus-visible,
body.brandflow textarea:focus,
body.brandflow select:focus-visible,
body.brandflow select:focus {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

body.brandflow .elementor-nav-menu a:focus-visible,
body.brandflow .elementor-nav-menu a:focus,
body.brandflow .elementor-item:focus-visible,
body.brandflow .elementor-item:focus {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

body.brandflow .elementor-menu-toggle:focus-visible,
body.brandflow .elementor-menu-toggle:focus {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

body.brandflow .skip-link:focus,
body.brandflow a[href='#main']:focus,
body.brandflow a[href='#content']:focus {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  padding: 1rem 1.5rem !important;
  background: #2563eb !important;
  color: white !important;
  text-decoration: none !important;
  outline: 2px solid white !important;
  outline-offset: 2px !important;
}

/* Remove outline only for mouse users, keep for keyboard users */
body.brandflow *:focus:not(:focus-visible) {
  outline: none !important;
}

@media (prefers-contrast: high) {
  body.brandflow a:focus-visible,
  body.brandflow button:focus-visible,
  body.brandflow input:focus-visible,
  body.brandflow textarea:focus-visible,
  body.brandflow select:focus-visible {
    outline: 3px solid !important;
    outline-offset: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.brandflow *,
  body.brandflow *::before,
  body.brandflow *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}