/* ==========================================================================
   SIMPLE ABOUT PAGE STYLES (template-about-simple.php)
   This version inherits the theme's fonts and colors.
   ========================================================================== */

/* --- 1.0: Layout & Container --- */
.simple-layout-container {
    /* Font-family is intentionally omitted to inherit from your theme */
    color: var(--text-body, #555); /* Uses your theme's body text color */
    max-width: 800px;
    margin: 40px auto 80px auto;
    padding: 0 20px;
    line-height: 1.7;
}

/* --- 2.0: Header Section --- */
.simple-header {
    text-align: center;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--border-color, #e9e9e9);
    padding-bottom: 40px;
}

.simple-header h1 {
    font-size: clamp(2.8rem, 8vw, 3.5rem);
    color: var(--text-heading, #333); /* Uses your theme's heading color */
    margin-top: 0;
    margin-bottom: 15px;
}

.simple-header .description {
    font-size: 1.125rem;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 3.0: Main Content (Articles) --- */
.simple-content article {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color, #e9e9e9);
}

.simple-content article:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.simple-content h2,
.simple-content h3 {
    color: var(--text-heading, #333);
    line-height: 1.3;
}

.simple-content h2 {
    font-size: 1.75rem; /* 28px */
    margin: 0 0 25px 0;
}

.simple-content h3 {
    font-size: 1.25rem; /* 20px */
    margin: 25px 0 8px 0;
}

.simple-content p {
    font-size: 1rem; /* 16px */
    margin-bottom: 1em;
}

.simple-content p:last-of-type {
    margin-bottom: 0;
}

.simple-content .section-intro {
    font-style: italic;
    color: var(--text-body, #444);
}

/* --- 4.0: Call to Action Button (Styled to match your brand) --- */
.simple-content .cta-button {
    display: inline-block;
    background-color: var(--brand-primary, #0073e6); /* Uses your primary brand color */
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--radius-md, 8px); /* Uses your theme's border-radius */
    transition: all 0.2s ease;
    border: none;
    line-height: 1.5;
}

.simple-content .cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}