/* app.public.css */
:root {
    --body-padding-bottom: 72px;
    --main-padding-top: 94px;
}

/* headers */
h1, header.h1 {
    color: var(--h1-fg);
    font-size: 2.0rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding-bottom: 2px;
}

h2, header {
    color: var(--h2-fg);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

h3 {
    color:var(--h2-fg);
    font-size:1.25rem;
}

h4 {
    color:var(--h2-fg);
    font-size:1.125rem;
}

h5 {
    color:var(--h2-fg);
    font-size:1.05rem;
}

/* provides blockquote style and overrides editor's blockquote style */
blockquote {
    border-left: 5px solid #5784ff !important;
    font-style: italic !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

p {margin-bottom: 0.75rem}

.btn-link:focus, .btn-link:active:focus{box-shadow: none;}

.breadcrumb {
    display: block;
    font-variant: all-small-caps;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 0;
    margin-left: 2px;
}
.breadcrumb a {color:#6a6a6a}
.breadcrumb span {margin-left:2px;margin-right:2px;color:#bbb}

.card {margin-bottom: 1rem;}

.contributor-list {padding: 10px}
.contributor-list div {margin-bottom: 2px}

.delimeter {
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: #d10000;
}

/* grid list, used on home page */
.grid-list {
    display: grid;
    gap:8px;
    grid-template-columns: 1fr;
}

.grid-list-content {
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    min-height: 120px;
    padding: 5px;
}

.grid-list-content img {
    max-width: 100%;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .grid-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .grid-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* other grids (to review) */

.grid {
  display:grid;
  margin-top: 4px;
  margin-bottom:10px;
  gap:6px;
}

.image-header {
    column-gap: 10px;
    display: grid;
    grid-template-columns: 120px auto;
    margin-bottom: 16px;
}

.image-header img {
    border-radius: 56px;
    max-width: 112px;
}

.issue {
    align-items: center;
    background-color: #0044cf12;
    border-left: 3px solid var(--nav-bg);
    display: flex;
    margin-bottom: 1rem;
    margin-left: 12px;
    padding:8px;
}

.issue-icon {
    margin-right: 6px;
}

.issue-icon i {
    color:var(--nav-bg);
    font-size:2.5rem;
}

.issue-detail {margin-left: 16px}
.issue-detail a {display:block}
.issue-detail div {margin: 6px}

.issue-head {
    align-items: center;
    border-bottom: 1px solid var(--h1-border);
    display:flex;
    margin-bottom: 1rem;
    padding:5px;
}

.issue-head h1 {margin:0;padding:0;border:none;}
/* open */
.issue-status-100 {border-color:#009557}
.issue-status-100 i {color:#009557;}

/* pending */
.issue-status-500 {
    background-color: #f3f3f3;
    border-color: #bfbfbf;
    opacity: 0.85;
}
.issue-status-500 i {color:#7a7a7a}

.issue span {color:#b30000;}
/* open, voting */
.issue-span-status-100,
.issue-span-status-25 {font-weight:500}

.story-list {
    border-bottom: 1px solid var(--h1-border);
    margin-bottom: 1rem;
}
.story-list:last-child {border-bottom: none}

.story-list-toc {border-bottom: none}
.story-list-toc h2 {font-size: 1.15rem}

.wait-obj {margin-top:10px;text-align: center;display: none}

textarea.form-control {min-height: 170px}
/* images */
figure {margin: 0 0 12px 0}
figure img {border:1px solid #c7c7c7; border-radius:5px; max-width:100%}

figcaption {
    font-size: 80%;
    color:gray;
    text-align: center;
    margin-top: 6px;
}

#post-footer {
    align-items: center;
    border-bottom: var(--border-default);
    border-top: var(--border-default);
    display: grid;
    font-size: 15px;
    grid-template-columns: 32px auto;
    margin-bottom: 12px;
    padding: 12px 6px;
}

#post-footer i {
    color:#f00;
    font-size: var(--size-18);
}