/**
 * Default Content Template Styles
 * Minimal styling for clean content pages
 */

/* Font family - Scala Sans */
body,
main,
p {
    font-family: 'Scala Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Container */
.content-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Main heading */
h1 {
    font-family: 'Scala Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1.2;
    color: #5d0f57;
    margin-bottom: 2rem;
}

/* Content area */
.content-area {
    color: #4a5568;
    line-height: 1.8;
}

.content-area p {
    margin-bottom: 1.5rem;
}

/* Headings within content - with specificity to override global styles */
.content-area h2 {
    font-family: 'Scala Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 2rem !important;
    line-height: 1.3 !important;
    color: #5d0f57 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
}

.content-area h3 {
    font-family: 'Scala Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    color: #5d0f57 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.content-area h4 {
    font-family: 'Scala Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    color: #5d0f57 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* YouTube embeds */
.content-area iframe[src*="youtube.com"],
.content-area iframe[src*="youtu.be"] {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 2rem 0;
}

/* Responsive */
@media (min-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    .content-container {
        padding: 80px 0px;
    }
}