/**
 * MENA Rights Group — Post Content Typography
 * ─────────────────────────────────────────────────────────────────────────
 * Scope   : All migrated post content rendered inside .mrg-content
 *           (Cases, News, Publications, Documents) and Elementor's
 *           .elementor-widget-theme-post-content widget.
 *
 * Covers  : headings, paragraphs, lists, blockquotes, tables, images,
 *           figure captions, inline code, horizontal rules, links,
 *           definition lists, call-out boxes, and Arabic RTL overrides.
 *
 * Languages: EN/FR (LTR) + AR (RTL via [lang="ar"] and .rtl body class)
 *
 * Stack   : Elementor Pro + WPML + ACF Pro + custom CPTs
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1.  DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --mrg-purple:        #543192;
    --mrg-purple-light:  #322256;
    --mrg-purple-pale:   #ede8f5;
    --mrg-purple-border: #b09fd1;

    /* Content text */
    --mrg-text:          #414141;
    --mrg-text-muted:    #4b5563;
    --mrg-text-light:    #6b7280;

    /* Backgrounds */
    --mrg-bg-light:      #f9fafb;
    --mrg-bg-quote:      #f4f0fa;
    --mrg-border:        #e5e7eb;

    /* Alerts / call-outs */
    --mrg-info-bg:       #eff6ff;
    --mrg-info-border:   #93c5fd;
    --mrg-warn-bg:       #fffbeb;
    --mrg-warn-border:   #fcd34d;

    /* Typography scale */
    --mrg-font-body:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mrg-font-ar:       "Tajawal", "Noto Sans Arabic", "Tahoma", "Arial", sans-serif;

    --mrg-size-h1:       2rem;       /* 32px */
    --mrg-size-h2:       1.5rem;     /* 24px */
    --mrg-size-h3:       1.25rem;    /* 20px */
    --mrg-size-h4:       1.1rem;     /* ~17.6px */
    --mrg-size-h5:       1rem;       /* 16px */
    --mrg-size-h6:       .9rem;      /* ~14.4px */
    --mrg-size-body:     1rem;       /* 16px */
    --mrg-size-small:    .875rem;    /* 14px */
    --mrg-size-caption:  .8125rem;   /* 13px */

    --mrg-line-height:   1.5 /*1.75*/;
    --mrg-line-tight:    1.2 /*1.35*/;
    --mrg-content-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2.  CONTENT WRAPPER
       Applies to the Elementor theme post-content widget and any template
       that wraps Drupal-migrated content.
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content,
.mrg-article-content,
.elementor-widget-theme-post-content .elementor-widget-container {
    font-family:    var(--mrg-font-body);
    font-size:      var(--mrg-size-body);
    line-height:    var(--mrg-line-height);
    color:          var(--mrg-text);
    max-width:      var(--mrg-content-width);
    /* Justified text as specified in brief item 41 */
    text-align:     justify;
    /* Prevent orphaned hyphenation artefacts from Drupal HTML */
    overflow-wrap:  break-word;
    word-break:     break-word;
    -webkit-hyphens: auto;
    hyphens:        auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3.  HEADINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content h1,
.mrg-content h2,
.mrg-content h3,
.mrg-content h4,
.mrg-content h5,
.mrg-content h6,
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content h5,
.elementor-widget-theme-post-content h6 {
    font-family:    var(--mrg-font-body);
    font-weight:    700;
    line-height:    var(--mrg-line-tight);
    color:          var(--mrg-text);
    /* Headings should not be justified */
    text-align:     start;
    margin-top:     1.75em;
    margin-bottom:  .5em;
}

/* First heading in the content area gets no top margin */
.mrg-content > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.mrg-content h1 { font-size: var(--mrg-size-h1); }

.mrg-content h2 {
    font-size:      var(--mrg-size-h2);
    padding-bottom: .3em;
    border-bottom:  2px solid var(--mrg-purple-border);
}

.mrg-content h3 {
    font-size:  var(--mrg-size-h3);
    color:      var(--mrg-purple);
}

.mrg-content h4 { font-size: var(--mrg-size-h4); }
.mrg-content h5 { font-size: var(--mrg-size-h5); text-transform: uppercase; letter-spacing: .05em; }
.mrg-content h6 { font-size: var(--mrg-size-h6); color: var(--mrg-text-muted); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   4.  PARAGRAPHS
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content p {
    margin-top:    0;
    margin-bottom: 1.25em;
}

/* Drupal often exports trailing <br> pairs — collapse them */
.mrg-content br + br {
    display: none;
}

/* Lead paragraph (first <p> or .mrg-lead) */
.mrg-content > p:first-of-type,
.mrg-content .mrg-lead {
    font-size:   1.0625rem;
    color:       var(--mrg-text-muted);
    line-height: 1.8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5.  LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content a {
    color:           var(--mrg-purple);
    text-decoration: underline;
    text-decoration-color: var(--mrg-purple-border);
    text-underline-offset: 3px;
    transition:      color .18s, text-decoration-color .18s;
}

.mrg-content a:hover,
.mrg-content a:focus-visible {
    color:                 var(--mrg-purple-light);
    text-decoration-color: var(--mrg-purple-light);
    outline:               none;
}

/* External links — visual cue */
.mrg-content a[target="_blank"]::after {
    content:    " ↗";
    font-size:  .75em;
    opacity:    .65;
    display:    inline-block;
    margin-left: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6.  UNORDERED + ORDERED LISTS
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content ul,
.mrg-content ol {
    margin:      0 0 1.25em 0;
    padding-left: 1.6em;
    text-align:  start; /* lists should not be justified */
}

/* RTL: flip indent to right */
[lang="ar"] .mrg-content ul,
[lang="ar"] .mrg-content ol,
.rtl .mrg-content ul,
.rtl .mrg-content ol {
    padding-left:  0;
    padding-right: 1.6em;
}

.mrg-content ul  { list-style-type: disc; }
.mrg-content ol  { list-style-type: decimal; }

/* Nested */
.mrg-content ul ul,
.mrg-content ol ul { list-style-type: circle; }
.mrg-content ul ul ul,
.mrg-content ol ul ul { list-style-type: square; }
.mrg-content ul ol,
.mrg-content ol ol { list-style-type: lower-alpha; }

.mrg-content li {
    margin-bottom: .45em;
    line-height:   var(--mrg-line-height);
}

.mrg-content li > p {
    margin-bottom: .5em;
}

/* Nested list spacing */
.mrg-content li > ul,
.mrg-content li > ol {
    margin-top:    .4em;
    margin-bottom: .4em;
}

/* ── Custom bullet style for top-level <ul> (brand purple dot) ── */
.mrg-content > ul > li::marker,
.mrg-content .mrg-list > li::marker {
    color: var(--mrg-purple);
}

/* ── Numbered list counter colour ── */
.mrg-content > ol > li::marker {
    color:       var(--mrg-purple);
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7.  DEFINITION LISTS
       Common in Drupal content for case profile fields that were exported
       as <dl><dt>Field</dt><dd>Value</dd></dl>
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content dl {
    margin:        0 0 1.25em 0;
    display:       grid;
    grid-template-columns: minmax(160px, max-content) 1fr;
    gap:           .3em 1em;
    align-items:   baseline;
}

.mrg-content dt {
    font-weight:  700;
    color:        var(--mrg-purple);
    font-size:    var(--mrg-size-small);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mrg-content dd {
    margin:  0;
    padding: 0;
    color:   var(--mrg-text);
}

/* Stack on small screens */
@media (max-width: 480px) {
    .mrg-content dl {
        grid-template-columns: 1fr;
        gap: .1em;
    }
    .mrg-content dd { padding-left: .75em; margin-bottom: .5em; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8.  BLOCKQUOTES
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content blockquote {
    margin:           1.5em 0;
    padding:          1rem 1.25rem 1rem 1.5rem;
    background:       var(--mrg-bg-quote);
    border-left:      4px solid var(--mrg-purple);
    border-radius:    0 6px 6px 0;
    color:            var(--mrg-text-muted);
    font-style:       italic;
    line-height:      1.7;
}

/* RTL blockquotes flip the border */
[lang="ar"] .mrg-content blockquote,
.rtl .mrg-content blockquote {
    border-left:   none;
    border-right:  4px solid var(--mrg-purple);
    border-radius: 6px 0 0 6px;
    padding:       1rem 1.5rem 1rem 1.25rem;
}

.mrg-content blockquote p:last-child { margin-bottom: 0; }

.mrg-content blockquote cite,
.mrg-content blockquote footer {
    display:     block;
    margin-top:  .6em;
    font-size:   var(--mrg-size-small);
    font-style:  normal;
    color:       var(--mrg-text-light);
}

.mrg-content blockquote cite::before { content: "— "; }


/* ═══════════════════════════════════════════════════════════════════════════
   9.  TABLES
       Drupal frequently exports content with inline <table> HTML.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper to allow horizontal scrolling on narrow screens */
.mrg-content table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5em 0;
    font-size:       var(--mrg-size-small);
    line-height:     1.5;
    overflow-x:      auto;
    display:         block;
    /* Scroll only the table, not the whole page */
    max-width:       100%;
}

/* For tables that have a Drupal wrapper class */
.mrg-content .views-table,
.mrg-content .sticky-enabled {
    min-width: 500px;
}

.mrg-content table thead {
    background:    var(--mrg-purple);
    color:         #fff;
}

.mrg-content table th {
    padding:     .65rem .85rem;
    text-align:  start;
    font-weight: 600;
    font-size:   var(--mrg-size-small);
    white-space: nowrap;
    border-bottom: 2px solid var(--mrg-purple-light);
}

.mrg-content table td {
    padding:       .55rem .85rem;
    border-bottom: 1px solid var(--mrg-border);
    vertical-align: top;
    color:         var(--mrg-text);
}

/* Zebra striping */
.mrg-content table tbody tr:nth-child(even) td {
    background: var(--mrg-bg-light);
}

.mrg-content table tbody tr:hover td {
    background: var(--mrg-purple-pale);
}

/* Caption */
.mrg-content table caption {
    caption-side: bottom;
    padding:      .5em 0;
    font-size:    var(--mrg-size-caption);
    color:        var(--mrg-text-light);
    text-align:   start;
    font-style:   italic;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10.  IMAGES & FIGURES
   ═══════════════════════════════════════════════════════════════════════════ */

/* All images in content: responsive and never overflow */
.mrg-content img {
    max-width:    100%;
    height:       auto;
    border-radius: 4px;
    display:      block;
}

/* <figure> wrapper (Drupal / WordPress editor standard) */
.mrg-content figure {
    margin:     1.5em 0;
    padding:    0;
    text-align: center; /* centre images even in justified text */
}

.mrg-content figure img {
    margin:     0 auto;
    max-width:  100%;
}

.mrg-content figcaption {
    margin-top:  .5em;
    font-size:   var(--mrg-size-caption);
    color:       var(--mrg-text-light);
    font-style:  italic;
    line-height: 1.45;
    text-align:  center;
}

/* Drupal caption class (migrated from .caption / .field--name-body img) */
.mrg-content .wp-caption,
.mrg-content .wp-caption-text {
    max-width:  100%;
    font-size:  var(--mrg-size-caption);
    color:      var(--mrg-text-light);
    text-align: center;
    font-style: italic;
}

/* Float classes preserved from Drupal wysiwyg */
.mrg-content .align-left,
.mrg-content .alignleft,
.mrg-content img.left {
    float:        left;
    margin:       .25em 1.25em 1em 0;
    max-width:    45%;
}

.mrg-content .align-right,
.mrg-content .alignright,
.mrg-content img.right {
    float:        right;
    margin:       .25em 0 1em 1.25em;
    max-width:    45%;
}

.mrg-content .aligncenter,
.mrg-content .align-center {
    display:      block;
    margin-left:  auto;
    margin-right: auto;
}

/* Clear floats on mobile */
@media (max-width: 600px) {
    .mrg-content .alignleft,
    .mrg-content .alignright,
    .mrg-content img.left,
    .mrg-content img.right {
        float:     none;
        max-width: 100%;
        margin:    1em auto;
        display:   block;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11.  INLINE CODE & PRE BLOCKS
        (Less common in human rights content but Drupal can produce them
         from pasted HTML or legal document formatting)
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content code {
    font-family:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:        .875em;
    padding:          .15em .35em;
    background:       var(--mrg-purple-pale);
    color:            var(--mrg-purple);
    border-radius:    3px;
    white-space:      pre-wrap;
}

.mrg-content pre {
    background:       #1e1e1e;
    color:            #d4d4d4;
    padding:          1rem 1.25rem;
    border-radius:    6px;
    overflow-x:       auto;
    font-size:        .85rem;
    line-height:      1.6;
    margin:           1.5em 0;
}

.mrg-content pre code {
    background:  transparent;
    color:       inherit;
    padding:     0;
    font-size:   inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12.  HORIZONTAL RULES
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content hr {
    border:         none;
    border-top:     2px solid var(--mrg-border);
    margin:         2em 0;
}

/* Brand-coloured divider class */
.mrg-content hr.mrg-divider {
    border-color: var(--mrg-purple-border);
}


/* ═══════════════════════════════════════════════════════════════════════════
   13.  CALL-OUT / NOTICE BOXES
        Drupal content sometimes contains <div class="note"> or similar.
        Also used by the template layer for case profile notices.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic call-out */
.mrg-content .note,
.mrg-content .mrg-note,
.mrg-content .callout {
    padding:       1rem 1.25rem;
    margin:        1.5em 0;
    border-left:   4px solid var(--mrg-purple);
    background:    var(--mrg-purple-pale);
    border-radius: 0 6px 6px 0;
    font-size:     var(--mrg-size-small);
    line-height:   1.65;
}

/* Info box */
.mrg-content .mrg-info {
    border-left-color: var(--mrg-info-border);
    background:        var(--mrg-info-bg);
}

/* Warning box */
.mrg-content .mrg-warning {
    border-left-color: var(--mrg-warn-border);
    background:        var(--mrg-warn-bg);
}

/* RTL: flip border side */
[lang="ar"] .mrg-content .note,
[lang="ar"] .mrg-content .mrg-note,
[lang="ar"] .mrg-content .callout,
[lang="ar"] .mrg-content .mrg-info,
[lang="ar"] .mrg-content .mrg-warning,
.rtl .mrg-content .note,
.rtl .mrg-content .mrg-note,
.rtl .mrg-content .callout {
    border-left:   none;
    border-right:  4px solid var(--mrg-purple);
    border-radius: 6px 0 0 6px;
}

/* Call-out heading */
.mrg-content .mrg-note strong:first-child,
.mrg-content .callout > p:first-child strong {
    display:      block;
    font-size:    .9rem;
    color:        var(--mrg-purple);
    margin-bottom: .3em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14.  EMBEDDED MEDIA (iframes, videos)
        Drupal body fields frequently include embedded YouTube/Vimeo iframes.
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content .mrg-embed,
.mrg-content .video-embed-field-responsive-video {
    position:    relative;
    padding-top: 56.25%; /* 16:9 */
    height:      0;
    overflow:    hidden;
    margin:      1.5em 0;
    border-radius: 6px;
}

.mrg-content .mrg-embed iframe,
.mrg-content .video-embed-field-responsive-video iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    border:   0;
}

/* Standalone iframe (not in a wrapper) */
.mrg-content iframe {
    max-width:    100%;
    border:       none;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   15.  UTILITY CLASSES — migrated from Drupal wysiwyg stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

.mrg-content .text-small  { font-size: var(--mrg-size-small); }
.mrg-content .text-muted  { color: var(--mrg-text-muted); }
.mrg-content .text-purple { color: var(--mrg-purple); }
.mrg-content .text-center { text-align: center; }
.mrg-content .text-start  { text-align: start; }
.mrg-content .text-end    { text-align: end; }

/* Dropcap for long-form publications */
.mrg-content.mrg-dropcap > p:first-of-type::first-letter {
    float:         left;
    font-size:     3.5em;
    line-height:   .85;
    margin:        .06em .12em 0 0;
    color:         var(--mrg-purple);
    font-weight:   800;
}


/* ═══════════════════════════════════════════════════════════════════════════
   16.  ARABIC (RTL) OVERRIDES
        Applies when WPML switches to Arabic or when body has .rtl class.
        Also covers [lang="ar"] on individual elements from Drupal content.
   ═══════════════════════════════════════════════════════════════════════════ */

[lang="ar"] .mrg-content,
.rtl .mrg-content,
.mrg-content[lang="ar"],
body.rtl .elementor-widget-theme-post-content .elementor-widget-container {
    font-family: var(--mrg-font-ar);
    direction:   rtl;
    text-align:  right;
    /* Arabic text does not need hyphens */
    hyphens:     none;
    /* Slightly larger for readability */
    font-size:   1.05rem;
    line-height: 1.85;
}

/* Headings in Arabic */
[lang="ar"] .mrg-content h1,
[lang="ar"] .mrg-content h2,
[lang="ar"] .mrg-content h3,
[lang="ar"] .mrg-content h4,
[lang="ar"] .mrg-content h5,
[lang="ar"] .mrg-content h6,
.rtl .mrg-content h1,
.rtl .mrg-content h2,
.rtl .mrg-content h3,
.rtl .mrg-content h4,
.rtl .mrg-content h5,
.rtl .mrg-content h6 {
    text-align: right;
    font-family: var(--mrg-font-ar);
}

/* h2 border flips */
[lang="ar"] .mrg-content h2,
.rtl .mrg-content h2 {
    border-bottom: 2px solid var(--mrg-purple-border);
    /* border remains full-width under the heading — no directional flip needed */
}

/* Lists: indent flips to right */
[lang="ar"] .mrg-content li,
.rtl .mrg-content li {
    text-align: right;
}

/* Table header alignment */
[lang="ar"] .mrg-content th,
.rtl .mrg-content th,
[lang="ar"] .mrg-content td,
.rtl .mrg-content td {
    text-align: right;
}

/* Definition lists */
[lang="ar"] .mrg-content dl,
.rtl .mrg-content dl {
    direction: rtl;
}

/* Float images flip */
[lang="ar"] .mrg-content .alignleft,
.rtl .mrg-content .alignleft {
    float:  right;
    margin: .25em 0 1em 1.25em;
}
[lang="ar"] .mrg-content .alignright,
.rtl .mrg-content .alignright {
    float:  left;
    margin: .25em 1.25em 1em 0;
}

/* Dropcap flips */
[lang="ar"] .mrg-content.mrg-dropcap > p:first-of-type::first-letter,
.rtl .mrg-content.mrg-dropcap > p:first-of-type::first-letter {
    float:        right;
    margin:       .06em 0 0 .12em;
}

/* Inline Arabic content within otherwise LTR content */
.mrg-content [lang="ar"],
.mrg-content .arabic-text,
.mrg-content [dir="rtl"] {
    font-family: var(--mrg-font-ar);
    direction:   rtl;
    unicode-bidi: embed;
    line-height: 1.85;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17.  DRUPAL LEGACY CLASS CLEANUP
        Classes generated by Drupal's text filters that may appear in
        migrated content and need to be neutralised or restyled.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Drupal inline styles that break the layout */
.mrg-content [style*="font-family"] {
    font-family: var(--mrg-font-body) !important;
}
body.rtl .mrg-content [style*="font-family"] {
    font-family: var(--mrg-font-ar) !important;
}

/* Strip Drupal file icon spans */
.mrg-content .file         { display: inline; }
.mrg-content .file-icon    { display: none; }

/* Drupal field wrappers that sometimes appear in body */
.mrg-content .field__label { display: none; }
.mrg-content .field__item  { display: block; }

/* Drupal views exposed filter output inside body text */
.mrg-content .views-exposed-form { display: none; }

/* Remove Drupal "Read more" links that were not stripped during migration */
.mrg-content a.more-link,
.mrg-content .more-link,
.mrg-content a.read-more {
    display: none;
}

/* Drupal inline images with no style class */
.mrg-content img:not([class]),
.mrg-content img.media-element {
    max-width: 100%;
    height:    auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   18.  ELEMENTOR INTEGRATION
        Ensure Elementor's post-content widget inherits the content styles
        without being overridden by Elementor's own reset.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-widget-theme-post-content .elementor-widget-container {
    /* Allow our content typography vars to apply */
    color:       var(--mrg-text);
    font-family: var(--mrg-font-body);
    font-size:   var(--mrg-size-body);
    line-height: var(--mrg-line-height);
}

/* Elementor adds a default bottom margin to headings — harmonise with ours */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3 {
    margin-bottom: .5em;
}

/* Elementor default paragraph spacing override */
.elementor-widget-theme-post-content p {
    margin-bottom: 1.25em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   19.  PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .mrg-content {
        max-width:  100%;
        font-size:  11pt;
        color:      #000;
        text-align: left;
    }
    .mrg-content a {
        color:           #000;
        text-decoration: none;
    }
    .mrg-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
        color:    #444;
    }
    .mrg-content a[target="_blank"]::after {
        content: " (" attr(href) ")";
    }
    .mrg-content blockquote {
        border-left:  3px solid #999;
        background:   none;
        padding-left: .75em;
    }
    .mrg-content table {
        display:   table;
        font-size: 9pt;
    }
    .mrg-content img {
        max-width: 50%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   20.  RESPONSIVE REFINEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --mrg-size-h1:   1.6rem;
        --mrg-size-h2:   1.3rem;
        --mrg-size-h3:   1.15rem;
        --mrg-content-width: 100%;
    }

    .mrg-content {
        /* On mobile, full justification can create large gaps
           with Arabic/French long words — switch to left/right align */
        text-align: start;
    }

    .mrg-content blockquote {
        padding: .75rem 1rem .75rem 1rem;
    }

    .mrg-content dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    :root {
        --mrg-size-h1: 1.4rem;
        --mrg-size-h2: 1.2rem;
    }

    .mrg-content ul,
    .mrg-content ol {
        padding-left: 1.2em;
    }
}