/* ==========================================
   Blog — Botão "Baixar PDF" do post
   Figma: node 4493:1845 ("Button + Icon")
   ==========================================
   Variante do .nm-btn (src/nova-marca/css/buttons.css). Os seletores usam
   especificidade dupla (.nm-btn.nm-btn--pdf) de propósito: o buttons.css é
   carregado depois deste arquivo (footer.php o injeta no fim da página), então
   com um único .nm-btn--pdf o gap/padding da base venceriam a variante. */

.nm-btn.nm-btn--pdf {
    gap: var(--nm-space-2);                       /* Figma: 8px  (base .nm-btn usa 16px) */
    padding: var(--nm-space-3) var(--nm-space-4); /* Figma: 12px 16px (base usa 12px 24px) */
    border-color: var(--nm-color-text-muted);
    color: var(--nm-color-text-muted);
    background: transparent;
}

/* Hover não está especificado no Figma — segue o padrão das outras variantes
   .nm-btn--outline-* (preenche com a própria cor da borda). */
.nm-btn.nm-btn--pdf:hover {
    background: var(--nm-color-text-muted);
    color: var(--nm-color-white);
}

.nm-btn--pdf .nm-btn__icon {
    display: block;
}

/* ==========================================
   Posicionamento 1: topo, na linha do autor
   ========================================== */

.blog-novo .singlePost--novo .singlePost__autorInfo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nm-space-4);
}

/* O rótulo curto fica oculto por padrão em qualquer posição do botão; só o topo
   troca para "Baixar" no mobile (ver print mobile-topo). O bottom mantém
   "Baixar PDF" nas duas larguras. */
.nm-btn--pdf .nm-btn__label--curto {
    display: none;
}

@media (max-width: 767px) {
    .blog-novo .singlePost--novo .singlePost__autorInfo {
        flex-direction: column;
        align-items: flex-start;
    }

    .singlePost__pdfTopo .nm-btn__label--completo {
        display: none;
    }

    .singlePost__pdfTopo .nm-btn__label--curto {
        display: inline;
    }
}

/* ==========================================
   Posicionamento 2: fim do conteúdo
   ========================================== */

.singlePost__pdfBottom {
    margin-top: var(--nm-space-8);
    padding-top: var(--nm-space-6);
    border-top: 1px solid var(--nm-color-border);
}

.singlePost__pdfBottomLabel {
    margin: 0 0 var(--nm-space-4);
    color: var(--nm-color-text-muted);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-base);
    font-weight: var(--nm-font-weight-semibold);
    line-height: var(--nm-line-height-base);
}

/* ==========================================
   Modal "Baixe este artigo completo em PDF"
   Figma: 4492:859  (desk / formulário)
          4493:2192 (desk / confirmação)
          4492:879  (mobo / formulário)
          4493:2267 (mobo / confirmação)
   ==========================================
   As quatro telas seguem as mesmas medidas: painel radius 16, padding 48
   vertical (48 lateral no desk, 16 no mobo), botão de fechar 32px a 24/24,
   coluna de conteúdo com gap 24, campos com gap 16 e no máximo 329px. */

/* O reset de box-sizing do tema (variables.css) é escopado em [class*="nm-"] e
   as classes daqui são .pdfModal__*, por isso o reset próprio: sem ele o
   padding de 24px dos inputs somaria por fora do width:100%. */
.pdfModal,
.pdfModal *,
.pdfModal *::before,
.pdfModal *::after {
    box-sizing: border-box;
}

.pdfModal {
    position: fixed;
    inset: 0;
    display: none;
    overflow-y: auto;
    padding: var(--nm-space-5);
    background: rgba(0, 0, 0, 0.24);
    /* O header da nova marca chega a usar z-index 100000 (header-novo.css) — o
       overlay precisa passar disso, mesma lição já documentada no
       modal-colaborador.css. */
    z-index: 100010;
}

.pdfModal.aberto {
    display: flex;
    /* flex-start + margin:auto no painel centraliza sem cortar o topo quando o
       conteúdo passa da altura da viewport (align-items:center corta). */
    align-items: flex-start;
    justify-content: center;
}

.pdfModal__painel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-5);
    width: 570px;
    max-width: 100%;
    margin: auto;
    padding: var(--nm-space-8);
    border-radius: var(--nm-radius-md);
    background: var(--nm-color-white);
    font-family: var(--nm-font-family);
}

/* Os dois estados (formulário e confirmação) são irmãos dentro do painel; o
   !important vence o display:flex quando o atributo hidden é aplicado. */
.pdfModal [hidden] {
    display: none !important;
}

.pdfModal__estado {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-5);
}

.pdfModal__fechar {
    position: absolute;
    top: var(--nm-space-5);
    right: var(--nm-space-5);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pdfModal__fechar img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Bloco ícone + textos */
.pdfModal__conteudo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nm-space-5);
}

.pdfModal__icone {
    display: block;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.pdfModal__textos {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-2);
    width: 100%;
}

