/* Tahoe Sound Labs — Component Styles */

/* ═══════════════════════════════════════════════════════
   Navigation
   ═══════════════════════════════════════════════════════ */

.navbar-custom {
    background-color: var(--tsl-bg-light);
    border-bottom: 1px solid var(--tsl-border);
    border-top: 1px solid var(--tsl-gold-subtle);
    padding: 0.75rem 0;
}

.navbar-custom .navbar-brand {
    color: var(--tsl-white);
    font-weight: 500;
    font-size: 1.25rem;
}

.navbar-custom .navbar-nav .nav-link {
    color: var(--tsl-gray-light);
    font-weight: 400;
    padding: 0.5rem 1rem;
    transition: color 0.2s ease;
}

.navbar-custom .navbar-nav .nav-link:hover {
    color: var(--tsl-gold-light);
}

/* ═══════════════════════════════════════════════════════
   Hero Section — full-width background with marble
   ═══════════════════════════════════════════════════════ */

.hero {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 168, 83, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(109, 213, 251, 0.03) 0%, transparent 50%),
        linear-gradient(180deg, var(--tsl-bg) 0%, var(--tsl-bg-light) 100%);
    position: relative;
    overflow: hidden;
}

.hero-bg-placeholder {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 50px,
            rgba(212, 168, 83, 0.08) 50px,
            rgba(212, 168, 83, 0.08) 100px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 80px,
            rgba(109, 213, 251, 0.05) 80px,
            rgba(109, 213, 251, 0.05) 160px
        );
}

/* ═══════════════════════════════════════════════════════
   Buttons — gold luxury primary, cyan/blue outline secondary
   ═══════════════════════════════════════════════════════ */

.btn-primary-custom {
    background: linear-gradient(135deg, var(--tsl-gold) 0%, var(--tsl-gold-dark) 100%);
    color: var(--tsl-bg);
    border: none;
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.2);
}

