/* ====================================================== */
/* == Fall Risk Assessment Tool Styles (WordPress Ready) == */
/* ====================================================== */

/* --- PLEASE ADJUST FONTS AND COLORS BASED ON VIPELDERLY.COM --- */
/* These styles are approximations and should be verified against the live site. */

/* Apply base settings within the tool's scope */
#fall-risk-assessment-tool {
    /* Example: Using Open Sans (ensure font is loaded via HTML or theme) */
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    /* Example: Common dark grey text color */
    color: #333333;
    /* Define base font size for calculations within the tool */
    font-size: 16px;

    /* Container styles */
    max-width: 650px;
    margin: 20px auto; /* Centering */
    background-color: #ffffff; /* White container */
    padding: 30px 35px;
    border-radius: 8px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */ /* --- REMOVED --- */
    border: 1px solid #000000; /* --- UPDATED BORDER --- */
}

/* Headings and Text within the tool */
#fall-risk-assessment-tool h1,
#fall-risk-assessment-tool h2,
#fall-risk-assessment-tool h3 {
    /* Example: Primary blue/teal color - GET EXACT CODE FROM SITE */
    color: #005A7B;
    font-weight: 700;
}

#fall-risk-assessment-tool h1 {
    text-align: center;
    margin-top: 0; /* Remove default top margin if inside div */
    margin-bottom: 20px;
    font-size: 1.8em; /* ~29px */
}

#fall-risk-assessment-tool h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.5em; /* ~24px */
}

#fall-risk-assessment-tool h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.3em; /* ~21px */
}

#fall-risk-assessment-tool p {
    margin-bottom: 15px;
    color: #555555; /* Slightly lighter text */
}

/* Form Styling within the tool */
#fall-risk-assessment-tool #assessment-form fieldset {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #ffffff;
}

#fall-risk-assessment-tool #assessment-form legend {
    font-weight: 700;
    padding: 0 10px;
    font-size: 1.15em; /* ~18px */
    color: #333;
}

/* Radio & Checkbox Labels within the tool */
#fall-risk-assessment-tool #assessment-form label {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 1em; /* 16px */
    color: #495057;
    padding-left: 5px;
    position: relative;
}

#fall-risk-assessment-tool #assessment-form input[type="radio"],
#fall-risk-assessment-tool #assessment-form input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.2);
    position: relative;
    top: 0px;
    cursor: pointer;
    /* Example: Use primary color for the check/dot - GET FROM SITE */
    accent-color: #007B9A;
}

/* --- BUTTON STYLES within the tool --- */
/* Base button style - GET EXACT PADDING, RADIUS, FONT-WEIGHT FROM SITE */
#fall-risk-assessment-tool button {
    display: inline-block;
    width: auto;
    padding: 12px 25px;
    font-size: 1.1em; /* ~18px */
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 6px; /* Example rounded corners */
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-transform: none; /* Assuming normal case buttons */
}

#fall-risk-assessment-tool button:hover {
    /* Hover background defined per button below */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Specific Button Styles within the tool */
#fall-risk-assessment-tool #submit-btn {
     /* --- UPDATED COLOR --- */
     background-color: #2463eb;
     display: block; /* Make submit full width */
     width: 100%;
     margin-top: 20px;
}
#fall-risk-assessment-tool #submit-btn:hover {
     /* --- Darker shade for hover --- */
     background-color: #1f54c7; /* Adjusted darker blue */
}

#fall-risk-assessment-tool #cta-button {
    /* --- UPDATED COLOR --- */
    background-color: #e86331;
    font-size: 1.15em; /* ~18px */
    padding: 14px 30px;
}
#fall-risk-assessment-tool #cta-button:hover {
    /* --- Darker shade for hover --- */
    background-color: #d15324; /* Adjusted darker orange */
}

/* Results Area within the tool */
#fall-risk-assessment-tool #results {
    margin-top: 35px;
    padding: 25px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background-color: #f1f7fa; /* Slightly different background */
}

