/* ============================================
   GeneratePress Theme Compatibility - Full Width
   ============================================ */

/* Main container adjustments */
body.page {
  background-color: #fbf9fa;
}

/* Hide GeneratePress page header/nav on pages with the custom shortcode so only the custom nav appears */
body.wpbc-custom-homepage .site-header,
body.wpbc-custom-homepage .main-navigation,
body.wpbc-custom-homepage .inside-top-bar,
body.wpbc-custom-homepage .top-bar,
body.wpbc-custom-homepage #site-navigation,
body.wpbc-custom-homepage .inside-header,
body.wpbc-custom-homepage .menu-toggle,
body.wpbc-custom-homepage .page-header,
body.wpbc-custom-homepage .entry-header {
  display: none !important;
}

/* Hide the WordPress page title "Home" */
body.wpbc-custom-homepage .page-title,
body.wpbc-custom-homepage .entry-title,
body.wpbc-custom-homepage h1.entry-title,
body.wpbc-custom-homepage .post-title,
body.wpbc-custom-homepage .single-title,
body.wpbc-custom-homepage .site-main h1,
body.wpbc-custom-homepage .content-area h1,
body.wpbc-custom-homepage article h1 {
  display: none !important;
}

/* Explicitly show the custom glass-header navbar */
body.wpbc-custom-homepage header.glass-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  background: #fbf9fa !important;
  background-color: rgba(251, 249, 250, 1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 16px 0 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid #e4e2e3 !important;
  min-height: 70px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Ensure nav content is visible inside header */
body.wpbc-custom-homepage header.glass-header nav,
body.wpbc-custom-homepage header.glass-header .flex {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

body.wpbc-custom-homepage header.glass-header nav {
  overflow-x: auto !important;
}

body.wpbc-custom-homepage header.glass-header nav a {
  white-space: nowrap !important;
}

/* Add top margin to content so it doesn't hide under fixed navbar */
body.wpbc-custom-homepage .wpbc-shortcode-wrapper {
  margin-top: 110px !important;
  position: relative !important;
}

body.wpbc-custom-homepage .site-content {
  margin-top: 110px !important;
}

/* General layout and sidebar cleanup for custom shortcode pages */
body.wpbc-custom-homepage .content-area,
body.wpbc-custom-homepage .primary,
body.wpbc-custom-homepage .site-main,
body.wpbc-custom-homepage .site-content {
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.wpbc-custom-homepage .sidebar,
body.wpbc-custom-homepage .sidebar-primary,
body.wpbc-custom-homepage .primary-sidebar,
body.wpbc-custom-homepage aside.sidebar,
body.wpbc-custom-homepage .widget-area,
body.wpbc-custom-homepage .secondary,
body.wpbc-custom-homepage .secondary-sidebar,
body.wpbc-custom-homepage .right-sidebar,
body.wpbc-custom-homepage .left-sidebar,
body.wpbc-custom-homepage .inside-right-sidebar,
body.wpbc-custom-homepage .widget_area {
  display: none !important;
}

body.wpbc-custom-homepage .entry-content,
body.wpbc-custom-homepage .inside-article,
body.wpbc-custom-homepage .entry-header {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 1px !important;
  display: block !important;
}

body.wpbc-custom-homepage .site-main .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100% !important;
}

body.wpbc-custom-homepage header:not(.glass-header),
body.wpbc-custom-homepage .header,
body.wpbc-custom-homepage #header,
body.wpbc-custom-homepage .main-header {
  display: none !important;
}

body.wpbc-custom-homepage .full-width-section,
body.wpbc-custom-homepage footer.full-width-section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
}

body.page .inside-article {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.page .article-wrapper {
  max-width: 100% !important;
  padding: 0 !important;
}

body.page .site-content {
  max-width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Content area full width */
body.page .content-area,
body.page .primary,
body.page .site-main,
body.page .site-content,
body.home .content-area,
body.home .primary,
body.home .site-main,
body.home .site-content {
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide all sidebar variations */
body.page .sidebar,
body.page .sidebar-primary,
body.page .primary-sidebar,
body.page aside.sidebar,
body.page .widget-area,
body.page .secondary,
body.page .secondary-sidebar,
body.page .right-sidebar,
body.page .left-sidebar,
body.page .inside-right-sidebar,
body.page .widget_area,
body.home .sidebar,
body.home .sidebar-primary,
body.home .primary-sidebar,
body.home aside.sidebar,
body.home .widget-area,
body.home .secondary,
body.home .secondary-sidebar,
body.home .right-sidebar,
body.home .left-sidebar,
body.home .inside-right-sidebar,
body.home .widget_area {
  display: none !important;
}

/* Remove flex/grid layout that might push content left */
body.page .site-content,
body.home .site-content {
  display: block !important;
  flex: none !important;
}

/* Force full visible page content */
body.page .entry-content,
body.home .entry-content,
body.page .inside-article,
body.home .inside-article,
body.page .entry-header,
body.home .entry-header {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 1px !important;
  display: block !important;
}

/* Override theme aligned container width */
body.page .site-main .wp-block-group__inner-container,
body.home .site-main .wp-block-group__inner-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* Add visible wrapper for shortcode content */
.wpbc-shortcode-wrapper {
  display: block !important;
  background: #fff !important;
  color: #000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  body.home .wpbc-shortcode-wrapper,
  body.page-id-11 .wpbc-shortcode-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  section.full-width-section,
  footer.full-width-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Entry content full width */
body.page .entry-content,
body.home .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Page wrapper adjustments */
body.page .entry-header {
  margin: 0 !important;
  padding: 0 !important;
}

.wpbc-shortcode-wrapper {
  display: block !important;
  background: #fff !important;
  color: #000 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================
   Full-width sections that break out 
   ============================================ */
section.full-width-section,
footer.full-width-section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(50vw - 50%) !important;
  padding-right: calc(50vw - 50%) !important;
  box-sizing: border-box !important;
}

/* Thermal Performance Banner - fix overlap with trust band */
.bg-surface-container-low {
  position: relative !important;
  z-index: 10 !important;
  margin-bottom: 30px !important;
  padding-bottom: 40px !important;
}

/* Ensure glassmorphic trust band is on top and visible */
.glassmorphic-trust-band {
  position: relative !important;
  z-index: 20 !important;
  margin-top: -10px !important;
}

/* Explicit hero image support for shortcode homepage */
section.full-width-section.relative {
  position: relative !important;
}

section.full-width-section.relative .hero-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 70% center !important;
}

section.full-width-section.relative > .absolute.inset-0.z-0,
section.full-width-section.relative > .absolute.inset-0.z-0 > .absolute.inset-0.bg-black\/25 {
  position: absolute !important;
  inset: 0 !important;
}

section.full-width-section.relative > .absolute.inset-0.z-0 {
  z-index: 0 !important;
}

section.full-width-section.relative > .absolute.inset-0.z-0 > .absolute.inset-0.bg-black\/25 {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* ============================================
   Window Configurator Styles
   ============================================ */

/* Selected color/texture buttons */
.color-picker-container button.selected {
  background-color: #005B8E !important;
  color: white !important;
  border-color: #005B8E !important;
}

.color-picker-container button.selected:hover {
  background-color: #004a75 !important;
}

/* Window results styling */
.swatch-scroll div.selected {
  border-color: #4A4A4B !important;
  border-width: 2px !important;
}

.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 10;
  transition: opacity 0.3s ease;
}

/* Hide theme header on homepage to eliminate space */
body.home .site-header,
body.home header:not(.glass-header),
body.home .header,
body.home #header,
body.home .main-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Additional overrides for homepage spacing */
body.home .entry-content,
body.home .site-main,
body.home .content-area,
body.home #main,
body.home #content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.home .full-width-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================
   Color Picker Container - Enhanced Styling
   ============================================ */
.color-picker-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f3f4 0%, #efedee 100%);
  margin-bottom: 24px;
  margin-top: 20px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #00436a;
  max-width: 100%;
}

.color-picker-container h3 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #00436a;
  margin: 0 0 16px 0;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.color-picker-container label {
  display: block;
  font-family: Lato, sans-serif;
  font-weight: 500;
  color: #4a4a4b;
  font-size: 14px;
  margin-bottom: 12px;
}

.color-picker-container input[type="color"] {
  width: 60px;
  height: 60px;
  border: 2px solid #005b8e;
  cursor: pointer;
  border-radius: 2px;
  margin-left: 12px;
}

.color-picker-container input[type="color"]:hover {
  border-color: #00436a;
  box-shadow: 0 0 12px rgba(0, 67, 106, 0.2);
}

.color-picker-container #selected-color {
  margin-top: 16px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  color: #005b8e;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}