/* ============================================================================
   HOME — NOVA ESTRUTURA 2026
   Carregado SO na pagina inicial (functions/custom-functions.php,
   child_enqueue_home_styles, prioridade 1000 = depois de custom.css) e como
   editor-style (functions.php) para as secoes aparecerem no editor de blocos.

   Escopo: toda regra comeca em .home-* (classes adicionais dos blocos Group/
   Columns) ou em classe de shortcode/plugin aninhada nelas. As secoes SEO
   antigas da pagina nao tem essas classes e ficam intactas.

   Tokens: --ct-* (style.css) e --sk-font-* (tema pai). Nao ha tokens de
   espacamento/raio; valores do design: raios 16/12/10/8/6, secoes 104px.

   Cascata do pai (app.css):
   - .sk-wp-editor > *  -> margin-top clamp(32..48px) e margin-bottom 0 !important
     => espacamento inferior sempre via padding-bottom, nunca margin-bottom.
   - .sk-wp-editor h2:after -> barra 64x6; desligada dentro de .home-section.
   - Plugin wp-cas (toplist-default.css) e Rank Math (#rank-math-faq) carregam
     depois / usam ID => !important nesses blocos.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0. Hero em HTML fixo (.home-hero) — usado quando a pagina NAO tem o bloco
   hero do tema pai (ex.: pagina nova montada so com o bloco HTML personalizado).
   Full-bleed com a mesma tecnica do pai (100vw + margem negativa; o body ja
   tem overflow-x hidden). Cabecalho padrao da pagina (.main-page__hero, com
   titulo/autor/data) e escondido quando o hero fixo existe.
   --------------------------------------------------------------------------- */
.main-page:has(.home-hero) .main-page__hero {
    display: none !important;
}

.main-page:has(.home-hero) {
    padding-top: 0 !important;
}

.home-hero {
    box-sizing: border-box;
    width: 100vw;
    margin: 0 calc(50% - 50vw) !important;
    padding: 96px 24px 104px;
    background-color: var(--ct-bg-base);
    background-image: radial-gradient(var(--ct-dots) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
    color: var(--ct-text-on-dark);
    text-align: center;
}

.home-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    max-width: 1120px;
    margin: 0 auto;
}

.home-hero h1 {
    margin: 0 !important;
    max-width: 980px;
    font-family: var(--sk-font-primary);
    font-size: clamp(34px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ct-text-on-dark) !important;
}

.home-hero p {
    margin: 0 !important;
    max-width: 820px;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ct-text-on-dark-2, #C9D0E3) !important;
}

.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}

.home-hero__ctas a {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    font-family: var(--sk-font-secondary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease;
}

.home-hero__ctas .home-btn-primary {
    background: var(--ct-accent);
    border: 1px solid var(--ct-accent);
    color: var(--ct-accent-text) !important;
}

.home-hero__ctas .home-btn-primary:hover {
    background: #FFB938;
    border-color: #FFB938;
}

.home-hero__ctas .home-btn-ghost {
    background: transparent;
    border: 1px solid #5A6690;
    color: var(--ct-text-on-dark) !important;
}

.home-hero__ctas .home-btn-ghost:hover {
    border-color: var(--ct-text-on-dark-2, #C9D0E3);
}

.home-hero__note {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ct-text-secondary);
}


/* ---------------------------------------------------------------------------
   1. Base das secoes
   --------------------------------------------------------------------------- */
.sk-wp-editor > .wp-block-group.home-section,
.wp-block-group.home-section {
    margin-top: 104px;
}

.sk-wp-editor > .wp-block-columns.home-stats,
.wp-block-columns.home-stats {
    margin-top: 64px;
}

.home-section__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 32px;
}

.home-section h2 {
    margin: 0 !important;
    padding: 0;
    font-family: var(--sk-font-primary);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ct-content-text);
}

/* barra decorativa do pai nao entra nas secoes novas */
.sk-wp-editor .home-section h2::after,
.home-section h2::after {
    display: none !important;
    content: none !important;
}

.home-section__head p {
    margin: 0 !important;
    max-width: 900px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ct-content-text);
}

.home-section h3 {
    font-family: var(--sk-font-primary);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ct-content-text);
}

/* Botao primario (bloco Botoes) */
.home-section .wp-block-buttons.home-center {
    margin: 32px 0 0;
    justify-content: center;
}

.home-center .wp-block-button__link {
    background-color: var(--ct-accent) !important;
    color: var(--ct-accent-text) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    font-family: var(--sk-font-secondary);
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
}

