/*
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: 1779189504
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 var(--wl-shadow-medium), 0 0 0 8px var(--wl-shadow-soft) !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;
}

/* ============================================
   WEBLISH CONTENT TOKENS
   ============================================ */
:root {
    --wl-primary: #4d65ff;
    --wl-primary-hover: #324ce6;
    --wl-secondary: #111111;
    --wl-secondary-hover: #000000;
    --wl-accent: #f59e0b;
    --wl-accent-hover: #d97706;
    --wl-surface: #ffffff;
    --wl-background: #f3f6fb;
    --wl-text: #111111;
    --wl-muted-text: #686868;
    --wl-border: #dbe3ef;
    --wl-pill-bg: #e2ebff;
    --wl-pill-text: #324ce6;
    --wl-highlight-bg: #eff3ff;
    --wl-highlight-text: #324ce6;
    --wl-focus-ring: rgba(77, 101, 255, 0.35);
    --wl-focus-ring-color: #4d65ff;
    --wl-shadow-soft: rgba(17, 17, 17, 0.08);
    --wl-shadow-medium: rgba(17, 17, 17, 0.2);
    --wl-cta-gradient-start: rgba(17, 17, 17, 0.9);
    --wl-cta-gradient-end: rgba(77, 101, 255, 0.82);
}

body {
    font-family: var(--weblish-body-font, "Inter", sans-serif);
    color: var(--wl-text);
    background-color: var(--wl-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--weblish-heading-font, "Montserrat", sans-serif);
}

.button {
    background-color: var(--wl-primary);
    border-color: var(--wl-primary);
    color: var(--wl-surface);
}

.button:hover {
    background-color: var(--wl-primary-hover);
    border-color: var(--wl-primary-hover);
    color: var(--wl-surface);
}

.w-button:hover,
.w-commerce-commercecartopenlink:hover,
.w-commerce-commerceaddtocartbutton:hover,
.w-commerce-commercebuynowbutton:hover {
    color: var(--wl-surface);
}

.button.is-outline {
    background-color: transparent;
    color: var(--wl-primary);
    border-color: var(--wl-primary);
}

.section_hero .button.is-outline:hover {
    color: var(--wl-secondary);
}

.button.is-secondary {
    background-color: var(--wl-secondary);
    border-color: var(--wl-secondary);
    color: var(--wl-surface);
}

.button.is-secondary:hover {
    background-color: var(--wl-secondary-hover);
    border-color: var(--wl-secondary-hover);
    color: var(--wl-surface);
}

.button.is-white:hover,
.button.is-tertiary:hover {
    background-color: var(--wl-primary-hover);
    border-color: var(--wl-primary-hover);
    color: var(--wl-surface);
}

.nav_links.w--current,
.footer_link:hover .text-sm {
    color: var(--wl-primary);
}

.link-underline {
    background-color: var(--wl-primary);
}

.badge {
    background-color: var(--wl-pill-bg);
    border-color: var(--wl-border);
}

.badge .text-sm,
.text-color-alternate {
    color: var(--wl-pill-text) !important;
}

input,
textarea,
select,
.w-input {
    border-color: var(--wl-border);
    background-color: var(--wl-surface);
    color: var(--wl-text);
}

input:focus,
textarea:focus,
select:focus,
.w-input:focus {
    border-color: var(--wl-primary);
    box-shadow: 0 0 0 0.2rem var(--wl-focus-ring);
}

a {
    color: var(--wl-primary);
}

a:hover {
    color: var(--wl-primary-hover);
}

::selection {
    background: var(--wl-highlight-bg);
    color: var(--wl-highlight-text);
}

/* ============================================
   CONTACT PAGE CTA + FORM LAYOUT FIXES
   ============================================ */
.page-template-page-contact .section_cta {
    color: var(--wl-text);
}

.page-template-page-contact .section_cta .cta_title h2,
.page-template-page-contact .section_cta .cta_description,
.page-template-page-contact .section_cta .cta_description .text-lg {
    color: var(--wl-secondary) !important;
}

.page-template-page-contact .contact_form-block .form_form {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: auto;
}

.page-template-page-contact .contact_form-block .form_field-wrapper,
.page-template-page-contact .contact_form-block .form_input,
.page-template-page-contact .contact_form-block .w-input,
.page-template-page-contact .contact_form-block textarea.form_input {
    width: 100%;
}

