/*
Theme Name: Ridge Meadows Recycling Society
Description: Description
Author: Matt Seligman
Author URI: https://mattseligman.com/
Author Email: support@mattseligman.com
Version: 1.0.0
Text Domain: hello-elementor-child
Template: hello-elementor
*/

/* =============================================================================
   SCROLLBAR GUTTER - Prevent layout shift when scrollbar appears/disappears
   ============================================================================= */
html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* =============================================================================
   DEBUG: SOME HEADER STYLES STILL COMMENTED FOR TESTING
   ============================================================================= */

/* [DEBUG DISABLED] Add the effects to sub-navigation in header
#sub-navigation li ul {
    padding: 15px 0 0 0;
    box-shadow: #4277BC 0 6px 0 0;
}
*/

/* =============================================================================
   DEPOT HOURS - Styles moved to /assets/css/depot-hours.css
   ============================================================================= */

/* =============================================================================
   RESPONSIVE YOUTUBE/VIDEO EMBEDS
   Targets all YouTube iframes and ensures proper 16:9 aspect ratio
   ============================================================================= */

/* Universal video iframe styling */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 800px;
    height: auto;
}

/* CBC video wrapper - constrains iframe to native size */
.cbc-video-wrapper {
    max-width: 640px;
}

.cbc-video-wrapper iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

/* Legacy selectors for backwards compatibility */
.responsive-video,
.entry-content iframe[src*=youtube],
.activity_description iframe[src*=youtube],
article iframe[src*=youtube] {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 800px;
    height: auto;
}

.responsive-video iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

/* =============================================================================
   ELEMENTOR TEMPLATES IN ACF PAGE SECTIONS
   Make embedded templates break out of post-content width constraints
   ============================================================================= */
