/*
Theme Name: GeneratePress Child - FlushForward
Template: generatepress
Version: 1.0
*/

/* Your custom CSS goes below this line */
/* =====================================================
   FLUSHFORWARD.ORG DESIGN SYSTEM
   For GeneratePress + bbPress
   ===================================================== */

/* ----- GOOGLE FONTS ----- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

/* =====================================================
   CSS CUSTOM PROPERTIES (Variables)
   ===================================================== */
:root {
    /* Gray Foundation (Warm Newsprint) */
    --ff-paper-white: #fafaf9;
    --ff-background: #f5f5f3;
    --ff-border-light: #e8e8e4;
    --ff-border: #d4d4cf;
    --ff-text-muted: #737370;
    --ff-text-body: #525250;
    --ff-ink-black: #1a1a18;
    
    /* Semantic Accent Colors */
    --ff-red: #c62828;        /* Bad/Problem/Corrupt */
    --ff-blue: #1565c0;       /* Neutral/Info/Source */
    --ff-green: #2e7d32;      /* Good/Solution/Progress */
    
    /* Gold (Logo Only) */
    --ff-gold: #c9a227;
    
    /* Typography */
    --ff-font-headline: 'Source Serif 4', Georgia, serif;
    --ff-font-body: 'Source Serif 4', Georgia, serif;
    --ff-font-ui: 'Libre Franklin', system-ui, sans-serif;
    
    /* Spacing */
    --ff-spacing-xs: 4px;
    --ff-spacing-sm: 8px;
    --ff-spacing-md: 16px;
    --ff-spacing-lg: 24px;
    --ff-spacing-xl: 32px;
    --ff-spacing-2xl: 48px;
}

/* =====================================================
   BASE STYLES
   ===================================================== */
body {
    font-family: var(--ff-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ff-text-body);
    background-color: var(--ff-background);
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */

/* Headlines */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-font-headline);
    font-weight: 700;
    color: var(--ff-ink-black);
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* Body text */
p {
    margin-bottom: 1.5em;
}

/* Links */
a {
    color: var(--ff-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* =====================================================
   NAVIGATION (GeneratePress)
   ===================================================== */
.main-navigation,
.main-navigation .main-nav ul li a,
.menu-toggle {
    font-family: var(--ff-font-ui);
    font-weight: 600;
}

.main-navigation {
    background-color: var(--ff-ink-black);
}

.main-navigation .main-nav ul li a {
    color: var(--ff-paper-white);
}

.main-navigation .main-nav ul li a:hover {
    color: var(--ff-gold);
}

/* Site header */
.site-header {
    background-color: var(--ff-ink-black);
}

.site-title a {
    color: var(--ff-paper-white);
    font-family: var(--ff-font-ui);
    font-weight: 700;
}

/* =====================================================
   CONTENT AREAS
   ===================================================== */
.site-content {
    background-color: var(--ff-paper-white);
}

/* Entry/Article styling */
.entry-title {
    font-family: var(--ff-font-headline);
    font-weight: 700;
    color: var(--ff-ink-black);
}

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

.entry-title a:hover {
    color: var(--ff-blue);
}

.entry-meta {
    font-family: var(--ff-font-ui);
    font-size: 0.875rem;
    color: var(--ff-text-muted);
}

/* =====================================================
   BUTTONS
   ===================================================== */
button,
.button,
input[type="submit"],
.wp-block-button__link {
    font-family: var(--ff-font-ui);
    font-weight: 600;
    background-color: var(--ff-ink-black);
    color: var(--ff-paper-white);
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--ff-text-body);
}

/* Report button (red) */
.report-button,
button.report {
    background-color: var(--ff-red);
}

.report-button:hover,
button.report:hover {
    background-color: #a52222;
}

/* =====================================================
   FORMS
   ===================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-family: var(--ff-font-body);
    font-size: 1rem;
    border: 1px solid var(--ff-border);
    background-color: var(--ff-paper-white);
    padding: 10px 14px;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--ff-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.2);
}

/* =====================================================
   bbPRESS FORUM STYLES
   ===================================================== */

/* Forum headings */
#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-title {
    font-family: var(--ff-font-headline);
    font-weight: 600;
    color: var(--ff-ink-black);
}

