/* ============================================================
   KURT CLINIC — MULTILINGUAL ADDITIONS (all pages, all languages)
   Loaded after site.css / v2.css. Uses the existing design tokens only.
   Arabic and Persian pages load mirrored copies of site.css / v2.css
   (*.rtl.css, generated by i18n/build.mjs); this file adds what a mirror
   cannot: the Arabic-script font, bidi handling and the language selector.
   ============================================================ */

/* ---------- Arabic-script font (Vazirmatn, SIL OFL 1.1, self-hosted) ----------
   unicode-range: downloaded only when Arabic/Persian characters are on screen. */
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/vazirmatn-wght.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
html[lang="ar"], html[lang="fa"]{
  --font-body:'Vazirmatn','Poppins',Tahoma,'Segoe UI',sans-serif;
}

/* Arabic script is cursive: tracking breaks the joins, and it needs a little more leading. */
html[dir="rtl"] *{ letter-spacing:normal !important; }
html[dir="rtl"] body{ line-height:1.75; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{ line-height:1.4; }

/* ---------- mixed-direction content ----------
   Phone numbers, e-mail addresses and Latin-only runs keep left-to-right order inside RTL text. */
html[dir="rtl"] .tel,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"]{ unicode-bidi:plaintext; }
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"]{ direction:ltr; text-align:right; }
html[dir="rtl"] input[type="tel"]::placeholder{ direction:ltr; }
html[dir="rtl"] .h-guide a::after{ content:"←"; }

/* ---------- language selector (header) ---------- */
.lang{ position:relative; flex-shrink:0; }
.lang summary{
  list-style:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 10px;
  border-radius:8px; cursor:pointer; font-weight:500; font-size:.93rem; color:var(--navy);
  transition:background-color .2s, color .2s; user-select:none;
}
.lang summary::-webkit-details-marker{ display:none; }
.lang summary:hover, .lang[open] summary{ background:var(--warm); }
.lang-code{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:.02em; }
.lang-caret{ width:16px; height:16px; color:var(--navy-soft); transition:transform .2s var(--ease-out, ease); }
.lang[open] .lang-caret{ transform:rotate(180deg); }
.lang-flag{ width:20px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(34,50,73,.12); object-fit:cover; flex-shrink:0; }

.lang-list{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:120; min-width:190px;
  margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md, 14px); box-shadow:0 20px 40px rgba(34,50,73,.12);
}
.lang-list a{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:8px;
  text-decoration:none; color:var(--navy); font-weight:500; font-size:.95rem; white-space:nowrap;
}
.lang-list a:hover{ background:var(--warm); }
.lang-list a:focus-visible{ outline:3px solid var(--green); outline-offset:-3px; background:var(--warm); }
.lang-list a[aria-current="true"]{ color:var(--green-ink); background:var(--green-tint); }
.lang-list a[aria-current="true"]::after{
  content:""; margin-inline-start:auto; width:16px; height:16px; flex-shrink:0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lang-list a[lang="ar"], .lang-list a[lang="fa"]{ font-family:'Vazirmatn',var(--font-body); }
.lang-list a[lang="tr"], .lang-list a[lang="en"]{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }

/* Desktop: the selector sits after the header buttons. Below the menu breakpoint the buttons are
   hidden and it sits next to the menu button instead. */
@media (max-width:1120px){
  .hdr-in > .lang{ margin-inline-start:auto; }
  .hdr-in > .lang + .menu{ margin-inline-start:0; }
}
@media (max-width:560px){
  .lang summary{ padding:0 8px; gap:6px; }
}

/* landing-page header (no navigation) */
.hdr-lp .hdr-in > .lang{ margin-inline-start:0; }

/* ---------- translated legal pages: "the Turkish text is binding" ---------- */
.legal-lang-note{
  margin-top:14px; max-width:64ch; font-size:.88rem; line-height:1.55; color:var(--navy-soft);
  padding:10px 14px; border-radius:var(--r-sm, 10px); background:var(--warm);
}
.legal-lang-note a{ color:var(--green-ink); font-weight:500; }

/* ---------- consent banner ----------
   Same rules as site.css (Phase 07); repeated here because the homepage does not load site.css. */
.consent-banner{
  position:fixed; inset-inline:16px; bottom:16px; z-index:200; max-width:560px;
  background:var(--paper, #fff); color:var(--ink); border:1px solid var(--hairline-strong, var(--line)); border-radius:var(--radius, 12px);
  padding:18px 20px; display:grid; gap:14px; box-shadow:0 8px 28px rgba(34,50,73,.14);
}
.consent-text{ margin:0; font-size:.95rem; line-height:1.55; color:var(--navy); }
.consent-text a{ color:var(--green-ink); }
.consent-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.consent-btn{
  flex:1 1 120px; min-height:46px; padding:0 18px; border-radius:var(--radius, 12px); cursor:pointer;
  font:500 .95rem var(--font-body); background:var(--paper, #fff); color:var(--navy); border:1px solid var(--navy);
}
.consent-btn.is-accept{ background:var(--navy); color:#fff; }
.consent-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media (max-width:900px){ .consent-banner{ bottom:calc(84px + env(safe-area-inset-bottom)); } }

/* landing page on phones: the header has no room, so the footer copy of the selector is used */
.lang-footer{ display:none; }
.lang-footer .lang-list{ top:auto; bottom:calc(100% + 6px); inset-inline-end:auto; inset-inline-start:0; }
@media (max-width:560px){
  .hdr-lp .lang{ display:none; }
  .lang-footer{ display:inline-block; }
}

/* ---------- desktop language bar ----------
   Above the menu breakpoint the header row has no free space, so the selector sits in a slim
   bar above the (unchanged) header. Below it, the header copy next to the menu button is used. */
.lang-bar{ display:none; }
@media (min-width:1121px){
  .lang-bar{ display:block; position:relative; z-index:110; background:var(--warm); border-bottom:1px solid var(--line); }
  .lang-bar-in{ display:flex; justify-content:flex-end; align-items:center; min-height:34px; }
  .lang-bar .lang summary{ min-height:34px; padding:0 8px; font-size:.85rem; }
  .lang-bar .lang-list{ top:calc(100% + 2px); }
  .hdr:not(.hdr-lp) .hdr-in > .lang{ display:none; }
}

/* Between 1121px and 1259px the full Turkish / English navigation does not fit next to the call
   buttons (the WhatsApp button was clipped), so those widths use the existing menu button too.
   Arabic and Persian labels are shorter and fit from 1121px. */
@media (min-width:1121px) and (max-width:1259px){
  html[lang="tr"] .hdr:not(.hdr-lp) .nav, html[lang="tr"] .hdr:not(.hdr-lp) .hdr-cta,
  html[lang="en"] .hdr:not(.hdr-lp) .nav, html[lang="en"] .hdr:not(.hdr-lp) .hdr-cta{ display:none; }
  html[lang="tr"] .hdr:not(.hdr-lp) .menu,
  html[lang="en"] .hdr:not(.hdr-lp) .menu{ display:block; }
}
/* English navigation labels are longer than Turkish: slightly tighter link padding keeps the row
   inside the container. */
@media (min-width:1260px){
  html[lang="en"] .nav{ gap:0; }
  html[lang="en"] .nav a{ padding:0 7px; }
}

/* Landing-page header on small phones: the logo and both call buttons were ~30px wider than a
   360px screen (in every language). Slightly tighter spacing keeps them on screen. */
@media (max-width:400px){
  .hdr-lp .hdr-in{ gap:8px; }
  .hdr-lp .hdr-cta{ gap:6px; }
  .hdr-lp .btn-sm{ padding:0 11px; }
  .hdr-lp .logo img{ height:19px; }
}