/**
 * Logoped Custom Blocks Styles
 * Styles for core Gutenberg blocks used in logoped articles
 * Version: 1.0.0
 * Author: Hermes
 */

/* ==========================================================================
   ALARM BANNER (core/paragraph with className="logoped-alarm")
   ========================================================================== */
.logoped-alarm {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border: 1px solid #ffc107;
    border-left: 5px solid #ffc107;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    color: #856404;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.logoped-alarm strong {
    color: #533f03;
    font-weight: 700;
}

.logoped-alarm p {
    margin: 0;
}

/* ==========================================================================
   STEPS LIST (core/list ordered with className="logoped-steps")
   ========================================================================== */
.logoped-steps {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.logoped-steps li {
    position: relative;
    padding: 1rem 1rem 1rem 3.5rem;
    margin-bottom: 1rem;
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.logoped-steps li:hover {
    border-color: #d4d4d4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.logoped-steps li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px rgba(74, 144, 217, 0.3);
}

.logoped-steps li:last-child {
    margin-bottom: 0;
}

.logoped-steps p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

/* ==========================================================================
   AGE NORM TABLE (core/table with className="age-norm-table")
   ========================================================================== */
.age-norm-table {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.age-norm-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.age-norm-table thead th {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.age-norm-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.age-norm-table tbody tr:last-child td {
    border-bottom: none;
}

.age-norm-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.age-norm-table tbody tr:hover {
    background: #f0f7ff;
}

.age-norm-table .age-col {
    font-weight: 600;
    color: #4a90d9;
    white-space: nowrap;
    width: 1%;
}

.age-norm-table .norm-col {
    color: #333;
    line-height: 1.6;
}

/* ==========================================================================
   COMPARISON TABLE (core/table with className="comparison-table")
   ========================================================================== */
.comparison-table {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.comparison-table thead th {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.comparison-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.comparison-table tbody tr:hover {
    background: #f5f5f5;
}

/* ==========================================================================
   PHONETIC PAIRS TABLE (core/table with className="phonetic-pairs")
   ========================================================================== */
.phonetic-pairs {
    width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.phonetic-pairs table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.phonetic-pairs thead th {
    background: linear-gradient(135deg, #e83e8c 0%, #d63384 100%);
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

.phonetic-pairs tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    text-align: center;
}

.phonetic-pairs tbody tr:last-child td {
    border-bottom: none;
}

.phonetic-pairs tbody tr:nth-child(even) {
    background: #fdf2f8;
}

.phonetic-pairs tbody tr:hover {
    background: #fce7f3;
}

/* ==========================================================================
   CHECKLIST (core/list unordered with className="logoped-checklist")
   ========================================================================== */
.logoped-checklist {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.logoped-checklist li {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    margin-bottom: 0.5rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    line-height: 1.5;
    color: #166534;
    transition: all 0.2s ease;
}

.logoped-checklist li:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.logoped-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #16a34a;
    font-weight: 800;
    font-size: 1.125rem;
}

/* ==========================================================================
   FAQ / DETAILS (core/details blocks)
   ========================================================================== */
details.wp-block-details {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    margin: 1rem 0;
    overflow: hidden;
    transition: all 0.2s ease;
}

details.wp-block-details[open] {
    border-color: #d4d4d4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background: white;
}

details.wp-block-details summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s ease;
}

details.wp-block-details summary::-webkit-details-marker {
    display: none;
}

details.wp-block-details summary::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 600;
    color: #4a90d9;
    transition: transform 0.2s ease;
}

details.wp-block-details[open] summary::after {
    transform: rotate(45deg);
    color: #357abd;
}

details.wp-block-details summary:hover {
    color: #4a90d9;
}

details.wp-block-details > p {
    padding: 0 1.25rem 1.25rem;
    margin: 0;
    line-height: 1.7;
    color: #444;
}

/* ==========================================================================
   SUMMARY BLOCK (core/group with className="logoped-summary")
   ========================================================================== */
.logoped-summary {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
    border: 1px solid #b6d4f0;
    border-left: 5px solid #4a90d9;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.logoped-summary h2 {
    margin: 0 0 1rem;
    color: #1e4d7b;
    font-size: 1.25rem;
    font-weight: 700;
}

.logoped-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

.logoped-summary li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: #2c5f8a;
}

.logoped-summary li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   LEAD PARAGRAPH (core/paragraph with is-style-lead)
   ========================================================================== */
.is-style-lead p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #333;
    font-weight: 400;
}

/* ==========================================================================
   CALCULATOR INLINE (core/group with className="calculator-inline")
   ========================================================================== */
.calculator-inline {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* ==========================================================================
   TEST QUIZ (core/group with className="test-quiz")
   ========================================================================== */
.test-quiz {
    background: #fdf4ff;
    border: 1px solid #f0abfc;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

/* ==========================================================================
   READ ALSO CARDS (core/group with className="read-also")
   ========================================================================== */
.read-also {
    margin: 1.5rem 0;
}

.read-also h3 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    color: #333;
}

/* ==========================================================================
   AUTHOR EEAT (custom block, kept for compatibility)
   ========================================================================== */
.wp-block-logoped-author-eeat {
    background: #fafafa;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 1.25rem;
    margin: 2rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.wp-block-logoped-author-eeat h4 {
    margin: 0 0 0.5rem;
    color: #333;
    font-size: 1.125rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .logoped-steps li {
        padding-left: 3rem;
    }
    
    .logoped-steps li::before {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8rem;
        left: 0.75rem;
    }
    
    .age-norm-table,
    .comparison-table,
    .phonetic-pairs {
        font-size: 0.875rem;
    }
    
    .age-norm-table thead th,
    .comparison-table thead th,
    .phonetic-pairs thead th {
        padding: 0.75rem;
    }
    
    .age-norm-table tbody td,
    .comparison-table tbody td,
    .phonetic-pairs tbody td {
        padding: 0.625rem 0.75rem;
    }
}