/* AsrNaam mobile hardening. Linked from every page, including the Arabic,
   Urdu and Hindi mirrors, which do not load asr-enhance.css. 91% of this
   site's traffic is a phone; these rules are not optional polish.
   Measured at 360/375/390/768px in both colour schemes, not judged by eye. */
/* ============================================================
   MOBILE HARDENING  (2026-08-30)
   91% of this site's traffic is mobile. Everything below was found by
   measuring real viewports at 360, 375, 390 and 768 CSS pixels in both
   colour schemes, not by eye.
   ============================================================ */

/* 1. The Ilm ul Huroof letter grid could not wrap on Arabic pages.
      The container fell back to display:block there, the letter cells are
      inline-level, and the markup has no whitespace between them, so the
      line had no break opportunity at all: an eleven-letter name pushed the
      page to 811px inside a 360px viewport. Laying the container out as a
      wrapping flex row removes the dependency on inline break opportunities
      entirely, on every template. */
html body .asr-v2-letter-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.5rem;
  align-items:stretch;
  max-width:100%;
}
.asr-v2-letter-grid > *{ flex:1 1 5.2rem; min-width:0; max-width:100%; }
@media (min-width:560px){ .asr-v2-letter-grid > *{ flex:1 1 6.5rem; } }
.asr-v2-letter,.asr-v2-letter-anchor,.asr-v2-letter-roman{ overflow-wrap:anywhere; }

/* 2. Typed text in a search box could render dark on dark.
      The homepage dark styling lives only inside @media (prefers-color-scheme:
      dark); a reader whose device is in light mode but who chooses dark on the
      site gets the dark page background from the [data-theme] custom properties
      while that media block never fires. These rules restate the input colours
      against the attribute so the two paths cannot disagree, and set
      -webkit-text-fill-color because Safari honours it over `color` on inputs. */
html[data-theme='dark'] input[type="text"],
html[data-theme='dark'] input[type="search"],
html[data-theme='dark'] input[type="email"],
html[data-theme='dark'] input:not([type]),
html[data-theme='dark'] textarea,
html[data-theme='dark'] select,
html[data-theme='dark'] .hero-search-input,
html[data-theme='dark'] .hero-input,
html[data-theme='dark'] .ff-q,
html[data-theme='dark'] .asr-cmdk-input,
html[data-theme='dark'] .search-box input{
  background:#242322 !important;
  color:#eae6dc !important;
  -webkit-text-fill-color:#eae6dc !important;
  border-color:#3a3935 !important;
  caret-color:#d4af6c;
}
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder,
html[data-theme='dark'] .ff-q::placeholder{
  color:#9d968a !important; -webkit-text-fill-color:#9d968a !important; opacity:1;
}
/* the mirror of the same fault: a device in dark mode with light chosen on the
   site must not inherit dark input colours */
html[data-theme='light'] input[type="text"],
html[data-theme='light'] input[type="search"],
html[data-theme='light'] input:not([type]),
html[data-theme='light'] textarea,
html[data-theme='light'] select,
html[data-theme='light'] .hero-search-input,
html[data-theme='light'] .hero-input,
html[data-theme='light'] .ff-q{
  background:#FFFFFF !important;
  color:#1f1d18 !important;
  -webkit-text-fill-color:#1f1d18 !important;
}

/* 3. iOS Safari zooms the whole page in when a focused field is under 16px.
      Three controls were at 14.4px and 15.2px, so tapping a filter jumped the
      layout. 16px is the threshold, not a preference. */
input,select,textarea,button,
html body input,html body select,html body textarea{ font-size:max(16px,1rem) !important; }
html body input[type="text"],html body input[type="search"],html body input[type="email"],
html body input[type="number"],html body input[type="tel"],html body select,html body textarea{
  min-height:44px !important; padding-block:.55rem; border-radius:8px;
  max-width:100%; box-sizing:border-box;
}

