/* pull body text up under the hero image */
.article__content.reading-width.rte.article-content.mt-12.mx-auto {
  margin-top: -240px; /* adjust as needed */
}
@media (max-width: 1380px) {
  .article__content.reading-width.rte.article-content.mt-12.mx-auto {
  margin-top: 0px;
}}
    
/* Ensure the table spans the full width of the blog */
.table-container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Center the table */
    overflow-x: auto; /* Allow horizontal scroll on small screens */
}

/* Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff; /* Ensures a clean, readable background */
    border-radius: 12px; /* Rounded corners */
    overflow: hidden; /* Ensures rounded corners apply */
    border: 1px solid #ddd; /* Soft border for structure */
}

/* 🔹 First Row (Header Row) & First Column Styling */
thead th,
tbody tr:first-child td,  /* <-- Ensures first row gets same styling */
tbody td:first-child {
    background-color: #f2f2f2 !important; /* Light gray for a subtle distinction */
    font-weight: 600; /* Slightly bolder for emphasis */
    color: #444; /* Darker text for readability */
}

/* Table Header Styling */
thead th {
    text-transform: uppercase; /* Improves readability */
    padding: 14px; /* Balanced spacing */
    border-bottom: 2px solid #ccc; /* Softer separation */
}

/* Table Cells */
th, td {
    border: 1px solid #ddd; /* Soft, structured borders */
    padding: 12px;
    text-align: left;
    white-space: normal; /* Prevents text from being cut off */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Rounded Corners for Outer Edges */
table tr:first-child th:first-child { border-top-left-radius: 12px; }
table tr:first-child th:last-child { border-top-right-radius: 12px; }
table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
table tr:last-child td:last-child { border-bottom-right-radius: 12px; }

/* Column Width Adjustments */
th:nth-child(1), td:nth-child(1) { width: 18%; } /* Flooring Type */
th:nth-child(2), td:nth-child(2) { width: 10%; } /* Price Range */
th:nth-child(3), td:nth-child(3) { width: 12%; } /* Moisture Resistance */
th:nth-child(4), td:nth-child(4) { width: 10%; } /* Durability */
th:nth-child(5), td:nth-child(5) { width: 18%; } /* Installation Method */
th:nth-child(6), td:nth-child(6) { width: 12%; } /* Installation Required */
th:nth-child(7), td:nth-child(7) { width: 8%; } /* Comfort */
th:nth-child(8), td:nth-child(8) { width: 6%; } /* Insulation */
th:nth-child(9), td:nth-child(9) { width: 6%; } /* Maintenance */

/* Alternating Row Colors */
tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Soft gray for readability */
}

/* Hover Effect */
tbody tr:hover {
    background-color: #f1f1f1; /* Slight highlight on hover */
}

/* Responsive Adjustments for Mobile */
@media screen and (max-width: 768px) {
    table {
        font-size: 14px;
        table-layout: fixed; /* Keeps columns consistent */
    }

    th, td {
        width: auto; /* Allow resizing on smaller screens */
    }
}


.accordion-item {
            border-bottom: 1px solid #ddd;
        }
        
.accordion-header {
            cursor: pointer;
            padding: 15px;
            background: #f9f9f9;
            margin: 0;
            font-size: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
       
.accordion-header:hover {
            background: #f1f1f1;
        }
       
.accordion-header i {
            transition: transform 0.3s ease;
        }
        
.accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 15px;
            background: #fff;
        }
        
.accordion-content p {
            margin: 15px 0;
        }
        
.accordion-item.active .accordion-content {
            max-height: 200px; /* Adjust based on content length */
        }
        
.accordion-item.active .accordion-header i {
            transform: rotate(180deg);
        }



    .container {
        position: relative; /* Keeps it in normal document flow */
        margin-top: 400; /* Push it below .section-nav */
        
    }  
      .article {
    margin-top: 0px !important; /* Ensure proper positioning */
  }
    }

