/* styles.css */

/* Styles for the main page body (class17.html) */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    display: flex; /* Use flexbox to stack header, content area, footer */
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-800 */
}

html {
    height: 100%;
}

/* Container for the Main Content (direct HTML) and the Menu iframe (side-by-side) */
.content-area-container {
    /* Removed justify-content: center; as it's not needed with flex-grow: 1 */
    display: flex; /* >>> Keep this! It enables the side-by-side layout. */
    /* This places items from left to right, reversing the RTL source order */
    flex-direction: row-reverse;
    flex-grow: 1; /* Allow this container to take up remaining vertical space */
    width: 1600px;
    margin: 0 auto;
    padding: 0 1rem; /* Add horizontal padding to the container for spacing */
    box-sizing: border-box; /* Include padding in container's total width */
    margin-top: -60px;
}

/* Styles specifically for the iframes in the main document */
iframe {
    border: none; /* Remove default iframe border */
    /* Basic iframe flex properties - these are defaults, but can be overridden */
    /* flex-basis: 0; */
    /* flex-grow: 1; */ /* This will be overridden by more specific rules below */
    /* flex-shrink: 0; */ /* This will be overridden by more specific rules below */
    height: 100%; /* Take full height of their parent container */
    overflow-y: auto; /* Enable scrolling *within* the iframe */
}

iframe.header-iframe,
iframe.footer-iframe {
    width: 100%; /* Header and footer span full width */
    height: auto; /* Let height be determined by content inside the iframe */
    flex-grow: 0;
    flex-shrink: 0;
    display: block; /* Remove extra space below iframe */
    margin-bottom: 0;
    vertical-align: top;
}

iframe.menu-iframe {
    width: 350px; /* >>> Fixed width for the menu iframe - This is correct */
    height: 1900px; /* Take full height of the content-area-container */
    flex-grow: 0; /* >>> Explicitly prevent growing */
    flex-shrink: 0; /* >>> Explicitly prevent shrinking below 500px */
    /* background-color and shadow are applied via Tailwind/custom classes linked inside menu-class17.html */
    /* margin-right: 1rem; */ /* Space handled by container padding */
}

/* Style for the Main Content area (which is direct HTML in class17.html) */
.main-content {
    /* >>> REMOVE width: 80%; <<< */
    /* >>> REMOVE margin: 0 auto; <<< */
    flex-grow: 1; /* >>> Allow the main content area to take up the rest of the space */
    overflow-y: auto; /* Enable scrolling for the main content area */
    background-color: #ffffff; /* White background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); /* shadow-inner */
    padding: 1.5rem; /* p-6 */
     /* margin-left: 1rem; */ /* Space handled by container padding */
    box-sizing: border-box; /* Include padding in element's total width */
}

.main-content-inner {
    width: 80%; /* Set the width of the content inside the main area */
    margin: 0 auto; /* Center the content horizontally within the main area */
    /* Add vertical padding or spacing within this inner container if needed */
}

/* Custom scrollbar styles (optional, browser support varies) */
/* These apply to elements with overflow in *any* document that links this CSS */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Style for the numbered circle - Used inside the menu iframe (linked styles.css) */
.class-number {
    width: 24px;
    height: 24px;
    background-color: #3b82f6; /* Blue 500 */
    color: white;
    border-radius: 9999px; /* Full rounded */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* text-sm */
    margin-left: 0.75rem; /* ml-3 - Use ml in RTL for space after the number */
}

/* Active state for the current class link - Used inside the menu iframe (linked styles.css) */
.active-class {
    background-color: #e0f2fe; /* Light blue */
    color: #0369a1; /* Darker blue */
    font-weight: 600; /* semibold */
}

/* Style for iframe containers to maintain aspect ratio - Used in the main content (class17.html) */
.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* Google Slides embed: 16:9 slide + ~40px of built-in controls bar, so the slide fills the frame (no side bars) */
.video-container.slides-container {
    padding-top: calc(56.25% + 40px);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Note: Sticky header/footer or menu is very complex or impossible with this iframe structure and pure CSS.
   The header and footer iframes will scroll off screen. The menu iframe will scroll within its fixed-height area.
   If you need sticky elements, consider reverting to the copy/paste or SSG approach. */