/* =====================================================================
   Green Alerts — core stylesheet.   Generated 26 Aug 2026.

   This is the EXACT css that ga_block_layout_css() and ga_social_strip_css()
   were printing inline into every single page, byte for byte, taken from the
   rendered output of a live block page and a live village page.

   WHY IT MOVED OUT OF THE PAGE
   Measured on 26 Aug across seven page types: every page carried 116,132
   bytes of inline <style>, against 1,071-10,266 bytes of visible text. On a
   state page the text was 0.8% of the document. None of that css could ever
   be cached, so it was re-downloaded on every page view and re-crawled on
   every Googlebot fetch — and Googlebot pulled 3.23 GB from this site in 24
   hours.

   These two blocks are 32,457 of those bytes. As a file the browser fetches
   it once and reuses it everywhere.

   HOW THE SWAP IS MADE SAFE
   functions.php only stubs out the inline printers when THIS FILE EXISTS and
   is over 5 KB. If it is missing or truncated the stubs are never defined,
   the template's own functions load as before, and the page styles itself
   inline exactly as it does today. A failed upload cannot unstyle the site.

   DO NOT EDIT BY HAND. It is a copy of the css in
   includes/ga-block-layout.php and includes/ga-social-strip.php — change
   those, then regenerate, or the two will drift apart.
   ===================================================================== */


/* ---------- ga-block-layout-css
   source: includes/ga-block-layout.php :: ga_block_layout_css() ---------- */
/* =====================================================================
   [0] PAGE CHROME + THE SNAPSHOT AND FAQ CARDS.

   Moved here from state_dist_block.php's inline <style> on 12 Aug 2026 so
   the village template can render the same two components. They were inline
   in the block template only, which is precisely how /saha/ and
   /saha/haryoli/ ended up looking like two different products.
   ===================================================================== */
/* --- [A11Y] LINK CONTRAST -------------------------------------------
   Lighthouse: "Background and foreground colors do not have a sufficient
   contrast ratio", on the IMD link among others.

   #ee8021 on #ffffff measures 2.71:1. WCAG AA wants 4.5:1 for body text and
   3:1 even for large text, so the brand orange fails both as a TEXT colour.
   #b35400 is 5.02:1, and it is not a new colour — the site already uses it
   for .tppss-logos h2. Orange stays exactly as it is on borders, backgrounds
   and chips, where contrast rules do not apply.

   Placed at the TOP of this stylesheet on purpose. The whole sheet is in
   <body>, so it already outscores the Customizer's head rules at equal
   specificity; sitting first means the component rules further down (notably
   .ga-gp__list a) still win over it, which is what we want. */
   Two components re-declare their own link colour further down (.ga-source
   in this file, .blog-post-section in ga-day-card.php). They are fixed at
   their own rules, not listed here — a second declaration here would just be
   a rule this one loses to. */
