/* =============================================================
   Urdu Font Pro — Front-end Stylesheet
   ============================================================= */

/* ---- CSS Custom Properties (defaults; overridden by dynamic CSS) ---- */
:root {
  --ufp-font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --ufp-font-size: 18px;
  --ufp-line-height: 2.2;
  --ufp-letter-spacing: 0px;
  --ufp-color: #1a1a1a;
  --ufp-accent: #1e6b3c;
  --ufp-quote-bg: #f8f6f2;
  --ufp-quote-border: #c8a84b;
  --ufp-button-bg: #1e6b3c;
  --ufp-button-color: #ffffff;
  --ufp-button-radius: 6px;
}

/* ---- Core Urdu Class ---- */
.urdu,
.ufp-urdu {
  font-family: var(--ufp-font-family);
  font-size: var(--ufp-font-size);
  line-height: var(--ufp-line-height);
  letter-spacing: var(--ufp-letter-spacing);
  color: var(--ufp-color);
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Improve Nastaliq ligature rendering */
  -webkit-font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
          font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---- RTL / LTR helpers ---- */
.ufp-rtl  { direction: rtl; text-align: right; unicode-bidi: embed; }
.ufp-ltr  { direction: ltr; text-align: left;  unicode-bidi: embed; }
[dir="rtl"] { direction: rtl; text-align: right; }

/* ---- Font style variants ---- */
.ufp-nastaliq { font-family: "Noto Nastaliq Urdu", "Gulzar", "Jameel Noori Nastaleeq", serif !important; }
.ufp-naskh    { font-family: "Noto Naskh Arabic", "Scheherazade New", "Amiri", serif !important; }
.ufp-kufic    { font-family: "Reem Kufi", sans-serif !important; }

/* ---- Size utilities ---- */
.ufp-size-sm  { font-size: 14px !important; }
.ufp-size-md  { font-size: 18px !important; }
.ufp-size-lg  { font-size: 24px !important; }
.ufp-size-xl  { font-size: 30px !important; }
.ufp-size-xxl { font-size: 40px !important; }

/* ---- Weight / style utilities ---- */
.ufp-bold   { font-weight: 700 !important; }
.ufp-italic { font-style: italic !important; }

/* ---- Alignment utilities ---- */
.ufp-justify { text-align: justify !important; }
.ufp-center  { text-align: center !important; }

/* ---- Headings ---- */
.ufp-urdu h1, .ufp-urdu h2, .ufp-urdu h3,
.ufp-urdu h4, .ufp-urdu h5, .ufp-urdu h6,
.ufp-heading {
  font-family: var(--ufp-font-family);
  direction: rtl;
  text-align: right;
  font-weight: 700;
  line-height: 2.0;
  color: var(--ufp-color);
}

/* ---- Blockquote ---- */
.ufp-quote,
.ufp-urdu blockquote {
  background: var(--ufp-quote-bg);
  border-right: 5px solid var(--ufp-quote-border);
  border-left: none;
  padding: 1.2em 1.5em 1.2em 1em;
  margin: 1.5em 0;
  border-radius: 4px;
  font-style: italic;
  direction: rtl;
  text-align: right;
}
.ufp-quote cite,
.ufp-urdu blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  opacity: 0.75;
  font-style: normal;
}

/* ---- Button ---- */
.ufp-button {
  display: inline-block;
  background: var(--ufp-button-bg);
  color: var(--ufp-button-color) !important;
  padding: 0.55em 1.4em;
  border-radius: var(--ufp-button-radius);
  text-decoration: none;
  font-family: var(--ufp-font-family);
  font-size: var(--ufp-font-size);
  line-height: var(--ufp-line-height);
  direction: rtl;
  transition: opacity 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}
.ufp-button:hover { opacity: 0.88; transform: translateY(-1px); }

/* ---- Lists ---- */
.ufp-list,
.ufp-urdu ul,
.ufp-urdu ol {
  direction: rtl;
  text-align: right;
  padding-right: 1.6em;
  padding-left: 0;
  margin: 0.8em 0;
}
.ufp-list li,
.ufp-urdu li { margin-bottom: 0.4em; }

/* ---- Bilingual columns layout ---- */
.ufp-bilingual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.ufp-bilingual--reverse .ufp-col--urdu    { order: 2; }
.ufp-bilingual--reverse .ufp-col--english { order: 1; }
.ufp-col--urdu    { direction: rtl; text-align: right; }
.ufp-col--english { direction: ltr; text-align: left;  }
@media (max-width: 680px) {
  .ufp-bilingual { grid-template-columns: 1fr; }
  .ufp-bilingual--reverse .ufp-col--urdu,
  .ufp-bilingual--reverse .ufp-col--english { order: unset; }
}

