/*
Theme Name: Let's Expresso by Snapdecode
Theme URI: https://www.letsexpresso.com
Author: Snapdecode Technologies
Author URI: https://snapdecode.com
Description: A custom WordPress theme for Let's Expresso by Snapdecode Technologies, featuring editorial post layouts, responsive pages, and theme appearance settings. Support: hello@snapdecode.com
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.7
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: lex-wp-theme
Tags: blog, lifestyle, fashion, education, two-columns, full-width-template
*/

/* Core theme structural resets */
#page .lex-mobile-hero-image,
#page .lex-mobile-hero-card { display: none; }
@media (max-width: 767px) {
    #page .elementor-4820 .elementor-element-57cb089 {
        min-height: 0; height: auto; padding: 0; gap: 0;
        flex-direction: column; align-items: stretch;
        background-image: none; background-color: #fff;
    }
    #page .elementor-4820 .elementor-element-57cb089::before { display: none; }
    #page .elementor-4820 .elementor-element-6fd66bc0 { order: -1; }
    #page .elementor-4820 .wcf-menu-hamburger {
        min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    #page .elementor-4820 .lex-mobile-hero-image {
        display: block; width: 100%; max-width: 100%;
        height: clamp(220px, 66.667vw, 360px);
        object-fit: cover; object-position: 65% center; margin: 0; order: 0;
    }
    #page .elementor-4820 .elementor-element-a14d6ce {
        display: none;
    }
    #page .lex-mobile-hero-card {
        display: block; order: 1; width: 100%;
        padding: 32px 24px 24px; background: #fff;
        border-bottom: 1px solid #e6e6e6;
    }
    #page #lex-mobile-hero-heading {
        margin: 0 0 20px; color: #121212; text-align: left;
        font: 400 clamp(28px, 7.2vw, 36px)/1.15 'Instrument Sans', sans-serif;
        letter-spacing: -0.5px;
    }
    #page #lex-mobile-hero-heading > span { color: #555; }
    #page .lex-hero-intro {
        margin: 0 0 24px; padding-left: 16px; max-width: 44ch;
        border-left: 3px solid #eab162; color: #555;
        font: 400 16px/1.5 'Instrument Sans', sans-serif;
    }
    #page .lex-hero-action {
        display: inline-flex; align-items: center; justify-content: center; gap: 16px;
        min-height: 48px; padding: 12px 24px; border: 1px solid #121212;
        border-radius: 50px; background: transparent; color: #121212;
        text-decoration: none; text-transform: uppercase;
        font: 500 13px/1.4 'Oak Sans', sans-serif;
    }
    #page .lex-hero-action:hover { background: #121212; color: #fff; }
    #page .lex-hero-action > span { font-size: 18px; line-height: 1; }
    #page .lex-hero-about { margin-top: 24px; border-top: 1px solid #e6e6e6; padding-top: 12px; }
    #page .lex-hero-about summary {
        display: flex; align-items: center; justify-content: space-between; gap: 16px;
        min-height: 44px; cursor: pointer; list-style: none; color: #555;
        font: 400 14px/1.5 'Instrument Sans', sans-serif;
    }
    #page .lex-hero-about summary::-webkit-details-marker { display: none; }
    #page .lex-hero-about summary::after { content: '+'; font-size: 22px; color: #121212; }
    #page .lex-hero-about[open] summary::after { content: '−'; }
    #page .lex-hero-about p { margin: 16px 0; color: #555; font: 400 16px/1.5 'Instrument Sans', sans-serif; }
    #page .lex-hero-about > a { color: #121212; font-size: 14px; text-underline-offset: 3px; }
    #page .lex-mobile-hero-card a:focus-visible,
    #page .lex-hero-about summary:focus-visible { outline: 2px solid #121212; outline-offset: 4px; }
    #page .elementor-133 .elementor-element-5f1c4148 { --padding-top: 24px; padding-top: 0; }

}

