/*
CHANGE LOG
File: /static/css/section_dropcaps.css
Document Type: CSS Stylesheet
Purpose: Drop-cap styling for illustrated section headers in Serenity Village partials
Main App: grants_app.py or housing_app.py
Blueprint: housing_blueprint.py
Routes: /serenity
Context: Adds medieval manuscript-style drop-caps using section illustration images
HTML Templates: serenity.html, afh_partials/*.html
Dependencies: None - standalone file
Version History:
2025-09-20 v1.0 - Initial creation for illustrated section header drop-caps
*/

/* Section Drop-Cap Container */
.section-dropcap {
    display: flow-root; /* Creates self-clearing container for floated images */
}

/* Drop-Cap Image Styling */
.section-dropcap-img {
    float: left;
    width: 120px;               /* Base size - adjustable */
    height: auto;               /* Maintains aspect ratio */
    margin: 8px 20px 15px 0;    /* top / right / bottom / left spacing */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: white;
    padding: 4px;               /* Small border effect */
    object-fit: contain;        /* Preserves image content */
    vertical-align: top;        /* Align with text baseline */
}

/* Section Headers with Drop-Caps */
.section-dropcap h3 {
    margin-top: 0;
    padding-top: 8px;           /* Aligns with image top */
    line-height: 1.3;
}

/* First Paragraph Styling */
.section-dropcap p:first-of-type {
    margin-top: 0;
    text-align: justify;        /* Medieval manuscript style */
}

/* Responsive Sizing */
@media (max-width: 768px) {
    .section-dropcap-img {
        width: 90px;
        margin: 0 15px 12px 0;
        padding: 3px;
    }
}

@media (min-width: 1200px) {
    .section-dropcap-img {
        width: 140px;
        margin: 0 25px 18px 0;
        padding: 5px;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .section-dropcap-img {
        background: rgba(255,255,255,0.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
}

/* Print Styles */
@media print {
    .section-dropcap-img {
        width: 100px;
        margin: 0 15px 10px 0;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}