@charset "utf-8";

/* === 1) Font faces === */
@font-face {
  font-family: 'UthmanTNB v2 0';
  src: url("../fonts/UthmanTNB_v2-0.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KufiExt';
  src: url("../fonts/KFGQPC KufiExtV11.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Symbols1';
  src: url("../fonts/Symbols1_Ver02.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UthmanicHafs';
  src: url("../fonts/UthmanicHafs_v2-1.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'UthmanTN';
  src: url("../fonts/UthmanTN_v2-0.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === 2) Design tokens === */
:root {
  --bg: #ffffff;
  --fg: #111;
  --muted: #6b7280;
  --stroke: #e5e7eb;
  --accent: #111;
  --panel:#fff;
  --ink:#000;
  --rule:#e0d6cc; 
  --dur:0.6s; 
  --menu-w: 392px; 
  --top-gap:56px; 
  --bottom-pad: 100px;
   --dur-open: 0.60s;   /* same as today for opening */
  --dur-close: 0.78s;  /* a touch longer so close feels natural on iOS */

  /* Fluid font sizes */
  /*--fs-0: clamp(1rem, 0.95rem + 0.4vw, 1.241rem);*/
  --fs-0: clamp(1rem, 0.95rem + 0.48vw, 1.241rem);
  --fs-1: clamp(1.125rem, 1.05rem + 0.6vw, 1.375rem);
  --fs-2: clamp(1.35rem, 1.2rem + 1.2vw, 1.75rem);
  --fs-3: clamp(1.75rem, 1.5rem + 1.8vw, 2.25rem);
  --fs-4: clamp(2.25rem, 1.9rem + 2.6vw, 3rem);

  --lh-tight: 1.3;
  --lh-body: 1.7;

  /* Spacing scale */
  --s-a: 0.125rem;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;

  --container: min(100%, 1600px);
  --side-pad: clamp(12px, 3vw, 28px);

/* one token to control the strip’s side padding everywhere */
 --strip-pad: clamp(16px, 3vw, 28px);  /* min 16px, grows up to 28px */
--edge-pad: 2rem; 
--strip-h: 48px;   /* desktop */
  --shadow-h: 3px;  /* thickness of the shadow layer */
	--logo-w: 26px;
  --strip-gap: var(--s-3);
	--edge-pad: 32px;
}

/* Remove tap flash/highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}



@media (max-width: 768px){
  :root{ --strip-h: 46px; }  /* mobile */
}

/* Global link reset */
a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

/* Hide scrollbar in WebKit */
::-webkit-scrollbar {
  display: none;
}


/* === 3) Base reset === */
* { box-sizing: border-box; }
html, body { height: 100%; overflow: auto; /* allow scroll but hide bars */}
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'UthmanTNB v2 0', 'UthmanTN', 'UthmanicHafs', 'KufiExt', system-ui, sans-serif;
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  direction: rtl;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }

/* === 4) Containers === */
.site-wrap {
  width: var(--container);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}

/* === 5) Headings === */
h1, h2, h3 {
  font-family: 'UthmanTNB v2 0', 'KufiExt', serif;
  font-weight: 400;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-6);
  color: var(--fg);
}
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }

/* === 6) Utilities === */
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
::selection { background: #e5e7eb; color: inherit; }

/* Centered header/container where the hamburger sits */
  .site-container{
    margin:0 auto; max-width:1605px; position:static; min-height:0; padding-inline: 0; margin-top: 6px;
  }

  /* Controller checkbox */
  #menu-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

  /* HAMBURGER — your exact SVG, positioned at the right of the container */
  .menu-btn{
    position:static; inset: auto; 
    width:30px; cursor:pointer;
    place-items:center; z-index:1002;
    -webkit-tap-highlight-color:transparent; top: 50%; transform: none;
	 height: 100%;
	  padding: 0; margin: 0; justify-self:end; align-self:stretch;
  display:flex; 
	  align-items:center;
  justify-content:flex-start;           /* push SVG to the right edge */
  inline-size:auto;                     /* remove the fixed 32px box */
  block-size:100%;
  border:0;
  }



  .menu-btn svg{display:block}
  .icon-ham{
    opacity:1;
    transition:opacity var(--dur) cubic-bezier(.4,0,.2,1),
               transform var(--dur) cubic-bezier(.4,0,.2,1);
  }

.menu-btn .icon-ham{
  display:block;                        /* kills inline SVG whitespace */
  width:30px;                           /* your exact icon width */
  height:auto;
  /* optional 1px optical nudge if you still see a hairline gap: */
  /* margin-inline-end:-1px; */
}

  /* Fade/scale hamburger out when open */
  #menu-toggle:checked ~ .site-container .menu-btn .icon-ham{
    opacity:0; transform:scale(.92);
  }

  /* Dim backdrop */
  .backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    z-index:1000;	  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--dur-close) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear var(--dur-close);
  }

  #menu-toggle:checked ~ .backdrop{
opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity    var(--dur-open) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}

  /* PANEL — fixed to viewport so nothing peeks when closed */
  .menu{
    position:fixed; top:0; right:0; height:100dvh; width: var(--menu-w);
    background:var(--panel);
    z-index:1004; display:flex; flex-direction:column;  
	transform: translate3d(110%,0,0);   /* GPU path helps Safari feel smoother */
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;    /* prepare both props */
  transition:
    transform  var(--dur-close) cubic-bezier(.22,.61,.36,1),
    opacity    var(--dur-close) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear var(--dur-close),
    box-shadow var(--dur-close) cubic-bezier(.22,.61,.36,1);
	box-shadow: -2px 0 12px rgba(0, 0, 0, .18);
	  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  padding-top:    max(var(--s-4), env(safe-area-inset-top));
  }

  #menu-toggle:checked ~ .menu{ 
	  transform: translate3d(0,0,0);
  
  visibility: visible;
  pointer-events: auto;
  transition:
    transform  var(--dur-open) cubic-bezier(.22,.61,.36,1),
    opacity    var(--dur-open) cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s,
    box-shadow var(--dur-open) cubic-bezier(.22,.61,.36,1);
	  box-shadow: -2px 0 12px rgba(0, 0, 0, .18);
  }

  /* Menu header: X on the right, "الفهرس" perfectly centered */
  .menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 16px; 
    /* Keep some spacing before first item below */
    
	  padding: var(--s-4); margin-bottom: calc(var(--top-gap) - var(--s-10));
  }
  .menu-title{
    font-size: clamp(
    18px,
    calc(18px + ((100vw - 320px) * 0.01818)),
    20px
  ); color:#333; text-align:center;
    flex:1; font-family: 'KufiExt';
  }
  /* Spacer balances the centered title against the X width */
  .spacer{ width:22px; height:22px; }

  .close-fixed{
    width:22px; height:22px; display:grid; place-items:center; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .close-fixed svg{display:block}

  /* Menu list styles */
  nav.menu ul{list-style:none; margin:0; overflow:auto; padding: var(--s-2) 0 var(--bottom-pad) 0; /* <- extra bottom space */
}
  nav.menu li{ border-bottom: 0; position: relative; }
  nav.menu li:last-child{border-bottom:none} /* <- no line under last item */
  nav.menu a{display:block; text-decoration:none; color:#111; text-align:right; padding: var(--s-3) var(--s-4); font-size: clamp(
    15px,
    calc(15px + ( (100vw - 320px) * 0.02727 )),
    17px
  );}

/* 90% centered rule under each li */
nav.menu li::after{
  content:"";
  display:block;
  inline-size:90%;
  margin:0 auto;
  border-bottom:1px solid var(--rule);
}

nav.menu li:last-child::after{ display:none; }


/* Make every top-level row (link OR label) sit on the 90% rail */
nav.menu li > a,
nav.menu .section-label{
  inline-size:90%;
  margin:0 auto;

  /* layout: text on the right, arrow/logo on the far left */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--s-3);

  /* keep your existing vertical rhythm, but kill side pads
     so the rail width is the visual boundary */
  padding-block: var(--s-3);
  padding-inline: 0;

  text-align:right;
}

