/*
 * Restyle de wp-login.php aux couleurs DirAJ.
 * Chargé via login_enqueue_scripts dans functions.php.
 */

:root,
body.login {
    --diraj-color-primary: #3C78C1;
    --diraj-color-secondary: #474747;
    --diraj-color-link: #ee9208;
    --diraj-color-link-hover: #3c78c1;
    /* WP 5.7+ : override de la couleur de thème admin (utilisée par .button-primary) */
    --wp-admin-theme-color: #3C78C1;
    --wp-admin-theme-color-darker-10: #2F68AD;
    --wp-admin-theme-color-darker-20: #225A98;
    --wp-admin-border-color-focus: rgba(60, 120, 193, .8);
}

body.login {
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(60, 120, 193, .18) 0%, rgba(60, 120, 193, 0) 60%),
        #F7FAFD;
    font-family: "Roboto", "Helvetica", Arial, sans-serif;
    color: var(--diraj-color-secondary);
}

/* Logo : utilise le logo DirAJ (filtré côté PHP via login_headertext/HTML) */
.login h1 a {
    background-image: url("../uploads/2026/02/logo_diraj.svg") !important;
    background-size: contain !important;
    width: 100% !important;
    max-width: 220px !important;
    height: 70px !important;
    margin: 0 auto 18px !important;
    text-indent: -9999px;
    overflow: hidden;
}

.login form {
    background: #FFFFFF;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(60, 120, 193, .12),
                0 2px 8px rgba(0, 0, 0, .04);
    padding: 32px 28px;
    margin-top: 8px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background: #F7FAFD;
    border: 1px solid #E0E8F2;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--diraj-color-secondary);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--diraj-color-primary);
    box-shadow: 0 0 0 3px rgba(60, 120, 193, .15);
    outline: none;
}

.login label {
    color: var(--diraj-color-secondary);
    font-size: 14px;
    font-weight: 500;
    font-family: "Barlow", "Roboto", sans-serif;
}

/* Bouton "Se connecter" — sélecteurs forts pour gagner sur buttons.css de WP
   et sur le sélecteur générique de elementor-clone.css */
body.login #wp-submit,
body.login input#wp-submit.button.button-primary,
body.login .wp-core-ui .button-primary,
body.login .button.button-primary {
    display: block !important;
    box-sizing: border-box !important;
    background: #3C78C1 !important;
    background-color: #3C78C1 !important;
    background-image: none !important;
    border: 1px solid #3C78C1 !important;
    border-color: #3C78C1 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(60, 120, 193, .25) !important;
    color: #FFFFFF !important;
    font-family: "Barlow", "Roboto", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: .02em !important;
    padding: 14px 24px !important;
    text-shadow: none !important;
    transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 8px !important;
}
body.login #wp-submit:hover,
body.login #wp-submit:focus,
body.login input#wp-submit.button.button-primary:hover,
body.login input#wp-submit.button.button-primary:focus,
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus,
body.login .button.button-primary:hover,
body.login .button.button-primary:focus {
    background: #2F68AD !important;
    background-color: #2F68AD !important;
    border-color: #2F68AD !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(60, 120, 193, .35) !important;
}
body.login #wp-submit:active,
body.login .wp-core-ui .button-primary:active,
body.login .button.button-primary:active {
    transform: translateY(1px);
}

/* Liens secondaires (mot de passe oublié, retour au site, etc.) */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin: 18px 0 0;
    padding: 0;
}
.login #nav a,
.login #backtoblog a {
    color: var(--diraj-color-link) !important;
    font-family: "Barlow", "Roboto", sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--diraj-color-link-hover) !important;
    text-decoration: underline;
}

/* "Se souvenir de moi" */
.login .forgetmenot {
    margin: 8px 0 14px;
    font-size: 14px;
}
.login input[type="checkbox"] {
    border: 1px solid #E0E8F2;
    border-radius: 3px;
}

/* Messages d'erreur / info */
.login .message,
.login #login_error {
    border-radius: 8px;
    border-left-width: 4px;
    font-family: "Roboto", sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.login #login_error {
    border-left-color: #E23125;
    background: #FFF5F5;
}
.login .message {
    border-left-color: var(--diraj-color-primary);
}

/* Cache le lien Politique de confidentialité ajouté par certains plugins */
.login .privacy-policy-page-link {
    display: none;
}

/* Cache le sélecteur de langue WP (fallback CSS si le filtre PHP ne suffit pas)
   et tout bouton "Modifier" / "Apply" qui pourrait y être attaché. */
.login .language-switcher,
.login #language-switcher,
.login form#language-switcher,
.login form#language-switcher .button,
.login #language-switcher .button,
.login #login_language_chooser,
.login .login-language-row,
.login .login-action-edit,
.login .button.login-edit,
.login [name="login-edit"],
.login [value="Modifier"],
.login input[value="Modifier"],
.login button[value="Modifier"] {
    display: none !important;
}

/* Largeur du conteneur */
.login {
    padding-top: 7vh;
}
#login {
    width: 100%;
    max-width: 420px;
    padding: 0 16px;
}

/* Centrage du formulaire de login (le formulaire WP est rendu à l'intérieur
   des wrappers du thème via le plugin wp-custom-login → get_header/get_footer). */
body.login .col-width {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 88px - 80px); /* header sticky 88px, footer ~80px */
    padding: 32px 16px;
}
body.login #content.site-content {
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 0;
}
body.login #content.site-content #login {
    margin: 0 auto;
}
/* Au cas où le username greeting s'affiche en haut, on le centre */
body.login #username {
    float: none;
    margin: 0 0 16px;
    text-align: center;
}

@media (max-width: 480px) {
    .login { padding-top: 4vh; }
    .login form { padding: 22px 18px; }
}