@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --color-navy: #101A24;
    --color-solarblue: #477FA3;
    --color-softsky: #C8DFEA;
    --color-freshgreen: #719B79;
    --color-warmsun: #E5B85C;
    --color-cloud: #F3F6F5;
    --color-purewhite: #FFFFFF;
    --color-darktext: #172027;
    --color-mutedtext: #65737A;
}

html {
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
    color: var(--color-darktext);
    background-color: var(--color-purewhite);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Custom Utility Classes for Tailwind */
.bg-navy { background-color: var(--color-navy); }
.bg-solarblue { background-color: var(--color-solarblue); }
.bg-softsky { background-color: var(--color-softsky); }
.bg-freshgreen { background-color: var(--color-freshgreen); }
.bg-warmsun { background-color: var(--color-warmsun); }
.bg-cloud { background-color: var(--color-cloud); }
.bg-purewhite { background-color: var(--color-purewhite); }

.text-navy { color: var(--color-navy); }
.text-solarblue { color: var(--color-solarblue); }
.text-softsky { color: var(--color-softsky); }
.text-freshgreen { color: var(--color-freshgreen); }
.text-warmsun { color: var(--color-warmsun); }
.text-cloud { color: var(--color-cloud); }
.text-purewhite { color: var(--color-purewhite); }
.text-darktext { color: var(--color-darktext); }
.text-mutedtext { color: var(--color-mutedtext); }

.border-solarblue { border-color: var(--color-solarblue); }
.border-softsky { border-color: var(--color-softsky); }
.border-navy { border-color: var(--color-navy); }

/* FAQ Accordion Transitions */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.faq-item.active .faq-content {
    max-height: 500px; /* Arbitrary large height */
    padding-bottom: 1.5rem;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
.faq-icon {
    transition: transform 0.3s ease;
}

/* Before/After Slider specific styles */
input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 40px;
    height: 40px;
    -webkit-appearance: none;
}

/* Interactive Buildup Cards */
.buildup-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.buildup-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(16, 26, 36, 0.1);
}
.buildup-detail {
    display: none;
    animation: fadeIn 0.3s ease-in;
}
.buildup-card.active .buildup-detail {
    display: block;
}
.buildup-card.active .buildup-intro {
    display: none;
}

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

/* Base button styles to ensure visibility */
.btn-primary {
    background-color: var(--color-solarblue);
    color: var(--color-purewhite);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
    display: inline-block;
    text-align: center;
}
.btn-primary:hover {
    background-color: var(--color-navy);
}

.btn-secondary {
    background-color: var(--color-purewhite);
    color: var(--color-solarblue);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: 2px solid var(--color-solarblue);
    transition: all 0.2s ease;
    display: inline-block;
    text-align: center;
}
.btn-secondary:hover {
    background-color: var(--color-softsky);
    color: var(--color-navy);
}

/* Ensure focus states are visible for accessibility */
*:focus-visible {
    outline: 3px solid var(--color-warmsun);
    outline-offset: 2px;
}

/* Mobile menu transition */
#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}
#mobile-menu.open {
    transform: translateX(0);
}

/* Cookie Popup */
#cookie-popup {
    z-index: 9999;
}