/* ============================================================================
   Urdu news theme - Jadojehad
   Deep maroon / charcoal, self-hosted Nastaliq + Naskh, true RTL, dark mode.
   Loaded only on the Urdu front-end. The admin panel stays LTR/English.
   ========================================================================== */

:root {
  /* Fonts - Nastaliq for headlines, Naskh for reading, Sans for chrome */
  --font-headline: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Mehr Nastaliq Web', serif;
  --font-body: 'Noto Naskh Arabic', 'Adobe Arabic', 'Segoe UI', sans-serif;
  --font-ui: 'Noto Sans Arabic', 'Segoe UI', sans-serif;

  --size-hero-headline: 34px;
  --size-headline: 24px;
  --size-subhead: 19px;
  --size-body: 18px;
  --size-caption: 15px;
  --size-ui: 15px;

  /* Urdu needs more leading than Latin - Nastaliq especially, it descends hard */
  --lh-headline: 1.5;
  --lh-body: 1.9;

  --color-primary: #7A1E2B;
  --color-primary-dark: #591520;
  --color-bg: #FBF9F6;          /* warm off-white, kinder over a long read */
  --color-surface: #FFFFFF;
  --color-bg-dark: #121212;
  --color-surface-dark: #1C1C1C;
  --color-text: #1C1C1C;
  --color-text-dark: #E8E6E3;
  --color-muted: #6B6B6B;
  --color-muted-dark: #A9A6A2;
  --color-border: #E4DED8;
  --color-border-dark: #2E2E2E;

  /* All five clear WCAG AA against white text (5.9:1 worst case, editorial) */
  --tag-news: #7A1E2B;
  --tag-pakistan: #1D4E4E;
  --tag-international: #4A5A8A;
  --tag-editorial: #8A5A1D;
  --tag-culture: #5A4A8A;
}

/* --------------------------------------------------------------- typography */
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  direction: rtl;
  text-align: right;
  /* Urdu must not be broken mid-word: a Nastaliq ligature chain is one unit */
  word-break: keep-all;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .headline, .article-title, .kt-headline, .kt-hero-title, .home-section-title {
  font-family: var(--font-headline) !important;
  line-height: var(--lh-headline);
  /* Nastaliq sits low in its em box; without this the descenders clip */
  padding-bottom: 0.12em;
}

h1, h1.hero, .kt-hero-title { font-size: var(--size-hero-headline); }
h2, .section-headline, .home-section-title { font-size: var(--size-headline); }
h3 { font-size: var(--size-subhead); }

.article-body, .article-content, .entry-content, .post-content {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

/* Chrome - nav, buttons, dates, bylines - stays on the sans face */
.byline, .date, .meta, .kt-meta, .article-meta, .bbc-date-bar,
.bbc-nav, .bbc-nav a, .kt-nav-menu, .kt-nav-menu a, .btn, button, .badge, .tag, .pagination {
  font-family: var(--font-ui) !important;
}
.byline, .date, .meta, .kt-meta, .article-meta {
  font-size: var(--size-ui);
  color: var(--color-muted);
}
figcaption, .caption, .photo-caption { font-size: var(--size-caption); color: var(--color-muted); }

/* Bylines shipped as #767676, which is 4.32:1 on the warm off-white - just under AA.
   #6B6B6B takes it to 5.07:1. */
.bbc-hero-meta, .bbc-story-meta, .bbc-card-meta, .bbc-meta {
  color: var(--color-muted) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--size-ui);
}

/* ------------------------------------------------------- real headline sizes
   The theme sizes its headings with .bbc-* selectors, which outrank a plain h1,
   so the type scale above never reached them. On a phone the lead headline was
   coming out at 16.8px - smaller than the body text under it. These pin the
   actual elements, and scale them properly down to a 320px screen. */
.bbc-hero h1, .bbc-hero h1 a { font-size: var(--size-hero-headline) !important; line-height: var(--lh-headline) !important; }
h1.article-headline { font-size: 32px !important; line-height: var(--lh-headline) !important; }
.bbc-story h3, .bbc-story h3 a { font-size: 20px !important; line-height: var(--lh-headline) !important; }
.bbc-card h4, .bbc-card h4 a { font-size: var(--size-subhead) !important; line-height: var(--lh-headline) !important; }

/* Article body was 16px/2.0 - the brief asks for 18px/1.9 */
.article-content, .article-content p, .article-body, .article-body p {
  font-size: var(--size-body) !important;
  line-height: var(--lh-body) !important;
  font-family: var(--font-body) !important;
}

