/*
 * clipping.css
 * ============
 * Every rule below is copied verbatim from Radha's Design's
 * templates/print.php inline <style> block. Nothing here is redesigned.
 *
 * Two things that WERE in that block are deliberately not here:
 *   - column-count and background-color on .news-details-print - these
 *     varied per render even in the original (site setting / per-post),
 *     and now that Renderer can be asked for several column variants of
 *     the same article, they're applied as an inline style by
 *     AR_Renderer::render_clipping() itself, at the same values the
 *     original computed, just at the correct scope.
 *   - body.print-body's width, and the "online style" width override -
 *     these describe the STANDALONE PRINT PAGE's own container, not a
 *     clipping's appearance, and stay in templates/print-standalone.php.
 *
 * Loaded exactly once per context (standalone page, admin measurement
 * screen, or an assembled newspaper page) - never duplicated, never
 * rewritten.
 */

/*
 * Self-hosted fonts (moved off saakshi.co.in - a third-party site this
 * plugin does not control). All 5 are the exact same official Google
 * Fonts releases (Silicon Andhra, SIL Open Font License v1.1 - free for
 * commercial use), just served from this plugin's own assets/fonts/
 * folder now instead of over the network from another domain. Paths are
 * relative to THIS file's own location (assets/css/), so they resolve
 * correctly no matter what domain the site is on - no AR_STUDIOS_URL
 * dependency needed here.
 *
 * font-display: swap added so a slow font load never blocks text from
 * appearing - browser shows a fallback font first, then swaps to the
 * real one once loaded. This does not change measurement: the
 * Rendering Service already waits on document.fonts.ready before
 * measuring, which resolves only once every @font-face below has
 * either loaded or failed - swap only affects the FIRST paint a human
 * sees, not what gets measured.
 */
