/* 
 * Golden Bear Solar Custom Theme Colors
 * California Golden State Theme
 */

/* Primary Golden Colors */
:root {
    /* Golden/Amber as Primary */
    --primary: #e6a817;
    --primary-100: #d19610;
    --primary-200: #c28b0e;
    --primary-300: #b3800d;
    --primary--100: #eab533;
    --primary--200: #eebe4f;
    --primary--300: #f1c76b;
    --primary-rgba-0: rgba(230, 168, 23, 0);
    --primary-rgba-10: rgba(230, 168, 23, 0.1);
    --primary-rgba-20: rgba(230, 168, 23, 0.2);
    --primary-rgba-30: rgba(230, 168, 23, 0.3);
    --primary-rgba-40: rgba(230, 168, 23, 0.4);
    --primary-rgba-50: rgba(230, 168, 23, 0.5);
    --primary-rgba-60: rgba(230, 168, 23, 0.6);
    --primary-rgba-70: rgba(230, 168, 23, 0.7);
    --primary-rgba-80: rgba(230, 168, 23, 0.8);
    --primary-rgba-90: rgba(230, 168, 23, 0.9);

    /* Medium Brown as Secondary */
    --secondary: #8C5E28;
    --secondary-100: #7a5123;
    --secondary-200: #684520;
    --secondary-300: #573a1b;
    --secondary--100: #9e6c2f;
    --secondary--200: #af7936;
    --secondary--300: #c0873d;
    --secondary-rgba-0: rgba(140, 94, 40, 0);
    --secondary-rgba-10: rgba(140, 94, 40, 0.1);
    --secondary-rgba-20: rgba(140, 94, 40, 0.2);
    --secondary-rgba-30: rgba(140, 94, 40, 0.3);
    --secondary-rgba-40: rgba(140, 94, 40, 0.4);
    --secondary-rgba-50: rgba(140, 94, 40, 0.5);
    --secondary-rgba-60: rgba(140, 94, 40, 0.6);
    --secondary-rgba-70: rgba(140, 94, 40, 0.7);
    --secondary-rgba-80: rgba(140, 94, 40, 0.8);
    --secondary-rgba-90: rgba(140, 94, 40, 0.9);

    /* Dark Brown as Tertiary */
    --tertiary: #422917;
    --tertiary-100: #372214;
    --tertiary-200: #2d1c11;
    --tertiary-300: #23160e;
    --tertiary--100: #4d301a;
    --tertiary--200: #58381e;
    --tertiary--300: #633f21;
    --tertiary-rgba-0: rgba(66, 41, 23, 0);
    --tertiary-rgba-10: rgba(66, 41, 23, 0.1);
    --tertiary-rgba-20: rgba(66, 41, 23, 0.2);
    --tertiary-rgba-30: rgba(66, 41, 23, 0.3);
    --tertiary-rgba-40: rgba(66, 41, 23, 0.4);
    --tertiary-rgba-50: rgba(66, 41, 23, 0.5);
    --tertiary-rgba-60: rgba(66, 41, 23, 0.6);
    --tertiary-rgba-70: rgba(66, 41, 23, 0.7);
    --tertiary-rgba-80: rgba(66, 41, 23, 0.8);
    --tertiary-rgba-90: rgba(66, 41, 23, 0.9);

    /* Light Cream as Quaternary */
    --quaternary: #f8f0e3;
    --quaternary-100: #f2e4cf;
    --quaternary-200: #edd9bc;
    --quaternary-300: #e8cda8;
    --quaternary--100: #fdf8f0;
    --quaternary--200: #ffffff;
    --quaternary--300: #ffffff;
    --quaternary-rgba-0: rgba(248, 240, 227, 0);
    --quaternary-rgba-10: rgba(248, 240, 227, 0.1);
    --quaternary-rgba-20: rgba(248, 240, 227, 0.2);
    --quaternary-rgba-30: rgba(248, 240, 227, 0.3);
    --quaternary-rgba-40: rgba(248, 240, 227, 0.4);
    --quaternary-rgba-50: rgba(248, 240, 227, 0.5);
    --quaternary-rgba-60: rgba(248, 240, 227, 0.6);
    --quaternary-rgba-70: rgba(248, 240, 227, 0.7);
    --quaternary-rgba-80: rgba(248, 240, 227, 0.8);
    --quaternary-rgba-90: rgba(248, 240, 227, 0.9);

    /* Fire accent color for emphasis */
    --fire-accent: #d14a10;
}

/* Custom accent colors for the theme */
.custom-text-color-1 {
    color: var(--fire-accent); /* Red-orange fire accent */
}

.custom-text-color-2 {
    color: var(--primary); /* Golden rating stars */
}