.home-center .wp-block-button__link:hover {
    background-color: #FFB938 !important;
}


/* ---------------------------------------------------------------------------
   2. Numeros (tiles)
   --------------------------------------------------------------------------- */
.wp-block-columns.home-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.home-stats .wp-block-column.home-stat {
    flex-basis: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--ct-border-card-light);
    border-radius: 12px;
}

.home-stat p {
    margin: 0 !important;
}

.home-stat .home-stat__value {
    font-family: var(--sk-font-primary);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ct-content-text);
}

.home-stat .home-stat__label {
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: var(--sk-color-text-secondary);
}


/* ---------------------------------------------------------------------------
   3. Destaques — cards do plugin wp-cas via [toplistcards]
   O plugin grava variaveis inline e carrega toplist-default.css depois deste
   arquivo: tudo !important. Cores da superficie/selo/estrelas ja vem de
   custom.css (ITEM 4); aqui entra o LAYOUT: grid com areas nomeadas.
   --------------------------------------------------------------------------- */
.home-toplist .ct10toplistcards {
    margin: 0;
}

.home-toplist .cas-root.cas-toplist-default .cas-toplist-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: none !important;
    margin: 0 !important;
}

.home-toplist .cas-toplist-item {
    position: relative;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 24px 28px !important;
    border: 0 !important;
    border-radius: 12px !important;
}

.home-toplist .cas-toplist-content {
    display: grid !important;
    grid-template-columns: 36px 150px minmax(0, 1fr) 150px auto !important;
    grid-template-areas:
        "pos logo offer rating cta"
        "pos logo offer review cta" !important;
    gap: 8px 28px !important;
    align-items: center !important;
    width: 100%;
    flex: 1 1 100% !important;
}

/* selo de posicao: o plugin o posiciona absolute no canto do card */
.home-toplist .cas-position-number {
    grid-area: pos;
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* logo: NAO tocar em --cas-logo-bg-color (fundo de marca de cada casa) */
.home-toplist .cas-brand-logo {
    grid-area: logo;
    width: 150px !important;
    height: 72px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

.home-toplist .cas-brand-logo > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.home-toplist .cas-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* oferta -> linha "Destaque: ..." */
.home-toplist .cas-offer-details {
    grid-area: offer;
    width: auto !important;
    margin: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.home-toplist .cas-offer-title-with-highlights {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--ct-text-on-dark-2, #C9D0E3) !important;
}

.home-toplist .cas-offer-title-with-highlights::before {
    content: "Destaque: ";
}

/* metodos de pagamento: nao existem no design */
.home-toplist .cas-offer-details-column,
.home-toplist .cas-payment-methods {
    display: none !important;
}

/* nota + estrelas */
.home-toplist .cas-rating-column {
    grid-area: rating;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 150px !important;
    margin: 0 !important;
}

.home-toplist .cas-rating-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--ct-text-on-dark) !important;
}

.home-toplist .cas-rating {
    width: auto !important;
}

.home-toplist .cas-stars svg {
    width: 16px;
    height: 16px;
}

/* "Ler analise" */
.home-toplist .cas-review-link {
    grid-area: review;
    width: 150px !important;
    margin: 0 !important;
    justify-self: center;
    font-size: 15px !important;
}

.home-toplist .cas-rating-column .cas-review-link {
    width: auto !important;
}

.home-toplist .cas-review-link a {
    color: var(--ct-text-on-dark) !important;
}

/* CTA "Visitar site" */
.home-toplist .cas-cta-container {
    grid-area: cta;
    flex: none !important;
    width: auto !important;
    align-items: center !important;
}

.home-toplist .cas-cta-button-animated {
    background-color: var(--ct-accent) !important;
    background-image: none !important;
    color: var(--ct-accent-text) !important;
    font-family: var(--sk-font-secondary);
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    animation: none !important;
    white-space: nowrap;
}

.home-toplist .cas-cta-button-animated::before,
.home-toplist .cas-cta-button-animated::after {
    display: none !important;
}

.home-toplist .cas-cta-button-animated:hover {
    background-color: #FFB938 !important;
    color: var(--ct-accent-text) !important;
}

/* linha legal */
.home-toplist .cas-terms {
    width: 100% !important;
    padding: 0 !important;
}

.home-toplist .cas-terms,
.home-toplist .cas-terms-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--ct-text-secondary) !important;
}

.home-toplist .cas-terms a {
    color: #DDE3F2 !important;
}

