/* ============================================================
   RTL + Dhivehi overrides — loaded ONLY when the active locale is dv.
   Bootstrap's own bootstrap.rtl.min.css handles grid/utilities/spacing;
   this file sets the Thaana font and fixes the custom theme's
   physical-direction rules that don't flip from dir="rtl" alone.
   ============================================================ */

html[dir="rtl"] {
    /* Dhivehi pages lead with Faruma (self-hosted Thaana face); Manrope catches Latin. */
    --thm-font: "Faruma", "Manrope", sans-serif;
}

/* Body sets the start (right) edge as the default; everything inherits it.
   We deliberately DON'T force `text-align:right` on `p`/`.lead` — that would
   override the inherited `center` of intentionally-centred blocks (page banners,
   CTA sections, empty states, cards…). Centred containers keep their centring,
   ordinary copy inherits right. Components hard-set to `text-align:left` in the
   LTR theme are flipped back to right individually further down. */
html[dir="rtl"] body {
    text-align: right;
}

/* ===== Flip horizontal chevrons / arrows so they point the RTL way =====
   "next / read more" arrows that point right in LTR must point left in RTL,
   and "back" arrows mirror the other way. */
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angles-right,
html[dir="rtl"] .fa-angles-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right-long,
html[dir="rtl"] .fa-arrow-left-long,
html[dir="rtl"] .fa-caret-right,
html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .fa-circle-chevron-right,
html[dir="rtl"] .fa-circle-arrow-right,
html[dir="rtl"] .fa-circle-arrow-left {
    transform: scaleX(-1);
}

/* Phone handset icons mirror under RTL (Dhivehi), site-wide — every fa-phone /
   fa-phone-slash, wherever it appears (footer, mobile nav, contact cards, etc.). */
html[dir="rtl"] .fa-phone,
html[dir="rtl"] .fa-phone-slash {
    transform: scaleX(-1);
}

/* Phone numbers stay left-to-right inside RTL so "+960 6640073" isn't reordered.
   Excludes the directory rows (.dir-line), where the link also wraps the icon —
   forcing LTR there would push the phone icon to the wrong side (away from the
   matching email icon). Their numbers are plain digits, so they don't need it. */
html[dir="rtl"] a[href^="tel:"]:not(.dir-line) {
    direction: ltr;
    display: inline-block;
}

/* ===== Home: cta-five decorative watermark is pinned to the right edge in LTR
   (right:-20px); move it to the start (left) under RTL so it doesn't sit on the
   right-aligned text. ===== */
html[dir="rtl"] .cta-five-img {
    right: auto;
    left: -20px;
}

/* ===== Home: cta-five "View Plan" CTA. The button is pushed to the far edge with
   margin-left:auto (a physical margin that doesn't flip for RTL) — under RTL that
   collapses the button so its label wraps into a tall pill, and leaves the icon
   floating off the right edge. Mirror it: push the button to the LEFT, never let
   it shrink/wrap, and flip the icon's accent bar to the inner (left) side. ===== */
html[dir="rtl"] .cta-five-button {
    margin-left: 0;
    margin-right: auto;
    flex-shrink: 0;
}
html[dir="rtl"] .cta-five-button .btn {
    white-space: nowrap;
}
html[dir="rtl"] .cta-five-card-icon {
    /* the 50px spacer between icon and content is margin-right in LTR — flip it so
       the icon sits flush to the (right) edge and the gap falls on the inner side */
    margin-right: 0;
    margin-left: 50px;
}
html[dir="rtl"] .cta-five-card-icon::before {
    right: auto;
    left: -20px;
}

/* about-two phone block: the icon→text gap (margin-left in LTR) flips for RTL. */
html[dir="rtl"] .about-two-author-content-contact {
    margin-left: 0;
    margin-right: 15px;
}

/* Notice / news / category / announcement cards carry Dhivehi titles — align to start edge. */
html[dir="rtl"] .notice-card,
html[dir="rtl"] .news-card,
html[dir="rtl"] .category-card,
html[dir="rtl"] .notice-title,
html[dir="rtl"] .category-card-title {
    text-align: right;
}

/* The hand-patched announcement accent border sits on the right in LTR; move it to the
   start (left) edge under RTL so the accent stays on the reading-start side. */
