/* --- Consolidated Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700;900&display=swap');

/* --- START: Original Block 1 --- 
*/

/* --- STYLES THAT APPLY ON ALL SCREEN SIZES --- */
.hp-table .hp-row-first .promo_slider .slider .slides .slide_wrapper img {
    mix-blend-mode: unset !important;
}

.sneak-peek-container .sneak_peek .thumbnail {
    background-color: unset !important;
}

.promo_slider .cycle-caption p>span {
    display: none !important;
}

.hp-table .hp-row-first .promo_slider .slider .cycle-caption {
    top: 70% !important;
}

#BodyContainer>div>div.g960>div>div.g960.g960.g960.no_margin.g960.no_margin>div>div.hp-row.hp-row-first>div>div {
    padding-top: 70px !important;
}

#header_container .links,
#header_container .branding-search,
#feedback_bar {
    display: none !important;
}

#header.on-scroll {
    box-shadow: unset !important;
    background: unset !important;
    border-bottom: unset !important;
}


body.home .readMore,
body.home .event-card-button {
    display: inline-block !important;
    background-color: #b99362 !important;
    color: white !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-family: 'Raleway', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: background-color 0.2s ease !important;
    text-align: center;
    border: none !important;
}

body.home .readMore:hover,
body.home .event-card-button:hover {
    background-color: #a38258 !important;
    color: white !important;
}

.co_menu_item .parent a {
    font-family: 'Raleway', sans-serif !important;
    color: white !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: block;
}

.co_submenu_container .item,
.co_submenu_container .child_item {
    color: #2F3C4D !important;
    padding: 10px 20px !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
    background: none !important;
}

.co_submenu_container .item:hover,
.co_submenu_container .child_item:hover {
    background-color: #f0f2f5 !important;
}

td.co_menu_item[aid="2984977"] .parent a,
td.co_menu_item.donate_link .parent a {
    background-color: #b99362 !important;
    color: white !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

td.co_menu_item[aid="2984977"] .parent a:hover,
td.co_menu_item.donate_link .parent a:hover {
    background-color: #a38258 !important;
    color: white !important;
}

.site-nav-wrapper {
    background-color: #2F3C4D !important;
}

/* --- DESKTOP-ONLY STYLES (for screens wider than 768px) --- */
@media (min-width: 769px) {

    /* Hide the default mobile menu button on desktop */
    .cs-mobile-menu-open {
        display: none !important;
    }

    /* --- Main Navigation Bar Wrapper --- */
    .site-nav-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        display: flex !important;
        justify-content: space-evenly !important;
        align-items: center;
        padding: 10px 20px !important;
        box-sizing: border-box;
        font-family: 'Raleway', sans-serif;
    }

    #co_menu_container_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
    }

    .main_menu_container,
    .main_menu_container tbody,
    .main_menu_container tr {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: 100%;
    }

    .co_menu_item {
        padding: 0 !important;
        background: none !important;
        border: none !important;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .co_menu_item:hover .parent a {
        color: #b99362 !important;
    }

    /* --- Hide Unnecessary Elements --- */
    .co_menu_item .parent img,
    .co_menu_item_divider,
    .co_menu_item.home,
    #header_branding {
        display: none !important;
    }

    /* --- Dropdown Menu Styling --- */
    .co_menu_item .co_menu_content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1001;
        background-color: white !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        min-width: 220px;
    }

    .co_menu_item:hover .co_menu_content {
        display: block !important;
    }

    /* Add margin to donate button only on desktop */
    td.co_menu_item[aid="2984977"] .parent a,
    td.co_menu_item.donate_link .parent a {
        margin-left: 20px !important;
    }
}

/* --- END: Original Block 1 --- 
*/


/* --- START: Original Block 2 --- 
*/

/* * This CSS is designed to be injected into the target website.
 * It styles the new banner and hides the original content.
 */

/* Main container for the new banner we are injecting. */
.injected-candle-lighting-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 12px 20px !important;
    width: 100% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    flex-wrap: wrap !important;
    /* Allows items to wrap on smaller screens */
    gap: 10px !important;
    /* Adds space between items when they wrap */
    box-sizing: border-box !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Styling for the text content within the banner. */
.injected-candle-lighting-text {
    color: #2c3e50 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-right: 8px !important;
    text-align: center !important;
}

/* Styling for the date and time part of the text. */
.injected-candle-lighting-text .date-time {
    font-weight: 400 !important;
    margin-left: 5px !important;
}

