/*
 * ============================================================
 * BISDIG UJB — CUSTOM / INTERACTION LAYER
 * FASE 7 — JANABADRA DIGITAL
 *
 * Purpose:
 *   Small global interaction overrides only.
 *
 * Design rule:
 *   Do not duplicate component systems here.
 *   Do not introduce new brand colors.
 *   Do not use fixed widths that can create overflow.
 *
 * Identity:
 *   Red / Burgundy / Wine / Gold / Ivory / Charcoal
 * ============================================================
 */


/* ============================================================
   1. SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity:
        0;

    transform:
        translateY(40px);

    transition:
        opacity 800ms ease,
        transform 800ms ease;

    /*
     * Keep hidden content from producing accidental horizontal
     * overflow during the reveal animation.
     */
    max-width:
        100%;
}

.reveal.visible {
    opacity:
        1;

    transform:
        none;
}


/* ============================================================
   2. BACK TO TOP
   ============================================================ */

#scrollTop {
    position:
        fixed;

    right:
        max(
            16px,
            env(safe-area-inset-right)
        );

    bottom:
        max(
            16px,
            env(safe-area-inset-bottom)
        );

    z-index:
        var(--bisdig-z-overlay);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    min-width:
        46px;

    min-height:
        46px;

    padding:
        0;

    background:
        var(--color-red);

    color:
        var(--color-white);

    border:
        1px solid
        var(--color-red);

    border-radius:
        0.75rem;

    font-size:
        1.125rem;

    line-height:
        1;

    cursor:
        pointer;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(6px);

    transition:
        opacity var(--bisdig-transition-fast),
        visibility var(--bisdig-transition-fast),
        background-color var(--bisdig-transition-fast),
        border-color var(--bisdig-transition-fast),
        box-shadow var(--bisdig-transition-fast),
        transform var(--bisdig-transition-fast);

    box-shadow:
        var(--bisdig-shadow-red);

    -webkit-tap-highlight-color:
        transparent;
}

#scrollTop.show {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}

@media (hover: hover) and (pointer: fine) {

    #scrollTop:hover {
        background:
            var(--color-red-dark);

        border-color:
            var(--color-red-dark);

        transform:
            translateY(-3px);

        box-shadow:
            var(--bisdig-shadow-red-strong);
    }
}

#scrollTop:focus-visible {
    outline:
        3px solid
        rgba(var(--color-gold-rgb), 0.60);

    outline-offset:
        3px;
}


/* ============================================================
   3. SMOOTH ANCHOR
   ============================================================ */

html {
    scroll-behavior:
        smooth;
}


/* ============================================================
   4. GENERIC HOVER CARD
   ============================================================ */

.hover-card {
    min-width:
        0;

    max-width:
        100%;

    transition:
        transform var(--bisdig-transition-normal),
        box-shadow var(--bisdig-transition-normal);
}

@media (hover: hover) and (pointer: fine) {

    .hover-card:hover {
        transform:
            translateY(-4px);

        box-shadow:
            0 12px 30px
            rgba(var(--color-red-rgb), 0.08);
    }
}


/* ============================================================
   5. NEWS CARD IMAGE
   ============================================================ */

.berita-card {
    min-width:
        0;

    max-width:
        100%;

    overflow:
        hidden;
}

.berita-card img {
    display:
        block;

    max-width:
        100%;

    transition:
        transform var(--bisdig-transition-normal);
}

@media (hover: hover) and (pointer: fine) {

    .berita-card:hover img {
        transform:
            scale(1.05);
    }
}


/* ============================================================
   6. TABLE ROW HOVER
   ============================================================ */

table tr {
    transition:
        background-color var(--bisdig-transition-fast);
}

@media (hover: hover) and (pointer: fine) {

    table tr:hover td {
        background:
            var(--color-surface);
    }
}


/* ============================================================
   7. RESPONSIVE GLOBAL TWEAKS
   ============================================================ */

@media (max-width: 768px) {

    /*
     * Keep legacy .section-title supported, but make it fluid.
     */
    .section-title {
        font-size:
            clamp(1.5rem, 5vw, 1.75rem);
    }

    /*
     * Only apply this to the legacy hero class.
     * The main .bisdig-hero-section system is handled by pages.css.
     */
    .bisdig-hero {
        border-radius:
            0 0 24px 24px;
    }

    #scrollTop {
        right:
            max(
                14px,
                env(safe-area-inset-right)
            );

        bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );

        width:
            44px;

        height:
            44px;

        min-width:
            44px;

        min-height:
            44px;
    }
}


