/*
 * Dhivehi (Thaana) typography + RTL helpers.
 * Pair with /js/dhivehi-keys.js for input transliteration.
 */
@font-face {
    font-family: "MV Faseyha";
    src: url("/fonts/MV_Faseyha_Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "MV Faseyha";
    src: url("/fonts/MV_Faseyha_Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Apply to any element with the .thaana class (RTL + Thaana font). */
.thaana,
.thaana input,
.thaana textarea,
.thaana [contenteditable="true"] {
    font-family: "MV Faseyha", "Faruma", serif;
    direction: rtl;
    text-align: right;
    font-size: 1.25rem;
    line-height: 1.9;
}

/* Trix editor in Thaana mode — the editable surface lives inside the
   custom element, so target it directly. */
trix-editor.thaana {
    font-family: "MV Faseyha", "Faruma", serif;
    direction: rtl;
    text-align: right;
    line-height: 1.9;
    font-size: 1.25rem;
    unicode-bidi: plaintext;
}

/* Long-form Thaana article rendering (frontend show page). */
.thaana-article {
    font-family: "MV Faseyha", "Faruma", serif;
    direction: rtl;
    text-align: right;
    line-height: 2;
    font-size: 1.25rem;
}

.thaana-article p,
.thaana-article li,
.thaana-article blockquote {
    line-height: 2;
}

/* Headings inside Thaana article content */
.thaana-article h1 {
    font-size: 2.25rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.thaana-article h2 {
    font-size: 2rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.875rem !important;
}

.thaana-article h3 {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.thaana-article h4 {
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.625rem !important;
}

/* Hero h1 for blog posts - large, bold, distinctive */
h1.thaana {
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    font-family: "MV Faseyha", "Faruma", serif !important;
}

@media (min-width: 640px) {
    h1.thaana {
        font-size: 4rem !important;
    }
}

@media (min-width: 1024px) {
    h1.thaana {
        font-size: 4.5rem !important;
    }
}