/**
 * Styles publics pour le plugin HSLS Site Customizer
 */

/* Styles pour le logo personnalisé */
.hsls-custom-logo .custom-logo-link {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.hsls-custom-logo .custom-logo-link:hover {
    opacity: 0.8;
}

.hsls-custom-logo .custom-logo {
    max-height: 80px;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
}

.hsls-custom-logo .custom-logo:hover {
    transform: scale(1.05);
}

/* Styles de base pour les couleurs personnalisées */
.hsls-custom-colors {
    /* Les styles de couleur sont injectés dynamiquement via PHP */
}

/* Amélioration de l'affichage du logo sur mobile */
@media (max-width: 768px) {
    .hsls-custom-logo .custom-logo {
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .hsls-custom-logo .custom-logo {
        max-height: 50px;
    }
}

/* Styles pour assurer la compatibilité avec différents thèmes */
.hsls-custom-logo .site-branding .custom-logo-link {
    line-height: 1;
}

.hsls-custom-logo .site-title {
    margin: 0;
}

/* Animation de chargement pour le logo */
.custom-logo {
    opacity: 0;
    animation: fadeInLogo 0.5s ease-in-out forwards;
}

@keyframes fadeInLogo {
    to {
        opacity: 1;
    }
}

/* Styles pour les boutons avec les couleurs personnalisées */
.hsls-custom-colors .button,
.hsls-custom-colors .btn,
.hsls-custom-colors input[type='submit'],
.hsls-custom-colors input[type='button'] {
    transition: all 0.3s ease;
    border-radius: 4px;
}

.hsls-custom-colors .button:hover,
.hsls-custom-colors .btn:hover,
.hsls-custom-colors input[type='submit']:hover,
.hsls-custom-colors input[type='button']:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styles pour les liens avec les couleurs personnalisées */
.hsls-custom-colors a {
    transition: color 0.3s ease;
    text-decoration: none;
}

.hsls-custom-colors a:hover {
    text-decoration: underline;
}

/* Styles pour les titres avec les couleurs personnalisées */
.hsls-custom-colors h1,
.hsls-custom-colors h2,
.hsls-custom-colors h3,
.hsls-custom-colors h4,
.hsls-custom-colors h5,
.hsls-custom-colors h6 {
    transition: color 0.3s ease;
}

/* Styles pour la navigation avec les couleurs personnalisées */
.hsls-custom-colors .main-navigation {
    transition: all 0.3s ease;
}

.hsls-custom-colors .main-navigation ul li a {
    transition: all 0.3s ease;
    padding: 10px 15px;
}

.hsls-custom-colors .main-navigation ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Styles pour le footer avec les couleurs personnalisées */
.hsls-custom-colors .site-footer {
    transition: background-color 0.3s ease;
    padding: 20px 0;
}

/* Styles pour assurer la lisibilité */
.hsls-custom-colors .site-footer,
.hsls-custom-colors .site-footer a,
.hsls-custom-colors .site-footer p {
    color: #ffffff !important;
}

/* Styles pour les widgets avec les couleurs personnalisées */
.hsls-custom-colors .widget-title {
    border-bottom: 2px solid currentColor;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Styles pour les formulaires */
.hsls-custom-colors input[type='text'],
.hsls-custom-colors input[type='email'],
.hsls-custom-colors input[type='url'],
.hsls-custom-colors input[type='password'],
.hsls-custom-colors input[type='search'],
.hsls-custom-colors textarea,
.hsls-custom-colors select {
    border: 2px solid #ddd;
    transition: border-color 0.3s ease;
}

.hsls-custom-colors input[type='text']:focus,
.hsls-custom-colors input[type='email']:focus,
.hsls-custom-colors input[type='url']:focus,
.hsls-custom-colors input[type='password']:focus,
.hsls-custom-colors input[type='search']:focus,
.hsls-custom-colors textarea:focus,
.hsls-custom-colors select:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

/* Styles pour l'accessibilité */
.hsls-custom-colors a:focus,
.hsls-custom-colors button:focus,
.hsls-custom-colors input:focus,
.hsls-custom-colors textarea:focus,
.hsls-custom-colors select:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Styles pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .custom-logo {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}