/*
 * Bilingual Mawshoor newsletter pages.
 *
 * Both languages are rendered into the markup at once and the visible one is
 * chosen by `data-lang` on the wrapper, so nothing is fetched to switch.
 *
 * Class-scoped rather than id-scoped (the UAE page's own stylesheet predates
 * this and keeps its #mawshoor-uae rules) so any page can opt in by adding
 * `class="mawshoor-i18n"` to its wrapper.
 */

/* --------------------------------------------------------------------------
 * Language visibility
 *
 * Only the hidden side is styled, so the visible side keeps whatever display
 * its own classes give it (block, flex, inline) instead of being forced to one.
 * -------------------------------------------------------------------------- */
.mawshoor-i18n[data-lang="ar"] [data-ln="en"],
.mawshoor-i18n[data-lang="en"] [data-ln="ar"] {
    display: none !important;
}

/* Until data-lang resolves, hide the English copy so the Arabic page paints
   without the English one flashing underneath it. */
.mawshoor-i18n:not([data-lang="en"]) [data-ln="en"] {
    display: none !important;
}

/* --------------------------------------------------------------------------
 * Direction
 *
 * The site's global stylesheet is written for RTL, so LTR must be asserted.
 * -------------------------------------------------------------------------- */
.mawshoor-i18n[data-lang="ar"] {
    direction: rtl;
}

.mawshoor-i18n[data-lang="en"] {
    direction: ltr;
}

/* Blocks the page centres itself; kept explicit so the direction rules above
   cannot drag them to one edge. */
.mawshoor-i18n .text-center,
.mawshoor-i18n .mawshoor-i18n-center {
    text-align: center;
}

/* Arabic-only right-alignment in the markup would strand English text. */
.mawshoor-i18n[data-lang="en"] .text-right {
    text-align: left;
}

/* Email and phone read left-to-right in either language. */
.mawshoor-i18n input[type="email"],
.mawshoor-i18n input[type="tel"] {
    direction: ltr;
}

.mawshoor-i18n[data-lang="ar"] input[type="email"],
.mawshoor-i18n[data-lang="ar"] input[type="tel"] {
    text-align: right;
}

.mawshoor-i18n[data-lang="en"] input[type="email"],
.mawshoor-i18n[data-lang="en"] input[type="tel"] {
    text-align: left;
}

/* --------------------------------------------------------------------------
 * Language toggle
 * -------------------------------------------------------------------------- */
/* Sits at the top-left of the page, under the header logo.
 *
 * direction:ltr is set explicitly so the button stays on the left in Arabic too
 * — the wrapper is RTL there, and flex-start would otherwise throw it to the
 * right, away from the logo it is meant to sit beneath. */
/* The toggle shares the hero title's row rather than taking one of its own.
 *
 * It is taken out of flow and pinned left, so the title keeps its normal centred
 * position — a flex/grid row would have shifted the title off-centre by the
 * button's width, and in RTL would have thrown the button to the right. */
.mawshoor-title-row {
    position: relative;
}

.mawshoor-title-row .mawshoor-lang {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    direction: ltr;
}

/* The overlay only has room beside a 32px title on a wide screen. Below that the
   button returns to the flow and sits ABOVE the title, still left-aligned.
   The breakpoint is 991px rather than 767px because the longest title —
   "Mawshoor United Arab Emirates Edition" — already reaches the button well
   before phone widths. */
@media (max-width: 991px) {
    .mawshoor-title-row .mawshoor-lang {
        position: static;
        justify-content: center;
        margin-bottom: 1rem;
    }
}

.mawshoor-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #fff;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.mawshoor-lang-btn:hover,
.mawshoor-lang-btn:focus-visible {
    border-color: rgb(37 99 235);
    background: rgb(239 246 255);
    color: rgb(37 99 235);
}

.mawshoor-lang-btn svg {
    flex: none;
}