/*
Theme Name: Catechise Us
Version: 1.3
Author: Kirk Seddon
*/

/* =========================
   GOOGLE FONTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=EB+Garamond:wght@400;600&display=swap');

/* =========================
   RESET
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   BASE
========================= */
body {
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.9;
    background: radial-gradient(circle at top, #fbf7ef 0%, #f3ecdc 60%, #efe4cf 100%);
    color: #2b2b2b;
    padding: 0 18px;
}

/* parchment texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
    opacity: 0.25;
    z-index: 0;
}

header, .wrapper, footer {
    position: relative;
    z-index: 1;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4 {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    color: #2b2b2b;
}

h1 { font-size: 2.1em; line-height: 1.3; }
h2 { font-size: 1.6em; margin-bottom: 10px; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }

/* =========================
   LINKS
========================= */
a {
    color: #6e5220;
    text-decoration: none;
    border-bottom: 1px solid rgba(110,82,32,0.3);
}

a:hover {
    color: #a07a2e;
    border-bottom: 1px solid #a07a2e;
}

/* =========================
   HEADER
========================= */
header {
    text-align: center;
    padding: 40px 10px 25px;
    background: rgba(251,247,239,0.7);
    border-bottom: 2px solid #d6c7a6;
}

/* =========================
   GLOBAL LAYOUT
========================= */
.wrapper {
    display: flex;
    gap: 22px;
    max-width: 1200px;
    margin: 28px auto;
}

.main-content {
    flex: 3;
    background: rgba(255,253,247,0.92);
    padding: 36px;
    border: 1px solid #e0d6c2;
    border-radius: 6px;
}

.sidebar-nav {
    flex: 1;
    background: rgba(251,247,239,0.9);
    padding: 20px;
    border: 1px solid #e0d6c2;
    border-radius: 6px;
}

/* =========================
   HOMEPAGE TWO-COLUMN FIX
========================= */
.two-column {
    display: flex;
    gap: 24px;
}

.column-left {
    flex: 1;
}

/* homepage content styling */
.catechise-intro {
    max-width: 700px;
}

.catechise-intro p,
.catechise-intro li {
    font-size: 1.06em;
    line-height: 1.9;
}

.catechise-intro ul {
    margin: 10px 0 18px 20px;
}

.catechise-intro li {
    margin-bottom: 6px;
}

.catechise-intro em {
    color: #5a4520;
}

/* =========================
   SCRIPTURE PAGE
========================= */
.scripture-page {
    max-width: 720px;
    margin: 0 auto;
}

.scripture-page h1 {
    font-size: 1.85em;
    margin-bottom: 18px;
}

.scripture-page h1::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(to right, #a07a2e, transparent);
}

/* =========================
   SCRIPTURE CONTENT
========================= */
.scripture-content {
    max-width: 700px;
}

.scripture-content p {
    font-size: 1.06em;
    line-height: 1.95;
    margin-bottom: 18px;
}

.scripture-content p + p {
    text-indent: 1.1em;
}

/* DROP CAP */
.dropcap {
    float: left;
    font-size: 2.9em;
    line-height: 0.85;
    margin-right: 10px;
    margin-top: 3px;
    font-weight: 600;
    color: #7a5c1e;
}

/* BLOCKQUOTES */
.scripture-content blockquote {
    border-left: 3px solid #a07a2e;
    margin: 24px 0;
    padding: 12px 16px;
    font-style: italic;
    background: rgba(255,253,247,0.6);
}

/* =========================
   CATEGORY PAGES
========================= */
.category-description {
    font-style: italic;
    margin-bottom: 20px;
    border-left: 3px solid #a07a2e;
    padding-left: 12px;
}

.category-post-list {
    list-style: none;
}

.category-post-list li {
    margin: 10px 0;
}

/* =========================
   SIDEBAR ACCORDION
========================= */
.accordion-item {
    border-bottom: 1px solid #e0d6c2;
}

.accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 10px;
    font-family: 'Crimson Text', serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #3a2a12;
}

