/*
Theme Name: Faith Systems Custom
Author: Jayce Tohline
Description: A minimalist, high-typography theme based on the New Reformer aesthetic.
Version: 1.1
*/

:root {
    /* Functional Neutrals */
    --bg-outer: #e6e1d8;
    --bg-paper: #FFFFFF;
    --dark: #1A1A1A;
    --white: #FFFFFF;
    --off-white: #FFFFFFB3;
    --black: #000000;
    --border: #E5E0D8;
    --blockquote-shade: #C6722D0D;
    --shadow: #0000000D;
    
    /* Text Colors */
    --text-main: #2D2D2D;
    --text-muted: #666666;
    
    /* Primary Accents */
    --ochre: #C6722D;
    --green: #6B7B5E;
    --red: #9E4238;
    --blue: #2A4D50;
    
    /* Typography */
    --font-heading: "Goudy Old Style", Garamond, "Times New Roman", serif;
    --font-body: "Minion Pro", "Source Serif Pro", Georgia, serif;
    --font-ui: "Josefin Sans", "Roboto", Helvetica, sans-serif;
    
    --container-width: 680px;
}

/* --- Global Reset & WP Basics --- */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-outer);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s ease; /* Updated */
}

/* --- Header & Footer --- */
.full-width-black {
    width: 100%;
    background-color: var(--dark);
    display: flex;
    justify-content: center;
    margin: 0;
}

.header-margin { margin-top: 15px; margin-bottom: 15px; }

.masthead, .footer-content {
    text-align: center;
    padding: 20px 0;
    width: 100%;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: 0px; /* Updated */
    color: var(--white);
    text-decoration: none;
    display: inline-block;
}

.footer-text {
    font-family: var(--font-ui);
    font-size: 0.625rem; 
    color: var(--off-white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Post Layout --- */
.article-container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 25px 100px 25px;
    flex: 1;
    background-color: var(--bg-paper);
    box-shadow: 0 0 40px var(--shadow);
}

h1.entry-title {
    font-family: var(--font-heading);
    font-size: 2.3rem;
    line-height: 1.05;
    font-weight: 400;
    margin: 0 0 15px 0;
    letter-spacing: -0.01em;
    color: var(--black);
}

.subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 25px;
}

.tag-label {
    font-family: var(--font-ui);
    color: var(--black);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 0.8rem;
    margin-top: 20px;
    margin-bottom: 10px;
    display: block;
    border-left: 4px solid var(--ochre);
    padding-left: 10px;
}

.meta-data {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    padding: 15px 0;
    border-top: 2px solid var(--border);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.byline { color: var(--ochre); margin-right: 5px; }

/* --- Article Body Content --- */
.article-body p {
    font-family: var(--font-body);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

/* Added Lists from Base HTML */
/* --- Fixed List Styling: Targeting LI directly for exact matching --- */
.article-body ul, 
.article-body ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.article-body ul li, 
.article-body ol li {
    font-family: var(--font-body) !important; /* Forces the Serif font to load */
    font-size: 1.25rem !important;           /* Forces the exact size */
    line-height: 1.5 !important;           /* Matches paragraph vertical rhythm */
    color: var(--text-main);
    margin-bottom: 0.8rem;
}

/* Mandatory Dropcap */
.article-body p:first-of-type::first-letter {
    font-family: var(--font-heading);
    float: left;
    font-size: 4.2rem;
    line-height: 3.0rem;
    padding: 5px 12px 0 0;
    font-weight: 400;
    color: var(--black);
}

.article-body h2 { font-family: var(--font-heading); font-size: 1.8rem; margin: 3rem 0 1.2rem; color: var(--black); }
.article-body h3 { font-family: var(--font-heading); font-size: 1.6rem; margin: 2.5rem 0 1rem; color: var(--blue); }

.article-body blockquote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--black);
    margin: 3rem 0;
    padding: 1.5rem 35px;
    border-top: 3px solid var(--ochre);
    border-bottom: 3px solid var(--ochre);
    background-color: var(--blockquote-shade);
    line-height: 1.6; /* Matched to base */
}

.highlight-red { color: var(--red); font-weight: 700; }

/* --- CTA Shortcode Styles --- */
.cta-box { margin: 4rem 0; text-align: center; border-radius: 0; }
.cta-box h5 { font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 15px; line-height: 1.2; }
.cta-promo { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: 40px; display: block; line-height: 1.4; }
.btn-cta { 
    display: inline-block; 
    font-family: var(--font-ui); 
    font-weight: 700; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    padding: 16px 36px; 
    text-decoration: none !important; 
    transition: opacity 0.2s ease; /* Matched to base */
}
.btn-cta:hover { opacity: 0.9; } /* Matched to base */

/* Color Specific CTA Padding */
.cta-box.ochre { background-color: var(--ochre); padding: 25px 30px 15px 30px; }
.cta-box.ochre .btn-cta { background-color: var(--dark); color: var(--white) !important; }

.cta-box.blue { background-color: var(--blue); color: var(--white); padding: 40px 30px 25px 30px; }
.cta-box.blue .btn-cta { background-color: var(--red); color: var(--white) !important; }

.cta-box.green { background-color: var(--green); color: var(--white); padding: 40px 30px 25px 30px; }
.cta-box.green .btn-cta { background-color: var(--dark); color: var(--white) !important; }

/* --- Images --- */
.featured-image-container { width: 100%; margin-bottom: 10px; }
.featured-image-container img { width: 100%; height: auto; display: block; border: 2px solid var(--black); }
.caption { font-family: var(--font-ui); font-size: 0.75rem; margin: 10px 0 40px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; text-align: center; color: var(--black); }

/* --- Mobile Responsiveness --- */
@media (max-width: 700px) {
    body { background-color: var(--bg-paper); }
    .article-container { padding: 0 20px 60px 20px; box-shadow: none; }
    .logo { font-size: 1.8rem; letter-spacing: -0.5px; }
    .header-margin { margin-top: 10px; margin-bottom: 10px; }
    
    /* Edge-to-Edge Mobile Image Logic */
    .featured-image-container {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .featured-image-container img { 
        border-left: none; 
        border-right: none; 
    }
    
    h1.entry-title { font-size: 1.8rem; }
    .article-body p { font-size: 1.15rem; }
    .article-body blockquote { padding: 1.5rem 20px; }
}