/* 
 * main.css - Simplified Bootstrap-First Essentials
 * Only the truly necessary custom styles that Bootstrap can't handle
 */

/* ==========================================================================
   BRAND COLORS - Your visual identity
   ========================================================================== */


:root {
    /* Your existing brand colors */
    --brand-cream: #f2ece3;
    --brand-navy: #3c493c;
    --brand-sage: #479552;
    --brand-gold: #e3d018;
    --brand-brown: #c98e46;
    
    /* Bootstrap semantic color overrides */
    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 60, 73, 60;
    --bs-success: var(--brand-sage);
    --bs-success-rgb: 71, 149, 82;
    --bs-warning: var(--brand-gold);
    --bs-warning-rgb: 227, 208, 24;
    --bs-info: var(--brand-brown);
    --bs-info-rgb: 201, 142, 70;
    --bs-light: var(--brand-cream);
    --bs-light-rgb: 242, 236, 227;
    
    /* Bootstrap color variations - these create the hover/active states */
    --bs-primary-hover: #2a3e2a;
    --bs-primary-active: #1f2b1f;
    --bs-success-hover: #3e8449;
    --bs-success-active: #357a40;
    --bs-warning-hover: #ccb615;
    --bs-warning-active: #b5a313;
    --bs-info-hover: #b57d3e;
    --bs-info-active: #a16f35;
    
    /* Bootstrap border colors */
    --bs-primary-border-subtle: rgba(60, 73, 60, 0.2);
    --bs-success-border-subtle: rgba(71, 149, 82, 0.2);
    --bs-warning-border-subtle: rgba(227, 208, 24, 0.2);
    --bs-info-border-subtle: rgba(201, 142, 70, 0.2);
    
    /* Bootstrap background colors for alerts, etc. */
    --bs-primary-bg-subtle: rgba(60, 73, 60, 0.1);
    --bs-success-bg-subtle: rgba(71, 149, 82, 0.1);
    --bs-warning-bg-subtle: rgba(227, 208, 24, 0.1);
    --bs-info-bg-subtle: rgba(201, 142, 70, 0.1);
    
    /* Bootstrap text colors */
    --bs-primary-text-emphasis: #1f2b1f;
    --bs-success-text-emphasis: #2d5a33;
    --bs-warning-text-emphasis: #8a7c0e;
    --bs-info-text-emphasis: #7a5229;
    
    /* Focus ring color for forms */
    --bs-focus-ring-color: rgba(71, 149, 82, 0.25);
}

/* Brand color utilities (for specific brand color needs) */
.text-brand-navy { color: var(--brand-navy) !important; }
.text-brand-sage { color: var(--brand-sage) !important; }
.bg-brand-cream { background-color: var(--brand-cream) !important; }
.bg-brand-navy { background-color: var(--brand-navy) !important; }

/* Brand gradients (for navbar and other special elements) */
.bg-brand-gradient-primary {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-sage) 100%) !important;
}

/* ==========================================================================
   TYPOGRAPHY - Your fonts
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    color: var(--brand-navy);
}

blockquote {
    margin: 1em 2em;
    font-size: 0.9em;
    padding: 10px;
    font-style: italic; /* optional */
}

    ::placeholder{
        color: lightgray !important;
    }

/* Override heading colors in dark contexts */
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 {
    color: inherit !important;
}

/* ==========================================================================
   LOGO SIZING
   ========================================================================== */

.navbar-brand img {
    height: 32px;
    width: auto;
    max-width: 200px;
}

@media (max-width: 768px) {
    .navbar-brand img {
        height: 28px;
    }
}

/* ==========================================================================
   USER PHOTOS - Standardized round photos, no borders
   ========================================================================== */

/* Small size - for comments, user menu, etc. */
.user-photo-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

/* Medium size - for member listings, cards */
.user-photo-medium {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

/* Large size - for profile pages, detailed views */
.user-photo-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

/* Placeholder styling for users without photos */
.user-photo-placeholder {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-sage), var(--brand-gold));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: none;
}

