/**
 * SunoPadho — Base Styles & Multilingual Typography
 */

/* Import Google Fonts for Multilingual Typography */
@import url('https://fonts.googleapis.com/css2?family=Gulzar&family=Lora:ital,wght@0,400..700;1,400..700&family=Mukta:wght@300;400;500;600;700&family=Noto+Nastaliq+Urdu:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Telugu:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* CSS Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: var(--sp-leading-normal);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sp-font-sans);
  background-color: var(--sp-canvas);
  color: var(--sp-text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Accessibility Focus States */
:focus-visible {
  outline: 2px solid var(--sp-emerald-700);
  outline-offset: 2px;
}

/* Media Elements */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ==========================================================================
   MULTILINGUAL & SCRIPT TYPOGRAPHY RULES
   ========================================================================== */

/* Urdu / Arabic Script (RTL) */
.lang-ur, [lang="ur"] {
  font-family: var(--sp-font-urdu);
  direction: rtl;
  text-align: right;
  line-height: 2.2;
}

.lang-ur h1, .lang-ur h2, .lang-ur h3, .lang-ur h4 {
  font-family: 'Gulzar', var(--sp-font-urdu);
  line-height: 2.0;
}

/* Roman Urdu (LTR Latin) */
.lang-roman-ur {
  font-family: var(--sp-font-sans);
  direction: ltr;
  text-align: left;
  letter-spacing: -0.01em;
}

/* Hindi / Devanagari (LTR) */
.lang-hi, [lang="hi"] {
  font-family: var(--sp-font-hindi);
  direction: ltr;
  text-align: left;
  line-height: 1.7;
}

/* Bengali (LTR) */
.lang-bn, [lang="bn"] {
  font-family: 'Noto Sans Bengali', sans-serif;
  direction: ltr;
}

/* Tamil (LTR) */
.lang-ta, [lang="ta"] {
  font-family: 'Noto Sans Tamil', sans-serif;
  direction: ltr;
}

/* Telugu (LTR) */
.lang-te, [lang="te"] {
  font-family: 'Noto Sans Telugu', sans-serif;
  direction: ltr;
}

/* Direction utilities */
.dir-rtl {
  direction: rtl;
  text-align: right;
}

.dir-ltr {
  direction: ltr;
  text-align: left;
}

/* ==========================================================================
   HEADINGS & EDITORIAL TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--sp-leading-tight);
  color: var(--sp-navy-900);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--sp-text-3xl); }
h2 { font-size: var(--sp-text-2xl); }
h3 { font-size: var(--sp-text-xl); }
h4 { font-size: var(--sp-text-lg); }
h5 { font-size: var(--sp-text-md); }
h6 { font-size: var(--sp-text-base); }

@media (min-width: 768px) {
  h1 { font-size: var(--sp-text-4xl); }
  h2 { font-size: var(--sp-text-3xl); }
  h3 { font-size: var(--sp-text-2xl); }
}

p {
  line-height: var(--sp-leading-relaxed);
  color: var(--sp-text-secondary);
}

/* ==========================================================================
   CORE UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--sp-container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-space-4);
  padding-right: var(--sp-space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--sp-space-8);
    padding-right: var(--sp-space-8);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-suno {
  background-color: var(--sp-navy-100);
  color: var(--sp-navy-850);
  font-weight: 600;
}

.badge-padho {
  background-color: var(--sp-emerald-100);
  color: var(--sp-emerald-850);
  font-weight: 600;
}

.badge-sync {
  background: linear-gradient(135deg, var(--sp-navy-100) 0%, var(--sp-emerald-100) 100%);
  color: var(--sp-navy-900);
  font-weight: 700;
  border: 1px solid rgba(11, 93, 59, 0.2);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}