/*
 * Shared styles for the Energy Audit Tools static demo site.
 * Uses the color palette derived from the logo.
 */

:root {
    --color-background: #0F172A;
    --color-accent: #10B981;
    --color-text-primary: #CBD5E1;
    --color-text-secondary: #94A3B8;
    --color-accent-gold: #A0A080;
    --header-height: 64px; /* Define a consistent height for the header */
    --tab-nav-height: 50px; /* Define a height for the tab navigation */
    --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
}

body {
/*    background-image: url('/assets/img/gold-cropped.png');*/
/*    background-repeat: no-repeat;*/
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

/* --- Product Name Styling --- */
.product-name {
    font-family: 'Montserrat', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
    color: var(--color-accent-gold);
    font-weight: 700; /* Bold */
    letter-spacing: 0.5px; /* Add a little breathing room */
}

.product-name-trademark {
    color: inherit; /* Inherits the color of the parent text */
    font-size: 0.3em; /* Makes the ® smaller (30%) relative to preceding text */
 /*   vertical-align: top;  Aligns it with the top of the text */
    margin-left: 1px;
}


.container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto 2rem auto; /* Removed top margin */
    padding: 1rem 2rem 2rem 2rem; /* Reduced top padding */
/*    background-color: rgba(148, 163, 184, 0.05); 
    border: 1px solid rgba(16, 185, 129, 0.2); */
    border-radius: 8px;
    position: relative; /* Needed for z-index to apply correctly */
}

/* --- Header and Navigation --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--header-height);
    padding: 0.75rem 5%;
    border-bottom: 2px solid var(--color-accent-gold);
}

.sticky-below-header {
}
.logo {
    width: 65px; /* Control the container size */
}
.logo img {
    width: 100%; /* Make the image fill its container */
    height: auto; /* Maintain aspect ratio */
}

.header-left {
    display: flex;
    align-items: center;
}

.site-title {
    margin-left: 1.5rem;
}

.site-title h1 {
    margin: 0;
    padding: 0;
    border: none; /* Override the default h1 border */
    font-size: 1.35rem; /* Adjust size for the header */
}

/* --- Hamburger Menu & Mobile Navigation --- */
.hamburger-menu {
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative; /* This is crucial for z-index to work */
    z-index: 1001; /* Ensure it's above the slide-out nav */
}

