/*
 * enhancements.css — DS 13.x Visual Enhancements
 * Appmax Blog child theme | DS v1.1
 * All DS 13.x features with @supports guards and prefers-reduced-motion.
 * Loaded last — overrides nothing in base/components, only adds.
 */


/* ──────────────────────────────────────────────────────────────────
   DS 13.1 — Gradient Text (H1 hero headline)
   background-clip: text with @supports + WCAG fallback
   ─────────────────────────────────────────────────────────────────── */

/* Fallback: solid color (always valid, WCAG AA guaranteed) */
.hero-pillar__h1,
.hero-cluster__h1 {
    color: var(--color-text);
}

/* Progressive enhancement: gradient text where supported.
   Starts at a mid-purple (#C4A0F8) — visible on white bg.
   Ends at a deep purple (#2D1A6E) — not pitch-black.
   Applied to cluster, legacy, home pillar card H1s and home hero em. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero-pillar__h1,
    .hero-cluster__h1 {
        background: linear-gradient(135deg, #C4A0F8 0%, #9B6AFA 40%, #5B30B8 75%, #2D1A6E 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* Home hero split text — the <em> line gets the same gradient */
    .home-hero__h1 em {
        background: linear-gradient(135deg, #C4A0F8 0%, #9B6AFA 40%, #5B30B8 75%, #2D1A6E 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-style: normal;
    }
}


/* ──────────────────────────────────────────────────────────────────
   DS 13.2 — Hero Scroll Dimming (DISABLED — caused gray fade)
   ─────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────
   DS 13.3 — Card + Stream-Hook G1 Hover Reveal
   ::after pseudo-element, opacity 0 → 0.04
   Defined structurally in components.css — this block only adds
   the prefers-reduced-motion override.
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .card::after,
    .stream-hook::after,
    .featured-post::after {
        transition: none;
    }

    .card,
    .stream-hook,
    .featured-post {
        transition: none;
    }
}


/* ──────────────────────────────────────────────────────────────────
   DS 13.4 — Reading Progress Bar + Floating Section Label
   Fixed at top: 80px (below sticky nav), G3 gradient, 3px height
   scaleX transform driven by JS (reading-progress.js)
   ─────────────────────────────────────────────────────────────────── */

.reading-progress-bar,
.reading-progress-label {
    display: none !important;
}

.reading-progress-bar {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    height: var(--progress-bar-h);
    background: var(--g3);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: var(--z-progress);
    transition: transform 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress-bar {
        transition: none;
    }
}

.reading-progress-label {
    position: fixed;
    top: calc(var(--nav-height) + var(--progress-bar-h) + var(--space-1));
    right: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    letter-spacing: var(--tracking-wide);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    z-index: var(--z-progress);
    pointer-events: none;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reading-progress-label.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress-label {
        transition: none;
    }
}

/* Only render on article pages — JS adds these elements to DOM */
/* Suppressed on mobile to avoid crowding (label only) */
@media (max-width: 767px) {
    .reading-progress-label {
        display: none;
    }
}


/* ──────────────────────────────────────────────────────────────────
   DS 13.5 — Pulso Operacional
   Animated purple dot defined in components.css (pulse-dot keyframe).
   This block only handles the prefers-reduced-motion override.
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pulso-operacional__dot {
        animation: none;
        opacity: 1;
    }
}


/* ──────────────────────────────────────────────────────────────────
   TOC active state — updated by reading-progress.js via
   IntersectionObserver as user scrolls through H2 anchors
   ─────────────────────────────────────────────────────────────────── */

.toc__list a {
    transition: color var(--transition-normal), padding-left var(--transition-normal);
}

.toc__list a.is-active {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .toc__list a {
        transition: none;
    }
}


/* ──────────────────────────────────────────────────────────────────
   Nav fix — accommodate full editoria names from WP menu
   When categories use full names ("Operação Financeira" vs the
   mockup's abbreviated "Op. Financeira"), the menu overflows next
   to the search trigger. Reduce gap and font-size so all 5 fit.
   Also: widen the nav container so logo sits hard left and search
   sits hard right (instead of bunched into the 1200px page width).
   ─────────────────────────────────────────────────────────────────── */

