@charset "UTF-8";

/* Smooth scroll for in-page anchor links */
.homepage {
    scroll-behavior: smooth;
}

/* ============================================================================
   HOMEPAGE.CSS - Page-Specific Overrides
   ============================================================================
   This file contains ONLY page-specific elements:
   - Header logo override for homepage
   - SVG icon references for path/persona/value icons
   - Section-specific background colors
   - UX state visibility toggles

   All component styling is in component-library.css
   ============================================================================ */

/* ============================================================================
   HERO SECTION - Trust icon
   ============================================================================ */

.hero-trust::before {
    background-image: url(/images/icon/rocket-white.svg);
}

/* ============================================================================
   PATH CARDS - SVG icons for buyer/seller paths
   ============================================================================ */

.buyer-path .path-icon {
    font-size: 0;
    background-image: url(/images/icon/bag-primary.svg);
}

.seller-path .path-icon {
    font-size: 0;
    background-image: url(/images/icon/label-primary.svg);
}


/* ============================================================================
   PERSONA CARDS - Photo icons for user personas
   ============================================================================ */

.persona-declutter .persona-icon {
    background-image: url(/images/features/persona-declutter.jpg);
}

.persona-maker .persona-icon {
    background-image: url(/images/features/persona-maker.jpg);
}

.persona-collector .persona-icon {
    background-image: url(/images/features/persona-collector.jpg);
}

.persona-hunter .persona-icon {
    background-image: url(/images/features/persona-hunter.jpg);
}

/* ============================================================================
   VALUE PROPS - Photo icons for value propositions
   ============================================================================ */

.value-prop-fast .value-icon {
    background-image: url(/images/features/value-fast.jpg);
}

.value-prop-money .value-icon {
    background-image: url(/images/features/value-money.jpg);
}

.value-prop-safety .value-icon {
    background-image: url(/images/features/value-safety.jpg);
}

.value-prop-tools .value-icon {
    background-image: url(/images/features/value-tools.jpg);
}

.value-prop-sustainable .value-icon {
    background-image: url(/images/features/value-sustainable.jpg);
}

.value-prop-everyone .value-icon {
    background-image: url(/images/features/value-everyone.jpg);
}

/* ============================================================================
   CTA SECTION - Trust badge icons
   ============================================================================ */

.cta-trust-badges span::before {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.cta-trust-badges span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
}

.badge-security::before {
    background-image: url(/images/icon/shield-check-white.svg);
}

.badge-eco::before {
    background-image: url(/images/icon/leaf-white.svg);
}

.badge-community::before {
    background-image: url(/images/icon/group-white.svg);
}

/* ============================================================================
   CONTEXT/COMPARISON SECTION - 3 cards across for platform comparison
   ============================================================================ */

.context-section .comparison-cards {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
}

@media (max-width: 900px) {
    .context-section .comparison-cards {
        grid-template-columns: 1fr;
    }
}



.context-section .callout-info {
    flex-direction: column;
    margin-top: var(--spacing-xl);
}

.context-section .callout.callout-info .callout-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Comparison cards now use value-prop layout with .value-icon */
.comparison-card-shipping .value-icon {
    background-image: url(/images/icon/box-black.svg);
    background-size: 40px 40px;
    background-color: rgba(92, 67, 244, 0.06);
}

.comparison-card-social .value-icon {
    background-image: url(/images/icon/bookmark-black.svg);
    background-size: 40px 40px;
    background-color: rgba(92, 67, 244, 0.06);
}

.comparison-card-ecommerce .value-icon {
    background-image: url(/images/icon/dollar-circle-black.svg);
    background-size: 40px 40px;
    background-color: rgba(92, 67, 244, 0.06);
}

/* ============================================================================
   CTA NOTE - Trophy/emoji icons
   ============================================================================ */

.cta-section .cta-note::before {
    content: '';
    display: inline-flex;
    width: var(--icon-size-md, 24px);
    height: var(--icon-size-md, 24px);
    background-size: var(--icon-size-md, 24px) var(--icon-size-md, 24px);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/trophy-white.svg);
}