.user-photo-placeholder.user-photo-small {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.user-photo-placeholder.user-photo-medium {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.user-photo-placeholder.user-photo-large {
    width: 150px;
    height: 150px;
    font-size: 4rem;
}

/* Remove any borders that might be added by other styles */
img.user-photo-small,
img.user-photo-medium, 
img.user-photo-large,
.user-photo-placeholder {
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   DATE BADGE COMPONENT - Custom component Bootstrap doesn't have
   ========================================================================== */

.date-badge {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    text-align: center;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.date-badge-day {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.date-badge-month {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 0.2rem;
    opacity: 0.9;
}

/* Date badge sizes */
.date-badge-small {
    min-width: 50px;
    padding: 0.4rem;
    border-radius: 6px;
}

.date-badge-small .date-badge-day {
    font-size: 1rem;
}

.date-badge-small .date-badge-month {
    font-size: 0.655rem;
}

/* ==========================================================================
   CKEDITOR Z-INDEX FIX - For modal compatibility
   ========================================================================== */

:root {
    --ck-z-default: 100;
    --ck-z-panel: calc(var(--ck-z-default) + 999);
}

.ck.ck-balloon-panel {
    z-index: 10055 !important;
}

/* ==========================================================================
   CONTENT STYLING - For CKEditor output in your pages
   ========================================================================== */

/* Force responsive images in content areas */
.blog-content img,
.event-description img,
.formatted-content img,
.profile-bio-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.375rem;
    margin: 1rem auto;
    display: block;
}

/* Center figures in content */
.blog-content figure,
.event-description figure,
.formatted-content figure,
.profile-bio-content figure {
    text-align: center;
    margin: 1rem auto;
    max-width: 100%;
}

/* Style captions */
.blog-content figcaption,
.event-description figcaption,
.formatted-content figcaption,
.profile-bio-content figcaption {
    font-size: 0.9rem;
    color: var(--bs-secondary);
    font-style: italic;
    margin-top: 0.5rem;
    text-align: center;
}

/* ==========================================================================
   MAGAZINE COVERS - Specific component you use
   ========================================================================== */

.magazine-cover {
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.magazine-cover:hover {
    transform: translateY(-2px);
}

.magazine-overlay-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
    padding: 1rem;
    border-radius: 0 0 0.375rem 0.375rem;
    backdrop-filter: blur(2px);
    margin: 0 -1rem -1rem -1rem;
}

.card-img-overlay .badge {
    background-color: rgba(var(--bs-info-rgb), 0.9) !important;
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .user-photo-large {
        width: 120px;
        height: 120px;
    }
    
    .user-photo-placeholder.user-photo-large {
        width: 120px;
        height: 120px;
        font-size: 3rem;
    }
    
    .date-badge {
        min-width: 50px;
        padding: 0.4rem;
    }
    
    .date-badge-day {
        font-size: 1rem;
    }
    
    .date-badge-month {
        font-size: 0.655rem;
    }
}

/* Use a shared class for the gradient and styling */
.page-heading-block {
    background: linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65));
    border-radius: 0.375rem;
    /* padding: 2rem 1rem; */
    /* margin-bottom: 2rem; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border:0;
}


.page-heading-block.page-home {
    background-image: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
        url('/uploads/site/site_1758218536299_4b45e9a1e95f.webp');
    background-position: center center;
}

/* Desktop only: move image down slightly */
@media (min-width: 1069px) {
    .page-heading-block.page-home, .page-blog {
        background-position: center 59%;
    }
} 

.page-heading-block.page-events{
    background-image: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
        url('/uploads/site/site_1758553173204_25bc496c1145.webp');
}

.page-heading-block.page-whoswho {
    background-image: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
        url('/uploads/site/site_1758552959448_607c96393024.webp');
}

.page-heading-block.page-blog {
    background-image: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
        url('/uploads/site/site_1758554252635_ed8d472e306e.webp')
        /* url('/uploads/site/site_1758227116926_3c79294d3670.webp'); */
}

.page-heading-block.page-magazine {
    background-image: 
        linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
        url('/uploads/site/site_1758220459115_93a2a1c250c1.webp');
}