/*
Theme Name: Digest Bitcoin
Theme URI: https://weblish.io
Author: Weblish
Author URI: https://weblish.io
Description: A modern WordPress theme for Digest Bitcoin - making Bitcoin simple with bite-sized lessons. Features beautiful animations, responsive design, and a professional layout for Bitcoin education content.
Version: 1774954596
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digest-bitcoin
Tags: one-column, two-columns, custom-menu, custom-logo, featured-images, footer-widgets, theme-options, translation-ready, blog, education, bitcoin

Digest Bitcoin WordPress Theme
*/

/* 
 * Note: The main styles are loaded from the css/ folder via wp_enqueue_style()
 * This file is required by WordPress for theme identification
 */

/* ============================================
   ANIMATION AND VISIBILITY FIXES
   Ensures smooth animations without glitches
   ============================================ */

/* Hide Webflow badge */
.w-webflow-badge {
    display: none !important;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ============================================
   HERO SECTION - Ensure images are visible
   ============================================ */
.section_hero .hero_visual,
.section_hero .hero_image-one,
.section_hero .hero_image-two,
.section_hero .hero_image-one img,
.section_hero .hero_image-two img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Hero text content visibility */
.section_hero .hero_left-content,
.section_hero .hero_content-wrap,
.section_hero .content-wrap,
.section_hero .header,
.section_hero .badge-wrapper,
.section_hero .hero_title-wrap,
.section_hero .hero_title,
.section_hero .hero_description,
.section_hero .hero_buttons-wrap,
.section_hero .button-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ============================================
   LOGOS SLIDER - Continuous scroll animation
   ============================================ */
@keyframes logosSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.section_logos .logos_content {
    display: flex;
    overflow: hidden;
    position: relative;
}

.section_logos .logos_grid {
    display: flex;
    flex-shrink: 0;
    animation: logosSlide 20s linear infinite !important;
    -webkit-animation: logosSlide 20s linear infinite !important;
}

.section_logos .logos_grid:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.section_logos .logos_icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   TESTIMONIALS SLIDER - Continuous scroll animation
   ============================================ */
@keyframes testimonialsSlide {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.section_testimonials .testimonials_grid {
    opacity: 1 !important;
    visibility: visible !important;
}

.section_testimonials .testimonials_grid-content {
    animation: testimonialsSlide 25s linear infinite;
    -webkit-animation: testimonialsSlide 25s linear infinite;
}

.section_testimonials .testimonials_grid-content:nth-child(2) {
    animation-direction: reverse;
    -webkit-animation-direction: reverse;
}

.section_testimonials .testimonials_grid:hover .testimonials_grid-content {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* ============================================
   SECTION CONTENT VISIBILITY
   Ensure all sections are visible with smooth fade-in
   ============================================ */
.section_about,
.section_steps,
.section_support,
.section_pricing,
.section_faq,
.section_cta,
.section_insight,
.section_features,
.section_contact,
.section_blog-slider,
.section_login {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   LOGIN/SIGN-IN/SIGN-UP PAGES - Full visibility
   Override all inline opacity:0 styles
   ============================================ */
.section_login {
    opacity: 1 !important;
    visibility: visible !important;
}

.section_login * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Target elements with inline style containing opacity */
.section_login [style*="opacity"],
.section_login [style*="transform"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Specific login form elements */
.section_login .login_content,
.section_login .login_form-component,
.section_login .form_component,
.section_login .login_form,
.section_login .login_form-header,
.section_login .login_form-header h1,
.section_login .login_form-header em,
.section_login .login_form-wrap,
.section_login .form_field-wrapper,
.section_login .form_label,
.section_login .form_input,
.section_login .login_separator,
.section_login .line-horizontal,
.section_login .form_bottom,
.section_login .form_button-group,
.section_login .media-button-wrap,
.section_login .button-wrapper,
.section_login .form_subtext,
.section_login .text-base,
.section_login .text-5xl,
.section_login .text-font-gambetta,
.section_login .button,
.section_login .w-button,
.section_login .w-input,
.section_login .icon_button,
.section_login a,
.section_login div,
.section_login input,
.section_login label,
.section_login img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Ensure h1 headings in login form are visible */
.section_login h1,
.section_login h1 em,
.section_login .text-5xl,
.section_login .text-5xl em {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Section animated elements - allow opacity fade, prevent jumping transforms */
.section_about [data-w-id],
.section_steps [data-w-id],
.section_support [data-w-id],
.section_pricing [data-w-id],
.section_faq [data-w-id],
.section_insight [data-w-id],
.section_features [data-w-id],
.section_contact [data-w-id],
.section_blogs [data-w-id],
.section_blog [data-w-id] {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Ensure sections below hero are always visible (override inline opacity:0) */
.section_steps [data-w-id],
.section_support [data-w-id],
.section_faq [data-w-id] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Logos section - keep slider animation working */
.section_logos [data-w-id] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Testimonials section - keep slider animation working */
.section_testimonials [data-w-id] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================
   SECTION SCROLL ANIMATIONS - Pure fade (no jumping)
   Original theme behavior: opacity-only transitions
   ============================================ */

/* All section content starts visible - no jumping transforms */
.section_about .content-wrap,
.section_steps .content-wrap,
.section_support .content-wrap,
.section_pricing .content-wrap,
.section_faq .content-wrap,
.section_cta .content-wrap,
.section_insight .content-wrap,
.section_features .content-wrap,
.section_contact .content-wrap {
    opacity: 1;
    visibility: visible;
}

/* Cards are visible without jumping animation */
.steps_card,
.pricing_card,
.support_card,
.insight_card,
.features_card {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   BUTTON HOVER ANIMATIONS
   ============================================ */
.button {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.button:hover {
    transform: translateY(-2px);
}

.button.is-icon .icon-1x1-extra-small {
    transition: transform 0.2s ease !important;
}

.button.is-icon:hover .icon-1x1-extra-small {
    transform: translateX(4px);
}

/* ============================================
   FAQ ACCORDION SMOOTH ANIMATION
   ============================================ */
.faq_answer {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out !important;
    overflow: hidden;
}

.faq_item {
    transition: background-color 0.2s ease !important;
}

/* ============================================
   NAVBAR ANIMATION
   ============================================ */
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.steps_card,
.pricing_card,
.testimonials_card,
.support_card,
.insight_card,
.features_card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.steps_card:hover,
.pricing_card:hover,
.support_card:hover,
.insight_card:hover,
.features_card:hover {
    transform: translateY(-4px);
}

/* ============================================
   BLOG SLIDER SECTION
   ============================================ */
.section_blog-slider .slider {
    opacity: 1 !important;
    visibility: visible !important;
}

.section_blog-slider .blog_mask {
    animation: none !important;
    -webkit-animation: none !important;
}

/* ============================================
   404 PAGE VISIBILITY
   ============================================ */
.section_not-found,
.section_not-found .not-found_wrapper,
.section_not-found .not-found_content,
.section_not-found .not-found_header,
.section_not-found h1,
.section_not-found .button-wrapper,
.section_not-found .button-wrapper a {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* ============================================
   LOGO DIMENSIONS
   ============================================ */
.navbar_logo {
    max-height: 90px;
    width: auto !important;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.footer_logo-link {
    height: auto !important;
}

.footer_logo {
    max-height: 90px;
    width: auto !important;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    background-color: rgba(255, 255, 255, 0.92);
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
}

/* ============================================
   BRANDING COLOR OVERRIDES
   Override Webflow default blue (#3898ec) with brand orange
   ============================================ */
.w-input:focus,
.w-select:focus,
.w-checkbox-input--inputType-custom.w--redirected-checked,
.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-checked {
    border-color: #F7931A !important;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
    background-color: #F7931A !important;
}

.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
    box-shadow: 0 0 3px 1px #F7931A !important;
}

.temlis_wrap.is-blue {
    color: #F7931A !important;
}

/* ============================================
   PREVENT LAYOUT SHIFTS
   ============================================ */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure all images in hero are loaded and fill their containers */
.hero_image-one img,
.hero_image-two img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Blog hero images fill and cover properly */
.blogs-hero_image-one img,
.blogs-hero_image-two img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================
   BRAND OVERLAY ON ORIGINAL THEME IMAGES
   Applies a subtle brand-colored overlay to
   repurpose original theme images with brand identity.
   Content remains on top via natural stacking.
   ============================================ */
.support_visual-top,
.support_visual-middle,
.support_visual-bottom,
.support_visual-right,
.support_bottom-right-image,
.cta_image-left,
.cta_image-right {
    position: relative;
    overflow: hidden;
}

.support_visual-top::after,
.support_visual-middle::after,
.support_visual-bottom::after,
.support_visual-right::after,
.support_bottom-right-image::after,
.cta_image-left::after,
.cta_image-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.15) 0%, rgba(212, 123, 21, 0.10) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.insight_card-image {
    position: relative;
    overflow: hidden;
}

.insight_card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.12) 0%, rgba(212, 123, 21, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* ============================================
   SUPPORT SECTION FIX - Section above FAQ
   The base CSS uses padding-top % on .support_content to
   reserve space for absolutely-positioned images that sit
   above the text overlay (.support_content-wrap).  The global
   [data-w-id] { transform:none !important } rule was also
   stripping the translate/rotate from the icon-ring widget.
   ============================================ */

/* Restore the card-icons-wrap centring transform that the global
   data-w-id rule nuked — needs !important to win */
.section_support .support_card-icons-wrap {
    transform: translate(0, -15%) !important;
    -webkit-transform: translate(0, -15%) !important;
}

/* The card-ring rotations are also killed by the global rule;
   restore them so icons spread around the rings correctly */
.section_support .card-ring.is-transparent.is-second {
    transform: rotate(121deg) !important;
}
.section_support .card-ring.is-three {
    transform: rotate(-120deg) !important;
}
.section_support .card-ring.is-four {
    transform: rotate(-84deg) !important;
}
.section_support .card-ring.is-five {
    transform: rotate(-33deg) !important;
}
.section_support .card-ring.is-six {
    transform: rotate(38deg) !important;
}
.section_support .card-ring.is-seven {
    transform: rotate(92deg) !important;
}
.section_support .card-icon {
    transform: translate(0, -50%) !important;
}
.section_support .card-icon.is-two {
    transform: translate(0, -50%) rotate(-121deg) !important;
}
.section_support .card-icon.is-three {
    transform: translate(0, -50%) rotate(120deg) !important;
}
.section_support .card-icon.is-four {
    transform: translate(0, -50%) rotate(84deg) !important;
}
.section_support .card-icon.is-five {
    transform: translate(0, -50%) rotate(33deg) !important;
}
.section_support .card-icon.is-six {
    transform: translate(0, -50%) rotate(-38deg) !important;
}
.section_support .card-icon.is-seven {
    transform: translate(0, -50%) rotate(-92deg) !important;
}

/* Override the base padding-top: 81% that creates a large spacing gap.
   The images are position:absolute inside this relatively-positioned
   container, so padding-top % sets the container height.  We reduce
   it while keeping enough room for the stacked images + text overlay. */
.support_content {
    padding-top: 55% !important;
    overflow: hidden;
}

.section_support .support_content-wrap {
    z-index: 2;
}

/* ---- Tablet (991px) ---- */
@media screen and (max-width: 991px) {
    .support_content {
        padding-top: 65% !important;
    }

    .section_support .support_card-icons-wrap {
        transform: translate(0, -60%) !important;
        -webkit-transform: translate(0, -60%) !important;
    }
}

/* ---- Mobile landscape (767px) — stacked single-column ---- */
@media screen and (max-width: 767px) {
    .support_content {
        padding-top: 60% !important;
    }

    .section_support .support_card-icons-wrap {
        width: 16%;
        transform: translate(0, -50%) !important;
        -webkit-transform: translate(0, -50%) !important;
    }

    .section_support .support_content-wrap {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* ---- Mobile portrait (479px) ---- */
@media screen and (max-width: 479px) {
    .support_content {
        padding-top: 65% !important;
    }

    .section_support .support_card-icons-wrap {
        width: 15%;
        transform: translate(0, -40%) !important;
        -webkit-transform: translate(0, -40%) !important;
    }

    .section_support .support_content-wrap {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .section_support .support_content-bottom {
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}