.comparison-section .cta-note::before {
    content: '';
    display: inline-flex;
    width: var(--icon-size-sm, 24px);
    height: var(--icon-size-sm, 24px);
    background-size: var(--icon-size-sm, 24px) var(--icon-size-md, 24px);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/emoji-black.svg);
    margin-right: var(--spacing-sm);
}

.cta-section .cta-note::before {
    display: none !important;
}


/* ============================================================================
   SECTION BACKGROUNDS - Page-specific section styling
   ============================================================================ */

/* Journey paths - light gradient background */
.journey-paths {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
}

@media (max-width: 768px) {
    .journey-paths {
        padding: 2.5rem var(--spacing-md);
    }
}

/* Persona highlights section */
.persona-highlights {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid #e9ecef;
}

/* Category discovery — "View All Categories" link */
.category-cta {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.category-cta .cta-link {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    border: 1px solid rgba(92, 67, 244, 0.2);
    border-radius: var(--border-radius-full);
    text-decoration: none;
    transition: var(--transition-card);
}

.category-cta .cta-link:hover {
    background: rgba(92, 67, 244, 0.06);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 67, 244, 0.1);
}

/* Category discovery section */
.category-discovery {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border-bottom: 1px solid #e9ecef;
}

/* Featured collections section */
.featured-collections {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #e9ecef;
}

/* Features section */
.features-section {
    padding: 5rem var(--spacing-lg);
    background: var(--color-surface);
}

/* Value props (comparison-value) section */
.comparison-section.comparison-value {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Context section */
.context-section {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-top: 1px solid #e9ecef;
}

/* Safety section */
.safety-section {
    padding: 5rem var(--spacing-lg);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Safety feature icons */
.safety-feature-broker .safety-icon {
    background-image: url(/images/features/safety-feature-broker.jpg);
}

.safety-feature-anon .safety-icon {
    background-image: url(/images/features/safety-feature-anon.jpg);
}

.safety-feature-two-way .safety-icon {
    background-image: url(/images/features/safety-feature-two-way.jpg);
}

.safety-feature-privacy .safety-icon {
    background-image: url(/images/features/safety-feature-privacy.jpg);
}

/* ============================================================================
   INVITE-ONLY: Non-clickable category cards for anonymous users
   ============================================================================ */

div.image-card {
    cursor: default;
}

div.image-card:hover {
    transform: none;
}

/* ============================================================================
   UX STATE VISIBILITY
   ============================================================================ */

#Body[ux-anon="0"] .homepage [ux-anon] {
    display: none;
}

#Body[ux-anon="1"] .homepage [ux-auth] {
    display: none;
}

/* ============================================================================
   DARK MODE — Homepage-specific overrides
   ============================================================================
   Component-level dark mode (path-card, comparison-card, feature-card, page-hero)
   is handled in component-library-dark.css.
   This section covers page-specific backgrounds, icon swaps, and photo adjustments.
   ============================================================================ */

/* --- Section Backgrounds ---
   Replace hardcoded light gradients (#ffffff/#f8f9fa/#e9ecef) with dark tokens.
   Sections using var(--color-surface) auto-adapt and only need border fixes. */

[data-theme="dark"] .journey-paths {
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .persona-highlights {
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .category-discovery {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .featured-collections {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .comparison-section.comparison-value {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
}

[data-theme="dark"] .context-section {
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .safety-section {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-dark) 100%);
}

/* --- Black SVG Icons → Inverted for dark backgrounds ---
   No white SVG variants exist; use filter to invert black → white. */

[data-theme="dark"] .context-section .value-icon {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .comparison-section .cta-note::before {
    filter: brightness(0) invert(1);
}

/* --- Photo Images — Reduced brightness for dark context ---
   JPG photos (persona, value, safety) get slightly dimmed to avoid
   glaring bright rectangles against dark section backgrounds. */

[data-theme="dark"] .persona-icon {
    filter: brightness(0.85) contrast(1.05);
}

[data-theme="dark"] .value-icon {
    filter: brightness(0.85) contrast(1.05);
}

[data-theme="dark"] .safety-icon {
    filter: brightness(0.85) contrast(1.05);
}