.bg-light {
    background-color: #fdfbf5;
}

/* Gradients */
.bg-gradient-light-primary-rgba-20 {
    background: linear-gradient(135deg, rgba(230, 168, 23, 0.2) 0%, rgba(230, 168, 23, 0.3) 100%);
}

.bg-gradient-tertiary-dark {
    background: linear-gradient(135deg, var(--tertiary) 0%, var(--tertiary-100) 100%);
}

.custom-bg-gradient-1 {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
}

/* California sunset gradient */
.bg-gradient-california-sunset {
    background: linear-gradient(135deg, var(--primary) 0%, var(--fire-accent) 100%);
}

/* Button hover effects */
.btn-primary:hover {
    background-color: var(--primary--100);
    border-color: var(--primary--100);
}

.btn-secondary:hover {
    background-color: var(--secondary--100);
    border-color: var(--secondary--100);
}

/* Button styles */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-tertiary {
    background-color: var(--tertiary);
    border-color: var(--tertiary);
    color: var(--light);
}

.btn-tertiary:hover {
    background-color: var(--tertiary--100);
    border-color: var(--tertiary--100);
    color: var(--light);
}

.btn-quaternary {
    background-color: var(--quaternary);
    border-color: var(--quaternary);
    color: var(--tertiary);
}

.btn-quaternary:hover {
    background-color: var(--quaternary-100);
    border-color: var(--quaternary-100);
    color: var(--tertiary);
}

/* Golden outline button */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--light);
}

/* Specific element overrides */
.bg-primary {
    background-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.bg-tertiary {
    background-color: var(--tertiary) !important;
}

.text-tertiary {
    color: var(--tertiary) !important;
}

.bg-quaternary {
    background-color: var(--quaternary) !important;
}

.text-quaternary {
    color: var(--quaternary) !important;
}

.bg-primary-rgba-10 {
    background-color: var(--primary-rgba-10) !important;
}

/* Additional background opacity variations */
.bg-primary-rgba-20 {
    background-color: var(--primary-rgba-20) !important;
}

.bg-secondary-rgba-10 {
    background-color: var(--secondary-rgba-10) !important;
}

.bg-secondary-rgba-20 {
    background-color: var(--secondary-rgba-20) !important;
}

.bg-tertiary-rgba-10 {
    background-color: var(--tertiary-rgba-10) !important;
}

.bg-tertiary-rgba-20 {
    background-color: var(--tertiary-rgba-20) !important;
}

/* Link colors */
a.link-primary {
    color: var(--primary);
}

a.link-primary:hover {
    color: var(--primary--100);
}

a.link-secondary {
    color: var(--secondary);
}

a.link-secondary:hover {
    color: var(--secondary--100);
}

/* SVG Fill Colors */
.svg-fill-color-primary {
    fill: var(--primary) !important;
}

.svg-fill-color-secondary {
    fill: var(--secondary) !important;
}

.svg-fill-color-tertiary {
    fill: var(--tertiary) !important;
}

.svg-fill-color-light {
    fill: var(--light) !important;
}

.svg-fill-color-fire {
    fill: var(--fire-accent) !important;
}

/* Mark backgrounds */
.mark-color.bg-color-before-primary-rgba-30::before {
    background-color: var(--primary-rgba-30) !important;
}

/* Badge colors */
.badge-primary {
    background-color: var(--primary);
    color: var(--light);
}

.badge-secondary {
    background-color: var(--secondary);
    color: var(--light);
}

.badge-tertiary {
    background-color: var(--tertiary);
    color: var(--light);
}

/* Testimonial rating stars color */
.testimonial-style-4 .fas.fa-star {
    color: var(--primary) !important;
}

/* Navigation hover effects */
#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a:hover {
    color: var(--primary) !important;
}

/* Featured icons */
.featured-icon.featured-icon-style-2 {
    background-color: var(--primary) !important;
}

/* Progress bars */
.progress-bar-primary {
    background-color: var(--primary);
}

.progress-bar-secondary {
    background-color: var(--secondary);
}

/* Borders */
.border-primary {
    border-color: var(--primary) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

.border-tertiary {
    border-color: var(--tertiary) !important;
}

/* Header background when scrolling */
#header .header-body.bg-color-primary {
    background-color: var(--primary) !important;
}

/* Focus effects for form elements */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-rgba-20);
}

/* Custom gradients for Who We Are section */
#intro .p-absolute[style*="background: linear-gradient"] {
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%) !important;
}

#intro .p-absolute[style*="bottom: 0"] {
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%) !important;
}

/* Adjust the dark overlay to not interfere with the white gradients */
#intro .p-absolute.bg-dark.opacity-6 {
    opacity: 0.5 !important;
}

