/*
Theme Name: VJX Journal
Theme URI: https://aasrvalleyofjax.org/
Description: 독립 비영리 여가문화 아카이브를 위한 GeneratePress 차일드 테마. 헤리티지 저널 톤.
Author: VJX
Template: generatepress
Version: 1.0
Text Domain: vjx-journal
*/

:root {
    --vjx-base: #f4efe6;
    --vjx-paper: #fffdf8;
    --vjx-mahogany: #6b2f2a;
    --vjx-mahogany-deep: #531e1a;
    --vjx-mustard: #b9851f;
    --vjx-mustard-deep: #8f6614;
    --vjx-ink: #2a2521;
    --vjx-muted: #6c6157;
    --vjx-line: #e2d7c5;
    --vjx-line-soft: #ece2d2;
    --vjx-display: "Zilla Slab", Georgia, serif;
    --vjx-serif-kr: "Song Myung", "Nanum Myeongjo", serif;
    --vjx-body: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

body {
    background-color: var(--vjx-base);
    color: var(--vjx-ink);
    font-family: var(--vjx-body);
    font-size: 17px;
    line-height: 1.78;
    letter-spacing: -0.005em;
}

.grid-container {
    max-width: 1216px;
}

a {
    color: var(--vjx-mahogany);
    transition: color 0.18s ease;
}

a:hover,
a:focus {
    color: var(--vjx-mustard-deep);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vjx-serif-kr);
    color: var(--vjx-ink);
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.vjx-topbar {
    background-color: var(--vjx-mahogany);
    color: var(--vjx-base);
}

.vjx-topbar-inner {
    max-width: 1216px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.vjx-topbar-label {
    font-family: var(--vjx-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vjx-base);
}

.vjx-topbar-date {
    font-family: var(--vjx-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #e9c98f;
}

.site-header {
    background-color: var(--vjx-paper);
    border-bottom: 1px solid var(--vjx-line);
    padding-top: 26px;
    padding-bottom: 26px;
}

.site-header .inside-header {
    align-items: center;
}

.site-branding {
    position: relative;
}

.main-title,
.site-title {
    font-family: var(--vjx-serif-kr);
    font-weight: 400;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.main-title a,
.site-title a {
    color: var(--vjx-mahogany);
}

.main-title a:hover {
    color: var(--vjx-mahogany-deep);
}

.site-description {
    font-family: var(--vjx-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--vjx-muted);
    margin-top: 6px;
}

.main-navigation,
.main-navigation .inside-navigation {
    background-color: var(--vjx-mahogany);
}

.main-navigation {
    border-top: 2px solid var(--vjx-mustard);
}

.main-navigation .main-nav ul li a {
    color: var(--vjx-base);
    font-family: var(--vjx-display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.03em;
    padding-top: 16px;
    padding-bottom: 16px;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
    color: #fff;
    background-color: var(--vjx-mahogany-deep);
    box-shadow: inset 0 -3px 0 var(--vjx-mustard);
}

.main-navigation .main-nav ul li.current-menu-item > a {
    color: #f6e7c4;
}

.main-navigation .menu-toggle {
    color: var(--vjx-base);
    font-family: var(--vjx-display);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.navigation-search input[type="search"],
.navigation-search input[type="search"]:focus {
    background-color: var(--vjx-mahogany-deep);
    color: var(--vjx-base);
}

button.search-toggle,
.main-navigation .main-nav .search-toggle {
    color: var(--vjx-base);
}

.separate-containers .inside-article,
.one-container .site-main {
    background-color: var(--vjx-paper);
}

.separate-containers .inside-article {
    border: 1px solid var(--vjx-line);
    border-left: 3px solid var(--vjx-mustard);
    padding: 38px 40px;
}

.entry-header {
    margin-bottom: 6px;
}

.entry-title {
    font-family: var(--vjx-serif-kr);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.entry-title a {
    color: var(--vjx-ink);
}

.entry-title a:hover {
    color: var(--vjx-mahogany);
}

.single .entry-title,
.page .entry-title {
    font-size: 38px;
    line-height: 1.26;
    color: var(--vjx-mahogany);
}

.entry-meta {
    font-family: var(--vjx-display);
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--vjx-muted);
}

.entry-meta a {
    color: var(--vjx-muted);
}

.entry-meta a:hover {
    color: var(--vjx-mahogany);
}

.entry-summary,
.entry-content {
    color: var(--vjx-ink);
}

.entry-content p {
    margin-bottom: 1.5em;
}

.entry-content h2 {
    font-size: 25px;
    margin-top: 1.7em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vjx-line);
}

.entry-content h3 {
    font-size: 21px;
    margin-top: 1.5em;
    color: var(--vjx-mahogany);
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--vjx-line);
    text-underline-offset: 3px;
}

.entry-content a:hover {
    text-decoration-color: var(--vjx-mustard);
}

.entry-content blockquote {
    border-left: 3px solid var(--vjx-mustard);
    background-color: var(--vjx-base);
    margin: 1.6em 0;
    padding: 16px 22px;
    font-family: var(--vjx-serif-kr);
    color: var(--vjx-mahogany-deep);
}

.entry-content img {
    border: 1px solid var(--vjx-line);
}

.vjx-readmore,
.read-more-container {
    margin-top: 18px;
}

.vjx-readmore-link,
a.read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--vjx-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--vjx-mahogany);
    border: 1px solid var(--vjx-mustard);
    padding: 9px 18px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.vjx-readmore-link::after,
a.read-more::after {
    content: "\2192";
    font-weight: 400;
}

.vjx-readmore-link:hover,
a.read-more:hover {
    background-color: var(--vjx-mahogany);
    color: var(--vjx-base);
}

.cat-links,
.tags-links {
    font-family: var(--vjx-display);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.cat-links a,
.tags-links a {
    display: inline-block;
    background-color: var(--vjx-base);
    border: 1px solid var(--vjx-line);
    color: var(--vjx-mahogany);
    padding: 3px 11px;
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 11px;
}

.cat-links a:hover,
.tags-links a:hover {
    background-color: var(--vjx-mustard);
    border-color: var(--vjx-mustard);
    color: #fff;
}

.sidebar .widget,
.footer-widgets .widget {
    margin-bottom: 30px;
}

.sidebar .widget {
    background-color: var(--vjx-paper);
    border: 1px solid var(--vjx-line);
    padding: 22px 24px;
}

.sidebar .widget .widget-title,
.footer-widgets .widget-title {
    font-family: var(--vjx-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--vjx-mahogany);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--vjx-mustard);
}

.sidebar .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .widget ul li {
    border-bottom: 1px solid var(--vjx-line-soft);
    padding: 9px 0;
    font-size: 15px;
}

.sidebar .widget ul li:last-child {
    border-bottom: none;
}

.sidebar .widget ul li a {
    color: var(--vjx-ink);
}

.sidebar .widget ul li a:hover {
    color: var(--vjx-mahogany);
}

.widget input[type="search"],
.widget input[type="text"] {
    border: 1px solid var(--vjx-line);
    background-color: var(--vjx-base);
    padding: 9px 12px;
    width: 100%;
}

.wp-block-search__button,
.widget button,
.widget input[type="submit"] {
    background-color: var(--vjx-mahogany);
    color: var(--vjx-base);
    border: none;
    font-family: var(--vjx-display);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 9px 16px;
}

.wp-block-search__button:hover,
.widget button:hover {
    background-color: var(--vjx-mahogany-deep);
}

.site-footer,
.site-info,
.footer-widgets {
    background-color: var(--vjx-mahogany-deep);
    color: var(--vjx-base);
}

.footer-widgets {
    padding-top: 48px;
    padding-bottom: 24px;
    border-top: 3px solid var(--vjx-mustard);
}

.footer-widgets .widget-title {
    color: #f1dcad;
    border-bottom-color: rgba(185, 133, 31, 0.5);
}

.footer-widgets .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widgets .widget ul li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(244, 239, 230, 0.12);
}

.footer-widgets .widget,
.footer-widgets .widget p,
.footer-widgets .widget li {
    color: #e7ddcf;
}

.footer-widgets a,
.site-info a {
    color: #ecd6ab;
}

.footer-widgets a:hover,
.site-info a:hover {
    color: #fff;
}

.site-info {
    font-family: var(--vjx-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    padding-top: 18px;
    padding-bottom: 18px;
    border-top: 1px solid rgba(244, 239, 230, 0.14);
}

.vjx-credit {
    color: #e7ddcf;
}

.nav-links .page-numbers {
    font-family: var(--vjx-display);
    font-weight: 600;
    border: 1px solid var(--vjx-line);
    background-color: var(--vjx-paper);
    color: var(--vjx-mahogany);
    padding: 8px 14px;
    margin: 0 3px;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    background-color: var(--vjx-mahogany);
    border-color: var(--vjx-mahogany);
    color: var(--vjx-base);
}

.generate-back-to-top {
    background-color: var(--vjx-mahogany);
    color: var(--vjx-base);
}

button,
.button,
input[type="submit"] {
    font-family: var(--vjx-display);
    letter-spacing: 0.03em;
}

@media (max-width: 768px) {
    .main-title,
    .site-title {
        font-size: 32px;
    }
    .separate-containers .inside-article {
        padding: 26px 22px;
    }
    .single .entry-title,
    .page .entry-title {
        font-size: 30px;
    }
    .vjx-topbar-inner {
        padding: 7px 18px;
    }
    .vjx-topbar-date {
        display: none;
    }
}