/* link "Ver ranking completo..." */
.home-section p.home-ranking-link {
    margin: 28px 0 0 !important;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.home-ranking-link a {
    color: var(--ct-accent-on-light);
}


/* ---------------------------------------------------------------------------
   4. Por que confiar — 4 criterios numerados (numero via counter CSS)
   --------------------------------------------------------------------------- */
.wp-block-group.home-criteria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    counter-reset: crit;
}

.wp-block-group.home-criterion {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    margin: 0 !important;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--ct-border-card-light);
    border-radius: 12px;
}

.home-criterion::before {
    counter-increment: crit;
    content: counter(crit);
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ct-accent);
    color: var(--ct-accent-text);
    font-family: var(--sk-font-primary);
    font-size: 18px;
    font-weight: 800;
    line-height: 44px;
    text-align: center;
}

.home-criterion h3 {
    grid-column: 2;
    margin: 0 0 8px !important;
}

.home-criterion p {
    grid-column: 2;
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sk-color-text-secondary);
}


/* ---------------------------------------------------------------------------
   5. Jogos mais procurados — [slotslist hide_view_more]
   Saida: .ct10slotslist-grid > a.ct10slotslist-item[style=bg gradiente+imagem]
          > .ct10slotslist-item-content > h3.ct10slotslist-title + .ct10slotslist-rating
   Base em custom.css:1-45 (auto-fit, altura fixa 325px).
   --------------------------------------------------------------------------- */
.home-games .ct10slotslist-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 0;
}

.home-games .ct10slotslist-item {
    height: auto;
    padding-top: 220px;               /* area da imagem */
    border-radius: 12px;
    background-position: center top !important;
}

/* corpo opaco: a imagem inline fica visivel so nos 220px de cima */
.home-games .ct10slotslist-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--ct-surface-card);
}

.home-games .ct10slotslist-title {
    font-family: var(--sk-font-primary);
    font-size: 18px !important;
    line-height: 1.3;
    margin: 0 !important;
}

.home-games .ct10slotslist-rating svg path {
    fill: var(--ct-accent) !important;
}

.home-games .ct10slotslist-rating svg path[fill="#555"] {
    fill: var(--ct-neutral-rank) !important;
}


/* ---------------------------------------------------------------------------
   6. Explore o CasinoTop10 — 4 hubs
   --------------------------------------------------------------------------- */
.wp-block-columns.home-hubs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.home-hubs .wp-block-column.home-hub {
    flex-basis: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--ct-border-card-light);
    border-radius: 12px;
}

.home-hub h3 {
    margin: 0 !important;
}

.home-hub p {
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sk-color-text-secondary);
}

.home-hub p:not(.home-hub__link) {
    flex-grow: 1;
}

.home-hub p.home-hub__link {
    margin-top: auto !important;
    font-weight: 700;
}

.home-hub p.home-hub__link a {
    color: var(--ct-accent-on-light);
}


/* ---------------------------------------------------------------------------
   7. Jogo responsavel — card escuro (Group com cor de fundo "blue")
   --------------------------------------------------------------------------- */
.wp-block-group.home-rg {
    padding: 48px 56px !important;
    background-color: var(--ct-bg-header-footer) !important;
    color: var(--ct-text-on-dark);
    border-radius: 16px;
}

.home-rg .wp-block-columns.home-rg__cols {
    display: grid !important;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 56px;
    margin: 0 !important;
}

.home-rg .wp-block-column {
    flex-basis: auto !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-rg h2 {
    font-size: 36px;
    color: var(--ct-text-on-dark) !important;
}

.home-rg__intro p {
    margin: 0 !important;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ct-text-on-dark-2, #C9D0E3) !important;
}

.home-rg p.home-rg__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--ct-accent);
    color: var(--ct-accent-text) !important;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

/* lista com check ambar (style.css forca margin/peso nos li: !important) */
.sk-wp-editor .home-rg ul.home-rg__list,
.home-rg ul.home-rg__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sk-wp-editor .home-rg ul.home-rg__list li,
.home-rg ul.home-rg__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ct-text-on-dark) !important;
    list-style: none !important;
}

.home-rg ul.home-rg__list li::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-rg p.home-rg__help {
    margin: 10px 0 0 !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ct-text-on-dark-2, #C9D0E3) !important;
}

/* vence .sk-wp-editor p a:not([class]) e .has-blue-background-color * */
.main-page__blocks .home-rg p a,
.home-rg p a {
    color: var(--ct-accent) !important;
    font-weight: 700;
}