.pdfModal__titulo {
    margin: 0;
    color: var(--nm-color-deep-blue);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-lg);
    font-weight: var(--nm-font-weight-regular);
    line-height: var(--nm-line-height-lg);
}

.pdfModal__descricao {
    margin: 0;
    color: var(--nm-color-chumbo);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-base);
    font-weight: var(--nm-font-weight-regular);
    line-height: var(--nm-line-height-base);
}

/* Formulário */
.pdfModal__form {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-4);
    margin: 0;
}

.pdfModal__campos {
    display: flex;
    flex-direction: column;
    gap: var(--nm-space-4);
    width: 100%;
    /* No Figma os campos têm 329px fixos nos dois breakpoints; o max-width
       deixa encolher em telas menores que 361px + padding. */
    max-width: 329px;
}

/* O padding-top abre os 8px em que a label encaixa sobre a borda do campo. */
.pdfModal__campo {
    position: relative;
    padding-top: var(--nm-space-2);
}

/* Dupla classe para vencer `input[type="text"] { border-radius: 0 }` do
   css.css sem depender da ordem das folhas. */
.pdfModal .pdfModal__campo input {
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 var(--nm-space-5);
    border: 1px solid var(--nm-color-border);
    border-radius: var(--nm-radius-md);
    background: var(--nm-color-white);
    color: var(--nm-color-chumbo);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-base);
    font-weight: var(--nm-font-weight-regular);
    line-height: var(--nm-line-height-sm);
}

.pdfModal .pdfModal__campo input::placeholder {
    color: var(--nm-color-chumbo);
    opacity: 1;
}

/* Estado do campo de e-mail no Figma: borda Deep Blue. Vale para foco e para
   campo preenchido (todos os inputs têm placeholder, então
   :not(:placeholder-shown) equivale a "tem conteúdo"). */
.pdfModal .pdfModal__campo input:focus,
.pdfModal .pdfModal__campo input:not(:placeholder-shown) {
    outline: none;
    border-color: var(--nm-color-deep-blue);
}

.pdfModal__campo label {
    position: absolute;
    top: 0;
    left: var(--nm-space-4);
    padding: 0 var(--nm-space-1);
    background: var(--nm-color-white);
    color: var(--nm-color-deep-blue);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-base);
    font-weight: var(--nm-font-weight-regular);
    line-height: var(--nm-line-height-sm);
}

/* Disclaimer + checkbox */
.pdfModal__aceite {
    display: flex;
    align-items: center;
    gap: var(--nm-space-2);
    margin: 0;
    color: var(--nm-color-chumbo);
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-base);
    font-weight: var(--nm-font-weight-regular);
    line-height: var(--nm-line-height-base);
    cursor: pointer;
}

.pdfModal .pdfModal__aceite input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--nm-color-border);
    /* 4px não tem token de raio próprio (--nm-radius-sm já é 8px). */
    border-radius: 4px;
    background: var(--nm-color-white);
    cursor: pointer;
}

/* O Figma não traz o estado marcado: segue a cor de marca (azul + check
   branco), no mesmo espírito dos outros checkboxes do tema. */
.pdfModal .pdfModal__aceite input:checked {
    border-color: var(--nm-color-blue);
    background-color: var(--nm-color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.pdfModal .pdfModal__aceite input:focus-visible {
    outline: 2px solid var(--nm-color-deep-blue);
    outline-offset: 2px;
}

.pdfModal__aceite a {
    color: inherit;
    text-decoration: underline;
}

/* Botão azul preenchido (Figma: bg e borda #39BAE5, texto branco SemiBold).
   Variante nova do .nm-btn — dupla classe pelo mesmo motivo do .nm-btn--pdf:
   o buttons.css é injetado depois desta folha, pelo footer.php. */
.nm-btn.nm-btn--solid-blue {
    gap: var(--nm-space-2);
    border-color: var(--nm-color-blue);
    background: var(--nm-color-blue);
    color: var(--nm-color-white);
    font-weight: var(--nm-font-weight-semibold);
    line-height: var(--nm-line-height-sm);
}

.nm-btn.nm-btn--solid-blue:hover {
    background: var(--nm-color-deep-blue);
    border-color: var(--nm-color-deep-blue);
    color: var(--nm-color-white);
}

.nm-btn.nm-btn--solid-blue[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.pdfModal__submit,
.pdfModal__download {
    width: 100%;
    max-width: 329px;
    height: 48px;
}

.pdfModal__erro {
    display: none;
    margin: 0;
    color: #c53030;
    font-family: var(--nm-font-family);
    font-size: var(--nm-font-size-sm);
    line-height: var(--nm-line-height-base);
}

.pdfModal__erro.ativo {
    display: block;
}

/* Trava o scroll do fundo enquanto o modal está aberto. */
body.pdfModal-aberto {
    overflow: hidden;
}

@media (max-width: 767px) {
    .pdfModal {
        padding: 0;
    }

    .pdfModal__painel {
        width: 100%;
        padding: var(--nm-space-8) var(--nm-space-4);
    }
}