/*
 Theme Name:  Divi Child Theme
 Theme URI:    https://divilife.com
 Description:  Child Theme for Divi
 Author:       Tim Strifler
 Author URI:   https://divilife.com
 Template:     Divi
 Version:      1.0.0
*/

/*****Add any custom CSS below this line*****/

/*LOGIN FORM*/
/* 1. Reset the wrapper width so it fills the column */
#loginform {
    max-width: 100% !important;
    width: 100%;
}

/* 2. Style the Labels to sit above the fields */
#loginform label {
    display: block;       /* Forces label to its own line */
    margin-bottom: 8px;   /* Adds space between label and input */
    font-weight: 600;     /* Makes text slightly bold like Divi defaults */
    color: #333;
}

/* 3. Style the Input fields to be full width and look like Divi */
#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;          /* Overrides the size="16" constraint */
    padding: 16px;        /* Standard Divi padding */
    background-color: #eee; /* Light grey background */
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-bottom: 10px;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    font-size: 14px;
}

/* 4. Fix the Radio Button Alignment */
/* The HTML has inline styles on a span we need to override */
#loginform form[name="frmNeedHelp"] > span {
    padding-left: 0 !important; /* Removes the 3% indent */
    display: block;             /* Ensures it takes up space correctly */
    margin-bottom: 20px;
    margin-top: 10px;
}

/* 5. Space out the radio buttons slightly */
#loginform input[type="radio"] {
    width: auto !important; /* Don't let these become full width */
    margin-right: 5px;
    margin-left: 15px;      /* Space between options */
}
/* Remove margin for the very first radio button */
#loginform input[type="radio"]:first-of-type {
    margin-left: 0;
}

/* 6. Style the Buttons */
#loginform .et_pb_button_module_wrapper {
    padding-left: 0 !important; /* Align button to the left */
}

/* Menu Red Button */
/* --- 1. Style the "Login" Menu Item --- */
/* Target the link inside the list item with class 'red-button' */
#top-menu li.red-button a {
    background-color: rgb(191, 0, 0) !important; /* Your specific red */
    color: #ffffff !important;                   /* White text */
    border-radius: 16px !important;              /* Rounded corners from screenshot */
    padding: 7px 17px !important;                /* Exact padding from screenshot */
    
    font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;                 /* Bold */
    font-size: 17px !important;                  /* Size */
    text-transform: uppercase !important;        /* ALL CAPS */
    
    border: none !important;
    transition: all 0.3s ease;                   /* Smooth hover animation */
    
    /* Fix alignment - buttons often sit lower than text links */
    vertical-align: middle;
    margin-top: -2px; 
}

/* Menu Item Hover Effect */
#top-menu li.red-button a:hover {
    background-color: #cc0000 !important;        /* Slightly darker red on hover */
    opacity: 0.9;
    transform: translateY(-2px);                 /* Slight lift effect */
}

/* --- Fix Logo Size at Tablet/Transition Breakpoint --- */

/* 1. Set a hard limit on the logo width for screens smaller than desktop */
@media screen and (max-width: 1100px) {
    #logo {
        max-width: 250px !important; /* Forces the logo to be smaller */
        height: auto !important;     /* Maintains the aspect ratio */
        max-height: 60px !important; /* Ensures it doesn't get too tall */
    }
}

/* 2. (Optional) General safety for the logo on all screens */
/* This prevents the 2560px image from ever breaking the layout */
#logo {
    max-width: 350px; /* Adjust this value if you want it larger on big screens */
    width: 100%;
}