/* public/assets/css/ltr.css
 *
 * Left to right corrections.
 *
 * The stylesheets in this project were written right to left first, so a
 * handful of rules pin things to a specific screen edge rather than to the
 * start or end of the reading direction. Flipping those in place would change
 * how the Hebrew brand renders, which is exactly what must not happen, so the
 * corrections live here behind [dir="ltr"] selectors instead. Nothing in this
 * file can match on a Hebrew page.
 *
 * Load this last, after common.css / modern.css / landing.css / editor.css.
 *
 * Rules that set left and right to the same value, that centre with left:50%,
 * or that stretch edge to edge are direction neutral and are deliberately
 * absent here. So are the floating WhatsApp and accessibility buttons: bottom
 * right and bottom left are the same convention in both directions.
 */

/* ===========================================================
   1. Shared chrome (common.css)
   =========================================================== */

/* The skip link belongs at the start of the reading order. */
[dir="ltr"] .skip-link {
    right: auto;
    left: 10px;
}

/* Overlay close buttons sit top right in LTR. */
[dir="ltr"] .search-close-btn {
    left: auto;
    right: 30px;
}

/* ===========================================================
   2. Landing template (landing.css)
   =========================================================== */

/* Editor controls float on the far end of the header. */
[dir="ltr"] .header-controls {
    left: auto;
    right: 10px;
}

/* ===========================================================
   3. Modern template (modern.css)
   =========================================================== */

/* Editor hint bubble on the answer block. CSS cannot call the translation
   layer, so the English wording is set here rather than through t(). */
[dir="ltr"] body[contenteditable="true"] .answer-block-section::after {
    content: "AI tip: write plain facts, not marketing copy.";
    left: auto;
    right: 10px;
}

/* Settings gear anchored to the corner of the hero button on mobile. */
@media (max-width: 767.98px) {
    [dir="ltr"] body[contenteditable="true"] .hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle,
    [dir="ltr"] body[contenteditable="true"] .video-hero-section .d-inline-block.position-relative > .btn-dark.rounded-circle {
        left: auto !important;
        right: -10px !important;
    }
}

/* ===========================================================
   4. Builder interface (editor.css)
   =========================================================== */

/* The sidebar moves to the left, so its dividing border moves with it. */
[dir="ltr"] .sidebar {
    border-left: none;
    border-right: 1px solid #dee2e6;
}

/* Sidebar menu rows read from the left, icon spacing follows. */
[dir="ltr"] .menu-btn {
    text-align: left;
}
[dir="ltr"] .menu-btn i {
    margin-left: 0;
    margin-right: 10px;
}

/* Save confirmation toast. */
[dir="ltr"] #save-toast {
    left: auto;
    right: 30px;
}

/* Per section control cluster. */
[dir="ltr"] .section-wrapper .section-controls {
    left: auto !important;
    right: 20px !important;
}

/* Floating exit button shown in preview mode. */
[dir="ltr"] #exitPreviewBtn {
    left: auto;
    right: 20px;
}

/* Off canvas sidebar slides in from the left instead of the right. */
@media (max-width: 991.98px) {
    [dir="ltr"] .sidebar {
        right: auto;
        left: 0;
        transform: translateX(-100%);
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    }
    [dir="ltr"] .sidebar.open {
        transform: translateX(0);
    }
}

/* ===========================================================
   5. Admin tables (admin.css)
   =========================================================== */

@media (max-width: 767.98px) {
    [dir="ltr"] td::before {
        margin-left: 0;
        margin-right: 10px;
    }
}