.lex-site-sidebar .lex-sidebar-brand { color: #18292f; font-family: 'League Spartan', sans-serif; font-size: 32px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.lex-site-sidebar .lex-sidebar-section { margin-top: 28px; }
.lex-site-sidebar .side--off-logo { padding-bottom: 24px; }
.lex-site-sidebar .side--off-desc { padding-bottom: 0; }
.lex-site-sidebar { overscroll-behavior: contain; z-index: 100000; max-width: 100vw; }
.lex-site-sidebar .lex-sidebar-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lex-site-sidebar .lex-sidebar-menu a { color: #202020; font-size: 16px; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.lex-site-sidebar .lex-sidebar-menu a:hover { color: #946331; }
.lex-site-sidebar .side--off-media ul { display: flex; flex-wrap: wrap; gap: 18px; }
.lex-site-sidebar .side--off-media li a { display: inline-flex; align-items: center; padding: 0; font-size: 16px; }
.lex-site-sidebar a:focus-visible { outline: 2px solid #946331; outline-offset: 4px; }
.lex-post-fallback { display: block; width: 100%; object-fit: cover; object-position: center; }
.wcf-post .thumb > a { display: block; width: 100%; height: 100%; }
.wcf-post .thumb .lex-post-fallback { height: 100%; }
.lex-listing-empty { padding: 24px 0; }
[data-lex-listing] { scroll-margin-top: 100px; }
[data-lex-listing][aria-busy="true"] .wcf-posts { opacity: 0.55; }

#page .lex-post-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#page .lex-post-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; box-sizing: border-box; width: 45px; min-width: 45px; height: 45px;
    padding: 0; line-height: 1; white-space: nowrap; text-align: center;
}
#page .lex-post-pagination .page-numbers.prev,
#page .lex-post-pagination .page-numbers.next {
    width: auto; padding: 0 18px; border-radius: 999px;
}
#page .lex-post-pagination .page-numbers.dots {
    width: auto; min-width: 24px; border: 0; background: transparent;
}

/* All Articles uses an image column and one content column, including on narrow screens. */
.elementor-element-5916d87d .wcf-posts { grid-template-columns: minmax(0, 1fr); }
.elementor-element-5916d87d .wcf-post,
.elementor-element-5916d87d .content { min-width: 0; }
.elementor-element-5916d87d .thumb { max-width: 100%; }
.elementor-element-5916d87d .thumb > a { display: block; width: 100%; height: 100%; }
.elementor-element-5916d87d .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
    #lex-preloader .whirlpool,
    #lex-preloader .whirlpool::before,
    #lex-preloader .whirlpool::after {
        animation: none;
    }
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* Ensure smooth-wrapper and smooth-content flow naturally */
#smooth-wrapper {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

#smooth-content {
    width: 100%;
    position: relative;
}

/* Ensure Click to Chat WhatsApp icon stays fixed at bottom right */
#ht-ctc-chat,
.ht-ctc,
.ht-ctc-chat {
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
    top: auto !important;
    cursor: pointer !important;
    z-index: 99999999 !important;
    --side: right !important;
}

#ht-ctc-chat img {
    height: 50px !important;
    width: auto !important;
    display: block !important;
}

/* Prevent FOUC for reveal animation images so they start hidden until GSAP ScrollTrigger reveals them */
.elementor-widget-wcf--image[data-settings*='"wcf-image-animation":"reveal"'] .wcf--image {
    visibility: hidden;
}

/* Keep Popup Maker modal overlay hidden in default state */
#pum-4321, 
.pum-container, 
.pum-overlay, 
#popmake-4321, 
.pum,
.pum-modal {
    display: none !important;
}

/* Fallback post card styling */
.lex-post-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.lex-post-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lex-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Local Oak Sans Webfonts */
@font-face {
    font-family: 'Oak Sans';
    src: url('assets/fonts/OakSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oak Sans';
    src: url('assets/fonts/OakSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oak Sans';
    src: url('assets/fonts/OakSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oak Sans';
    src: url('assets/fonts/OakSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}