/*!
Theme Name:        Protética Dente — Kadence Child
Theme URI:         https://www.proteticadente.com.br
Description:       Child theme do Kadence para o Instituto Protética Dente. Stack do MVP conforme ADR-043.
Author:            Baruk Connect (Wellington Barros)
Author URI:        https://www.proteticadente.com.br
Template:          kadence
Version:           0.1.0
Requires at least: 6.0
Requires PHP:      8.2
License:           Proprietary
Text Domain:       protetica
*/

/* ============================================================================
   DESIGN TOKENS — paleta institucional Protética Dente (ADR-037)
   ========================================================================= */
:root {
    --pd-blue-dark:  #003366;
    --pd-blue:       #0077CC;
    --pd-blue-light: #2A78D5;
    --pd-black:      #0A0A0A;
    --pd-white:      #FFFFFF;
    --pd-bg:         #F4F6F9;
    --pd-text:       #333333;
    --pd-ash:        #9CA3AF;

    --pd-font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --pd-font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

    --pd-radius-sm: 6px;
    --pd-radius-md: 12px;

    --pd-shadow-sm: 0 1px 2px rgba(0, 51, 102, 0.06);
    --pd-shadow-md: 0 4px 12px rgba(0, 51, 102, 0.10);
}

/* ============================================================================
   FONTES SELF-HOSTED (ADR-028)
   Arquivos em assets/fonts/. Baixar de Google Fonts → converter para woff2.
   ========================================================================= */
@font-face {
    font-family: 'Anton';
    src: url('assets/fonts/Anton-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================================================
   ESTILOS GLOBAIS MÍNIMOS
   ========================================================================= */
body {
    font-family: var(--pd-font-body);
    color: var(--pd-text);
    background: var(--pd-white);
}

h1, h2, .pd-display {
    font-family: var(--pd-font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ============================================================================
   DESIGN SYSTEM — LANDING PAGES (mobile first)
   Classes pd-* aplicadas pelo LP Engine (scripts/lib/lp-renderers.php).
   Tokens extras + escala tipográfica + chrome do template single-landing_page.
   ========================================================================= */
:root {
    --pd-whatsapp:   #25D366;
    --pd-whatsapp-d: #1da851;
    --pd-blue-deep:  #00264d;
    --pd-line:       #e2e8f0;
    --pd-radius-lg:  20px;
    --pd-shadow-lg:  0 16px 48px rgba(0, 38, 77, 0.16);
    --pd-maxw:       1120px;
    --pd-maxw-text:  720px;
}

/* ---- Reset leve do contexto da LP ---- */
body.pd-lp {
    margin: 0;
    background: var(--pd-white);
    -webkit-font-smoothing: antialiased;
}
/* Conteúdo: imagens fluidas. NÃO afeta o chrome (logos) nem o bg do core/cover. */
body.pd-lp .pd-lp-main img:not(.wp-block-cover__image-background) {
    max-width: 100%;
    height: auto;
    display: block;
}
body.pd-lp .pd-lp-main { overflow-x: hidden; }

/* ---- HEADER minimalista da LP (template single-landing_page.php) ---- */
body.pd-lp .pd-lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    background: var(--pd-white);
    border-bottom: 1px solid var(--pd-line);
    box-shadow: var(--pd-shadow-sm);
}
body.pd-lp .pd-lp-logo { display: inline-flex; }
body.pd-lp .pd-lp-logo img {
    height: 40px;
    width: auto;
    max-width: 220px;
    display: block;
}
.pd-lp-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pd-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--pd-white);
    background: var(--pd-whatsapp);
    padding: 10px 18px;
    border-radius: var(--pd-radius-sm);
    transition: background .2s ease;
}
.pd-lp-header-cta:hover { background: var(--pd-whatsapp-d); }

/* ---- FOOTER da LP ---- */
body.pd-lp .pd-lp-footer {
    background: var(--pd-blue-deep);
    color: rgba(255,255,255,0.82);
    padding: 48px 20px 32px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.7;
}
body.pd-lp .pd-lp-footer img {
    height: 50px;
    width: auto;
    max-width: 240px;
    margin: 0 auto 20px;
    display: block;
}
.pd-lp-footer a { color: var(--pd-white); text-decoration: none; font-weight: 600; }
.pd-lp-footer .pd-lp-footer-sep { color: rgba(255,255,255,0.3); margin: 0 8px; }
.pd-lp-footer small { display: block; margin-top: 18px; color: rgba(255,255,255,0.5); font-size: 0.78rem; }

/* ============================================================================
   SEÇÕES — base e ritmo vertical
   ========================================================================= */
.pd-section {
    padding: 56px 20px;
}
.pd-section > *,
.pd-section .wp-block-cover__inner-container > * {
    max-width: var(--pd-maxw);
    margin-left: auto;
    margin-right: auto;
}
.pd-section h2 {
    font-family: var(--pd-font-display);
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    line-height: 1.12;
    color: var(--pd-blue-dark);
    margin: 0 0 8px;
    text-align: center;
}
.pd-section h3 {
    font-family: var(--pd-font-body);
    font-weight: 700;
    color: var(--pd-blue-dark);
}
.pd-section p { line-height: 1.7; }
.pd-section .pd-section-intro {
    max-width: var(--pd-maxw-text);
    text-align: center;
    color: #414b54;
    font-size: 1.08rem;
    margin: 0 auto 28px;
}
/* Alternância de fundo entre seções */
.pd-section--para-quem,
.pd-section--instrutor,
.pd-section--faq { background: var(--pd-bg); }
.pd-section--processo { background: var(--pd-blue-deep); }
.pd-section--processo h2,
.pd-section--processo .pd-section-intro { color: var(--pd-white); }
.pd-section--processo .pd-section-intro { color: rgba(255,255,255,0.8); }

/* Listas (para-quem, aprendizado, estrutura) */
.pd-section .wp-block-list {
    max-width: var(--pd-maxw-text);
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.pd-section .wp-block-list li {
    position: relative;
    padding: 14px 16px 14px 46px;
    background: var(--pd-white);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius-sm);
    box-shadow: var(--pd-shadow-sm);
}
.pd-section .wp-block-list li::before {
    content: "";
    position: absolute;
    left: 16px; top: 50%;
    width: 16px; height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--pd-blue);
    box-shadow: inset 0 0 0 3px var(--pd-white), 0 0 0 1px var(--pd-blue);
}

