/*
Theme Name: Moneta
Theme URI: https://weblish.io
Author: Weblish
Author URI: https://weblish.io
Description: A modern WordPress blogging theme converted from the Moneta Webflow template. Features beautiful animations, responsive design, and a professional layout perfect for blogs, articles, and content publishing.
Version: 1777369626.deploy-1777445849
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: moneta
Tags: one-column, two-columns, custom-menu, custom-logo, featured-images, footer-widgets, theme-options, translation-ready, blog, blogging

Moneta WordPress Theme - Converted from Webflow
*/

/* 
 * 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 visual layout: mirror base Webflow hero properties */
.section_hero .hero_visual {
    background-color: var(--bg-color--bg-alternate) !important;
    background-image: url('./images/hero-visual-grid.svg') !important;
    background-position: 30% !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    border-radius: 1.5rem !important;
    padding-top: 84% !important;
    position: relative !important;
    overflow: clip !important;
}

.section_hero .hero_image-one,
.section_hero .hero_image-two {
    border-radius: 1rem !important;
    position: absolute !important;
    overflow: clip !important;
}

.section_hero .hero_image-one {
    width: 160% !important;
    padding-top: 114% !important;
    top: 8% !important;
    left: 19% !important;
    right: auto !important;
}

.section_hero .hero_image-two {
    width: 38% !important;
    padding-top: 83.2% !important;
    top: 36% !important;
    left: 7% !important;
    right: auto !important;
    bottom: auto !important;
    box-shadow: 30px 30px 50px #0000001a, 0 0 0 8px #1111111a !important;
}

.section_hero .hero_image-one .img,
.section_hero .hero_image-two .img {
    inset: 0 !important;
    object-fit: cover !important;
    width: 100%;
    height: 100% !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;
}

/* ============================================
   SECTION CONTENT VISIBILITY
   Ensure all sections are visible with smooth fade-in
   ============================================ */
.section_cta,
.section_contact,
.section_blog-slider {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Section animated elements - allow opacity fade, prevent jumping transforms */
.section_cta [data-w-id],
.section_contact [data-w-id] {
    transform: none !important;
    -webkit-transform: none !important;
    /* opacity controlled by JS for smooth fade */
}

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

/* Active section content starts visible */
.section_cta .content-wrap,
.section_contact .content-wrap {
    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
   ============================================ */
@keyframes blogSlide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.section_blog-slider .slider {
    opacity: 1 !important;
    visibility: visible !important;
}

.section_blog-slider .blog_mask {
    animation: blogSlide 30s linear infinite;
    -webkit-animation: blogSlide 30s linear infinite;
}

.section_blog-slider .blog_mask:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

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

/* Ensure all images in hero are loaded */
.section_hero .hero_image-one img,
.section_hero .hero_image-two img {
    display: block !important;
    width: 100%;
    height: 100% !important;
}

/* ============================================
   LOGO SIZING AND CONTRAST SAFETY
   ============================================ */
.navbar_logo,
.footer_logo-link-image {
    width: auto !important;
    max-width: 100%;
    max-height: 90px !important;
    height: auto !important;
    object-fit: contain;
}

.footer_logo-link {
    height: auto;
    min-height: 3.125rem;
}