/* ==========================================================================
   GLOBAL RTL & ARABIC TYPOGRAPHY OVERRIDES
   Platform: Global Platform for Child Exploitation Policy
   Pairing: Inter (Latin) + IBM Plex Sans Arabic / Cairo (Arabic)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;700&family=Cairo:wght@700&display=swap');

/* 1. Core Document Setup (When <html lang="ar" dir="rtl"> is active) */
:lang(ar), html[dir="rtl"] {
  /* Font Family Overrides */
  --font-sans-arabic: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, sans-serif;
  --font-heading-arabic: "Cairo", "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  
  /* 
    Global Adjustments to match Inter's visual scale 
    - Bumps base to compensate for Arabic optical size
    - Extra breathing room for vertical ascenders/descenders/dots 
  */
  /* font-size: 103.25%;  */
  line-height: 1.65;
}

/* 2. Global Typography Tree Overrides */
:lang(ar) body,
:lang(ar) input,
:lang(ar) textarea,
:lang(ar) select,
:lang(ar) button {
  font-family: var(--font-sans-arabic);
  letter-spacing: 0; /* Clear out Inter's negative letter-spacing; Arabic cannot be letter-spaced */
}

/* 3. Headings (Using Cairo for structural authority) */
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4,
:lang(ar) h5,
:lang(ar) h6 {
  font-family: var(--font-heading-arabic);
  font-weight: 700;
  line-height: 1.4; /* Headings can tolerate slightly tighter tracking than body text */
}

/* 4. Policy Text, Legal Frameworks & Long-form Content */
:lang(ar) p,
:lang(ar) li {
  font-size: 1rem;       /* Inherits the bumped base size */
  line-height: 1.75;     /* Maximum readability for multi-line legal text */
  margin-bottom: 1.25rem;
  text-align: justify;   /* Optional: Formal policy sites often look cleaner justified in RTL */
  text-justify: inter-word;
}

/* 5. Microcopy, Meta Data, and Dashboard Labels */
:lang(ar) .ui-label,
:lang(ar) small,
:lang(ar) .meta-text {
  font-family: var(--font-sans-arabic);
  font-size: 0.875rem; /* ~14.8px equivalent (Highly readable for microcopy) */
  font-weight: 500;    /* Bumping weight slightly helps small Arabic text stay crisp */
}

/* 6. Data Tables & Policy Registries (Crucial for tabular data grids) */
:lang(ar) table,
:lang(ar) .data-grid {
  font-variant-numeric: tabular-nums; /* Keeps numbers aligned perfectly in grids */
}

:lang(ar) th {
  font-family: var(--font-heading-arabic);
  font-weight: 600;
  font-size: 0.9rem;
}

:lang(ar) td {
  font-family: var(--font-sans-arabic);
  line-height: 1.5;
}

:lang(ar) td dl[dir="ltr"] {
  text-align: left;
}

/* ==========================================================================
   Tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
   ========================================================================== */
.rtl\:text-left:where([dir="rtl"], [dir="rtl"] *) { text-align: left }
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) { text-align: right }

.rtl\:flex:where([dir="rtl"], [dir="rtl"] *) { display: flex; }
.rtl\:flex-column:where([dir="rtl"], [dir="rtl"] *) { flex-direction: column }
.rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) { flex-direction: row-reverse }
.rtl\:flex-column-reverse:where([dir="rtl"], [dir="rtl"] *) { flex-direction: column-reverse }

.rtl\:self-end:where([dir="rtl"], [dir="rtl"] *) {align-self: end}

.rtl\:right-unset:where([dir="rtl"], [dir="rtl"] *) { right: unset }
.rtl\:right-3:where([dir="rtl"], [dir="rtl"] *) { right: .75rem }

.rtl\:left-unset:where([dir="rtl"], [dir="rtl"] *) { left: unset }
.rtl\:left-0:where([dir="rtl"], [dir="rtl"] *) { left: 0px }
.rtl\:left-3:where([dir="rtl"], [dir="rtl"] *) { left: .75rem }

