/* css/perf-flat-headers.css
   Bump 121 (03/05/2026): remove glass effects do .tool-page-header e .glass-header-wrapper
   pra melhorar Core Web Vitals (LCP, INP) e reduzir custo de paint/composite no GPU.

   O que removemos:
     - backdrop-filter: blur(20-30px) saturate(180%) (caro, forca GPU layer + composite extra)
     - background-image: linear-gradient (caro de pintar quando combinado com filter)
     - ::before / ::after radial-gradient highlights (paint extra no scroll/hover)
     - hover transitions (causam re-paint no idle)
     - box-shadow generosa (reduzida pra leve)
     - border-radius 24-26px reduzido pra 12px (corner painting mais barato)

   O que mantemos:
     - Estrutura semantica (.tool-page-header continua sendo header da ferramenta)
     - Centralizacao do conteudo (text-align: center)
     - Padding interno, spacing
     - Border + bg solido pra dar visual de card
     - Acessibilidade do <h1> e <p>

   Override scoped por especificidade alta + !important pra ganhar das regras
   minified em style.css (que tem multiplas regras pra .tool-page-header em
   contextos light/dark/sem-glass).
*/

.glass-header-wrapper {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    /* Bump 122: margin lateral zerado (era 16px 15px 24px). 15px de margin
       horizontal + 16px padding do .cdp-hero deixava o hero 15px inset
       comparado ao .cdp-layout abaixo (que so tem padding 16). */
    margin: 8px 0 8px !important;
    overflow: visible !important;
}
.glass-header-wrapper::before,
.glass-header-wrapper::after {
    display: none !important;
    content: none !important;
}
.glass-header-wrapper:hover::before,
.glass-header-wrapper:hover::after {
    display: none !important;
    opacity: 0 !important;
}

.tool-page-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--content-bg, #fff) !important;
    background-image: none !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: none !important;
}
.tool-page-header::before,
.tool-page-header::after {
    display: none !important;
    content: none !important;
}
.tool-page-header:hover::before,
.tool-page-header:hover::after {
    display: none !important;
    opacity: 0 !important;
}

