/*
 * Telugu Gospel Lyrics — Mobile-first reading comfort (v1.50.0)
 * ------------------------------------------------------------------
 * ADDITIVE polish for the lyrics reading experience. It deliberately does
 * NOT restyle, recolour, resize or realign existing text: the generous lyric
 * line-height (2.2), font sizes, colours and left alignment are all preserved
 * exactly as before. This module only:
 *   1. makes TOC / breadcrumb anchor jumps land clear of the sticky header,
 *   2. sharpens Telugu glyph rendering (no layout change),
 *   3. stops long transliteration words overflowing on ~360px phones,
 *   4. improves line-break quality where the browser supports it,
 *   5. brings the reading-page touch controls up to the 44px minimum.
 * Loaded last so these additions win the cascade without needing !important.
 */

/* 1 — Anchor scrolling under the (configurable) sticky header.
   Reuses --tgl-header-height, already measured in main.js on load/resize, so
   the offset stays correct even when the top bar or ticker is turned off. */
html { scroll-padding-top: calc(var(--tgl-header-height, 96px) + 12px); }
.tgl-post-title,
.tgl-content h2,
.tgl-content h3,
.tgl-content h4,
.tgl-section-title {
  scroll-margin-top: calc(var(--tgl-header-height, 96px) + 12px);
}

/* 2 — Crisper Telugu glyph rendering. No size / spacing / colour change. */
.tgl-content,
.tgl-content .tgl-lyrics,
.tgl-content .tgl-text {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3 — Long-word wrap safety: never force horizontal scroll on a narrow phone.
   Telugu must not hyphenate. */
.tgl-content,
.tgl-content p,
.tgl-content li,
.tgl-content .tgl-lyrics,
.tgl-content .tgl-text {
  overflow-wrap: break-word;
  hyphens: none;
}

/* 4 — Nicer line breaks where supported (progressive enhancement; older
   browsers ignore these and are unaffected). Does not change alignment. */
.tgl-content p,
.tgl-content .tgl-lyrics,
.tgl-content .tgl-text { text-wrap: pretty; }
.tgl-post-title,
.tgl-content h2,
.tgl-content h3,
.tgl-content h4 { text-wrap: balance; }

/* 5 — Thumb-friendly reading controls on mobile. The share row is 38px today,
   below the WCAG 2.2 AA (2.5.8) 44px target minimum — this lifts it to 44px on
   phones only, leaving desktop untouched. */
@media (max-width: 768px) {
  .tgl-share-btn { width: 44px; height: 44px; }
  .tgl-share-btn svg { width: 20px; height: 20px; }
  .tgl-toc__toggle { min-height: 44px; }
}