.elementor-widget-theme-post-content .elementor[data-elementor-type="container"] {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Ensure inner content respects template's own max-width */
.elementor-widget-theme-post-content .elementor[data-elementor-type="container"] > .e-con {
    max-width: var(--container-max-width, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
}

/* =============================================================================
   RANK MATH BREADCRUMBS STYLING
   ============================================================================= */
.rank-math-breadcrumb {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    font-weight: 300;
    color: #848485;
    padding: 5px 0;
    margin: 0;
    line-height: 1.4;
}

/* Breadcrumb container - reduce extra height */
.e-con:has(.rank-math-breadcrumb) {
    min-height: auto;
    padding-block: 0;
}

.rank-math-breadcrumb a {
    color: #848485;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rank-math-breadcrumb a:hover {
    color: #2d5f2e;
}

.rank-math-breadcrumb .separator {
    margin: 0 8px;
    color: #b8b8b8;
}

.rank-math-breadcrumb .last {
    color: #333;
    font-weight: 400;
}

/* =============================================================================
   WORDPRESS WYSIWYG IMAGE ALIGNMENT - Squircle Default
   All aligned images get squircle styling by default
   ============================================================================= */

/* Left aligned images - squircle by default */
.alignleft,
.wp-block-image.alignleft,
.wp-block-image .alignleft {
    float: left;
    margin: 0.5em 2em 1.5em 0;
    max-width: 45%;
    shape-outside: inset(0 round 22%);
    shape-margin: 1.25em;
}

.alignleft img,
.wp-block-image.alignleft img {
    border-radius: 22%;
    display: block;
}

/* Right aligned images - squircle by default */
.alignright,
.wp-block-image.alignright,
.wp-block-image .alignright {
    float: right;
    margin: 0.5em 0 1.5em 2em;
    max-width: 45%;
    shape-outside: inset(0 round 22%);
    shape-margin: 1.25em;
}

.alignright img,
.wp-block-image.alignright img {
    border-radius: 22%;
    display: block;
}

/* Center aligned images - squircle by default */
.aligncenter,
.wp-block-image.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    text-align: center;
}

.aligncenter img,
.wp-block-image.aligncenter img {
    border-radius: 22%;
}

.alignnone {
    margin: 1.5em 0;
}

/* Ensure images inside alignment wrappers are responsive */
.alignleft img,
.alignright img,
.aligncenter img {
    height: auto;
    max-width: 100%;
}

/* =============================================================================
   NO SQUIRCLE MODIFIER - Opt-out for square edges
   Add class no-squircle to remove rounded corners
   ============================================================================= */
.alignleft.no-squircle,
.alignright.no-squircle,
.aligncenter.no-squircle {
    shape-outside: none;
}

.alignleft.no-squircle img,
.alignright.no-squircle img,
.aligncenter.no-squircle img {
    border-radius: 0;
}

/* =============================================================================
   ELEMENTOR IMAGE UTILITY CLASSES
   Apply via: Advanced → CSS Classes
   ============================================================================= */

/* Float image right with squircle */
.float-image-right {
    float: right;
    margin: 0 0 1.5em 2em;
    max-width: 45%;
    shape-outside: inset(0 round 22%);
    shape-margin: 1.25em;
}

.float-image-right img {
    border-radius: 22%;
    display: block;
    width: 100%;
    height: auto;
}

/* Float image left with squircle */
.float-image-left {
    float: left;
    margin: 0 2em 1.5em 0;
    max-width: 45%;
    shape-outside: inset(0 round 22%);
    shape-margin: 1.25em;
}

.float-image-left img {
    border-radius: 22%;
    display: block;
    width: 100%;
    height: auto;
}

/* Size variants */
.float-image-right.small,
.float-image-left.small {
    max-width: 30%;
}

.float-image-right.large,
.float-image-left.large {
    max-width: 55%;
}

/* No squircle variant */
.float-image-right.no-squircle,
.float-image-left.no-squircle {
    shape-outside: none;
}

.float-image-right.no-squircle img,
.float-image-left.no-squircle img {
    border-radius: 0;
}

/* Clear float utility */
.clear-float::after {
    content: ;
    display: table;
    clear: both;
}

/* =============================================================================
   RESPONSIVE - Stack images on mobile
   ============================================================================= */
@media (max-width: 768px) {
    .alignleft,
    .alignright,
    .float-image-right,
    .float-image-left,
    .wp-block-image.alignleft,
    .wp-block-image.alignright {
        float: none;
        max-width: 100%;
        margin: 1.5em auto;
        display: block;
        shape-outside: none;
    }

    .alignleft img,
    .alignright img,
    .float-image-right img,
    .float-image-left img {
        margin: 0 auto;
        display: block;
    }
}

/* Reset margin/padding for rmrs-container inside rmrs-content */
.rmrs-content > .rmrs-container {
    margin: 0;
    padding: 0;
}

/* Reset margin/padding for rmrs-container inside ACF sections */
.rmrs-section > .rmrs-container {
    margin: 0;
    padding: 0;
}

/* =============================================================================
   NEWS CARD HEIGHT CONSISTENCY
   Scoped to news archive via custom class on Loop Grid widget
   ============================================================================= */

/* Line-clamp titles - news archive only */
.news-archive-grid .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Make news loop items fill grid cell height */
.news-archive-grid .e-loop-item {
    height: 100%;
}

/* Outer boxed container fills height - news only */
.news-archive-grid .e-loop-item .e-con-boxed {
    height: 100%;
}

/* Inner container becomes flex column - news only */
.news-archive-grid .e-loop-item .e-con-boxed > .e-con-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Content area grows to fill space - news only */
.news-archive-grid .e-loop-item .e-con-inner > div.e-con-full {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Button/date row pushed to bottom - news only */
.news-archive-grid .e-loop-item .e-con-inner > div.e-con-full > .e-con-full:last-child {
    margin-top: auto;
}

/* =============================================================================
   ACTIVITY CARD BACKGROUND IMAGES
   Ensures background images always cover properly in loop template 1425
   ============================================================================= */

.elementor-1425 .e-con-boxed.e-parent,
.elementor-1425 .e-con-boxed.e-parent > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* =============================================================================
   FIX: WordPress Block Embeds - Override height:auto conflict
   ============================================================================= */
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
    content: "";
    display: block;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
    padding-top: 56.25%;
}
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* =============================================================================
   DROPDOWN MENU TEXT WRAPPING
   ============================================================================= */
#sub-header .sub-menu.elementor-nav-menu--dropdown a.elementor-sub-item,
#top-header .sub-menu.elementor-nav-menu--dropdown a.elementor-sub-item {
    white-space: normal;
    word-wrap: break-word;
    min-width: 250px;
}

