/* ==========================================================================
   content-prose.css
   Tipografía estándar para bloques de contenido de Safer Sidewalks.

   Paleta: #35ACCE (acento) · #1E4682 (azul de marca) · #525B6E (títulos)

   Uso:
     <div class="content-prose">...</div>               tipografía de lectura
     <div class="content-prose prose-card">...</div>    + tarjeta blanca
     <div class="content-prose prose-lead">...</div>    + primer párrafo destacado

   El scope #main-wrapper (id + clase = 1,1,x) es necesario para ganar a las
   reglas del tema: .about-us.welcome-section p (0,2,1) y .about-us-content h2.
   ========================================================================== */

#main-wrapper .content-prose {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 400;
    color: #334155;
}

/* ---------- Modificadores ---------- */
#main-wrapper .content-prose.prose-card {
    background: #fff;
    border: 1px solid rgba(53, 172, 206, 0.20);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(30, 70, 130, 0.08);
    padding: 30px 34px 24px;
}

#main-wrapper .content-prose.prose-lead > p:first-of-type {
    font-size: 1.12rem;
    line-height: 1.7;
    color: #1c2b3f;
    padding-left: 18px;
    border-left: 4px solid #35ACCE;
    margin-bottom: 28px;
}

/* ---------- Párrafos y énfasis ---------- */
#main-wrapper .content-prose p {
    margin-bottom: 18px;
}

#main-wrapper .content-prose p:last-child {
    margin-bottom: 0;
}

#main-wrapper .content-prose strong,
#main-wrapper .content-prose b {
    color: #1E4682;
    font-weight: 700;
}

/* Enfasis DENTRO de un encabezado: debe heredar el color del titulo (#525B6E),
   no el azul de marca que el estandar usa para <strong> en el texto.
   Casos reales: el editor guarda titulos como <h2><strong>Pregunta</strong></h2>,
   y con la regla anterior el titular entero salia azul. */
#main-wrapper .content-prose h1 strong,
#main-wrapper .content-prose h1 b,
#main-wrapper .content-prose h2 strong,
#main-wrapper .content-prose h2 b,
#main-wrapper .content-prose h3 strong,
#main-wrapper .content-prose h3 b,
#main-wrapper .content-prose h4 strong,
#main-wrapper .content-prose h4 b,
#main-wrapper .content-prose h5 strong,
#main-wrapper .content-prose h5 b,
#main-wrapper .content-prose h6 strong,
#main-wrapper .content-prose h6 b {
    color: inherit;
}

#main-wrapper .content-prose a {
    color: #1E4682;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#main-wrapper .content-prose a:hover {
    color: #35ACCE;
    text-decoration: none;
}

/* ---------- Títulos ---------- */
#main-wrapper .content-prose h2 {
    font-family: 'Bebas Neue', 'Arial Black', sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    font-weight: 400;
    letter-spacing: .5px;
    line-height: 1.2;
    color: #525B6E;
    margin: 42px 0 16px;
    padding-bottom: 10px;
    position: relative;
}

#main-wrapper .content-prose h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #35ACCE, #1E4682);
}

#main-wrapper .content-prose h3 {
    font-family: 'Signika Negative', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .2px;
    color: #525B6E;
    margin: 32px 0 12px;
    padding-left: 14px;
    border-left: 3px solid #35ACCE;
}

#main-wrapper .content-prose h4 {
    font-family: 'Signika Negative', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #525B6E;
    margin: 26px 0 10px;
}

/* Subtitulos/líneas sueltas que el editor guarda como <p><strong>...</strong></p>.
   Sin esto salian como negrita azul #1E4682 (un tercer color de titulo,
   distinto del h2/h3); se homologan con el color y el tamano del h4.
   Cubre las dos variantes que genera el editor:
     <p><strong>Benefits of Timely Sidewalk Repair</strong></p>
     <p><br><strong>Failure to comply may result in:</strong></p>   (linea suelta) */
#main-wrapper .content-prose p > strong:only-child,
#main-wrapper .content-prose p > br:first-child + strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: #525B6E;
}

/* Etiquetas al INICIO de un bloque (preguntas de FAQ, "Soil Shifting and
   Erosion:", "The cost depends on:") tambien se leen como subtitulo, asi que
   usan el color de los titulos. El <strong> que va a mitad de una frase sigue
   en el azul de marca, porque ahi si es enfasis y no titulo. */
