/*
 Theme Name:   Basel Child
 Description:  Basel Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     basel
 Version:      1.0.0
 Text Domain:  basel-child
*/

/* Your customizations start here */


/* ============================================================
   START OF RACING THEME LOGIN SCREEN (FIXED)
   ============================================================ */

/* 1. PAGE BACKGROUND & CENTERING */
body.login {
    /* Replace with your racetrack image URL */
    background-image: url('https://paddock.autoworxmotorsport.com/wp-content/uploads/2025/12/629bb538-a860-4ce2-a394-3422f72f7f45.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    
    /* Center the box vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

/* 2. MAIN LOGIN BOX (Carbon Fiber & Orange Glow) */
body.login #login {
    width: 400px;
    padding: 40px;
    margin: 0 auto; /* Removes the top margin error */
    position: relative;
    
    /* Carbon Fiber Texture */
    background-color: #111;
    background-image: 
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000),
        linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    
    /* Orange Borders & Glow */
    border: 2px solid #e65100;
    border-bottom: 8px solid #e65100; /* Tire tread style bottom */
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(230, 81, 0, 0.4);
}

/* 3. LOGO SPACING (The Margin Fix) */
body.login h1 {
    margin-bottom: 10px !important; /* Reduces gap below logo */
}

/* 4. FORM CLEANUP (The Margin Fix) */
body.login form#loginform {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important; /* Removes gap above inputs */
}

/* 5. LABELS */
body.login label {
    color: #ccc !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px !important;
    display: block;
}

/* 6. INPUT FIELDS (Dark with Orange Border) */
body.login input[type="text"],
body.login input[type="password"] {
    background-color: #0a0a0a !important;
    color: #fff !important;
    border: 1px solid #e65100 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px !important;
    margin-bottom: 20px !important;
    height: auto !important;
}

/* Fix for Yellow Autofill Background (Chrome/Edge) */
body.login input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
    -webkit-text-fill-color: white !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
    box-shadow: 0 0 15px rgba(230, 81, 0, 0.6) !important;
    border-color: #ff9100 !important;
    outline: none;
}

/* 7. "START ENGINE" BUTTON */
.wp-core-ui .button-primary {
    background: linear-gradient(to bottom, #ff8f00, #e65100) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase;
    padding: 8px 25px !important;
    height: auto !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    float: right;
    box-shadow: 0 4px 0 #b33d00 !important;
    transition: transform 0.1s;
    margin-top: 10px;
}

.wp-core-ui .button-primary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b33d00 !important;
}

/* 8. LINKS */
.login #backtoblog, .login #nav {
    padding: 0 !important;
    margin-top: 15px !important;
}

.login #backtoblog a, .login #nav a {
    color: #e65100 !important;
    text-decoration: none;
    font-size: 13px;
}

.login #backtoblog a:hover, .login #nav a:hover {
    color: #ff9100 !important;
    text-decoration: underline;
}

/* 9. HIDE LANGUAGE SWITCHER */
.language-switcher {
    display: none !important;
}

/* ============================================================
   END OF RACING THEME LOGIN SCREEN
   ============================================================ */