/* Last two nav items (Learn, News) - shift dropdowns left */
#sub-header .elementor-nav-menu > li:nth-last-of-type(2) > .sub-menu.elementor-nav-menu--dropdown {
    transform: translateX(-50px);
}

/* Very last nav item (News) - shift more */
#sub-header .elementor-nav-menu > li:nth-last-of-type(1) > .sub-menu.elementor-nav-menu--dropdown {
    transform: translateX(-40px);
}

#sub-header .elementor-nav-menu > li:nth-last-of-type(1) > .sub-menu.elementor-nav-menu--dropdown a.elementor-sub-item {
    min-width: 150px;
}


/* =============================================================================
   ELEMENTOR POPUPS - General styles
   ============================================================================= */

.elementor-popup-modal .dialog-message {
    display: flex;
    max-height: 90vh;
    max-width: 100vw;
    overflow: auto;
    padding: 0;
    width: 640px;
}

/* =============================================================================
   TEAM POPUP
   JS injects HTML with classes: .heading, .role, .bio
   Styles use Elementor's global typography/color variables
   ============================================================================= */

/* Name heading - uses primary typography */
.about-us-popup .heading .elementor-heading-title {
    font-family: var(--e-global-typography-primary-font-family, "Montserrat", sans-serif);
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.2;
    color: var(--e-global-color-d1063bb, #213C7A);
    margin-bottom: 0.25em;
}

/* Role - uses text typography */
.about-us-popup .role .elementor-text-editor {
    font-family: var(--e-global-typography-text-font-family, "Montserrat", sans-serif);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    color: var(--e-global-color-d1063bb, #213C7A);
    margin-bottom: 1em;
}

/* Bio - uses text typography, different color */
.about-us-popup .bio .elementor-text-editor {
    font-family: var(--e-global-typography-text-font-family, "Montserrat", sans-serif);
    font-size: 1em;
    font-weight: 400;
    line-height: 1.6;
    color: var(--e-global-color-text, #333333);
}

/* Photo styling */
.about-us-popup .dialog-message img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* =============================================================================
   "I'M HERE TO" TABS - Compact pills on mobile (like recycling guide filters)
   Target: .here-to-section (applied to Tabs widget container)
   ============================================================================= */

@media (max-width: 1200px) {
    /* Force the main tabs container to stack vertically (buttons on top, content below) */
    .here-to-section.e-n-tabs,
    .here-to-section .e-n-tabs {
        --n-tabs-direction: column;
        --n-tabs-title-gap: 0;
        --n-tabs-gap: 0;
        --n-tabs-title-padding-block-start: 8px;
        --n-tabs-title-padding-block-end: 8px;
        --n-tabs-title-padding-inline-start: 16px;
        --n-tabs-title-padding-inline-end: 16px;
        flex-direction: column;
    }

    /* Tab heading container - horizontal wrap like recycling guide filters */
    .elementor .here-to-section .e-n-tabs-heading {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        gap: 6px;
        justify-content: flex-start;
        margin-bottom: 1rem;
        height: auto;
        min-height: 0;
        width: 100%;
        overflow: visible;
    }

    /* Tab content - full width below buttons */
    .elementor .here-to-section .e-n-tabs-content {
        width: 100%;
        min-height: 0;
    }

    /* Switch border from left to top */
    .elementor .here-to-section .e-n-tabs-content > .e-con {
        --border-top-width: 1px;
        --border-left-width: 0px;
        border-width: 1px 0 0 0;
        padding-top: 1rem;
        padding-left: 0;
    }

    /* Each tab - compact pill that wraps naturally */
    .elementor .here-to-section .e-n-tab-title {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        height: auto;
        padding: 8px 16px;
        margin-block-start: 0;
        margin-block-end: 0;
        font-size: clamp(11px, 1.2vw, 14px);
        line-height: 1.3;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* Force inner text container */
    .elementor .here-to-section .e-n-tab-title > span,
    .elementor .here-to-section .e-n-tab-title-text {
        width: auto;
        flex: 0 0 auto;
    }

    /* Hide accordion arrow/chevron icon */
    .elementor .here-to-section .e-n-tab-title .e-n-tab-icon,
    .elementor .here-to-section .e-n-tab-title svg:not(.e-font-icon-svg) {
        display: none;
    }

    /* Remove Elementor's accordion elements */
    .elementor .here-to-section .e-n-tabs-mobile-footer,
    .elementor .here-to-section .e-n-menu-dropdown-toggle {
        display: none;
    }

    /* Remove first-tab top margin — not needed in horizontal pill layout */
    .elementor .here-to-section .e-n-tab-title:first-child {
        margin-block-start: 0;
    }
}

/* Tab states - plain text inactive, navy fill on hover/active */
.here-to-section .e-n-tab-title[aria-selected="false"]:not(:hover) {
    border: none;
    background: transparent;
}

.here-to-section .e-n-tab-title[aria-selected="true"] {
    border: none;
    background: #213C7A;
    color: #FFFFFF;
}

.here-to-section .e-n-tab-title:hover {
    border: none;
    background: #213C7A;
    color: #FFFFFF;
}

/* Desktop - ensure left border (default Elementor behavior) */
@media (min-width: 1201px) {
    .here-to-section .e-n-tabs-content > .e-con {
        --border-top-width: 0px;
        --border-left-width: 1px;
        border-width: 0 0 0 1px;
    }
}

/* =============================================================================
   FOOTER NAV MENU — 2-column grid on mobile/tablet
   ============================================================================= */
@media (max-width: 1024px) {
    #footerNavigation .elementor-nav-menu--main ul.elementor-nav-menu,
    #footerNavigation ul.elementor-nav-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 16px;
    }

    #footerNavigation ul.elementor-nav-menu li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

/* Footer nav — 2-column flow on small mobile */
@media (max-width: 425px) {
    #footerNavigation .elementor-nav-menu--main ul.elementor-nav-menu,
    #footerNavigation ul.elementor-nav-menu {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(5, auto);
        grid-auto-flow: column;
        gap: 8px 48px;
        justify-content: start;
    }
}

/* Hide Need Help? container on the homepage — Elementor display conditions
   don't work reliably inside footer templates (get_the_title() returns the
   template title instead of the current page title). */
body.hide-need-help .needHelpContainer {
    display: none;
}

/* =============================================================================
   SEARCH POPUP - Jet Search button colors
   Elementor's dynamic CSS doesn't generate inside popups,
   so we set the widget colors explicitly to match the homepage.
   ============================================================================= */
.popupOverlay .jet-ajax-search__submit[type="submit"] {
    background-color: #F05033;
    color: #fff;
}

.popupOverlay .jet-ajax-search__submit[type="submit"]:hover {
    background-color: #DF3213;
}

/* =============================================================================
   TEC SINGLE EVENT - Full width override
   TEC wraps content in .tribe-events-pg-template which constrains width.
   ============================================================================= */

.single-tribe_events .tribe-events-pg-template {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* =============================================================================
   LATEST NEWS LOOP - Equal height cards with title clamping
   ============================================================================= */

.latestNews .articleHeader .elementor-heading-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================================
   News Archive - Anti-snap for GSAP scroll-reveal and load-more
   Only active when JS adds .rmrs-animate-ready (fallback: items show normally)
   ============================================================================= */

.news-archive-grid.rmrs-animate-ready .e-loop-item:not(.rmrs-revealed) {
    opacity: 0;
    transform: translateY(40px);
}

/* =============================================================================
   LONG URL / EMAIL WRAP - Prevent horizontal overflow on mobile
   ============================================================================= */

.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
    overflow-wrap: break-word;
    word-break: break-word;
}