/**
 * Blog PDF Export Styles
 * - Download button placement
 * - PDF clone container styling (rendered offscreen, used by html2pdf)
 */

/* ============= Download PDF Button — Eye-Catching Edition =============
   Big, bold, animated. Designed to grab attention without being obnoxious.
*/

/* Wrapper around button — keeps the badge OUTSIDE the button so it doesn't
   get clipped by the button's overflow:hidden (needed for shimmer effect). */
.vp-pdf-btn-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}

.vp-pdf-btn {
    position: relative;
    background: linear-gradient(135deg, #BF0A30 0%, #8B0824 50%, #002868 100%);
    background-size: 200% 200%;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.6s ease;
    box-shadow:
        0 6px 18px rgba(191, 10, 48, 0.35),
        0 0 0 4px rgba(191, 10, 48, 0.08);
    animation: vp-pdf-attention 3.5s ease-in-out infinite;
}

/* Subtle attention pulse — scales the button gently every few seconds */
@keyframes vp-pdf-attention {
    0%, 88%, 100% { transform: scale(1); }
    92% { transform: scale(1.06); }
    96% { transform: scale(1); }
}

/* Animated shimmer/shine sweeping across the button */
.vp-pdf-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: skewX(-20deg);
    animation: vp-pdf-shine 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vp-pdf-shine {
    0%, 60%, 100% { left: -75%; }
    80% { left: 125%; }
}

/* Soft pulsing outer glow */
.vp-pdf-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #BF0A30, #002868);
    z-index: -1;
    filter: blur(10px);
    opacity: 0.45;
    animation: vp-pdf-glow 2.5s ease-in-out infinite;
}

@keyframes vp-pdf-glow {
    0%, 100% { opacity: 0.35; transform: scale(0.95); }
    50%      { opacity: 0.6;  transform: scale(1.08); }
}

.vp-pdf-btn:hover {
    transform: translateY(-3px) scale(1.04);
    background-position: 100% 100%;
    box-shadow:
        0 14px 30px rgba(191, 10, 48, 0.5),
        0 0 0 6px rgba(191, 10, 48, 0.12);
    animation-play-state: paused;
}

.vp-pdf-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.vp-pdf-btn:disabled {
    opacity: 0.75;
    cursor: wait;
    transform: none !important;
    animation: none;
}

.vp-pdf-btn:disabled::before,
.vp-pdf-btn:disabled::after {
    animation: none;
    opacity: 0;
}

.vp-pdf-btn i {
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.vp-pdf-btn-text {
    position: relative;
    z-index: 2;
}

/* "NEW" badge floating on top-right of button (sibling of button, child of wrap) */
.vp-pdf-btn-badge {
    position: absolute;
    top: -10px;
    right: -8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #1d1d1f;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.6px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 999;
    animation: vp-pdf-badge-bounce 2s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}

@keyframes vp-pdf-badge-bounce {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50%      { transform: translateY(-3px) rotate(-4deg); }
}

/* Loading state */
.vp-pdf-btn .vp-pdf-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vp-pdf-spin 0.8s linear infinite;
    position: relative;
    z-index: 2;
}

.vp-pdf-btn.is-loading {
    animation: none;
}
.vp-pdf-btn.is-loading::before { animation: none; opacity: 0; }
.vp-pdf-btn.is-loading::after  { animation: none; opacity: 0; }
.vp-pdf-btn.is-loading .vp-pdf-icon  { display: none; }
.vp-pdf-btn.is-loading .vp-pdf-spinner { display: inline-block; }

/* Hide badge while button is loading (badge is now a sibling of button) */
.vp-pdf-btn-wrap:has(.vp-pdf-btn.is-loading) .vp-pdf-btn-badge { display: none; }

@keyframes vp-pdf-spin {
    to { transform: rotate(360deg); }
}

/* Mobile — keep it visible but compact */
@media (max-width: 767px) {
    .vp-pdf-btn {
        padding: 10px 14px;
        font-size: 0.72rem;
        gap: 7px;
    }
    .vp-pdf-btn i {
        font-size: 1rem;
    }
    .vp-pdf-btn-badge {
        font-size: 0.55rem;
        padding: 2px 6px;
        top: -6px;
        right: -4px;
    }
}

/* ============= Toast Notification ============= */
.vp-pdf-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1d1d1f;
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.vp-pdf-toast.is-visible {
    transform: translateX(-50%) translateY(0);
}

