/**
 * This stylesheet applies to the "Recent Posts" table in index.md.
 */

/* Base class style */
.recent-posts
{
    margin: 6.0rem auto 0 auto;
    max-width: 800px;
    text-align: center;
    color: white;
}

/* Base table style */
.recent-posts table
{
    width: 100%;
    min-width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 auto;
    font-size: 0.7rem;
}

/* Disable the table header */
.recent-posts table thead
{
    display: none !important;
}

/* Table border style */
.recent-posts tr,
.recent-posts th,
.recent-posts td
{
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid rgba(255, 255, 255, 0.2);
}

/* Table content font size */
.recent-posts a,
.recent-posts td
{
    font-size: 0.8rem;
    font-weight: 500;
}

/* Post title style */
.recent-posts a
{
    color: #fff;
    text-decoration: none;
}

/* Post title style when hovered by cursor */
.recent-posts a:hover
{
    color: red;
    text-decoration: underline;
}

/* Kill theme background colors */
.recent-posts table,
.recent-posts th,
.recent-posts td
{
    background-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

/* Let the Title column take up all remaining space */
.recent-posts table th:first-child,
.recent-posts table td:first-child
{
    width: auto;
}

/* Keep the Date column tight to its content */
.recent-posts table th:last-child,
.recent-posts table td:last-child
{
    width: 1%;
    white-space: nowrap;
}

/* Force the table to extend to max-width */
.recent-posts>div,
.recent-posts .md-typeset__table,
.recent-posts .table-wrapper
{
    width: 100% !important;
    display: inline !important;
}

/* Table header style */
.recent-posts .heading
{
    font-family: var(--md-heading-font-family);
    font-weight: 600;
    font-size: clamp(1.0rem, 1.4vw, 1.2rem);
    color: white;
    margin-bottom: -1rem;
    text-align: left;
}

/* Debug render a bounding box around the table content */
/* .recent-posts
{
    outline: 1px solid red;
} */

/* Debug render a bounding box around the table's markdown typeset content */
/* .recent-posts .md-typeset__table
{
    outline: 1px solid lime;
} */