/*
 * page_static_news.css
 * Public static page styling aligned with News/Notice look.
 * Intentionally scoped to page.php via .page-handler.
 */

.page-handler .static-page-layout {
    margin-top: 12px;
}

/* Two-column layout: LEFT sidebar, RIGHT content.
   No dependency on Bootstrap; scoped to page.php. */
.page-handler .static-page-layout {
    display: block;
}

@media (min-width: 769px) {
    .page-handler .static-page-layout {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    .page-handler .static-page-sidebar {
        flex: 0 0 280px;
        max-width: 280px;
    }

    .page-handler .static-page-main {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .page-handler .static-page-sidebar {
        margin-bottom: 12px;
    }
}

/* Reuse style.css's .notice-detail-block as the base card.
   Tweak spacing slightly for page.php content blocks. */
.page-handler .static-page-card.notice-detail-block {
    margin-bottom: 15px;
    padding: 24px;
}

.page-handler .static-page-card .notice-detail-content,
.page-handler .static-page-card .static-page-content {
    /* Ensure readable body text on the light card background */
    color: var(--gray-darker);
}

/* Sidebar card: same base, tighter padding */
.page-handler .static-page-sidebar-card.notice-detail-block {
    padding: 12px;
}

.page-handler .static-page-sidebar-title {
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--gray-light-medium);
    color: var(--gray-darkest);
}

.page-handler .static-page-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page-handler .static-page-sidebar-list li {
    margin: 0;
}

.page-handler .static-page-sidebar-list a {
    display: block;
    padding: 8px 10px;
    border-radius: 3px;
    text-decoration: none;
    color: var(--primary-dark);
}

.page-handler .static-page-sidebar-list a:hover {
    background: var(--gray-light);
    text-decoration: underline;
}

.page-handler .static-page-sidebar-list li.active a {
    background: var(--gray-medium);
    color: var(--gray-darkest);
    font-weight: bold;
}

.page-handler .static-page-sidebar-list li.back a {
    color: var(--gray-darkest);
    background: var(--gray-light);
}