/*
 * Languages (every public page). LangProvider sets <html lang dir data-lang data-script> once the visitor's language is applied.
 *   data-script: latin (English, Roman Urdu, Turkish) · nastaliq (Urdu, Punjabi, Saraiki) · naskh (Arabic, Pashto, Sindhi) · han (Chinese)
 * Pages are prerendered in English; the inline head script (scripts/build.mjs) adds .i18n-pending while another language loads.
 */

/* ---- while a saved non-English language loads: hide the English page, but never for more than 2.5 s (no JS, slow network) */
html.i18n-pending body { visibility: hidden; animation: i18n-reveal 0s 2.5s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }

/* ---- the language picker (shared/i18n/LanguageSelect.tsx): pill button + branded dropdown in the Digital Chotu purple / orange */
.lang-select { position: relative; display: inline-flex; }
.lang-select__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.95);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.lang-select__button:hover,
.lang-select.is-open .lang-select__button { border-color: #ff5c00; color: #ffb27a; background: rgba(255, 92, 0, 0.12); box-shadow: 0 0 18px rgba(255, 92, 0, 0.25); }
.lang-select__button:focus-visible { outline: 2px solid #ff7a2e; outline-offset: 2px; }
.lang-select__globe { width: 1rem; height: 1rem; flex-shrink: 0; }
.lang-select__chevron { width: 0.75rem; height: 0.75rem; flex-shrink: 0; opacity: 0.85; transition: transform 0.2s; }
.lang-select.is-open .lang-select__chevron { transform: rotate(180deg); }
.lang-select__current { line-height: 1.3 !important; }

.lang-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  inset-inline-end: 0;
  z-index: 60;
  width: 17.5rem;
  max-width: calc(100vw - 2rem);
  max-height: min(72vh, 34rem);
  overflow-y: auto;
  padding: 0.5rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 122, 46, 0.35);
  background: linear-gradient(160deg, #2a0e5c 0%, #1a0838 60%);
  box-shadow: 0 24px 60px rgba(10, 2, 30, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #fff;
  text-align: start;
  animation: lang-menu-in 0.16s ease-out;
}
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.lang-menu__title {
  margin: 0.25rem 0.6rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff7a2e;
}
.lang-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s;
}
.lang-menu__item + .lang-menu__item { margin-top: 2px; }
.lang-menu__item:hover, .lang-menu__item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.lang-menu__item:focus-visible { box-shadow: 0 0 0 2px rgba(255, 122, 46, 0.7) inset; }
.lang-menu__item.is-selected { background: linear-gradient(90deg, rgba(255, 55, 0, 0.28), rgba(255, 92, 0, 0.12)); box-shadow: 0 0 0 1px rgba(255, 92, 0, 0.45) inset; }
.lang-menu__names { display: flex; flex-direction: column; min-width: 0; }
.lang-menu__native { font-size: 1rem; font-weight: 700; line-height: 1.35 !important; color: #fff; }
html body .lang-menu__english { font-size: 0.72rem; line-height: 1.3 !important; color: rgba(255, 255, 255, 0.55); font-family: 'Inter', system-ui, sans-serif !important; }
.lang-menu__check { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: #ff5c00; opacity: 0; }
.lang-menu__item.is-selected .lang-menu__check { opacity: 1; }
/* every language name in its own script, whatever the page language */
html body .lang-menu__native:is([lang='ur'], [lang='pa-Arab'], [lang='skr']) { font-family: 'DC Nastaliq', 'Inter', sans-serif !important; font-size: 1.05rem; line-height: 1.9 !important; }
html body .lang-menu__native:is([lang='ar'], [lang='ps'], [lang='sd']) { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Geeza Pro', sans-serif !important; }
html body .lang-menu__native:is([lang='en'], [lang='ur-Latn'], [lang='tr'], [lang='zh-Hans']) { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important; }
html body .lang-select__current:is([lang='ur'], [lang='pa-Arab'], [lang='skr']) { font-family: 'DC Nastaliq', 'Inter', sans-serif !important; }

/* full-width row in the slide-in mobile menus: the list opens in the flow */
.lang-select--block { display: flex; flex-direction: column; width: 100%; }
.lang-select--block .lang-select__button { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; border-radius: 1rem; }
.lang-select--block .lang-select__current { flex: 1; text-align: start; }
.lang-select--block .lang-menu { position: static; width: 100%; max-width: none; max-height: none; margin-top: 0.5rem; }

/* light pages (ambassador) */
.lang-select--light .lang-select__button { border-color: #ddd8f0; background: #fff; color: #1a1a2e; }
.lang-select--light .lang-select__button:hover,
.lang-select--light.is-open .lang-select__button { border-color: #ff5c00; color: #b83b00; background: #fff7f2; box-shadow: 0 6px 18px rgba(255, 92, 0, 0.15); }
.lang-select--light .lang-menu { background: #fff; border-color: #ddd8f0; color: #1a1a2e; box-shadow: 0 24px 50px rgba(49, 15, 106, 0.18); }
.lang-select--light .lang-menu__title { color: #b83b00; }
.lang-select--light .lang-menu__native { color: #310f6a; }
.lang-select--light .lang-menu__english { color: #6b6890; }
.lang-select--light .lang-menu__item:hover, .lang-select--light .lang-menu__item:focus-visible { background: #f5f2fd; }
.lang-select--light .lang-menu__item.is-selected { background: #fff1e8; box-shadow: 0 0 0 1px rgba(255, 92, 0, 0.45) inset; }

/* ---- right-to-left (Urdu, Arabic, Pashto, Punjabi, Sindhi, Saraiki) */
/* Arabic-script letters join; letter-spacing (tracking-*) breaks the joins and makes the text unreadable */
html[dir='rtl'] body * { letter-spacing: normal !important; }
html[dir='rtl'] body .text-left { text-align: right; }
html[dir='rtl'] body .flip-rtl { transform: scaleX(-1); }
/* phone numbers, e-mail addresses and codes stay left-to-right inside right-to-left text */
html[dir='rtl'] body input[type='tel'],
html[dir='rtl'] body input[type='email'],
html[dir='rtl'] body input[inputmode='numeric'] { direction: ltr; text-align: right; }

/* ---- Nastaliq (Urdu, Punjabi Shahmukhi, Saraiki): self-hosted Noto Nastaliq Urdu, downloaded only when such letters are on screen.
   This face covers ONLY the Arabic-script ranges, so digits, phone numbers and brand names inside Urdu text keep a Latin font.
   !important: page and component CSS name Latin display fonts on many elements, which would hand these letters back to a system font. */
@font-face {
  font-family: 'DC Nastaliq';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/noto-nastaliq-urdu-arabic.woff2) format('woff2');
  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-FEFF;
}
html[data-script='nastaliq'] body,
html[data-script='nastaliq'] body * { font-family: 'DC Nastaliq', 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif !important; }
/* Nastaliq letterforms are tall: running text needs room or the lines overlap and clip */
html[data-script='nastaliq'] body { line-height: 2; }
html[data-script='nastaliq'] body :where(p, li, dd, dt, label, small, blockquote, td, th, summary, details) { line-height: 2; }
html[data-script='nastaliq'] body :where(h1, h2, h3, h4) { line-height: 1.6; }
html[data-script='nastaliq'] body :where(h1, h2, h3, h4) * { line-height: inherit; }
html[data-script='nastaliq'] body :where(button, input, select, textarea) { line-height: 1.8; }
html[data-script='nastaliq'] body :where(.text-4xl, .text-5xl, .text-6xl, .text-7xl) { line-height: 1.5; }

/* ---- Gradient-filled text (.gradient-text, countdown numbers): the gradient is painted only inside the element's box, so Arabic-script
   letters that rise above / dip below the line came out transparent (cut off at the top). Grow the painted area with padding and give the
   space back with an equal negative margin, so the layout does not move. */
html[data-script='nastaliq'] body .gradient-text,
html[data-script='naskh'] body .gradient-text {
  padding-block: 0.45em;
  margin-block: -0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- Naskh (Arabic, Pashto, Sindhi): the device's own Arabic font (every phone has one); only the spacing needs help */
html[data-script='naskh'] body :where(p, li, dd, dt, label, small, blockquote, td, th, summary) { line-height: 1.85; }
html[data-script='naskh'] body :where(h1, h2, h3, h4) { line-height: 1.45; }

/* ---- Chinese: no word spaces, so allow breaks anywhere in long headings */
html[data-script='han'] body :where(h1, h2, h3) { line-break: strict; word-break: normal; }

  /* Self-contained: every rule is scoped to .dc-footer so it looks identical on the Tailwind pages
     (chotu.digital, prelaunch.) and on the hand-written ambassador page. */
  .dc-footer, .dc-footer * { box-sizing: border-box; }
  .dc-footer {
    position: relative;
    direction: ltr;
    text-align: left;
    background: #1a0838;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding: 44px 0 24px;
  }
  .dc-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff3700, #ff7a2e 40%, #371f70);
  }
  .dc-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .dc-footer a { color: inherit; text-decoration: none; }
  .dc-footer ul { list-style: none; margin: 0; padding: 0; }
  .dc-footer p, .dc-footer h4 { margin: 0; }

  /* Lahore launch call-to-action band */
  .dc-footer__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    margin-bottom: 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 55, 0, 0.2), rgba(55, 31, 112, 0.55));
    border: 1px solid rgba(255, 122, 46, 0.55);
  }
  .dc-footer__cta-title { color: #fff; font-weight: 800; font-size: 20px; line-height: 1.3; }
  .dc-footer__cta-sub { margin-top: 4px; color: rgba(255, 255, 255, 0.9); }
  .dc-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .dc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700; font-size: 14px; white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  }
  /* Deep-purple text on brand orange (white on orange is only ~3:1). */
  .dc-btn--primary { background: linear-gradient(135deg, #ff3700, #ff5c00); color: #1a0838 !important; box-shadow: 0 6px 24px rgba(255, 55, 0, 0.35); }
  .dc-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255, 55, 0, 0.5); }
  .dc-btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff !important; }
  .dc-btn--ghost:hover { background: #fff; color: #1a0838 !important; }

  /* Columns */
  /* Phones: brand on top, Explore | Join side by side, Company full width underneath. */
  .dc-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .dc-footer__brand { grid-column: 1 / -1; }
  .dc-footer__grid > nav:last-child { grid-column: 1 / -1; }
  @media (min-width: 640px) {
    .dc-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .dc-footer__grid > nav:last-child { grid-column: auto; }
  }
  @media (min-width: 960px) {
    .dc-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .dc-footer__brand { grid-column: auto; }
  }
  /* The hosted logo is dark artwork made for light backgrounds, so it sits on a white chip. */
  .dc-footer__logo { display: inline-flex; margin-bottom: 16px; padding: 6px 12px; border-radius: 12px; background: #fff; }
  .dc-footer__logo img { display: block; height: 36px; width: auto; }
  .dc-footer__about { max-width: 340px; }
  .dc-footer__loc { margin-top: 14px; color: #ff7a2e; font-weight: 600; }
  .dc-footer h4 { margin-bottom: 14px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .dc-footer li + li { margin-top: 10px; }
  .dc-footer__links a { color: rgba(255, 255, 255, 0.85); transition: color 0.2s; }
  .dc-footer__links a:hover { color: #ff7a2e; }
  .dc-footer a:focus-visible { outline: 2px solid #ff7a2e; outline-offset: 3px; border-radius: 4px; }

  .dc-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
    margin-top: 44px; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.8); font-size: 13px;
  }
  .dc-footer__social { margin-top: 20px; }
  .dc-footer__social-label { margin-bottom: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .dc-footer__social-list { display: flex; flex-wrap: wrap; gap: 10px; }
  .dc-footer .dc-footer__social-list li + li { margin-top: 0; }
  .dc-social {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff;
    transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
  }
  .dc-social svg { width: 20px; height: 20px; }
  .dc-social:hover { transform: translateY(-2px); border-color: transparent; background: linear-gradient(135deg, #ff3700, #ff5c00); color: #1a0838; }