@media (max-width: 767.98px) {
  h1.article-headline { font-size: 27px !important; }
  .bbc-story h3, .bbc-story h3 a { font-size: 18px !important; }
}
@media (max-width: 575.98px) {
  h1.article-headline { font-size: 24px !important; }
}

/* ------------------------------------------------------------------ maroon */
.bbc-nav-bar, .kt-nav-bar, .category-nav, .navbar-dark.bg-danger { background: var(--color-primary) !important; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }
.btn-primary, .btn-danger, .btn-subscribe {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-danger:hover, .btn-subscribe:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
}

/* Category tags */
.tag-news, .cat-news { background: var(--tag-news); color: #fff; }
.tag-pakistan, .cat-pakistan { background: var(--tag-pakistan); color: #fff; }
.tag-international, .cat-international { background: var(--tag-international); color: #fff; }
.tag-editorial, .cat-editorial { background: var(--tag-editorial); color: #fff; }
.tag-culture, .cat-culture { background: var(--tag-culture); color: #fff; }

/* ----------------------------------------------------------- RTL correctness
   direction:rtl fixes text flow, not the widgets. Anything that points has to
   be flipped by hand: chevrons, back arrows, carousel controls, "read more". */
[dir="rtl"] .fa-chevron-right:not(.no-flip),
[dir="rtl"] .fa-chevron-left:not(.no-flip),
[dir="rtl"] .fa-arrow-right:not(.no-flip),
[dir="rtl"] .fa-arrow-left:not(.no-flip),
[dir="rtl"] .fa-angle-right:not(.no-flip),
[dir="rtl"] .fa-angle-left:not(.no-flip),
[dir="rtl"] .fa-long-arrow-alt-right:not(.no-flip),
[dir="rtl"] .fa-caret-right:not(.no-flip),
[dir="rtl"] .fa-caret-left:not(.no-flip) { transform: scaleX(-1); }

/* ...but never flip a logo, a play button or a photo */
[dir="rtl"] img, [dir="rtl"] .fa-play, [dir="rtl"] .no-flip { transform: none !important; }

[dir="rtl"] .breadcrumb { padding-right: 0; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem; padding-left: 0; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-left: 0.5rem; padding-right: 0; content: "\2039"; }

[dir="rtl"] .pagination { flex-direction: row-reverse; justify-content: flex-end; padding-right: 0; }
[dir="rtl"] .pagination .page-item { direction: rtl; }

[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; }
/* except the ones that are genuinely LTR data */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"] { direction: ltr; text-align: right; }

[dir="rtl"] .form-check, [dir="rtl"] .form-check-input { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .input-group > .form-control { border-radius: 0 4px 4px 0; }
[dir="rtl"] .input-group > .btn { border-radius: 4px 0 0 4px; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.2rem; padding-left: 0; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }

/* "4 days ago" was rendering as "days ago 4": the string is pure English but the box is
   direction:rtl, so the leading number got laid out last. The content is Latin - give the box
   an LTR base direction and keep it isolated so it can't disturb the Urdu around it.
   (Scoped to this one class: the other meta lines mix Urdu + English and must stay RTL.) */
.hero-card-meta {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: right;
}

/* Latin runs inside Urdu text (names, acronyms, URLs) must stay LTR */
[dir="rtl"] .ltr, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .latin {
  direction: ltr; unicode-bidi: embed; text-align: left; font-family: var(--font-ui);
}

/* --------------------------------------------------------------- responsive
   Nastaliq runs visually longer per character than Latin, so a headline that
   fits on desktop wraps to three lines on a 320px phone. Scale it down. */
@media (max-width: 575.98px) {
  :root {
    --size-hero-headline: 25px;
    --size-headline: 20px;
    --size-subhead: 17px;
    --size-body: 17px;
  }
  body { line-height: 1.95; }
  h1, h2, h3, .article-title, .kt-headline, .kt-hero-title { padding-bottom: 0.18em; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  :root { --size-hero-headline: 29px; --size-headline: 22px; }
}

/* The category strip scrolls sideways on a phone instead of being clipped */
@media (max-width: 767.98px) {
  .bbc-nav, .kt-nav-menu ul, .category-nav ul {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .bbc-nav::-webkit-scrollbar, .kt-nav-menu ul::-webkit-scrollbar { display: none; }
}

/* -------------------------------------------------------------- dark mode
   Driven by the manual toggle (body.dark-mode), not the OS - see header.ejs.
   Shared/office devices often can't set system dark, but readers still want it. */
body.dark-mode {
  background: var(--color-bg-dark) !important;
  color: var(--color-text-dark) !important;
}
body.dark-mode .card, body.dark-mode .kt-card, body.dark-mode .article-card,
body.dark-mode .sidebar, body.dark-mode .widget, body.dark-mode .bg-light,
body.dark-mode .bg-white { background: var(--color-surface-dark) !important; color: var(--color-text-dark) !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode .article-title, body.dark-mode .kt-headline { color: var(--color-text-dark) !important; }
body.dark-mode p, body.dark-mode .article-body, body.dark-mode .article-content { color: var(--color-text-dark) !important; }
body.dark-mode .byline, body.dark-mode .date, body.dark-mode .meta,
body.dark-mode .text-muted { color: var(--color-muted-dark) !important; }
body.dark-mode a { color: #E9A0AC; }          /* maroon is unreadable on charcoal - lift it */
body.dark-mode a:hover { color: #F5C4CC; }
body.dark-mode .btn-primary, body.dark-mode .btn-danger, body.dark-mode .btn-subscribe {
  background: #9E2938 !important; border-color: #9E2938 !important; color: #fff !important;
}
body.dark-mode hr, body.dark-mode .border-bottom, body.dark-mode .border-top,
body.dark-mode .card { border-color: var(--color-border-dark) !important; }
body.dark-mode img { filter: brightness(0.92); }

/* This theme names its own boxes (bbc-*), so the generic .card rules above never touched them -
   the story cards stayed pure white on a charcoal page. And the old dark palette was navy blue,
   not charcoal. Both fixed here. */
body.dark-mode .bbc-card, body.dark-mode .bbc-story, body.dark-mode .bbc-hero,
body.dark-mode .bbc-most-read, body.dark-mode .bbc-sidebar, body.dark-mode .bbc-section,
body.dark-mode .bbc-latest, body.dark-mode .bbc-list {
  background: var(--color-surface-dark) !important;
  color: var(--color-text-dark) !important;
  border-color: var(--color-border-dark) !important;
}
body.dark-mode .bbc-topbar { background: var(--color-bg-dark) !important; border-bottom-color: var(--color-border-dark) !important; }
body.dark-mode .bbc-date-bar { background: var(--color-surface-dark) !important; color: var(--color-muted-dark) !important; border-bottom-color: var(--color-border-dark) !important; }
body.dark-mode .bbc-card h1, body.dark-mode .bbc-card h2, body.dark-mode .bbc-card h3,
body.dark-mode .bbc-card h4, body.dark-mode .bbc-card a, body.dark-mode .bbc-story h3,
body.dark-mode .bbc-most-read a, body.dark-mode .bbc-hero h1 { color: var(--color-text-dark) !important; }
/* meta was #767676 on #121212 = 4.0:1, under AA. Lift it. */
body.dark-mode .bbc-hero-meta, body.dark-mode .bbc-story-meta, body.dark-mode .bbc-card-meta,
body.dark-mode .bbc-meta { color: var(--color-muted-dark) !important; }
body.dark-mode .bbc-section-title, body.dark-mode .bbc-section-header { color: var(--color-text-dark) !important; }

/* The headline TEXT is an <a> inside the h1/h3, and the theme paints it #1a1a1a !important -
   so in dark mode the lead story was black-on-charcoal, i.e. invisible. A headline is text,
   not a link: it takes the body text colour, not the link colour. */
body.dark-mode h1 a, body.dark-mode h2 a, body.dark-mode h3 a, body.dark-mode h4 a,
body.dark-mode .bbc-hero h1 a, body.dark-mode .bbc-story h3 a, body.dark-mode .bbc-card h4 a,
body.dark-mode .bbc-most-read a, body.dark-mode .bbc-list a,
body.dark-mode .bbc-sidebar-title, body.dark-mode .bbc-hero-title {
  color: var(--color-text-dark) !important;
}
body.dark-mode h1 a:hover, body.dark-mode h2 a:hover, body.dark-mode h3 a:hover,
body.dark-mode .bbc-most-read a:hover { color: #E9A0AC !important; }

/* ---------------------------------------------------------------- a11y */
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
body.dark-mode :focus-visible { outline-color: #E9A0AC; }
.skip-link { position: absolute; right: -9999px; }
.skip-link:focus { right: 8px; top: 8px; z-index: 9999; background: var(--color-primary); color: #fff; padding: 8px 14px; }