/* ===========================
   Readability Improvements
   可読性向上のための調整
   =========================== */

/* Base Typography Improvements */
body {
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Paragraph Text */
p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 1em;
}

/* Section Descriptions */
.about-description,
.section-description,
.organizer-description p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-medium);
    letter-spacing: 0.01em;
}

/* Card Text */
.benefit-card p,
.special-benefit-card p,
.concern-item p,
.program-description {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-medium);
    letter-spacing: 0.01em;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

/* FAQ Text */
.faq-answer {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-medium);
}

/* Detail Text */
.detail-item p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-medium);
}

/* ===========================
   Mobile Readability
   =========================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    p {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    
    .about-description,
    .section-description,
    .organizer-description p {
        font-size: 1rem;
        line-height: 1.8;
    }
    
    .benefit-card p,
    .special-benefit-card p,
    .concern-item p,
    .program-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    
    .faq-answer {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    
    .detail-item p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    
    .about-description,
    .section-description,
    .organizer-description p {
        font-size: 0.95rem;
        line-height: 1.75;
    }
    
    .benefit-card p,
    .special-benefit-card p,
    .concern-item p,
    .program-description {
        font-size: 0.9rem;
        line-height: 1.65;
    }
    
    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    
    .faq-answer {
        font-size: 0.9rem;
        line-height: 1.7;
    }
    
    .detail-item p {
        font-size: 0.9rem;
        line-height: 1.65;
    }
}

/* ===========================
   Text Contrast & Spacing
   =========================== */

/* Improved Contrast */
.text-dark {
    color: #2D1B1B;
}

.text-medium {
    color: #5A4545;
}

.text-light {
    color: #8B7070;
}

/* Spacing Between Elements */
.about-description + .about-description,
.organizer-description p + p {
    margin-top: 1.2em;
}

/* List Spacing */
ul, ol {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

/* Heading Spacing */
h2 + p,
h3 + p {
    margin-top: 0.8em;
}

/* ===========================
   Mobile Line Break Fix
   =========================== */
@media (max-width: 768px) {
    /* Remove forced line breaks on mobile */
    br {
        display: none;
    }
    
    /* Add spacing for elements that had <br> */
    h3 {
        line-height: 1.5;
    }
    
    /* Before-After Section Mobile Fix */
    .before-after-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 30px 20px !important;
    }
    
    .before-side,
    .after-side {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 25px 20px !important;
        background: rgba(255, 107, 53, 0.05);
        border-radius: 12px;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .before-after-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 16px !important;
        margin-bottom: 15px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    .before-side i,
    .after-side i {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
        display: block !important;
    }
    
    .before-side p,
    .after-side p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin: 0 !important;
        width: 100% !important;
        white-space: normal !important;
    }
    
    .arrow-icon {
        font-size: 2rem !important;
        margin: 15px 0 !important;
        transform: rotate(90deg) !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Ensure natural text wrapping */
    * {
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    
    h1, h2, h3, h4, h5, h6 {
        word-break: keep-all;
        line-height: 1.5;
    }
    
    /* Prevent awkward breaks in emphasized text */
    strong {
        white-space: nowrap;
    }
    
    /* Keep quoted text together */
    .organizer-description p:last-child {
        text-align: center;
        padding: 0 10px;
    }
}
    
    /* Smaller padding for very small screens */
    .before-after-item {
        padding: 25px 16px !important;
        gap: 25px !important;
    }
    
    .before-side,
    .after-side {
        padding: 20px 16px !important;
    }
    
    .before-side p,
    .after-side p {
        font-size: 0.95rem !important;
    }
    
    .arrow-icon {
        font-size: 1.8rem !important;
        margin: 10px 0 !important;
    }
}