/* Al-Sumait — language switcher v1.0.0. Zero JavaScript. */

/* ============ header variant — details/summary pill ============ */
.lsw{position:relative;font-size:13.5px;line-height:1}
.lsw > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid #ddd8d0;border-radius:100px;
  padding:7px 12px 7px 13px;color:var(--wp--preset--color--main,#0F1C1C);
  transition:border-color .18s ease,color .18s ease;
}
.lsw > summary::-webkit-details-marker{display:none}
.lsw > summary::marker{content:""}
.lsw > summary:hover{border-color:#C79A3A;color:#C79A3A}
.lsw > summary:focus-visible{outline:2px solid #C79A3A;outline-offset:2px}
.lsw .lsw-glb{width:14px;height:14px;flex:0 0 auto;opacity:.6}
.lsw .lsw-code{font-weight:600;letter-spacing:.04em}
.lsw .lsw-chev{font-size:13px;color:#9aa;line-height:1;transition:transform .2s ease}
.lsw[open] > summary{border-color:#C79A3A;color:#C79A3A}
.lsw[open] .lsw-chev{transform:rotate(180deg)}

.lsw .lsw-menu{
  position:absolute;top:calc(100% + 9px);right:0;z-index:60;
  background:#fff;border:1px solid #e6e2da;border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.13);padding:7px;min-width:214px;
  direction:ltr;text-align:left;
}
.lsw .lsw-list{margin:0!important;padding:0!important;list-style:none!important}
.lsw .lsw-list li{margin:0!important;padding:0!important;list-style:none!important}
.lsw .lsw-i{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:7px;text-decoration:none;
  color:var(--wp--preset--color--main,#0F1C1C);font-size:14px;line-height:1.35;
}
.lsw a.lsw-i:hover{background:#f4f2ec;color:#C79A3A}
.lsw a.lsw-i:focus-visible{outline:2px solid #C79A3A;outline-offset:-2px}
.lsw .lsw-tag{font-size:11px;letter-spacing:.1em;color:#a8a49b;font-weight:700}
.lsw .lsw-i.is-current{background:#f0f5f4;font-weight:600}
.lsw .lsw-i.is-current .lsw-tag{color:#00786f}
.lsw .lsw-i.is-off{opacity:.36;cursor:default}
.lsw .lsw-sep{height:1px;background:#eeeae2;margin:6px 4px}
.lsw .lsw-hint{
  margin:0!important;padding:5px 11px 7px;font-size:11px;
  color:#a8a49b;letter-spacing:.02em;
}
[dir="rtl"] .lsw .lsw-menu{right:auto;left:0}

/* ============ footer variant — inline row ============ */
.lsw-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px;padding:22px 0 0;
  position:relative;z-index:1;
}
.lsw-row .lsw-lb{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#cbdad9;margin-inline-end:8px;
}
.lsw-row a,.lsw-row .lsw-off{
  font-size:13.5px!important;color:#fff!important;text-decoration:none!important;
  padding:5px 10px!important;border-radius:5px;
  border:1px solid rgba(255,255,255,.2)!important;line-height:1.3;
  transition:border-color .18s ease,color .18s ease;
}
.lsw-row a:hover{border-color:#C79A3A!important;color:#C79A3A!important}
.lsw-row a:focus-visible{outline:2px solid #C79A3A;outline-offset:2px}
.lsw-row a.lsw-cur-item{
  background:rgba(255,255,255,.14);border-color:transparent!important;font-weight:600;
}
.lsw-row .lsw-off{opacity:.3;cursor:default}

@media(max-width:781px){
  .lsw-row{padding:18px 0 0;gap:7px 5px}
  .lsw-row a,.lsw-row .lsw-off{font-size:13px!important;padding:5px 9px!important}
  .lsw .lsw-menu{right:-8px;min-width:200px}
  [dir="rtl"] .lsw .lsw-menu{right:auto;left:-8px}
}

/* ============ French overrides for JS-injected labels ============
 * alsumait-traits injects its mobile rail labels in JavaScript
 * ("Witnesses" and "AR / EN"). They cannot be reached from the page
 * content, so the French page overrides them here — CSS only.
 */
html[lang|="fr"] .railhud .t{font-size:0}
html[lang|="fr"] .railhud .t::after{font-size:11.5px;letter-spacing:.14em;content:"Témoins"}
html[lang|="fr"] #m3 .railhud .t::after{content:"AR / FR"}

/* ── Mobile: keep the language menu inside the viewport (fix 2026-09) ── */
@media (max-width: 781px){
  /* fallback for browsers without :has() — open the panel to the right of the button */
  .lsw .lsw-menu.lsw-menu{ left: 0; right: auto; max-width: calc(100vw - 24px); }
  [dir="rtl"] .lsw .lsw-menu.lsw-menu{ left: auto; right: 0; }

  /* preferred — anchor the panel to the header edge instead of the button edge */
  .lsw:has(> .lsw-menu){ position: static; }
  header .wp-block-group:has(> .lsw){ position: relative; }
  header .wp-block-group:has(> .lsw) .lsw-menu.lsw-menu{
    left: auto; right: 0; max-width: min(340px, calc(100vw - 24px));
  }
  [dir="rtl"] header .wp-block-group:has(> .lsw) .lsw-menu.lsw-menu{ left: 0; right: auto; }

  /* comfortable tap targets */
  .lsw .lsw-i{ padding: 11px 12px; }
}

/* ── 1.10.0 · contrast tokens, type floor (≥14px) and 44px tap targets — work order 1.11–1.13 ── */
.lsw .lsw-chev{color:#5b7a77;font-size:14px}
.lsw .lsw-tag{font-size:14px;color:#5b7a77}
.lsw .lsw-code{font-size:14px}
.lsw .lsw-hint{font-size:14px;color:#5b7a77}
.lsw-row .lsw-lb{font-size:14px;color:rgba(255,255,255,.92)}
.lsw-row a,.lsw-row .lsw-off{font-size:15px!important}
@media (max-width:781px){
  .lsw .lsw-btn{min-height:44px}
  .lsw .lsw-i{min-height:44px}
  .lsw-row a{min-height:44px;display:inline-flex;align-items:center}
}