/* Bolding the time. */
.injected-candle-lighting-text .time {
    font-weight: 900 !important;
}

/* Container for the candle icon. */
.injected-candle-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 10px !important;
}

/* SVG icon styling. */
.injected-candle-icon svg {
    width: 32px !important;
    height: 32px !important;
    fill: #2c3e50 !important;
}

/* "Learn More" link styling. */
.injected-learn-more {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

/* Arrow icon next to "Learn More". */
.injected-arrow {
    margin-left: 8px !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

/* This class will be added by JavaScript to the body to hide the original content. */
body.hide-original-content .hp_content_wrapper {
    display: none !important;
}

/* --- END: Original Block 2 --- 
*/


/* --- START: Original Block 3 --- 
*/

/* <-----------Departments---------> */

.sneak-peek-item .widget-1.sneak_peek .wrapper {
    overflow: hidden !important;
    border-radius: 20px !important;
}

/* --- Header Title Style --- */
#BodyContainer>div>div.g960>div>div.g960.g960.g960.g960.no_margin.g960.no_margin>div>div:nth-child(7)>div>div>div.widget_header>h5,
.header-title,
#BodyContainer>div>div.g960>div>div.g960.g960.g960.g960.g960.no_margin.g960.no_margin>div>div:nth-child(5)>div>div>div.widget_header>h5,
#BodyContainer>div>div.g960>div>div.g960.g960.g960.g960.g960.no_margin.g960.no_margin>div>div:nth-child(8)>div>div>div.widget_header>h5 {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 900 !important;
    /* Makes the font extra bold like the image */
    font-size: 36px !important;
    /* Adjust size as needed */
    text-transform: uppercase !important;
    /* Makes the text all caps */
    text-align: center !important;
    /* Centers the text */
    color: #2F3C4D !important;
    letter-spacing: 0px !important;
    /* Adds a little space between letters */
    margin-bottom: 20px !important;
    /* Adds space below the title */
}

@media (max-width: 1024px) {
    .mobile-menu-bottom-links {
        display: none !important;
    }
}

/* --- END: Original Block 3 --- 
*/


/* --- START: Original Block 4 --- 
*/

/*
 * IMPORTANT: All styles use !important to override CMS defaults.
 * Body styles have been removed as per user request to avoid conflicts with CMS.
 */
.hp-table .hp_subscribe {
    background: unset !important;
}

/* Outer container styling */
.hp-row.hp_subscribe {
    width: 100% !important;
    max-width: 100% !important;
    /* Max width for larger screens */
    background-color: #ffffff !important;
    /* White background for the form container */
    padding: 30px !important;
    border-radius: 12px !important;
    /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    /* Soft shadow */
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    /* Space between header and content */
    margin: 20px auto !important;
    /* Center the form and add vertical margin */
}

/* Widget wrapper and content */
.hp_subscribe .wrapper,
.hp_subscribe .widget_content {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Widget header styling */
.hp_subscribe .widget_header {
    text-align: left !important;
    /* Align text to left */
    margin-bottom: 20px !important;
}

.hp_subscribe .widget_header h5 {
    font-family: 'Raleway', sans-serif !important;
    /* Ensure Inter font for heading */
    font-size: 3.5rem !important;
    /* Larger font size for heading */
    font-weight: 900 !important;
    /* Bolder font weight */
    color: #333d47 !important;
    /* Darker text color */
    text-transform: uppercase !important;
    /* Uppercase text */
    letter-spacing: 0.05em !important;
    /* Slight letter spacing */
    margin: 0 !important;
    padding: 0 !important;
}

/* Form container */
#formContainer {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fieldset styling */
fieldset {
    border: none !important;
    /* Remove default fieldset border */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Stack labels and inputs vertically */
    gap: 15px !important;
    /* Space between form groups */
}

/* Label styling */
fieldset label {
    font-family: 'Inter', sans-serif !important;
    /* Ensure Inter font for labels */
    font-size: 0.9em !important;
    color: #555 !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
    /* Ensure labels are block-level */
}

/* Input field styling (First Name, Last Name, Email) */
.co_global_input {
    font-family: 'Inter', sans-serif !important;
    /* Ensure Inter font for inputs */
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #d1d9e6 !important;
    /* Light border */
    border-radius: 8px !important;
    /* Rounded corners */
    font-size: 1em !important;
    color: #333d47 !important;
    background-color: #f9fbfd !important;
    /* Very light background */
    box-sizing: border-box !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.co_global_input::placeholder {
    color: #99aab5 !important;
    /* Placeholder color */
}

.co_global_input:focus {
    border-color: #6a9eff !important;
    /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(106, 158, 255, 0.2) !important;
    /* Soft blue shadow on focus */
    outline: none !important;
    background-color: #ffffff !important;
    /* White background on focus */
}

/* Specific styling for the email input and subscribe button row */
.email-subscribe-group {
    display: flex !important;
    flex-direction: column !important;
    /* Stack on small screens by default */
    gap: 10px !important;
    /* Space between email and button */
    margin-top: 15px !important;
    /* Space above this group */
}

/* Media query for larger screens (e.g., tablets and desktops) */
@media (min-width: 600px) {
    .email-subscribe-group {
        flex-direction: row !important;
        /* Side-by-side on larger screens */
        align-items: center !important;
    }

    .email-subscribe-group #Email {
        flex-grow: 1 !important;
        /* Allow email input to take available space */
    }
}

/* Subscribe button styling */
.buttonStyle1 {
    background-color: #a68b6c !important;
    /* Brown color from the image */
    color: #ffffff !important;
    /* White text */
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    /* Rounded corners */
    font-size: 1em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    white-space: nowrap !important;
    /* Prevent text wrapping */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    /* Soft shadow */
    width: 100% !important;
    /* Full width on mobile */
}

@media (min-width: 600px) {
    .buttonStyle1 {
        width: auto !important;
        /* Auto width on larger screens */
    }
}

/* Small text below the button */
fieldset small {
    font-family: 'Inter', sans-serif !important;
    /* Ensure Inter font for small text */
    display: block !important;
    text-align: left !important;
    /* Align to the left */
    font-size: 0.85em !important;
    color: #777 !important;
    margin-top: 10px !important;
    /* Space above the text */
}

/* Hide recaptcha elements if they are not needed for visual design */
.js-recaptcha-input,
.js-recaptcha-wrapper {
    display: none !important;
}

/* Ensure response area is hidden by default but styled if shown */
#response {
    display: none !important;
    /* Hidden by default */
    height: auto !important;
    /* Allow height to adjust if content appears */
    margin-top: 15px !important;
    padding: 10px !important;
    background-color: #e6f7ff !important;
    border: 1px solid #91d5ff !important;
    border-radius: 5px !important;
    color: #1890ff !important;
    font-size: 0.9em !important;
    text-align: center !important;
}

/* --- END: Original Block 4 --- 
*/


/* --- START: Original Block 5 --- 
*/

/* --- MODERNIZED STYLES (BROWN & ORANGE THEME) --- */

/* This selector was mentioned as a potential issue, making a parent overflow visible.
  The carousel's CSS is now robust enough to handle this without causing scrollbars. */
#BodyContainer>div>div.g960>div>div.g960.g960.g960.g960.g960.no_margin.g960.no_margin>div>div:nth-child(5)>div>div {
    overflow: visible !important;
}

