/* Afimex i18n — header language selector (v1.1: flag pills).
   Native <details> dropdown: keyboard- and touch-accessible with no JS. */

.afx-lang { display: inline-flex; align-items: center; }
.afx-lang-menu-item { display: flex !important; align-items: center; }

/* Desktop header: OceanWP's menu <li>s are floats sized by their 74px anchors,
   and its ID-specificity rules zero our padding — flex the row so the pill
   centers at ANY header height, and pin the pill's own geometry. */
#site-navigation > .dropdown-menu { display: flex; align-items: center; flex-wrap: wrap; }
#site-navigation .afx-lang-menu-item { margin-inline-start: 8px; }
.afx-lang .afx-lang-current { padding: 7px 13px 7px 9px !important; line-height: 1 !important; }
[dir="rtl"] .afx-lang .afx-lang-current { padding: 7px 9px 7px 13px !important; }

.afx-lang-details { position: relative; }

/* flags: crisp inline SVG chips */
.afx-flag {
  display: inline-flex; flex: 0 0 auto; width: 21px; height: 14px;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 27, 20, .14), 0 1px 2px rgba(15, 27, 20, .12);
}
.afx-flag svg { width: 100%; height: 100%; display: block; }

/* closed pill */
.afx-lang-current {
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer; user-select: none;
  padding: 7px 13px 7px 9px; border-radius: 999px;
  border: 1px solid rgba(15, 27, 20, .12);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15, 27, 20, .05);
  color: inherit; font-size: 13.5px; font-weight: 650; line-height: 1;
  white-space: nowrap;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.afx-lang-current::-webkit-details-marker { display: none; }
.afx-lang-current::marker { content: ""; }
.afx-lang-current:hover {
  border-color: rgba(15, 158, 35, .55);
  box-shadow: 0 2px 8px rgba(15, 27, 20, .1);
  background: #fff;
}
.afx-lang-current:focus-visible { outline: 2px solid #0F9E23; outline-offset: 2px; }

.afx-lang-caret { opacity: .55; flex: 0 0 auto; transition: transform .18s ease; }
.afx-lang-details[open] .afx-lang-caret { transform: rotate(180deg); }
.afx-lang-details[open] .afx-lang-current {
  border-color: rgba(15, 158, 35, .55); background: #fff;
  box-shadow: 0 2px 8px rgba(15, 27, 20, .1);
}

/* open panel */
.afx-lang-list {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 99999;
  margin: 0; padding: 6px !important; list-style: none; min-width: 186px;
  background: #fff; border: 1px solid rgba(15, 27, 20, .08); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15, 27, 20, .06), 0 20px 44px rgba(15, 27, 20, .16);
}
[dir="rtl"] .afx-lang-list { right: auto; left: 0; }

@media (prefers-reduced-motion: no-preference) {
  .afx-lang-details[open] .afx-lang-list { animation: afxLangIn .16s cubic-bezier(.2, .8, .3, 1) both; }
  @keyframes afxLangIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
}

.afx-lang-list li { margin: 0; padding: 0; list-style: none; }

.afx-lang-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px !important; line-height: 1.25 !important; border-radius: 9px;
  color: #0f1b14 !important; font-size: 14px; font-weight: 550;
  text-decoration: none !important; white-space: nowrap;
  transition: background .12s ease;
}
.afx-lang-link .afx-lang-name { flex: 1 1 auto; }
.afx-lang-link:hover { background: #f0f7f1; color: #0A5C1B !important; }
.afx-lang-link:focus-visible { outline: 2px solid #0F9E23; outline-offset: -2px; }

.afx-lang-link.is-current { font-weight: 700; color: #0A5C1B !important; background: #ebf6ed; }
.afx-lang-check { color: #0F9E23; flex: 0 0 auto; }

/* language-specific type: Arabic label renders in its own script comfortably */
.afx-lang-link[lang="ar"] .afx-lang-name, .afx-lang-name:lang(ar) { font-size: 15px; }

/* Mobile, IN-MENU instance: inside OceanWP's mobile menu a floating dropdown
   is awkward — show an always-open row of generous flag pills instead.
   (Scoped to .afx-lang-menu-item so the header-bar instance keeps its dropdown.) */
@media (max-width: 959px) {
  .afx-lang-menu-item { padding: 10px 14px; }
  .afx-lang-menu-item .afx-lang-details, .afx-lang-menu-item .afx-lang-details[open] { position: static; }
  .afx-lang-menu-item .afx-lang-current { display: none; }
  .afx-lang-menu-item .afx-lang-details:not([open]) .afx-lang-list { display: flex; } /* force-open */
  .afx-lang-menu-item .afx-lang-list {
    position: static; display: flex; flex-wrap: wrap; gap: 7px;
    min-width: 0; padding: 0 !important; border: 0; box-shadow: none; background: transparent;
    animation: none !important;
  }
  .afx-lang-menu-item .afx-lang-link {
    border: 1px solid rgba(15, 27, 20, .14); border-radius: 999px;
    background: #fff; padding: 10px 15px !important; min-height: 44px; align-items: center;
    box-shadow: 0 1px 2px rgba(15, 27, 20, .05);
  }
  .afx-lang-menu-item .afx-lang-link.is-current { border-color: #0F9E23; }
  .afx-lang-menu-item .afx-lang-check { display: none; }
}

/* Mobile HEADER-BAR instance: a compact flag pill beside the hamburger, so the
   selector is visible without opening the menu. Absolute (not fixed): the
   header is position:relative at the top, so the pill scrolls with it.
   Measured live: header 77px tall, hamburger 68px wide at the inline end. */
.afx-lang-mobilebar { display: none; }
@media (max-width: 959px) {
  .afx-lang-mobilebar {
    display: block; position: absolute; top: 21px; inset-inline-end: 74px; z-index: 101;
  }
  .afx-lang-mobilebar .afx-lang-name { display: none; }  /* flag + caret only */
  .afx-lang-mobilebar .afx-lang-current { padding: 8px 10px !important; }
  .afx-lang-mobilebar .afx-lang-list { right: 0; }
  [dir="rtl"] .afx-lang-mobilebar .afx-lang-list { right: auto; left: 0; }
  .afx-lang-mobilebar .afx-lang-list .afx-lang-name { display: block; } /* names inside the panel */
}

/* ------------------------------------------------------------------------
   Arabic typography. The theme's Montserrat has no Arabic glyphs, so Arabic
   fell back to heavy system faces — and letter-spacing on headings/eyebrows
   DISCONNECTS Arabic letters (they must join). Tajawal everywhere Arabic
   renders; spacing zeroed; roomier line-height for the taller script.
   Element-scoped (never *) so icon fonts are untouched. */
:lang(ar), [lang="ar"], :lang(ar) *, [lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] body,
:lang(ar) :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th, dt, dd, label, summary, a, button, input, select, textarea, strong, b, em),
[lang="ar"], [lang="ar"] :is(strong, b, em, span) {
  font-family: 'Tajawal', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
}
html[lang="ar"] body { line-height: 1.75; }
:lang(ar) :is(h1, h2, h3) { line-height: 1.55; }
[lang="ar"] { line-height: 1.7; }