/* Reset default browser styles for consistency across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and borders are included in element sizes */
    font-family: 'Roboto', sans-serif; /* Use Roboto font from Google Fonts */
}

/* Body: Light gray background for a clean look */
body {
    background: #f4f4f4;
    color: #333; /* Dark text for readability */
}

/* Hero Section: Header with gym background image */
.hero {
    background: url('gym.jpg') no-repeat center/cover; /* Gym image, centered and scaled */
    height: 50vh; /* Half viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; /* White text for contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Shadow for readability on image */
}

/* Hero headline */
.hero h1 {
    font-size: 3rem; /* Large, bold title */
}

/* Hero paragraph */
.hero p {
    font-size: 1.2rem;
    margin: 10px 0; /* Spacing above and below */
}

/* Hero button: Coral-themed call-to-action */
.hero button {
    padding: 10px 20px;
    font-size: 1rem;
    background: #ff6f61; /* Coral color */
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out; /* Smooth hover effects */
}

/* Hero button hover: Darker coral and slight scale */
.hero button:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Tracker, Progress, Quote, Affiliate: Card-like containers */
.tracker, .progress, .quote, .affiliate {
    padding: 40px; /* Spacious padding */
    max-width: 800px; /* Constrain width for readability */
    margin: 20px auto; /* Center with spacing */
    background: white; /* White background for card effect */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Section headings */
.tracker h2, .progress h2, .quote h2, .affiliate h3 {
    margin-bottom: 20px; /* Space below headings */
}

/* Goal form: Grid layout for inputs and dropdowns */
#goal-form {
    display: grid;
    gap: 10px; /* Spacing between form elements */
    margin-bottom: 20px; /* Space below form */
}

/* Goal form dropdowns (goal, fitness level, body part) */
#goal-form select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 5px;
}

/* Input group for height and weight with unit dropdowns */
.input-group {
    display: flex;
    gap: 5px; /* Space between input and dropdown */
    align-items: center;
}

/* Height and weight inputs */
#goal-form input[type="number"],
#goal-form input[type="text"] {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 5px;
    width: 100%; /* Full width for consistency */
}

/* Read-only BMI input */
#goal-form input[readonly] {
    background: #f9f9f9; /* Light gray to indicate read-only */
    cursor: not-allowed;
}

/* BMI category text */
#bmi-category {
    font-size: 0.9rem;
    color: #333;
    margin-top: 5px;
}

/* Goal form submit button: Coral-themed */
#goal-form button[type="submit"] {
    background: #ff6f61; /* Coral */
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

/* Goal form submit button hover */
#goal-form button[type="submit"]:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Suggest Workout button: Coral-themed */
#suggest-workout {
    background: #ff6f61;
    color: white;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px; /* Space below buttons */
    margin-right: 10px; /* Space between buttons */
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

/* Suggest Workout button hover */
#suggest-workout:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Suggestion output: Styled like workout items */
#suggestion-output {
    padding: 10px;
    background: #f9f9f9; /* Light gray background */
    border-radius: 5px;
    margin-top: 10px; /* Space above output */
    margin-bottom: 10px; /* Space below output */
}

/* Progress chart: Constrain size */
#progressChart {
    max-height: 300px;
    width: 100%;
}

/* Tracker form: Grid layout for inputs */
.tracker form {
    display: grid;
    gap: 10px; /* Spacing between form elements */
}

/* Form inputs (exercise, sets, reps, weight, distance, time) */
.tracker input {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 5px;
}

/* Time input container */
.time-input {
    display: flex;
    gap: 5px;
}

