/*
Theme Name: NanoLabz
Description: Tema WordPress para NanoLabz - Assistentes de IA Especializados
Version: 1.1
Author: NanoLabz
*/

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

/* CSS específico para cards - maior especificidade */
.bg-white.rounded-2xl.shadow-sm .flex {
    flex-wrap: nowrap !important;
}

/* Tags podem quebrar linha */
.bg-white.rounded-2xl.shadow-sm .flex.flex-wrap.gap-1 {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

.bg-white.rounded-2xl.shadow-sm .flex.items-center {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.bg-white.rounded-2xl.shadow-sm span {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.bg-white.rounded-2xl.shadow-sm i[data-lucide] {
    flex-shrink: 0 !important;
}

/* Regra específica para tags - podem quebrar linha */
div.bg-white.rounded-2xl.shadow-sm div.flex.flex-wrap.gap-1 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 0.25rem !important;
}

div.bg-white.rounded-2xl.shadow-sm div.flex.items-center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    align-items: center !important;
}

div.bg-white.rounded-2xl.shadow-sm span.px-2.py-1 {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

div.bg-white.rounded-2xl.shadow-sm i[data-lucide="star"],
div.bg-white.rounded-2xl.shadow-sm i[data-lucide="star-half"] {
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Botões de ação sempre na mesma linha */
div.bg-white.rounded-2xl.shadow-sm .flex.gap-2:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
}

div.bg-white.rounded-2xl.shadow-sm .flex.gap-2:last-child a {
    flex-shrink: 0 !important;
    white-space: wrap !important;
    display: inline-block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-8xl {
        font-size: 3.5rem !important;
    }
    
    .text-7xl {
        font-size: 3rem !important;
    }
    
    .text-6xl {
        font-size: 2.5rem !important;
    }
    
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .text-4xl {
        font-size: 1.8rem !important;
    }
    
    /* Card de votação - manter em linha no mobile */
    .categoria-option {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    
    .categoria-option > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        gap: 0.75rem !important;
    }
    
    .categoria-option > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    .categoria-option .w-16 {
        width: 2.5rem !important;
        min-width: 2.5rem !important;
        max-width: 2.5rem !important;
    }
    
    .categoria-option .w-8 {
        width: 1.5rem !important;
        min-width: 1.5rem !important;
        max-width: 1.5rem !important;
    }
    
    .categoria-option span.text-xs {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }
    
    .categoria-option span.text-sm {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        max-width: none !important;
        flex-shrink: 1 !important;
    }
    
    .categoria-option .checkbox-indicator {
        flex-shrink: 0 !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
        min-width: 1.25rem !important;
    }
    
    .grid-cols-2,
    .lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    .lg\\:text-left {
        text-align: center !important;
    }
    
    .lg\\:justify-start {
        justify-content: center !important;
    }
    
    .max-w-lg,
    .max-w-md {
        max-width: 18rem !important;
    }
    
    .h-screen {
        height: auto !important;
        min-height: 85vh !important;
    }
    
    .gap-16 {
        gap: 3rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .px-10 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .py-32 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .py-40 {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
    
    .p-24 {
        padding: 3rem !important;
    }
    
    .p-16 {
        padding: 2rem !important;
    }
    
    .mb-16 {
        margin-bottom: 3rem !important;
    }
    
    .mb-20 {
        margin-bottom: 4rem !important;
    }
    
    /* Regras específicas para elementos que devem ficar em coluna no mobile */
    .hero .flex,
    .flex.flex-col,
    .flex-col {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Manter horizontal para cards de votação e outros elementos específicos */
    .categoria-option,
    .categoria-option .flex,
    .flex.items-center.justify-between,
    .flex.items-center.gap-2,
    .flex.items-center.gap-3 {
        flex-direction: row !important;
    }
    
    /* Exceção para header - manter horizontal */
    nav .flex,
    header .flex {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .justify-center {
        align-items: center !important;
    }
    
    /* Melhorias para cards responsivos */
    .bg-white.rounded-2xl.shadow-sm {
        margin-bottom: 1rem;
    }
    
    /* Forçar layout horizontal em todos os flex dos cards */
    .bg-white.rounded-2xl.shadow-sm .flex {
        flex-wrap: nowrap !important;
    }
    
    /* Botões sempre na mesma linha */
    .bg-white.rounded-2xl.shadow-sm .flex.gap-2:last-child {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .p-6 {
        padding: 1.5rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    /* Layout do header do card - ícone + nome */
    .bg-white.rounded-2xl.shadow-sm .flex.items-center.gap-3 {
        gap: 0.75rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
        flex-shrink: 0 !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }
    
    /* Tags responsivas - podem quebrar linha */
    .bg-white.rounded-2xl.shadow-sm .flex.flex-wrap.gap-1 {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        overflow: visible !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .px-2.py-1 {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Estrelas responsivas - forçar layout horizontal */
    .bg-white.rounded-2xl.shadow-sm .flex.items-center.gap-1,
    .bg-white.rounded-2xl.shadow-sm .flex.items-center.gap-2 {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        overflow: hidden !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .w-4.h-4 {
        width: 1rem !important;
        height: 1rem !important;
        flex-shrink: 0 !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .flex.items-center.flex-shrink-0 {
        flex-shrink: 0 !important;
    }
    
    /* Botões responsivos */
    .bg-white.rounded-2xl.shadow-sm .flex.gap-2 {
        gap: 0.5rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .py-2.px-4 {
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .text-8xl {
        font-size: 2.8rem !important;
    }
    
    .text-7xl {
        font-size: 2.5rem !important;
    }
    
    .text-6xl {
        font-size: 2rem !important;
    }
    
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .px-10 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    .py-32 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .py-40 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .min-h-screen {
        min-height: 70vh !important;
    }
    
    .px-12 {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    
    .py-6 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    
    .px-20 {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    
    .py-10 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Cards em telas muito pequenas */
    .bg-white.rounded-2xl.shadow-sm .p-6 {
        padding: 1.25rem !important;
    }
    
    /* Forçar layout horizontal em telas pequenas */
    .bg-white.rounded-2xl.shadow-sm .flex {
        flex-wrap: nowrap !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .flex.flex-wrap.gap-1 {
        overflow: visible !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm h3 {
        font-size: 1.125rem !important;
    }
    
    /* Layout do header em telas pequenas */
    .bg-white.rounded-2xl.shadow-sm .flex.items-center.gap-3 {
        gap: 0.5rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .w-12.h-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm p {
        font-size: 0.9rem !important;
        margin-bottom: 25px !important;
    }
   
    .bg-white.rounded-2xl.shadow-sm .px-2.py-1 {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .w-4.h-4 {
        width: 0.9rem !important;
        height: 0.9rem !important;
    }
    
    .bg-white.rounded-2xl.shadow-sm .py-2.px-4 {
        padding: 0.5rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}

/* Ajuste para tags quebrarem em múltiplas linhas */
.bg-white.rounded-2xl.shadow-sm .flex.gap-2:last-child {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: visible !important;
    gap: 0.5rem !important;
}

/* Reduzir altura mínima em telas pequenas */
@media (max-width: 480px) {
    .min-h-screen {
        min-height: 70vh !important;
    }
}

/* Estilos para conteúdo do Gutenberg - espaçamento de parágrafos */
.prose {
    color: #374151;
    max-width: none;
}

.prose p {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    line-height: 1.7;
}

.prose p:first-child {
    margin-top: 0;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
}

.prose h1:first-child, .prose h2:first-child, .prose h3:first-child, 
.prose h4:first-child, .prose h5:first-child, .prose h6:first-child {
    margin-top: 0;
}

.prose ul, .prose ol {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.prose blockquote {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    padding-left: 1rem;
    border-left: 0.25rem solid #e5e7eb;
    font-style: italic;
    color: #6b7280;
}

.prose img {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.prose a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: #1d4ed8;
}

.prose strong {
    font-weight: 600;
    color: #111827;
}

.prose code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.prose pre {
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
    font-size: 0.875em;
}

/* Responsive adjustments para conteúdo do Gutenberg */
@media (max-width: 768px) {
    .prose p {
        margin-top: 1rem;
        margin-bottom: 1rem;
        line-height: 1.6;
    }
    
    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .prose ul, .prose ol {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-left: 1.25rem;
    }
    
    .prose blockquote {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding-left: 0.75rem;
    }
    
    .prose img {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .prose p {
        margin-top: 0.875rem;
        margin-bottom: 0.875rem;
        line-height: 1.5;
    }
    
    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .prose ul, .prose ol {
        margin-top: 0.875rem;
        margin-bottom: 0.875rem;
        padding-left: 1rem;
    }
    
    .prose blockquote {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-left: 0.5rem;
    }
    
    .prose img {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
}

/* Ajustar tamanhos dos subtítulos - SEM LINHAS */
.prose h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.prose h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 2.25rem;
    margin-bottom: 1.25rem;
    border-bottom: none;
    padding-bottom: 0;
}

.prose h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h4 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
}

.prose h5 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose h6 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

/* Responsividade para subtítulos */
@media (max-width: 768px) {
    .prose h1 {
        font-size: 2.5rem;
        margin-top: 2rem;
        margin-bottom: 1.25rem;
    }
    
    .prose h2 {
        font-size: 2rem;
        margin-top: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .prose h3 {
        font-size: 1.75rem;
        margin-top: 1.5rem;
        margin-bottom: 0.875rem;
    }
    
    .prose h4 {
        font-size: 1.5rem;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .prose h5 {
        font-size: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 0.625rem;
    }
    
    .prose h6 {
        font-size: 1.125rem;
        margin-top: 0.875rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .prose h1 {
        font-size: 2rem;
        margin-top: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .prose h2 {
        font-size: 1.75rem;
        margin-top: 1.5rem;
        margin-bottom: 0.875rem;
    }
    
    .prose h3 {
        font-size: 1.5rem;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .prose h4 {
        font-size: 1.25rem;
        margin-top: 1rem;
        margin-bottom: 0.625rem;
    }
    
    .prose h5 {
        font-size: 1.125rem;
        margin-top: 0.875rem;
        margin-bottom: 0.5rem;
    }
    
    .prose h6 {
        font-size: 1rem;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }
}

/* Header fixo para rolagem - apenas no mobile */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
    z-index: 40;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    display: none; /* Oculto no desktop por padrão */
}

/* Quando o header fixo estiver visível, ajustar o topo para ficar abaixo do header principal */
.sticky-header.visible {
    top: 4.5rem; /* Altura menor no mobile + margem */
}

/* Mostrar apenas no mobile */
@media (max-width: 768px) {
    .sticky-header {
        display: block; /* Mostrar no mobile */
    }
    
    .sticky-header.visible {
        top: 4.5rem; /* Altura menor no mobile + margem */
    }
}

.sticky-header.visible {
    transform: translateY(0);
}

/* Ajustar body quando header fixo estiver visível - apenas no mobile */
body.sticky-header-visible {
    padding-top: 0; /* Sem padding no desktop */
}

@media (max-width: 768px) {
    body.sticky-header-visible {
        padding-top: 8rem; /* Altura menor no mobile + margem */
    }
}

.sticky-header-content {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sticky-header .tool-icon {
    width: 2rem;
    height: 2rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sticky-header .tool-icon i {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
}

.sticky-header .tool-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-header .tool-status {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    flex-shrink: 0;
}

.sticky-header .tool-status.gratuito {
    background: #dcfce7;
    color: #166534;
}

.sticky-header .tool-status.pago {
    background: #fef2f2;
    color: #991b1b;
}

.sticky-header .tool-status.freemium {
    background: #fef3c7;
    color: #92400e;
}

.sticky-header-link {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sticky-header-link:hover {
    background: #e5e7eb;
    color: #374151;
}

.sticky-header-link i {
    width: 1rem;
    height: 1rem;
}

/* Ajuste para mobile */
@media (max-width: 768px) {
    .sticky-header-content {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    
    .sticky-header .tool-icon {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .sticky-header .tool-icon i {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .sticky-header .tool-name {
        font-size: 1rem;
    }
    
    .sticky-header .tool-status {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }
    
    .sticky-header-link {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .sticky-header-link i {
        width: 0.875rem;
        height: 0.875rem;
    }
}