@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ==========================================================
   Advanced Urdu-Hindi Theme
   Pastel Blue and Orange-Pink
   ========================================================== */

:root {
  /* ----------------------------------------------------------
     Typography
     ---------------------------------------------------------- */

  --font-body: "Noto Sans", sans-serif;
  --font-heading: "Noto Serif", serif;
  --font-navigation: "Noto Sans", sans-serif;

  --font-weight-heading: 700;
  --font-weight-navigation: 700;

  --font-size-body: 1.10rem;
  --font-size-site-title: 2.5rem;
  --font-size-site-title-mobile: 1.6rem;
  --font-size-heading-one: 2.25rem;
  --font-size-heading-two: 1.75rem;

  --line-height-body: 1.68;
  --line-height-heading: 1.25;

  /* ----------------------------------------------------------
     Page surfaces
     ---------------------------------------------------------- */

  --color-page-background: #dcecf3;
  --color-content-background: #fffaf7;

  /* ----------------------------------------------------------
     Text
     ---------------------------------------------------------- */

  --color-text: #30343a;
  --color-heading: #b6535c;

  /* ----------------------------------------------------------
     Links
     ---------------------------------------------------------- */

  --color-link: #376d82;
  --color-link-hover: #c65f68;

  /* ----------------------------------------------------------
     Header
     ---------------------------------------------------------- */

  --color-header-background: #6d9faf;
  --color-header-text: #ffffff;

  /* ----------------------------------------------------------
     Navigation
     ---------------------------------------------------------- */

  --color-nav-background: #f7d9d0;
  --color-nav-text: #315f70;
  --color-nav-hover-background: #efb9ad;
  --color-nav-hover-text: #8e3f49;

  /* ----------------------------------------------------------
     General list items
     ---------------------------------------------------------- */

  --color-list-background: #edf6f8;
  --color-list-hover-background: #d5e9ef;
  --color-list-border: #b7d6df;

  /* ----------------------------------------------------------
     File list items
     ---------------------------------------------------------- */

  --color-file-background: #6d9faf;
  --color-file-hover-background: #568b9d;
  --color-file-border: #48798a;

  /* ----------------------------------------------------------
     Accents
     ---------------------------------------------------------- */

  --color-accent: #d66f76;
  --color-secondary-accent: #6d9faf;
  --color-highlight: #f7d5bd;
  --color-focus: #e98b82;

  /* ----------------------------------------------------------
     Borders and corners
     ---------------------------------------------------------- */

  --color-border: #ccdce0;

  --radius-container: 8px;
  --radius-small: 4px;

  /* ----------------------------------------------------------
     Shadows
     ---------------------------------------------------------- */

  --shadow-container:
    0 4px 8px rgb(74 105 117 / 0.14),
    0 1px 3px rgb(0 0 0 / 0.07);

  --shadow-header:
    0 4px 10px rgb(73 119 136 / 0.22);

  /* ----------------------------------------------------------
     Animation
     ---------------------------------------------------------- */

  --transition-speed: 0.3s;
}

/* ==========================================================
   Theme-specific typography enhancements
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.005em;
}

header.persistent-header h1 {
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.01em;
}

header.persistent-header nav a {
  font-weight: var(--font-weight-navigation);
}

/* ==========================================================
   Transliteration
   ========================================================== */

/*
 * Noto Sans has broad Latin Extended support and displays
 * Urdu/Hindi transliteration with macrons and underdots clearly:
 *
 * ā ī ū ḥ ṣ ṭ ẓ ḍ ṛ ṅ
 *
 * The slightly increased line-height also prevents stacked
 * diacritics from feeling cramped in running text.
 */

.transliteration,
.romanization {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* ==========================================================
   File-list text contrast
   ========================================================== */

.files .list-group-item a {
  color: #ffffff;
  font-weight: 700;
}

.files .list-group-item a:hover,
.files .list-group-item a:focus-visible {
  color: #ffffff;
}

/* Overrides */

li {
  border: 1px solid transparent;
}