/*
|--------------------------------------------------------------------------
| Montero Nava General Hours
|--------------------------------------------------------------------------
|
| Public stylesheet for the Montero Nava General Hours page.
|
| CDN:
| https://assets.mn-cdn.com/assets/css/websites/hours/style.css
|
*/


/* -------------------------------------------------------------------------
   Design Tokens
------------------------------------------------------------------------- */

:root {
    --mn-purple: #6a0dad;
    --mn-purple-bright: #7a2ee6;
    --mn-purple-medium: #7a6595;
    --mn-purple-soft: #b28cd9;

    --mn-text: #3b2f4a;
    --mn-text-soft: #7a6595;

    --mn-background: #faf7fc;
    --mn-surface: #ffffff;

    --mn-border: #eee3f7;
    --mn-border-strong: #e0cef3;

    --mn-closure-background: #f1e8fa;

    --mn-open: #358a3a;
    --mn-open-background: #f3fbf3;
    --mn-open-border: #b9dfbb;

    --mn-closed: #c9433f;
    --mn-closed-background: #fff7f6;
    --mn-closed-border: #efc4c2;

    --mn-radius-small: 10px;
    --mn-radius-medium: 14px;
    --mn-radius-large: 18px;

    --mn-shadow:
        0 8px 30px rgba(74, 46, 145, 0.08);

    --mn-shadow-hover:
        0 12px 34px rgba(74, 46, 145, 0.12);

    --content-width: 640px;
}


/* -------------------------------------------------------------------------
   Global
------------------------------------------------------------------------- */

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


html {
    min-height: 100%;
    background: var(--mn-background);
}


body {
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at top,
            rgba(122, 46, 230, 0.045),
            transparent 430px
        ),
        var(--mn-background);

    color: var(--mn-text);

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.5;

    opacity: 0;

    animation:
        mn-hours-fade-in 0.45s ease forwards;
}


@keyframes mn-hours-fade-in {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

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


a {
    color: var(--mn-purple);
}


a:hover {
    color: var(--mn-purple-bright);
}


/* -------------------------------------------------------------------------
   Header
------------------------------------------------------------------------- */

.site-header {
    width: 100%;

    padding:
        clamp(28px, 6vw, 48px)
        18px
        10px;

    text-align: center;
}


.header-inner {
    width: min(
        100%,
        var(--content-width)
    );

    margin: 0 auto;
}


.eyebrow {
    margin:
        0
        0
        2px;

    color: var(--mn-purple);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.site-header h1 {
    margin: 0;

    color: var(--mn-text);

    font-size:
        clamp(
            2rem,
            8vw,
            2.75rem
        );

    font-weight: 800;

    letter-spacing: -0.045em;

    line-height: 1.05;
}


.page-subtitle {
    margin:
        7px
        0
        18px;

    color: var(--mn-text-soft);

    font-size: 0.95rem;
    font-weight: 500;
}


/* -------------------------------------------------------------------------
   Status Badge
------------------------------------------------------------------------- */

.status-badge {
    display: inline-flex;

    min-height: 48px;

    align-items: center;
    justify-content: center;

    padding:
        10px
        20px;

    border:
        1px solid transparent;

    border-radius:
        var(--mn-radius-medium);

    font-size: 1.05rem;
    font-weight: 800;

    letter-spacing: 0.01em;

    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}


.status-loading {
    color: var(--mn-text-soft);

    background: var(--mn-surface);

    border-color: var(--mn-border);
}


.open-badge {
    color: var(--mn-open);

    background: var(--mn-open-background);

    border-color: var(--mn-open-border);
}


.closed-badge {
    color: var(--mn-closed);

    background: var(--mn-closed-background);

    border-color: var(--mn-closed-border);
}


.todays-hours {
    min-height: 24px;

    margin:
        10px
        0
        0;

    color: var(--mn-text);

    font-size: 0.94rem;
    font-weight: 500;
}


/* -------------------------------------------------------------------------
   Main
------------------------------------------------------------------------- */

.hours-main {
    width: 100%;

    flex: 1;

    padding:
        4px
        16px
        34px;
}


/* -------------------------------------------------------------------------
   Shared Panels
------------------------------------------------------------------------- */

.hours-box,
.closures-box {
    width: min(
        100%,
        var(--content-width)
    );

    margin:
        18px
        auto
        0;

    border:
        1px solid
        var(--mn-border);

    border-radius:
        var(--mn-radius-large);

    box-shadow:
        var(--mn-shadow);
}


/* -------------------------------------------------------------------------
   Weekly Hours
------------------------------------------------------------------------- */

.hours-box {
    padding:
        clamp(
            22px,
            5vw,
            30px
        );

    background:
        var(--mn-surface);
}


.section-heading,
.closure-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 15px;
}


.section-label {
    margin:
        0
        0
        3px;

    color:
        var(--mn-purple);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.section-heading h2,
.closure-heading h2 {
    margin: 0;

    color: var(--mn-text);

    font-size:
        clamp(
            1.2rem,
            4vw,
            1.4rem
        );

    font-weight: 750;

    letter-spacing: -0.02em;
}


/* -------------------------------------------------------------------------
   Hours List
------------------------------------------------------------------------- */

.hours-list {
    overflow: hidden;

    border-top:
        1px solid
        var(--mn-border);
}


.hours-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 22px;

    padding:
        15px
        2px;

    border-bottom:
        1px solid
        var(--mn-border);
}


.day {
    color: var(--mn-text);

    font-size: 0.98rem;
    font-weight: 650;
}


.time {
    color: var(--mn-text);

    font-size: 0.94rem;
    font-weight: 500;

    text-align: right;

    white-space: nowrap;
}


.time-separator {
    margin:
        0
        2px;

    color: var(--mn-text-soft);
}


.closed-time {
    color: var(--mn-closed);

    font-weight: 700;
}


/* -------------------------------------------------------------------------
   Timezone
------------------------------------------------------------------------- */

.timezone-panel {
    margin-top: 18px;

    padding:
        14px
        15px;

    background: var(--mn-background);

    border:
        1px solid
        var(--mn-border);

    border-radius:
        var(--mn-radius-small);
}


.timezone-title {
    margin-bottom: 7px;

    color:
        var(--mn-text-soft);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


#timezone-data {
    color:
        var(--mn-text-soft);

    font-size: 0.78rem;
}


.timezone-row {
    display: flex;

    justify-content: space-between;

    gap: 16px;

    padding: 2px 0;
}


.timezone-row strong {
    color: var(--mn-text);

    font-weight: 600;

    text-align: right;
}


/* -------------------------------------------------------------------------
   Closures
------------------------------------------------------------------------- */

.closures-box {
    padding:
        clamp(
            20px,
            5vw,
            26px
        );

    background:
        linear-gradient(
            145deg,
            #f5effb,
            var(--mn-closure-background)
        );

    border-color:
        var(--mn-border-strong);
}


.closure-list {
    overflow: hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.62
        );

    border:
        1px solid
        rgba(
            224,
            206,
            243,
            0.9
        );

    border-radius:
        var(--mn-radius-small);
}


