.elementor-8670 .elementor-element.elementor-element-8d8b0dd{--display:flex;}/* Start custom CSS *//* 
    Bevs Black Books Brochure - Custom Styles
    
    INSTRUCTIONS FOR WORDPRESS/ELEMENTOR:
    1. This file contains the fonts, resets, and button styles.
    2. Copy and paste this into:
       Appearance > Customize > Additional CSS
       OR
       Elementor > Site Settings > Custom CSS
*/

/* --- FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

/* Apply to the specific root ID to avoid overwriting the whole site if unwanted.
   But forcing it here ensures the brochure looks correct. */
#bevs-brochure-root {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #0f172a;
    /* Slate 900 */
}

/* Heading Hierarchies */
#bevs-brochure-root h1,
#bevs-brochure-root h2,
#bevs-brochure-root h3,
#bevs-brochure-root h4 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: inherit;
}

/* --- RESETS (Crucial for WordPress) --- */

/* Reset Anchor Tags in Navigation */
#bevs-brochure-root nav a,
#bevs-brochure-root footer a {
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
}

#bevs-brochure-root nav a:hover,
#bevs-brochure-root footer a:hover {
    text-decoration: none !important;
    background: transparent !important;
}

/* Reset Buttons to remove Theme Defaults */
.bevs-btn-reset {
    appearance: none !important;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    margin: 0;
    text-decoration: none !important;
    line-height: inherit;
}

/* --- BUTTON STYLES (Explicit for reuse) --- */

/* Primary Action Button (Emerald) */
#bevs-brochure-root .bg-emerald-500 {
    background-color: #10b981 !important;
}

#bevs-brochure-root .bg-emerald-500:hover {
    background-color: #34d399 !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.3) !important;
}

/* Dark Button (Slate context) */
#bevs-brochure-root .bg-slate-900 {
    background-color: #0f172a !important;
}

#bevs-brochure-root .bg-slate-900:hover {
    background-color: #059669 !important;
    /* Emerald 600 hover */
}

/* Glass/Outline Button */
#bevs-brochure-root .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#bevs-brochure-root .bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* --- NAVIGATION STYLES --- */

/* Desktop Nav Links */
#bevs-brochure-root .nav-btn {
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 700;
    transition: color 0.2s ease;
    background: transparent !important;
}

/* Active State (Emerald) */
#bevs-brochure-root .nav-btn.active-tab {
    color: #059669 !important;
    /* emerald-600 */
}

/* Inactive State (Slate) */
#bevs-brochure-root .nav-btn:not(.active-tab) {
    color: #64748b !important;
    /* slate-500 */
}

#bevs-brochure-root .nav-btn:not(.active-tab):hover {
    color: #0f172a !important;
    /* slate-900 */
}


/* --- ANIMATIONS --- */

/* Fade In */
.bevs-section {
    display: none;
    width: 100%;
}

.bevs-section.active {
    display: block;
    animation: bevsFadeIn 0.8s ease-out forwards;
}

.bevs-fade-in {
    animation: bevsFadeIn 0.8s ease-out forwards;
}

@keyframes bevsFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Selection Color */
#bevs-brochure-root ::selection {
    background-color: #d1fae5;
    /* emerald-100 */
    color: #064e3b;
    /* emerald-900 */
}

/* Responsive Fixes */
@media (max-width: 768px) {
    #bevs-brochure-root {
        overflow-x: hidden;
    }
}/* End custom CSS */