/**
 * Depot Hours Styles
 *
 * Extracted from style.css for easier maintenance.
 * Controls #depotHours positioning, open/closed states, and responsive behavior.
 *
 * @since 2026-03-22
 */

/* =============================================================================
   DEPOT HOURS - Status Visibility
   ============================================================================= */

/* Hide status until JS adds class */
#current_hours_status {
    cursor: pointer;
    visibility: hidden;
}

#current_hours_status.is-open,
#current_hours_status.is-closed {
    visibility: visible;
}

/* Depot Hours Status - Open state */
#current_hours_status.is-open {
    border-color: #2E7D32;
}

/* Depot Hours Status - Closed state */
#current_hours_status.is-closed {
    border-color: #C62828;
}

/* =============================================================================
   AM/PM Superscript Styling
   ============================================================================= */

#current_hours_status sup,
#hours sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
    margin-left: 1px;
}

/* =============================================================================
   DEPOT HOURS - Main Container
   ============================================================================= */

/* Hidden initially for GSAP animation */
html #depotHours {
    visibility: hidden;
    position: absolute;
    top: 185px;
    transition: top 0.4s ease, right 0.4s ease, left 0.4s ease, margin 0.4s ease;
}

#depotHours.elementor-element {
    overflow: visible;
    width: fit-content;
    min-width: 180px;
    right: 5vw;
}

/* Down arrow centered below the depot hours bar — hidden when expanded */
#depotHours.expanded::after {
    display: none;
}

#depotHours::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--pine-green);
}

/* Arrow turns red when depot is closed — nudge 1px up to close mobile gap */
#depotHours:has(#current_hours_status.is-closed)::after {
    border-top-color: #C62828;
    bottom: -13px;
}

/* =============================================================================
   Status Paragraph Styling
   ============================================================================= */

#depotHours #current_hours_status.e-paragraph-base {
    display: flex;
    align-items: center;
    line-height: 1;
}

#depotHours #current_hours_status sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    line-height: 0;
}

/* =============================================================================
   Hours List Container
   ============================================================================= */

#depotHours #hours.elementor-element {
    display: none;
    flex-direction: column;
}

/* =============================================================================
   Elementor Editor Visibility & Layout
   Show depot hours when editing in Elementor.
   Override absolute positioning so the element flows in layout and responds
   to Elementor's responsive preview breakpoints (typography, sizing, etc.).

   Specificity notes:
   - Base rules use `html #depotHours` (0,1,0,1) and `#depotHours.elementor-element` (0,1,1,0)
   - Editor overrides add body.elementor-editor-active to beat them without !important
   - Mobile base uses `html body #depotHours` (0,1,1,2), editor adds class to beat at (0,1,2,2)
   ============================================================================= */

/* Beats: html #depotHours (0,1,0,1) → this is (0,1,1,2) */
html body.elementor-editor-active #depotHours,
html body.rmrs-elementor-editor #depotHours {
    visibility: visible;
    position: relative;
    top: auto;
    width: 100%;
    right: auto;
}

/* Beats: #depotHours.elementor-element (0,1,1,0) → this is (0,1,2,1) */
body.elementor-editor-active #depotHours.elementor-element,
body.rmrs-elementor-editor #depotHours.elementor-element {
    width: 100%;
    min-width: unset;
    right: auto;
}

/* Beats: #current_hours_status (0,1,0,0) → this is (0,2,1,1) */
body.elementor-editor-active #depotHours #current_hours_status,
body.rmrs-elementor-editor #depotHours #current_hours_status {
    visibility: visible;
}

/* Beats: #depotHours #hours.elementor-element (0,2,1,0) → this is (0,2,2,1) */
body.elementor-editor-active #depotHours #hours.elementor-element,
body.rmrs-elementor-editor #depotHours #hours.elementor-element {
    display: flex;
    visibility: visible;
}

/* Editor mobile/tablet: beats html body #depotHours (0,1,1,2) → this is (0,1,2,2) */
@media (max-width: 768px) {
    html body.elementor-editor-active #depotHours,
    html body.elementor-editor-active #depotHours.elementor-element,
    html body.rmrs-elementor-editor #depotHours,
    html body.rmrs-elementor-editor #depotHours.elementor-element {
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }
}

/* Depot Address and children visible in editor */
body.elementor-editor-active #depotAddress,
body.rmrs-elementor-editor #depotAddress,
body.elementor-editor-active #depotAddress .e-con,
body.rmrs-elementor-editor #depotAddress .e-con,
body.elementor-editor-active #depotAddress .elementor-element,
body.rmrs-elementor-editor #depotAddress .elementor-element {
    display: flex;
    visibility: visible;
}

/* =============================================================================
   Expanded State Toggle
   ============================================================================= */

#depotHours.expanded #hours.elementor-element {
    display: flex;
}

#depotHours.expanded #current_hours_status.e-paragraph-base {
    display: none;
}

/* =============================================================================
   Child Elements
   ============================================================================= */

/* Remove ALL child box-shadows inside #hours */
#depotHours #hours .e-con,
#depotHours #hours > .e-con > .e-con {
    box-shadow: none;
}

/* No extra margin needed - position is fixed */
body.has-alert #depotHours.elementor-element {
    margin-top: 0;
}

/* =============================================================================
   RESPONSIVE - Tablet
   ============================================================================= */

@media (max-width: 768px) {
    html #depotHours {
        right: 0;
        left: 0;
        margin-inline: auto;
        margin-top: -14px;
        padding-top: 18px;
    }

    /* Scrollable hours list on tablet / landscape phones */
    html body #depotHours.expanded #hours.elementor-element {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* Landscape with short viewport - tighter max-height */
@media (max-height: 500px) and (orientation: landscape) {
    html body #depotHours.expanded #hours.elementor-element {
        max-height: 40vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}

/* =============================================================================
   RESPONSIVE - Mobile
   ============================================================================= */

@media (max-width: 480px) {
    /* Collapsed: auto-size to status text */
    html body #depotHours,
    html body #depotHours.elementor-element {
        min-width: 120px;
        max-width: calc(100vw - 20px);
        width: auto;
        right: 0;
        left: 0;
        margin-inline: auto;
    }

    /* Expanded: room for full hours list */
    html body #depotHours.expanded,
    html body #depotHours.expanded.elementor-element {
        min-width: 260px;
        max-width: calc(100vw - 20px);
        width: auto;
        right: 0;
        left: 0;
        margin-inline: auto;
    }

    /* Scrollable hours list when it exceeds viewport */
    html body #depotHours.expanded #hours.elementor-element {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
}