/* TAQA Solar – Sprachen: Schriften, Sprachwahl, Rechts-nach-links (Arabisch) */

/* Türkische Sonderzeichen (ğ, ş, ı, İ …) */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/noto-sans-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
html[lang="ar"] body { font-family: "Inter", "Noto Sans Arabic", system-ui, sans-serif; line-height: 1.8; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.4; }
html[lang="ar"] .eyebrow, html[lang="ar"] .t-card .when, html[lang="ar"] .toc > b { letter-spacing: 0; }

/* ---------- Sprachwahl ---------- */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px;
  border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy);
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: border-color .2s;
}
.lang-btn:hover, .lang.open .lang-btn { border-color: var(--navy); }
.lang-btn svg { width: 18px; height: 18px; }
.lang-btn .chev { width: 14px; height: 14px; transition: transform .25s; }
.lang.open .lang-btn .chev, .lang:hover .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60; min-width: 180px;
  list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.lang-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.lang:hover .lang-menu, .lang:focus-within .lang-menu, .lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
.lang-menu a:hover { background: var(--soft); }
.lang-menu a small { color: var(--muted, #566273); font-weight: 700; font-size: .8rem; }
.lang-menu a[aria-current] { color: var(--green-dark); }
.lang-menu a[aria-current] small::before { content: "\2713  "; }
@media (min-width: 1081px) { .header-cta { min-width: 440px; } }
@media (max-width: 680px) {
  .lang-btn { height: 44px; padding: 0 10px; }
  .lang-btn .chev { display: none; }
}

/* ---------- Rechts-nach-links (Arabisch) ---------- */
[dir="rtl"] .rating-chip { left: auto; right: -22px; }
[dir="rtl"] .bill-card { right: auto; left: -18px; }
[dir="rtl"] .mark { background-position: 100% 88%; }
[dir="rtl"] .timeline::before, [dir="rtl"] .timeline .fill { left: auto; right: 31px; }
[dir="rtl"] .faq summary { padding: 22px 0 22px 48px; }
[dir="rtl"] .faq summary::after { right: auto; left: 6px; }
[dir="rtl"] .article-faq summary { padding: 18px 0 18px 40px; }
[dir="rtl"] .article-faq summary::after { right: auto; left: 6px; }
[dir="rtl"] .toc ol a { border-left: 0; border-right: 3px solid transparent; padding: 8px 12px 8px 0; }
[dir="rtl"] .toc ol a.active { border-right-color: var(--green); }
[dir="rtl"] .callout { border-left: 0; border-right: 5px solid var(--blue); border-radius: 14px 0 0 14px; }
[dir="rtl"] .callout.green { border-right-color: var(--green); }
[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .article-body ul.ticks { padding-right: 0; }
[dir="rtl"] .article-body ul.ticks li { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .article-body ul.ticks li::before { left: auto; right: 0; }
[dir="rtl"] .breadcrumb li + li::before { content: "\2039"; margin-right: 0; margin-left: 8px; }
[dir="rtl"] .post-card .more { margin-left: 0; margin-right: auto; }
[dir="rtl"] .post-card .thumb .tag { left: auto; right: 14px; }
[dir="rtl"] .tile input:checked + .box::after { right: auto; left: 8px; }
[dir="rtl"] .float-wa { right: auto; left: 22px; }
[dir="rtl"] .to-top { right: auto; left: 30px; }
[dir="rtl"] .cta-band::after { right: auto; left: -120px; }
[dir="rtl"] .show-checks .check[data-note]:hover::after { left: auto; right: 0; text-align: right; }
[dir="rtl"] .phone-pill:hover, [dir="rtl"] .phone-pill:focus-visible { padding: 6px 6px 6px 18px; }
[dir="rtl"] .phone-pill:hover .pp-text, [dir="rtl"] .phone-pill:focus-visible .pp-text { margin-left: 0; margin-right: 10px; }
[dir="rtl"] a.c-card:hover { transform: translateX(-4px); }
[dir="rtl"] svg:has(> use[href="#i-arrow"]), [dir="rtl"] svg:has(> use[href="#i-back"]) { transform: scaleX(-1); }
[dir="rtl"] .path:hover .go svg, [dir="rtl"] .post-card:hover .more svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .step { animation-name: stepInRtl; }
@keyframes stepInRtl { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
[dir="rtl"] svg.map, [dir="rtl"] svg.flow { direction: ltr; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .legal ul { padding-left: 0; padding-right: 1.3em; }
@media (max-width: 680px) {
  [dir="rtl"] .rating-chip { right: 10px; left: auto; }
  [dir="rtl"] .bill-card { left: auto; }
  [dir="rtl"] .timeline::before, [dir="rtl"] .timeline .fill { right: 25px; left: auto; }
}