/* ---------------------------------------------------------------------------
   8. Transicao para as secoes SEO mantidas (opcional: className no 1o H2)
   --------------------------------------------------------------------------- */
.sk-wp-editor > .home-seo-start,
.home-seo-start {
    margin-top: 104px !important;
}


/* ---------------------------------------------------------------------------
   9. FAQ — bloco do Rank Math (o pai estiliza por #rank-math-faq: usar o ID)
   Saida: #rank-math-faq.rank-math-block > .rank-math-list > .rank-math-list-item
          > h3.rank-math-question + .rank-math-answer > p
   O icone +/- vem da classe rank-math-faq-icon--plus-minus (pai): so recolorir.
   --------------------------------------------------------------------------- */
.home-faq {
    padding-bottom: 104px;
}

.home-faq #rank-math-faq {
    margin: 0 !important;
}

.home-faq #rank-math-faq .rank-math-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-faq #rank-math-faq .rank-math-list-item {
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ct-border-card-light) !important;
    border-radius: 10px !important;
}

.home-faq #rank-math-faq .rank-math-question {
    position: relative;
    min-height: 64px;
    margin: 0 !important;
    padding: 18px 56px 18px 24px !important;
    font-family: var(--sk-font-primary);
    font-size: 19px !important;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ct-content-text) !important;
    cursor: pointer;
}

.home-faq #rank-math-faq .rank-math-question::after,
.home-faq #rank-math-faq .rank-math-question::before {
    color: var(--ct-accent-on-light) !important;
}

/* O pai recolhe a resposta animando height:0 + overflow:hidden na propria
   .rank-math-answer: o padding fica no <p> interno, senao a caixa recolhida
   mantem a altura do padding e mostra uma linha do texto. */
.home-faq #rank-math-faq .rank-math-answer {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ct-content-text);
}

.home-faq #rank-math-faq .rank-math-answer p {
    margin: 0 !important;
    padding: 0 24px 22px;
}

.home-faq #rank-math-faq .rank-math-answer a {
    color: var(--ct-accent-on-light);
}


/* ---------------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .wp-block-columns.home-stats,
    .wp-block-columns.home-hubs,
    .home-games .ct10slotslist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-rg .wp-block-columns.home-rg__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .home-toplist .cas-toplist-content {
        gap: 8px 20px !important;
    }
}


/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
    /* hero fixo */
    .home-hero {
        padding: 48px 20px 56px;
        text-align: left;
    }

    .home-hero__inner {
        align-items: stretch;
        gap: 20px;
    }

    .home-hero p {
        font-size: 17px;
    }

    .home-hero__ctas {
        flex-direction: column;
        gap: 12px;
    }

    .home-hero__ctas a {
        width: 100%;
    }

    .sk-wp-editor > .wp-block-group.home-section,
    .wp-block-group.home-section {
        margin-top: 64px;
    }

    .sk-wp-editor > .wp-block-columns.home-stats,
    .wp-block-columns.home-stats {
        margin-top: 32px;
        gap: 12px;
    }

    .home-section__head {
        gap: 16px;
        margin-bottom: 20px;
    }

    .home-section__head p {
        font-size: 16px;
    }

    .home-center .wp-block-button,
    .home-center .wp-block-button__link {
        width: 100%;
    }

    /* numeros */
    .home-stats .wp-block-column.home-stat {
        padding: 18px 12px;
    }

    .home-stat .home-stat__value {
        font-size: 30px;
    }

    .home-stat .home-stat__label {
        font-size: 14px;
    }

    /* toplist */
    .home-toplist .cas-toplist-item {
        padding: 18px !important;
        gap: 14px !important;
    }

    .home-toplist .cas-toplist-content {
        grid-template-columns: 36px 104px minmax(0, 1fr) !important;
        grid-template-areas:
            "pos logo offer"
            "rating rating review"
            "cta cta cta" !important;
        gap: 14px !important;
    }

    .home-toplist .cas-brand-logo {
        width: 104px !important;
        height: 52px !important;
    }

    .home-toplist .cas-rating-column {
        flex-direction: row !important;
        width: auto !important;
        gap: 16px !important;
        justify-self: start;
    }

    .home-toplist .cas-review-link {
        width: auto !important;
        justify-self: end;
    }

    .home-toplist .cas-cta-container,
    .home-toplist .cas-cta-button-animated {
        width: 100% !important;
    }

    .home-toplist .cas-terms,
    .home-toplist .cas-terms-text {
        font-size: 12px !important;
    }

    .home-section p.home-ranking-link {
        font-size: 17px;
    }

    /* criterios e hubs */
    .wp-block-group.home-criteria,
    .wp-block-columns.home-hubs {
        grid-template-columns: minmax(0, 1fr);
    }

    .wp-block-group.home-criterion {
        padding: 20px;
        column-gap: 14px;
    }

    /* jogos */
    .home-games .ct10slotslist-grid {
        gap: 12px;
    }

    .home-games .ct10slotslist-item {
        padding-top: 140px;
    }

    .home-games .ct10slotslist-item-content {
        padding: 12px;
    }

    .home-games .ct10slotslist-title {
        font-size: 15px !important;
    }

    /* jogo responsavel */
    .wp-block-group.home-rg {
        padding: 28px 22px !important;
    }

    .home-rg h2 {
        font-size: 28px;
    }

    .sk-wp-editor .home-rg ul.home-rg__list li,
    .home-rg ul.home-rg__list li {
        font-size: 15px;
    }

    .home-seo-start {
        margin-top: 64px !important;
    }

    /* faq */
    .home-faq {
        padding-bottom: 64px;
    }

    .home-faq #rank-math-faq .rank-math-question {
        padding: 16px 48px 16px 18px !important;
        font-size: 17px !important;
    }

    .home-faq #rank-math-faq .rank-math-answer {
        font-size: 15px;
    }

    .home-faq #rank-math-faq .rank-math-answer p {
        padding: 0 18px 18px;
    }
}