/* Imagens de apoio */
.pd-image {
    border-radius: var(--pd-radius-md);
    overflow: hidden;
    box-shadow: var(--pd-shadow-md);
    margin: 0 auto 28px;
    max-width: 760px;
}
.pd-image img { width: 100%; }

/* ============================================================================
   HERO (core/cover)
   ========================================================================= */
.pd-section--hero {
    text-align: center;
    padding: 0;
}
.pd-section--hero .wp-block-cover__inner-container {
    padding: 96px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pd-section--hero .pd-pre-headline {
    color: #bcd6f0;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.pd-section--hero .pd-hero-headline {
    font-family: var(--pd-font-display);
    color: var(--pd-white);
    font-size: clamp(2.4rem, 8vw, 4.6rem);
    line-height: 1.04;
    margin: 0 0 14px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.pd-section--hero .pd-hero-subheadline {
    color: #ffffff;
    font-size: clamp(1rem, 2.4vw, 1.22rem);
    max-width: 640px;
    margin: 0 auto 26px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.pd-section--hero .pd-pre-headline {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================================
   BOTÕES — fortes
   ========================================================================= */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 8px;
}
.wp-block-button__link {
    font-family: var(--pd-font-body);
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 30px;
    border-radius: var(--pd-radius-sm);
    text-decoration: none;
    display: inline-block;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    line-height: 1.2;
}
/* fill = azul institucional sólido */
.wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--pd-blue);
    color: var(--pd-white);
    box-shadow: 0 8px 20px rgba(0, 119, 204, 0.35);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: var(--pd-blue-light);
    transform: translateY(-2px);
}
/* outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--pd-white);
    border: 2px solid rgba(255,255,255,0.7);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--pd-white);
}
/* fora do hero, o outline fica azul */
.pd-section:not(.pd-section--hero):not(.pd-section--processo):not(.pd-section--cta-final)
    .wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--pd-blue-dark);
    border-color: var(--pd-blue);
}
/* WhatsApp */
.wp-block-button.pd-btn-whatsapp .wp-block-button__link {
    background: var(--pd-whatsapp) !important;
    color: var(--pd-white) !important;
    border-color: var(--pd-whatsapp) !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}
