/*
 Theme Name:   My Child Theme
 Template:     astra
 Author: Shyam Gupta
 Version:      1.0.0
*/

/* ==========================================================================
   TLC Custom Login Page Master Stylesheet
   ========================================================================== */

/* 1. Custom Brand Logo Configuration */
body.login h1 a {
    background-image: url('https://theleaderscommunity.com/wp-content/uploads/2026/04/4-e1776864089248.png') !important;
    height: 100px !important;
    width: 320px !important;
    background-size: contain !important;
    background-position: center !important;
    margin-bottom: 25px !important;
}

/* 2. Page Canvas Background: Matte Black */
body.login {
    background-color: #1a1a1a !important;
    background-image: none !important;
}

/* 3. Central Login Form Card: Light Grey with Rounded Corners */
body.login div#login form#loginform {
    background: #f4f4f4 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
    padding: 32px 24px !important;
}

/* Form Input Text Labels adjustment */
body.login label {
    color: #222222 !important;
    font-weight: 600 !important;
}

/* Standard Base State Entry Fields */
body.login input[type="text"], 
body.login input[type="password"] {
    border-radius: 6px !important;
    border: 1px solid #cccccc !important;
    padding: 10px !important;
}

/* 4. Active / Focused Input Field States (Matte Black Borders) */
body.login input[type="text"]:focus, 
body.login input[type="password"]:focus,
body.login input[type="checkbox"]:focus {
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 1px #1a1a1a !important; /* Perfect matte ring indicator */
    outline: 2px solid transparent !important; /* Cleans native browser blue glows */
}

/* 5. Password Visibility Toggle Icon Color (Eye Icon in Matte Black) */
body.login .wp-pwd .dashicons-visibility,
body.login .wp-pwd .dashicons-hidden {
    color: #1a1a1a !important;
}
body.login .wp-pwd .button:hover .dashicons-visibility,
body.login .wp-pwd .button:hover .dashicons-hidden {
    color: #444444 !important; /* Visual response click hint */
}

/* 6. Primary Action Login Button: Matte Black with White Text */
body.login .button-primary {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    height: 40px !important;
    line-height: 38px !important;
    padding: 0 16px !important;
    transition: background 0.2s ease-in-out !important;
}
body.login .button-primary:hover,
body.login .button-primary:focus {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

/* 7. Footer Recovery & Navigation Links ("Lost your password?") */
body.login #nav a, 
body.login #backtoblog a {
    color: #aaaaaa !important;
    font-weight: 500 !important;
    transition: color 0.2s ease-in-out !important;
}
body.login #nav a:hover, 
body.login #backtoblog a:hover {
    color: #ffffff !important;
}