/* quitters-extra.css — additions layered over the captured Kube CSS.
   Covers: the extra "journal" nav item, the DB-backed blog/journal section, and
   the keyless location-map iframe. Palette matches the capture exactly:
   teal #42a7b3 / #5598a0, cream #efece2, charcoal #3e393c. Headings inherit the
   captured hand_bookregular webfont from customstyles.css. */

/* ---------- nav: fit 5 links + centred logo (journal added) ---------- */
nav > div { max-width: 47rem; }
#nav-container > a:nth-child(5) { order: 5; } /* journal */
#nav-container > a:nth-child(6) { order: 6; } /* location & hours */
#nav-container > a.burger       { order: 7; }

@media (max-width: 768px) {
    nav > div { max-width: 48rem; }
    #nav-container > a:nth-child(5),
    #nav-container > a:nth-child(6) {
        width: 100%;
        text-align: left;
        padding: 1rem;
        border-bottom: 1px solid rgba(243, 239, 234, 0.3);
    }
}

/* ---------- location map (keyless Google embed replacing #map) ---------- */
.locmap { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* ---------- journal / blog ---------- */
#blog-list,
#blog-single {
    background: #efece2;
    padding-top: 5rem;
    padding-bottom: 6rem;
}
#blog-list .lrg-txt { margin-bottom: 3rem; }

.blog-card {
    text-align: left;
    background: #ffffff;
    border: 1px solid #e3ddcf;
    padding: 2rem 2.25rem;
    margin-bottom: 1.75rem;
}
.blog-meta {
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5598a0;
    margin-bottom: 0.4rem;
}
.blog-cate { color: #8a8378; }
.blog-title { text-align: left; font-size: 2.25rem; line-height: 1.05; margin: 0 0 0.75rem; }
.blog-title a { color: #3e393c; text-decoration: none; }
.blog-title a:hover { color: #42a7b3; }
.blog-excerpt { font-size: 1.125rem; color: #434343; line-height: 1.5; text-align: left; margin-bottom: 1rem; }
.blog-byline { font-size: 0.95rem; color: #8a8378; text-align: left; margin: 0; }
.blog-more { color: #42a7b3; text-decoration: none; margin-left: 0.5rem; white-space: nowrap; }
.blog-more:hover { text-decoration: underline; }

/* single post */
.blog-article { text-align: left; background: #ffffff; border: 1px solid #e3ddcf; padding: 2.5rem 2.75rem; }
.blog-crumb { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #8a8378; margin-bottom: 1rem; }
.blog-crumb a { color: #42a7b3; text-decoration: none; }
.blog-headline { text-align: left; font-size: 3rem; line-height: 1.02; color: #3e393c; margin: 0 0 0.75rem; }
#blog-single .blog-meta { margin-bottom: 2rem; }
.blog-body { text-align: left; }
.blog-body p { font-size: 1.1875rem; color: #3e393c; line-height: 1.65; margin-bottom: 1.4rem; text-align: left; }
.blog-body h4 { text-align: left; font-size: 2rem; color: #5598a0; margin: 2rem 0 0.75rem; letter-spacing: 1px; }
.blog-body a { color: #42a7b3; text-decoration: none; border-bottom: 1px solid rgba(66, 167, 179, 0.4); }
.blog-body a:hover { color: #5598a0; border-bottom-color: #5598a0; }
.blog-body ul { text-align: left; margin: 0 0 1.4rem 1.25rem; }
.blog-body li { font-size: 1.1875rem; color: #3e393c; line-height: 1.6; margin-bottom: 0.5rem; }

.blog-author { margin-top: 2.25rem; padding: 1.25rem 1.5rem; background: #efece2; border: 1px solid #e3ddcf; }
.blog-author-name { text-align: left; font-weight: 700; color: #3e393c; margin: 0 0 0.3rem; }
.blog-author-name .role { font-weight: 400; color: #8a8378; }
.blog-author-bio { text-align: left; font-size: 1rem; color: #555; line-height: 1.6; margin: 0; }
.blog-back { text-align: left; margin-top: 2rem; }

/* sidebar */
.blog-side { text-align: left; }
.side-box { margin-bottom: 2.25rem; }
.side-box h3 { text-align: left; color: #42a7b3; font-size: 1.75rem; margin-bottom: 0.75rem; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { border-bottom: 1px solid #ddd6c7; padding: 0.5rem 0; font-size: 1.0625rem; line-height: 1.4; }
.side-list a { color: #3e393c; text-decoration: none; }
.side-list a:hover { color: #42a7b3; }
.side-list .fa { color: #42a7b3; margin-right: 0.35rem; }
.side-list.authors li { color: #3e393c; }
.side-list.authors .role { font-size: 0.85rem; color: #8a8378; }

@media (max-width: 768px) {
    .blog-card, .blog-article { padding: 1.5rem 1.4rem; }
    .blog-headline { font-size: 2.25rem; }
    .blog-side { margin-top: 2.5rem; }
}