.time-input input,
.time-input select {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Form submit button: Coral-themed */
.tracker button[type="submit"] {
    background: #ff6f61; /* Coral */
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

/* Submit button hover: Darker coral and scale */
.tracker button[type="submit"]:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Clear Workouts button: Coral-themed, below form */
#clear-workouts {
    background: #ff6f61;
    color: white;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; /* Space above button */
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

/* Clear Workouts button hover */
#clear-workouts:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Workout list container */
#workout-list {
    margin-top: 20px; /* Space above workout list */
}

/* Workout items: Flexbox for checkbox, text, and buttons */
.workout-item {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between elements */
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Separator line */
    background: #f9f9f9; /* Light gray background */
    border-radius: 5px;
}

/* Completed workouts: Deku-green background and strikethrough */
.workout-item.completed {
    background: #d0ffd0; /* MHA-inspired Deku green */
    text-decoration: line-through;
}

/* Checkbox styling */
.workout-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

/* Edit and Delete buttons */
.edit-button, .delete-button {
    padding: 5px 10px;
    font-size: 0.9rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px; /* Space from text */
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

/* Edit button: Green */
.edit-button {
    background: #4caf50;
    color: white;
}

/* Edit button hover */
.edit-button:hover {
    background: #45a049;
    transform: scale(1.05);
}

/* Delete button: Red */
.delete-button {
    background: #ff4c4c;
    color: white;
}

/* Delete button hover */
.delete-button:hover {
    background: #cc3d3d;
    transform: scale(1.05);
}

/* Chart controls: Flexbox for dropdowns */
.chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.chart-controls label {
    font-size: 1rem;
    margin-right: 5px;
}

.chart-controls select {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Goal progress section */
.goal-progress {
    margin-bottom: 20px;
}

#goal-progress-form {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#goal-progress-form input,
#goal-progress-form select {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#goal-progress-form button {
    background: #ff6f61;
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

#goal-progress-form button:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 20px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-fill {
    height: 100%;
    background: #4caf50; /* Deku green */
    width: 0; /* Dynamically updated */
    transition: width 0.3s ease-in-out; /* Smooth animation */
}

.progress-fill.completed {
    background: #4caf50; /* Green when goal achieved */
}

/* Streak section */
.streak {
    margin-bottom: 20px;
}

#streak-text {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6f61; /* Coral for emphasis */
}

/* Progress actions (reset/export buttons) */
.progress-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

#reset-progress, #export-progress {
    background: #ff6f61;
    color: white;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

#reset-progress:hover, #export-progress:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Progress section text: Bold for visibility */
.progress p {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

/* Affiliate link: Coral color */
.affiliate a {
    color: #ff6f61;
    text-decoration: none;
}

/* Affiliate link hover */
.affiliate a:hover {
    text-decoration: underline;
}

/* Footer: Dark background with white text */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: white;
}

/* Beta button in hero section */
.beta-button {
    padding: 10px 20px;
    font-size: 1rem;
    background: #ff6f61; /* Coral */
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

.beta-button:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Beta link in footer */
.beta-link {
    color: #ff6f61;
    text-decoration: none;
}

.beta-link:hover {
    text-decoration: underline;
}

/* Back button in beta page header */
.back-button {
    padding: 10px 20px;
    font-size: 1rem;
    background: #4caf50; /* Deku green */
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

.back-button:hover {
    background: #45a049;
    transform: scale(1.05);
}

/* Beta page section: Card-like container */
.beta-page {
    padding: 40px;
    max-width: 800px;
    margin: 20px auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Beta page heading and paragraph */
.beta-page h2 {
    margin-bottom: 20px;
    color: #333;
}

.beta-page p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #333;
}

/* HubSpot form styling */
#hubspotForm {
    margin-top: 10px;
}

.hs-form-frame input[type="text"],
.hs-form-frame input[type="email"],
.hs-form-frame select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 10px;
}

.hs-form-frame button[type="submit"] {
    background: #ff6f61; /* Coral */
    color: white;
    border: none;
    padding: 10px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
}

.hs-form-frame button[type="submit"]:hover {
    background: #e55a50;
    transform: scale(1.05);
}

/* Responsive: Adjustments for mobile screens */
@media (max-width: 600px) {
    .hero h1 {
        font-size: 2rem; /* Smaller headline */
    }
    .tracker, .progress, .quote, .affiliate, .beta-page {
        padding: 20px; /* Reduced padding */
    }
    .edit-button, .delete-button {
        padding: 5px 8px; /* Smaller buttons */
        font-size: 0.8rem;
    }
    .chart-controls {
        flex-direction: column;
    }
    #goal-progress-form {
        flex-direction: column;
    }
    .progress-actions {
        flex-direction: column;
    }
    /* Responsive input-group */
    .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    .input-group input,
    .input-group select {
        width: 100%;
    }
}