.accordion-toggle::after {
    content: "+";
    float: right;
}

.accordion-item.active .accordion-toggle::after {
    content: "–";
}

.accordion-content {
    display: none;
    padding-left: 10px;
    margin-left: 6px;
    border-left: 1px solid rgba(214, 199, 166, 0.5);
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-content ul {
    list-style: none;
    padding-left: 12px;
    margin: 8px 0 10px;
}

.accordion-content li {
    margin: 6px 0;
}

.accordion-content li a {
    display: block;
    font-family: 'Crimson Text', serif;
    font-size: 14px;
    color: #5a4520;
    padding: 4px 6px;
    border-radius: 4px;
}

.accordion-content li a:hover {
    background: rgba(160, 122, 46, 0.12);
    color: #a07a2e;
}

/* =========================
   UNCATEGORIZED ALWAYS OPEN
========================= */
.accordion-item.uncategorized .accordion-content {
    display: block !important;
}

.accordion-item.uncategorized .accordion-toggle::after {
    content: "–"; /* shows "open" state */
}
/* =========================
   CTA SCRIPTURE BLOCK
========================= */
.cta-scripture {
    margin-top: 40px;
    padding: 24px 26px;
    background: rgba(255, 253, 247, 0.85);
    border: 1px solid #e0d6c2;
    border-left: 4px solid #a07a2e;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    position: relative;
}

/* subtle manuscript header */
.cta-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a07a2e;
    margin-bottom: 12px;
    opacity: 0.8;
}

/* intro paragraph */
.cta-intro {
    font-size: 1.08em;
    line-height: 1.9;
    margin-bottom: 16px;
}

/* guidance text */
.cta-guidance {
    margin-top: 10px;
    font-style: italic;
    color: #5a4520;
}

.cta-scripture .dropcap {
    float: left;
    font-size: 2.6em;
    line-height: 0.9;     /* tighter vertical alignment */
    padding-right: 6px;
    margin-top: 2px;      /* pull it UP slightly */
    font-weight: 600;
    color: #7a5c1e;
}
/* spacing consistency */
.cta-scripture p {
    margin-bottom: 14px;
}

/* =========================
   POST INTRO MANUSCRIPT BLOCK
========================= */
.post-intro-manuscript {
    margin-bottom: 28px;
    padding: 26px 24px;
    background: rgba(255, 253, 247, 0.88);
    border: 1px solid #e0d6c2;
    border-left: 4px solid #a07a2e;
    border-radius: 6px;
}

/* small label */
.post-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a07a2e;
    margin-bottom: 10px;
    opacity: 0.85;
}

/* title override (smaller than default WP h1 chaos) */
.post-title {
    font-size: 1.9em;
    line-height: 1.3;
    margin-bottom: 14px;
}

/* intro text */
.post-intro-text p {
    font-size: 1.05em;
    line-height: 1.85;
    margin-bottom: 12px;
}

/* CTA area */
.post-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* buttons */
.post-button {
    padding: 8px 14px;
    font-size: 14px;
    font-family: 'Crimson Text', serif;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* primary */
.post-button.primary {
    background: #7a5c1e;
    color: #fff;
    border: 1px solid #7a5c1e;
}

.post-button.primary:hover {
    background: #a07a2e;
    border-color: #a07a2e;
}

/* secondary */
.post-button.secondary {
    background: transparent;
    color: #6e5220;
    border: 1px solid #d6c7a6;
}

.post-button.secondary:hover {
    border-color: #a07a2e;
    color: #a07a2e;
}

/* =========================
   FOOTER
========================= */
footer {
    text-align: center;
    padding: 30px;
    margin-top: 50px;
    background: rgba(251,247,239,0.8);
    border-top: 2px solid #d6c7a6;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
    .wrapper {
        flex-direction: column;
    }

    .two-column {
        flex-direction: column;
    }
}