/* ==========================================
   Vora Logo Component Styles
   Modern, responsive logo styling for all contexts
   ========================================== */

/* ------------------------------------------
   Header Logo (Landing Page)
   ------------------------------------------ */
.header-logo-img {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.header-logo:hover .header-logo-img {
    opacity: 0.8;
}

/* ------------------------------------------
   Sidebar Logo (Dashboard, Proposals, etc.)
   ------------------------------------------ */
.sidebar-logo-img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.sidebar-logo:hover .sidebar-logo-img {
    opacity: 0.85;
}

/* ------------------------------------------
   Footer Logo
   ------------------------------------------ */
.footer-logo-img {
    height: 24px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.footer-logo:hover .footer-logo-img {
    opacity: 1;
}

/* ------------------------------------------
   Auth Page Logo (Login, Signup, etc.)
   ------------------------------------------ */
.auth-logo-img {
    height: 36px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}

/* ------------------------------------------
   Pro Page Logo
   ------------------------------------------ */
.pro-nav-logo-img {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.pro-nav-logo:hover .pro-nav-logo-img {
    opacity: 0.8;
}

/* ------------------------------------------
   Idea Pages Logo
   ------------------------------------------ */
.idea-nav-logo-img {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

.idea-nav-logo:hover .idea-nav-logo-img {
    opacity: 0.85;
}

/* ------------------------------------------
   Responsive Adjustments
   ------------------------------------------ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .header-logo-img {
        height: 28px;
        max-width: 120px;
    }

    .sidebar-logo-img {
        height: 24px;
        max-width: 100px;
    }

    .auth-logo-img {
        height: 32px;
        max-width: 140px;
    }

    .pro-nav-logo-img,
    .idea-nav-logo-img {
        height: 28px;
        max-width: 120px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .header-logo-img {
        height: 24px;
        max-width: 100px;
    }

    .sidebar-logo-img {
        height: 22px;
        max-width: 90px;
    }

    .footer-logo-img {
        height: 20px;
        max-width: 90px;
    }

    .auth-logo-img {
        height: 28px;
        max-width: 120px;
    }

    .pro-nav-logo-img,
    .idea-nav-logo-img {
        height: 24px;
        max-width: 100px;
    }
}

/* ------------------------------------------
   Dark Mode Support (if applicable)
   ------------------------------------------ */
@media (prefers-color-scheme: dark) {
    .footer-logo-img {
        filter: brightness(0.95);
    }
}

/* ------------------------------------------
   High DPI / Retina Display Optimization
   ------------------------------------------ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .header-logo-img,
    .sidebar-logo-img,
    .footer-logo-img,
    .auth-logo-img,
    .pro-nav-logo-img,
    .idea-nav-logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ------------------------------------------
   Loading State
   ------------------------------------------ */
.header-logo-img,
.sidebar-logo-img,
.footer-logo-img,
.auth-logo-img,
.pro-nav-logo-img,
.idea-nav-logo-img {
    /* Smooth loading */
    background: transparent;
}

/* ------------------------------------------
   Accessibility
   ------------------------------------------ */
.header-logo:focus-visible,
.sidebar-logo:focus-visible,
.footer-logo:focus-visible,
.auth-card-logo:focus-visible,
.auth-brand-logo:focus-visible,
.pro-nav-logo:focus-visible,
.idea-nav-logo:focus-visible {
    outline: 2px solid var(--primary, #7a9b7d);
    outline-offset: 4px;
    border-radius: 4px;
}