/* Basic styling for the widget header for context */
.widget-4.chabad_updates .widget_header h5 {
    font-size: 28px !important;
    font-weight: 300 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
    color: #333 !important;
}

/* Main container for the widget content (before carousel logic) */
.widget-4.chabad_updates .widget_content.index_format {
    display: flex !important;
    gap: 30px !important;
    align-items: stretch !important;
    /* FIXED: Corrected typo from 'adding' to 'padding' */
    padding-right: 60px;
    padding-left: 60px;
}

/* NEW: This rule will center the items when there are 3 or less */
.widget-4.chabad_updates .widget_content.static-grid {
    justify-content: center !important;
}

/* Hide the original separator line */
.widget-4.chabad_updates .separator {
    display: none !important;
}

/* Style for each event item as a card */
.widget-4.chabad_updates .item {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    flex-shrink: 0 !important;
    /* Prevent items from shrinking */
}

.widget-4.chabad_updates .item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Image container */
.widget-4.chabad_updates .item .icon {
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0;
}

.widget-4.chabad_updates .item .icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Container for content below the image */
.widget-4.chabad_updates .item-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    text-align: left !important;
    min-height: 0;
    /* Flexbox fix for overflow */
}

/* Style for the title text */
.widget-4.chabad_updates .item-content .title,
.widget-4.chabad_updates .item-content .title a {
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
    word-wrap: break-word !important;
    /* Fix for long text */
    word-break: break-word !important;
    /* Additional fix */
}

