/* ==========================================================================
   WARM LUXURY — THEME OVERRIDE STYLESHEET
   Loads after styles.css. Overrides only the visual properties that differ
   from the production dark theme. Layout, structure, JavaScript, SEO, and
   all dynamic rendering remain identical to the production page.

   Palette
   ─────────────────────────────────────────────
   Background     #faf7f2   Warm ivory
   Card bg        #f0ebe0   Warm linen
   Card hover     #e8e1d3   Deeper linen
   Accent         #8b6914   Rich dark brass  (replaces metallic gold on dark)
   Accent hover   #725610   Deeper brass
   Text           #1c120a   Deep espresso
   Text muted     #6b5544   Warm medium brown
   Border         rgba(139,105,20, 0.18)
   Border hover   rgba(139,105,20, 0.40)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTY OVERRIDES
   Cascades automatically to every rule that uses var(--color-*)
   -------------------------------------------------------------------------- */
:root {
    /* Backgrounds */
    --color-bg:           #faf7f2;
    --color-card-bg:      #f0ebe0;
    --color-card-hover:   #e8e1d3;

    /* Brass accent — reads clearly on light ivory */
    --color-primary:       #8b6914;
    --color-primary-hover: #725610;

    /* Text */
    --color-text:       #1c120a;
    --color-text-muted: #6b5544;

    /* Borders */
    --color-border:       rgba(139, 105, 20, 0.18);
    --color-border-hover: rgba(139, 105, 20, 0.40);
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html {
    background-color: var(--color-bg);
    color: var(--color-text);
}

body {
    background-color: var(--color-bg);
}


/* --------------------------------------------------------------------------
   3. HEADER — override hardcoded rgba(11,11,11,...) backgrounds
   -------------------------------------------------------------------------- */
.header {
    background: rgba(250, 247, 242, 0.88);
    border-bottom: 1px solid rgba(139, 105, 20, 0.12);
}

.header.scrolled {
    background: rgba(250, 247, 242, 0.97);
    box-shadow: 0 4px 24px rgba(60, 30, 10, 0.08);
}


/* --------------------------------------------------------------------------
   4. MOBILE NAV — override hardcoded rgba(11,11,11,...) panel background
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .nav {
        background-color: rgba(250, 247, 242, 0.98);
        border-bottom-color: var(--color-border);
    }
}


/* --------------------------------------------------------------------------
   5. DROPDOWN MENU — override hardcoded dark glass background
   -------------------------------------------------------------------------- */
.dropdown-menu {
    background: rgba(240, 235, 224, 0.98);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 10px 30px rgba(60, 30, 10, 0.12);
}

.dropdown-item:hover {
    background: rgba(139, 105, 20, 0.06);
}

/* Mobile: replace dark left-border tint with brass tint */
@media (max-width: 1200px) {
    .dropdown-menu {
        border-left: 2px solid rgba(139, 105, 20, 0.25);
        background: transparent;
        box-shadow: none;
    }
}


/* --------------------------------------------------------------------------
   6. BUTTONS — override hardcoded dark text and box-shadow values
   -------------------------------------------------------------------------- */

/* Primary button: was dark text on bright gold; now light text on dark brass */
.btn-primary {
    color: #faf7f2;
}

.btn-primary:hover {
    color: #faf7f2;
    box-shadow: 0 10px 20px rgba(139, 105, 20, 0.22);
}

/* Outline fill on hover: keep text light for contrast against brass fill */
.btn-outline:hover {
    color: #faf7f2;
}

/* Secondary button borders on light bg */
.btn-secondary {
    border-color: rgba(28, 18, 10, 0.22);
}

.btn-secondary:hover {
    background-color: rgba(28, 18, 10, 0.05);
}


/* --------------------------------------------------------------------------
   7. FOOTER — override hardcoded #080808 background
   -------------------------------------------------------------------------- */
.footer {
    background-color: #e8e1d3;
    border-top: 1px solid var(--color-border);
}

.footer-bottom-bar {
    border-top-color: var(--color-border);
}


/* --------------------------------------------------------------------------
   8. RUG DETAIL — GLANCE CARDS
   JS generates inline background: rgba(255,255,255,0.02) invisible on light.
   Override with warm-tinted equivalents.
   -------------------------------------------------------------------------- */
.rug-glance-card {
    background: rgba(28, 18, 10, 0.04) !important;
    border-color: var(--color-border) !important;
}

.rug-glance-card:hover {
    background: rgba(28, 18, 10, 0.07) !important;
}


/* --------------------------------------------------------------------------
   9. RUG DETAIL — LUXURY PURCHASE CARD
   -------------------------------------------------------------------------- */
.luxury-purchase-card {
    background: rgba(28, 18, 10, 0.03) !important;
}

.luxury-purchase-card:hover {
    border-color: rgba(139, 105, 20, 0.30) !important;
    box-shadow: 0 12px 30px rgba(60, 30, 10, 0.08);
}


/* --------------------------------------------------------------------------
   10. RUG DETAIL — TRUST CARDS
   -------------------------------------------------------------------------- */
.rug-trust-card {
    background: rgba(28, 18, 10, 0.03) !important;
}

.rug-trust-card:hover {
    background: rgba(28, 18, 10, 0.06) !important;
    box-shadow: 0 8px 24px rgba(139, 105, 20, 0.07);
}


/* --------------------------------------------------------------------------
   11. RUG DETAIL — FAQ ACCORDION
   -------------------------------------------------------------------------- */
.rug-faq-item {
    background: rgba(28, 18, 10, 0.03);
}

.rug-faq-item:hover {
    border-color: rgba(139, 105, 20, 0.30);
}

.rug-faq-item[open] {
    background: rgba(28, 18, 10, 0.05);
    border-color: var(--color-primary);
}

.rug-faq-content {
    border-top-color: rgba(28, 18, 10, 0.07);
    color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   12. RUG DETAIL — RELATED RUGS
   -------------------------------------------------------------------------- */
.related-rug-card-link:hover .related-rug-card {
    box-shadow: 0 8px 24px rgba(139, 105, 20, 0.10);
}


/* --------------------------------------------------------------------------
   13. RUG DETAIL — THUMBNAIL GALLERY
   -------------------------------------------------------------------------- */
.rug-thumb-btn {
    background: var(--color-card-bg);
}

.rug-thumb-btn.active {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(139, 105, 20, 0.25);
}

.rug-thumb-btn:not(.active):hover {
    border-color: rgba(139, 105, 20, 0.50);
}

.rug-detail-thumbnails {
    scrollbar-color: var(--color-primary) rgba(28, 18, 10, 0.08);
}

.rug-detail-thumbnails::-webkit-scrollbar-thumb {
    background: var(--color-primary);
}


/* --------------------------------------------------------------------------
   14. RUG DETAIL — AVAILABILITY BADGE
   -------------------------------------------------------------------------- */
.availability-badge-alert {
    background-color: rgba(139, 105, 20, 0.08) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}


/* --------------------------------------------------------------------------
   15. RUG EDITORIAL — DESCRIPTION TYPOGRAPHY
   Override hardcoded rgba(212,175,55,...) values in production
   -------------------------------------------------------------------------- */

/* Accent bar beside section headings */
.rug-editorial-heading-accent {
    background: linear-gradient(
        to bottom,
        rgba(139, 105, 20, 0.85) 0%,
        rgba(139, 105, 20, 0.08) 100%
    );
}

/* Inline emphasis on heritage phrases */
.rug-editorial-em {
    color: rgba(139, 105, 20, 0.72);
}


/* --------------------------------------------------------------------------
   16. DOCUMENTATION SECTION
   -------------------------------------------------------------------------- */
.rug-detail-documentation {
    border-top-color: var(--color-border);
}


/* --------------------------------------------------------------------------
   17. LIGHTBOX — keep dark overlay (correct for all backgrounds)
   The lightbox rgba(11,11,11,0.95) is intentionally preserved.
   Only override the interactive button accent colors.
   -------------------------------------------------------------------------- */
.rug-lightbox-btn:hover {
    color: #1c120a;
}

.rug-lightbox-close:hover {
    color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   18. SHOWROOM CARD (class assigned by app.js output)
   -------------------------------------------------------------------------- */
.showroom-card {
    background: rgba(28, 18, 10, 0.03) !important;
    border-left-color: var(--color-primary) !important;
}


/* --------------------------------------------------------------------------
   19. SERVICE ICON WRAPPER — adjusts rgba(212,175,55,...) tint for light bg
   -------------------------------------------------------------------------- */
.service-icon-wrapper {
    background-color: rgba(139, 105, 20, 0.08);
    border-color: rgba(139, 105, 20, 0.20);
}

.service-card:hover .service-icon-wrapper {
    color: #faf7f2;
    box-shadow: 0 0 20px rgba(139, 105, 20, 0.25);
}


/* --------------------------------------------------------------------------
   20. SECTION UTILITY
   -------------------------------------------------------------------------- */
.section-dark {
    background-color: var(--color-card-bg);
}


/* ==========================================================================
   21. HOMEPAGE OVERRIDES
   Visual overrides for home page elements to remove legacy dark styles
   ========================================================================== */

/* ── Hero Section ── */
.hero {
    background-color: var(--color-bg);
}
.hero-bg {
    /* Wash the dark linear-gradient with a light ivory wash to support deep espresso text */
    background-image: linear-gradient(rgba(250, 247, 242, 0.82), rgba(250, 247, 242, 0.88)), url('images/showroom.png') !important;
}
.hero-title {
    color: var(--color-text);
    text-shadow: none; /* remove legacy heavy dark text-shadow */
}
.hero-description {
    color: var(--color-text-muted) !important; /* overrides #dfdfdf */
    text-shadow: none; /* remove legacy dark shadow */
}
.hero-badges {
    border-top: 1px solid var(--color-border);
}
.badge-item span {
    color: var(--color-text);
}

/* ── Heritage & Quality Section ── */
.heritage {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg);
}
.border-overlay {
    border: 2px solid var(--color-primary);
}
.heritage-img {
    box-shadow: 20px 20px 0 var(--color-card-bg) !important; /* overrides hardcoded dark shadow #121212 */
}
.heritage-img:hover {
    box-shadow: 15px 15px 0 var(--color-card-bg) !important;
}

/* ── Collections Portfolio ── */
.collections {
    background-color: var(--color-bg);
}
.collection-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-border);
}
.collection-card:hover {
    border-color: var(--color-border-hover);
    background-color: var(--color-card-hover);
    box-shadow: 0 20px 40px rgba(60, 30, 10, 0.08) !important; /* replace dark legacy shadow */
}
.card-overlay {
    background-color: rgba(240, 235, 224, 0.88) !important; /* overrides legacy dark overlay rgba(11,11,11,0.4) */
}
.card-details {
    border-top: 1px solid var(--color-border) !important; /* overrides rgba(255,255,255,0.05) */
}

