/*
Theme Name: JChurch
Theme URI: https://github.com/judah/jchurch
Author: Judah Ezekiel Garcia Edgerton
Author URI: https://github.com/judah
Description: Custom WordPress theme for JChurch, designed by a 14-year-old prodigy. Hardcoded for extreme performance and custom layouts.
Version: 1.0.0
Text Domain: jchurch
*/

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* --- Design Tokens / CSS Variables --- */
:root {
    /* Color Palette */
    --color-primary: #6B1226;         /* Burgundy: Active items, main buttons, h1/titles */
    --color-secondary: #4A0D1B;       /* Dark Wine: Cards, sidebar headers, footer accents */
    --color-deep-dark: #3B0A15;       /* Deep Dark Accent: Radio player, logo container */
    --color-gold: #FBBF24;            /* Accent Gold: Play buttons, live badges, CTA highlights */
    --color-script-gold: #F3E5AB;     /* Script Header Gold: Text over dark burgundy */
    --color-bg-main: #FDFBF7;         /* Parchment White: Main page background */
    --color-bg-sidebar: #F4EFE6;      /* Cream: Left navigation sidebar background */
    --color-text: #1E293B;            /* Dark Slate: Body copy and headings */

    /* Fonts */
    --font-script: 'Great Vibes', cursive;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

/* --- Global Base Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-bg-main);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-weight: 700;
}

/* Helper Class for the Church Script Name */
.church-script-title {
    font-family: var(--font-script);
    color: var(--color-script-gold);
}

/* --- Global Site Layout Structure (Sidebar + Main Content Wrapper) --- */
.site-layout-wrapper {
    display: flex;
    min-height: 100vh;
}

/* Sidebar styling constraint */
#site-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Main Content Area */
.site-main-content {
    flex-grow: 1;
    width: 0; /* Prevents flex items from overflowing */
    padding: 2.5rem 3rem;
    background-color: var(--color-bg-main);
}