/* 4. Tap targets. 206 links and buttons measured under 24px on a phone,
      most of them footer and breadcrumb links on the Arabic and Urdu pages
      where the script sets a smaller cap height. WCAG 2.2 asks 24px minimum;
      44px is the comfortable size and what these get where layout allows. */
html body footer a,html body .asr-legal a,html body .breadcrumb a,html body .asr-breadcrumb a,
html body .nav-links a,html body .related-card,html body .l3-more a,html body .spelling-chip,
html body .alphabet-link,html body .asr-v2-letter,html body .ff-opt,html body .note a{
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.35rem .55rem;
}
.asr-v2-letter{ flex-direction:column; justify-content:center; gap:.15rem; }
footer a,.asr-legal a{ padding:.5rem .6rem; }
.example-dot-btn{ min-width:24px; min-height:24px; }

/* 5. Nothing may push the page sideways. Long unbroken Arabic, Urdu or Latin
      strings wrap instead of widening the document. */
html,body{ max-width:100%; }
main,article,.content,.hero,.breadcrumb,footer{ max-width:100%; box-sizing:border-box; }
h1,h2,h3,p,li,dd,dt,td,.card-meaning,.card-name{ overflow-wrap:anywhere; }
table{ max-width:100%; }

/* 6. Respect the notch and the home indicator on iPhone. */
@supports(padding:max(0px)){
  body{ padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); }
  footer{ padding-bottom:max(1rem,env(safe-area-inset-bottom)); }
}

/* 7. Honour a reader who has asked the system for less motion. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* 8. Links that stand alone as their own paragraph or card are navigation, not
      prose, so the WCAG inline-link exception does not cover them. These were
      148 to 342px wide but only 19 to 21px tall. */
html body p > a:only-child,
html body .muq a,
html body .asr-ra-hero a,
html body .gender-links a,
html body .spellings-hook a{
  padding-block:.45rem;   /* grows the tap area without changing display, so a
                             long link still wraps instead of widening the page */
}


/* 9. THE ONE THAT ACTUALLY BIT A READER.
      .hero-search-input carries -webkit-text-fill-color:#111010 !important at
      top level in the homepage's own stylesheet. The dark override restates
      `color` and `background` but never restates the fill colour, and on WebKit
      -webkit-text-fill-color wins over color. So on an iPhone the field went
      dark and the typed text stayed near-black: 1.2:1, invisible.

      It survived the earlier pass because rule 2 keys on [data-theme] and the
      dark appearance on that phone comes from the media query instead. It
      survived my testing because I measured `color` and not the fill colour.
      Both paths are covered now, and the audit measures both. */
@media (prefers-color-scheme: dark){
  html:not([data-theme='light']) input[type="text"],
  html:not([data-theme='light']) input[type="search"],
  html:not([data-theme='light']) input[type="email"],
  html:not([data-theme='light']) input:not([type]),
  html:not([data-theme='light']) textarea,
  html:not([data-theme='light']) select,
  html:not([data-theme='light']) .hero-search-input,
  html:not([data-theme='light']) .hero-input,
  html:not([data-theme='light']) .ff-q,
  html:not([data-theme='light']) .asr-cmdk-input{
    background:#242322 !important;
    color:#eae6dc !important;
    -webkit-text-fill-color:#eae6dc !important;
    border-color:#3a3935 !important;
    caret-color:#d4af6c !important;
  }
  html:not([data-theme='light']) input::placeholder,
  html:not([data-theme='light']) textarea::placeholder{
    color:#9d968a !important; -webkit-text-fill-color:#9d968a !important; opacity:1;
  }
  /* Safari keeps its own yellow-on-white autofill unless both are restated */
  html:not([data-theme='light']) input:-webkit-autofill,
  html:not([data-theme='light']) input:-webkit-autofill:focus{
    -webkit-text-fill-color:#eae6dc !important;
    -webkit-box-shadow:0 0 0 1000px #242322 inset !important;
  }
}
/* and the light side of the same coin: a phone in dark mode with light chosen
   on the site must not keep a light fill colour on a white field */
