/*
Theme Name:     annunciation
Theme URI:      
Description:    Astra child theme for Annunciation Lutheran Mission.
Author:         merctraider
Author URI:     merctraider.me
Template:       astra
Version:        0.1.1
*/
/* Custom Style */
/* Add your section padding defaults here */



:root {
    /* Color Palette */
    --bg: #FAF6F0;                 /* Primary warm background (cream/white) */
    --bg-alt: #F3EFE6;             /* Alternate backdrop (slighly darker/contrast) */
    --text: #1C2521;             /* Premium dark ink for primary readability */
    --text-muted: #4F5D56;       /* Soft slate gray for secondary details */
    --accent: #4E6B5A;           /* Primary sacred tone (e.g., sage / terracotta) */
    --accent-sec: #D0BC97;       /* Secondary liturgical hue (e.g., gold / wheat) */
    --border: rgba(25, 25, 25, 0.08);   /* Elegant thin divider */
    
    /* Structural Constants */
    --radius: 4px;
    --space-unit: 8px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Box Shadows and Borders */
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.02);
    --shadow-elegant: 0 12px 36px rgba(25, 25, 25, 0.04);
}


/* 1. Vertical Margin Scale (MT = Margin Top, MB = Margin Bottom, MY = Both) */
.mt-xs  { margin-top: calc(var(--space-unit) * 1) !important; }     /* 8px */
.mt-sm  { margin-top: calc(var(--space-unit) * 2) !important; }     /* 16px */
.mt-md  { margin-top: calc(var(--space-unit) * 4) !important; }     /* 32px */
.mt-lg  { margin-top: calc(var(--space-unit) * 6) !important; }     /* 48px */
.mt-xl  { margin-top: calc(var(--space-unit) * 9) !important; }     /* 72px */
.mt-xxl { margin-top: calc(var(--space-unit) * 13) !important; }    /* 104px */

.mb-xs  { margin-bottom: calc(var(--space-unit) * 1) !important; }
.mb-sm  { margin-bottom: calc(var(--space-unit) * 2) !important; }
.mb-md  { margin-bottom: calc(var(--space-unit) * 4) !important; }
.mb-lg  { margin-bottom: calc(var(--space-unit) * 6) !important; }
.mb-xl  { margin-bottom: calc(var(--space-unit) * 9) !important; }
.mb-xxl { margin-bottom: calc(var(--space-unit) * 13) !important; }

.my-xs  { margin-top: calc(var(--space-unit) * 1) !important; margin-bottom: calc(var(--space-unit) * 1) !important; }
.my-sm  { margin-top: calc(var(--space-unit) * 2) !important; margin-bottom: calc(var(--space-unit) * 2) !important; }
.my-md  { margin-top: calc(var(--space-unit) * 4) !important; margin-bottom: calc(var(--space-unit) * 4) !important; }
.my-lg  { margin-top: calc(var(--space-unit) * 6) !important; margin-bottom: calc(var(--space-unit) * 6) !important; }
.my-xl  { margin-top: calc(var(--space-unit) * 9) !important; margin-bottom: calc(var(--space-unit) * 9) !important; }
.my-xxl { margin-top: calc(var(--space-unit) * 13) !important; margin-bottom: calc(var(--space-unit) * 13) !important; }

/* 2. Vertical Padding Scale (PT = Padding Top, PB = Padding Bottom, PY = Both) */
.pt-xs  { padding-top: calc(var(--space-unit) * 1) !important; }
.pt-sm  { padding-top: calc(var(--space-unit) * 2) !important; }
.pt-md  { padding-top: calc(var(--space-unit) * 4) !important; }
.pt-lg  { padding-top: calc(var(--space-unit) * 6) !important; }
.pt-xl  { padding-top: calc(var(--space-unit) * 9) !important; }
.pt-xxl { padding-top: calc(var(--space-unit) * 13) !important; }

.pb-xs  { padding-bottom: calc(var(--space-unit) * 1) !important; }
.pb-sm  { padding-bottom: calc(var(--space-unit) * 2) !important; }
.pb-md  { padding-bottom: calc(var(--space-unit) * 4) !important; }
.pb-lg  { padding-bottom: calc(var(--space-unit) * 6) !important; }
.pb-xl  { padding-bottom: calc(var(--space-unit) * 9) !important; }
.pb-xxl { padding-bottom: calc(var(--space-unit) * 13) !important; }

.py-xs  { padding-top: calc(var(--space-unit) * 1) !important; padding-bottom: calc(var(--space-unit) * 1) !important; }
.py-sm  { padding-top: calc(var(--space-unit) * 2) !important; padding-bottom: calc(var(--space-unit) * 2) !important; }
.py-md  { padding-top: calc(var(--space-unit) * 4) !important; padding-bottom: calc(var(--space-unit) * 4) !important; }
.py-lg  { padding-top: calc(var(--space-unit) * 6) !important; padding-bottom: calc(var(--space-unit) * 6) !important; }
.py-xl  { padding-top: calc(var(--space-unit) * 9) !important; padding-bottom: calc(var(--space-unit) * 9) !important; }
.py-xxl { padding-top: calc(var(--space-unit) * 13) !important; padding-bottom: calc(var(--space-unit) * 13) !important; }

