/*
 * ROCKAWAY ISLAMIC CENTER
 * MODERN WEB PLATFORM V1
 * Progressive enhancement / safe fallback architecture.
 */

:root {
    --ric-mwv1-duration:180ms;
    --ric-mwv1-ease:cubic-bezier(.2,.7,.2,1);
}


/* ============================================================
   VIEW TRANSITIONS
   ============================================================ */

@view-transition {
    navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration:var(--ric-mwv1-duration);
    animation-timing-function:var(--ric-mwv1-ease);
}


/* ============================================================
   CONTAINER QUERIES
   ============================================================ */

@supports (container-type:inline-size) {

    html.ric-modern-v1-ready .ric-quick-card,
    html.ric-modern-v1-ready .ric-feature,
    html.ric-modern-v1-ready .ric-panel,
    html.ric-modern-v1-ready .ric-scene-card,
    html.ric-modern-v1-ready .ric-category,
    html.ric-modern-v1-ready [data-ric-container] {
        container-type:inline-size;
    }

    @container (max-width:360px) {

        .ric-quick-card > strong {
            font-size:clamp(.88rem,5cqi,1rem);
            line-height:1.15;
        }

        .ric-quick-card > span:not(.ric-svg-3d) {
            font-size:clamp(.76rem,4.4cqi,.9rem);
        }

        .ric-feature > div h3 {
            font-size:clamp(1rem,6cqi,1.2rem);
        }

        .ric-feature > div p {
            font-size:clamp(.82rem,4.4cqi,.95rem);
        }

        .ric-scene-copy strong {
            font-size:clamp(.95rem,6cqi,1.16rem);
        }

        .ric-scene-copy .ric-scene-sub {
            font-size:clamp(.72rem,4.2cqi,.86rem);
        }
    }

    @container (max-width:260px) {

        .ric-quick-card .ric-svg-3d {
            scale:.9;
            transform-origin:center;
        }

        .ric-scene-copy .ric-scene-sub {
            display:none;
        }
    }
}


/* ============================================================
   ANCHOR POSITIONING
   ============================================================ */

.ric-native-anchor-popover {
    z-index:2147481000;
    max-inline-size:min(360px,calc(100vw - 24px));
}


@supports
    (anchor-name:--ric-anchor)
    and
    (position-anchor:--ric-anchor)
    and
    (top:anchor(bottom)) {

    .ric-native-anchor-popover {

        position:fixed;

        position-anchor:
            var(--ric-anchor-name);

        top:anchor(bottom);
        left:anchor(center);

        translate:-50% 10px;

        margin:0;

        position-try-fallbacks:
            flip-block,
            flip-inline;
    }
}


.ric-anchor-fallback {
    position:fixed !important;
    margin:0 !important;
    translate:-50% 10px;
    z-index:2147481000;
}


/* ============================================================
   AUTOMATIC CONTRAST
   ============================================================ */

.ric-auto-contrast-ready {
    color:var(--ric-auto-fg,inherit) !important;
}


@supports (color:contrast-color(white)) {

    .ric-auto-contrast-ready[data-ric-native-contrast="1"] {
        color:contrast-color(var(--ric-auto-bg)) !important;
    }

    .ric-auto-contrast-ready
    [data-ric-native-contrast="1"] {
        color:contrast-color(var(--ric-auto-bg)) !important;
    }
}


/* ============================================================
   MODERN FIELD SIZING
   ============================================================ */

@supports (field-sizing:content) {

    html.ric-modern-v1-ready
    textarea:not([data-ric-fixed-size]) {

        field-sizing:content;

        inline-size:100%;

        min-block-size:3.25rem;
        max-block-size:24rem;

        max-inline-size:100%;
    }


    html.ric-modern-v1-ready
    input[type="search"]:not([data-ric-fixed-size]),

    html.ric-modern-v1-ready
    [data-ric-auto-field] {

        field-sizing:content;

        min-inline-size:min(100%,12rem);
        max-inline-size:100%;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation:none !important;
    }

    .ric-native-anchor-popover,
    .ric-anchor-fallback {
        transition:none !important;
    }
}