/* ==========================================================================
   RTL overrides — loaded only when dir="rtl" (see base.html)

   Most of the site mirrors automatically once <html dir="rtl"> is set:
   flexbox and grid both respect text direction for their inline axis in
   modern browsers, so .header-row, .hero-grid, .booking-columns,
   .engage-grid etc. all flip their visual order for free with zero CSS
   here.

   What DOESN'T auto-flip is anything using physical `left`/`right`
   positioning, left/right padding shorthand, or hardcoded `text-align:
   left` instead of logical properties — that's everything targeted below.
   Checked directly against the real base.css/header.css/hero.css/
   discover.css/services.css/footer.css/contact-booking.css/video-modal.css
   this time, not written from memory.
   ========================================================================== */

[dir="rtl"] body {
    font-family: 'Cairo', 'Inter', sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    font-family: 'Cairo', 'Baloo 2', sans-serif;
}

/* base.css — skip link: was left:-999px / focus left:0 */
[dir="rtl"] .skip-link {
    left: auto;
    right: -999px;
}
[dir="rtl"] .skip-link:focus {
    left: auto;
    right: 0;
}

/* contact-booking.css — form field icon: was left:14px, input padding-left:40px */
[dir="rtl"] .field-icon {
    left: auto;
    right: 14px;
}
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field textarea {
    padding-left: 14px;
    padding-right: 40px;
}
[dir="rtl"] .field-errors {
    padding-left: 0;
    padding-right: 40px;
}

/* contact-booking.css — honeypot: was left:-9999px, must stay off the
   correct edge regardless of direction */
[dir="rtl"] .hp-field {
    left: auto !important;
    right: -9999px !important;
}

/* contact-booking.css — booking columns: left borders used as dividers
   become right borders */
[dir="rtl"] .booking-widget--horizontal .booking-calendar {
    border-left: none;
    border-right: 1px solid var(--color-border);
    padding-left: 0;
    padding-right: 28px;
}
[dir="rtl"] .booking-times-form {
    border-left: none;
    border-right: 1px solid var(--color-border);
    padding-left: 0;
    padding-right: 28px;
}
@media (max-width: 900px) {
    [dir="rtl"] .booking-widget--horizontal .booking-calendar,
    [dir="rtl"] .booking-times-form {
        border-right: none;
        border-top: 1px solid var(--color-border);
        padding-right: 0;
        padding-top: 20px;
    }
}

/* contact-booking.css — calendar prev/next chevrons (&lsaquo; &rsaquo;) are
   bare text characters with a fixed visual direction; mirror the whole
   button so "previous" still points toward the start of time in RTL
   reading order without touching the template's HTML entities. */
[dir="rtl"] .cal-nav {
    transform: scaleX(-1);
}

/* footer.css — corner shards: swap which corner each one occupies AND
   its rotation, since the rotation is what makes each one fit its own
   corner (not just a mirrored position). */
[dir="rtl"] .corner-shard--left {
    left: auto;
    right: -10px;
    transform: rotate(180deg);
}
[dir="rtl"] .corner-shard--right {
    right: auto;
    left: -10px;
    transform: none;
}

/* video-modal.css — close button: was top:-44px; right:0 */
[dir="rtl"] .video-modal-close {
    right: auto;
    left: 0;
}
@media (max-width: 520px) {
    [dir="rtl"] .video-modal-close {
        right: auto;
        left: 4px;
    }
}

/* hero.css — decorative shards/bursts: mirror each element's own
   left/right offset to the opposite side, same magnitude, rotation left
   as-is (fine for small decorative confetti shapes). */
[dir="rtl"] .shard--tl { left: auto; right: 2%; }
[dir="rtl"] .shard--tr { right: auto; left: 4%; }
[dir="rtl"] .shard--bl { left: auto; right: 6%; }
[dir="rtl"] .shard--br { right: auto; left: 2%; }

[dir="rtl"] .burst--1 { left: auto; right: 6%; }
[dir="rtl"] .burst--2 { left: auto; right: -10%; }
[dir="rtl"] .burst--3 { left: auto; right: 34%; }

/* discover.css — video duration badge: was right:8px; bottom:8px */
[dir="rtl"] .duration-badge {
    right: auto;
    left: 8px;
}

/* services.css — service card body copy: was hardcoded text-align:left */
[dir="rtl"] .service-card {
    text-align: right;
}