html[data-theme='light'] input,
html[data-theme='light'] textarea,
html[data-theme='light'] select,
html[data-theme='light'] .hero-search-input,
html[data-theme='light'] .hero-input,
html[data-theme='light'] .ff-q{
  -webkit-text-fill-color:#1f1d18 !important;
}
html[data-theme='dark'] input:-webkit-autofill,
html[data-theme='dark'] input:-webkit-autofill:focus{
  -webkit-text-fill-color:#eae6dc !important;
  -webkit-box-shadow:0 0 0 1000px #242322 inset !important;
}

/* ---------------------------------------------------------------------------
   RULE 10 - the cross-language row.
   The Urdu and Arabic pages carry a third of this site's impressions and the
   best click-through on it, and until now not one English page linked to them.
   This row is the link. It has to survive three scripts on a 320px screen, so
   it wraps rather than scrolls, and every link is a 44px target.
   --------------------------------------------------------------------------- */
html body nav.asr-crosslang{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.15rem .55rem;
  max-width:760px;
  margin:.9rem auto 1.1rem;
  padding:.55rem .9rem;
  border:1px solid rgba(128,116,90,.28);
  border-radius:10px;
  font-size:.95rem;
  line-height:1.6;
}
html body nav.asr-crosslang .asr-crosslang-label{
  flex:0 0 auto;
  opacity:.72;
  font-size:.86rem;
  letter-spacing:.01em;
  margin-inline-end:.2rem;
}
html body nav.asr-crosslang a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 .35rem;
  text-decoration:none;
  border-bottom:1px solid rgba(128,116,90,.45);
  white-space:nowrap;
}
html body nav.asr-crosslang a:hover,
html body nav.asr-crosslang a:focus-visible{
  border-bottom-color:currentColor;
}
html body nav.asr-crosslang .sep{
  flex:0 0 auto;
  opacity:.4;
  user-select:none;
}
/* the whole row is one line of running text on a narrow screen, so let the
   label sit on its own line rather than squeezing the scripts */
@media (max-width:400px){
  html body nav.asr-crosslang .asr-crosslang-label{flex:1 0 100%;margin-bottom:-.2rem;}
}

/* ---------------------------------------------------------------------------
   RULE 11 - the pages this round sends traffic to had to be able to receive it.
   Measured on a 320px screen: the Hindi nav ran 431px wide, the homepage figure
   grid 356px, and CSS grid columns were sized by their content instead of by
   the space available. minmax(0,1fr) is the fix for that: it lets a column be
   narrower than the words inside it, which is what a phone needs.
   --------------------------------------------------------------------------- */
html body .asr-nav .nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem .7rem;
  min-width:0;
}
html body .asr-nav{
  flex-wrap:wrap;
  gap:.3rem .6rem;
  min-width:0;
}
html body .muq-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:359px){
  html body .muq-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
html body .muq-cell{min-width:0;}
html body .muq-cell > *{min-width:0;overflow-wrap:anywhere;}
html body .quick-facts{grid-template-columns:minmax(0,1fr) !important;}
/* any grid on a phone: never let a track be wider than its share */
@media (max-width:480px){
  html body .example-cards-wrap,
  html body .steps,
  html body .why-grid,
  html body .explore-grid,
  html body .related-grid,
  html body .footer-grid,
  html body .blog-grid,
  html body .card-grid,
  html body .post-grid{grid-template-columns:minmax(0,1fr) !important;}
  html body .blog-grid > *,
  html body .related-grid > *{min-width:0;}
}
/* the mirror pages carry the same cross-language row in a <section>; give its
   links a real tap target without changing the layout they already have */
html body section.asr-crosslang a,
html body div.crosslang a{
  display:inline-block;
  padding-block:.7rem;
  min-height:24px;
}
/* the breadcrumb was a single unwrapping line; on a 320px screen the last
   crumb ran past the edge */
html body .asr-breadcrumb,
html body .breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 .3rem;
  min-width:0;
  white-space:normal;
}
html body .asr-breadcrumb > *,
html body .breadcrumb > *{min-width:0;overflow-wrap:anywhere;}