@font-face {
  font-family: 'Sree Krushnadevaraya';
  src: url('../fonts/SreeKrushnadevaraya-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'NTR';
  src: url('../fonts/NTR-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Gidugu';
  src: url('../fonts/Gidugu-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Suravaram';
  src: url('../fonts/Suravaram-Regular.ttf') format('truetype');
  font-display: swap;
}
/* NEW - was referenced by .subtitle-dynamic below but never actually
   declared anywhere, on saakshi.co.in or otherwise. It was silently
   falling back to the browser's own default font this whole time. Now
   genuinely self-hosted and correctly rendered like the other 4. */
@font-face {
  font-family: 'Ramabhadra';
  src: url('../fonts/Ramabhadra-Regular.ttf') format('truetype');
  font-display: swap;
}

/* NEW - self-hosted for the body text font, replacing Gautami per
   explicit request - applies to every article's body text, every page. */
@font-face {
  font-family: 'Mandali';
  src: url('../fonts/Mandali-Regular.ttf') format('truetype');
  font-display: swap;
}

body.print-body {
  margin: 0;
  padding: 0;
  font-family: 'Mandali', sans-serif;
}

/* THE MEASUREMENT CONTEXT FIX.
 *
 * The rule above is scoped to `body.print-body`. The final generated
 * page HAS that class on its <body>, so every clipping on it inherits
 * 'Gautami', sans-serif. But measurement happens inside a hidden div
 * appended to the WORDPRESS ADMIN page's <body> - which does not, and
 * cannot, carry that class. So during measurement the very same text
 * inherited the WP admin's own font stack instead (a Latin UI stack:
 * -apple-system / Segoe UI / Roboto ...), and Telugu glyphs fell back
 * through a DIFFERENT chain than they do on the real page.
 *
 * Different font = different glyph widths = different number of wrapped
 * lines for the identical text at the identical width. Every article's
 * body is 22px/1.2 (26.4px per line), so even a few percent more lines
 * on the real page adds hundreds of pixels per zone. That is why the
 * planner's numbers said "fits" while the rendered page overflowed -
 * on EVERY page, EVERY run, consistently - and why a 6% and then a 15%
 * blanket safety margin did not stop it: the error was proportional to
 * the text, not a fixed slack.
 *
 * The stage now carries .ar-measuring-stage and this rule gives it the
 * exact same font-family the real page's body gives its clippings, so
 * both contexts resolve fonts identically. box-sizing is pinned to
 * content-box for the same reason: the WP admin stylesheet may apply
 * border-box widely, while a clipping on the real page always sees the
 * browser default - .news-details-print's own 10px padding must be
 * handled the same way in both places or the usable text width differs.
 */
.ar-measuring-stage {
  font-family: 'Mandali', sans-serif !important;
  font-size: 22px;
  line-height: 1.5;
  color: #000;
  margin: 0;
  padding: 0;
}
.ar-measuring-stage,
.ar-measuring-stage * {
  box-sizing: content-box !important;
}

#download_area {
  min-height: 100vh;
  padding: 30px;
}

.news-details-print {
  column-gap: 70px !important;
  padding: 10px !important;
  line-height: 1.5 !important;
  color: #000 !important;
  font-size: 22px !important;
}

.news-details-print p {
  background-color: transparent !important;
  margin-top: 0;
  margin-bottom: 2px !important;
  line-height: 1.5 !important;
  color: #000 !important;
  text-align: justify;
}

.news-details-print img {
  max-width: 100%;
  height: auto !important;
  display: block;
  /* BUGFIX (reported: too much gap above the photo): was 20px auto 30px
     auto - tightened the top margin to sit closer under the title/
     subtitle, per the reference pages. */
  margin: 8px auto 20px auto;
  break-inside: avoid;
}

/* COLORED ZONE (and 1-col): stacked title → full image → body.
   Photo is a sibling ABOVE .news-details-print, not floated. */
.ar-article-photo-stack {
  width: 100%;
  text-align: center;
  margin: 12px 0 16px 0;
  break-inside: avoid;
}
.ar-article-photo-stack .ar-article-photo-wrap {
  width: 100%;
}
.ar-article-photo-stack img.ar-article-photo {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: 420px !important;
  object-fit: contain;
  margin: 0 auto !important;
}

/* WHITE ZONE (2-column): the featured image sits FIRST, directly
   INSIDE this column-flow container (see class-renderer.php) - not a
   separate floated/flex wrapper - so it occupies the top of column 1
   specifically and the body text continues below it in that same
   column before naturally overflowing into column 2, via genuine CSS
   multi-column flow (matches the reference composition, and Radha's
   Design's own proven approach). column-count is INLINE per-article
   (class-renderer.php's style="column-count:N") and must be allowed to
   apply here - the old float-based approach explicitly unset it, which
   would now break this genuine multi-column flow entirely. */
.ar-article-runaround img.ar-article-photo {
  max-width: 100%;
  height: auto !important;
  width: auto !important;
  display: block;
  margin: 8px auto 20px auto;
  break-after: avoid;
  break-inside: avoid-column;
}

h1.title-dynamic {
  text-align: center;
  /* Set inline per-article by AR_Renderer::render_clipping() to
     TITLE_FONT_SIZE_PX (65px, fixed - same for every title regardless
     of length, per explicit instruction). This 65px is only a fallback
     for the rare case the inline style is somehow missing - the inline
     value always wins over this class rule either way. */
  font-size: 65px;
  font-weight: normal;
  margin: 0 0 14px 0 !important;
  padding: 30px 0 0 0 !important;
  line-height: 1.15 !important;
  color: inherit;
  font-family: inherit !important;
}

.subtitle-dynamic {
  text-align: center;
  /* Set inline per-article by AR_Renderer::render_clipping() to
     SUBTITLE_FONT_SIZE_PX (40px, fixed regardless of length). This 40px
     is only a fallback. */
  font-size: 40px;
  font-family: Ramabhadra, sans-serif;
  line-height: 1.1 !important;
  /* Vertical gap between title and subtitle (was 0). Photo-to-subtitle
     spacing below is unchanged. */
  margin: 16px 0 10px 0 !important;
  padding: 0 !important;
  color: #fa0202;
}

.print-float {
  text-align: center;
  margin-top: 40px;
}

.print-float a.btn {
  display: inline-block;
  background-color: #4CAF50;
  color: #fff;
  padding: 12px 25px;
  margin: 0 10px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 20px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.print-float a.btn:hover {
  background-color: #333;
  color: #fff;
}

.print-float img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}

/* Only zoomed-out PC screen view - scoped to the standalone print page
   specifically (via this class on its <html> element), so loading this
   same stylesheet on the admin/Generate screen never zooms that screen
   out - the rule's INTENT (a convenience for a human viewing one
   clipping alone) is preserved; only its reach is now bounded to where
   that intent actually applies. */
@media screen and (min-width: 1025px) {
  html.ar-standalone-print {
    zoom: 0.50;
  }
}
