@tailwind base;
@tailwind components;
@tailwind utilities;
body {
    font-family: "montserrat", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "quicksand", sans-serif;
}

.font-quicksand {
    font-family: "quicksand", sans-serif;
}

.tooltip p {
    font-size: 14px;
    font-family: "montserrat", sans-serif;
    font-weight: 400;
}

input,
select,
textarea,
.input-class {
    @apply border-gray-300 shadow-sm w-full block;
    @apply rounded-md;
    @apply focus:border-groc-100 focus:ring-groc-100;
    @apply focus:ring-2 focus:ring-offset-2;
}

.form-radio {
    @apply border-gray-300;
    @apply focus:border-groc-100 focus:ring-groc-100;
    @apply focus:ring-2 focus:ring-offset-2;
    @apply rounded-full;
    @apply appearance-none;
    @apply cursor-pointer;
    @apply checked:bg-groc-100;
    @apply checked:border-groc-100;
    @apply checked:text-groc-100;
}

/* Estils per al contingut de modals de pàgina (termes i condicions, etc.) */
.page-modal-content {
    @apply text-gray-800 leading-relaxed;
    font-family: "montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.page-modal-content h1 {
    @apply text-2xl font-bold text-gray-900 mb-6 mt-8;
    font-family: "quicksand", sans-serif;
}

.page-modal-content h1:first-child {
    @apply mt-0;
}

.page-modal-content h2 {
    @apply text-xl font-semibold text-gray-900 mb-4 mt-6;
    font-family: "quicksand", sans-serif;
}

.page-modal-content h3 {
    @apply text-lg font-semibold text-gray-800 mb-3 mt-5;
    font-family: "quicksand", sans-serif;
}

.page-modal-content h4 {
    @apply text-base font-semibold text-gray-800 mb-2 mt-4;
    font-family: "quicksand", sans-serif;
}

.page-modal-content p {
    @apply mb-4 text-justify;
}

.page-modal-content ul,
.page-modal-content ol {
    @apply mb-4 ml-6;
}

.page-modal-content li {
    @apply mb-2;
}

.page-modal-content ul li {
    @apply list-disc;
}

.page-modal-content ol li {
    @apply list-decimal;
}

.page-modal-content strong,
.page-modal-content b {
    @apply font-semibold text-gray-900;
}

.page-modal-content em,
.page-modal-content i {
    @apply italic;
}

.page-modal-content a {
    @apply text-primary-100 underline hover:text-primary-80;
}

.page-modal-content blockquote {
    @apply border-l-4 border-gray-300 pl-4 ml-4 italic text-gray-700 mb-4;
}

.page-modal-content hr {
    @apply border-t border-gray-300 my-6;
}

/* Estils específics per a seccions numerades */
.page-modal-content .section-number {
    @apply font-bold text-primary-100;
}

/* Estils per a subseccions */
.page-modal-content .subsection {
    @apply ml-4 mb-3;
}

/* Estils per a text destacat */
.page-modal-content .highlight {
    @apply bg-yellow-100 px-1 rounded;
}

/* Millor llegibilitat per a text llarg */
.page-modal-content {
    max-width: none;
    word-spacing: 0.05em;
}

/* Espai entre paràgrafs per millorar la llegibilitat */
.page-modal-content > p + p {
    @apply mt-4;
}

/* Estils per a definicions i termes importants */
.page-modal-content .definition {
    @apply font-medium text-gray-900;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .page-modal-content {
        font-size: 13px;
    }
    
    .page-modal-content h1 {
        @apply text-xl;
    }
    
    .page-modal-content h2 {
        @apply text-lg;
    }
    
    .page-modal-content h3 {
        @apply text-base;
    }
}