/* Mama-health — typography and print styles.
   Layout and colour come from Tailwind; this file only handles what Tailwind
   cannot: the Urdu face, base sizing for readability, and print output. */

:root { color-scheme: light dark; }

html { scroll-behavior: smooth; }

body {
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;               /* larger base: this is read by someone who wants big text */
  line-height: 1.65;
}

/* Urdu is set in Nastaliq, which needs far more line height than Latin type
   and reads right to left. Applied per-element so it can sit inside LTR pages. */
.urdu {
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  direction: rtl;
  text-align: right;
  line-height: 2.4;
  font-feature-settings: "liga" 1, "calt" 1;
  /* Only the 400 weight of Nastaliq is shipped. Without this, a .urdu span
     inside a bold heading gets a synthesised bold that smears the script. */
  font-weight: 400;
  font-synthesis-weight: none;
}
/* Inside a centred block, keep Urdu centred rather than flushed right. */
.text-center .urdu { text-align: center; }

/* Large, obvious focus ring: this site is used on a phone and by tapping. */
:focus-visible { outline: 3px solid #059669; outline-offset: 3px; border-radius: .5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Printing: the weekly food page and the exercise plan are meant to go on the
   fridge and to the doctor, so drop the chrome and force light colours. */
@media print {
  nav, footer, iframe { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  a { text-decoration: none !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  section, div { break-inside: avoid; }
  .urdu { line-height: 2.2; }
}

/* ---- Overflow safety -------------------------------------------------------
   Long Urdu strings, long dish names and narrow phones are the three ways this
   layout could break. These rules make that impossible rather than unlikely. */

/* Nothing may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Words wrap instead of stretching their container.
   `break-word`, NOT `anywhere`: `anywhere` also shrinks an element's intrinsic
   min-content width, which lets a flex item collapse to a few pixels and then
   breaks the text one character per line. `break-word` only breaks a word that
   genuinely cannot fit, and leaves sizing alone. */
body, p, li, h1, h2, h3, div, span, label, td, th { overflow-wrap: break-word; word-break: normal; }

/* Flex and grid children default to min-width:auto, which is what causes a long
   word to blow out a row. Reset it, then opt back in where nowrap is wanted. */
main :where(.flex, .grid) > * { min-width: 0; }
.whitespace-nowrap { min-width: auto !important; }

/* Media never exceeds its box. */
img, svg, video, iframe { max-width: 100%; height: auto; }
iframe { height: 100%; }

/* Deliberately scrollable strips keep momentum scrolling and hide the bar. */
.overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Urdu inside a flex row must not force the row wider than the screen. */
.urdu { max-width: 100%; overflow-wrap: break-word; }

/* Checked shopping rows. */
.line-through { text-decoration-thickness: 2px; }

@media print {
  .shop-check { -webkit-appearance: none; appearance: none; width: 1em; height: 1em;
                border: 1.5pt solid #000; border-radius: 2pt; display: inline-block; }
  #progress, #clear, button { display: none !important; }
}

/* Urdu that labels an English item directly above it. Nastaliq still shapes and
   orders right-to-left (direction stays rtl); only the ragged edge moves, so the
   pair reads as one unit instead of two detached columns. Used for short,
   single-line strings: dish names, step text, list labels. Multi-line Urdu
   paragraphs keep the default right alignment, which is correct for RTL. */
.urdu.urdu-l { text-align: left; }

/* Nastaliq has deep descenders. Anywhere it shares a line box with Latin text,
   give it room so nothing is visually clipped. */
.urdu { padding-block: 0.05em; }

/* ---- App shell ------------------------------------------------------------
   The tab bar is fixed to the bottom, so every page reserves room for it.
   4.75rem covers the bar; the safe-area inset covers the iPhone home indicator. */
body.has-tabbar { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }

/* Tabs must respond to the first tap. `manipulation` removes the 300ms
   double-tap-to-zoom delay, and disabling touch callout/selection stops a long
   press turning into a text selection instead of a navigation. */
.tab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  min-height: 56px;                 /* comfortably above the 44px touch-target minimum */
}
.urdu.urdu-c { text-align: center; }

/* Standalone (installed) mode: no browser chrome, so pad the top a little. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

@media print {
  nav, #toast, #install-banner { display: none !important; }
  body.has-tabbar { padding-bottom: 0; }
}