/* 3. Horizontal Spacing (PX = Padding Horizontally, PX-container-safe) */
.px-xs  { padding-left: calc(var(--space-unit) * 1) !important; padding-right: calc(var(--space-unit) * 1) !important; }
.px-sm  { padding-left: calc(var(--space-unit) * 2) !important; padding-right: calc(var(--space-unit) * 2) !important; }
.px-md  { padding-left: calc(var(--space-unit) * 4) !important; padding-right: calc(var(--space-unit) * 4) !important; }
.px-lg  { padding-left: calc(var(--space-unit) * 6) !important; padding-right: calc(var(--space-unit) * 6) !important; }
.px-xl  { padding-left: calc(var(--space-unit) * 9) !important; padding-right: calc(var(--space-unit) * 9) !important; }
.p-all-sm { padding: calc(var(--space-unit) * 2) !important; }
.p-all-md { padding: calc(var(--space-unit) * 4) !important; }
.p-all-lg { padding: calc(var(--space-unit) * 6) !important; }


/**
 * ============================================================================
 * CHURCH INTERACTIVE DESIGN MODULES (CHURCH CORE UI)
 * ============================================================================
 * Clean layouts representing deep spiritual focus & welcoming warmth.
 */

/* 1. Beautiful editorial cards for Events, Sermons, or Ministries */
.card-church {
    background-color: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--space-unit) * 4);
    box-shadow: var(--shadow-subtle);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-church:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-elegant);
}

/* 2. Giving / Offering Card widgets */
.giving-box {
    background-color: var(--bg);
    border: 2px solid var(--accent-sec);
    border-radius: var(--radius);
    padding: calc(var(--space-unit) * 5);
    text-align: center;
    box-shadow: var(--shadow-subtle);
}
.giving-amounts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.giving-btn-amount {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}
.giving-btn-amount:hover,
.giving-btn-amount.active {
    background: var(--accent);
    color: var(--bg) !important;
    border-color: var(--accent);
}

/* 3. Liturgy and Scripture Display Blocks (Call-and-Response) */
.liturgy-block {
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
    margin: 2rem 0;
}
.liturgy-call {
    font-style: italic;
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.liturgy-response {
    font-size: 1rem;
    color: var(--text-muted);
}

/* 4. Elegant Editorial Button Styling */
.btn-primary {
    display: inline-block !important;
    
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--bg) !important;
    background-color: var(--accent) !important;
    padding: 0.875rem 2rem !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--accent) !important;
    transition: var(--transition) !important;
    text-align: center !important;
    cursor: pointer !important;
}
.btn-primary:hover {
    background-color: var(--text) !important;
    border-color: var(--text) !important;
    letter-spacing: 0.18em !important;
    box-shadow: var(--shadow-subtle);
}

.btn-secondary {
    display: inline-block !important;
    
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--text) !important;
    background-color: transparent !important;
    padding: 0.875rem 2rem !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    transition: var(--transition) !important;
    text-align: center !important;
    cursor: pointer !important;
}
.btn-secondary:hover {
    background-color: var(--bg-alt) !important;
    border-color: var(--text) !important;
}

/* 5. Minimal Media Player layout style (Sermons) */
.sermon-player-compact {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.sermon-player-playbtn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--accent);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}
.sermon-player-playbtn:hover {
    transform: scale(1.08);
}
.sermon-info {
    flex: 1;
}
.sermon-title {
    font-size: 1.125rem;
    color: var(--text);
    margin: 0 0 0.25rem 0;
}
.sermon-meta {
    font-size: 0.825rem;
    color: var(--text-muted);
}

/* 6. Sacred Decorative Dividers */
.holy-cross-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3.5rem 0;
}
.holy-cross-line {
    flex: 1;
    height: 1px;
    background-color: var(--border);
    max-width: 150px;
}
.holy-cross-icon {
    font-size: 1.25rem;
    color: var(--accent);
    padding: 0 1.25rem;
}

/**
 * ============================================================================
 * COLOR HELPERS
 * ============================================================================
 * Color utilities to set items background and color accurately.
 */
.bg-primary { background-color: var(--bg) !important; }
.bg-alt { background-color: var(--bg-alt) !important; }
.text-primary { color: var(--text) !important; }
.text-muted { color: var(--text-muted) !important; }
.color-accent { color: var(--accent) !important; }
.color-accent-sec { color: var(--accent-sec) !important; }

/**
 * ============================================================================
 * ELEMENTOR SPECIFIC COMPATIBILITY RESETS
 * ============================================================================
 * Elementor sometimes introduces high-specificity margins and padding which can
 * disrupt the flow or aesthetic rhythm. Apply these overrides or use these classes
 * to maintain the editorial beauty.
 */
.elementor-column-gap-no .elementor-widget-wrap {
    padding: 0 !important;
}
.elementor .elementor-tight-widget {
    margin-bottom: 1.5rem !important;
}