/* =====================================================================
   TYPOGRAPHY LAYER  (typography.css)
   ---------------------------------------------------------------------
   Loaded after global-fixes.css / preloader.css. It only decides how TEXT
   is set (family, size, leading, weight, wrapping). Colours come from the
   tokens in style.css — this file never hard-codes a hex value and never
   uses gradient-clipped (transparent-fill) text, which is what made
   headings vanish before.

     1. Base text        - 17px / 1.75, tuned for Hindi matras
     2. Headings         - Playfair Display + Noto Serif Devanagari
     3. Section text     - labels, intros, quotes
     4. Hero + numbers
     5. Card titles      - solid --heading-ink (auto dark-white on green)
     6. Blog reading
     7. Footer, print, small screens

   Font tokens (--font-display / --font-body) are declared in style.css
   and loaded by the Google Fonts <link> in layouts/user.blade.php.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BASE TEXT
--------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: 1.0625rem;          /* 17px: comfortable for Hindi + English */
    line-height: 1.75;             /* Devanagari matras need > 1.6 */
    color: var(--text-secondary);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* Devanagari has no italic; a synthetic slant looks broken. */
:lang(hi), [lang="hi"], [lang="mr"], [lang="gu"] {
    font-style: normal;
    line-height: 1.9;
}

::selection {
    background: var(--gold-400);
    color: var(--green-950);
}

/* Keyboard focus that is visible on light AND dark sections
   (--focus-ring is green on ivory, bright gold on green). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------------
   2. HEADINGS
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* The PDF book reader has its own font picker; keep it untouched. */
.book-reader h1, .book-reader h2, .book-reader h3,
.book-reader h4, .book-reader h5, .book-reader h6 {
    font-family: inherit;
    text-wrap: initial;
}

.nav-link,
.sidebar-link {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Extra leading so tall Devanagari matras are never clipped */
.am-section-heading h2,
.am-news-header h2,
.about-content h2,
.articles-title,
.about-cta-inner h2,
.blog-featured-body h2 a,
.book-detail-info h2 {
    line-height: 1.22;
    padding-block: 0.06em;
}

.about-content h2 span {
    line-height: 1.2;
    margin-top: 0.12em;
}

/* ---------------------------------------------------------------------
   3. SECTION TEXT
--------------------------------------------------------------------- */
.section-label {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.about-description,
.articles-description,
.mission-intro {
    font-size: 1.0625rem;
    line-height: 1.8;
}

.about-quote blockquote {
    font-family: var(--font-display);
    line-height: 1.75;
}

.quote-mark {
    font-family: var(--font-display);
}

/* ---------------------------------------------------------------------
   4. HERO + NUMBERS (colours: added-sections.css)
--------------------------------------------------------------------- */
.am-hero-caption h1,
.page-hero-content h1 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.01em;
}

.am-hero-caption p,
.page-hero-content p {
    line-height: 1.7;
}

.am-hero-tag {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
}

.page-breadcrumb {
    font-size: 0.875rem;
}

.am-stat-number,
.stat-number,
.stat-suffix,
.am-stat-suffix {
    font-family: var(--font-display);
    font-weight: 800;
}

.am-stat-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   5. CARD TITLES - solid colour, --heading-ink flips to dark-white when
   the card sits on a green surface (e.g. the Hindi/English book bars).
   Line-height 1.5 on the 2-line-clamped titles: at 1.35 the overflow clip
   shaved Devanagari matras off the top/bottom.
--------------------------------------------------------------------- */
.mv-card h3,
.mission-card h3,
.am-timeline-content h3,
.team-card h3,
.contact-info-card h3,
.book-card-body h3,
.article-content h3 a,
.am-news-item h3,
.am-book-info h3,
.blog-sidebar-card h4,
.book-detail-alt-title {
    font-family: var(--font-display);
    font-weight: 700;
}

.book-card-body h3,
.article-content h3,
.article-content h3 a,
.am-news-item h3,
.am-book-info h3 {
    line-height: 1.5;
}

.book-card-body h3 { color: var(--green-800); }

/* Latest News card titles — explicit colour restated here, last in the
   cascade, as a guard. Reported invisible/pale against the ivory card;
   style.css:1222 already sets this correctly (var(--text-primary),
   #10281E), so if it's still pale after this, the problem is caching,
   not CSS — see the $assetVersion bump note in user.blade.php. */
.am-news-item h3 {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}

.book-card:hover .book-card-body h3,
.team-card:hover h3,
.mv-card:hover h3,
.mission-card:hover h3 {
    color: var(--green-600);
}

.book-card-author { font-size: 0.875rem; }
.book-card-excerpt { font-size: 0.92rem; line-height: 1.7; }
.book-card-meta,
.article-date { font-size: 0.8125rem; }
.blog-card-category { font-size: 0.75rem; }
.article-content p { line-height: 1.7; }

/* ---------------------------------------------------------------------
   6. BLOG / LONG-FORM READING
--------------------------------------------------------------------- */
.blog-detail-content {
    font-size: 1.0938rem;
    line-height: 1.95;
    color: var(--text-secondary);
}

.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4 {
    margin: 1.6em 0 0.6em;
    color: var(--green-800);
}

.blog-detail-content a {
    color: var(--gold-deep);
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.blog-detail-content a:hover {
    color: var(--green-700);
}

.blog-detail-content blockquote {
    margin: 1.6em 0;
    padding: 0.4em 0 0.4em 1.2em;
    border-left: 4px solid var(--gold-500);
    color: var(--green-800);
    font-family: var(--font-display);
    font-size: 1.15em;
    line-height: 1.75;
}

.blog-detail-content p:first-of-type::first-letter {
    font-family: var(--font-display);
}

.blog-detail-excerpt {
    font-family: var(--font-display);
    line-height: 1.75;
}

/* ---------------------------------------------------------------------
   7. FOOTER, PRINT, SMALL SCREENS
--------------------------------------------------------------------- */
.footer-col ul li a,
.footer-about p,
.footer-contact li {
    font-size: 0.95rem;
    line-height: 1.75;
}

@media print {
    body { color: #000; background: #fff; }
    .header, .site-footer, .mobile-sidebar, .sidebar-overlay { display: none !important; }
}

@media (max-width: 575px) {
    body { font-size: 1rem; }
    .about-description,
    .articles-description,
    .mission-intro { font-size: 1rem; }
    .blog-detail-content { font-size: 1.03rem; }
}