/* Keep caret pinned to the far left (already inside .section-label) */
nav.menu .section-label .section-title{ margin:0; }

/* First item logo on the far left (mirrors caret position) */
nav.menu .has-logo > .menu-link .logo-left svg{
  display:block;
  inline-size:18px; block-size:18px;
  opacity:.9;
}

/* Slightly larger touch target for label rows (caret sections) */
nav.menu .section-label{ cursor:pointer; }

/* Keep caret size consistent on the far left */
nav.menu .caret svg{ width:14px; height:14px; }
 /* nav.menu a:hover{background:#eaeaea}*/

/* Normal state */
nav.menu a,
nav.menu .section-label {
  color: var(--fg);             /* normal text color */
  transition: color .2s ease;   /* smooth transition */
}

nav.menu .chevron {
  color: var(--fg);             /* arrow same as text */
  transition: color .2s ease;
}

/* Hover effects only on devices that support hover (desktops/laptops) */
@media (hover: hover) and (pointer: fine) {
  /* Hover state: text + arrow both muted */
  nav.menu a:hover,
  nav.menu .section-label:hover {
    background: transparent;  /* no gray background */
    color: var(--muted);
  }

  nav.menu a:hover .chevron,
  nav.menu .section-label:hover .chevron {
    color: var(--muted);
  }

  nav.menu a:focus-visible,
  .section-label:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

  /* Submenus (CSS-only) */
  .sub-toggle{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  .section-label{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; user-select:none; text-align:right; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  }
  .section-title{margin: 0; font-size: clamp(
    14px,
    calc(14px + ( (100vw - 320px) * 0.02727 )),
    17px
  );}

  /* Carets on the LEFT: closed = down, open = up */
  .caret svg, .caret-2 svg{
    display:block; width:14px; height:14px; transform:rotate(0deg);
    transform-origin:50% 50%; transition:transform var(--dur) ease;
  }
  .sub-toggle:checked + label .caret svg{transform:rotate(180deg)}
  .sub-toggle-2:checked + label .caret-2 svg{transform:rotate(180deg)}

  .submenu{
    max-height:0; overflow:hidden; transition:max-height var(--dur) ease;
    background:rgba(0,0,0,0.03); 
  }

nav.menu .submenu{
  /* You already have background + transitions; keep them */
  /* Ensure it spans full width of the panel */
  margin: 0; padding-block: 0;
}
  .submenu a{padding: var(--s-3) calc(var(--s-4) + var(--s-1));}
  .sub-toggle:checked ~ .submenu{max-height:600px}

nav.menu .submenu a {
	font-size: clamp(
    13px,
    calc(13px + ( (100vw - 320px) * 0.02727 )),
    16px
  ); /*-webkit-text-stroke: 0.0115rem;*/
	display:block;
  inline-size:90%;
  margin:0 auto;
  padding: var(--s-3) 0;      /* vertical only; rail controls the width */
  text-align:right;
}

  /* Third-level example */
  .sub-toggle-2{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  .sub-label-2{
    display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; border-top:1px dashed var(--rule);
    background:rgba(0,0,0,0.02); text-align:right; font-size: clamp(
    13px,
    calc(13px + ( (100vw - 320px) * 0.02727 )),
    16px
  ); padding: var(--s-3) calc(var(--s-4) + var(--s-1)); /*-webkit-text-stroke: 0.0115rem;*/
  }
  .submenu-2{max-height:0; overflow:hidden; transition:max-height var(--dur) ease; background:rgba(0,0,0,0.02)}
  .sub-toggle-2:checked ~ .submenu-2{max-height:400px}

  @media (prefers-reduced-motion: reduce){
    .menu, .backdrop, .icon-ham, .submenu, .submenu-2, .caret svg, .caret-2 svg{transition:none}
  }

@media (max-width: 768px){
  :root { --menu-w: 100vw; }            /* requested: full width on mobile */
	.backdrop {
    background-color: transparent !important;
  }
}




.site-men {
    position: static;
    width: 100%;
    top: auto;
    left: 0;
    z-index: auto;
    background-color: #fff;
    border-bottom: none;
	margin: 0;
    padding: 0;
    border: 0;
}

.sm-css {
	position: relative;
    border-bottom: 1px solid #e2e2e2;
}

.sms-css {
    margin: 0 auto;
    max-width: 1605px;	
}


.asms-css {
		margin: 0 auto;
    max-width: 1605px;
    background: transparent;
    padding: var(--s-2) var(--s-4) 0;
    position: relative;
    border: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;  /* icon | title | spacer */
	align-items: center;
	min-block-size: 48px; 
	justify-content: center;
	min-height: 48px;
	padding-inline-end: var(--edge-pad);  /* right in RTL */
  padding-inline-start: var(--edge-pad);
	}

/* Spacer balances the grid so the center never shifts */
.asms-css::after{
  content: "";
  grid-column: 3;
  inline-size: 32px; block-size: 32px;  /* same footprint as .menu-btn */
}

.site-name {
	padding-top: 0;
	text-align: center;
	margin: 0;
    padding: 0;
    border: 0;
	visibility: visible;
	grid-column: 2;
  justify-self: center;
}

.snl-css {
	text-align: center;
	font-family: 'KufiExt';
	font-size: clamp(15px, calc(1.5vw + 12.333px), 20px);
	font-weight: 500;
	/*-webkit-text-stroke: 0.25px;
	-webkit-font-smoothing: antialiased;*/
	-webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.7);
	
}


/* ─────────────────────────────
   STRIP NAV — clean rewrite
   ──────────────────────────── */

.strip-nav{
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  min-block-size: var(--strip-h);
  /* the strip itself is NOT the scroller */
  overflow: visible;
  display: flex;
  justify-content: center; /* center the child grid on wide screens */
  min-height: 56px;
}

.strip-grid{
  display: grid;
  grid-template-columns: max-content 1fr max-content; /* [logo] [center] [spacer] */
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-2);
  padding-inline: var(--edge-pad); /* keeps 2rem breathing room at both edges */
  min-block-size: var(--strip-h);
  overflow-x: visible;
}

/* Right logo + matching spacer */
.strip-logo{
  justify-self: start;          /* start = right in RTL */
  inline-size: var(--logo-w);            /* your SVG width */
  display: flex; align-items: center;
}
.strip-logo svg{ display:block; inline-size:var(--logo-w); block-size:var(--logo-w); transform: translateX(2px); }
.strip-spacer{ inline-size:var(--logo-w); block-size:1px; }

/* Center cluster: [title] | [divider] | [list] */
.strip-center{
  display: grid;
  grid-template-columns: max-content 1px minmax(0,1fr);
  align-items: center;
  column-gap: var(--strip-gap);
  justify-self: center;
  min-inline-size: 0; /* allow the list cell to shrink */
  padding-inline-start: 0px !important; /* iOS-friendly */
    padding-left: 12px !important;         /* hard-RTL fallback */
}

/* Title + arrow */
.strip-title{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  /*color: var(--muted);*/
  font-family: 'KufiExt', sans-serif;
  font-size: clamp(13px, 1.2vw, 14px);
  color: #111;
   -webkit-text-stroke: 0.3px #00000070;
    font-weight: 500;  
}


/* Arrow: visually to the left of the title, pointing toward the list */
.strip-title .arrow{
  display: inline-block;
  line-height: 1;
  opacity: .75;
  font-size: 1.1875rem;
  font-family: 'UthmanTNB v2 0';
    transform: translateY(2px);
	margin-right: 4px;
}

/* Divider */
.strip-divider{
  inline-size:1px;
  block-size:0.9375rem;
  background: var(--muted);
  opacity:.5;
}

/* Horizontal list — THIS is the horizontal scroller */
.strip-list{
  display:flex; align-items:baseline; /*gap: var(--s-a);*/
  margin:0; padding:0; list-style:none;
  white-space:nowrap;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  min-width:0;   /* allow shrink inside grid cell */
  direction: rtl;
  gap: 0;
}
.strip-list::-webkit-scrollbar{ display:none; }

.strip-list a:focus-visible,
.menu a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Items */
.strip-list .it{ flex:0 0 auto; scroll-snap-align:center; }
.strip-list .it a{
  display:inline-block; padding:.15rem .5rem; line-height:1.9;
  white-space:nowrap; text-decoration:none;
  /*color: var(--muted-color,#999);*/
  font-size: clamp(14px,1.6vw,16px);
  position:relative;
  -webkit-font-smoothing: antialiased;
}
.strip-list .it a[aria-current="page"]{ color: var(--fg); }
.strip-list .it a:not([aria-current="page"]):hover{ color: var(--muted-color,#999); }

/* Underline for first/active */
.strip-list .it:first-child a::after,
.strip-list .it a[aria-current="page"]::after{
  content:""; position:absolute; inset-block-end:0;
  left:50%; transform:translateX(-50%);
  inline-size:78%; block-size:1px; background:currentColor;
}

/* ===== Breakpoints ===== */


/* Hide logo under 1250px but keep balance until mobile snaps */
@media (max-width:1250px){
  .strip-logo{ display:none; pointer-events:none; }
  /*.strip-spacer{ inline-size:26px; }*/
}

/* 701–1082px: center everything; spacer not needed */
@media (max-width:1250px) and (min-width:701px){
  .strip-grid{ display:flex; align-items:center; justify-content:center; gap:var(--strip-gap); }
  .strip-spacer{ display:none; }
  /* Title stays visible, LIST scrolls if needed (already set). */
}

/* Above 700px: disable scroller on the grid itself */
@media (min-width: 701px){
  .strip-grid { overflow-x: visible; }
	.strip-shadow {
	top: 52px;
}
}

/* ≤700px: anchor under the menu icon (right in RTL) and scroll when needed */
@media (max-width:700px){
  .strip-logo{ display:none; }
  .strip-spacer{ inline-size:0; }
	.strip-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .strip-center{ scroll-snap-type:x proximity; justify-self:start;
    inline-size:max-content;
    max-inline-size:100%; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
	padding-inline-start: 0px !important; /* iOS-friendly */
    padding-left: 12px !important;         /* hard-RTL fallback */
	}
	
  .strip-list .it{ scroll-snap-align:center; }

  /* Push the whole row toward the right edge (menu icon) */
  .strip-nav{ justify-content:flex-end; min-height: 56px; }

  
  .strip-center::-webkit-scrollbar{ display:none; }
	.strip-title {
		flex-flow: column;
    gap: 0;
    align-items: start;
		font-weight: normal;
        -webkit-text-stroke: 0.125px;
		 line-height: 1.43;
	}
	
	.strip-divider {
block-size: 1.9rem;
}
}

.nav-border {
	border-bottom: 1px solid #e2e2e2;
}

/* sits under the nav; becomes sticky at the same scroll position */
.strip-shadow{
  position: sticky;
  top: 48px;          /* always exactly below the strip */
  height: var(--shadow-h);
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.28);
 background: #fff;
  z-index: 1;                   /* below the nav */
  pointer-events: none;
  margin-top: -10px;
}

/* Accessible hide (if you don’t already have one) */
.sr-only{
  position:absolute !important;
  inline-size:1px; block-size:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ——— Menu Search (RTL) ——— */
.menu-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-inline: var(--edge-pad);
  margin-block: var(--s-4) var(--s-3);
  flex-wrap: nowrap;       /* input shrinks instead of wrapping */
  direction: rtl;          /* input on right, button on left */
  font-size: 16px;         /* base scaling */
}

/* Input (first in markup → sits on the right in RTL) */
.menu-search .search-input {
  flex: 1 1 28rem;         /* grow/shrink nicely */
  min-inline-size: 9rem;
  max-inline-size: 100%;

  height: 35px;            /* fixed height */
  line-height: 35px;
  padding: 0 10px;

  font-family: "UthmanTNB v2 0", system-ui, sans-serif;
  font-size: clamp(14px, calc(14px + ((100vw - 320px) * 0.02727)), 17px);         /* actual typed text */
  color: var(--fg, #111);

  border: 1px solid var(--stroke);
  border-radius: 3px;
  background: var(--panel, #fff);
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent; /* iOS tap highlight off */
}

/* Placeholder font (different from typed text) */
.menu-search .search-input::placeholder {
  font-family: "UthmanTNB v2 0", system-ui, sans-serif;
  font-size: clamp(14px, calc(14px + ((100vw - 320px) * 0.02727)), 15px); 
  color: var(--muted);
  opacity: 1;
}

/* Remove any focus glow / border change */
.menu-search .search-input:focus,
.menu-search .search-input:focus-visible {
  outline: none !important;
  border-color: var(--stroke) !important;
  box-shadow: none !important;
}

/* Button (second in markup → left of input in RTL) */
.menu-search .search-btn {
  flex: 0 0 auto;
  height: 35px;            /* match input height */
  line-height: 35px;
  padding: 0 15px;

  font-family: "UthmanTNB v2 0", system-ui, sans-serif;
  font-size: 14px;         /* can be smaller than input */
  color: #fff;

  border: 1px solid var(--stroke);
  border-radius: 3px;
  background: #326891;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.menu-search .search-btn:hover   { filter: brightness(0.98); }
.menu-search .search-btn:active  { transform: translateY(1px); }
.menu-search .search-btn:focus,
.menu-search .search-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Narrow phones: shrink input gracefully */
@media (max-width: 360px) {
  .menu-search { gap: var(--s-2); }
  .menu-search .search-input { flex: 1 1 auto; }
}



.page-header {
  max-width: 600px;           /* fixed width container */
  margin: 4rem auto;          /* center horizontally + add top/bottom spacing */
  text-align: center;         /* center-align text */
  padding-inline: 1rem;       /* small padding for narrow screens */
  
}

.page-title {
  font-size: clamp(24px, 3vw, 36px);   /* responsive title size */
  font-weight: 700;                    /* strong emphasis */
  margin: 0 auto;      /* default margin */
  color: var(--fg, #111);              /* inherits your theme */
  
    line-height: inherit;
  font-family: 'KufiExt';
	
}

.page-subtitle {
  font-size: clamp(16px, 2vw, 20px);   /* smaller than title */
  font-weight: 400;                    /* lighter weight */
 margin: 0 auto;      /* default margin */
  color: var(--muted, #666);           /* muted tone */
  line-height: 2;
	margin-top: -4px; /* desktop default */
}

@media (max-width: 1300px) {
  .page-subtitle {
    margin-top: 0px !important; /* force exact zero */
  }
}

.symbol {
	font-family: 'Symbols1';
	font-size: clamp(18px, 2vw, 28px);
}

/*.nb{ white-space: nowrap; }*/

.page-title,
.page-subtitle {
  width: 600px;
  max-width: 100%;     /* prevent overflow */
  
  text-align: right;   /* always align text right */
  
}

.no-break {
  white-space: nowrap;
}

/* Small screens */
@media (max-width: 768px) {
  .page-title,
  .page-subtitle {
    /* keep the block narrower than the viewport by 2×edge-pad */
    max-width: calc(100% - (2 * var(--edge-pad)));
    width: auto;

    /* put the block 32px from BOTH edges */
    margin-inline-start: var(--edge-pad); /* left in RTL */
    margin-inline-end:   var(--edge-pad); /* right in RTL */

    text-align: right;   /* your desired alignment */
  }
	
	.page-title {
    margin-bottom: 0rem; /* adds room before subtitle */
  }
	
	.page-header {
    padding-inline: 0; /* remove it only on small screens */
  }
}

/* === Fresh layout for title / subtitle / actions that follows the subtitle width === */

/* 1) Let .page-header act as the "measure" box */
.page-header{
  /* center on desktop, but shrink to the content width */
  display: grid;
  justify-items: end;         /* right-align text blocks inside */
  gap: .5rem;

  inline-size: fit-content;   /* width = longest line inside */
  max-inline-size: clamp(450px, 48vw, 600px); /* your centered cap */
  margin-inline: auto;

  /* keep the 32px breathing room on phones */
  padding-inline: 0;
}

/* 2) Clamps you asked for (kept) + right align */
.page-title{
  font-size: clamp(24px, 3vw, 36px);
  text-align: right;
  margin: 0;
  line-height: 1.3;
}

.page-subtitle{
  font-size: clamp(16px, 2vw, 20px);
  color: var(--muted);
  line-height: 2;
  text-align: right;

  /* Try to keep one line as much as possible */
  display: inline-block;
  white-space: nowrap;
}

/* Allow the subtitle to wrap only when the viewport is too narrow */
@media (max-width: 560px){
  .page-subtitle{ white-space: normal; }
}

/* Respect your no-break spans */
.no-break{ white-space: nowrap; }

/* 3) Divider that always matches the measure (since it's inside .page-header) */
.page-subtitle + .article-actions{
  /*border-top: 1px solid var(--rule);*/
  padding-top: 0;
}

/* 4) Actions bar: one row on desktop (play on the right, two icons on the left) */
.article-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* play-wrap at right | icon-group at left */
  gap: .75rem;

  /* width = content (the measure) but never overflow the header */
  inline-size: 100%;
}

/* Keep buttons visually unstyled (you said “remove all button styling”) */
.article-actions .btn{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Group layout (matches your earlier class names) */
.play-wrap{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.icon-group{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* SVG + text scale with the subtitle via clamp */
.play-wrap svg,
.icon-group svg{
  inline-size: clamp(22px, 2.2vw, 28px);
  block-size: auto;
}

/* Keep the “استمع للحديث …” label next to the play button */
.play-label{
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--muted);
  white-space: nowrap; /* prevent lonely wrap */
}

/* 5) Mobile: keep 32px from edges, put play on its own row, icons below */
@media (max-width: 768px){
  .page-header{
    /* 32px each side, but still centered when there’s room */
    /*max-inline-size: calc(100% - 64px);*/
  }

  .article-actions{
    display: grid;
    grid-template-columns: 1fr;  /* stack rows */
    row-gap: .5rem;
  }

  .play-wrap{ justify-content: flex-start; }
  .icon-group{
    justify-content: flex-start; /* two icons adjacent on their own row */
  }
}

.page-header {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}

.measure {
  display: inline-block;       /* shrink-wrap around subtitle */
  width: fit-content;
  max-width: 100%;             /* prevents overflow on small screens */
  text-align: right;
}

/* Titles */
.page-title {
  font-size: clamp(24px, 3vw, 36px);
  margin: 0.5rem 0;
  color: #111;
}

.page-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  display: inline-block;       /* lets measure shrink-wrap */
  white-space: nowrap;         /* keep as one line when possible */
  color: #444;
}

.no-break {
  white-space: nowrap;
}

.symbol {
  margin: 0 0.25em;
  color: #888;
}

/* Actions */
.article-actions {
  /*border-top: 1px solid #ccc;*/
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.play-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.play svg {
  width: clamp(30px, 4vw, 55px);
  height: auto;
}

.icon-group {
  display: flex;
  gap: 0.5rem;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
}

/* ===== Layout shell ===== */
.page-header{
  display:flex;
  justify-content:center;
  /* 32px side breathing room on phones, comfortable on desktop */
  padding-inline: clamp(32px, 4vw, 64px);
  padding-block: clamp(16px, 3vw, 32px);
}

/* The trick: make the container shrink-wrap to the subtitle.
   Then everything inside wraps to that width. */
.measure{
  display:inline-block;      /* shrink-to-fit width */
  max-inline-size: 100%;
  text-align: right;
}

/* ===== Typography ===== */
.page-title{
  font-size: clamp(24px, 3vw, 36px);
  color:#111;
  margin: 0 0 .35rem 0;
  max-inline-size: 100%;     /* wrap to the subtitle-driven width */
  overflow-wrap: break-word;
  text-wrap: balance;
}
.page-subtitle{
  font-size: clamp(16px, 2vw, 20px);
  color:#444;
  display:inline;            /* inline so it sets shrink width */
  white-space: nowrap;       /* one line when possible */
}
.symbol{ color:#888; margin-inline: .25em; }
.no-break{ white-space: nowrap; }

/* When space is truly tight, allow subtitle to wrap;
   .no-break still protects important spans. */
@media (max-width: 700px){
  .page-subtitle{ white-space: normal; }
}

.strip-shadow {
	top: 52px;
}

/* ===== Actions (live inside .measure, track its width) ===== */
.article-actions{
  /* a small scale knob for all UI within actions */
  --ui: clamp(14px, 1.4vw, 16px);

  display: grid;
  grid-template-columns: 1fr auto; /* RTL: right group, left group */
  grid-template-areas:
    "play icons"
    "rule rule";
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .75rem;
}

/* Right cluster */
.play-wrap{
  grid-area: play;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0; /* prevent overflow in tight widths */
}
/* SVG scales with viewport via --ui */
.play svg{
  inline-size: clamp(32px, 6vw, 55px);
  block-size: auto;
}
.play-label{
  font-size: var(--ui);
  color:#111;
  white-space: nowrap;
}

/* Left cluster (two icons tight) */
.icon-group{
  grid-area: icons;
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  justify-self: start; /* start = left in RTL */
}

/* Divider (exactly as wide as .measure because it lives inside it) */
.actions-divider{
  grid-area: rule;
  border-block-start: 1px solid #ccc;
  margin-block-start: .5rem;
}

/* ===== Button reset (no UA styling) ===== */
.btn{
  all: unset;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  line-height: 1;
}
/* scale non-circle icons by the same knob */
.btn.share svg,
.btn.bookmark svg{
  inline-size: calc(var(--ui) * 1.4);
  block-size: auto;
}

/* ===== Mobile layout: two rows ABOVE the divider ===== */
@media (max-width: 700px){
  .article-actions{
    /* stack: first row = play, second row = icons, then divider */
    grid-template-columns: 1fr;
    grid-template-areas:
      "play"
      "icons"
      "rule";
    row-gap: .5rem;
  }
  .play-label{
    font-size: clamp(13px, 3.3vw, 15px);
  }
  .btn.share svg,
  .btn.bookmark svg{
    inline-size: clamp(18px, 5vw, 22px);
  }
  /* On phones the divider is still under the actions
     and matches the same subtitle-driven width */
}

/* ===== Optional: tighter mid-range so buttons stay on one row longer ===== */
@media (min-width: 701px) and (max-width: 980px){
  .play-label{ font-size: clamp(13px, 1.6vw, 15px); }
  .btn.share svg,
  .btn.bookmark svg{ inline-size: clamp(18px, 2.2vw, 22px); }
}

/* Container that will shrink to the subtitle width */
.measure{
  /* shrink-wrap to the widest intrinsic child (the subtitle span) */
  inline-size: fit-content;
  max-inline-size: 100%;
  text-align: right;
}

/* Fonts (keep your clamps) */
.page-title{ font-size: clamp(24px, 3vw, 36px); margin: 0 .0 0.4rem 0; max-inline-size: 100%; }
.page-subtitle{ font-size: clamp(16px, 2vw, 20px); margin: 0; }

/* The “measuring” inline box – THIS defines .measure width */
.subtitle-measure{
  display: inline-block;       /* shrink-wrap around subtitle text */
  white-space: nowrap;         /* keep it on one line when possible */
  color: #444;
}
.no-break{ white-space: nowrap; }
.symbol{ color:#888; margin-inline: 0; }

/* Actions live inside .measure, so they inherit its width */
.article-actions{ margin-top: .75rem; }

/* Divider stretches exactly to the subtitle width because it’s inside .measure */
.actions-divider{
  border-block-start: 1px solid #ccc;
  margin-block-start: .5rem;
  inline-size: 100%;
}

/* When space is tight, allow the subtitle to wrap (the container will
   then expand just enough to fit the first line; the divider follows). */
@media (max-width: 700px){
  .subtitle-measure{ white-space: normal; }
}

/* === MEASURED HEADER (authoritative rules; must come last) === */

/* Shell: centered on desktop; keeps 32px gutters on phones */
.page-header{
  display:flex;
  justify-content:center;
  padding-inline: clamp(32px, 4vw, 64px);
  padding-block: clamp(16px, 3vw, 32px);
}

/* The trick: .measure shrink-wraps to the subtitle text */
.measure{
  display:inline-block;         /* shrink-to-fit the widest inline child */
  inline-size: fit-content;
  max-inline-size: 100%;
  text-align: right;            /* right align RTL text */
}

/* Title & subtitle keep your clamps, but no hard widths */
.page-title{
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 .4rem 0;
  color:#111;
  line-height: 1.3;
  max-inline-size: 100%;
  text-wrap: balance;           /* nicer breaks when it must wrap */
}

.page-subtitle{
  font-size: clamp(16px, 2vw, 20px);
  margin: 0;
  color:#444;
}

/* This inline box **defines** .measure’s width */
.subtitle-measure{
  display:inline-block;
  white-space: nowrap;          /* try to keep one line on wide screens */
}

/* Respect your no-break spans */
.no-break{ white-space: nowrap; }

/* When it truly can’t fit, allow wrapping; measure will match line 1 */
@media (max-width: 700px){
  .subtitle-measure{ white-space: normal; }
}

/* Actions live *inside* .measure so they always share its width */
.article-actions{
  --ui: clamp(14px, 1.4vw, 16px);   /* scales icons/label together */

  display:grid;
  grid-template-columns: 1fr auto;  /* play | icons (RTL aware) */
  grid-template-areas:
    "play icons"
    "rule rule";
  align-items:center;
  gap:.5rem .75rem;
  margin-top:.75rem;
}

/* Play cluster (right in RTL) */
.play-wrap{
  grid-area: play;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}
.play svg{ inline-size: clamp(32px, 6vw, 55px); height:auto; }
.play-label{ font-size: var(--ui); color:#111; white-space: nowrap; }

/* Two icons cluster (left in RTL) */
.icon-group{
  grid-area: icons;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  justify-self:start;
}

/* The divider now **always** equals the subtitle/measure width */
.actions-divider{
  grid-area: rule;
  border-block-start: 1px solid #ccc;
  margin-block-start: .5rem;
  inline-size: 100%;
}

/* Button reset (no UA styling) + SVG scaling */
.btn{ all:unset; display:inline-flex; align-items:center; cursor:pointer; line-height:1; }
.btn.share svg, .btn.bookmark svg{ inline-size: calc(var(--ui) * 1.4); height:auto; }

/* Mobile: two rows (play on first; icons on second)—still above divider */
@media (max-width: 700px){
  .article-actions{
    grid-template-columns: 1fr;
    grid-template-areas:
      "play"
      "icons"
      "rule";
    row-gap:.5rem;
  }
}

/* === Make the subtitle define the width for everything === */
.page-header{
  /* keep your current centering & side padding;
     only the inner sizing changes */
  display:flex;
  justify-content:center;
  padding-inline: clamp(32px, 4vw, 64px);
  padding-block: clamp(16px, 3vw, 32px);
}

/* The “measured” box: width is driven by the subtitle only */
.measure{
  display: inline-grid;               /* a 1-column grid we can size */
  grid-template-columns: max-content; /* column’s width = intrinsic text width */
  justify-items: end;                 /* right-align content (RTL) */
  inline-size: fit-content;           /* shrink-wrap to that column */
  max-inline-size: 100%;
  text-align: right;
}

/* Put all header parts on that single sizing column */
.page-title,
.page-subtitle,
.article-actions,
.actions-divider{
  grid-column: 1;
  max-inline-size: 100%;
}

/* The subtitle text is the “sizer” */
.page-subtitle{
  font-size: clamp(16px, 2vw, 20px);
  margin: 0;
}
.page-subtitle .subtitle-measure{
  display:inline-block;
  white-space: nowrap;                /* one line when possible */
  color: var(--muted, #666);
	line-height: 1.8;
}

/* Crucial: prevent the title from affecting the container’s width */
.page-title{
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 .4rem 0;
  line-height: 1.3;
  contain: inline-size;               /* removes intrinsic width contribution */
  text-wrap: balance;                 /* nicer breaks when it must wrap */
}

/* Divider and actions now exactly match the subtitle width */
.actions-divider{
  border-block-start: 1px solid #ccc;
  margin-block-start: .5rem;
  inline-size: 100%;
}

/* Actions layout (kept), now naturally constrained by the measure */
.article-actions{
  --ui: clamp(14px, 1.4vw, 16px);
  display:grid;
  grid-template-columns: 1fr auto;    /* play | icons (RTL aware) */
  grid-template-areas:"play icons";
  align-items:center;
  gap:.5rem .75rem;
  margin-top:.75rem;
}
.play-wrap{ grid-area: play; display:inline-flex; align-items:center; gap:.5rem; min-width:0; }
.play svg{ inline-size: clamp(32px, 3vw, 32px); height:auto; }
.play-label{ font-size: var(--ui); white-space: nowrap; font-size: 13px; color: #333;}
.icon-group{ grid-area: icons; display:inline-flex; align-items:center; gap:.5rem; justify-self:start; }

/* Mobile: two rows above the divider, still exactly the same width */
@media (max-width: 700px){
  .page-subtitle .subtitle-measure{ white-space: normal; } /* wrap only when necessary */
  .article-actions{
    grid-template-columns: 1fr;
    grid-template-areas:
      "play"
      "icons";
    row-gap:.5rem;
  }
}

/* 1) The subtitle defines the measure precisely */
.page-subtitle{
  /* your color stays as-is */
  font-size: clamp(16px, 2vw, 20px);
  margin: 0;
  display: inline-block;      /* shrink-wrap to text width */
  white-space: nowrap;        /* one line when there’s room */
  max-inline-size: 100%;
  vertical-align: top;
}

/* 2) The divider is drawn by the subtitle itself */
.page-subtitle::after{
  content: "";
  display: block;
  border-block-start: 1px solid #ebebeb;  /* your divider color */
  margin-block-start: 25px;
  inline-size: 100%;                   /* exactly the subtitle width */
}

/* 3) When space gets tight, allow wrapping — the line still matches */
@media (max-width: 700px){
  .page-subtitle{ white-space: normal; }
}

/* 4) Make sure the container doesn’t stretch wider than the subtitle */
.page-header{
  display: flex;
  justify-content: center;
  padding-inline: clamp(32px, 4vw, 64px);
  padding-block: clamp(16px, 3vw, 32px);
	padding-top: 0;
	margin-bottom: 0;
    padding: 0;
	
}

.measure{
  display: inline-grid;
  grid-template-columns: min-content;  /* sized by the largest shrink-wrapped child */
  justify-items: start;                   /* RTL alignment */
  inline-size: fit-content;
  max-inline-size: 100%;
  text-align: right;
}

/* All header parts share the single measured track */
.page-title,
.page-subtitle,
.article-actions{
  grid-column: 1;
  max-inline-size: 100%;
  width: -webkit-fill-available;
}

/* Keep the title from influencing the measure width */
.page-title{
  /*font-size: clamp(24px, 3vw, 36px);*/
	font-size: clamp(22px, 3.3vw, 34px);
  /*margin: 0 0 .4rem;*/
  margin: 0;
  line-height: 1.65;
  contain: inline-size;
  text-wrap: pretty;
  font-weight: 600;
	-webkit-font-smoothing: auto;
	
}



/* (Optional) If you still have a separate divider element, hide it */
.actions-divider{ display:none; }


/* === Mobile header + actions alignment (authoritative) === */
@media (max-width:700px){
  /* keep the 32px gutters */
  .page-header{ padding-inline:0; }

  /* shrink-wrap the whole header to the subtitle, right aligned */
  .measure{
    display:inline-grid;
    grid-template-columns:max-content;
    justify-items:end;              /* right edge in RTL */
    inline-size:fit-content;
    max-inline-size:100%;
    text-align:right;
  }

  /* ensure all parts sit on the measured track */
  .page-title,
  .page-subtitle,
  .article-actions{
    grid-column:1;
    max-inline-size:100%;
    width:-webkit-fill-available;   /* your fix that worked everywhere */
    margin-inline:0;
  }

  /* let subtitle wrap only when it must */
  .page-subtitle{ white-space:normal; }

  /* actions: row 1 = play, row 2 = the two icons; both right-aligned */
  .article-actions{
    --ui: clamp(14px,3.3vw,16px);
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "play"
      "icons";
    row-gap:.5rem;
    margin-top:.75rem;
  }
  .play-wrap{   grid-area:play;  justify-self:end; }
  .icon-group{  grid-area:icons; justify-self:end; }
}




/* === Mobile header alignment (authoritative) === */
@media (max-width:700px){
  /* 32px gutters on both sides */
  .page-header{
    padding-inline: 0px !important;
	  margin-top: 2em;
	 
  }
	
	

  /* The measured box fills the available rail but never overflows */
  .measure{
    display: block;                /* simpler on mobile */
    inline-size: 100%;
    max-inline-size: 100%;
    margin: 0;                     /* remove any centering margins */
    text-align: right;             /* RTL edge */
    box-sizing: border-box;
	   max-inline-size: calc(100% - 64px);
  }

  /* Every child sits on the same rail, no intrinsic width */
  .page-title,
  .page-subtitle,
  .article-actions{
    display: block;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    width: 100% !important;        /* avoids -webkit-fill-available quirks */
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
	
	.page-title {
		text-wrap: pretty;
		white-space: normal;
	}

  /* Let the subtitle wrap only when it must; the divider matches it */
  .page-subtitle .subtitle-measure{ white-space: normal; }
  .page-subtitle::after{ inline-size: 100%; }

  /* Actions: two rows, right-aligned, above the divider rail */
  .article-actions{
    --ui: clamp(14px, 3.3vw, 16px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "play"
      "icons";
    row-gap: .5rem;
    justify-items: self-start;            /* right edge in RTL */
  }
  .play-wrap{  grid-area: play;  justify-self: start; }
  .icon-group{ grid-area: icons; justify-self: start; }

  /* Keep SVGs/text scaling nicely on tight widths */
  .btn.share svg,
  .btn.bookmark svg{ inline-size: clamp(18px, 5vw, 22px); height: auto; }
  .play svg{ inline-size: clamp(32px, 3vw, 32px); height: auto; }
  .play-label{ font-size: clamp(13px, 3.3vw, 15px); white-space: nowrap; font-size: 13px; }
  .page-subtitle::after {
    content: "";
    display: block;
    border-block-start: none;
    margin-block-start: .5rem;
    inline-size: 100%;
}
}

@media (max-width:974px){
.article-actions {
    --ui: clamp(14px, 3.3vw, 16px);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "play"
      "icons";
    row-gap: 1rem;
    justify-items: self-start;
}
	.page-subtitle::after {
    content: "";
    display: block;
    border-block-start: none;
    margin-block-start: .5rem;
    inline-size: 100%;
}
	
	.page-subtitle + .article-actions {
    /* border-top: 1px solid var(--rule); */
    padding-top: 0;
    border-bottom: 1px solid #ececec;
	padding-bottom: 25px;
		gap: 20px;
        margin-top: 10px;
}
	
	.page-subtitle .subtitle-measure {
    margin-top: 8px;
}
	
	.page-header {
		margin-top: 2em;
	}
}

.btn.share svg  {
    inline-size: 148px;
    height: auto;
}

.btn.bookmark svg {
	inline-size: 120px;
	height: auto;
}

.h-title {
    font-family: 'KufiExt';
    font-size: 17px;
    margin: 0;
    /*font-weight: 700;*/
    color: #111;
    line-height: 2.8rem;
    justify-self: flex-start;
}

@media (max-width:700px){
	.btn.share svg  {
    inline-size: 144px;
    height: auto;
}
	
	.page-subtitle + .article-actions {
    /* border-top: 1px solid var(--rule); */
    padding-top: 0;
    border-bottom: 1px solid #ececec;
    padding-bottom: 25px;
    gap: 20px;
    margin-top: 14px;
}
	
	.page-subtitle {
		line-height: 2;
	}

.btn.bookmark svg {
	inline-size: 122px;
	height: auto;
}
	
	.h-title {
    font-family: 'KufiExt';
    font-size: 14px;
    margin: 0;
    /*font-weight: 600;*/
    color: #111;
    line-height: 2.8rem;
    justify-self: flex-start;
	-webkit-text-stroke: 0.125px;
}
	
	.page-subtitle .subtitle-measure {
		line-height: 2;
	}

	
}




.css-b8gc4a {
  display: flex;
  align-items: center;
  width: 100%;
  direction: rtl; /* Makes the layout right-to-left */
  font-family: Arial, sans-serif;
  height: 32px;
    width: 216px;
}

.css-79elbk {
  display: flex; /* Aligns items in a horizontal row */
  align-items: center; /* Vertically centers button and text */
  gap: 0px; /* Adds space between the button and text */
}

.css-1xny6fl {
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 55px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0;
}

.play-text {
  font-size: 10.5pt;
  color: #333;
  direction: rtl; /* Ensures proper text direction */
  font-family: 'UthmanTNB v2 0';
}

.css-uepebd {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 0px; /* Adjust for RTL spacing */
  width: 100%;
}

.css-1qgbylr[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px; /* Make the slider very thin */
  background: linear-gradient(to left, black 0%, rgb(183, 183, 183) 100%);
  border-radius: 1px; /* Adjust border radius for a thinner look */
  outline: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.css-1qgbylr[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px; /* Smaller width for the thumb */
  height: 8px; /* Smaller height for the thumb */
  background: black; /* Thumb color */
  border-radius: 50%; /* Makes the thumb circular */
  cursor: pointer;
  position: relative;
  top: -3px; /* Adjust to keep it centered on the slider */
}

.css-1qgbylr[type="range"]::-moz-range-thumb {
  width: 8px; /* Smaller width for the thumb */
  height: 8px; /* Smaller height for the thumb */
  background: black; /* Thumb color */
  border-radius: 50%; /* Makes the thumb circular */
  cursor: pointer;
  position: relative;
  top: -3px; /* Adjust to keep it centered on the slider */
}

.css-1qgbylr[type="range"]::-ms-thumb {
  width: 8px; /* Smaller width for the thumb */
  height: 8px; /* Smaller height for the thumb */
  background: black; /* Thumb color */
  border-radius: 50%; /* Makes the thumb circular */
  cursor: pointer;
  position: relative;
  top: -3px; /* Adjust to keep it centered on the slider */
}

.css-1qgbylr[type="range"]::-webkit-slider-runnable-track {
  height: 2px; /* Match the thin slider height */
  border-radius: 1px;
  background: linear-gradient(to left, black 0%, rgb(183, 183, 183) 100%);
}

.css-1qgbylr[type="range"]::-moz-range-track {
  height: 2px; /* Match the thin slider height */
  border-radius: 1px;
  background: linear-gradient(to left, black 0%, rgb(183, 183, 183) 100%);
}

.css-1qgbylr[type="range"]::-ms-track {
  height: 2px; /* Match the thin slider height */
  border-radius: 1px;
  background: linear-gradient(to left, black 0%, rgb(183, 183, 183) 100%);
  border-color: transparent;
  color: transparent;
}
.css-1qgbylr[type="range"]:focus {
  outline: none;
}


/* ============ CSS-only share strip under bookmark ============ */

/* local wrapper so the tooltip can anchor under the bookmark on desktop */
.bookmark-wrap { position: relative; }

/* hidden toggle */
.bookmark-wrap .modal-toggle {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0; pointer-events: none;
}

/* backdrop */
.bookmark-wrap .share-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  z-index: 980;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

/* the strip panel */
.bookmark-wrap .share-strip {
  --strip-pad: .5rem;
  position: absolute;
  inset-block-start: calc(100% + 8px);   /* right under the bookmark */
  inset-inline-end: 0;                   /* aligns with the bookmark's inline end (RTL-aware) */
  background: #fff;
  color: var(--fg, #111);
  border: 1px solid var(--stroke, #e0e0e0);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding-block: .25rem;
  padding-inline: var(--strip-pad);
  min-inline-size: min(92vw, 680px);
  max-inline-size: min(96vw, 880px);
  z-index: 981;

  display: grid;
  grid-template-columns: auto 1fr auto;  /* head | list | foot */
  align-items: center;
  gap: .25rem;

  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
}

/* little arrow pointing to the bookmark */
.bookmark-wrap .share-strip .strip-arrow {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 12px;                /* arrow sits near the bookmark; tweak if needed */
  inline-size: 16px; block-size: 16px;
  background: #fff;
  /*border-inline-start: 1px solid var(--stroke, #e0e0e0);*/
  border-block-start: 1px solid var(--stroke, #e0e0e0);
  transform: rotate(45deg);
}

/* header (far right in RTL) */
.share-strip .strip-head {
  padding-inline: .25rem .5rem;
  font-weight: 600; color: #111;
  white-space: nowrap;
}

/* items row with dividers */
.share-strip .strip-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.share-strip .strip-list li { flex: 0 0 auto; }
.share-strip .share-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  color: #111; text-decoration: none;
  white-space: nowrap;
}
.share-strip .strip-list li + li { border-inline-start: 1px solid var(--stroke, #e7e7e7); }

/* placeholder icon size (replace with your SVGs inside .icon) */
.share-strip .share-item .icon {
  inline-size: 18px; block-size: 18px;
  border-radius: 3px; background: #ddd; flex: none;
}

/* footer (far left in RTL) */
.share-strip .strip-foot {
  padding-inline: .5rem .25rem;
  color: #444; white-space: nowrap;
}

/* open state */
.bookmark-wrap .modal-toggle:checked ~ .share-strip {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear 0s;
}
.bookmark-wrap .modal-toggle:checked ~ .share-backdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
/* optional a11y hint */
.bookmark-wrap .modal-toggle:checked ~ .bookmark[aria-expanded] { aria-expanded: true; }

/* -------- Mobile: become bottom sheet (slides up) -------- */
@media (max-width: 700px) {
  .bookmark-wrap .share-strip {
    position: fixed;
    inset: auto 0 0 0;               /* stick to bottom */
    margin: 0;
    min-inline-size: 100%;
    max-inline-size: 100%;
    block-size: 50vh;
    border-radius: 16px 16px 0 0;
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 1fr;      /* stack */
    grid-template-rows: auto 1fr auto;
    gap: .5rem;
    transform: translateY(100%);     /* hidden off-screen */
  }
  .bookmark-wrap .modal-toggle:checked ~ .share-strip { transform: translateY(0); }

  .bookmark-wrap .share-strip .strip-arrow { display: none; }

  .share-strip .strip-head { padding-inline: 0; }
  .share-strip .strip-foot { padding-inline: 0; }

  /* list becomes vertical with horizontal dividers */
  .share-strip .strip-list {
    display: block; overflow: auto; max-block-size: 100%;
    border-block: 1px solid var(--stroke, #e7e7e7);
    margin-block: .25rem;
  }
  .share-strip .strip-list li + li {
    border-inline-start: none;
    border-block-start: 1px solid var(--stroke, #e7e7e7);
  }
  .share-strip .share-item {
    display: flex; justify-content: flex-start;
    padding: .75rem 0; gap: .75rem;
  }
}

/* Keep the strip anchored to the bookmark, but never wider than .measure.
   Because .bookmark-wrap lives inside .measure, 100% == subtitle width. */
.bookmark-wrap { position: relative; display: inline-flex
;}

/* Strip: cap to the subtitle width, expand only as needed, wrap content */
.bookmark-wrap .share-strip {
  /* size */
  inline-size: auto;                 /* grow with content */
  max-inline-size: 100%;             /* but never exceed .measure (= subtitle width) */
  min-inline-size: min(100%, 320px); /* give it a sensible minimum */
  font-size: clamp(10px, 0.9vw, 12px);

  /* layout */
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  align-items: center;
  gap: .25rem;

  /* no horizontal overflow; let it grow vertically when items wrap */
  overflow: visible;
}

/* Arrow stays the same; you can keep your existing position.
   (Aligns with the bookmark; adjust the 12px if needed.) */
.bookmark-wrap .share-strip .strip-arrow {
  inset-inline-end: 12px;
}

/* Header (far right in RTL), footer (far left) */
.share-strip .strip-head,
.share-strip .strip-foot {
  white-space: nowrap;
  font-weight: 600;
}

/* Items: multi-row wrapping with neat dividers */
.share-strip .strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;            /* allow multiple rows */
  align-items: center;
  gap: 0;                     /* dividers will handle separation */
  overflow: visible;          /* show all rows */
}

/* Each item can shrink; it will wrap to next line when needed */
.share-strip .strip-list li {
  flex: 0 1 auto;
  /* vertical rhythm */
  padding-block: 0;
}

/* Divider between items (works across rows too) */
.share-strip .strip-list li + li {
  border-inline-start: none;
}

/* Touch size + compact paddings for neat small look */
.share-strip .share-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .65rem;
  text-decoration: none;
  color: var(--fg, #111);
  white-space: nowrap;        /* keep icon/label together */
  line-height: 1.2;
  font-size: inherit;         /* clamp(…, …, 12px) from the panel */
  padding-right: 6px;
}

/* Small icon box; drop your real SVG inside .icon to replace placeholder */
.share-strip .share-item .icon {
  inline-size: 16px;
  block-size: 16px;
  border-radius: 3px;
  background: #ddd;           /* placeholder only */
  flex: none;
}

/* ---------- Mobile: unchanged bottom sheet behavior ---------- */
@media (max-width: 700px) {
  .bookmark-wrap .share-strip {
    position: fixed;
    inset: auto 0 0 0;
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: 50vh;
    border-radius: 16px 16px 0 0;
    padding: .75rem 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .bookmark-wrap .share-strip .strip-arrow { display: none; }

  .share-strip .strip-list {
    display: block;
    overflow: auto;
    max-block-size: 100%;
    border-block: 1px solid var(--stroke, #e7e7e7);
    margin-block: .25rem;
  }
  .share-strip .strip-list li + li {
    border-inline-start: none;
    border-block-start: 1px solid var(--stroke, #e7e7e7);
  }
  .share-strip .share-item {
    display: flex;
    justify-content: flex-start;
    padding: .75rem 0;
    gap: .75rem;
  }
}


/* ==== Toggle & layout anchors ==== */
.bookmark-wrap { position: relative; }

/* Scrim to close on click (no JS) */
.share-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; z-index: 2000;
}
#share-toggle:checked ~ .share-scrim{
  opacity: 1; pointer-events: auto;
}

/* Panel container */
.share-panel{
  position: absolute;
  inset-block-start: calc(100% + 12px);
  inset-inline-end: 0;                 /* RTL-friendly: snaps to bookmark */
  z-index: 2000;
  display: none;
  /* width follows subtitle/measure but won’t overflow viewport */
  inline-size: 215px;
}
#share-toggle:checked ~ .share-panel{ display: block; }

.share-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    overflow: hidden;
    font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #111;
	font-family: 'UthmanTNB v2 0';
}

/* Header */
.share-head{ padding: 14px 14px 0; }
.share-head #share-title{
  margin: 0 0 8px 0;
  /*font-weight: 700;*/
  font-size: 17px;
    color: #000;
	font-weight: normal;
        -webkit-text-stroke: 0.125px;
}
.share-desc{
  margin: 0;
  color: #4a4a4a;
  font-size: 12px;
	font-family: 'UthmanTNB v2 0';
    line-height: 1.7;
}

/* List */
.share-list{
  margin: 14px 14px 0;
  padding: 0;
  list-style: none;
}
.share-item{ border-block-start: 1px solid #ededed; }
.share-item:first-child{ border-block-start: 1px solid #ededed; }
.share-link {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 0px;
    padding: 12px 18px;
    text-decoration: none;
    color: inherit;
    justify-items: self-start;
    padding-right: 0;
	padding-top: 6px;
    padding-bottom: 6px;
}
.share-link:hover{ background: #fafafa; }

/* circular icon like screenshot */
.icon {
    inline-size: 25px;
    block-size: 25px;
    border: 2px solid #efefef;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.icon svg{ inline-size: 18px; block-size: 18px; display: block; }


.foot-card {
    position: relative;
    background: #111;
    color: #fff;
    padding: 14px 16px 14px 14px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 14px 14px 12px;
}

.gift{
  inline-size: 28px; block-size: 28px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  font-size: 16px;
}
.foot-text{ line-height: 1.3; }
.foot-title{ font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.foot-sub{ font-size: 12px; color: #ddd; }

/* little pointer under the black card (left) */
.foot-arrow{
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: 20px;           /* move horizontally if needed */
  inline-size: 0; block-size: 0;
  border: 10px solid transparent;
  border-block-start-color: #111;     /* triangle up */
}

.arrow-panel {
	display: inline-block;
    height: 0px;
    position: absolute;
    width: 0px;
    border-width: 10px;
    border-style: inset inset solid;
    border-color: transparent transparent rgb(255 255 255);
    border-image: initial;
    left: 15px;
    top: -20px;
}

.xico {
	background-image: url("../x-icon.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 12px;
}

.tico {
	background-image: url("../telegram.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 19px;
	
}

.lico {
	background-image: url("../linkedin.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 13px;
	
}

.wico {
	background-image: url("../whatsapp.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 15px;
	
}

.wico {
	background-image: url("../whatsapp.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 15px;
	
}

.rico {
	background-image: url("../reddit.svg");
	vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
	background-size: 19px;
	
}
/* ===== Mobile: bottom sheet behavior ===== */
@media (max-width:700px){
	
	.arrow-panel {
		display: none;
	}
	
	.share-desc {
		padding-left: 36%;
		font-size: 13px;
	}
	
	.share-card {
		font-size: 15px;
	}
	
	.share-scrim {
		background: none;
	}
	
  .share-panel{
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    inline-size: 100%;
    display: none;
  }
	.share-head {
    padding-right: 22px;
    padding-left: 20px;
}
	.share-list{
  margin-right: 22px;
    margin-left: 20px;
}
	.foot-card {
		padding: 14px 16px 14px 14px;
		padding-right: 22px;
        padding-left: 20px;
		
	}
	
  #share-toggle:checked ~ .share-panel{ display: block; }

  .share-card {
     border-radius: 8px 8px 0px 0px;
    box-shadow: 0 -12px 28px rgba(0,0,0,.16);
    max-block-size: 88vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

  /* keep same list layout; touch-friendly spacing */
  .share-link {
    padding: 14px 18px;
    padding-right: 0;
	  padding: 11px 0px;
	  
}

  .foot-arrow{ display: none; } /* bottom sheet doesn’t need pointer */
	
	.main-hadith {
    line-height: 2.525rem;
	}
}

/* Optional: ensure the panel never exceeds your subtitle measure if you expose it as a CSS var elsewhere */
/*.share-panel{ max-inline-size: var(--subtitle-measure, 380px); }*/

@media (max-height: 700px) {
	
	
	
	.arrow-panel {
		display: none;
	}
	
	.share-desc {
		padding-left: 36%;
		font-size: 13px;
	}
	
	.share-card {
		font-size: 15px;
	}
	
	.share-scrim {
		background: none;
	}
	
  .share-panel{
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    inline-size: 100%;
    display: none;
  }
	.share-head {
    padding-right: 22px;
    padding-left: 20px;
	position: sticky;
        top: 0;
        background: #fff;
        padding-bottom: 8px;
}
	.share-list{
  margin-right: 22px;
    margin-left: 20px;
}
	.foot-card {
		padding: 14px 16px 14px 14px;
		padding-right: 22px;
        padding-left: 20px;
		
	}
	
  #share-toggle:checked ~ .share-panel{ display: block; }

  .share-card {
     border-radius: 8px 8px 0px 0px;
    box-shadow: 0 -12px 28px rgba(0,0,0,.16);
    max-block-size: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

  /* keep same list layout; touch-friendly spacing */
  .share-link {
    padding: 14px 18px;
    padding-right: 0;
	  padding: 11px 0px;
	  
}

  .foot-arrow{ display: none; } /* bottom sheet doesn’t need pointer */
}

.article-body {
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  margin-top: var(--s-6);

  /* Align with subtitle + actions */
  max-inline-size: 100%;
  width: -webkit-fill-available;
  border-bottom: 1px solid #ececec;
    padding-bottom: 1.5rem;
	
}

.fid-fd {
    display: grid;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    grid-template-columns: max-content max-content;
    align-items: center;
    grid-column-gap: 8px;
	
}

.fida-fd {
	display: contents;
}

.cardfida {
	line-height: 26px;
	border-radius: 50%;
    height: 30px;
    width: 30px;
	background: rgb(204, 204, 204);
    color: rgb(255, 255, 255);
    display: inline-block;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
	margin-left: 10px;
    overflow: hidden;
    object-fit: cover;
	font-family: 'UthmanTNB v2 0';
}

.fidd-fd {
    display: grid;
    margin: 0px;
    padding: 0px;
    border: 0px;
    align-content: center;
    /*grid-template-rows: 1fr 1fr 0;*/
	line-height: 2.34;
}

.fide-fd {
    font-size: 13px;
    line-height: 1rem;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    font-family: "UthmanTNB v2 0";
    color: rgb(0, 0, 0);
    grid-row: 1/2;
}

.fide-m {
		line-height: 14px;
		font-size: 10.5pt;
		font-weight: 400;
	}

.fid-fdp {
	font-family: "UthmanTNB v2 0";
    font-size: 13px;
    color: rgb(119, 119, 119);
    margin: 0;
    padding: 0;
    grid-row: 2/3;
}


.main-hadith {
	line-height: 2.625rem;
    color: #3b3333;
	 font-weight: 100;
	margin-top: 8px;
	margin-bottom: 0;
	/*-webkit-text-stroke: 0.3px #978787;*/
	font-weight: 500;
	-webkit-font-smoothing: auto;
	
}

@media (max-width: 430px){
	.strip-shadow {
		top: 52px;
	}
}

@media (min-width: 701px){
	.strip-shadow {
		top: 52px;
	}
}

@media (max-width:700px){
.main-hadith {
    line-height: 2.425rem;
	
	}
}

.fidmarg {
	margin-top: 30px;
}

.hukmp-bg {
    margin-top: 0;
    font-family: 'UthmanTNB v2 0';
    font-size: 18px;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.156rem);
	
}

.hukm-bg {
	padding-bottom: 30px;
    border-bottom: 1px solid #ececec;
}