/* ---------------------------------------------------------------------------
   10. Conteudo SEO mantido em HTML fixo (dentro do bloco "HTML personalizado")
   Quando os textos antigos deixam de ser blocos, o WordPress deixa de gerar
   dois CSS que eles usavam:
   - pretty-list.css do tema pai (bloco ACF "pretty-list", so enfileirado quando
     o bloco existe no post) -> regras copiadas abaixo, sem o :root do pai;
   - .wp-container-core-columns-is-layout-8f761849 (layout gerado por bloco).
   --------------------------------------------------------------------------- */
.wp-container-core-columns-is-layout-8f761849 {
    flex-wrap: nowrap;
}

.pretty-list { counter-reset: step; list-style: none; margin: 0; padding: 0 !important; }
.pretty-list ol, .pretty-list ul { list-style: none; padding: 0; }
.pretty-list li { color: var(--pretty-list-text-color, var(--sk-color-text, #000)); display: flex; gap: 12px; line-height: 32px; margin-bottom: 0 !important; padding-bottom: 24px; position: relative; }
.pretty-list li p { align-self: center; line-height: 1.5; }
.pretty-list li:last-of-type { margin-bottom: 0; padding-bottom: 0; }
.pretty-list li:last-of-type:after { display: none; }
.pretty-list li:before { display: flex; flex-shrink: 0; font-size: var(--sk-text-xs); font-weight: 600; justify-content: center; line-height: 26px; text-align: center; width: 32px; z-index: 1; }
.pretty-list.with-bg li:before { align-items: center; background: var(--pretty-list-counter-bg-color, #f3f6f8); border-radius: 50%; color: var(--pretty-list-counter-text-color, #000); height: 32px; }
.pretty-list.with-bg.arrows span, .pretty-list.with-bg.checks span, .pretty-list.with-chain li:after { background: var(--pretty-list-counter-bg-color, #e1eaf1); }
.pretty-list.with-chain li:after { content: ""; height: calc(100% - 40px); left: 16px; position: absolute; top: 36px; width: 1px; }
.pretty-list.numbers li:before { content: counter(step); counter-increment: step; }
.pretty-list.characters li:before { content: counter(step, upper-alpha); counter-increment: step; }
.pretty-list.arrows li:before, .pretty-list.checks li:before { content: none; width: 0; }
.pretty-list.arrows li span, .pretty-list.checks li span { align-items: center; border-radius: 100%; display: flex; flex-shrink: 0; height: 32px; justify-content: center; width: 32px; }
.pretty-list.arrows li span svg path, .pretty-list.checks li span svg path { fill: var(--pretty-list-counter-text-color, #000); }
.pretty-list.checks li span svg path { fill: none; stroke: var(--pretty-list-counter-text-color, #000); }


/* ---------------------------------------------------------------------------
   11. Jogos: o CTA da secao e o proprio botao "view more" do shortcode
   [slotslist] (texto/URL pelo atributo view_more_text/view_more_url ou pelas
   opcoes do tema). Aqui ele ganha o visual do botao primario do modelo.
   Base: custom.css "shortcode view all btn" (ambar, radius 4, padding 10/20).
   --------------------------------------------------------------------------- */
.home-games .shortcode-view-more-wrapper {
    margin-top: 32px !important;
    text-align: center;
}

.home-games .shortcode-view-more-button {
    display: inline-block;
    padding: 15px 30px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-color: var(--ct-accent) !important;
    color: var(--ct-accent-text) !important;
    font-family: var(--sk-font-secondary);
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.home-games .shortcode-view-more-button:hover {
    background-color: #FFB938 !important;
    color: var(--ct-accent-text) !important;
}

@media (max-width: 720px) {
    .home-games .shortcode-view-more-button {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}


/* ---------------------------------------------------------------------------
   3b. Brand table da home — [brandtable] + [brand] (functions/brandtable.php)
   Markup:
   .home-brands > article.home-brand[.home-brand--first]
     > .home-brand__row > .home-brand__rank + .home-brand__logo(img|b)
                         + .home-brand__info(h3 + span>em) + .home-brand__score(strong + a)
                         + a.home-brand__cta
     > span.home-brand__legal(a)
   Segue o .brand do modelo nova-home-casinotop10.html com os tokens --ct-*.
   --------------------------------------------------------------------------- */
.home-brands {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 24px 28px;
    background: var(--ct-surface-card);
    border-radius: 12px;
    color: var(--ct-text-on-dark);
}

.home-brand__row {
    display: flex;
    align-items: center;
    gap: 28px;
}

.home-brand__rank {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--ct-neutral-rank);
    color: var(--ct-text-on-dark);
    font-family: var(--sk-font-secondary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.home-brand--first .home-brand__rank {
    background: var(--ct-accent);
    color: var(--ct-accent-text);
}

.home-brand__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 72px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--ct-bg-base);
    border: 1px solid var(--ct-neutral-rank);
    overflow: hidden;
}

.home-brand__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.home-brand__logo b {
    color: var(--ct-text-on-dark);
    font-family: var(--sk-font-primary);
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

.home-brand__info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-brand__info h3 {
    margin: 0 !important;
    font-family: var(--sk-font-primary);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ct-text-on-dark) !important;
}

.home-brand__info span {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ct-text-on-dark-2, #C9D0E3);
}

.home-brand__info em {
    font-style: normal;
    font-weight: 700;
    color: var(--ct-accent);
}

.home-brand__score {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 150px;
}

.home-brand__score strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ct-text-on-dark);
}

.home-brand__score strong i {
    font-style: normal;
    color: var(--ct-accent);
}

.home-brand__score a,
.main-page__blocks .home-brand__score a {
    font-size: 15px;
    color: var(--ct-text-on-dark) !important;
    text-decoration: underline;
}

.home-brand__cta,
.main-page__blocks a.home-brand__cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 8px;
    background: var(--ct-accent);
    color: var(--ct-accent-text) !important;
    font-family: var(--sk-font-secondary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.home-brand__cta:hover {
    background: #FFB938;
}

.home-brand__legal {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ct-text-secondary);
}

.home-brand__legal a,
.main-page__blocks .home-brand__legal a {
    color: #DDE3F2 !important;
    text-decoration: underline;
}

@media (max-width: 720px) {
    .home-brand {
        padding: 18px;
        gap: 14px;
    }

    .home-brand__row {
        flex-wrap: wrap;
        gap: 14px;
    }

    .home-brand__logo {
        width: 104px;
        height: 52px;
        padding: 6px;
    }

    .home-brand__info {
        flex-basis: calc(100% - 170px);
    }

    .home-brand__info h3 {
        font-size: 18px;
    }

    .home-brand__score {
        flex-direction: row;
        gap: 16px;
        width: auto;
    }

    .home-brand__cta,
    .main-page__blocks a.home-brand__cta {
        width: 100%;
    }

    .home-brand__legal {
        font-size: 12px;
    }
}


/* ---------------------------------------------------------------------------
   3c. Brand table — complementos do PDF "[CasinoTop10] Brand Table":
   quantidade de avaliacoes sob a nota e rodape legal por marca (texto longo).
   --------------------------------------------------------------------------- */
.home-brand__score small {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ct-text-on-dark-2, #C9D0E3);
    white-space: nowrap;
}

.home-brand__score strong + small {
    margin-top: -2px;
}

.home-brand__legal {
    display: block;
}

@media (max-width: 720px) {
    .home-brand__score {
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 16px;
    }
}