.wp-block-button.pd-btn-whatsapp .wp-block-button__link:hover {
    background: var(--pd-whatsapp-d) !important;
    transform: translateY(-2px);
}

/* ============================================================================
   PROCESSO — cards numerados
   ========================================================================= */
.pd-section--processo .pd-step {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--pd-radius-md);
    padding: 24px 22px;
    margin: 0 auto 14px;
    max-width: var(--pd-maxw-text);
}
.pd-section--processo .pd-step-number {
    font-family: var(--pd-font-display);
    font-size: 2.2rem;
    color: var(--pd-blue-light);
    margin: 0 0 4px;
    line-height: 1;
}
.pd-section--processo .pd-step-title { color: var(--pd-white); margin: 0 0 6px; font-size: 1.15rem; }
.pd-section--processo .pd-step p { color: rgba(255,255,255,0.78); margin: 0; }

/* ============================================================================
   DIFERENCIAIS — cards
   ========================================================================= */
.pd-section--diferenciais .pd-card {
    background: var(--pd-white);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius-md);
    padding: 26px 22px;
    box-shadow: var(--pd-shadow-sm);
    border-top: 4px solid var(--pd-blue);
    margin-bottom: 14px;
}
.pd-section--diferenciais .pd-card-title { margin: 0 0 8px; font-size: 1.12rem; }
.pd-section--diferenciais .pd-card p { margin: 0; color: #55606b; }

/* ============================================================================
   INSTRUTOR
   ========================================================================= */
.pd-section--instrutor { text-align: center; }
.pd-section--instrutor .pd-instructor-name {
    color: var(--pd-blue);
    font-size: 1.3rem;
    margin: 18px 0 6px;
}
.pd-section--instrutor p { max-width: var(--pd-maxw-text); margin-left: auto; margin-right: auto; }

/* ============================================================================
   ESTRUTURA — ficha técnica
   ========================================================================= */
.pd-section--estrutura .wp-block-list li {
    padding-left: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pd-section--estrutura .wp-block-list li::before { display: none; }
.pd-section--estrutura .wp-block-list li strong { color: var(--pd-blue-dark); }

/* ============================================================================
   FAQ — accordion (core/details)
   ========================================================================= */
.pd-section--faq .wp-block-details {
    max-width: var(--pd-maxw-text);
    margin: 0 auto 12px;
    background: var(--pd-white);
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius-sm);
    box-shadow: var(--pd-shadow-sm);
    padding: 4px 20px;
}
.pd-section--faq .wp-block-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--pd-blue-dark);
    padding: 16px 0;
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.pd-section--faq .wp-block-details summary::-webkit-details-marker { display: none; }
.pd-section--faq .wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--pd-blue);
    font-family: var(--pd-font-body);
}
.pd-section--faq .wp-block-details[open] summary::after { content: "–"; }
.pd-section--faq .wp-block-details p { margin: 0 0 16px; color: #55606b; }

/* ============================================================================
   CTA FINAL
   ========================================================================= */
.pd-section--cta-final {
    background: linear-gradient(135deg, var(--pd-blue-dark), var(--pd-blue));
    text-align: center;
}
.pd-section--cta-final h2 { color: var(--pd-white); }
.pd-section--cta-final .pd-section-intro { color: rgba(255,255,255,0.88); }
.pd-section--cta-final .pd-form-placeholder {
    margin-top: 22px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    font-style: italic;
}

/* Formulário de captação (Fluent Forms) embutido no CTA final */
.pd-section--cta-final .pd-lead-form {
    max-width: 480px;
    margin: 30px auto 0;
    background: var(--pd-white);
    border-radius: var(--pd-radius-md);
    padding: 30px 26px;
    box-shadow: var(--pd-shadow-lg);
    text-align: left;
}
.pd-section--cta-final .pd-lead-form label {
    color: var(--pd-blue-dark);
    font-weight: 600;
    font-size: 0.92rem;
}
.pd-section--cta-final .pd-lead-form input[type="text"],
.pd-section--cta-final .pd-lead-form input[type="email"],
.pd-section--cta-final .pd-lead-form input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius-sm);
    font-size: 1rem;
    font-family: var(--pd-font-body);
    box-sizing: border-box;
}
.pd-section--cta-final .pd-lead-form input:focus {
    outline: none;
    border-color: var(--pd-blue);
    box-shadow: 0 0 0 3px rgba(0,119,204,0.12);
}
.pd-section--cta-final .pd-lead-form .ff-btn-submit,
.pd-section--cta-final .pd-lead-form button[type="submit"] {
    width: 100%;
    background: var(--pd-blue);
    color: #fff;
    font-weight: 700;
    padding: 15px;
    border: none;
    border-radius: var(--pd-radius-sm);
    font-size: 1.02rem;
    cursor: pointer;
    transition: background .2s ease;
}
.pd-section--cta-final .pd-lead-form .ff-btn-submit:hover,
.pd-section--cta-final .pd-lead-form button[type="submit"]:hover {
    background: var(--pd-blue-light);
}
.pd-section--cta-final .pd-lead-form .ff-message-success {
    color: var(--pd-blue-dark);
    font-weight: 600;
}
.pd-section--cta-final .pd-lead-form .ff-el-group { margin-bottom: 16px; }