/* ── Interactive Virtual Showroom Section ── */
.visualizer-section {
    background-color: var(--color-card-bg) !important; /* linen background for section banding */
    border-top: 1px solid var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.visualizer-canvas-container {
    border: 1px solid var(--color-border) !important;
    background-color: var(--color-bg) !important; /* ivory canvas background */
}
.visualizer-header-badge {
    background: rgba(250, 247, 242, 0.85) !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-text) !important;
}
.visualizer-viewport {
    background-color: var(--color-bg) !important;
}
.visualizer-loader {
    background-color: rgba(250, 247, 242, 0.6) !important;
}
.spinner {
    border: 3px solid rgba(139, 105, 20, 0.1) !important;
    border-top: 3px solid var(--color-primary) !important;
}
.rug-select-btn {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
}
.rug-select-btn:hover {
    background-color: var(--color-card-bg) !important;
    border-color: var(--color-border-hover) !important;
}
.rug-select-btn.active {
    background-color: rgba(139, 105, 20, 0.06) !important;
    border-color: var(--color-primary) !important;
}
.selector-thumb {
    border: 1px solid var(--color-border) !important;
}
.rug-specs-card {
    background: rgba(28, 18, 10, 0.03) !important;
    border: 1px solid var(--color-border) !important;
}
.spec-row {
    border-bottom: 1px solid var(--color-border) !important;
}