/* ---- Dividers ---- */
.ufp-divider { margin: 1.5em 0; }
.ufp-divider--line  { border-top: 1px solid currentColor; opacity: 0.25; }
.ufp-divider--dots  { text-align: center; letter-spacing: 0.5em; }
.ufp-divider--dots::after  { content: "۝ ۝ ۝"; font-size: 1.2em; opacity: 0.4; }
.ufp-divider--wave::after  { content: "﴿ ۞ ﴾"; font-size: 1.3em; opacity: 0.45; text-align: center; display: block; }

/* ---- Widget ---- */
.ufp-widget-text { line-height: var(--ufp-line-height); }

/* ---- Block paragraphs / headings ---- */
.ufp-block-paragraph { margin-bottom: 1.2em; }
.ufp-block-quote { margin: 1.5em 0; }

/* ---- Inline mixed Urdu spans inside English paragraphs ---- */
p .ufp-urdu, li .ufp-urdu {
  display: inline;
  direction: rtl;
  unicode-bidi: embed;
}

/* ---- Selection highlight ---- */
.ufp-urdu ::selection { background: var(--ufp-quote-border); color: #fff; }
.ufp-urdu ::-moz-selection { background: var(--ufp-quote-border); color: #fff; }

/* ---- Accessibility: focus ring for buttons ---- */
.ufp-button:focus-visible {
  outline: 3px solid var(--ufp-accent);
  outline-offset: 2px;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ufp-button { transition: none; }
}


/* =============================================================
   Urdu List Styles (RTL-first)
   ============================================================= */

/* Base RTL list reset */
.ufp-urdu ul,
.ufp-urdu ol,
.ufp-el-list {
    direction: rtl;
    text-align: right;
    padding-right: 1.8em;
    padding-left: 0;
    margin: 0.6em 0 1em;
    unicode-bidi: embed;
}

/* List items */
.ufp-el-list li,
.ufp-urdu li {
    margin-bottom: 0.5em;
    padding-right: 0.3em;
    padding-left: 0;
    line-height: inherit;
}

/* Bullet list variants */
.ufp-el-list.ufp-list-disc    { list-style-type: disc; }
.ufp-el-list.ufp-list-circle  { list-style-type: circle; }
.ufp-el-list.ufp-list-square  { list-style-type: square; }
.ufp-el-list.ufp-list-none    { list-style-type: none; padding-right: 0; }

/* Custom Urdu bullet characters */
.ufp-el-list.ufp-list-urdu-dash    { list-style-type: none; padding-right: 0; }
.ufp-el-list.ufp-list-urdu-star    { list-style-type: none; padding-right: 0; }
.ufp-el-list.ufp-list-urdu-diamond { list-style-type: none; padding-right: 0; }
.ufp-el-list.ufp-list-urdu-arrow   { list-style-type: none; padding-right: 0; }

.ufp-el-list.ufp-list-urdu-dash    li::before { content: "— "; }
.ufp-el-list.ufp-list-urdu-star    li::before { content: "✦ "; }
.ufp-el-list.ufp-list-urdu-diamond li::before { content: "◆ "; }
.ufp-el-list.ufp-list-urdu-arrow   li::before { content: "← "; }

/* Numbered list variants */
.ufp-el-list.ufp-list-decimal     { list-style-type: decimal; }
.ufp-el-list.ufp-list-lower-alpha { list-style-type: lower-alpha; }
.ufp-el-list.ufp-list-upper-alpha { list-style-type: upper-alpha; }
.ufp-el-list.ufp-list-lower-roman { list-style-type: lower-roman; }
.ufp-el-list.ufp-list-upper-roman { list-style-type: upper-roman; }

/* Urdu Eastern-Arabic numerals (۱، ۲، ۳) */
.ufp-el-list.ufp-urdu-numerals {
    list-style-type: none;
    padding-right: 0;
    counter-reset: none;
}
.ufp-urdu-num {
    font-family: inherit;
    font-feature-settings: "lnum";
    margin-left: 0.4em;
    opacity: 0.85;
    font-weight: inherit;
}

/* Marker colour (modern browsers) */
.ufp-el-list li::marker {
    font-family: inherit;
}

/* Divider between items */
.ufp-el-list.ufp-list-divider li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

/* Nested lists */
.ufp-el-list ul,
.ufp-el-list ol {
    padding-right: 1.4em;
    padding-left: 0;
    margin-top: 0.4em;
}

/* Shortcode list styles (used by [urdu_list]) */
.ufp-list {
    direction: rtl;
    text-align: right;
    padding-right: 1.8em;
    padding-left: 0;
}
.ufp-list li { margin-bottom: 0.45em; }