.hamburger-menu span {
    width: 100%;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Animate hamburger to an 'X' when active */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0; /* Align to the right edge of the screen */
    height: 100%;
    background-color: var(--color-background);
    border-left: 1px solid var(--color-text-secondary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start (left) */
    padding: calc(var(--header-height) + 2rem) 2rem 2rem 2rem;
    transform: translateX(100%); /* Start off-screen to the right */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-nav.active {
    transform: translateX(0); /* Slide into view */
}

.mobile-nav a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.5rem;
    padding: 1rem;
    white-space: nowrap; /* Prevent links from wrapping */
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.mobile-nav a:hover {
    background-color: rgba(148, 163, 184, 0.1);
    text-decoration: none;
}

/* --- Page Content --- */
h1 {
/*    color: var(--color-accent);*/
    border-bottom: 1px solid;/* rgba(16, 185, 129, 0.3);*/
    padding-bottom: 0.5rem;
    font-weight: 500;
    font-size: 2.5rem;
}

h2 {
    font-weight: 300;
}

.product-image {
    max-width: 800px;
    width: 90%;
    height: auto;
    display: inline-block;
}

/* Specific style for the ecosystem diagram to avoid width conflicts */
.ecosystem-image {
    max-width: 100%; /* Ensure it's responsive */
    height: auto;
    display: inline-block; /* Behaves well with hotspots */
}

/* --- Image Gallery Navigation --- */
.image-gallery-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.gallery-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.gallery-dot:hover {
    background-color: var(--color-text-primary);
    transform: scale(1.1);
}

.gallery-dot.active {
    background-color: var(--color-accent-gold);
    transform: scale(1.2);
}

/* --- Image Gallery Arrows --- */
.image-gallery-main-container {
    position: relative; /* This is crucial for positioning the arrows */
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(160, 160, 128, 0.2);
    color: var(--color-background);
    border: 1px solid var(--color-accent-gold);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gallery-arrow.prev { left: 10px; }
.gallery-arrow.next { right: 10px; }

.gallery-arrow:hover {
    background-color: rgba(203, 213, 225, 0.2);
    border-color: var(--color-accent-gold);
}

p {
    margin-bottom: 1rem;
}

a {
/*    color: var(--color-accent);*/
    text-decoration: none;
}

a:hover {
/*    color: #15d195; /* Lighter emerald on hover */*/
    text-decoration: underline;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 2rem 0;    
    margin: 2rem 5% 0 5%;
    border-top: 1px solid var(--color-text-secondary);
}

.footer-nav {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-nav a {
    color: var(--color-text-secondary);
    font-weight: bold;
}

.copyright {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* --- Breadcrumb Navigation --- */
.breadcrumb-nav {
    list-style: none;
    padding: 0;
    margin: 0; /* Removed all margins */
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
}

.breadcrumb-nav li + li::before {
    content: '/';
    margin: 0 0.75rem;
    color: var(--color-text-secondary);
}

.breadcrumb-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb-nav .active {
    font-weight: bold;
    color: var(--color-text-primary);
}

/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    .site-title h1 {
        /* Reduce font size on small screens to prevent the title from wrapping */
        font-size: 1.15rem;
    }

    h2 {
        /* Reduce h2 size on mobile for better readability */
        font-size: 1.3rem;
    }
}

/* --- Tab Component Styles --- */
.tab-container {
    width: 100%;
    margin-top: 2rem;
}

.tab-nav {
    display: flex;
    border-bottom: 1px solid var(--color-text-secondary);
    flex-wrap: wrap; /* Allow tabs to wrap on small screens */
    justify-content: center; /* Center the tabs horizontally */
    position: -webkit-sticky; /* For Safari compatibility */
    position: sticky; 
    top: 0; /* Stick to the very top of the viewport */
    background-color: var(--color-background);
    z-index: 10;
    gap: 0.25rem; /* Add a small gap between tabs */
}

.tab-button {
    padding: 0 20px; /* Horizontal padding */
    cursor: pointer;
    background-color: rgba(148, 163, 184, 0.1); /* Slightly different bg for inactive tabs */
    border: 1px solid var(--color-text-secondary);
    border-bottom: none; /* The bottom border is handled by the nav container */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    font-weight: bold;
    transition: color 0.3s ease, background-color 0.3s ease;
    height: var(--tab-nav-height); /* Enforce consistent height */
    line-height: var(--tab-nav-height); /* Vertically center the text */
    position: relative;
    top: 1px; /* Nudge the tabs down to sit on the border */
}

.tab-button:hover {
    background-color: rgba(148, 163, 184, 0.2);
    color: var(--color-text-primary);
}

.tab-button.active {
    color: var(--color-accent-gold);
    background-color: var(--color-background); /* Match the main background */
    border-color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-background); /* Hide the bottom border line */
}

.tab-content {
    padding: 2rem 0;
    /* Hide all tab content by default */
    display: none;
}

.tab-content.active {
    /* Show the active tab's content */
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Spec Table Styles --- */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background-color: #fff;
    color: #000; /* Use pure black text for high contrast */
}

.spec-table th, .spec-table td {
    border: 1px solid #000; /* Use black borders for clear delineation */
    padding: 12px;
    text-align: left;
}

.spec-table th {
    background-color: #CCCCCC; /* Use a 20% grey for the header row */
    font-weight: bold;
    color: #000;
    font-size: 1.1rem;
    /* Make the category headers sticky */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: var(--tab-nav-height); /* Stick below the main tab nav */
    z-index: 1; /* Ensure it sticks above other table content */
    text-align: left; /* Align header text to the left */
    padding-left: 12px;
}

.spec-table .spec-feature {
    font-weight: bold;
    width: 30%; /* Keep the feature column a consistent width */
}

.spec-table a {
    /* Use the site's primary dark color for high contrast and a cohesive look */
    color: var(--color-background);
    text-decoration: underline; /* Underline by default for clear identification */
    transition: color 0.2s ease;
}

.spec-table a:hover {
    color: var(--color-accent-gold); /* Change to accent color on hover */
    text-decoration: none; /* Remove underline on hover for a clean effect */
}

/* --- Product Intro Section --- */
.product-intro-section {
    position: relative; /* This will contain the sticky purchase-box */
}

/* --- Product Purchase Section --- */
.product-header-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: flex-start;
    z-index: 1; /* Ensure this content scrolls behind the sticky tabs */
}

@media (max-width: 768px) {
    .product-header-grid {
        /* Switch to a single column layout on smaller screens */
        grid-template-columns: 1fr;
    }
    .purchase-box {
        position: static; /* Remove stickiness on mobile where it's not needed */
    }
    .tab-nav {
        /* Stack tabs vertically on mobile for a cleaner look */
        flex-direction: column;
        align-items: stretch; /* Make tabs fill the width */
    }

    /* Adjust spec table for better readability on small screens */
    .spec-table {
        font-size: 0.9rem;
    }
    .spec-table th, .spec-table td {
        /* Reduce padding to give more space for content */
        padding: 8px;
    }
}

/* --- ROI Table Styling --- */
.roi-table {
    width: 100%;
    border-collapse: collapse;
}

.roi-table td {
    border: none;
    padding: 0 0 1.5rem 0;
    vertical-align: top;
}

.roi-table .roi-title-cell {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--color-text-primary);
    padding-right: 1rem;
}

.roi-table .roi-description-cell {
    color: var(--color-text-secondary);
}

.purchase-box {
    border: 1px solid; /*rgba(148, 163, 184, 0.2);*/
    border-radius: 8px;
    padding: 1.5rem;
    background-color: rgba(160, 160, 128, 0.1); /* Light gold accent background */
}

.purchase-box .price {
    font-size: 2rem;
    font-weight: bold;
/*    color: var(--color-text-primary);*/
    margin-bottom: 0.5rem;
}

.purchase-box .reviews {
/*    color: var(--color-text-secondary);*/
    margin-bottom: 1.5rem;
}

.btn-add-to-cart {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-background);
    background-color: var(--color-accent-gold);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-add-to-cart:hover {
/*    background-color: #15d195;*/
}

.financing-option {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.financing-option a {
    color: var(--color-text-secondary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.financing-option a:hover {
    color: var(--color-text-primary);
}

.purchase-info {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.purchase-info p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

.purchase-info strong {
    color: var(--color-text-primary);
}

.shipping-estimator {
    display: flex;
    gap: 0.5rem;
}

.shipping-estimator input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid var(--color-text-secondary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    border-radius: 4px;
}

/* --- Trusted By Section --- */
.trusted-by-section {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    margin: 2rem 0;
}

.trusted-by-section h4 {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: normal;
}

.trusted-by-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.trusted-by-logos img {
    max-height: 30px;
/*    filter: grayscale(100%) brightness(150%);
    opacity: 0.7;*/
}

/* --- Testimonials Section --- */
.testimonials-section {
    padding: 2rem 0;
    margin-top: 2rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.testimonial-card {
    background-color: rgba(148, 163, 184, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card blockquote {
    margin: 0;
    font-style: italic;
    color: var(--color-text-primary);
}

.testimonial-card footer {
    color: var(--color-accent-gold);
    font-weight: bold;
}

.testimonial-author {
    display: block; /* Creates the line break */
}

.testimonial-title {
    display: block;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--color-text-secondary); /* Use a more subtle color for the title */
}

/* --- SVG Icon Styles --- */
.aura-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 12px;
  vertical-align: middle;
}

/* --- Icon List Styling --- */
/* Target any list that contains an icon to remove default styling */
.tab-content ul:has(.aura-icon) {
    list-style: none;
    padding-left: 0;
}

/* Style the list items themselves for proper alignment */
.tab-content ul:has(.aura-icon) li {
    display: flex;
    align-items: flex-start; /* Aligns icon with the top of the text */
}

/* --- Popup Trigger (?) Styling --- */
a[data-popup-content-id] {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: var(--color-background);
    border: 1px solid var(--color-text-secondary);
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;

    /* Adjust size to better match adjacent text */
    font-size: 0.8em;       /* Makes the '?' character smaller */
    width: 1.4em;           /* Sets the circle width relative to the new font size */
    height: 1.4em;          /* Sets the circle height */
    line-height: 1.4em;     /* Vertically centers the '?' inside the circle */

    /* Add a little space to its left */
    margin-left: 0.4rem;

    /* Align it nicely with the text line */
    vertical-align: middle;
    position: relative;
    top: -0.1em; /* Fine-tune vertical position */
}

/* --- Overview Tab Columns --- */
.overview-columns {
    display: block; /* Default for mobile */
}

@media (min-width: 769px) {
    .overview-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
}

@media (max-width: 768px) {
    /* Responsive adjustments for the ROI table */
    .roi-table .roi-title-cell,
    .roi-table .roi-description-cell {
        display: block;
        width: 100%;
        padding-right: 0;
    }
    .roi-table .roi-title-cell {
        padding-bottom: 0.25rem; /* Add a little space between title and description on mobile */
    }
}

/* --- Printable Image Gallery Styles --- */
.printable-gallery {
    display: none; /* Hidden by default */
}
.printable-gallery-image {
    max-width: 100%;
    height: auto;
}
/* --- Print-Specific Styles --- */
@media print {
    body {
        background-color: #fff;
        color: #000;
    }

    header, .purchase-box, .tab-nav, .trusted-by-section, .testimonials-section, footer, .breadcrumb-nav, .image-gallery-nav, .gallery-arrow {
        /* Hide elements that are not useful on a printed page */
        display: none;
    }

    .container, .product-header-grid {
        /* Reset layout for printing */
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: none;
    }

    /* Hide the main interactive image and show the printable gallery */
    #main-product-image { display: none; }
    .printable-gallery {
        display: block;
    }

    .tab-content {
        /* IMPORTANT: Show all tab content sections */
        display: block !important;
        animation: none !important; /* Disable animations */
        padding: 1rem 0;
        /* Ensure each section starts on a new page */
        page-break-before: always;
    }

    .spec-table th {
        /* Disable sticky headers for printing */
        position: static;
    }

    /* --- Print styles for the purchase box --- */
    .purchase-box {
        display: block; /* Override the general 'display: none' for this element */
        border: none;
        padding: 0;
    }
    .purchase-box > *:not(.price) {
        display: none; /* Hide all children of the purchase box except the price */
    }
    .purchase-box .price {
        font-size: 2.5rem; /* Make the price larger and bolder for print */
        font-weight: bold;
        color: #000;
    }

    /* Ensure ROI table text is black for printing */
    .roi-table .roi-title-cell,
    .roi-table .roi-description-cell {
        color: #000;
    }

    /* Hide interactive hotspots when printing */
    .hotspot {
        display: none;
    }
}