.closure-item {
    display: grid;

    grid-template-columns:
        minmax(
            120px,
            auto
        )
        1fr;

    gap: 18px;

    align-items: center;

    padding:
        12px
        14px;

    border-bottom:
        1px solid
        rgba(
            224,
            206,
            243,
            0.8
        );
}


.closure-item:last-child {
    border-bottom: 0;
}


.closure-date {
    color: var(--mn-purple);

    font-size: 0.86rem;
    font-weight: 750;
}


.closure-name {
    color: var(--mn-text);

    font-size: 0.9rem;
    font-weight: 550;

    text-align: right;
}


.no-closures {
    margin: 0;

    padding:
        14px;

    color:
        var(--mn-text-soft);

    font-size: 0.9rem;
}


.closure-actions {
    margin-top: 14px;
}


.toggle-link {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        7px
        11px;

    color:
        var(--mn-purple);

    background:
        rgba(
            255,
            255,
            255,
            0.48
        );

    border:
        1px solid
        var(--mn-border-strong);

    border-radius:
        9px;

    font-size: 0.82rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}


.toggle-link:hover {
    color:
        var(--mn-purple-bright);

    background:
        rgba(
            255,
            255,
            255,
            0.85
        );

    border-color:
        var(--mn-purple-soft);

    transform:
        translateY(-1px);
}


/* -------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------- */

.site-footer {
    width: 100%;

    margin-top: auto;

    padding:
        15px
        12px
        17px;

    color:
        var(--mn-text-soft);

    font-size: 0.72rem;
}


.footer-inner {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap:
        5px
        7px;

    text-align: center;
}


.site-footer a {
    color:
        var(--mn-purple-soft);

    font-weight: 600;

    text-decoration: none;
}


.site-footer a:hover {
    color:
        var(--mn-purple);

    text-decoration: underline;

    text-underline-offset: 2px;
}


.footer-divider {
    opacity: 0.6;
}


/* -------------------------------------------------------------------------
   Focus Accessibility
------------------------------------------------------------------------- */

a:focus-visible {
    outline:
        3px solid
        rgba(
            122,
            46,
            230,
            0.25
        );

    outline-offset: 3px;
}


/* -------------------------------------------------------------------------
   Tablet / Mobile
------------------------------------------------------------------------- */

@media (max-width: 560px) {

    .site-header {
        padding-top: 28px;
    }


    .hours-main {
        padding-right: 12px;
        padding-left: 12px;
    }


    .hours-box,
    .closures-box {
        border-radius: 15px;
    }


    .hours-row {
        grid-template-columns: 1fr;

        gap: 3px;

        padding:
            13px
            1px;
    }


    .time {
        text-align: left;
    }


    .closure-item {
        grid-template-columns: 1fr;

        gap: 2px;
    }


    .closure-name {
        text-align: left;
    }


    .timezone-row {
        display: block;

        padding: 4px 0;
    }


    .timezone-row strong {
        display: block;

        margin-top: 1px;

        text-align: left;
    }

}


/* -------------------------------------------------------------------------
   Small Mobile
------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .site-footer {
        font-size: 0.66rem;
    }


    .footer-divider {
        display: none;
    }


    .footer-inner {
        flex-direction: column;

        gap: 2px;
    }

}


/* -------------------------------------------------------------------------
   Reduced Motion
------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}