/*
 Theme Name:   Twenty Twelve Child
 Description:  Updated Child Theme to make sidebar visible and support toggle functionality.
 Author:       Your Name
 Template:     twentytwelve
 Version:      1.5.0
*/

/* Correct layout for content and sidebar */
.site-content {
    display: flex; /* Enables content layout alongside the sidebar */
    flex-wrap: nowrap; /* Prevents wrapping */
    gap: 20px; /* Space between sidebar and main content */
    justify-content: space-between; /* Aligns elements horizontally */
    align-items: flex-start; /* Aligns items at the top */
    margin: 0 auto; /* Horizontal centering */
    max-width: 960px; /* Restrict layout width */
}

/* Main Content Styles */
#primary {
    flex: 3; /* Allocate space for content */
    margin: 0;
}

/* Sidebar Styles */
#secondary.widget-area {
    flex: 1; /* Sidebar occupies proportional space */
    width: 360px; /* Sidebar width */
    background: #f5f5f5; /* Light gray background */
    padding: 15px; /* Sidebar padding */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin: 0; /* Remove unwanted margins */
    min-height: 150px; /* Ensure sidebar visibility even if empty */
    position: fixed; /* Pin sidebar to viewport */
    top: 0; /* Align to the top of the viewport */
    right: 0; /* Align to the far right */
    height: 100vh; /* Stretch sidebar from top to bottom */
    overflow-y: auto; /* Enable scrolling for lengthy content */
    z-index: 10000; /* Ensure sidebar is visible above all other elements */
    transition: transform 260ms ease-in-out; /* Smooth toggle animation */
    transform: translateX(0); /* Default: visible */
}

#secondary.widget-area.closed {
    transform: translateX(100%); /* Hidden when closed */
}

/* Sidebar Heading Styles */
#secondary h2 {
    font-size: 18px; /* Increase heading size for visibility */
    font-weight: bold; /* Make headings stand out */
    color: #333; /* Dark text for better readability */
    margin-bottom: 15px; /* Add spacing below headings */
}

/* Widgets in Sidebar */
#secondary .widget {
    margin-bottom: 20px; /* Add space between widgets */
    display: block; /* Ensure each widget is visible */
}

/* Sidebar Toggle Handle */
.sidebar-toggle-handle {
    position: fixed; /* Fixed for easy access */
    top: 50%; /* Centered vertically */
    transform: translateY(-50%);
    width: 44px; /* Adjustable width */
    height: 44px; /* Adjustable height */
    background: #fff;
    border: 3px solid #e53935; /* Noticeable border */
    color: #e53935;
    border-radius: 6px; /* Rounded button corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); /* Subtle shadow */
    cursor: pointer;
    z-index: 10001; /* Above sidebar */
}

.sidebar-toggle-handle.open {
    right: 368px; /* Sidebar width + gap */
}

.sidebar-toggle-handle.closed {
    right: 10px; /* Positioned close when sidebar is hidden */
}

/* Adjust Content for Sidebar */
#primary {
    margin-right: 360px; /* Space reserved for fixed sidebar */
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    .site-content {
        flex-direction: column; /* Stack content vertically */
        gap: 15px; /* Reduce spacing */
    }

    #secondary.widget-area {
        position: static; /* Remove fixed positioning */
        height: auto; /* Fit content dynamically */
        margin-top: 20px; /* Add margin above the sidebar */
        z-index: 1; /* Lower z-index for stacking */
    }

    #primary {
        margin-right: 0; /* Remove fixed margin for stacking */
    }

    .sidebar-toggle-handle {
        position: absolute; /* Reset fixed positioning */
        right: 20px; /* Move toggle button closer */
    }
}

@media screen and (max-width: 480px) {
    #secondary.widget-area {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .sidebar-toggle-handle {
        width: 36px; /* Smaller toggle button */
        height: 36px; /* Adjust button height */
        font-size: 14px; /* Shrink text size */
        right: 10px; /* Position closer to the edge */
    }
}

.questions-list-gap {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default list padding */
    margin: 0; /* Remove default list margins */
}

.questions-list-gap .question-item {
    padding: 5px 0; /* Add vertical padding */
    border-bottom: 1px solid #ddd; /* Add a light separator line */
}

.questions-list-gap .question-item:last-child {
    border-bottom: none; /* Remove bottom border from the last question */
}

/* Sidebar questions CSS */
.question-item {
    font-size: 14px; /* Keep the current font size if it fits your design */
    cursor: pointer; /* Change the cursor to a hand pointer */
    padding: 5px 0; /* Add some padding between questions */
    border-bottom: 1px solid #ddd; /* Add a light separator line between questions */
}

.question-item:hover {
    background-color: #f9f9f9; /* Add hover feedback for better user experience */
}