/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Description:  Child theme for Dermer Law Firm
Version:      1.0.0
*/

/* ============================================================
   DERMER BRAND TOKENS
   Primary:         #04285C  (navy)
   Secondary:       #0B63E5  (bright blue)
   Dermer Blue:     #02142E  (deep navy)
   Light Blue:      #CEE0FA
   Extra Light Blue:#F0F5FF
   Light Camel:     #FFF4DE
   Bright Camel:    #CC9F47  (gold)
   Muted Blue:      #A3B4CC
   Font:            Manrope
   ============================================================ */


/* ============================================================
   TL;DR SUMMARY BOX  (#tldr / .tldr-box)
   ============================================================ */

.tldr-box {
    background-color: #FFF4DE;
    border-left: 5px solid #CC9F47;
    border-radius: 0 6px 6px 0;
    padding: 28px 32px 24px;
    margin: 0 0 44px 0;
    position: relative;
}

/* Gold "TL;DR" label */
.tldr-box h3.wp-block-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #CC9F47;
    margin: 0 0 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    border: none;
    padding: 0;
}

/* Decorative dash before label */
.tldr-box h3.wp-block-heading::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #CC9F47;
    flex-shrink: 0;
}

/* Strip default list styling */
.tldr-box .wp-block-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each bullet point */
.tldr-box .wp-block-list li {
    position: relative;
    padding-left: 22px;
    color: #02142E;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    margin-bottom: 10px;
}

.tldr-box .wp-block-list li:last-child {
    margin-bottom: 0;
}

/* Gold arrow bullet */
.tldr-box .wp-block-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: -1px;
    color: #CC9F47;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}


/* ============================================================
   FAQ SECTION  (#faq-seo / .faq-seo)
   ============================================================ */

.faq-seo {
    background-color: #02142E;
    border-radius: 8px;
    padding: 40px 44px 36px;
    margin: 52px 0;
    box-shadow: 0 4px 24px rgba(2, 20, 46, 0.18);
}

/* Section heading: "Frequently Asked Questions" */
.faq-seo > h2.wp-block-heading,
.faq-seo h2.wp-block-heading:first-of-type {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 32px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #0B63E5;
    line-height: 1.2;
}

/* Q&A pair wrapper — space between items */
.faq-seo h3.wp-block-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #CC9F47;
    margin: 28px 0 10px 0;
    padding: 0 0 0 16px;
    border-left: 3px solid #0B63E5;
    line-height: 1.45;
}

/* First question — no top margin gap */
.faq-seo h3.wp-block-heading:first-of-type {
    margin-top: 0;
}

/* Answer text */
.faq-seo p {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #CEE0FA;
    line-height: 1.75;
    margin: 0 0 4px 16px;
}

/* Divider between Q&A pairs */
.faq-seo h3.wp-block-heading + p + h3.wp-block-heading,
.faq-seo p + h3.wp-block-heading {
    border-top: 1px solid rgba(11, 99, 229, 0.2);
    padding-top: 28px;
    margin-top: 24px;
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    .tldr-box {
        padding: 22px 20px 18px;
        margin-bottom: 32px;
    }

    .tldr-box .wp-block-list li {
        font-size: 14px;
    }

    .faq-seo {
        padding: 28px 24px 24px;
        margin: 36px 0;
        border-radius: 6px;
    }

    .faq-seo > h2.wp-block-heading,
    .faq-seo h2.wp-block-heading:first-of-type {
        font-size: 18px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }

    .faq-seo h3.wp-block-heading {
        font-size: 15px;
    }

    .faq-seo p {
        font-size: 14px;
        margin-left: 0;
    }
}