/*
 * Styles for Sky Law FAQs List
 * Archivo: css/faqs-styles.css
 */

/* ========================================= */
/* Variables CSS (puedes importarlas de tu tema principal si ya las tienes) */
/* ========================================= */
:root {
    --black: #1a1a1a;
    --green: #c6a96f; /* Ocre/Dorado */
    --white: #ffffff;
    --white-secondary: #b2b2b2; /* Gris claro para textos secundarios */
}

/* ========================================= */
/* Contenedor principal de las FAQs          */
/* ========================================= */
.skylaw-faqs-list {
    width: 100%;
    max-width: 900px; /* Ajusta según el ancho deseado para tus FAQs */
    margin: 40px auto; /* Centrar y dar espacio */
    padding: 0 20px;
    box-sizing: border-box;
}

/* ========================================= */
/* Cada elemento de FAQ (pregunta y respuesta) */
/* ========================================= */
.skylaw-faq-item {
    background-color: var(--black); /* Fondo oscuro como tus tarjetas */
    border-radius: 13px; /* Borde redondeado como tus tarjetas */
    margin-bottom: 15px; /* Espacio entre cada FAQ */
    overflow: hidden; /* Para contener las animaciones de altura */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
}

/* ========================================= */
/* Contenedor de la Pregunta                */
/* ========================================= */
.skylaw-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Un padding generoso para el contenedor de la pregunta */
    padding: 20px 30px; /* Incrementado a 30px laterales */
    cursor: pointer;
    background-color: var(--black);
    color: var(--white);
    font-family: 'Uxum', sans-serif; /* Tu fuente principal */
    transition: background-color 0.3s ease;
}

.skylaw-faq-question:hover {
    background-color: rgba(26, 26, 26, 0.9); /* Ligeramente más claro en hover */
}

.skylaw-faq-question h3 {
    margin: 0;
    /* Font size del título de la pregunta: 1.2rem */
    font-size: 1.2rem; 
    font-weight: 600;
    color: var(--white); /* Color de la pregunta */
    flex-grow: 1; /* Permite que el texto ocupe el espacio */
    line-height: 1.4;
    /* Añadimos padding a la derecha para separar el h3 del icono */
    padding-right: 20px; /* Espacio entre texto de pregunta e icono */
}

.skylaw-faq-icon {
    font-size: 2rem; /* Tamaño del icono */
    color: var(--green); /* Color del icono */
    /* No necesitamos margin-left aquí, ya que el padding-right del h3 maneja la separación */
    margin-left: 0; 
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Evita que el icono se encoja */
}

/* Icono rotar cuando la FAQ está activa */
.skylaw-faq-item.active .skylaw-faq-icon {
    transform: rotate(45deg); /* Gira de '+' a 'x' o de flecha a 'v' si usas SVG */
}

/* Mejoras de accesibilidad */
.skylaw-faq-question[aria-expanded="true"] .skylaw-faq-icon {
    transform: rotate(45deg);
}

.skylaw-faq-question:focus {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.skylaw-faq-answer[aria-hidden="true"] {
    display: none;
}

/* ========================================= */
/* Contenedor de la Respuesta               */
/* ========================================= */
.skylaw-faq-answer {
    /* Estado cerrado: padding vertical en 0px */
    padding: 0 30px; /* Consistente con el padding lateral de la pregunta */
    max-height: 0; /* Inicialmente oculto */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Animación de altura y padding */
    background-color: #d9d9d9; /* Fondo más contrastado para mejor legibilidad */
    color: #000000; /* Texto negro para contraste */
    font-family: 'Uxum', sans-serif;
    line-height: 1.6;
    border-radius: 12px; /* Caja de respuesta con esquinas suaves */
    /* Font size del cuerpo de la respuesta: 1rem */
    font-size: 1rem; 
}

.skylaw-faq-item.active .skylaw-faq-answer {
    /* Estado abierto: padding completo. El JS ajusta el max-height. */
    /* Padding para cuando la respuesta está visible: 20px arriba, 30px laterales, 30px abajo */
    padding: 20px 30px 30px; 
    margin: 10px; /* Separación respecto al borde negro en todos los lados */
}

.skylaw-faq-answer p {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.1rem; /* Tamaño solicitado para el párrafo */
}

/* Estilos para contenido HTML dentro de la respuesta */
.skylaw-faq-answer h1,
.skylaw-faq-answer h2,
.skylaw-faq-answer h3,
.skylaw-faq-answer h4,
.skylaw-faq-answer h5,
.skylaw-faq-answer h6 {
    color: #000000;
    margin: 0 0 0.6em;
    line-height: 1.3;
    font-weight: 700;
}

.skylaw-faq-answer strong,
.skylaw-faq-answer b {
    color: #000000;
    font-weight: 700;
}

/* Estilos para el mensaje de no encontrado */
.no-faqs-found {
    color: var(--white-secondary);
    text-align: center;
    padding: 20px;
    font-family: 'Uxum', sans-serif;
}

/* ========================================= */
/* Media Queries (ajusta según tus necesidades) */
/* ========================================= */
@media (max-width: 768px) {
    .skylaw-faqs-list {
        margin: 20px auto;
        padding: 0 15px;
    }
    .skylaw-faq-question {
        padding: 15px 20px; /* Padding de la pregunta en tablet */
    }
    .skylaw-faq-question h3 {
        font-size: 1.1rem; /* Ajuste para tablet, si 1.2rem es demasiado grande */
        padding-right: 15px; /* Espacio entre texto de pregunta e icono en tablet */
    }
    .skylaw-faq-icon {
        font-size: 1.8rem; /* Ajuste del tamaño del icono en tablet */
    }
    .skylaw-faq-answer {
        padding: 0 20px; /* Padding en estado cerrado para tablet */
        font-size: 0.95rem; /* Ajuste para tablet */
    }
    .skylaw-faq-item.active .skylaw-faq-answer {
        padding: 15px 25px 25px; /* Padding en estado abierto para tablet */
        margin: 10px; /* Separación uniforme en tablet */
    }
}

@media (max-width: 480px) {
    .skylaw-faq-question {
        padding: 12px 15px; /* Padding de la pregunta en móvil pequeño */
    }
    .skylaw-faq-question h3 {
        font-size: 1.3rem; /* Ajuste para móvil pequeño */
        padding-right: 10px; /* Espacio entre texto de pregunta e icono en móvil pequeño */
    }
    .skylaw-faq-icon {
        font-size: 1.6rem; /* Ajuste del tamaño del icono en móvil pequeño */
    }
    .skylaw-faq-answer {
        padding: 0 15px; /* Padding en estado cerrado para móvil pequeño */
        font-size: 1rem; /* Ajuste para móvil pequeño */
    }
    .skylaw-faq-item.active .skylaw-faq-answer {
        padding: 10px 20px 20px; /* Padding en estado abierto para móvil pequeño */
        margin: 8px; /* Separación uniforme en móvil pequeño */
    }
}