/* ============================================================
   8. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .reveal {
        transform:
            translateY(24px);
    }

    #scrollTop {
        width:
            44px;

        height:
            44px;

        min-width:
            44px;

        min-height:
            44px;

        border-radius:
            0.7rem;
    }
}


/* ============================================================
   9. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 360px) {

    .reveal {
        transform:
            translateY(18px);
    }

    .section-title {
        font-size:
            1.4rem;
    }
}


/* ============================================================
   10. TOUCH DEVICES
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    /*
     * Hover effects should never be required for interaction.
     */
    .hover-card:hover {
        transform:
            none;
    }

    .berita-card:hover img {
        transform:
            none;
    }

    #scrollTop:hover {
        transform:
            translateY(0);
    }

    #scrollTop {
        -webkit-tap-highlight-color:
            rgba(var(--color-red-rgb), 0.10);
    }
}


/* ============================================================
   11. REDUCED MOTION
   ============================================================ */

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

    html {
        scroll-behavior:
            auto !important;
    }

    .reveal {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

    #scrollTop,
    .hover-card,
    .berita-card img,
    table tr {
        transition:
            none;
    }

    #scrollTop:hover,
    .hover-card:hover,
    .berita-card:hover img {
        transform:
            none;
    }
}


/* ============================================================
   12. FORCED COLORS / HIGH CONTRAST
   ============================================================ */

@media (forced-colors: active) {

    #scrollTop {
        border:
            1px solid
            ButtonText;
    }

    #scrollTop:focus-visible {
        outline:
            2px solid
            Highlight;

        outline-offset:
            2px;
    }
}


/* ============================================================
   13. FINAL OVERFLOW SAFETY
   ============================================================ */

.reveal,
.hover-card,
.berita-card,
.berita-card img {
    max-width:
        100%;
}

.berita-card,
.hover-card {
    min-width:
        0;
}


/* ============================================================
   END
   ============================================================
 */
 /* ============================================================
   BISDIG LANGUAGE SWITCHER
   PHASE 4
============================================================ */

.bisdig-language-switcher {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    min-height: 38px;

    padding: 4px 6px;

    border:
        1px solid
        rgba(15, 20, 30, .10);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .88);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .07);

    white-space: nowrap;

    isolation: isolate;
}


.bisdig-language-option {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-width: 42px;

    min-height: 29px;

    padding:
        0 8px;

    border-radius: 999px;

    color:
        #5d6672;

    font-size: 10px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: .06em;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.bisdig-language-option:hover {

    color:
        #d71920;

    transform:
        translateY(-1px);

    text-decoration: none;
}


.bisdig-language-option.is-active {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #d71920,
            #8c0c12
        );

    box-shadow:
        0 6px 17px
        rgba(215, 25, 32, .25);
}


.bisdig-language-flag {

    display: inline-flex;

    align-items: center;

    font-size: 13px;

    line-height: 1;
}


.bisdig-language-code {

    line-height: 1;
}


.bisdig-language-divider {

    color:
        #aeb5be;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    user-select: none;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .bisdig-language-switcher {

        min-height: 35px;

        gap: 3px;

        padding: 3px 5px;
    }


    .bisdig-language-option {

        min-width: 38px;

        min-height: 28px;

        padding:
            0 6px;

        font-size: 9px;
    }


    .bisdig-language-flag {

        font-size: 12px;
    }

}


/* ============================================================
   DARK / DARK HEADER COMPATIBILITY
============================================================ */

.bisdig-header-dark
.bisdig-language-switcher {

    border-color:
        rgba(255, 255, 255, .12);

    background:
        rgba(255, 255, 255, .07);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .15);
}


.bisdig-header-dark
.bisdig-language-option {

    color:
        rgba(255, 255, 255, .72);
}


.bisdig-header-dark
.bisdig-language-option:hover {

    color:
        #fff;
}
/* ============================================================
   LANGUAGE SWITCHER — MOBILE PANEL
============================================================ */

.mobile-language-wrap {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding:
        14px 20px;

    border-bottom:
        1px solid
        rgba(
            var(--color-navy-rgb),
            .06
        );

    background:
        rgba(
            255,
            255,
            255,
            .72
        );
}


.mobile-language-wrap
.bisdig-language-switcher {

    min-height: 36px;

}


/* Mobile panel active language */

.mobile-language-wrap
.bisdig-language-option.is-active {

    transform:
        none;
}


/* Very small screen */

@media (max-width: 360px) {

    .mobile-language-wrap {

        padding-left: 16px;
        padding-right: 16px;

    }

}