/* Style for the synopsis text */
.widget-4.chabad_updates .item-content .synopsis {
    color: #7f8c8d !important;
    font-size: 1em !important;
    margin-bottom: 20px !important;
    flex-grow: 1;
    /* Allows synopsis to grow and push button down */
    word-wrap: break-word !important;
    /* Fix for long text */
    word-break: break-word !important;
    /* Additional fix */
}

/* Style for the "Learn More" button */
.widget-4.chabad_updates .item-content .readMore {
    background-color: #a98c58 !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    text-align: center !important;
    font-weight: bold !important;
    display: inline-block !important;
    align-self: flex-start !important;
    margin-top: auto !important;
    /* Pushes the button to the bottom */
    transition: background-color 0.2s ease !important;
}

.widget-4.chabad_updates .item-content .readMore:hover {
    background-color: #8c734b !important;
}

/* --- CAROUSEL STYLES --- */
.widget-4.chabad_updates .carousel-container {
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.widget-4.chabad_updates .carousel-track-wrapper {
    overflow: hidden !important;
    /* CRITICAL: This clips the content */
    width: 100% !important;
    cursor: grab;
    /* Indicates the area is draggable */
}

.widget-4.chabad_updates .carousel-track-wrapper.dragging {
    cursor: grabbing;
    /* Indicates dragging is in progress */
}


/* The track that holds the items and moves */
.widget-4.chabad_updates .widget_content.carousel-active {
    flex-wrap: nowrap !important;
    /* Transition is now handled by JS to prevent animation during drag */
    gap: 30px !important;
    -webkit-user-select: none;
    /* Prevents text selection during drag */
    -ms-user-select: none;
    user-select: none;
    /* When carousel is active, we don't want to center the content */
    justify-content: flex-start !important;
}

/* The images inside should not be draggable on their own */
.widget-4.chabad_updates .carousel-active .item img {
    pointer-events: none;
}

/* Item sizing for desktop (3 items per row with 30px gap) */
.widget-4.chabad_updates .item {
    flex: 0 0 calc(33.333% - 20px) !important;
    /* (100% / 3) - (2 * 30px / 3) */
    height: auto;
    /* Allow content to dictate height, or set a min-height if needed for alignment */
}

/* Item sizing for tablet (2 items per row with 30px gap) */
@media (max-width: 900px) {
    .widget-4.chabad_updates .item {
        flex: 0 0 calc(50% - 15px) !important;
        /* (100% / 2) - (1 * 30px / 2) */
    }
}

/* --- Mobile Responsive Styles --- */
@media (max-width: 768px) {

    /* JS will set item width to 100% */
    .widget-4.chabad_updates .carousel-active {
        gap: 0 !important;
        /* No gap on mobile for seamless swipe */
    }
}

/* Mobile Responsive Overrides for Carousel behavior (max-width: 600px) */
@media (max-width: 600px) {

    /* NEW: Adjust padding on mobile for all views */
    .widget-4.chabad_updates .widget_content.index_format {
        padding: 20px !important;
        padding-bottom: 0 !important;
        /* Remove bottom padding to avoid double padding */
    }

    /* MODIFIED: Make the static grid behave like a swipeable carousel on mobile */
    .widget-4.chabad_updates .widget_content.static-grid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        /* Override desktop centering */
        flex-wrap: nowrap !important;
        /* Ensure items are in a single line */
        gap: 20px !important;
        padding-bottom: 20px !important;
        /* Add space for scrollbar */
    }

    .widget-4.chabad_updates .carousel-track-wrapper {
        overflow-x: auto !important;
        /* Enable horizontal scrolling */
        overflow-y: hidden !important;
        /* Prevent vertical scrolling */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        padding-bottom: 20px;
        /* Add some padding for scrollbar */
    }

    .widget-4.chabad_updates .widget_content.carousel-active {
        flex-wrap: nowrap !important;
        /* Ensure items stay in a single row */
        width: max-content !important;
        /* Allow content to define width for scrolling */
        transform: none !important;
        /* Disable JS transform for manual scrolling */
        gap: 20px !important;
        /* Add some gap between items on mobile */
        justify-content: flex-start !important;
        /* Align items to start for scroll */
        padding-left: 20px;
        /* Add padding at the start */
        padding-right: 20px;
        /* Add padding at the end */
    }

    .widget-4.chabad_updates .item {
        flex: 0 0 80vw !important;
        /* Set item width to 80vw on mobile, matching Upcoming Events */
    }
}

/* --- END: Original Block 5 --- 
*/