/* ============================================================= rtl.css — Override per la lingua URDU (اردو), testo da destra a sinistra. Caricato SOLO quando la lingua attiva è RTL (vedi layout.php). La maggior parte del mirroring è automatica grazie a dir="rtl" sull' e all'uso di flexbox + proprietà logiche (margin-inline, padding-inline). Qui sistemiamo font, direzione del menu mobile e i dettagli tipografici che non si adattano da soli. ============================================================= */ /* 1. Tipografia urdu: Noto Nastaliq Urdu con fallback per i caratteri latini (numeri, email, sigle come A1–B2) che cadono su Inter/Amiri. */ :root { --font-titoli: 'Noto Nastaliq Urdu', 'Amiri', Georgia, serif; --font-testo: 'Noto Nastaliq Urdu', 'Inter', system-ui, sans-serif; /* Font dell'interfaccia per i contenuti NON urdu (vedi punto 7). */ --font-latino: 'Inter', system-ui, sans-serif; } /* Lo script Nastaliq è alto: serve più interlinea per leggibilità. */ body { line-height: 2.1; } h1, h2, h3, h4, h5, h6 { line-height: 1.8; } p { line-height: 2.2; } /* 2. Menu mobile: in LTR entra da destra; in RTL deve entrare da sinistra. */ .nav-mobile { transform: translateX(-100%); } .nav-mobile.aperto { transform: translateX(0); } /* 3. Dettagli tipografici che non hanno senso in urdu: il maiuscolo forzato è inutile (l'urdu non ha maiuscole) e soprattutto il letter-spacing SPEZZA le legature del Nastaliq (le lettere si staccano). Li azzeriamo ovunque. Nota: .intestazione-sezione .sottotitolo è elencato a parte per pareggiare la specificità della regola originale. */ .header__logo-citta, .sottotitolo, .intestazione-sezione .sottotitolo, .hero__tag, .nav-mobile__gruppo-label, .footer__titolo { text-transform: none; letter-spacing: normal; } /* 4. Il nome del brand resta in caratteri latini: lo manteniamo LTR per non spezzarne la resa dentro un contesto RTL. */ .header__logo-nome, .header__logo-citta, .footer__brand .nome { direction: ltr; } /* 5. Allineiamo a destra i blocchi che usavano allineamento implicito a sinistra; quelli già centrati restano centrati. */ .hero { text-align: right; } .intestazione-sezione, .cta-banner { text-align: center; } /* La domanda della FAQ forzava text-align:left (fisico): in RTL va a destra. */ .faq-domanda { text-align: right; } /* 6. Numeri/orari di preghiera e countdown restano leggibili in LTR. */ .preghiera-ora, .preghiera-countdown-timer { direction: ltr; unicode-bidi: isolate; } /* 7. Centraggio verticale di bottoni, badge e icone — fix definitivo. Il Nastaliq ha metriche verticali enormi: la sua linea di base sta molto in basso nel riquadro del carattere, quindi TUTTO ciò che condivide la riga (emoji, frecce, numeri, testo urdu stesso) sembra "scivolare" verso il fondo di pulsanti, badge e cerchietti. Soluzione: nei controlli compatti dell'interfaccia non usiamo il Nastaliq ma Inter (latino) + Noto Naskh Arabic (urdu): stesso alfabeto, metriche normali, contenuto di nuovo in centro. Il Nastaliq resta per titoli e testo scorrevole, dove rende bene. */ :root { --font-ui: 'Inter', 'Noto Naskh Arabic', system-ui, sans-serif; } /* 7a. Controlli compatti (possono contenere testo urdu): font UI e interlinea come in LTR (il body RTL usa 2.1, qui torniamo a 1.6). */ .btn, .badge, .form-campo, .lang-switch__opt, .tab-nav__voce, .tab-nav__conteggio, .card-dash__conteggio, .dash-hero__pill, .pannello__link, .slot-blocco, .flash, .preghiera-nome, .preghiera-ora, .preghiera-countdown-timer { font-family: var(--font-ui); line-height: 1.6; } /* Il conteggio pill ha un'altezza calibrata sulla propria line-height. */ .tab-nav__conteggio, .card-dash__conteggio { line-height: 1.35rem; } /* 7b. Icone e simboli da soli (emoji, frecce, ✕, +): senza Nastaliq nella riga tornano al centro dei loro riquadri. */ .card__icona, .card-servizio__icona, .card-dash__icona, .alert__icona, .faq-domanda__icona, .mappa-placeholder__icona, .notifiche__icona, .toast__icona, .nav__freccia, .card-dash__freccia, .hamburger, .torna-su, .notifiche__campanella, .toast__chiudi, .impegno__data { font-family: var(--font-ui); line-height: 1; } /* Il giorno del foglietto-data usava il font dei titoli (→ Nastaliq): è un numero, va reso col font UI per restare centrato. */ .impegno__giorno { font-family: var(--font-ui); line-height: 1.4; } /* 7c. Il nome del brand resta in caratteri latini puri. */ .header__logo-nome, .header__logo-citta, .footer__brand .nome { font-family: var(--font-latino); } /* 8. Proprietà "fisiche" (sinistra/destra) che non si specchiano da sole. */ /* Il pulsante "torna su" sta in basso a destra: in RTL va in basso a sinistra. */ .torna-su { right: auto; left: 24px; } /* I sotto-link del menu mobile erano rientrati a sinistra: in RTL a destra. */ .nav-mobile__sub-link { padding-left: var(--spazio-lg); padding-right: calc(var(--spazio-lg) + 1.25rem); } /* La barretta colorata degli alert era a sinistra: in RTL va a destra. */ .alert { border-left-width: 0; border-right: 4px solid; }