/* Nav uses a wider container than the rest of the page — logo + search
   anchor to viewport edges with comfortable padding. */
.nav .container {
    max-width: none;
    padding-inline: var(--space-6);
}

@media (min-width: 1024px) {
    .nav .container {
        padding-inline: var(--space-8);
    }
    .nav__links {
        gap: var(--space-3);
    }
    .nav__links a {
        font-size: 0.8125rem;
        white-space: nowrap;
    }
    .nav__links li {
        list-style: none;
    }
    /* WP-generated menu items get default <li> margins — strip them */
    .nav__links .menu-item {
        margin: 0;
        padding: 0;
    }
}

@media (min-width: 1280px) {
    .nav .container {
        padding-inline: var(--space-10);
    }
    .nav__links {
        gap: var(--space-5);
    }
    .nav__links a {
        font-size: var(--text-sm);
    }
}


/* ──────────────────────────────────────────────────────────────────
   Soften hero → body transition with breathing space above article
   The purple gradient hero meets the off-white body too abruptly.
   Add a padding-top on the first .container after the hero on single
   posts so there's vertical breathing room.
   ─────────────────────────────────────────────────────────────────── */

.hero-cluster + .container,
.hero-pillar-d + .container,
.hero-pillar + .container,
.editoria-hero + .page-section,
.editoria-hero + .container {
    padding-top: var(--space-8);
}


/* ──────────────────────────────────────────────────────────────────
   Tables in article-body — apply comparison-table styling to ALL
   tables inserted via the block editor / classic editor. Authors
   don't need to add the .comparison-table class manually.
   ─────────────────────────────────────────────────────────────────── */

.article-body table,
.article-body .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
}

.article-body table th,
.article-body .wp-block-table table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--white);
    background: var(--purple);
}

.article-body table th:first-child,
.article-body .wp-block-table table th:first-child {
    background: var(--neutral-700, #2a2a3a);
}

.article-body table td,
.article-body .wp-block-table table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    vertical-align: top;
}

.article-body table tr:last-child td,
.article-body .wp-block-table table tr:last-child td {
    border-bottom: 0;
}

.article-body .wp-block-table {
    margin: 0;
}

.article-body .wp-block-table figcaption {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    text-align: center;
}


/* ──────────────────────────────────────────────────────────────────
   Cards-grid — cap card max-width so 1 or 2 cards don't stretch
   the section to full container width (mockup uses fixed-width cards
   in a row, with whitespace on the right when count is short).
   ─────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .cards-grid > li {
        max-width: 420px;
    }
}


/* ──────────────────────────────────────────────────────────────────
   Spacing — keep banner-mockup off the manifesto-band's edge
   ─────────────────────────────────────────────────────────────────── */

.banner-mockup {
    margin-block: var(--space-4);
}


/* ──────────────────────────────────────────────────────────────────
   Embed fix — YouTube / Vimeo / iframe full-width in article-body
   WP's wp-block-embed has responsive CSS in theme.min.css but inline
   width/height attributes on the iframe override it. Force iframe to
   fill the content column width and maintain 16/9 aspect ratio.
   ─────────────────────────────────────────────────────────────────── */

.article-body iframe,
.article-body figure.wp-block-embed,
.article-body .wp-block-embed__wrapper {
    width: 100%;
    max-width: 100%;
}

.article-body iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    display: block;
    margin-block: var(--space-6);
}

.article-body figure.wp-block-embed {
    margin-inline: 0;
}

.article-body .wp-block-embed__wrapper {
    position: relative;
}

.article-body .wp-block-embed-youtube .wp-block-embed__wrapper,
.article-body .wp-block-embed-vimeo .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
}

.article-body .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.article-body .wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
}


/* ──────────────────────────────────────────────────────────────────
   TOC scroll offset — account for sticky nav height
   Prevents headings from being hidden under the sticky nav when
   a user clicks a TOC anchor link.
   ─────────────────────────────────────────────────────────────────── */

.article-body h2[id],
.article-body h3[id] {
    scroll-margin-top: 90px;
}