/* Ensure the video starts slightly below the top gradient */
#intro mux-player {
    object-position: center 10% !important;
}

mux-player {
    height: 100% !important;
    max-height: none !important;
    display: block;
}

/* Prevent black bars on mobile hero video */
@media (max-width: 767px) {
    .hero-video-wrapper mux-player {
        min-height: 100%;
        min-width: 100%;
    }
}

/* Universal Sans Font Integration - Tesla Style */
@font-face {
  font-family: 'Universal Sans';
  src: url('https://universalsans.com/font/UniversalSans-450.woff2') format('woff2');
  font-style: normal;
  font-weight: 450;
}

@font-face {
  font-family: 'Universal Sans';
  src: url('https://universalsans.com/font/UniversalSans-450Italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 450;
}

/* Tesla-inspired Typography */
body {
  font-family: 'Universal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 450;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Universal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.btn {
  font-family: 'Universal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 450;
  letter-spacing: 0.01em;
}

/* Tesla-inspired clean navbar */
#header .header-nav-main nav > ul > li > a {
  font-family: 'Universal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 450;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Remove Google fonts to avoid conflicts */
#googleFonts {
  display: none;
}

/* Tesla-inspired spacing and typography refinements */
.text-light {
  font-weight: 450;
}

p {
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.btn {
  border-radius: 4px;
  text-transform: none;
  padding: 0.6rem 1.5rem;
}

/* Tesla-like section headings */
h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

/* Clean, minimal navigation */
#header .header-nav-main nav > ul > li > a {
  text-transform: none;
}

/* Testimonial section spacing fix */
.testimonial-style-4 {
  margin-top: 15px !important;
}

/* Add additional padding to first testimonial card */
.col-lg-6 > .appear-animation:first-child .card.border-radius-2 {
  margin-top: 25px;
}

/* Ensure consistent spacing between testimonial cards */
.col-lg-6 > .appear-animation:not(:first-child) .card.border-radius-2 {
  margin-top: 30px;
}

/* Add spacing to Deep Solar Experience section */
#solar-experience {
  margin-top: 60px;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
    #solar-experience {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Enhance the text readability with better spacing */
#solar-experience .text-light {
  padding: 0 20px;
}

#solar-experience h2 {
  margin-bottom: 25px;
}

#solar-experience p {
  margin-bottom: 0;
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Header logo sizing — constrain large logo images */
#header .header-logo img {
    max-height: 80px;
    width: auto;
}

/* Footer logo sizing */
footer .footer-logo,
footer a > img[alt="Golden Bear Solar"] {
    max-width: 200px;
    height: auto;
}

/* ===================== Mobile Optimizations ===================== */

/* Hero video container */
.hero-video-wrapper {
    aspect-ratio: 16/9;
}

/* Who We Are video container */
.who-we-are-video-wrapper {
    aspect-ratio: 16/9;
}

/* Solar Experience video container */
.solar-experience-video-wrapper {
    aspect-ratio: 16/9;
}

@media (max-width: 767px) {
    .hero-video-wrapper {
        aspect-ratio: 16/10;
    }

    .who-we-are-video-wrapper {
        aspect-ratio: 16/9;
    }

    .solar-experience-video-wrapper {
        aspect-ratio: 16/9;
    }

    /* Section headings: don't let them blow out on mobile */
    h2.text-9, h2.text-lg-12 {
        font-size: 1.75rem !important;
    }

    /* Header logo on mobile */
    #header .header-logo img {
        max-height: 65px;
    }

    /* Modern minimal hamburger on mobile */
    #header .header-btn-collapse-nav {
        background: transparent;
        border: none;
        color: var(--dark);
        padding: 4px;
        font-size: 1.4rem;
        box-shadow: none;
    }

    #header .header-btn-collapse-nav:hover,
    #header .header-btn-collapse-nav:focus {
        background: transparent;
        box-shadow: none;
    }

    /* Configurator: stack cards better on mobile */
    #defense-configurator h2 {
        font-size: 1.5rem !important;
    }

    /* Deep dive info cards tighter on mobile */
    #defense-configurator .card-body {
        padding: 1rem !important;
    }

    /* Owl carousel dots visible on mobile */
    .owl-carousel .owl-dots {
        text-align: center;
        margin-top: 15px;
    }

    .owl-carousel .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        display: inline-block;
    }

    .owl-carousel .owl-dots .owl-dot.active span {
        background: var(--primary);
    }
}

/* Hide newsletter section in footer (temporarily) */
.col-lg-3:has(#newsletterForm) {
    display: none !important;
}

/* Utility for making sections span full viewport width */
.section-full-viewport-width {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw; /* Optional, prevents horizontal scroll on some calculations */
}