.btn-primary-custom:hover {
    background: linear-gradient(135deg, var(--tsl-gold-light) 0%, var(--tsl-gold) 100%);
    color: var(--tsl-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(212, 168, 83, 0.3);
}

.btn-outline-custom {
    background-color: transparent;
    color: var(--tsl-blue-main);
    border: 1px solid var(--tsl-blue-main);
    font-weight: 500;
    padding: 0.625rem 1.5rem;
    transition: all 0.2s ease;
}

.btn-outline-custom:hover {
    background-color: var(--tsl-blue-main);
    color: #fff;
    border-color: var(--tsl-blue-main);
}

/* Light mode outline button text on light bg */
[data-theme="light"] .btn-outline-custom {
    color: var(--tsl-blue-main);
}

[data-theme="light"] .btn-outline-custom:hover {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   Section Spacing — marble backgrounds
   ═══════════════════════════════════════════════════════ */

.section-light {
    background:
        radial-gradient(ellipse at 50% 0%, var(--tsl-gold-glow) 0%, transparent 60%),
        var(--tsl-bg-light);
    border-top: 1px solid var(--tsl-border);
    border-bottom: 1px solid var(--tsl-border);
    border-image: linear-gradient(90deg, transparent, var(--tsl-gold-subtle), transparent) 1;
}

.section-dark {
    background:
        radial-gradient(ellipse at 30% 50%, rgba(109, 213, 251, 0.03) 0%, transparent 50%),
        var(--tsl-bg);
    border-top: 1px solid var(--tsl-border);
    border-bottom: 1px solid var(--tsl-border);
    border-image: linear-gradient(90deg, transparent, var(--tsl-gold-subtle), transparent) 1;
}

/* ═══════════════════════════════════════════════════════
   Brand Pillars
   ═══════════════════════════════════════════════════════ */

.pillar-card {
    background-color: var(--tsl-bg-card);
    border: 1px solid var(--tsl-border);
    padding: 2rem 1.5rem;
    transition: all 0.3s ease;
    border-image: linear-gradient(180deg, var(--tsl-gold-subtle), var(--tsl-border)) 1;
}

.pillar-card:hover {
    border-color: var(--tsl-gold);
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.1);
}

.pillar-title {
    color: var(--tsl-gold);
    font-weight: 500;
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════
   Testimonials
   ═══════════════════════════════════════════════════════ */

.testimonial-card {
    background-color: var(--tsl-bg-card);
    border: 1px solid var(--tsl-border);
    padding: 2rem;
    position: relative;
    border-image: linear-gradient(180deg, var(--tsl-gold-subtle), var(--tsl-border)) 1;
}

.testimonial-text {
    color: var(--tsl-gray-light);
    font-style: italic;
}

.testimonial-name {
    color: var(--tsl-gold);
    font-weight: 500;
}

.testimonial-source {
    color: var(--tsl-gray);
}

/* ═══════════════════════════════════════════════════════
   Contact Section — deep marble with gold accents
   ═══════════════════════════════════════════════════════ */

.contact-section {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(212, 168, 83, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, var(--tsl-bg) 0%, var(--tsl-bg-light) 100%);
}

.contact-section h2 {
    color: var(--tsl-white);
}

.contact-section p {
    color: var(--tsl-gray-light);
}

/* ═══════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════ */

.footer-custom {
    background-color: var(--tsl-bg-light);
    border-top: 1px solid var(--tsl-border);
    border-image: linear-gradient(90deg, transparent, var(--tsl-gold-subtle), transparent) 1;
}

.footer-custom p {
    color: var(--tsl-gray);
}

/* ═══════════════════════════════════════════════════════
   Mobile adjustments
   ═══════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {

    /* Footer logo centered on mobile (override Bootstrap text-start) */
    .footer-custom .footer-logo {
        text-align: center !important;
    }

    /* Top logo smaller on mobile */
    .navbar-brand img {
        height: 55px !important;
    }

    /* Prevent hamburger nav items from wrapping */
    #mainNav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════════
   Placeholder image zones — luxury styling
   Each zone has its own color, size, and subtle gold veins.
   Uses CSS gradients for marble/stone texture effect.
   ═══════════════════════════════════════════════════════ */

/* Hero placeholder — wide background with gold veins */
.hero-bg-placeholder {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 50px,
            rgba(212, 168, 83, 0.03) 50px,
            rgba(212, 168, 83, 0.03) 100px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 80px,
            rgba(109, 213, 251, 0.02) 80px,
            rgba(109, 213, 251, 0.02) 160px
        );
}
.brand-icon-placeholder {
    background:
        radial-gradient(circle, rgba(212, 168, 83, 0.1) 0%, transparent 70%),
        linear-gradient(135deg, var(--tsl-bg-card) 0%, var(--tsl-bg-light) 100%);
    border: 1px solid var(--tsl-gold-subtle);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* About section placeholder — marble with gold veins */
.about-image-placeholder {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(212, 168, 83, 0.04) 40px,
            rgba(212, 168, 83, 0.04) 80px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 60px,
            rgba(109, 213, 251, 0.02) 60px,
            rgba(109, 213, 251, 0.02) 120px
        ),
        linear-gradient(135deg, var(--tsl-bg-card) 0%, var(--tsl-bg-light) 100%);
    border: 1px solid var(--tsl-gold-subtle);
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
}

/* Product card placeholders — gold marble */
.product-image-placeholder {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(212, 168, 83, 0.03) 30px,
            rgba(212, 168, 83, 0.03) 60px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 50px,
            rgba(109, 213, 251, 0.015) 50px,
            rgba(109, 213, 251, 0.015) 100px
        ),
        linear-gradient(135deg, var(--tsl-bg-card) 0%, var(--tsl-bg-light) 100%);
    border: 1px solid var(--tsl-gold-subtle);
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════
   Product Cards — dark theme to match the site
   ═══════════════════════════════════════════════════════ */

.product-card {
    background-color: var(--tsl-bg-card) !important;
    border: 1px solid var(--tsl-border);
    border-image: linear-gradient(180deg, var(--tsl-gold-subtle), var(--tsl-border)) 1;
    box-shadow: none;
    transition: all 0.3s ease;
}

.product-card:hover {
    border-color: var(--tsl-gold);
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.1);
    transform: translateY(-2px);
}

.product-card .card-body {
    background-color: transparent;
}

.product-card .card-title {
    color: var(--tsl-white) !important;
}

.product-card .card-text {
    color: var(--tsl-gray) !important;
}