/* Dark mode: bg solido no tom escuro, sem gradient/filter */
body.dark-mode .tool-page-header {
    background: var(--content-bg, #1c1c1e) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .glass-header-wrapper {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Bump 138: respiro do hero card com breadcrumb embutido top-left.
   Causa raiz: padding-top:38px (inline em todas as 10 paginas cdp-*) deixava
     apenas ~15px entre breadcrumb-bottom (y=23 com font .78rem * lh 1.2) e
     h1-top (y=38). Visualmente "colado".
   Referencia: contador-de-dias.php:247 (padding-top:38px), style.css minified
     (.tool-page-header padding 30px 20px 20px / h1 max-width 900px).
   Validacao: smoke test estrutural em curl confirmou que .breadcrumb--inline-hero
     e irmao do <h1> dentro de .tool-page-header--with-inline-breadcrumb em
     todas as 10 paginas (4 comuns + 4 contadores juridicos + 2 prescricoes).
   Fix:
     - padding-top: 52px (38 -> 52, +14px = +29px total de respiro vs 15px atual)
     - padding-bottom: 28px (20 -> 28, polish vertical)
     - padding-left/right: 28px (20 -> 28, polish lateral, tira sensacao de h1 apertado)
   Selector .glass-header-wrapper .tool-page-header--with-inline-breadcrumb tem
   especificidade (0,2,0) que ganha do (0,1,0) inline das paginas, MAS sem !important
   o inline com !important venceria. Por isso uso !important. Nao toca em width, max-width,
   margin, border-radius, box-shadow, background — tudo isso permanece definido
   pelas regras existentes deste arquivo + inline das paginas. */
.glass-header-wrapper .tool-page-header--with-inline-breadcrumb {
    padding: 52px 28px 28px !important;
}

/* Polish do h1 e p dentro do hero — line-height respiravel sem mexer em font-size
   (clamp definido em style.css mantido). margin-bottom do h1 reforcado pra dar
   ar entre titulo e subtitulo. */
.glass-header-wrapper .tool-page-header--with-inline-breadcrumb h1 {
    margin: 0 auto 8px !important;
    line-height: 1.25 !important;
}
.glass-header-wrapper .tool-page-header--with-inline-breadcrumb p {
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

/* Bump 139: forca breadcrumb em 1 linha + zera padding herdado da regra global
   .breadcrumb (10px 15px). Sem isso, breadcrumb fica 35px de altura (em vez dos
   15px da line-box) e come o respiro do padding-top:52px do hero. */
.glass-header-wrapper .breadcrumb--inline-hero {
    white-space: nowrap !important;
    max-width: calc(100% - 32px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}
.glass-header-wrapper .breadcrumb--inline-hero ol {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Bump 140: wrapper de "Publicidade" pra ads in-content (especialmente result-area
   lazy ad do contador_dias_after_calc / calendar_top lazy). Razao: AdSense Multiplex
   Native estava servindo creatives mimickando UI do site (botoes "calculadoras",
   "Cursos Direito Online", etc), confundindo usuario. Wrapper visual distingue
   claramente o que e ad. Label "Publicidade" e termo aprovado por Google AdSense
   policy (https://support.google.com/adsense/answer/1346295 — termos permitidos:
   "Publicidade", "Ads", "Anuncio", "Patrocinado", "Advertisement"). NAO usar
   "Conteudo recomendado" (deceptive). */
/* Bump 144 (04/05/2026): redesign. Sem wrapper/caixa em volta do ad — so
   uma linha horizontal acima com a pill "PUBLICIDADE" laranja embedded.
   Ad renderiza livre abaixo (mesmo padrao das calculadoras juridicas, sem
   container forcado). Razao: wrappers (com bg/border/padding) confundiam
   com cards de UI do site. Linha + label e padrao classico de IAB e mais
   discreto: sinaliza "ad area" sem competir com layout. */
.cdp-ad-disclosure {
    margin: 32px 0 24px;
    padding: 14px 0 0;
    border: none;
    border-top: 1px solid #fed7aa;
    background: transparent;
    border-radius: 0;
    position: relative;
    box-sizing: border-box;
    min-height: 0;
    text-align: center;
}
.cdp-ad-disclosure::before {
    content: 'Publicidade';
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    background: #ea580c;
    padding: 3px 12px;
    border-radius: 999px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.4;
    white-space: nowrap;
}
.cdp-ad-disclosure > .ad-slot,
.cdp-ad-disclosure > ins.adsbygoogle,
.cdp-ad-disclosure > .googleads-lazy-slot {
    margin: 0 auto !important;
    display: block;
}
/* Bump 145: sidebar variant — wrap inner .cdp-ad-wrap nao deve adicionar
   padding-top extra (ja temos padding-top do disclosure + margin do sidebar gap). */
.cdp-ad-disclosure > .cdp-ad-wrap {
    padding-top: 0;
}
.cdp-ad-disclosure--sidebar {
    margin: 0 0 16px;
    padding: 16px 0 0;
}

/* Bump 147 (04/05/2026): shifted-tool layout — pra calendario, dias-uteis,
   semanas, primeiro/quinto/ultimo dia util. Diferente do cdp-* layout (que
   reduz width do tool pra abrir 320px da sidebar). Aqui o tool MANTEM seu
   max-width inerente (qst-spotlight, article-wrapper, article-content) e
   perde centralizacao (justify-content: start). Sidebar ocupa o espaco
   liberado a direita, alinhada ao primeiro elemento APOS o page hero (nao
   abaixo dele) — porque ambos sao filhos do mesmo grid row.

   Estrutura:
     <page-hero/>            full-width, fora do shift
     <div.cdp-tool-shift>    grid 2-col (>= 1500px)
       <main.cdp-tool-body>  conteudo do tool, mantem max-width
       <aside.cdp-tool-sidebar>  ad sticky 290x600

   Breakpoint 1500px: abaixo disso, sidebar stacka abaixo do tool. */
.cdp-tool-shift {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 1920px;
}
.cdp-tool-body {
    min-width: 0;
}
@media (min-width: 1500px) {
    .cdp-tool-shift {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
        align-items: start;
    }
    .cdp-tool-sidebar {
        position: sticky;
        top: 96px;
        align-self: start;
        min-height: 620px;
    }
}
@media (max-width: 1499px) {
    .cdp-tool-sidebar {
        margin: 24px auto 0;
        max-width: 320px;
    }
}
@media print {
    .cdp-tool-shift { display: block !important; }
    .cdp-tool-sidebar { display: none !important; }
}

/* Bump 147 (04/05/2026): mobile ad full-bleed dentro de .result-area-refactored.
   Causa: .cdp-layout (padding 16px lateral) + .result-area-refactored (padding 25px)
     somam 82px de inset em mobile (vp 360 -> ad com 278px, abaixo do minimo
     AdSense 300/320px). Creatives ficavam clipados.
   Fix: full-bleed via margin negativa (mesmo padrao usado pelo banner-ad-after-hero
     em ads/googleads/ads.css:117 que ja funciona perfeito em mobile/desktop).
     Selector composto .result-area-refactored .cdp-ad-disclosure isola — sidebar
     (.cdp-ad-disclosure--sidebar fora do result-area) nao casa.
   Limite: somente max-width 768px. Desktop continua com padding normal do card. */
@media (max-width: 768px) {
    .result-area-refactored .cdp-ad-disclosure {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 18px 0 14px;
        box-sizing: border-box;
        max-width: 100vw;
    }
}
body.dark-mode .cdp-ad-disclosure {
    border-top-color: #7c2d12;
    background: transparent;
}
body.dark-mode .cdp-ad-disclosure::before {
    background: #f97316;
    color: #fff;
}