@charset "UTF-8";
/* Language switch, the contact page and English typography adjustments. */

.site-header nav { margin-left: auto; }
.language-switch { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--outline-variant); border-radius: 999px; background: var(--surface-card); font-size: 12px; font-weight: 700; }
.language-switch a { padding: 6px 12px; border-radius: 999px; white-space: nowrap; color: var(--on-surface-variant); }
.language-switch a:hover { color: var(--on-surface); }
.language-switch a[aria-current="true"] { background: var(--on-surface); color: var(--surface); }

/* Contact: styles the shared, unchanged contact-content.html fragment. */
.contact-copy { max-width: 860px; padding-block: 20px 24px; }
.contact-copy h1 { margin: 0 0 24px; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.04em; }
.contact-copy > p { margin-bottom: 28px; font-size: 15px; line-height: 1.8; color: var(--on-surface-variant); }
.contact-copy h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 20px; font-size: 22px; }
.contact-copy h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--wheel); transform: translateY(-2px); }
#contactForm { position: relative; padding: var(--card-space); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--outline-variant); overflow: hidden; }
#contactForm::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--stripe); }
#contactForm > div { display: grid; gap: 16px; }
#contactForm > div > br { display: none; }
#contactForm label { display: block; font-size: 14px; line-height: 1.8; font-weight: 700; }
#contactForm label > br { display: none; }
#contactForm input:not([type="hidden"]):not([type="submit"]), #contactForm textarea { display: block; width: 100%; max-width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 14px; font: inherit; font-weight: 400; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
#contactForm input:not([type="hidden"]):not([type="submit"]):focus, #contactForm textarea:focus { outline: none; border-color: var(--ink-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue) 24%, transparent); }
#contactForm textarea { min-height: 180px; resize: vertical; }
#contactForm input[type="submit"] { justify-self: start; min-height: 44px; padding: 10px 24px; font: inherit; font-weight: 700; color: var(--surface); background: var(--on-surface); border: 0; border-radius: 999px; cursor: pointer; transition: transform .2s; }
#contactForm input[type="submit"]:hover { transform: translateY(-1px); }
#contactForm input[type="submit"]:disabled { opacity: .55; cursor: wait; transform: none; }
#contactResult { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
#contactResult:empty { display: none; }
#contactResult[data-state="error"] { color: var(--ink-red); }
#contactResult[data-state="success"] { color: var(--ink-green); }

/* English typography. */
:lang(en) .hero-copy h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -.055em; }
:lang(en) .page-intro h1, :lang(en) .timer-hero-copy h1 { line-height: 1.08; }
:lang(en) .hero-description, :lang(en) .page-description, :lang(en) .discovery-copy p, :lang(en) .app-card-body > p, :lang(en) .about-copy { line-height: 1.7; }
:lang(en) .privacy-copy p { line-height: 1.8; }
:lang(en) .discovery-marker strong { line-height: 1.2; }

@media (max-width: 1000px) {
  .site-header { flex-wrap: wrap; }
  .language-switch { margin-left: auto; }
  .site-header nav { order: 2; width: 100%; margin-left: -14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  .site-header { gap: 12px; min-height: 0; padding-block: 16px 4px; }
  .brand-logo { width: 140px; }
  .language-switch { font-size: 11px; }
  .language-switch a { padding: 5px 9px; }
  .contact-copy > p { font-size: 14px; }
  :lang(en) .hero-copy h1 { font-size: clamp(40px, 12vw, 48px); }
}