/* ── Charitable Giving Section ── */
.charity {
    border-bottom: 1px solid var(--color-border) !important;
    background-color: var(--color-bg) !important;
}

/* ── Testimonials Section ── */
.testimonials {
    background: linear-gradient(var(--color-bg), var(--color-card-bg)) !important; /* replace dark gradient */
    border-top: 1px solid var(--color-border) !important;
}
.testimonial-card {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
}
.testimonial-card:hover {
    border-color: var(--color-border-hover) !important;
    box-shadow: 0 15px 30px rgba(60, 30, 10, 0.08) !important; /* soften shadow */
}
.testimonial-quote-icon {
    color: rgba(139, 105, 20, 0.08) !important; /* brass override */
}

/* ── Contact Booking Section ── */
.contact {
    background-color: var(--color-bg) !important;
    border-top: 1px solid var(--color-border) !important;
}
.detail-icon {
    background-color: rgba(28, 18, 10, 0.03) !important;
    border: 1px solid var(--color-border) !important;
}
.boston-badge {
    background-color: rgba(139, 105, 20, 0.04) !important;
    border-left: 3px solid var(--color-primary) !important;
}
.contact-form-container {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-border) !important;
}
.form-group input, .form-group select, .form-group textarea {
    background-color: rgba(28, 18, 10, 0.02) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    background-color: rgba(28, 18, 10, 0.04) !important;
    border-color: var(--color-primary) !important;
}
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b6914' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; /* brass stroke */
}
.form-group select option {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}
.form-success-message {
    background-color: var(--color-card-bg) !important;
}
.file-upload-label {
    background: rgba(28, 18, 10, 0.03) !important;
    border: 1px dashed var(--color-border) !important;
}