.vp-pdf-toast.is-success { background: #0a7d3a; }
.vp-pdf-toast.is-error   { background: #BF0A30; }

.vp-pdf-toast i {
    font-size: 1.1rem;
}

/* ============= Hidden PDF Render Container ============= */
/* Positioned far offscreen to the right (positive coords).
   No transforms — html2canvas captures transformed content incorrectly. */
.vp-pdf-render-wrap {
    position: absolute;
    top: 0;
    left: 9999px;
    width: 794px;
    height: auto;
    background: #fff;
    pointer-events: none;
    z-index: 1;
}

.vp-pdf-render {
    width: 794px; /* A4 @ 96 DPI */
    background: #fff;
    color: #1d1d1f;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    line-height: 1.6;
    padding: 0;
    margin: 0;
}

.vp-pdf-render * {
    box-sizing: border-box;
    max-width: 100%;
}

/* PDF Header */
.vp-pdf-header {
    background: linear-gradient(135deg, #BF0A30 0%, #002868 100%);
    color: #fff;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    break-after: avoid;
}

.vp-pdf-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vp-pdf-header__logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
}

.vp-pdf-header__name {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.vp-pdf-header__url {
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 2px 0 0 0;
}

.vp-pdf-header__date {
    font-size: 0.75rem;
    opacity: 0.85;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* PDF Body */
.vp-pdf-body {
    padding: 36px 50px 30px 50px;
}

.vp-pdf-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #002868;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
}

.vp-pdf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    color: #6e6e73;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f3;
}

.vp-pdf-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vp-pdf-meta i { color: #BF0A30; }

.vp-pdf-featured {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 30px;
    max-height: 360px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.vp-pdf-featured img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
}

/* PDF Content */
.vp-pdf-content {
    color: #2c2c2e;
    font-size: 14px;
    line-height: 1.75;
}

.vp-pdf-content h1,
.vp-pdf-content h2,
.vp-pdf-content h3,
.vp-pdf-content h4 {
    color: #002868;
    font-weight: 800;
    margin: 18px 0 10px 0;
    line-height: 1.3;
    /* Note: NO page-break-after: avoid here — it caused huge empty gaps
       when next element (e.g. tall image) was forced to next page */
}

.vp-pdf-content h1 { font-size: 1.8rem; }
.vp-pdf-content h2 { font-size: 1.4rem; border-left: 4px solid #BF0A30; padding-left: 14px; }
.vp-pdf-content h3 { font-size: 1.2rem; }
.vp-pdf-content h4 { font-size: 1.05rem; }

.vp-pdf-content p {
    margin: 0 0 12px 0;
    color: #2c2c2e;
}

.vp-pdf-content a {
    color: #BF0A30;
    text-decoration: underline;
    word-break: break-word;
}

.vp-pdf-content img {
    max-width: 100%;
    max-height: 480px; /* Cap image height so heading + image fit on one page */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    margin: 14px auto;
    display: block;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* User-content boxes/cards (any direct div in content) must not split across pages */
.vp-pdf-content > div,
.vp-pdf-content > section,
.vp-pdf-content > figure,
.vp-pdf-content > aside,
.vp-pdf-content .accordion-item,
.vp-pdf-content .faq-item {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* First child of content: prevent unwanted top-of-page break */
.vp-pdf-content > *:first-child {
    margin-top: 0;
    page-break-before: avoid;
    break-before: avoid;
}

/* ============= Force-Expanded Accordions in PDF =============
   Aggressive CSS safety net — JS already removes "collapsed" classes
   and adds "show", but some themes set inline height/styles via JS.
   These !important rules guarantee answers are visible. */

/* Any descendant inside .vp-pdf-render that looks like collapsed content */
.vp-pdf-render .accordion-collapse,
.vp-pdf-render .collapse,
.vp-pdf-render .collapsing,
.vp-pdf-render .accordion-body,
.vp-pdf-render .faq-answer,
.vp-pdf-render .faq-content,
.vp-pdf-render .faq-item-answer,
.vp-pdf-render .rank-math-answer,
.vp-pdf-render [class*="faq"] [class*="answer"],
.vp-pdf-render [class*="accordion"] [class*="body"],
.vp-pdf-render [class*="accordion"] [class*="panel"],
.vp-pdf-render [class*="-collapse"]:not(button),
.vp-pdf-render details {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: none !important;
}

/* Force-show any aria-hidden region/block elements inside FAQ/accordion */
.vp-pdf-render [class*="faq"] [aria-hidden="true"]:not(svg):not(i):not(path):not(use),
.vp-pdf-render [class*="accordion"] [aria-hidden="true"]:not(svg):not(i):not(path):not(use) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Buttons appear in "open" state visually */
.vp-pdf-content .accordion-button,
.vp-pdf-content .faq-question,
.vp-pdf-content [class*="faq"] button,
.vp-pdf-content [class*="accordion"] button {
    pointer-events: none;
    cursor: default;
}

/* Bootstrap's chevron — show "open" rotation */
.vp-pdf-content .accordion-button::after {
    transform: rotate(-180deg) !important;
}

/* Each FAQ/accordion item: keep question + answer together on one page */
.vp-pdf-content .accordion-item,
.vp-pdf-content .faq-item,
.vp-pdf-content .rank-math-list-item,
.vp-pdf-content [class*="faq-item"],
.vp-pdf-content [class*="accordion-item"] {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 8px;
}

.vp-pdf-content ul,
.vp-pdf-content ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.vp-pdf-content li {
    margin-bottom: 6px;
}

.vp-pdf-content blockquote {
    border-left: 5px solid #BF0A30;
    background: #fdf5f5;
    padding: 18px 24px;
    margin: 20px 0;
    color: #002868;
    font-style: italic;
    font-weight: 600;
    border-radius: 0 8px 8px 0;
    page-break-inside: avoid;
}

.vp-pdf-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    page-break-inside: avoid;
}

.vp-pdf-content th,
.vp-pdf-content td {
    padding: 8px 12px;
    border: 1px solid #e5e5ea;
    font-size: 0.85rem;
    text-align: left;
}

.vp-pdf-content th {
    background: #f5f5f7;
    color: #002868;
    font-weight: 700;
}

.vp-pdf-content code,
.vp-pdf-content pre {
    background: #f5f5f7;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    color: #BF0A30;
}

.vp-pdf-content pre {
    padding: 14px;
    overflow-x: auto;
    page-break-inside: avoid;
}

/* Author Box */
.vp-pdf-author {
    background: #002868;
    color: #fff;
    padding: 24px 28px;
    border-radius: 14px;
    margin-top: 36px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    page-break-inside: avoid;
}

.vp-pdf-author__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.vp-pdf-author__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-pdf-author__content h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.vp-pdf-author__role {
    font-size: 0.8rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    font-weight: 600;
}

.vp-pdf-author__bio {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.92;
}

/* PDF Footer */
.vp-pdf-footer {
    margin-top: 40px;
    padding: 18px 50px;
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid #e5e5ea;
}

.vp-pdf-footer a {
    color: #BF0A30;
    text-decoration: none;
    font-weight: 700;
}