#main-wrapper .content-prose p > strong:first-child,
#main-wrapper .content-prose li > strong:first-child,
#main-wrapper .content-prose td > strong:first-child,
#main-wrapper .content-prose dd > strong:first-child {
    color: #525B6E;
}

/* ---------- Encabezados con texto centrado ----------
   El cuerpo de los articulos se arma muchas veces con tablas y celdas
   `style="text-align:center"`. Las decoraciones del estandar estan ancladas a la
   izquierda, asi que con texto centrado quedaban huerfanas: la barra del h2
   aparecia en el margen izquierdo (lejos del titulo) y la barra lateral del h3
   se despegaba del texto, ademas de desplazarlo 14px por el padding.
   Aqui las dos se adaptan a la alineacion del texto. */
#main-wrapper .content-prose h2.text-center::after,
#main-wrapper .content-prose .text-center h2::after,
#main-wrapper .content-prose [align="center"] h2::after,
#main-wrapper .content-prose h2[align="center"]::after,
#main-wrapper .content-prose [style*="text-align:center"] h2::after,
#main-wrapper .content-prose [style*="text-align: center"] h2::after,
#main-wrapper .content-prose h2[style*="text-align:center"]::after,
#main-wrapper .content-prose h2[style*="text-align: center"]::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

#main-wrapper .content-prose h3.text-center,
#main-wrapper .content-prose .text-center h3,
#main-wrapper .content-prose [align="center"] h3,
#main-wrapper .content-prose h3[align="center"],
#main-wrapper .content-prose [style*="text-align:center"] h3,
#main-wrapper .content-prose [style*="text-align: center"] h3,
#main-wrapper .content-prose h3[style*="text-align:center"],
#main-wrapper .content-prose h3[style*="text-align: center"] {
    border-left: 0;
    padding-left: 0;
}

#main-wrapper .content-prose h2:first-child,
#main-wrapper .content-prose h3:first-child,
#main-wrapper .content-prose h4:first-child {
    margin-top: 0;
}

/* ---------- Lista numerada ---------- */
#main-wrapper .content-prose ol {
    list-style: none;
    counter-reset: cprose;
    margin: 22px 0 26px;
    padding-left: 0;
}

#main-wrapper .content-prose ol > li {
    position: relative;
    counter-increment: cprose;
    padding-left: 46px;
    margin-bottom: 16px;
    min-height: 30px;
}

#main-wrapper .content-prose ol > li::before {
    content: counter(cprose);
    position: absolute;
    left: 0;
    top: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #35ACCE 0%, #1E4682 100%);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(30, 70, 130, 0.25);
}

/* ---------- Lista con viñetas ---------- */
#main-wrapper .content-prose ul {
    list-style: none;
    margin: 18px 0 24px;
    padding-left: 0;
}

#main-wrapper .content-prose ul > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
}

#main-wrapper .content-prose ul > li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35ACCE;
    box-shadow: 0 0 0 4px rgba(53, 172, 206, 0.15);
}

/* Listas anidadas: sin contador/vble nuevo */
#main-wrapper .content-prose li > ol,
#main-wrapper .content-prose li > ul {
    margin: 12px 0 6px;
}

/* ---------- Citas, imágenes y separadores ---------- */
#main-wrapper .content-prose blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    border-left: 4px solid #35ACCE;
    border-radius: 0 12px 12px 0;
    color: #334155;
    font-style: italic;
}

#main-wrapper .content-prose blockquote p:last-child {
    margin-bottom: 0;
}

#main-wrapper .content-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

#main-wrapper .content-prose hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px dashed rgba(53, 172, 206, 0.40);
}

/* ---------- FAQ ---------- */
#main-wrapper .content-prose .faq-item {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    border: 1px solid rgba(53, 172, 206, 0.20);
    border-left: 4px solid #35ACCE;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

#main-wrapper .content-prose .faq-item p {
    margin: 0;
}

#main-wrapper .content-prose .faq-q {
    display: block;
    color: #525B6E;
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
    #main-wrapper .content-prose.prose-card {
        padding: 20px 18px 16px;
    }

    #main-wrapper .content-prose.prose-lead > p:first-of-type {
        padding-left: 14px;
        font-size: 1rem;
    }

    #main-wrapper .content-prose h2 {
        margin-top: 32px;
    }

    #main-wrapper .content-prose ol > li {
        padding-left: 40px;
    }
}