/**
 * TDF Logo Styling CSS
 * 
 * @package    TDF_Logo_Styling
 * @version    1.0.0
 * @author     Claude AI Assistant
 * @date       2025-10-01
 * 
 * Description: Adds rounded corners and color adjustments to the TBT logo
 * 
 * Changelog:
 * v1.0.0 (2025-10-01)
 * - Initial release
 * - Rounded corners on logo container
 * - Color filter to shift teal toward blue (#4A6FA5)
 * - Responsive adjustments
 */

/* ========================================
   Logo Container Styling
   ======================================== */

/**
 * Target the logo image directly
 * Adjust selectors as needed based on your theme structure
 */
.site-logo,
.custom-logo,
img[src*="tbt-logo"],
.site-branding img,
.header-logo img {
    /* Add rounded corners */
    border-radius: 20px;
    
    /* Smooth color transition - shifts teal toward blue */
    filter: hue-rotate(15deg) saturate(0.95) brightness(1.05);
    
    /* Smooth transitions for hover effects */
    transition: all 0.3s ease;
    
    /* Ensure crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/**
 * Optional: Add subtle shadow for depth
 * Uncomment if you want a soft shadow effect
 */
/*
.site-logo,
.custom-logo,
img[src*="tbt-logo"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
*/

/**
 * Hover effect - slightly scale up
 * Uncomment if you want interactive hover
 */
/*
.site-logo:hover,
.custom-logo:hover,
img[src*="tbt-logo"]:hover {
    transform: scale(1.02);
    filter: hue-rotate(15deg) saturate(1.0) brightness(1.08);
}
*/

/* ========================================
   Logo Container Wrapper
   ======================================== */

/**
 * If logo is wrapped in a container with background
 */
.site-branding,
.header-logo,
.logo-container {
    /* Add padding if needed */
    /* padding: 10px; */
    
    /* Rounded corners on container too */
    border-radius: 20px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

/**
 * Mobile devices - slightly less rounded
 */
@media screen and (max-width: 768px) {
    .site-logo,
    .custom-logo,
    img[src*="tbt-logo"] {
        border-radius: 15px;
        max-width: 250px;
        height: auto;
    }
}

/**
 * Small mobile devices
 */
@media screen and (max-width: 480px) {
    .site-logo,
    .custom-logo,
    img[src*="tbt-logo"] {
        border-radius: 12px;
        max-width: 200px;
    }
}

/* ========================================
   Alternative Color Adjustments
   ======================================== */

/**
 * OPTION 1: More blue (stronger shift)
 * Uncomment to use instead of default
 */
/*
.site-logo,
.custom-logo,
img[src*="tbt-logo"] {
    filter: hue-rotate(25deg) saturate(0.9) brightness(1.1);
}
*/

/**
 * OPTION 2: Subtle shift (more conservative)
 * Uncomment to use instead of default
 */
/*
.site-logo,
.custom-logo,
img[src*="tbt-logo"] {
    filter: hue-rotate(10deg) saturate(0.98) brightness(1.02);
}
*/

/**
 * OPTION 3: No color change, only rounded corners
 * Uncomment to use instead of default
 */
/*
.site-logo,
.custom-logo,
img[src*="tbt-logo"] {
    filter: none;
}
*/

/* ========================================
   Print Styles
   ======================================== */

/**
 * Remove filters for print
 */
@media print {
    .site-logo,
    .custom-logo,
    img[src*="tbt-logo"] {
        filter: none !important;
        border-radius: 0 !important;
    }
}