#fall-risk-assessment-tool #risk-level {
    font-weight: bold;
    font-size: 1.4em; /* ~22px */
    display: block; /* Ensure it takes space */
    margin-bottom: 10px;
}

/* Risk Level Specific Colors (Keep standard or adjust to site alert colors) */
#fall-risk-assessment-tool .risk-low { color: #28a745; } /* Standard Green */
#fall-risk-assessment-tool .risk-moderate { color: #ffc107; } /* Standard Yellow/Orange */
#fall-risk-assessment-tool .risk-high { color: #dc3545; } /* Standard Red */

#fall-risk-assessment-tool #recommendations-list {
    list-style: disc;
    padding-left: 25px;
    margin-top: 15px;
    margin-bottom: 0; /* Reset bottom margin if needed */
}

#fall-risk-assessment-tool #recommendations-list li {
    margin-bottom: 12px;
    color: #495057;
}

#fall-risk-assessment-tool #recommendations-list li strong {
    color: #333;
}

/* Make links in recommendations stand out */
#fall-risk-assessment-tool #recommendations-list li a {
    color: #005A7B; /* Example link color */
    text-decoration: underline;
    font-weight: bold;
}
#fall-risk-assessment-tool #recommendations-list li a:hover {
     color: #003d52; /* Darker hover */
}


/* CTA Section within the tool */
#fall-risk-assessment-tool .cta-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #dee2e6; /* Lighter separator */
    text-align: center;
}
#fall-risk-assessment-tool .cta-section h3 {
    font-size: 1.4em; /* ~22px */
}
#fall-risk-assessment-tool .cta-section p {
    font-size: 1.05em; /* ~17px */
    margin-bottom: 20px;
}

/* Responsive Design specific to the tool */
@media (max-width: 600px) {
    #fall-risk-assessment-tool {
        padding: 20px 15px;
        margin: 10px auto;
    }
    #fall-risk-assessment-tool h1 { font-size: 1.6em; }
    #fall-risk-assessment-tool h2 { font-size: 1.4em; }
    #fall-risk-assessment-tool h3 { font-size: 1.2em; }

    #fall-risk-assessment-tool button,
    #fall-risk-assessment-tool #cta-button,
    #fall-risk-assessment-tool #submit-btn {
        padding: 12px 20px;
        font-size: 1em; /* Adjust base button size */
    }

    #fall-risk-assessment-tool #assessment-form label {
        font-size: 1em;
        margin-bottom: 12px;
    }
    #fall-risk-assessment-tool #assessment-form fieldset {
        padding: 15px;
    }
    #fall-risk-assessment-tool #results { padding: 20px; }
    #fall-risk-assessment-tool .cta-section { padding-top: 20px; }
     #fall-risk-assessment-tool .cta-section h3 { font-size: 1.3em; }
     #fall-risk-assessment-tool .cta-section p { font-size: 1em; }

}

/* Accessibility Focus Styles - Scoped within the tool */
#fall-risk-assessment-tool *:focus {
    /* Example Focus Color - GET FROM SITE or use a clear default */
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Hide outline if focus-visible is supported and it's not needed (e.g., mouse click) */
#fall-risk-assessment-tool *:focus:not(:focus-visible) {
  outline: none;
  outline-offset: 0px;
}

/* Make keyboard focus very clear */
#fall-risk-assessment-tool *:focus-visible {
   outline: 3px solid #0056b3; /* Example Focus Color - GET FROM SITE */
   outline-offset: 1px;
}

/* Ensure no external body styles interfere if tool is loaded standalone */
body.tool-standalone-mode {
    background-color: #f8f9fa; /* Match default body bg */
    padding: 20px; /* Add padding if viewed directly */
    font-family: 'Open Sans', sans-serif; /* Ensure font loads */
}
/* Add class="tool-standalone-mode" to body tag in index.html if testing directly */