/* ===== HARNESS PROJECT - STANDARDIZED LOGO SIZES ===== */
/* All logos across the site use consistent, professional sizing */
/* Created: January 22, 2026 */

/* === STANDARD LOGO SIZING SYSTEM === */

/* HERO LOGOS - Main page banners (800px standard) */
.hero-logo,
img[src*="hero-logo"],
img[src*="landing-hero"],
img[src*="curriculum-logo"],
img[src*="blog-logo-final"],
img[src*="workshops-logo"],
img[src*="toolkit-logo"],
img[src*="facilitators-guide-logo"],
img[src*="participants-guide-logo"],
img[src*="app-splash-logo"] {
    width: 800px !important;
    max-width: 90% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* NAVIGATION LOGOS - Headers and top bars (60px height standard) */
.nav-logo-img,
.logo-img,
.logo-image,
nav img[src*="logo"],
.navbar img[src*="logo"],
.harness-nav img[src*="logo"] {
    height: 60px !important;
    width: auto !important;
    max-height: 60px !important;
}

/* HEADER LOGOS - App headers (50px height) */
.header-logo,
.app-header img[src*="logo"] {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
}

/* FOOTER LOGOS - Footer sections (200px width standard) */
.footer-logo,
footer img[src*="logo"],
img[src*="footer-logo"] {
    width: 200px !important;
    max-width: 90% !important;
    height: auto !important;
}

/* SIDEBAR LOGOS - Mobile sidebars (60px) */
.sidebar-logo,
.mobile-sidebar img[src*="logo"] {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
}

/* SPECIFIC LOGO OVERRIDES FOR CONSISTENCY */

/* Landing page hero logo */
img[src*="harness-landing-hero-logo"] {
    width: 800px !important;
    max-width: 90% !important;
}

/* Curriculum logo (educator hub) */
img[src*="harness-curriculum-logo"] {
    width: 800px !important;
    max-width: 90% !important;
}

/* Facilitator's Guide logo */
img[src*="facilitators-guide-logo"] {
    max-width: 800px !important;
    width: 100% !important;
}

/* Participant's Guide logo */
img[src*="participants-guide-logo"] {
    max-width: 800px !important;
    width: 100% !important;
}

/* Blog hero logo */
img[src*="harness-blog-logo-final"] {
    width: 800px !important;
    max-width: 90% !important;
}

/* Workshops logo */
img[src*="harness-workshops-logo"] {
    width: 800px !important;
    max-width: 90% !important;
}

/* Toolkit logo */
img[src*="harness-toolkit-logo"] {
    width: 800px !important;
    max-width: 90% !important;
}

/* App splash screen logo */
img[src*="harness-app-splash-logo"] {
    max-width: 800px !important;
    width: 90% !important;
}

/* === MOBILE RESPONSIVE ADJUSTMENTS === */

@media (max-width: 768px) {
    /* Hero logos smaller on mobile */
    .hero-logo,
    img[src*="hero-logo"],
    img[src*="landing-hero"],
    img[src*="curriculum-logo"],
    img[src*="blog-logo-final"],
    img[src*="workshops-logo"],
    img[src*="toolkit-logo"],
    img[src*="facilitators-guide-logo"],
    img[src*="participants-guide-logo"],
    img[src*="app-splash-logo"] {
        width: 400px !important;
        max-width: 95% !important;
    }
    
    /* Navigation logos slightly smaller */
    .nav-logo-img,
    .logo-img,
    .logo-image {
        height: 50px !important;
        max-height: 50px !important;
    }
    
    /* Header logos */
    .header-logo {
        height: 40px !important;
        max-height: 40px !important;
    }
    
    /* Footer logos smaller */
    .footer-logo {
        width: 150px !important;
        max-width: 90% !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens - even smaller hero logos */
    .hero-logo,
    img[src*="hero-logo"],
    img[src*="landing-hero"],
    img[src*="curriculum-logo"] {
        width: 300px !important;
        max-width: 95% !important;
    }
    
    /* Minimal navigation logos */
    .nav-logo-img,
    .logo-img {
        height: 45px !important;
    }
    
    /* Minimal header logos */
    .header-logo {
        height: 35px !important;
    }
}

/* === LOGO ENHANCEMENT === */

/* Maintain shadows and filters from transparent-headers.css */
/* PLUS ensure ALL logos have transparent backgrounds */
.hero-logo,
img[src*="hero-logo"],
.logo-img,
.nav-logo-img,
.header-logo,
.sidebar-logo,
.footer-logo,
img[src*="logo"],
nav img,
header img {
    /* Remove white backgrounds */
    background: transparent !important;
    background-color: transparent !important;
    /* Add shadow for visibility */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
    /* Blend mode to remove white */
    mix-blend-mode: multiply;
}

/* Navigation and header logos */
.nav-logo-img,
.header-logo,
nav img[src*="logo"],
.harness-universal-nav img {
    background: transparent !important;
    mix-blend-mode: multiply;
}

/* === PRINT STYLES === */

@media print {
    /* Reset logo sizes for printing */
    .hero-logo,
    .nav-logo-img,
    .footer-logo {
        width: auto !important;
        height: auto !important;
        max-width: 300px !important;
    }
}

/* === SPECIAL CASES === */

/* Logo text alongside images */
.logo-text {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Logo containers maintain spacing */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* === CONSISTENCY NOTES === */
/*
STANDARDIZED SIZES:
- Hero/Main Logos: 800px (desktop), 400px (tablet), 300px (mobile)
- Navigation Logos: 60px height (desktop), 50px (tablet), 45px (mobile)
- Header Logos: 50px height (desktop), 40px (tablet), 35px (mobile)
- Footer Logos: 200px width (desktop), 150px (mobile)
- Sidebar Logos: 60px × 60px

This ensures visual consistency and professional appearance across all pages.
*/