/**
 * Single Post Styles
 *
 * @package _cff
 */

/* Status Badge for Single Post Hero - desktop 143px, mobile/tablet 110px bottom-right */
.single-post .cff-status-badge-wrap {
    width: 143px;
    height: 143px;
    top: -40px !important;
    justify-content: flex-end;
    align-items: flex-end;
}
.single-post .hero-status-badge {
    position: absolute;
    width: 143px;
    height: 143px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    top: 0;
    color: #fff;
}

/* The accessible <button> trigger wraps the absolutely-positioned hero badge, so it
   collapses to 0 width and gets pushed by the wrap's flex justify-end, shifting the
   badge off the wrap. Make the trigger fill the wrap so the badge sits where the
   tooltip/arrow expect it. */
.single-post .cff-status-badge-wrap--hero .cff-status-badge-trigger {
    position: absolute;
    inset: 0;
}

.single-post .cff-status-badge-wrap--hero .hero-status-badge .hero-status-icon,
.single-post .cff-status-badge-wrap--hero .hero-status-badge .status-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hero tooltip: desktop – below badge, left-aligned with badge */
.single-post .cff-status-badge-wrap--hero .cff-claim-tooltip {
    top: 100%;
    bottom: auto;
    left: 0;
    transform: translateY(8px);
    margin-top: 4px;
}
.single-post .cff-status-badge-wrap--hero .cff-claim-tooltip::before {
    left: 71px; /* half the 143px badge — centers the arrow under the badge */
    transform: translateX(-50%);
}
@media (hover: hover) {
    .single-post .cff-status-badge-wrap--hero:hover .cff-claim-tooltip {
        transform: translateY(4px);
    }
}
.single-post .cff-status-badge-wrap--hero:focus-within .cff-claim-tooltip,
.single-post .cff-status-badge-wrap--hero.is-tooltip-visible .cff-claim-tooltip {
    transform: translateY(4px);
}

/* Mobile & tablet: hero badge 110px, position from bottom */
@media (max-width: 1024px) {
    .single-post .cff-status-badge-wrap {
        width: 110px;
        height: 110px;
        top: auto !important;
        left: auto !important;
        bottom: 0.5rem;
        right: 0.5rem;
    }
    .single-post .cff-status-badge-wrap--hero .hero-status-badge {
        width: 110px;
        height: 110px;
        top: auto;
        right: 0;
        bottom: 0;
    }

    /* Hero tooltip on mobile/tablet: above badge, shifted left so it stays on screen */
    .single-post .cff-status-badge-wrap--hero .cff-claim-tooltip {
        top: auto;
        bottom: 0;
        left: auto;
        right: 1%;
        transform: translateY(-8px);
        margin-top: 0;
        margin-bottom: 4px;
        max-width: min(459px, calc(100vw - 2rem));
    }
    .single-post .cff-status-badge-wrap--hero .cff-claim-tooltip::before {
        left: 75%;
        transform: translateX(-50%);
    }
    .single-post .cff-status-badge-wrap--hero:hover .cff-claim-tooltip,
    .single-post .cff-status-badge-wrap--hero:focus-within .cff-claim-tooltip {
        transform: translateY(-4px);
    }
    .single-post .cff-status-badge-wrap--hero.is-tooltip-visible .cff-claim-tooltip {
        transform: translateX(0%) translateY(105%);
    }
}

/* Very small screens (< 360px): hero tooltip full viewport width */
@media (max-width: 359px) {
    .single-post .cff-status-badge-wrap--hero .cff-claim-tooltip {
        min-width: 0;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
        box-sizing: border-box;
    }
}

.status-icon {
    object-fit: contain;
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 400px;
}

.hero-section .aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.hero-section .aspect-w-16 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Social Share Section */
.social-share-section {
    background: #f8fafc;
}