/* ============================================================================
   GRID — processo (steps) e diferenciais (cards)
   ========================================================================= */
.pd-grid {
    display: grid;
    gap: 16px;
    max-width: var(--pd-maxw);
    margin: 0 auto;
}
.pd-grid .pd-step,
.pd-grid .pd-card { margin-bottom: 0; }

/* ============================================================================
   BREAKPOINTS
   ========================================================================= */
@media (min-width: 768px) {
    .pd-section { padding: 84px 32px; }
    .pd-section h2 { margin-bottom: 12px; }
    .pd-section--hero .wp-block-cover__inner-container { padding: 140px 32px; }

    .pd-grid--steps { grid-template-columns: repeat(2, 1fr); }
    .pd-grid--cards { grid-template-columns: repeat(2, 1fr); }

    .pd-section--estrutura .wp-block-list { max-width: 560px; }
}

@media (min-width: 1024px) {
    .pd-grid--steps { grid-template-columns: repeat(4, 1fr); }
    .pd-grid--cards { grid-template-columns: repeat(3, 1fr); }
    .pd-grid--steps .pd-step { padding: 28px 22px; }
}

/* ============================================================================
   REFINO VISUAL — GO-LIVE (v0.3.x)
   Foto do instrutor · CTA mais forte · botão flutuante de WhatsApp (mobile)
   ========================================================================= */

/* --- Avatar do instrutor (seção "Quem conduz o curso") --- */
.pd-section--instrutor .pd-instructor-photo {
    width: 180px;
    height: 180px;
    margin: 8px auto 4px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 38, 77, 0.22);
    border: 4px solid var(--pd-white);
}
.pd-section--instrutor .pd-instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pd-section--instrutor .pd-instructor-name { margin-top: 14px; }

/* --- CTA mais forte (botão primário preenchido) --- */
.wp-block-button.is-style-fill .wp-block-button__link {
    font-size: 1.06rem;
    padding: 18px 38px;
    letter-spacing: 0.005em;
    box-shadow: 0 10px 26px rgba(0, 119, 204, 0.42);
}
/* No hero e no CTA final o botão primário é o herói da página */
.pd-section--hero .wp-block-button.is-style-fill .wp-block-button__link,
.pd-section--cta-final .wp-block-button.is-style-fill .wp-block-button__link {
    font-size: 1.14rem;
    padding: 20px 44px;
}
.wp-block-button.pd-btn-whatsapp .wp-block-button__link {
    padding: 18px 34px;
}

/* --- Botão flutuante de WhatsApp (mobile) — alta conversão, baixo custo --- */
.pd-wa-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pd-whatsapp);
    color: #fff;
    font-family: var(--pd-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    transition: transform .15s ease, background .2s ease;
}
.pd-wa-float:hover { background: var(--pd-whatsapp-d); transform: translateY(-2px); }
.pd-wa-float svg { width: 22px; height: 22px; fill: currentColor; }
/* Em telas grandes o botão flutuante é dispensável (o header já tem CTA fixo) */
@media (min-width: 900px) {
    .pd-wa-float { display: none; }
}