/* ──────────────────────────────────────────────────────────────────
   Editoria hero — imagens por slug
   Arquivos em /assets/images/hero-{slug}.png
   Dimensão recomendada: 800×600px

   Slugs das 5 editorias:
     operacao-financeira
     gateway-de-pagamento
     tese-e-tendencia
     nichos-de-ecommerce
     ia-em-pagamentos
   ─────────────────────────────────────────────────────────────────── */

/* Float animation — multi-axis sine-wave approximation with linear timing
   so the motion is truly continuous with no pause at the extremes.
   Shadow tracks the Y position: lighter/larger when high, denser when low.
   JS (hero-parallax.js) pauses this on mouse interaction. */
@keyframes hero-model-float {
    0%   {
        transform: perspective(1400px) rotateY(-12deg)   rotateX(4deg)   rotateZ(-3deg)   translateY(0px);
        filter: drop-shadow(0 28px 38px rgba(0,0,0,0.48)) drop-shadow(0 10px 16px rgba(0,0,0,0.32));
    }
    12%  {
        transform: perspective(1400px) rotateY(-12.8deg) rotateX(3.4deg) rotateZ(-3.3deg) translateY(-8px);
    }
    25%  {
        transform: perspective(1400px) rotateY(-13.8deg) rotateX(2.8deg) rotateZ(-3.6deg) translateY(-18px);
        filter: drop-shadow(0 38px 50px rgba(0,0,0,0.36)) drop-shadow(0 16px 26px rgba(0,0,0,0.22));
    }
    38%  {
        transform: perspective(1400px) rotateY(-13.2deg) rotateX(3.6deg) rotateZ(-3.2deg) translateY(-26px);
    }
    50%  {
        transform: perspective(1400px) rotateY(-11.5deg) rotateX(5.2deg) rotateZ(-2.4deg) translateY(-30px);
        filter: drop-shadow(0 52px 64px rgba(0,0,0,0.28)) drop-shadow(0 24px 36px rgba(0,0,0,0.16));
    }
    62%  {
        transform: perspective(1400px) rotateY(-11deg)   rotateX(5.6deg) rotateZ(-2.2deg) translateY(-24px);
    }
    75%  {
        transform: perspective(1400px) rotateY(-11.5deg) rotateX(4.8deg) rotateZ(-2.6deg) translateY(-14px);
        filter: drop-shadow(0 38px 50px rgba(0,0,0,0.36)) drop-shadow(0 16px 26px rgba(0,0,0,0.22));
    }
    88%  {
        transform: perspective(1400px) rotateY(-12deg)   rotateX(4.2deg) rotateZ(-2.9deg) translateY(-5px);
    }
    100% {
        transform: perspective(1400px) rotateY(-12deg)   rotateX(4deg)   rotateZ(-3deg)   translateY(0px);
        filter: drop-shadow(0 28px 38px rgba(0,0,0,0.48)) drop-shadow(0 10px 16px rgba(0,0,0,0.32));
    }
}

.editoria-hero__cover {
    width: 100%;
    height: 100%;
    min-height: 520px;
    background-size: 92%;
    background-repeat: no-repeat;
    background-position: center center;
    animation: hero-model-float 6s linear infinite;
    will-change: transform;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .editoria-hero__cover {
        animation: none;
    }
}

/* Widen the visual column so the image has more room */
@media (min-width: 1024px) {
    .editoria-hero--visual .editoria-hero__inner {
        grid-template-columns: 1fr 500px;
        gap: var(--space-4);
    }
}

@media (min-width: 1280px) {
    .editoria-hero--visual .editoria-hero__inner {
        grid-template-columns: 1fr 560px;
    }
}

.editoria-hero--operacao-financeira  .editoria-hero__cover { background-image: url('../images/hero-operacao-financeira.png'); }
.editoria-hero--gateway-de-pagamento .editoria-hero__cover { background-image: url('../images/hero-gateway-de-pagamento.png'); }
.editoria-hero--tese-e-tendencia     .editoria-hero__cover { background-image: url('../images/hero-tese-e-tendencia.png'); }
.editoria-hero--nichos-de-ecommerce  .editoria-hero__cover { background-image: url('../images/hero-nichos-de-ecommerce.png'); }
.editoria-hero--ia-em-pagamentos     .editoria-hero__cover { background-image: url('../images/hero-ia-em-pagamentos.png'); }