.social-share-btn {
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.social-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.twitter-btn:hover {
    background-color: #1da1f2 !important;
}

.linkedin-btn:hover {
    background-color: #0077b5 !important;
}

/* Testimonials Section */
.testimonials-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.testimonial-card {
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e0;
}

/* Contact Form Section */
.contact-form-section {
    background: #ffffff;
}

.contact-form-wrapper {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
}

/* Marquee Section */
.marquee-section {
    position: relative;
    overflow: hidden;
}

.cff-marquee {
    animation: marquee-scroll linear infinite;
    white-space: nowrap;
}

.cff-marquee[data-reverse="true"] {
    animation-direction: reverse;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Related Posts Section */

.related-post-card {
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e0;
}

/* Single article content + share spacing (Claims, Real Stories, etc.) */
.single-blog-post .cff-single-post-content-area {
    background-color: #fff;
}

.single-blog-post .cff-single-post-after-content {
    background-color: #fff;
}

.single-blog-post .cff-single-post-after-content > .container:last-child {
    border-top: 1px solid #e5e5e5;
}

/*
 * Single post content width rules with prose styling
 * - Base text width: 660px for readability using prose
 * - Media (images, embeds, videos) can expand up to 1200px on desktop
 */
.single-post-content {
    max-width: 660px; /* text column */
}

/* Allow wide/full blocks and media to break out of text column */
.single-post-content .alignwide,
.single-post-content .alignfull,
.single-post-content .wp-block-image,
.single-post-content .wp-block-embed,
.single-post-content .wp-block-video,
.single-post-content figure,
.single-post-content .wp-block-gallery {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Make full-width blocks span the container edge-to-edge */
.single-post-content .alignfull {
    width: 100%;
}

/* Ensure images and videos scale properly */
.single-post-content img,
.single-post-content video,
.single-post-content iframe {
    width: 100%;
    height: auto;
}

/* Prose styling for single post content */
.single-post-content {
    @apply prose prose-lg prose-gray max-w-none;
}

/* Override prose max-width to use our custom width */
.single-post-content.prose {
    max-width: 660px;
}

/* Ensure media blocks break out of prose constraints */
.single-post-content .alignwide,
.single-post-content .alignfull,
.single-post-content .wp-block-image,
.single-post-content .wp-block-embed,
.single-post-content .wp-block-video,
.single-post-content figure,
.single-post-content .wp-block-gallery {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Wide Videos Block for Single Posts */
.videos-block-single-wide {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
}

.videos-block-single-wide .container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Ensure videos slider takes full width on single posts */
.videos-block-single-wide .videos-slider {
    width: 100%;
}

.videos-block-single-wide .swiper {
    width: 100%;
}

/* Target section elements within prose for wide videos block */
.single-post-content .videos-block-single-wide {
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    max-width: 100vw;
    padding-block: 0 !important;
}

.single-post-content .videos-block-single-wide .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Responsive adjustments for wide videos block */
@media (max-width: 768px) {
    .videos-block-single-wide,
    .single-post-content .videos-block-single-wide {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }
    
    .videos-block-single-wide .container,
    .single-post-content .videos-block-single-wide .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}



.post-image-container {
    overflow: unset;
    border-radius: 1rem 1rem 0 0;
}

.post-image-container img {
    transition: transform 0.3s ease;
}

.related-post-card:hover .post-image-container img {
    transform: scale(1.05);
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        min-height: 300px;
    }
    
    .social-share-btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .testimonial-card,
    .related-post-card {
        margin-bottom: 1rem;
    }
    
    .marquee-section {
        padding: 1rem 0;
    }
    
    .cff-marquee span {
        margin: 0 1rem;
        font-size: 1rem;
    }
}

/* Animation for marquee speed */
.cff-marquee[data-speed="0.5"] {
    animation-duration: 20s;
}

.cff-marquee[data-speed="1"] {
    animation-duration: 15s;
}

.cff-marquee[data-speed="1.5"] {
    animation-duration: 12s;
}

.cff-marquee[data-speed="2"] {
    animation-duration: 10s;
}

.cff-marquee[data-speed="2.5"] {
    animation-duration: 8s;
}

.cff-marquee[data-speed="3"] {
    animation-duration: 6s;
}

.cff-marquee[data-speed="3.5"] {
    animation-duration: 5s;
}

.cff-marquee[data-speed="4"] {
    animation-duration: 4s;
}

.cff-marquee[data-speed="4.5"] {
    animation-duration: 3.5s;
}

.cff-marquee[data-speed="5"] {
    animation-duration: 3s;
}