#bbpress-forums .bbp-forum-title:hover,
#bbpress-forums .bbp-topic-title:hover {
    color: var(--ff-blue);
}

/* Forum content */
#bbpress-forums {
    font-family: var(--ff-font-body);
    font-size: 16px;
    line-height: 1.6;
}

/* Forum meta info */
#bbpress-forums .bbp-meta,
#bbpress-forums .bbp-author-name,
#bbpress-forums .bbp-reply-date,
#bbpress-forums .bbp-topic-meta {
    font-family: var(--ff-font-ui);
    font-size: 0.875rem;
    color: var(--ff-text-muted);
}

/* Forum tables and rows */
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
    background-color: var(--ff-ink-black);
    color: var(--ff-paper-white);
    font-family: var(--ff-font-ui);
    font-weight: 600;
}

#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
    background-color: var(--ff-paper-white);
    border-bottom: 1px solid var(--ff-border-light);
}

#bbpress-forums li.bbp-body ul.forum:hover,
#bbpress-forums li.bbp-body ul.topic:hover {
    background-color: var(--ff-background);
}

/* Reply styling */
#bbpress-forums div.bbp-reply-header {
    background-color: var(--ff-background);
    border-left: 4px solid var(--ff-blue);
    padding: 12px 16px;
}

#bbpress-forums div.bbp-reply-content {
    padding: 16px;
    background-color: var(--ff-paper-white);
}

/* Nested reply indentation */
#bbpress-forums div.bbp-reply-content ul.bbp-threaded-replies {
    border-left: 2px solid var(--ff-border-light);
    margin-left: 20px;
    padding-left: 20px;
}

/* Forum breadcrumbs */
#bbpress-forums .bbp-breadcrumb {
    font-family: var(--ff-font-ui);
    font-size: 0.875rem;
    color: var(--ff-text-muted);
}

#bbpress-forums .bbp-breadcrumb a {
    color: var(--ff-blue);
}

/* Forum pagination */
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current {
    font-family: var(--ff-font-ui);
    padding: 6px 12px;
    border-radius: 4px;
}

#bbpress-forums .bbp-pagination-links span.current {
    background-color: var(--ff-ink-black);
    color: var(--ff-paper-white);
}

/* =====================================================
   SIDEBAR & WIDGETS
   ===================================================== */
.sidebar .widget-title,
.widget-area .widget-title {
    font-family: var(--ff-font-ui);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ff-text-muted);
    border-bottom: 2px solid var(--ff-ink-black);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
    background-color: var(--ff-ink-black);
    color: var(--ff-paper-white);
    font-family: var(--ff-font-ui);
}

.site-footer a {
    color: var(--ff-paper-white);
}

.site-footer a:hover {
    color: var(--ff-gold);
}

/* =====================================================
   SEMANTIC CALLOUT BOXES
   Use these classes for article content
   ===================================================== */

/* Problem/Corrupt callout (red) */
.callout-problem {
    border-left: 4px solid var(--ff-red);
    background-color: rgba(198, 40, 40, 0.05);
    padding: 16px 20px;
    margin: 24px 0;
}

/* Source/Evidence callout (blue) */
.callout-source {
    border-left: 4px solid var(--ff-blue);
    background-color: rgba(21, 101, 192, 0.05);
    padding: 16px 20px;
    margin: 24px 0;
}

/* Solution/Progress callout (green) */
.callout-solution {
    border-left: 4px solid var(--ff-green);
    background-color: rgba(46, 125, 50, 0.05);
    padding: 16px 20px;
    margin: 24px 0;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.text-muted { color: var(--ff-text-muted); }
.text-red { color: var(--ff-red); }
.text-blue { color: var(--ff-blue); }
.text-green { color: var(--ff-green); }

.font-ui { font-family: var(--ff-font-ui); }
.font-serif { font-family: var(--ff-font-headline); }

.bg-dark { background-color: var(--ff-ink-black); color: var(--ff-paper-white); }
.bg-light { background-color: var(--ff-background); }