/* ──────────────────────────────────────────────────────────────────
   CTA Close — gradient + text override
   Starts at a visible medium-light purple, ends at a rich deep purple.
   No near-whites, no near-blacks. Forces white on all child text
   so base.css h2 color rule can't override.
   ─────────────────────────────────────────────────────────────────── */

.cta-close {
    background: linear-gradient(135deg, #9268E8 0%, #5B2DC0 55%, #341A80 100%);
}

.cta-close__title,
.cta-close__description,
.cta-close__eyebrow {
    color: #ffffff !important;
}


/* ──────────────────────────────────────────────────────────────────
   Newsletter band — HubSpot submission states
   ─────────────────────────────────────────────────────────────────── */

.newsletter-band__success {
    color: #fff;
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    padding: var(--space-4) 0;
    letter-spacing: 0.01em;
}

.newsletter-band__error {
    color: #ff6b6b;
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    text-align: center;
}


/* ──────────────────────────────────────────────────────────────────
   Nav CTA button — "Criar conta" pill (desktop only)
   Hidden on all breakpoints; revealed only on desktop (≥1024px).
   Uses accent purple gradient to stand out against the dark nav.
   ─────────────────────────────────────────────────────────────────── */

.nav__cta {
    display: none; /* hidden on mobile — overridden below */
    align-items: center;
    padding: 0.45rem 1.1rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, #9B6AFA 0%, #6B38D8 100%);
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

.nav__cta:hover,
.nav__cta:focus-visible {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.nav__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

@media (min-width: 1024px) {
    .nav__cta {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav__cta {
        transition: none;
    }
}


/* ─── HowTo block (AEO — passo a passo) ──────────────────────────────────── */

.article-howto {
    margin: var(--space-2xl, 2.5rem) 0;
    padding: var(--space-xl, 2rem);
    background: var(--color-bg-alt, #F9FAFB);
    border-radius: var(--radius-lg, 16px);
    border-left: 4px solid var(--color-accent, #7B40E8);
}

.article-howto__title {
    margin: 0 0 var(--space-lg, 1.5rem);
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text, #111827);
    line-height: 1.25;
}

.article-howto__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: howto-counter;
}

.article-howto__step {
    counter-increment: howto-counter;
    position: relative;
    padding: var(--space-md, 1rem) 0 var(--space-md, 1rem) var(--space-2xl, 2.5rem);
    border-bottom: 1px solid var(--color-border-subtle, #F3F4F6);
}

.article-howto__step:last-child {
    border-bottom: none;
}

.article-howto__step::before {
    content: counter(howto-counter);
    position: absolute;
    left: 0;
    top: var(--space-md, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-accent, #7B40E8);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
}

.article-howto__step-title {
    margin: 0 0 var(--space-xs, 0.5rem);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #111827);
    line-height: 1.3;
}

.article-howto__step-description {
    margin: 0;
    color: var(--color-text-muted, #4B5563);
    line-height: 1.6;
}


/* ─── Glossary block (AEO — DefinedTermSet) ──────────────────────────────── */

.article-glossary {
    margin: var(--space-2xl, 2.5rem) 0;
    padding: var(--space-xl, 2rem);
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-lg, 16px);
}

.article-glossary__title {
    margin: 0 0 var(--space-lg, 1.5rem);
    font-family: var(--font-heading, inherit);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text, #111827);
    line-height: 1.25;
}

.article-glossary__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md, 1rem);
}

.article-glossary__term {
    margin: 0;
    font-weight: 700;
    color: var(--color-accent, #7B40E8);
    font-size: 1rem;
}

.article-glossary__definition {
    margin: 0 0 var(--space-sm, 0.75rem) 0;
    color: var(--color-text, #111827);
    line-height: 1.6;
    padding-bottom: var(--space-sm, 0.75rem);
    border-bottom: 1px solid var(--color-border-subtle, #F3F4F6);
}

.article-glossary__definition:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .article-glossary__list {
        grid-template-columns: 200px 1fr;
        gap: var(--space-sm, 0.75rem) var(--space-lg, 1.5rem);
        align-items: baseline;
    }
}