/* ---------------------------------------------------------------
 * Ponte entre os blocos do WordPress e o CSS que o site ja tem.
 * Sem isso o conteudo sai certo, mas sem a cara da clinica.
 * ------------------------------------------------------------ */

/* Menu do cabecalho e do rodape (bloco Navegacao) */
.nav-links .wp-block-navigation__container { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.main-footer .nav-links .wp-block-navigation__container { display: block; }
.nav-links .wp-block-navigation-item__content { text-decoration: none; }

/* Logo (bloco Logo do site) */
.logo .wp-block-site-logo img { display: block; width: 100%; height: auto; }

/* --- Perguntas frequentes: blocos "Detalhes" com a cara do site --- */
.faq-bloco { max-width: 86rem; margin: 0 auto var(--sp-4); padding: 0 2rem; }
    .faq-lista details { display: block; border-bottom: 1px solid #e6ddd0; }
    .faq-lista details { display: block; padding: 0; }
    .faq-lista details > summary {
        margin: 0; border: none;
        padding: 1.8rem 3.6rem 1.8rem 0;
        font-size: 1.9rem; color: var(--text);
        cursor: pointer; position: relative;
        transition: color .2s;
    }
    .faq-lista details > summary::after {
        content: "+";
        position: absolute; right: .4rem; top: 50%;
        transform: translateY(-50%);
        font-family: 'Josefin Sans', sans-serif;
        font-size: 2.6rem; font-weight: 300;
        color: var(--gold-dark); line-height: 1;
    }
    .faq-lista details.active h3 { color: var(--marsala); }
    .faq-lista details.active h3::after { content: "\2212"; }
    .faq-lista details:not(.active) > *:not(h3) { display: none; }
    .faq-lista details.active { padding-bottom: 2.2rem; }
    .faq-lista details p { line-height: 1.85; max-width: none; }

.faq-lista details > summary { list-style: none; cursor: pointer; }
.faq-lista details > summary::-webkit-details-marker { display: none; }
.faq-lista details[open] > summary::after { content: "\2013"; }

/* --- Procedimentos: lista de "Detalhes" que vira abas no desktop --- */
.oculo-abas > details > summary { list-style: none; cursor: pointer; }
.oculo-abas > details > summary::-webkit-details-marker { display: none; }

@media (min-width: 961px) {
    .oculo-abas.com-abas { display: grid; grid-template-columns: 26rem 1fr; gap: 4rem; align-items: start; }
    .oculo-abas.com-abas > .tabs { grid-column: 1; }
    .oculo-abas.com-abas > details { grid-column: 2; grid-row: 1; }
    .oculo-abas.com-abas > details:not([open]) { display: none; }
    .oculo-abas.com-abas > details > summary { display: none; }
}