.page-template-page-contact .contact_form-block .button-wrapper {
    width: 100%;
}

/* ============================================
   MOBILE NAV CONTRAST + OVERLAY REMOVAL
   ============================================ */
.w-nav-overlay {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
}

.w-nav-overlay [data-nav-menu-open] {
    background-color: transparent !important;
}

@media (max-width: 991px) {
    .nav_mobile .navbar_list {
        background-color: var(--wl-surface) !important;
        border-color: var(--wl-border) !important;
        box-shadow: 0 10px 28px var(--wl-shadow-soft);
    }

    .nav_mobile .nav_links,
    .nav_mobile .nav_links:lang(en) {
        color: var(--wl-secondary) !important;
    }

    .nav_mobile .nav_links:hover,
    .nav_mobile .nav_links.w--current {
        color: var(--wl-primary) !important;
    }
}

/* ============================================
   BLOG DETAIL SIDEBAR + STICKY CTA
   ============================================ */
.section_blog,
.section_blog .padding-global,
.section_blog .container-large,
.section_blog .content-wrap,
.blog-detail-layout,
.blog_detail-layout,
.blog-detail-sidebar,
.blog_detail-sidebar {
    overflow: visible !important;
}

.blog-detail-layout,
.blog_detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
}

.blog-detail-content {
    min-width: 0;
}

.blog-detail-sidebar,
.blog_detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: stretch;
    min-width: 0;
}

.blog-sidebar-meta {
    border: 1px solid var(--wl-border);
    border-radius: 1.25rem;
    padding: 1.25rem;
    background: var(--wl-surface);
    box-shadow: 0 12px 40px var(--wl-shadow-soft);
    display: grid;
    gap: 1rem;
}

.blog-author-profile {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.blog-author-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.blog-author-content {
    display: grid;
    gap: 0.25rem;
}

.blog-author-bio {
    margin: 0;
    color: var(--wl-muted-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.blog-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--wl-muted-text);
}

.blog-sidebar-meta-row {
    display: grid;
    gap: 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border);
}

.blog-sidebar-sticky,
.blog_detail-sticky-wrap {
    position: sticky;
    top: var(--weblish-sticky-offset, 96px);
    z-index: 1;
    align-self: start;
}

.blog-sticky-cta-banner,
.blog-end-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    color: var(--wl-surface);
    background-color: var(--wl-secondary);
    background-image: linear-gradient(140deg, var(--wl-cta-gradient-start), var(--wl-cta-gradient-end)), var(--wl-cta-bg-image);
    background-size: cover;
    background-position: center;
    box-shadow: 0 16px 50px var(--wl-shadow-medium);
}

.blog-sticky-cta-banner::before,
.blog-end-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--wl-accent) 28%, transparent), transparent 50%);
    pointer-events: none;
}

.blog-cta-banner-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.8rem;
}

.blog-sticky-cta-banner {
    padding: 1.35rem;
}

.blog-end-cta-banner {
    margin-top: 2rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.blog-end-cta-banner .blog-cta-banner-content {
    max-width: 52rem;
}

.blog-sticky-cta-banner h3,
.blog-end-cta-banner h2 {
    margin: 0;
    color: var(--wl-surface);
    line-height: 1.2;
}

.blog-sticky-cta-banner p,
.blog-end-cta-banner p {
    margin: 0;
    color: color-mix(in srgb, var(--wl-surface) 94%, transparent);
}

.blog-sticky-cta-banner .button,
.blog-end-cta-banner .button {
    width: fit-content;
    color: var(--wl-secondary);
    background: var(--wl-surface);
    border-color: var(--wl-surface);
}

/* Improve newsletter input readability in dark footer CTA area */
.footer_input {
    color: var(--wl-text) !important;
    background-color: var(--wl-surface) !important;
    border: 1px solid var(--wl-border) !important;
}

.footer_input::placeholder {
    color: var(--wl-muted-text) !important;
}

/* Footer logo visibility boost */
.footer_bottom-title-wrap img.footer_brand-image {
    filter: brightness(0) invert(1);
}

@media (max-width: 900px) {
    .blog-detail-layout,
    .blog_detail-layout {
        display: block;
    }

    .blog-detail-sidebar,
    .blog_detail-sidebar {
        margin-top: 1.5rem;
    }

    .blog-sidebar-sticky,
    .blog_detail-sticky-wrap {
        position: static;
    }
}