/* ── Charitable Outreach Accordion ── */
.accordion-item {
    border: 1px solid var(--color-border) !important;
}
.accordion-item.active {
    background-color: rgba(139, 105, 20, 0.02) !important;
    box-shadow: 0 10px 30px rgba(60, 30, 10, 0.06) !important;
}



/* ==========================================================================
   22. INNER PAGES (catalog, services, galleries, blog, community)
   ========================================================================== */

/* ── Subpage hero banner: ivory wash over the showroom photo ── */
.blog-hero {
    background: linear-gradient(rgba(250, 247, 242, 0.84), rgba(250, 247, 242, 0.9)), url('images/showroom.png');
    background-size: cover;
    background-position: center;
}

/* ── Before/after and case-study photo labels ── */
.ba-label,
.case-img-label {
    background: rgba(250, 247, 242, 0.88);
    color: var(--color-text);
}

/* ── Blog search and article popup ── */
.blog-search-input {
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(60, 30, 10, 0.08);
}

.blog-search-input:focus {
    background: var(--color-bg);
}

.blog-modal {
    background-color: rgba(28, 18, 10, 0.55);
}

.blog-modal-content {
    background-color: var(--color-bg);
    box-shadow: 0 30px 60px rgba(60, 30, 10, 0.25);
}

.blog-modal-close {
    background: rgba(240, 235, 224, 0.95);
    color: var(--color-text);
}

.blog-modal-close:hover {
    color: #faf7f2;
}

/* ── Catalog filter checkbox tick: light on brass ── */
.filter-label .checkbox-custom:after {
    border-color: #faf7f2;
}

/* ── Premium cards inside linen sections ── */
.section-dark .premium-card,
.section-dark .premium-card-wide {
    background: var(--color-bg);
}

.section-dark .premium-title {
    color: var(--color-text);
}

.section-dark .premium-text {
    color: var(--color-text-muted);
}

.section-dark .premium-support-img {
    border-color: var(--color-bg);
}