html[dir="rtl"] .announcement-card {
    border-right: 0;
    border-left: 4px solid var(--thm-primary, #0a9cb8);
}

/* Language switcher in the topbar. */
.topbar-lang a {
    font-weight: 600;
}

/* ===== Topbar: mirror the physical paddings/margins for RTL ===== */
html[dir="rtl"] .topbar-inner {
    /* The 60px breathing space belongs next to the language switcher, which is on
       the LEFT under RTL — flip it from the right. */
    padding-right: 0;
    padding-left: 60px;
}

html[dir="rtl"] .topbar-info {
    /* was 10px 10px 10px 40px (extra space on the left, next to socials) */
    padding-right: 40px;
    padding-left: 10px;
}

html[dir="rtl"] .topbar-info ul li + li {
    margin-left: 0;
    margin-right: 35px;
}

html[dir="rtl"] .topbar-socials a + a {
    margin-left: 0;
    margin-right: 25px;
}

html[dir="rtl"] .topbar-text,
html[dir="rtl"] .topbar-text a {
    /* icon sits to the right of its text under RTL */
    margin-left: 0;
    margin-right: 5px;
}

/* Topbar pill items: mirror the inter-pill gap under RTL. */
html[dir="rtl"] .topbar-right li.topbar-pill-item + li {
    margin-left: 0;
    margin-right: 9px;
}

/* ===== Breadcrumb separator: the chevron glyph must point the RTL way =====
   .page-breadcrumbs li+li::before uses FA chevron-right (\f054); use chevron-left. */
html[dir="rtl"] .page-breadcrumbs li + li::before {
    content: "\f053";
}

/* ===== Main nav: the inter-item gap is margin-left in LTR — mirror it ===== */
html[dir="rtl"] .main-menu .main-menu-list > li + li {
    margin-left: 0;
    margin-right: 50px;
}
@media (max-width: 1549px) {
    html[dir="rtl"] .main-menu .main-menu-list > li + li {
        margin-right: 30px;
    }
}

/* ===== Search box gap sits next to the menu — flip it ===== */
html[dir="rtl"] .search-box {
    margin-right: 0;
    margin-left: 30px;
}

/* ===== Complaint button: its edge breathing-room (margin-right:40px in LTR)
   must move to the start (left) edge under RTL, or it sticks to the edge. ===== */
html[dir="rtl"] .main-menu-right-button .btn-primary {
    margin-right: 0;
    margin-left: 40px;
}

/* ===== Components with an explicit text-align:left in the theme must read from
   the start (right) edge under RTL (the body default doesn't override them). ===== */
html[dir="rtl"] .bottom-footer,
html[dir="rtl"] .svc-group-head,
html[dir="rtl"] .portfolio-section .portfolio-card-meta,
html[dir="rtl"] .service-two-card-content {
    text-align: right;
}

/* ===== Accent lines on eyebrows / kickers / footer titles sit on the LEFT edge
   in LTR (padding-left + ::before left:0). Move them to the start (right) edge. ===== */
html[dir="rtl"] .section-tagline {
    padding-left: 0;
    padding-right: 46px;
}
html[dir="rtl"] .section-tagline::before {
    left: auto;
    right: 0;
}
/* ...but centred taglines put the line on TOP — keep those as-is. */
html[dir="rtl"] .section-title-box.text-center .section-tagline {
    padding-right: 0;
}
html[dir="rtl"] .section-title-box.text-center .section-tagline::before {
    left: 50%;
    right: auto;
}

html[dir="rtl"] .footer-widget-title::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] .vg-kicker {
    padding-left: 0;
    padding-right: 32px;
}
html[dir="rtl"] .vg-kicker::before {
    left: auto;
    right: 0;
}

/* ===== Councilor / WDC profile tagline: the quote-accent bar sits on the LEFT
   in LTR (border-left + padding-left) — move it to the start (right) edge. ===== */
html[dir="rtl"] .councilor-tagline {
    padding-left: 0;
    padding-right: 18px;
    border-left: 0;
    border-right: 3px solid var(--thm-primary);
}
html[dir="rtl"] .wdc-tagline {
    padding-left: 0;
    padding-right: 18px;
    border-left: 0;
    border-right: 3px solid var(--wdc);
}

/* ===== Visitor-guide drop cap: float to the start (right) edge, and lift it up —
   Thaana glyphs sit lower in the line box than Latin, so the Latin-tuned top
   margin drops it. A negative top margin + tighter line-height pulls it up. ===== */
html[dir="rtl"] .vg-lead::first-letter {
    float: right;
    font-size: 54px;
    line-height: 1;
    margin: -10px 0 0 12px;
}

/* ===== Visitor-guide TOC active-item accent border moves to the start edge. ===== */
html[dir="rtl"] .vg-toc a {
    border-left: 0;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .vg-toc a.active {
    border-right-color: var(--thm-primary);
}

/* ===== Opportunity cards (tenders / vacancies): the deadline is pushed to the
   far end with margin-left:auto in LTR — flip it so it sits at the start edge. ===== */
html[dir="rtl"] .opp-deadline {
    margin-left: 0;
    margin-right: auto;
}