/* LEGACY CSS */
.rtl\:left-0:where([dir="rtl"], [dir="rtl"] *){
  left: 0px;
}
.rtl\:translate-x-\[5\%\]:where([dir="rtl"], [dir="rtl"] *){
  --tw-translate-x: 5%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rtl\:-scale-100:where([dir="rtl"], [dir="rtl"] *){
  --tw-scale-x: -1;
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rtl\:flex-row-reverse:where([dir="rtl"], [dir="rtl"] *){
  flex-direction: row-reverse;
}
.rtl\:after\:right-0:where([dir="rtl"], [dir="rtl"] *)::after{
  content: var(--tw-content);
  right: 0px;
}
@media (min-width: 1536px){
  .\32xl\:rtl\:translate-x-0:where([dir="rtl"], [dir="rtl"] *){
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* ==========================================================================
   CSS LOGICAL PROPERTIES (Layout Adaptability)
   ========================================================================== */
/* Ensure shared layout elements use logical properties instead of directional ones. 
  This ensures you don't have to manually rewrite margins and paddings for RTL. */

.gpp-shared-layout,
.gpp-text-start { text-align: start; }
.gpp-shared-layout p { text-align: inherit; }
.gpp-start-3 { inset-inline-start: .75rem; }
.gpp-start-6 { inset-inline-start: 1.5rem; }
.gpp-ps-0 { padding-inline-start: 0; }
[dir="rtl"] .gpp-directional-icon { transform: scaleX(-1); }
.gpp-end-3 { inset-inline-end: .75rem; }
.gpp-end-0 { inset-inline-end: 0; }
.gpp-inset-inline-0 { inset-inline: 0; }
.gpp-ms-2 { margin-inline-start: .5rem; }
.gpp-mobile-search-padding { padding-inline: 1rem 2.5rem; }

.gpp-dropdown {
  inset-inline-end: 0;
  text-align: start;
  max-inline-size: calc(100vw - 3rem);
}
.gpp-report-dropdown { inline-size: min(59.5rem, calc(100vw - 3rem)); }
.gpp-subscribe-dropdown { inline-size: min(26.25rem, calc(100vw - 3rem)); }

/* Move from the track's reading edge; checked and unchecked stay inside it. */
.gpp-switch-thumb { position: relative; inset-inline-start: .25rem; }
.gpp-switch-thumb-on { inset-inline-start: 1.25rem; }

/* Mobile navigation is anchored at inline-end and exits through that edge. */
.gpp-offcanvas-hidden { transform: translateX(100%); }
[dir="rtl"] .gpp-offcanvas-hidden { transform: translateX(-100%); }

@media (min-width: 768px) {
  .gpp-md-pe-12 { padding-inline-end: 3rem; }
  .gpp-md-ps-12 { padding-inline-start: 3rem; }
  .gpp-sting-dividers > :not([hidden]) ~ :not([hidden]) {
    border-inline-start-width: 1px;
    border-inline-end-width: 0;
  }
}
@media (min-width: 1024px) {
  .gpp-lg-pe-10 { padding-inline-end: 2.5rem; }
  .gpp-lg-ps-10 { padding-inline-start: 2.5rem; }
  .gpp-lg-text-start { text-align: start; }
  .gpp-lg-text-end { text-align: end; }
  .gpp-footer-dividers > :not([hidden]) ~ :not([hidden]) {
    border-inline-start-width: 2px;
    border-inline-end-width: 0;
  }
}

/* Shared data layouts: flow follows the page; values have isolated LTR runs. */
.gpp-text-end { text-align: end; }
.gpp-start-negative-2 { inset-inline-start: -.5rem; }
.gpp-me-2 { margin-inline-end: .5rem; }
.gpp-ps-10 { padding-inline-start: 2.5rem; }
.gpp-rounded-start { border-start-start-radius: .25rem; border-end-start-radius: .25rem; }
.gpp-rounded-end {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: .25rem;
  border-end-end-radius: .25rem;
}
.gpp-inline-dividers > :not([hidden]) ~ :not([hidden]) {
  border-inline-start-width: 1px;
  border-inline-end-width: 0;
}
.gpp-value {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gpp-data-table { inline-size: 100%; }
.gpp-data-table th, .gpp-data-table td { min-inline-size: 0; }
.gpp-data-table th { white-space: normal; overflow-wrap: anywhere; text-align: start; }
.gpp-data-table thead tr { align-items: stretch; }
.gpp-data-table th { align-items: flex-start; justify-content: space-between; }
.gpp-metric-label { display: flex; gap: .25rem; align-items: flex-start; text-align: start; min-inline-size: 0; }
.gpp-metric-label > :not(svg) { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-metric-label > svg { flex-shrink: 0; }
.gpp-data-table td:first-child { overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .gpp-sm-text-end { text-align: end; }
  .gpp-data-table th:not(:first-child) { align-items: flex-end; text-align: end; }
  .gpp-data-table th:not(:first-child) .gpp-metric-label { text-align: end; }
}

/* Reserve intrinsic space for values while country metric labels wrap. */
.gpp-country-table td:first-child { flex: 1 1 0; }
.gpp-country-table td:last-child { flex: 0 0 auto; min-inline-size: max-content; }

.gpp-insights nav[role="tablist"] { flex-wrap: wrap; }
.gpp-insights nav[role="tablist"] > a { max-inline-size: 100%; height: auto; overflow-wrap: anywhere; }

/* Keep code labels intact and move tooltip icons onto a new line when needed. */
.gpp-data-table th .gpp-metric-label { flex-wrap: wrap; max-inline-size: 100%; }
.gpp-data-table bdi { white-space: nowrap; }
/* Give translated country metric labels room before using three columns. */
.gpp-country-columns > div { max-inline-size: none; max-width: none; min-inline-size: 0; }
@media (min-width: 1024px) {
  .gpp-country-columns { flex-direction: row; }
  .gpp-country-columns > div { max-inline-size: 24.75rem; }
}

/* Legal Research rows and questionnaire use the same reading edges as shared UI. */
.gpp-ps-6 { padding-inline-start: 1.5rem; }
.gpp-border-start-2 { border-inline-start-width: 2px; }
.gpp-legal-row { flex-wrap: wrap; }
.gpp-legal-country { flex: 1 1 14rem; min-inline-size: 0; }
.gpp-legal-country > div { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-legal-actions { flex-wrap: wrap; min-inline-size: 0; }
.gpp-legal-actions > a { white-space: normal; text-align: center; }
:lang(ar) .gpp-legal-summary { background-color: #306fc5; border-color: #306fc5; color: #fff; }
:lang(ar) .gpp-legal-summary:hover { background-color: #295fa8; }
:lang(ar) .gpp-legal-summary ~ .gpp-legal-response { background-color: #fff; border-color: #d3dae6; color: #4e596b; }
:lang(ar) .gpp-legal-summary ~ .gpp-legal-response:hover { background-color: #edf1f6; }
@media (max-width: 639.98px) {
  .gpp-legal-actions { inline-size: 100%; }
}

/* Localized glossary and policy content. Only navigation arrows are mirrored. */
.gpp-accordion-trigger { align-items: flex-start; }
.gpp-accordion-trigger > span { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-accordion-trigger:focus-visible, .gpp-term-search:focus-visible { outline: 3px solid #306fc5; outline-offset: 3px; }
.gpp-term-search { inline-size: 100%; margin-block: .5rem; padding: .75rem 1rem; border: 2px solid #d3dae6; border-radius: .5rem; background: #fff; color: #404041; }
.gpp-policy-card-title { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
.gpp-policy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.gpp-policy-tag, .gpp-language-label { display: inline-flex; inline-size: fit-content; padding: .25rem .5rem; border-radius: .375rem; background: #edf1f6; color: #404041; font-size: .875rem; line-height: 1.5; }
:lang(ar) #policy-advocacy p { font-family: var(--font-sans-arabic); text-align: start; }
:lang(ar) .gpp-policy-card-title { font-family: var(--font-heading-arabic); line-height: 1.65; }
:lang(ar) #policy-advocacy h1, :lang(ar) #policy-advocacy h2, :lang(ar) #policy-advocacy h3, :lang(ar) #policy-advocacy h4, :lang(ar) #policy-advocacy h5 { line-height: 1.5; }

/* About contact form: page-directed labels with independent input direction. */
.gpp-about-form .gpp-form-label { margin-block-end: .5rem; text-align: start; }
.gpp-about-form input:not([type="checkbox"]), .gpp-about-form textarea { text-align: start; padding-inline: .75rem; }
.gpp-about-form .gpp-form-feedback { text-align: start; color: #404041; overflow-wrap: anywhere; }
.gpp-about-form .gpp-form-feedback:empty { display: none; }
.gpp-consent-row { display: flex; align-items: flex-start; gap: .5rem; }
.gpp-consent-row input[type="checkbox"] { flex: 0 0 1rem; inline-size: 1rem; block-size: 1rem; margin-block-start: .25rem; }
.gpp-consent-row label { min-inline-size: 0; text-align: start; }

/* Firm carousel: override Splide's physical arrow offsets, not its RTL icon rotation. */
.gpp-after-inset-inline-0::after { inset-inline: 0; }
.law-firms-carousel.splide .splide__arrows .splide__arrow { left: auto; right: auto; }
.law-firms-carousel.splide .splide__arrows .splide__arrow--prev { inset-inline-start: 0; }
.law-firms-carousel.splide .splide__arrows .splide__arrow--next { inset-inline-end: 0; }

/* Map modal actions follow page direction while translated labels wrap. */
.gpp-map-modal-footer .btns-group .btn { min-inline-size: 0; white-space: normal; text-align: start; }
.gpp-map-modal-footer .gpp-map-action-label { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-map-modal-footer .gpp-directional-icon { flex-shrink: 0; }

/* Article/search layouts inherit page direction; individual dates keep their own bidi context. */
.gpp-ms-4 { margin-inline-start: 1rem; }
.gpp-after-start-0::after { inset-inline-start: 0; }
.gpp-content-flow :is(h1, h2, h3, h4, h5, th, [role="heading"]) { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
.gpp-content-flow th { text-align: start; }
.gpp-content-flow time, .gpp-content-date { unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gpp-content-flow .card-result__search-info { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-content-flow input[dir="auto"] { text-align: start; }
:lang(ar) .gpp-content-flow :is(h1, h2, h3, h4, h5, [role="heading"]) { line-height: 1.5; }
:lang(ar) .gpp-content-flow .line-clamp-3 { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Remaining content templates: logical anchors and isolated inline text. */
.gpp-start-0 { inset-inline-start: 0; }
.gpp-before-start-0::before { inset-inline-start: 0; }
.gpp-end-ten-percent { inset-inline-end: 10%; }
.gpp-bidi-text { unicode-bidi: isolate; }
.gpp-wrap-text { min-inline-size: 0; overflow-wrap: anywhere; }
.gpp-content-flow .gpp-directional-icon { flex-shrink: 0; }

/* Numeric badges are generated by the map; keep its rendering/data handlers unchanged. */
#c2Modal .badge-cyan { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gpp-card-tag { min-inline-size: 0; max-inline-size: 100%; }
.gpp-card-tag > a { max-inline-size: 100%; white-space: normal; }