:where(.main-content) a { color: #b35400; }
.detail-data-pge a,
.weather-seo-content a,
.nearby-links a { color: #b35400; }
.breadcrumbs a { color: #b35400 !important; }

/* --- [A11Y] LINKS MUST NOT RELY ON COLOUR ALONE ----------------------
   Lighthouse: "Links rely on color to be distinguishable" (WCAG 1.4.1).
   Darkening the orange fixed the contrast-against-BACKGROUND rule but not
   this one: a link sitting inside a sentence has to be tellable from the
   text AROUND it, and #b35400 against #333 body copy is only 2.1:1 — under
   the 3:1 the audit wants. An underline settles it without touching colour.

   Scoped to links inside PROSE. The gram panchayat and block tiles are each
   alone inside their own bordered box, so they are not "in a text block" and
   are deliberately left un-underlined — the border already distinguishes
   them and underlining 60 tiles would look like a bug. */
.main-content p a,
.weather-seo-content li a,
.nearby-links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fullrowbanner .banner-image { display: none; }
.tppss-logos { display: block !important; }
.tppss-logos.tppss-logos2 { display: none !important; }
.fullrowbanner .banner-mob { display: none; }
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: block; margin: 10px 0; text-align: center; } }
/* Whitespace around ads is the cheapest way to cut the accidental clicks that
   are crushing the CPC. 28px so nothing tappable sits flush against an ad.
   Margin only — no border, no label, because an empty slot would render as a
   stray rule. */
.weather-page-ads { margin: 28px 0; text-align: center; clear: both; }
.weather-page-ads img { max-width: 100%; height: auto; }
.ad-mobile { display: none; }
@media (max-width: 768px) { .ad-desktop { display: none; } .ad-mobile { display: block; } }

/* --- Today snapshot -------------------------------------------------
   Was written entirely with inline style="" attributes, which no media query
   can reach — so nothing adapted on mobile, where 98.9% of this site's
   traffic is. The four chips needed ~470px with flex-wrap; a 360px phone
   gives ~324px, so they wrapped ragged (two wide, two narrow).
   4-up grid on desktop, tidy 2x2 on mobile. Each chip carries a label —
   "89%" on its own did not say humidity. */
.today-snapshot { border: 1px solid #e3e3e3; border-radius: 12px; padding: 18px; margin: 18px 0; background: #f7fbf7; }
.today-snapshot h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; color: #157A48; }
.today-snapshot .ts-lead { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
/* auto-fit, not repeat(4,1fr): a feed with no wind or no humidity now emits
   two or three chips instead of four, and fixed tracks would have left the
   row with visible empty cells. auto-fit collapses the unused tracks, so 4
   chips give 4 equal columns and 2 chips give 2 — at any width. */
.today-snapshot .ts-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.today-snapshot .ts-chip { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 10px 8px; text-align: center; }
.today-snapshot .ts-chip span { display: block; font-size: 12.5px; color: #666; line-height: 1.3; }
.today-snapshot .ts-chip b { display: block; font-size: 15.5px; color: #222; margin-top: 3px; line-height: 1.3; }
.today-snapshot .ts-next { font-size: 15px; line-height: 1.6; margin: 14px 0 0; color: #444; }
@media (max-width: 768px) {
  .today-snapshot { padding: 14px; margin: 14px 0; border-radius: 10px; }
  .today-snapshot h2 { font-size: 18px; }
  .today-snapshot .ts-lead { font-size: 15.5px; }
  /* 140px minmax already yields 2 columns on a 374px phone; this only tightens
     it further on the narrowest handsets. */
  .today-snapshot .ts-chips { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .today-snapshot .ts-chip b { font-size: 15px; }
}

/* --- FAQ accordion --------------------------------------------------
   LAYOUT: both templates are float-based — .maindata-left is 63% float:left
   and .maindata-right is 35% float:right. A sibling with no width and no
   float sits in whatever gap is left, which is why the FAQ first rendered
   squashed into the right-hand column. Every full-width block on these pages
   uses the "width:100%; float:left" idiom, so the FAQ does too, plus
   clear:both so it always starts below both columns. */
.ga-faq { width: 100%; float: left; clear: both; margin: 34px 0 10px; }
.ga-faq h2 { font-size: 21px; line-height: 1.3; color: #157A48; margin: 0 0 14px; }
.ga-faq details { border: 1px solid #e6e6e6; border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.ga-faq details[open] { border-color: #ee8021; }
/* 56px min-height keeps the tap target well above the 44px mobile minimum */
.ga-faq summary { cursor: pointer; font-weight: 600; font-size: 16px; line-height: 1.45; color: #222; padding: 16px 52px 16px 16px; min-height: 56px; list-style: none; position: relative; display: block; -webkit-tap-highlight-color: transparent; }
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary::marker { content: ""; }
.ga-faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%; background: #fcf6e8; color: #ee8021; font-size: 20px; font-weight: 400; }
.ga-faq details[open] summary::after { content: "\2212"; background: #ee8021; color: #fff; }
.ga-faq details[open] summary { border-bottom: 1px solid #f0f0f0; }
.ga-faq summary:hover { background: #fafafa; }
.ga-faq summary:focus-visible { outline: 2px solid #ee8021; outline-offset: -2px; }
.ga-faq .ga-faq-a { margin: 0 !important; padding: 14px 16px 16px !important; border: 0 !important; font-size: 15.5px; line-height: 1.7 !important; color: #333; }
@media (max-width: 768px) {
  .ga-faq { margin: 26px 0 6px; }
  .ga-faq h2 { font-size: 19px; }
  .ga-faq summary { font-size: 15.5px; padding: 15px 48px 15px 14px; }
  .ga-faq .ga-faq-a { font-size: 15.5px; padding: 13px 14px 15px !important; }
}

/* =====================================================================
   [1] THE MOBILE GUTTER — the single highest-value rule in this file.
   .container-inner computes to 80% width + 37.5px side margins, leaving a
   300px column on a 375px phone. Nothing 320px or wider can fit, which is
   why AdSense units hang out of the right edge on real devices.
   !important is not decoration here: the width comes from the theme's own
   .container-inner.flex-layout rule, which outscores a single class.
   ===================================================================== */
@media (max-width: 767px) {
  .container-inner {
    width: auto !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}
@media (max-width: 400px) {
  .container-inner { margin-left: 8px !important; margin-right: 8px !important; }
}

/* =====================================================================
   [2] NOTHING MAY EXCEED ITS COLUMN.
   A belt-and-braces pass so a wide ad, a wide embed or a wide table can
   never push the page sideways again. min-width:0 is the part people miss:
   a grid/flex item defaults to min-width:auto and refuses to shrink below
   its content, so one long unbroken string is enough to widen the page.
   ===================================================================== */
.detail-data-pge, .maindata-rowlft-rght, .maindata-left, .maindata-right { min-width: 0; }
.detail-data-pge img, .maindata-left img, .maindata-right img { max-width: 100%; height: auto; }
.detail-data-pge iframe, .maindata-left iframe, .maindata-right iframe { max-width: 100%; }
.detail-data-pge ins.adsbygoogle,
.maindata-left ins.adsbygoogle,
.maindata-right ins.adsbygoogle,
.detail-data-pge .google-auto-placed,
.maindata-left .google-auto-placed,
/* .maindata-right was missing from this list — the ins.adsbygoogle variant
   above covered it but the auto-placed one did not. */
.maindata-right .google-auto-placed { max-width: 100% !important; overflow: hidden; }
/* The sky-condition table has a header cell that cannot wrap below ~230px.
   Let the table scroll inside its own box rather than widen the document. */
.copms-tble { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.copms-tble table { min-width: 300px; }
/* .nearby-links followed a float:right sibling with no clear, so its box
   overlapped the directory above it (measured h=2194 for a 40px strip). */
.nearby-links { clear: both; float: left; width: 100%; box-sizing: border-box; }

/* =====================================================================
   [3] THE SIDEBAR — Weekly Outlook + sticky house ad fill the dead 3,462px.
   ===================================================================== */
/* On a phone the sidebar renders AFTER all ten forecast days, which would
   bury the weekly averages at ~12,500px. Reordering inside the sidebar puts
   the Outlook directly under the last forecast day instead, where it reads
   as the summary of what the reader just scrolled through. The satellite
   imagery follows it. Desktop keeps source order: Rainfall Forecast first,
   Outlook underneath, exactly as laid out in the markup. */
@media (max-width: 767px) {
  .maindata-right { display: flex; flex-direction: column; }
  .maindata-right .weeklyoverview { order: -1; }
}

/* --- Weekly Outlook as a sidebar card -------------------------------
   float+width+clear are load-bearing, not decoration: renderVideoLayout()
   ends with .maindata-img, a width:100% float that is never cleared, so a
   plain block sibling after it overlaps its box. Every full-width element
   on this page uses the same idiom for the same reason. */
.weeklyoverview, .maindata-right .ga-side-ad {
  width: 100%; float: left; clear: both;
}
.weeklyoverview {
  box-sizing: border-box;
  margin: 0 0 22px;
  padding: 16px 16px 6px;
  background: #f7fbf7;
  border: 1px solid #e1ebe4;
  border-top: 4px solid #157A48;
  border-radius: 12px;
}
.weeklyoverview h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.3; color: #157A48; }
/* .container-inner p adds a 1px bottom border and 30px of padding to every
   paragraph on the page. In a 358px card that reads as a broken rule. */
.weeklyoverview p { margin: 0 0 12px; padding: 0 !important; border: 0 !important; font-size: 14.5px; line-height: 1.6; color: #4a554e; }
.weeklyoverview .ga-week__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 14px;
}
.weeklyoverview .ga-week__stat {
  background: #fff; border: 1px solid #e1ebe4; border-radius: 9px; padding: 9px 10px; text-align: center;
}
.weeklyoverview .ga-week__k { display: block; font-size: 12px; line-height: 1.3; color: #6b7770; }
.weeklyoverview .ga-week__v { display: block; margin-top: 2px; font-size: 16px; line-height: 1.3; font-weight: 700; color: #17321f; }
.weeklyoverview ul { margin: 0 0 10px !important; padding: 0; list-style: none; }
.weeklyoverview ul li {
  list-style: none !important;
  margin: 0 0 8px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px dashed #e1ebe4;
  font-size: 14px; line-height: 1.55; color: #3d4a43;
}
.weeklyoverview ul li:last-child { border-bottom: 0; margin-bottom: 0 !important; }
.weeklyoverview ul li::before { content: none; }
.weeklyoverview ul li strong { color: #157A48; }

/* =====================================================================
   [4] AD SLOTS.
   Margin, a quiet label and a reserved min-height. The margin is the point:
   the live page runs a 4.34% CTR at a $0.006 CPC, which is the signature of
   accidental clicks being smart-priced to nothing, and every one of those
   taps happens where an ad sits flush against a tap target. 34px of
   clearance costs nothing and is the cheapest CPC repair available.

   [CLS] The old min-height:130px reserve is GONE, and deliberately so. It was
   guarding a fluid in-article unit that renders 250-600px, so it under-
   reserved by 120-470px on every fill. ga_ad_unit() now emits a FIXED 300x250
   <ins>, which reserves its own box at parse time — a wrapper min-height can
   only disagree with that and reintroduce the shift, including upwards when
   the reserve is the taller of the two.
   ===================================================================== */
.ga-ad { clear: both; margin: 34px 0; text-align: center; }
/* [A11Y] #9aa3a0 measured 2.59:1 on white — my own contrast failure, caught
   in the same audit. #6b7770 is 4.67:1 and still reads as a quiet label. */
.ga-ad__label {
  display: block; margin: 0 0 6px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6b7770;
}
.ga-ad--inarticle { min-height: 0; }
/* inline-block so .ga-ad's text-align:center still centres it; max-width is
   the guard for 320px handsets, where 300px + column padding would overflow. */
.ga-ad ins.adsbygoogle { display: inline-block; max-width: 100%; }
/* The house ad in the sidebar, above the satellite cards. */
.maindata-right .weather-page-ads { margin: 0 0 22px; }
/* [CLS] aspect-ratio, not just height:auto. Ad 6959 is unpublished today, so
   this box renders empty and shifts nothing — but the creative is a 240x400
   portrait, and at the ~358px sidebar width on a phone that lands ~596px tall
   against a 0px reserve the moment anyone hits Publish. Reserving the ratio
   now means that day is a non-event. Re-measure if the creative changes shape. */
.maindata-right .ga-side-ad img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 240 / 400; }

/* The banner spans the full content column.
   HEIGHT IS NOT SET ON PURPOSE. Strawberry_Ad-1.png is 1024x512 — an exact
   2:1 — and the creative uses its whole canvas: logo top-left, headline,
   product panels, the phone number, and a company/website bar along the
   bottom. Any max-height with object-fit:cover crops that bottom bar off.
   So at full width the height is half the width and there is no CSS fix for
   that: a shorter banner needs a wider CREATIVE (1200x300 or 970x250 both
   drop straight in here with no change to this rule).
   Scoped away from .maindata-right so the 240x400 portrait in the sidebar,
   which is already the right size, is untouched. */
.detail-data-pge .weather-page-ads img { width: 100%; max-width: 100%; height: auto; }

/* =====================================================================
   [4b] SOURCE / LAST UPDATED CARD.
   Replaces the red paragraph + the 60-word <h4> + the .totalrain box.
   ===================================================================== */
/* Default shape is the STANDALONE one — used only when there is no snapshot
   card to sit inside. The in-card variant below strips the box back off. */
.ga-source {
  box-sizing: border-box; clear: both;
  margin: 18px 0; padding: 0;
  background: #fff; border: 1px solid #e4e9e6; border-radius: 12px;
  overflow: hidden;
}
.ga-source * { box-sizing: border-box; }
.ga-source__meta { margin: 0; padding: 14px 18px 4px; }
.ga-source__row { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 10px; }
.ga-source__row dt {
  flex: 0 0 130px; margin: 0; font-size: 14px; font-weight: 700; color: #17321f;
}
.ga-source__row dd { flex: 1 1 220px; margin: 0; font-size: 14.5px; line-height: 1.5; color: #3d4a43; }
/* [A11Y] #b35400 + a permanent underline. This rule sits AFTER the contrast
   block at the top of the file and has the same specificity, so it was the
   thing quietly putting #ee8021 back — fixed here at source rather than by
   escalating specificity up there. */
.ga-source__row dd a { color: #b35400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ga-source__row dd a:hover, .ga-source__row dd a:focus { text-decoration-thickness: 2px; }
/* .container-inner p puts a 1px bottom border and 30px of padding on every
   paragraph on this page; inside a card that reads as a broken rule. */
.ga-source__note {
  margin: 0 !important; padding: 10px 18px 14px !important; border: 0 !important;
  background: #fbfcfb; border-top: 1px solid #eef2f0 !important;
  font-size: 13.5px; line-height: 1.55; color: #6b7770;
}
@media (max-width: 560px) {
  .ga-source__meta { padding: 12px 14px 2px; }
  .ga-source__row { display: block; margin-bottom: 11px; }
  .ga-source__row dt { font-size: 13px; margin-bottom: 1px; }
  .ga-source__note { padding: 10px 14px 12px !important; }
}

/* =====================================================================
   [4c] ONE CARD: snapshot -> next day -> 5-day total -> source.
   The rain total and the provenance rows are pulled flush to the card's
   edges with negative margins that MUST match .today-snapshot's padding
   (18px desktop / 14px at <=768px, set in state_dist_block.php).
   ===================================================================== */
.today-snapshot .ts-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  margin: 14px -18px 0; padding: 13px 18px;
  background: #eef6f0; border-top: 1px solid #dce8e1;
}
.today-snapshot .ts-total__k { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #5d6b63; }
.today-snapshot .ts-total__v { font-size: 21px; font-weight: 700; line-height: 1.1; color: #157A48; }
.today-snapshot .ts-total__d { font-size: 14.5px; line-height: 1.4; color: #4a554e; }

/* The in-card variant: no box of its own, just the closing rows. */
.today-snapshot .ga-source {
  margin: 0 -18px -18px; padding: 0;
  background: #fbfdfc; border: 0; border-top: 1px solid #dce8e1;
  border-radius: 0 0 12px 12px;
}
.today-snapshot .ga-source__meta { padding: 13px 18px 3px; }
.today-snapshot .ga-source__note {
  padding: 0 18px 13px !important; background: transparent; border-top: 0 !important;
}
@media (max-width: 768px) {
  /* the card's padding drops to 14px at this width, so the pull-outs must too */
  .today-snapshot .ts-total { margin: 12px -14px 0; padding: 12px 14px; }
  .today-snapshot .ts-total__v { font-size: 19px; }
  .today-snapshot .ga-source { margin: 0 -14px -14px; border-radius: 0 0 10px 10px; }
  .today-snapshot .ga-source__meta { padding: 12px 14px 2px; }
  .today-snapshot .ga-source__note { padding: 0 14px 12px !important; }
}

/* =====================================================================
   [4d] FORECAST LEGEND — sky condition + compass, two compact cards.
   Replaces .compass / .lff-compsimg / .copms-tble, which spent 504px on
   desktop and 1,019px on a phone on a five-line key, mostly on two 24px
   headings with a 60px min-height each.
   ===================================================================== */
.ga-legend {
  width: 100%; float: left; clear: both; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 26px 0;
}
.ga-legend * { box-sizing: border-box; }
.ga-legend__card {
  padding: 15px 16px; background: #fff;
  border: 1px solid #e4e9e6; border-radius: 12px;
}
.ga-legend__h {
  margin: 0 0 12px !important; padding: 0;
  font-size: 16px !important; font-weight: 700; line-height: 1.35; color: #157A48;
  min-height: 0 !important;
}
.ga-legend__sky { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ga-legend__sky li {
  display: flex; align-items: center; gap: 11px;
  margin: 0 !important; padding: 7px 0 !important;
  border-bottom: 1px solid #f0f3f1; list-style: none !important;
  font-size: 15px; line-height: 1.3;
}
.ga-legend__sky li:last-child { border-bottom: 0; }
.ga-legend__sky li::before { content: none; }
/* The badge doubles as the scale: white through to overcast grey, so the
   five rows read as a gradient rather than five identical chips. */
.ga-legend__octa {
  flex: 0 0 auto; min-width: 42px; padding: 4px 8px;
  border: 1px solid #cfd8d3; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; color: #17321f;
}
.ga-legend__octa[data-octa="0"] { background: #fffdf2; border-color: #efe4c0; }
.ga-legend__octa[data-octa="1"] { background: #f4f9f5; }
.ga-legend__octa[data-octa="3"] { background: #e7eeea; }
.ga-legend__octa[data-octa="5"] { background: #d6ded9; }
.ga-legend__octa[data-octa="8"] { background: #c2ccc6; }
.ga-legend__name { flex: 1 1 auto; color: #243029; }
.ga-legend__note {
  margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important;
  font-size: 13px; line-height: 1.5; color: #6b7770;
}
.ga-legend__compass { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; }
@media (max-width: 767px) {
  .ga-legend { grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }
  .ga-legend__compass { max-width: 200px; }
}
/* In the sidebar it sits directly under the Weekly Outlook, in a 358px
   column — always one card per row there, whatever the viewport. */
.maindata-right .ga-legend {
  grid-template-columns: 1fr; gap: 12px; margin: 0 0 22px;
  width: 100%; float: left; clear: both;
}
/* On a phone the sidebar is a flex column and .weeklyoverview is pulled to
   the front with order:-1. The legend takes the same order so the two stay
   together: equal order values keep source order, so Outlook still leads. */
@media (max-width: 767px) {
  .maindata-right .ga-legend { order: -1; }
}

/* =====================================================================
   [6] HOME + STATE PAGE.

   Both were a heading, a paragraph and a <table> of floated <tr>s running
   the full content width. The grid below is shared with every other depth;
   these rules only add the opening lede and the three info cards.
   ===================================================================== */
.ga-lede {
  max-width: 68ch;
  margin: 0 0 22px !important; padding: 0 !important; border: 0 !important;
  font-size: 17px !important; line-height: 1.6 !important; color: #3d4a43;
}
.weather-seo-content { width: 100%; float: left; clear: both; margin: 34px 0 0; }
.weather-seo-content h2 { font-size: 21px; line-height: 1.3; color: #157A48; margin: 0 0 12px; }
.weather-seo-content > p {
  max-width: 72ch;
  margin: 0 0 24px !important; padding: 0 !important; border: 0 !important;
  font-size: 15.5px; line-height: 1.7 !important; color: #3d4a43;
}

.ga-info {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin: 0 0 10px;
}
.ga-info__card {
  box-sizing: border-box; padding: 18px 18px 16px;
  background: #fff; border: 1px solid #e4e9e6; border-top: 4px solid #157A48;
  border-radius: 12px;
}
.ga-info__card h3 {
  margin: 0 0 12px !important; padding: 0;
  font-size: 16.5px !important; line-height: 1.35; color: #157A48; min-height: 0 !important;
}
.ga-info__card ul, .ga-info__card ol {
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.ga-info__card li {
  position: relative;
  margin: 0 0 10px !important; padding: 0 0 10px 22px !important;
  border-bottom: 1px dashed #eef2f0; list-style: none !important;
  font-size: 14.5px; line-height: 1.55; color: #3d4a43;
}
.ga-info__card li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.ga-info__card li strong { color: #17321f; }
/* A tick for the feature list, a counter for the numbered steps. Both drawn
   in CSS so the markup stays a plain <ul>/<ol> for a screen reader. */
.ga-info__card ul li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  font-weight: 700; color: #157A48;
}
.ga-info__steps { counter-reset: ga-step; }
.ga-info__steps li::before {
  counter-increment: ga-step; content: counter(ga-step);
  position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #157A48; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.ga-info__card p {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: 14.5px; line-height: 1.6 !important; color: #3d4a43;
}
@media (max-width: 900px) { .ga-info { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .ga-info { grid-template-columns: 1fr; gap: 12px; }
  .ga-lede { font-size: 16px !important; }
  .weather-seo-content { margin-top: 26px; }
}

/* =====================================================================
   [5] GRAM PANCHAYAT DIRECTORY — one flat alphabetical grid.

   Reverted from A–Z letter groups on request, 12 Aug 2026: the headings and
   the jump bar broke a simple list of village names into 17 fragments and
   read as heavier than the thing they were indexing.

   What does NOT come back is the old <table class="gram_panchayat_name">
   with its <tr>s floated to width:50%. Floated table rows are not a layout —
   the browser wraps each one in an anonymous table box, which is why 60 names
   measured 4,153px on a 375px phone at one 69px row apiece. Same flat list,
   same order, rendered as a real grid: 4-up on desktop, 2-up on a phone.
   ===================================================================== */
.ga-gp { width: 100%; float: left; clear: both; box-sizing: border-box; }
.ga-gp * { box-sizing: border-box; }
.ga-gp h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; color: #157A48; }
/* line-height needs !important like the rest: the Customizer sets
   .container-inner p { line-height: 35px; border-bottom: 1px solid #ccc;
   padding: 0 0 30px } for every paragraph on the page, and that selector
   (0,1,1) outscores a single class (0,1,0). Without it the two lines of this
   sentence sit 35px apart and read as separate paragraphs. */
.ga-gp__intro {
  margin: 0 0 16px !important; padding: 0 !important; border: 0 !important;
  max-width: 70ch; font-size: 15px !important; line-height: 1.6 !important; color: #4a554e;
}
@media (max-width: 560px) {
  .ga-gp h2 { font-size: 19px; }
  .ga-gp__intro { font-size: 14.5px !important; margin-bottom: 14px !important; }
}

/* Fixed 4-up on desktop, as requested — not auto-fill. auto-fill packed 5
   columns into the 1024px content width, which made each name narrower than
   the longest ones need ("Naraingarh Majra", "Keshopur Basti"). */
.ga-gp__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
/* Below the desktop column the sidebar is gone but the width is not back yet,
   so step down rather than jumping straight to two. */
@media (max-width: 900px) { .ga-gp__list { grid-template-columns: repeat(3, 1fr); } }
.ga-gp__list li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ga-gp__list li::before { content: none; }
/* The former :hover treatment is now the RESTING state, on request — the
   orange border reads as tappable without the reader having to find it, which
   matters on a phone where there is no hover at all. Hover/focus then deepens
   it so a mouse still gets feedback. */
.ga-gp__list a {
  display: flex; align-items: center; min-height: 44px;
  padding: 10px 12px;
  background: #f7fbf7; border: 1px solid #ee8021; border-left: 3px solid #ee8021;
  border-radius: 7px;
  font-size: 15px; line-height: 1.3; color: #17321f; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ga-gp__list a:hover, .ga-gp__list a:focus {
  background: #ee8021; border-color: #ee8021; color: #fff; text-decoration: none;
}
.ga-gp__list a:focus-visible { outline: 2px solid #157A48; outline-offset: 2px; }
@media (max-width: 560px) {
  .ga-gp__list { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .ga-gp__list a { min-height: 42px; padding: 9px 10px; font-size: 14px; }
}
/* Below ~340px two columns start truncating three-word names. */
@media (max-width: 340px) {
  .ga-gp__list { grid-template-columns: 1fr; }
}

/* ---------- ga-social-strip-css
   source: includes/ga-social-strip.php :: ga_social_strip_css() ---------- */
/* float+width+clear are NOT decoration — they are what makes the strip sit in
   the forecast column at all. .wdata_inner is "width:100%;float:left" and is
   never cleared, so every sibling after it in .wdata has to be a full-width
   float too (see .blog-post-section, which is). Leave the strip as a plain
   auto-width block and its inner flex list — a flex container avoids floats
   the way a BFC does — shrink-to-fits into the zero space left beside that
   float and overflows out of the 63% column, on top of the right column.
   clear:both only clears floats inside .maindata-left, which is itself a
   float and therefore its own BFC, so the right column is untouched. */
.ga-social-strip {
    float: left;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    margin: 22px 0;
    padding: 14px 16px;
    /* background: #f8f9fa; */
    /* border: 1px solid #ececec; */
    border-left: 4px solid #157A48;
    border-radius: 6px;
}
.ga-social-strip *{box-sizing:border-box}
.ga-social-strip__lead{margin:0 0 11px;font-size:15px;line-height:1.5;font-weight:600;color:#2f3a33}
.ga-social-strip__lead strong{color:#157A48}
.ga-social-strip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ga-social-strip__item{flex:1 1 auto;margin:0;padding:0}
.ga-social-strip__item::before{content:none}
.ga-social-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 16px;border-radius:8px;border:1px solid transparent;font-size:15px;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;color:#fff;background:#455a64;transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.ga-social-btn:hover,.ga-social-btn:focus,.ga-social-btn:visited{color:#fff;text-decoration:none}
.ga-social-btn:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.16)}
.ga-social-btn:active{transform:translateY(0)}
.ga-social-btn:focus-visible{outline:3px solid #157A48;outline-offset:2px}
.ga-social-btn svg{display:block;flex:0 0 auto;width:20px;height:20px;fill:currentColor}
.ga-social-btn--whatsapp{background:#0E7C6F}
.ga-social-btn--whatsapp:hover{background:#0a6156}
.ga-social-btn--facebook{background:#1257C0}
.ga-social-btn--facebook:hover{background:#0e469a}
.ga-social-btn--youtube{background:#C4302B}
.ga-social-btn--youtube:hover{background:#9d2622}
.ga-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:560px){
.ga-social-strip{padding:12px}
.ga-social-strip__lead{font-size:14.5px;margin-bottom:10px}
.ga-social-strip__list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ga-social-strip__item{flex:none}
.ga-social-strip__item--primary{grid-column:1/-1}
.ga-social-btn{font-size:14.5px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){
.ga-social-btn{transition:none}
.ga-social-btn:hover{transform:none}
}

/* ---------------------------------------------------------------------------
 * H1 on mobile — 26 Aug 2026
 *
 * The block and village templates set their own h1 inline (22px) and the
 * no-forecast template has .ga-nwd__h1. The India / state / district
 * templates emit a BARE <h1>, so those three fall through to Neve's
 * --h1fontsize: 36px on phones. An 80-character title at 36px wraps to five
 * lines and eats ~450px of a 852px viewport before any forecast is visible —
 * and it is the LCP element on those pages.
 *
 * Every h2 in this stylesheet is already 19-21px, so 36px was also out of
 * proportion with the rest of the design.
 *
 * The selector is deliberately narrow:
 *   #ga-main            only the weather templates. /about-green-alerts/ has
 *                       no #ga-main, so it is untouched.
 *   :not([style])       leaves the block/village inline 22px alone.
 *   :not([class])       leaves .ga-nwd__h1 alone.
 *
 * clamp() floor 22px matches the block/village h1 exactly; the ceiling of
 * 2.5rem is Neve's own desktop 40px, reached at ~909px wide.
 *
 * line-height is deliberately NOT set. Neve's --h1lineheight is already
 * 1.2 on phones and 1.1 on desktop; overriding it to 1.28 made the desktop
 * h1 box 14px taller, which is a layout change nobody asked for.
 *
 * Measured in Chrome at a real 393px viewport:
 *   before  36px  5 lines  216px tall
 *   after   22px  3 lines   79px tall     (137px of fold recovered)
 * At 1280px before and after are byte-identical: 40px, 44px line, 88px box.
 * ------------------------------------------------------------------------- */
#ga-main h1:not([class]):not([style]) {
  font-size: clamp(1.375rem, 4.4vw, 2.5rem);
  text-wrap: balance;
}