@media (min-width: 769px) {
  .md\:blog-mb-6 {
    margin-bottom: calc(6 * var(--space-unit));
  }
}
@media (min-width: 1024px) {
  .lg\:blog-text-lg {
    font-size: 1.8rem;
  }
  .lg\:blog-mb-6 {
    margin-bottom: calc(6 * var(--space-unit));
  }
  .lg\:blog-gap-y-16 {
    row-gap: calc(16 * var(--space-unit));
  }
  .lg\:blog-mb-16 {
    margin-bottom: calc(16 * var(--space-unit));
  }
  .lg\:blog-mt-16 {
    margin-top: calc(16 * var(--space-unit));
  }
}
@media (min-width: 1280px) {
  .featured-card .card.color-scheme .card__info {
    padding: calc(12 * var(--space-unit));
  }
}

.Avada-Tool__CustomHtml {
  padding-bottom: 48px;
}

.article_content {
  grid-column: 2 / 3; /* Forces it into the second column */
}

.key-takeaways {
  position: relative;
  background: #f8f9fa; /* Light gray background */
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ddd; /* Light border for contrast */
  padding-bottom: 40px;
  max-width: 600px;
  margin-left: 40px;
}

.key-takeaways::before,
.key-takeaways::after {
  content: "";
  position: absolute;
  width: 100px; /* Adjust length */
  height: 40px; /* Adjust length */
  border: 1px solid #333; /* Border color */
}



.key-takeaways h3 {
 margin-top: 0 !important; /* Force remove margin */
  
  font-size: 3.1rem; /* Adjust as needed */
  font-weight: 600; /* Optional: Make it slightly bold */
  color: #333; /* Match the theme */
}


.key-takeaways::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.key-takeaways::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}


.shopify-section {
  margin-top: 0;
}



@media (max-width: 1330px) {
   .article p:first-of-type {
  position: static;
      
  }
}

@media (max-width: 1230px) {
.article__content reading-width rte article-content mt-12 mx-auto{
  margin-top: 0px;
}
}



.section-nav {
  position: sticky;
  top: 20rem; /* Starts far down */
  max-width: 240px;
  width: 100%;
  z-index: -0; /* Keeps TOC above other elements */
  border-right: 2px solid #efefef;
  margin-top: 0px;
  margin-left: 0px;

}



@media (max-width: 1380px) {
  .section-nav {
     /* Allows normal document flow */
    width: 100%;
    max-width: none;
    border-right: none;
    border-bottom: 2px solid #efefef;
    text-align: center;
    background: white;
    top: 0rem;
    margin-top: 0rem; /* Adds spacing below the H1 */
    position: relative;
    padding: 0px;
  }
}

h2 {
  scroll-margin-top: 165px; /* Adjust this to match your navbar height */
}



.section-nav h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.section-nav ul {
  padding-left: 0;
  list-style: none;
}
.section-nav li {
  margin-bottom: 0.5rem;
}
.section-nav a {
  text-decoration: none;
  color: #666; /* Slightly darker gray */
  transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.section-nav a:hover {
  color: #000; /* Black */
  text-decoration: underline;
}



/* General Heading Styles */
h1, h2, h3, h4, h5, h6 {

    line-height: 1.3; /* Maintain readability */
    margin-bottom: 0.6em; /* Ensure proper spacing */

}

/* Adjusted Font Sizes to Fit a Larger H1 */
h1 { font-size: 4rem; }  /* Matches existing large H1 */
h2 { font-size: 2.8rem; } /* Strong contrast but not tiny */
h3 { font-size: 2rem; }   /* Clear hierarchy from H2 */
h4 { font-size: 1.5rem; } /* Noticeably smaller than H3 */
h5 { font-size: 1.2rem; } /* Standard subheading */
h6 { font-size: 1rem; }   /* Smallest heading */

/* Mobile Adjustments for Better Readability */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }  /* Slightly smaller for mobile */
    h2 { font-size: 2.2rem; } /* Still strong */
    h3 { font-size: 1.6rem; } /* Readable on small screens */
    h4 { font-size: 1.3rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 0.9rem; }
}

/* Spacing & Accessibility Enhancements */
h1 { letter-spacing: -0.02em; margin-top: 1.4em; } /* Keep H1 visually distinct */
h2 { letter-spacing: -0.01em; margin-top: 1.2em; }
h3, h4 { letter-spacing: normal; margin-top: 1em; }
h5, h6 { margin-top: 0.8em; }

h1, h2, h3 { text-wrap: balance; } /* Prevents weird line breaks */