/* =============================================================================
   The language control.

   The theme renders Polylang's switcher in the top bar at 10px, and hides the
   top bar entirely below 992px. Measured 2026-09-07: on desktop the two links
   were 10px against a 16px body, and "اردو" was 15px wide; at 375px neither
   link was visible at all, so a phone visitor had no way to change language.

   This is a readable control in the top bar on desktop and in the responsive
   header on mobile. The main header was tried first and rejected on evidence:
   see the desktop section below.
   ========================================================================== */

.fl-lang{
  display:inline-flex;align-items:center;gap:2px;
  font-family:var(--fl-latin, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  line-height:1;white-space:nowrap;
}

.fl-lang__a{
  display:inline-block;
  padding:7px 11px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--fl-hdr-txt,#2b2620);
  opacity:.62;
  transition:opacity .15s, background-color .15s, color .15s;
}
.fl-lang__a:hover,
.fl-lang__a:focus-visible{opacity:1;text-decoration:none;color:var(--fl-hdr-txt,#2b2620)}

/* The active language is stated, not merely emphasised: a visitor should be able
   to tell which one they are reading without comparing two shades of grey. */
.fl-lang__a.is-current{
  opacity:1;
  background:var(--fl-acc,#1B4332);
  color:#fff;
}
.fl-lang__a.is-current:hover,
.fl-lang__a.is-current:focus-visible{color:#fff}

/* Urdu is set MUCH larger than the Latin, and that is not a mistake.
   Nastaliq carries far less ink per em than a Latin face: measured 2026-09-07,
   "ENGLISH" at 14px system-ui has 10.3px of ink height, while "اردو" at the
   old 15px Jameel had only 8.1px - so at nominally similar sizes the Urdu read
   as noticeably the smaller of the two. 24px brings its ink to 13.0px, a little
   above the Latin, which is right because Nastaliq's strokes are also thinner.
   letter-spacing would break the cursive joins, so it is explicitly cleared. */
.fl-lang__a[lang^="ur"]{
  font-family:var(--nastaliq,"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif);
  font-size:24px;
  line-height:0;
  letter-spacing:normal;
  padding-top:6px;padding-bottom:20px;
}

/* Why line-height:0 and that lopsided padding.
   Jameel's line box is far taller than its em and its ink sits low inside it,
   so line-height cannot be used to position the glyphs the way it can for a
   Latin face. Left on line-height:1 the label rendered about 11px too low and
   dropped clean out of the pill background - invisible until the Urdu was the
   selected item and the pill actually had a colour. Checked in Chrome with the
   anchor outlined, at both directions: zeroing the line box and pushing the
   difference into padding-bottom puts the ink in the middle of the pill and
   levels it with the Latin. The numbers differ per context because each one
   sets a different pill height. */

/* --- desktop: centred in the top bar --------------------------------------- */
/* Deliberately NOT the main header's right slot: the theme sizes the centred
   nav from that slot's distance to the container centre, so anything placed
   there is taken straight out of the menu's width budget. Measured: a 127px
   control cost 272px of budget and hid three top-level items.

   The control is a direct child of .vlog-top-bar, not of .vlog-slot-r. That
   matters: the slot is itself position:absolute, so it becomes the containing
   block, and centring inside it lands 552px off the bar's centre. Parented to
   the bar, left:50% resolves against the full 1280px bar and coincides with the
   1140px container's centre at 640. Measured after: offset from centre 0, with
   6px clearance above and below in the 44px bar.

   left/translateX is symmetric, so unlike the mobile block below this needs no
   logical property - it centres identically in LTR and RTL. */
.vlog-top-bar{position:relative}
.vlog-top-bar > .fl-lang{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  z-index:5;
}
.vlog-top-bar .fl-lang__a{
  color:var(--fl-topbar-txt,#f4ecdc);
  padding:5px 12px;
  font-size:14px;
}
.vlog-top-bar .fl-lang__a[lang^="ur"]{font-size:24px;line-height:0;padding-top:6px;padding-bottom:20px}
.vlog-top-bar .fl-lang__a.is-current{
  background:rgba(255,255,255,.16);
  color:#fff;
}

/* --- mobile: a strip of its own, directly under the header ----------------- */
/* The control used to sit beside the hamburger, because the logo owns the exact
   centre of the responsive header and there is nothing to be done about that
   inside a single 50px row. A strip below the row gives it the whole width, so
   it can be centred properly and reads as the same object as the desktop top
   bar - same green, same pills.

   It costs nothing in layout: measured at 390px, the theme already leaves a
   50px gap between the header row (0-50) and the content (100), and the 36px
   strip drops into it. Content stays at 100 either way. */
.fl-langstrip{
  display:flex;align-items:center;justify-content:center;
  background:var(--fl-acc,#1B4332);
  padding:5px 12px;
  position:relative;z-index:1;
}
/* Undo any absolute placement inherited from an earlier version. */
.fl-langstrip .fl-lang{position:static;transform:none;inset:auto}
.fl-langstrip .fl-lang__a{
  color:var(--fl-topbar-txt,#f4ecdc);
  padding:5px 14px;
  font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;
}
.fl-langstrip .fl-lang__a[lang^="ur"]{
  font-size:24px;line-height:0;padding-top:6px;padding-bottom:20px;
  text-transform:none;letter-spacing:normal;
}
.fl-langstrip .fl-lang__a.is-current{
  background:rgba(255,255,255,.16);
  color:#fff;
}

/* The strip stands aside while the mobile menu is open.
   The drawer is position:absolute at top:70px, which runs 16px into the strip
   and takes the bottom of both pills with it. Checked with elementFromPoint:
   from y=70 downwards the menu wins the hit test, so the control was clipped
   AND unclickable whenever the menu was open. Moving the drawer down instead
   drags the hamburger with it - the trigger lives inside that wrapper, and it
   jumped from y=13 to y=49. Hiding the strip costs nothing: the drawer covers
   the page anyway, and the strip is back the instant the menu closes. */
.vlog-responsive-header:has(.dl-menuopen) .fl-langstrip{display:none}

/* Desktop uses the top bar. The strip lives inside .vlog-responsive-header,
   which the theme hides above 992px, so this is belt and braces. */
@media(min-width:992px){.fl-langstrip{display:none}}

/* The drawer positions itself against this. */
.vlog-responsive-header{position:relative}

/* Hide the theme's own 10px switcher once ours is in place, so the same choice
   is not offered twice in two sizes. Only when ours actually rendered. */
body.fl-lang-ready .vlog-top-bar #menu-language-bar{display:none}

/* --- first-visit banner --------------------------------------------------- */
/* Fixed to the bottom of the viewport, not in the flow.
   The plugin prints it on wp_footer, so in the document it lands after the
   site footer. Measured 2026-09-07 on the home page: 44,088px down a 50,236px
   page on desktop, 10,346 of 10,436 at 375px. In the flow it was, in practice,
   invisible. Fixed placement makes it show wherever the reader is, and z-index
   9500 clears the WhatsApp bubble's 9000. */
.fl-langbar{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;
  background:var(--fl-acc,#1B4332);
  color:#fff;
  font-family:var(--fl-latin, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size:14px;line-height:1.4;
  position:fixed;inset-inline:0;bottom:0;z-index:9500;
  box-shadow:0 -2px 16px rgba(0,0,0,.22);
}

/* The WhatsApp bubble is fixed bottom-right at z-index 9000 and would sit on
   top of the close button. Hide it for the moment the prompt is up; it is a
   one-time question and comes straight back. */
body.fl-langbar-on .joinchat{display:none}
.fl-langbar__t{opacity:.92}
.fl-langbar__a{
  display:inline-block;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;text-decoration:none;font-weight:600;font-size:14px;
  transition:background-color .15s;
}
.fl-langbar__a:hover,.fl-langbar__a:focus-visible{background:rgba(255,255,255,.26);color:#fff;text-decoration:none}
.fl-langbar__a[lang^="ur"]{
  font-family:var(--nastaliq,"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif);
  font-size:24px;line-height:0;letter-spacing:normal;padding-top:8px;padding-bottom:22px;
}
.fl-langbar__x{
  position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#fff;opacity:.7;cursor:pointer;
  font-size:20px;line-height:1;padding:4px 8px;
}
.fl-langbar__x:hover{opacity:1}
@media(max-width:560px){
  .fl-langbar{font-size:13px;gap:10px;padding:10px 34px 10px 12px}
  .fl-langbar__t{width:100%;text-align:center}
}

/* Nothing renders until the script has decided what to show, so a cached page
   never flashes a banner at someone who already chose. */
.fl-langbar[hidden]{display:none}

/* --- the legal line, and the analytics consent bar ------------------------- */
/* Both are printed on wp_footer, so in the document they sit after the site
   footer. That is where a legal line belongs anyway. */
.fl-legal{
  /* The theme floats its own footer (float:left, 398px tall). Without clearing it,
     this block's line box is pushed below the float and the element measures 439px
     instead of 56: 398 of empty green, then the link. Measured on the live page. */
  clear:both;
  text-align:center;
  padding:14px 16px 22px;
  background:var(--fl-acc,#1B4332);
  font-family:var(--fl-latin, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size:13px;line-height:1.5;
}
.fl-legal__a{
  color:var(--fl-topbar-txt,#f4ecdc);
  opacity:.78;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  padding-bottom:1px;
}
.fl-legal__a:hover,.fl-legal__a:focus-visible{opacity:1;color:#fff;text-decoration:none}
.fl-legal[dir="rtl"] .fl-legal__a{
  font-family:var(--nastaliq,"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif);
  font-size:17px;letter-spacing:normal;
}

/* The consent bar is fixed, like the language one, and shares its z-index band.
   Only one of the two is ever on screen: the language question comes first, and
   this appears once that has been answered. */
.fl-consent{
  position:fixed;inset-inline:0;bottom:0;z-index:9500;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;
  background:#20362c;color:#fff;
  font-family:var(--fl-latin, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size:13.5px;line-height:1.45;
  box-shadow:0 -2px 16px rgba(0,0,0,.22);
}
.fl-consent[hidden]{display:none}
.fl-consent__t{opacity:.93;max-width:640px}
.fl-consent[dir="rtl"] .fl-consent__t{
  font-family:var(--nastaliq,"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif);
  font-size:17px;letter-spacing:normal;line-height:1.9;
}
.fl-consent__a{
  appearance:none;border:0;cursor:pointer;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.18);color:#fff;
  font:inherit;font-weight:600;
  transition:background-color .15s;
}
.fl-consent__a:hover,.fl-consent__a:focus-visible{background:rgba(255,255,255,.3)}
.fl-consent__a--no{background:transparent;opacity:.72;font-weight:400;text-decoration:underline}
.fl-consent__a--no:hover{background:transparent;opacity:1}
.fl-consent[dir="rtl"] .fl-consent__a{
  font-family:var(--nastaliq,"Jameel Noori Nastaleeq","Noto Nastaliq Urdu",serif);
  font-size:17px;padding-top:5px;padding-bottom:9px;
}
/* The WhatsApp bubble is fixed bottom-right at z-index 9000; stand it aside while
   the question is up, exactly as the language bar does. */
body.fl-consent-on .joinchat{display:none}
@media(max-width:560px){
  .fl-consent{font-size:13px;gap:9px;padding:10px 12px}
  .fl-consent__t{width:100%;text-align:center}
}