/* =============================================================
   rtl.css — Right-to-left layout overrides
   ============================================================= */

/* -------------------------------------------------------------
   Base direction
   ------------------------------------------------------------- */

[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

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

[dir="rtl"] header {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

/* -------------------------------------------------------------
   Sidebar VU Meter — move to right side
   ------------------------------------------------------------- */

[dir="rtl"] .vu-panel {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--mid-grey);
}

[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 80px;
}

/* -------------------------------------------------------------
   Audio track controls
   ------------------------------------------------------------- */

[dir="rtl"] .track-controls {
    border-right: none;
    border-left: 1px solid var(--mid-grey);
}

/* -------------------------------------------------------------
   Hero timecode position
   ------------------------------------------------------------- */

[dir="rtl"] .hero-timecode {
    left: auto;
    right: 4rem;
}

/* -------------------------------------------------------------
   Accordion header
   ------------------------------------------------------------- */

[dir="rtl"] .acc-header {
    flex-direction: row-reverse;
}

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

[dir="rtl"] footer {
    flex-direction: row-reverse;
}

/* -------------------------------------------------------------
   Waveform mask — mirror direction
   ------------------------------------------------------------- */

[dir="rtl"] .waveform {
    mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
}