/*
 * Mobile reflow corrections.
 *
 * GIGW / WCAG 2.1 AA 1.4.10 (Reflow) requires the site to be usable at 320 CSS px
 * without a horizontal scrollbar. A 320px audit of the public pages found three
 * places that pushed the page wider than the screen; each is corrected below and
 * nothing here changes the desktop rendering.
 *
 * Everything is scoped inside a max-width media query (or uses min() so the value
 * only shrinks), so the carefully tuned desktop and 110%/125%-zoom behaviour that
 * the existing rules were written for stays exactly as it is.
 *
 * Loaded LAST in the head so it can beat the equal-specificity rules that live in
 * the layouts' own <style> blocks.
 */

/* ------------------------------------------------------------------ *
 * 1. District-layout footer was pinned to a single line at every width
 *
 * _LayoutDistrictWebsite forces `flex-wrap: nowrap` on .footer-bottom and on the
 * .footer-info / .footer-links groups. That was added so the policy strip would
 * not drop to a second line at 110%+ zoom on a desktop, and it is right to keep
 * it there. But the rule carried no upper width bound, so on a phone the policy
 * links stayed on one 665px line and dragged the whole page 173px wider than the
 * screen (seen on Schemes & Projects and on Gallery, which use this layout).
 *
 * The row is allowed to wrap normally below the Bootstrap `xl` breakpoint.
 *
 * The bound was 767.98px at first, which fixed phones but left every tablet and
 * small laptop broken: `white-space: nowrap` makes the two groups spill straight
 * out of their own boxes and land on top of each other, so the phone number, the
 * visitor counts and the policy links print over one another. Measured on the
 * Amravati district page in Marathi, with the groups needing about 1050px of the
 * row before padding and the 60px gap:
 *
 *     768px  info content 55-442, links content  76-736  -> overlap
 *     992px  info content 55-442, links content 300-960  -> overlap
 *    1100px  info content 55-442, links content 408-1068 -> overlap
 *    1200px  info content 57-448, links content 492-1168 -> clear
 *    1280px / 1400px                                     -> clear
 *
 * 1199.98px is therefore the real threshold, and it is exactly Bootstrap's `xl`
 * boundary. At 1200px and above the desktop single-line design is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 1199.98px) {
    section.mahabhumi-footer.footer .footer-bottom {
        flex-wrap: wrap !important;
    }

    section.mahabhumi-footer.footer .footer-bottom > .footer-info,
    section.mahabhumi-footer.footer .footer-bottom > .footer-links {
        flex-wrap: wrap !important;
        /* nowrap is what pushed the text outside its own box; normal lets each
           group wrap inside the width it actually has. */
        white-space: normal;
        justify-content: center;
        max-width: 100%;
    }

    /* The 60px right margin that separates the two groups on a wide screen is
       only meaningful while they sit side by side. Stacked, it just shifts the
       visitor counts off centre. */
    section.mahabhumi-footer.footer .footer-bottom > .footer-info {
        margin-right: 0;
    }
}

/* ------------------------------------------------------------------ *
 * 1b. Bare `.row` directly inside <main> scrolled the page sideways
 *
 * A Bootstrap `.row` carries `margin: 0 -12px` and is meant to sit inside a
 * `.container` / `.container-fluid`, whose matching 12px padding cancels it. On
 * these pages the rows are direct children of <main>, which has no such padding,
 * so every row is viewport + 24px and the page scrolls 12px sideways.
 *
 * Measured on the Amravati district page: at 1024px the row is 1048px wide,
 * left:-12 right:1036, parent <main> 1024.
 *
 * Zeroing the negative margin is the smallest correct fix: the columns keep their
 * own 12px padding, so content ends up inset 12px from the edge - exactly what a
 * proper `.container` would have produced - and nothing overflows.
 *
 * NOT bounded by a media query. The first version stopped at 1199.98px because only
 * tablets had been reported, but a sweep at every width found the same +12 on eight
 * pages at 1280, 1440 and 1920 as well - Discussion & Talks, Tenders, RTI, RTS, the
 * three district homes and Video Gallery. A sideways scrollbar is a defect at every
 * width, so the rule now applies everywhere.
 * ------------------------------------------------------------------ */
main > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Same defect, different wrappers. Each was measured, not guessed:
     RTI / RTS header - .row inside a `.container-fluid` whose horizontal padding has
                        been zeroed elsewhere (768px: row 792 in a 768 container, pad 0)
     Tenders          - .row.g-4 inside div#acts.tab-pane      (1024px: row 1048)
     RTI / RTS body   - .row     inside div#accordion-style-11 (1024px: row 1048)
   Listed explicitly rather than with a blanket `:not(.container) > .row`, which would
   re-margin every row on the site and could shift layouts that are currently fine. */
.top-bar .container-fluid > .row,
.tab-pane > .row,
[id^="accordion-style"] > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ------------------------------------------------------------------ *
 * 1c. Card headers were pinned to a fixed height and spilled their title
 *
 * custom.css sets `.ch-key-persons { height: 2.2rem !important }` (35.2px), raised
 * to 3.2rem only below 576px. Between 577px and 991px a title that needs two or more
 * lines still gets a 35px box, so it overflows and prints on top of whatever follows.
 *
 * Measured on Revenue Week at 768px: `.col-md-2` gives a 120px column, the heading
 * "विभाग / दिवस निवडा" wraps to 108px inside a 35px header, and the "विभाग निवडा"
 * form label below it sits at T:134-156 - inside the heading's own T:91-199 span,
 * a 65px collision. On screen only "विभाग /" was legible.
 *
 * This is trap 5.23 again: never give a content-driven block a fixed height. Keeping
 * it as a min-height preserves the intended 2.2rem band whenever the title fits on
 * one line, and lets the header grow when it does not.
 * ------------------------------------------------------------------ */
.ch-key-persons {
    height: auto !important;
    min-height: 2.2rem;
}

@media (max-width: 576px) {
    .ch-key-persons {
        min-height: 3.2rem;
    }
}

/* ------------------------------------------------------------------ *
 * 1d. Help & Support cards spilled onto the Feedback section (English, 1024px)
 *
 * `.help-support-cards` is a wrapping flex container that is ITSELF a flex item of
 * `.col-md-12.d-flex`. The parent uses the default `align-items: stretch`, so Chrome
 * resolves the item's cross size from a single flex line first, fixes the parent at
 * that height, and then stretches the item back onto it. When the contents actually
 * wrap to a second line the box does not grow, and the overflow lands on whatever
 * follows.
 *
 * Measured on the English home page at 1024px: container height 214px but
 * scrollHeight 436px, computed height 214.3px with no CSS rule setting any height,
 * max-height none, overflow visible. The fourth card ("District Superintendent
 * Office") sat at T:5503-5717, past its own parent's bottom of 5496, printing over
 * the "Feedback" heading and the name/email fields - an 83px collision. Marathi does
 * not show it because its shorter labels still fit on one line.
 *
 * `align-self: flex-start` stops the stretch, so the item takes its own content
 * height and the parent grows with it. With a single row it is identical to stretch,
 * so nothing changes at the widths that were already correct.
 *
 * CORRECTION. This rule originally claimed to be "cross-axis only - the horizontal
 * centring is untouched". That is true only while the parent is a ROW, which it is from
 * about 990px up. Below that `.col-md-12.d-flex` becomes `flex-direction: column`, and in
 * a column the cross axis is the HORIZONTAL one - so `align-self: flex-start` was
 * overriding the parent's `align-items: center` and pinning the whole card stack to the
 * left edge. Measured on the Marathi home page: at 375px the stack sat at L:11..224 inside
 * a parent spanning 11..365, i.e. gaps of 0px on the left and 141px on the right; the same
 * at 320, 425 and 768px.
 *
 * Auto cross-axis margins fix it without needing to know where the direction flips, and
 * without a second media query that would have to be kept in step with that breakpoint:
 *
 *   - column parent: `margin-left/right: auto` are cross-axis margins, and cross-axis auto
 *     margins win over `align-self`, so the stack centres.
 *   - row parent: they are main-axis margins and simply absorb the free space either side,
 *     which is what `justify-content: center` was already doing.
 *
 * Verified by toggling the declaration in the live page: at 320 / 375 / 425 / 768px the
 * gaps become equal (70/70 at 375px), and at 991 / 1024 / 1280 / 1440px every measurement -
 * position, width, height, parent height - is byte-identical to before. The anti-stretch
 * behaviour is untouched: it lives on the cross axis of the row layout, where `align-self`
 * still applies, and no spill appears at any width tested.
 * ------------------------------------------------------------------ */
.col-md-12 > .help-support-cards {
    align-self: flex-start;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------ *
 * 2. Who's Who officer cards had a hard 350px floor
 *
 * `.cards li .details { min-width: 350px }` is wider than a 320px screen on its
 * own, so every officer card forced a sideways scroll. min() keeps the 350px
 * intent wherever there is room and lets the card shrink when there is not.
 * ------------------------------------------------------------------ */
.cards li .details {
    min-width: min(350px, 100%);
}

/* Long unbroken values in those cards - e-mail addresses in particular - can
   still poke out of a narrow card, so let them break. */
@media (max-width: 767.98px) {
    .cards li .details .email,
    .cards li .details .name,
    .cards li .details .title {
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------------------ *
 * 3. Search bar sat 3px wider than its own box
 *
 * #globalSearchBar is 310px and pinned to right: 0. The sticky-search script writes
 * `position: absolute; right: 0` straight onto the element, so the inline style beats
 * the layout's `@media (max-width: 768px)` rule that was meant to make it relative and
 * full width - the bar stays 310px on a phone. Its .input-group measures 313px, and
 * those 3px hanging past the right edge were enough to raise a horizontal scrollbar on
 * every page between roughly 577px and 768px.
 *
 * Capping the widths keeps the bar inside the screen whatever the script writes, and is
 * bounded to small screens so the desktop bar is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    #globalSearchBar,
    #globalSearchBar .input-group {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------ *
 * 4. District header quick links were unreadable on a phone
 *
 * The quick-links nav is marked `d-none d-lg-flex`, but SCDLR/css/styles.css deliberately
 * shows it again below 768px. It also carried an inline `padding-left: 7.5rem !important`
 * for desktop alignment; an inline !important cannot be overridden from a stylesheet, so
 * on a 320px screen 120px of a 216px bar went to padding. The links were squeezed to about
 * 60px each and broke to one word per line, which alone made the header 544px tall.
 *
 * The indent is now a class, applied only where it was meant to apply.
 * ------------------------------------------------------------------ */
/* The element also carries Bootstrap's .px-4, whose padding is !important. Matching that
   with !important alone is not enough here: on the district layout Bootstrap is pulled in
   from a partial in the body, i.e. AFTER this file, so an equal-specificity rule would
   lose on source order. `nav.district-quick-links` (0,1,1) outranks `.px-4` (0,1,0) and
   therefore wins wherever the two files happen to sit. */
nav.district-quick-links {
    padding-left: 7.5rem !important;
}

@media (max-width: 991.98px) {
    nav.district-quick-links {
        padding-left: 0 !important;
        width: 100%;
        justify-content: center;
    }

    /* Let each link keep its own words together and wrap as a whole item, instead of
       being shrunk until the text breaks inside it. max-width keeps the longest label
       safe on the narrowest screen. */
    .district-quick-links > a {
        flex: 0 0 auto;
        max-width: 100%;
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------------ *
 * 5. SCDLR layout top bar could not wrap
 *
 * _LayoutSCDLR (Schemes & Projects detail, Mahsul Mahiti Tantradnyan) lays its top bar
 * out as one nowrap flex row - phone number, language toggle, read-aloud, cart, theme,
 * register. Together those need about 653px, so on a 320px screen the page scrolled a
 * third of a screen sideways. Letting the bar wrap costs nothing on a desktop, where it
 * has always had room to stay on one line.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .top-bar .container,
    .top-bar .container > .d-flex,
    .top-bar .d-flex {
        flex-wrap: wrap;
        row-gap: 0.35rem;
        justify-content: center;
    }

    /* The search bar on this layout is a separate nav that also refuses to shrink. */
    #globalSearchBar .navbar,
    #globalSearchBar form {
        max-width: 100%;
        width: 100%;
    }
}

/* ------------------------------------------------------------------ *
 * 6. "VIEW MORE" printed on top of the service description
 *
 * home-index.css pins #viewMoreBtn to the bottom-right corner of the service card with
 * `position: absolute`, and reserves room for it with `#serviceDesc { padding-right: 85px }`.
 * On a phone the description is clamped to four lines and centred, and the markup also
 * carries an inline `margin-left: -57px` nudge, so the link ended up printed across the
 * description text - both were unreadable.
 *
 * Below the md breakpoint the link simply follows the text as its own line. The margin
 * needs !important only because the -57px lives in a style attribute on the element.
 * ------------------------------------------------------------------ */
/* `body #x` is (1,0,1) and outranks the page's own `#x` (1,0,0). home-index.css is a
   page-level stylesheet and therefore loads after this file, so plain id selectors here
   would lose on source order - the same ordering problem as trap 5.19. */
@media (max-width: 767.98px) {
    body #viewMoreBtn {
        position: static;
        display: block;
        margin-left: 0 !important;
        margin-top: 0.4rem;
        text-align: center;
    }

    /* The reserved gutter only made sense while the link floated over this text. */
    body #serviceDesc {
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------ *
 * 7. Hero section swallowed its own content on phones and tablets
 *
 * home-index.css sizes .hero-section in viewport-height units, layered by breakpoint:
 *     @media (max-width: 768px) { height:  50vh }
 *     @media (max-width: 576px) { height: 150vh }
 *     @media (max-width: 400px) { height: 203vh }
 *   plus aspect-ratio: 16/9 and 4/3 at the two smallest breakpoints.
 *
 * vh measures the WINDOW, while the content inside measures by width and by how long the
 * text runs - and Marathi and English do not run to the same length. The two can never
 * agree, and because the section is overflow:hidden the surplus is silently swallowed.
 * Measured on this build at an 800px-tall window:
 *     768px wide -> section 400px, content 1291px : 891px hidden, i.e. the entire
 *                   quick-services circle (E-Mojani, 8A, Apali Chawadi, Property Card,
 *                   e-Hakk, EPSIT) invisible
 *     425px wide -> section 1200px, content 1328px : 128px hidden
 * On a short window it is worse still: at 332px tall, 150vh is only 498px.
 *
 * Letting the content set the height is the whole fix. overflow:hidden is left alone - it
 * keeps the decorative .hero-bg from spilling, and with height:auto there is no surplus to
 * clip. Desktop (>= 992px) is untouched and keeps its designed 560px band.
 *
 * `section.hero-section` (0,1,1) outranks the page stylesheet's `.hero-section` (0,1,0),
 * which matters because page CSS loads after this file - see trap 5.22.
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    section.hero-section {
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
    }
}

/* ------------------------------------------------------------------ *
 * 7b. 64px of empty space above the hero logo on phones
 *
 * styles.css:5120 sets `.hero-logopart { padding-top: 4rem !important }` below 768px.
 * That made sense while the hero was a fixed-height band and the logo had to be pushed
 * clear of the header; with section 7 above making the band content-driven there is
 * nothing to clear, and the 4rem is simply a gap at the top of the page. It also
 * overrides the markup's own `pt-4` (1.5rem), which is the spacing that was intended.
 *
 * Reduced rather than removed: a little breathing room under the header still reads
 * better than the logo butting against it. 1rem matches the gap below the logo image
 * (`.hero-logopart img { margin: 0 auto 1rem }`), so the card sits evenly.
 *
 * !important is required to beat the !important in styles.css, which also loads after
 * this file (see the note in section 10e) - not a preference.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .hero-logopart {
        padding-top: 1rem !important;
    }
}

/* ------------------------------------------------------------------ *
 * 8. Quick-services circle was shaved at the smallest screens  - RESOLVED UPSTREAM
 *
 * This section used to scale the whole ring to 0.9 below 375px, because the nine tiles sat
 * at fixed pixel offsets in a 400x400 box: the box could not reflow, the arrangement spanned
 * 337px at 320px wide, and five tiles were shaved against the hero's overflow:hidden.
 *
 * The ring is no longer authored in pixels. .quick-services is min(500px, 100%) and every
 * tile, outline and disc inside it is a percentage of that box, so at 320px the ring simply
 * draws smaller and nothing is clipped. The scale() is removed rather than kept as a safety
 * net: it would now shrink a ring that already fits, and it also scaled the GIGW motion
 * toggle (hero-services-inline.css notes the measured 44px -> ~40px), which no longer happens.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 9. Main menu ran past the bottom of shorter phones
 *
 * The stacked menu holds 11 links. Measured on a 375x667 screen (iPhone SE, the smallest
 * common phone) the panel opens 120px down and needs 599px, while only 547px remain, so
 * "Employee Login" and "Contact Us" sat below the fold. The height is not in the links -
 * 11 items come to 482px - it is in the spacing: a 10px gap between each of them adds 100px,
 * and the panel's own padding another 20px.
 *
 * Tightening only the gaps recovers 72px and brings the whole menu on screen. The links keep
 * their 45px height, so the tap targets are untouched.
 *
 * Bounded by max-height so it applies to short screens only: a 390x844 phone already shows
 * all 11 and keeps the roomier spacing.
 * ------------------------------------------------------------------ */
/* `nav#mainNav .navbar-links` is (1,1,1); the menu's own rule is `#mainNav .navbar-links`
   (1,1,0) and lives in a <style> block rendered in the body, so it would win on source
   order at equal specificity - trap 5.22 again. */
@media (max-width: 991.98px) {
    nav#mainNav .navbar-links,
    nav#districtNav .navbar-links {
        gap: 4px;
        padding-top: 4px;
        padding-bottom: 4px;

        /* The panel is a column flexbox that scrolls (max-height + overflow-y: auto), and it
           was also `justify-content: center`. Centring a flex container whose content is
           taller than its box pushes the surplus out BOTH ends, and the part above the top
           edge cannot be scrolled back to - scrollTop is already 0 there. On a short screen
           that permanently hid the first three links: Home, About Us and Services, which is
           why the menu appeared to start at "Resources".
           Starting the list at the top makes every link reachable by scrolling. */
        justify-content: flex-start;
    }
}

/* A 667px screen (iPhone SE) is 12px short even at a 4px gap - the panel starts 153px down.
   Closing the gaps a little further brings the last item, Contact Us, on screen. */
@media (max-width: 991.98px) and (max-height: 700px) {
    nav#mainNav .navbar-links,
    nav#districtNav .navbar-links {
        gap: 2px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

/* ------------------------------------------------------------------ *
 * 10. UserWay launcher sat on top of the mobile menu button
 *
 * The UserWay launcher (loaded from cdn.userway.org) pins itself to the top-right corner
 * with `position: fixed; top: 13px; right: 8px` and z-index 2147483647 - the maximum. Our
 * own mobile menu button lives in exactly that corner, so the launcher covered it: measured
 * at 320, 375 and 425px, ALL fifteen sampled taps across the button landed on the launcher
 * image instead. The button that opens language switch, read-aloud and theme was therefore
 * impossible to press on a phone.
 *
 * z-index cannot win against 2147483647, so the launcher is moved instead of re-stacked.
 * It is placed alongside the menu button rather than sent to another corner: an
 * accessibility control belongs where people look for it, and the strip immediately left of
 * the button is empty at every phone width. The launcher stays fully visible and usable -
 * it is an accessibility control and must not be hidden - it simply no longer shares the
 * button's box.
 *
 * !important because the widget writes its own positioning.
 * ------------------------------------------------------------------ */
/* The widget positions itself with `body .uwy.userway_p1 .userway_buttons_wrapper`
   (0,3,1) and !important, so a plainer selector loses however many !importants it carries.
   `html body .uwy[class*="userway_p"] .userway_buttons_wrapper` is (0,3,2) and outranks it.
   The attribute selector stands in for `.userway_p1` so this keeps working if the widget's
   position setting is ever changed to p2/p3/... */
/* The earlier value here was `top: 40px`, which cleared the menu button as it stood then -
   the button ended at y=32. The header has since grown and the button now spans y=18..48, so
   top: 40px put the launcher straight back on top of it: `document.elementFromPoint` at the
   button's centre (347,33) returned the launcher's own `img.ui_w` rather than the button.

   The launcher is therefore parked BESIDE the button instead of above or below it, which is
   also where people expect to find it. The strip immediately left of the button is empty at
   every phone width - it is `.header-right` background with nothing painted on it:

       width   menu button      free strip left of it
        320    x 274..309       x 212..272
        375    x 329..365       x 247..329
        425    x 380..415       x 284..374
        767    x 721..757       x 512..716

   The button sits ~10px in from the right edge and is ~36px wide, and `top: 18px` centres
   the icon on the button's midline at y=33.

   The horizontal offset has to be set against the VISIBLE circle, not the widget's box. The
   painted `img.ui_w` is only 27px wide and sits inside a 47px `span.usr` with ~10px of
   transparent space on each side, so an 8px gap between the boxes reads as an 18px gap on
   screen - which is what it looked like. Sliding the offset and probing EVERY column of the
   menu button at 320 / 375 / 425 / 767px:

       right   visible gap   menu button columns lost to the launcher
        63px      18px       none
        59px      14px       none
        57px      12px       none
        55px      10px       none                                      <- chosen
        53px       8px       15-16 samples, starting at the button's LEFT edge
                             (x=274 / 330 / 380 / 722 respectively)

   55px is the closest the icon can sit while leaving the button wholly tappable. Below it
   the transparent part of the launcher starts swallowing taps meant for the menu, and it
   does so at the button's left edge - so the whole button has to be probed column by column;
   sampling around its centre reports a clean 25/25 even when the edge is being eaten.

   One sample at the button's far RIGHT column (x=309 / 364 / 415 / 756) is attributed to the
   page rather than the button at every offset tested, 63px included. That is the button's own
   border rounding, constant across offsets, and not the launcher.

   Bounded at 767.98px because that is where the menu button exists; from 768px up it is
   hidden (`d-md-none`) and the launcher keeps the position it already shipped with. */
@media (max-width: 767.98px) {
    html body .uwy[class*="userway_p"] .userway_buttons_wrapper {
        /* The wrapper is 30x30; the painted `.usr` overhangs it by ~8px left, ~9px right,
           ~10px top and ~11px bottom, which is what these offsets are measured against. */
        top: 18px !important;
        right: 55px !important;
        bottom: auto !important;
        left: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html body .uwy[class*="userway_p"] .userway_buttons_wrapper {
        top: 40px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
    }
}

/* ------------------------------------------------------------------ *
 * 10a. The quick-links row ate the top of every phone screen in Marathi
 *
 * The header's quick-links nav is marked `d-none d-lg-flex`, but SCDLR/css/styles.css
 * deliberately un-hides it below 992px so phone users keep reaching District Websites /
 * RTI / RTS / EODB / Dashboard. That intent is kept - the links are not removed here.
 *
 * The problem was how little room the row was given. Measured at 375px:
 *
 *     nav box 260px wide inside a 347px parent, with 14px padding each side
 *       -> only 232px of usable line width, 115px of the screen simply unused
 *     every link carries margin: 7px on all four sides, so each one costs 14px more
 *       than its text and neighbours sit ~17.5px apart
 *
 *     sum of link widths   Marathi 585px   English 388px    (line width 232px)
 *     resulting height     Marathi 148px   English  72px
 *
 * English fits in two rows and looks deliberate; Marathi needs four and pushes the real
 * page content most of a screen further down. That is the whole of the reported
 * "English is managed properly, Marathi is a mess" - the labels are simply longer, and
 * the row was never wide enough to absorb it.
 *
 * Giving the row the full parent width and dropping the side margins (spacing moves to
 * gap, which does not double up between neighbours) takes the nav from 260px to the full
 * 347px, i.e. ~340px of line width. Measured after the change, at 375px:
 *
 *                    before          after
 *     Marathi     148px / 4 rows   61px / 2 rows
 *     English      72px / 2 rows   29px / 1 row
 *
 * and at 320px Marathi is 93px / 3 rows, English 61px / 2 rows. Marathi no longer pays a
 * multiple of the English header; it is one row behind it, which is what the longer labels
 * genuinely cost.
 *
 * Nothing here changes font-size, so the 12px floor and 200% zoom are unaffected, and
 * row-gap keeps vertical separation between tap targets that the old margins provided.
 *
 * Bounded at 767.98px, not 991.98px, for two reasons. It matches the cause - the `width: 75%`
 * in styles.css that starved the row only applies below 768px - and it keeps the change off
 * every width that was not complained about. Checked by switching these declarations off in
 * the live page and re-measuring:
 *
 *      width    without this rule        with it
 *       768     nav 589x31 / 1 row       nav 692x31 / 1 row      band 185px either way
 *       900     nav 511x65 / 2 rows      nav 516x65 / 2 rows     band  79px either way
 *       991     nav 511x65 / 2 rows      nav 516x65 / 2 rows     band  79px either way
 *       992     nav 622x80 / 1 row       identical               band  87px
 *      1440     nav 622x80 / 1 row       identical               band  87px
 *
 * Above 767.98px it only widened the nav box without saving a single pixel of header
 * height, so there was nothing to gain and a tablet layout to put at risk.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* The nav sits in a bare `<div class="d-flex">` that is itself a `flex: 0 1 auto` item,
       so its main size is indefinite and the nav's `flex-basis: 100%` has nothing to resolve
       against - it fell back to a content-ish 260px inside a 347px parent. Giving the wrapper
       a definite width makes the percentage resolve and hands the nav the whole 347px.

       `:has()` is used rather than a structural `.d-flex.justify-content-between > .d-flex`
       path because that Bootstrap combination recurs all over the site and would drag
       unrelated blocks to full width. Kept as its own rule, not merged into a selector list:
       an engine without `:has()` must drop only this rule, and a list containing one unknown
       selector is discarded whole. Where it is dropped the header simply keeps the slightly
       taller layout - nothing breaks.

       Both _HeaderPartial.cshtml and _DistrictHeaderPartial.cshtml use this same wrapper. */
    div.d-flex:has(> nav.d-none.d-lg-flex) {
        flex: 1 1 auto;
        width: 100%;
    }

    nav.d-none.d-lg-flex {
        flex: 1 1 auto;
        /* SCDLR/css/styles.css also carries `nav.d-none.d-lg-flex { width: 75% }` under
           `@media (max-width: 767.98px)` - the same 0-2-1 specificity as this rule, and it
           loads after this file, so it won on source order and held the nav at 75% of 347px
           = 260.4px, which is exactly the width measured. !important is the only lever that
           does not depend on link order; the alternative, editing styles.css, would change
           the desktop-side intent of a file this change has no other reason to touch. */
        width: 100% !important;
        max-width: 100% !important;
        /* px-3 spends 28px of a 375px screen on padding; .25rem each side is enough. */
        padding-left: .25rem !important;
        padding-right: .25rem !important;
        column-gap: .75rem;
        row-gap: .5rem;
    }

    /* Horizontal margins become gap; vertical margins become row-gap. Both are set to 0
       rather than left to double against the gap. */
    nav.d-none.d-lg-flex > a {
        margin: 0 !important;
    }
}

/* ------------------------------------------------------------------ *
 * 10b. The district header kept six rows after 10a, because of an empty box
 *
 * `_DistrictHeaderPartial.cshtml` puts a second link beside the quick-links nav:
 * `<a class="nav-link">` wrapping the Maharashtra emblem. `styles.css` hides every header
 * image below 768px (`header img { display: none }`), so on a phone that link holds
 * nothing at all — its accessible name is the empty string — yet it still claimed 174px
 * of the 343px band and, stretched by `align-items` to match the nav, stood 210px tall.
 * The nav was left with 170px and wrapped its six items onto six rows.
 *
 * Measured at 375px on /DistrictSCLR:
 *
 *     as shipped                      nav 170x202 / 6 rows, header band 218px
 *     hide the empty link             nav 343x70  / 3 rows, header band  86px
 *
 * Bounded at 767.98px to match the rule that empties it: from 768px up the image is
 * visible again (70x70) and the link carries its real name, so it must stay. Hiding a link
 * that has no accessible name is also the correct treatment for the empty-link finding an
 * accessibility scan reports here - the emblem is still reachable from the header logo.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* `.nav-link` is what distinguishes the district header's emblem link from the plain
       `<a>` in _HeaderPartial, which already collapses to 0x0 and needs nothing. */
    div.d-flex:has(> nav.d-none.d-lg-flex) > a.nav-link {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * 10c. The copyright line was permanently hidden behind the floating buttons
 *
 * Two `position: fixed` controls stack in the bottom-right corner. Measured at 375x800
 * with the page scrolled fully down:
 *
 *     chat bubble    x 313..363   y 680..730    bottom inset  70px
 *     back-to-top    x 291..345   y 726..780    bottom inset  20px
 *
 * Together they own the bottom 120px of the viewport. The footer's last block ends there,
 * so `© २०२६ कॉपीराइट: @ भूमि अभिलेख विभाग...` ran underneath both - covered by 54x14px and
 * 38x7px respectively. Unlike content further up the page this can never be scrolled clear,
 * because the page is already at its end: the text is permanently unreadable.
 *
 * The floating controls are not moved - they are deliberately placed and the corner they
 * use is theirs. The footer instead reserves the strip they occupy, so they hover over
 * empty background rather than over words. 128px = the 120px stack plus an 8px gap.
 *
 * Phones only. From 768px up the same 120px is a small fraction of a much wider footer and
 * the copyright never reaches that corner.
 *
 * Two things deliberately NOT changed here, both pre-existing and neither a code defect:
 * the external-link logos render as broken alt text locally because every one of them is a
 * `/SharedDrive/...` upload that lives outside the repository, and the two floating buttons
 * overlap each other by 4px (chat ends at y=730, back-to-top starts at y=726).
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .footer {
        /* styles.css carries `.footer { padding: 10px 0 18px }` - the same 0-1-0 specificity
           as this rule and loaded after it, so the shorthand won on source order and this
           longhand was silently discarded (computed padding-bottom stayed 18px). Same trap
           as the quick-links `width: 75%` in section 10a. */
        padding-bottom: 128px !important;
    }
}

/* ------------------------------------------------------------------ *
 * 10d. The district popover keeps its three-across grid on phones
 *
 * The regions are marked `col-sm-6 col-lg-4`, so below 576px Bootstrap stacks them into one
 * full-width column - six divisions one under another, each short district name stranded
 * against the left edge with 193-230px of empty space beside it. Requirement is to keep the
 * desktop shape instead: Amravati / Chh. Sambhajinagar / Konkan across the first row and
 * Nagpur / Nashik / Pune across the second, which is exactly how the two `.row`s in
 * `_DistrictHeaderPartial.cshtml` are already grouped.
 *
 * The popover is the full width of the screen, so a third of it is all each column can get.
 * `.popover-body`'s 16px side padding is trimmed to 8px here to hand those 16px back to the
 * columns, and the column gutters are narrowed for the same reason.
 *
 * Scoped to `.popover .district-grid` because Bootstrap renders the popover into <body>, so
 * the copy on screen is a clone and not the hidden `#districtPopoverContent` in the page.
 * Nothing here changes font-size, so the 12px floor is untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Popper places the popover from the button, and at 375px that put its right edge 1px
       past the viewport (scrollWidth 376). Capping the width keeps it on screen whatever
       Popper computes. */
    .popover {
        max-width: calc(100vw - 12px);
    }

    .popover .popover-body {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* `.district-grid` is itself `display: flex; flex-wrap: wrap`, so each `.row` inside it
       is a flex item with `flex: 0 1 auto` and sizes to its content instead of filling the
       grid: measured 246px inside a 350px grid, leaving 113px of the popover unused on the
       right while the columns were squeezed to 82px. A definite width hands that back. */
    .popover .district-grid > .row {
        width: 100%;
    }

    .popover .district-grid [class*="col-"] {
        /* !important because pages carry their own blanket column overrides that also match
           these columns and outrank a plain declaration. The EODB page, for one, has an
           inline <style> block with
               @media (max-width: 767.98px) { .col-sm-6 { flex: 0 0 100% !important } }
           and the popover's regions are `col-sm-6 col-lg-4`, so opening the district list
           from that page gave six full-width rows instead of the three-across grid. An
           inline block also loads after every external file, so source order cannot help;
           with !important on both sides this selector's 0-2-0 beats their 0-1-0. */
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        /* !important is needed against this file's own earlier blanket rule
           `#body [class*="col-"] { padding-left: 0 !important }` - the popover is rendered
           into <body id="body">, so it matches, and without this the three columns touch
           with a 0px gutter. 5px each side gives a 10px channel between neighbours. */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* A third of a 320px screen is an 85px column and the longest labels do not fit:
       measured spills of 11px for छ.संभाजीनगर and अहिल्यानगर and 7px for मुंबई उपनगर.
       They cannot simply be told to wrap - two inherited rules forbid it, and both have to
       be lifted here or the label just hangs out of its column:
           bootstrap.min.css   .dropdown-item { white-space: nowrap }
           styles.css          a             { word-break: keep-all }
       `overflow-wrap: anywhere` is the last resort for a single word longer than the column;
       Marathi offers no hyphenation points, so without it there is no break opportunity at
       all. Zeroing the item's own side padding buys back 12.8px before any wrapping is
       needed. Desktop keeps nowrap - its columns are 222px and nothing overflows there. */
    .popover .district-grid .dropdown-item {
        padding-left: 0;
        padding-right: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /* The `»` before each district is a decorative `<i>` with no text and no label, but it
       costs about 14px - enough to push most names onto a second line in a 97px column, and
       `overflow-wrap: anywhere` would then leave the chevron stranded alone on the first
       line. Dropping it on phones takes wrapping from 37 of 42 labels down to 4, and the
       four that remain (छ.संभाजीनगर twice, मुंबई उपनगर, अहिल्यानगर) are simply longer than a
       third of the screen. Nothing is lost to a screen reader - it announces nothing. */
    .popover .district-grid .dropdown-item > i {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * 10e. The hero service circle sat right of centre on every phone  - RESOLVED UPSTREAM
 *
 * Everything from here to the end of the note describes the state BEFORE the ring was
 * re-authored in percentages. It is kept because it is the measurement record that
 * identified the cause; the rules it describes are gone. See the end of the note.
 *
 * `.col-lg-6.d-flex.justify-content-center` centres the 400px `.quick-services` LAYOUT box,
 * but the nine tiles inside it are at fixed offsets and the right-hand ones are the wider
 * labels (आपली चावडी, मालमत्ता पत्रक) while the left-hand ones are short (ई-फेरफार, प्रत्यय).
 * The painted composition is therefore not centred inside its own box, and styles.css
 * compensates with a blanket `margin-left: -40px !important` (320-400px) / `16px` (to 768px)
 * that does not actually land it in the middle. Measured gaps either side of the tiles:
 *
 *     vw 320   L 20  R  -4   <- the right tile was being clipped by the hero's overflow
 *     vw 360   L 40  R  16
 *     vw 375   L 35  R   3
 *     vw 390   L 42  R  11
 *     vw 400   L 47  R  16
 *     vw 426   L 34  R  16
 *     vw 480   L 61  R  43
 *     vw 600   L121  R 103
 *     vw 767   L205  R 186
 *
 * The correction is constant within each of the bands styles.css already defines - 12px,
 * 16px and 9px - so this adds no new breakpoint, it only finishes the ones that exist.
 *
 * Two things this rule has to allow for, both found by measuring rather than by reasoning:
 *
 *   1. The parent is `justify-content: center`. A flex item's margins are part of its outer
 *      size, so with the item centred a margin change moves it by only HALF that amount -
 *      taking margin-left from 16px to 7px shifted the tiles by 4px, not 9px. Every value
 *      below is therefore twice the shift it has to produce.
 *   2. `body` is needed on the selector. styles.css sets `margin-left: -40px !important` at
 *      the same 0-1-0 specificity and loads after this file, so a bare `.quick-services`
 *      loses on source order even carrying !important of its own.
 *
 * These are pixel constants, which section 10's note warns about. They are safe here for a
 * reason that does not apply there: they compensate a composition that is ITSELF authored in
 * fixed pixels (trap 5.24), so they can only go stale if the tile offsets are re-authored -
 * at which point the whole circle has to be re-measured anyway. The durable fix is to place
 * the tiles in percentages; that is a redesign, not a reflow fix.
 * ------------------------------------------------------------------ */
/* RESOLVED UPSTREAM - the four margin corrections that used to sit here are removed.
 *
 * They compensated a composition that was itself authored in fixed pixels. The note above
 * already identified the durable fix ("the durable fix is to place the tiles in percentages;
 * that is a redesign, not a reflow fix") - that redesign has now been done in styles.css, so
 * the corrections have nothing left to correct and would push the ring back off centre.
 *
 * The specific cause they were papering over is worth keeping on record. Every tile offset
 * was "centre + radius*sin(a) - 50px", where 50px was half a 90px tile. The painted tile is
 * only 90px wide while its label fits; the right-hand labels (आपली चावडी, मालमत्ता पत्रक) are the
 * long ones, so those tiles were drawn off their own point by a different amount each. That
 * is why the ring sat right of centre, why the correction differed per band, and why it also
 * differed between English and Marathi and between devices with different fonts. Centring
 * each tile with translate(-50%, -50%) removes the tile's size from the arithmetic entirely.
 */

/* From 768px up the column that holds the ring is itself 10px left of the screen - measured:
   at 980px it spans -10 to (width - 10), because it picks up the grid gutter at 768px. The ring is centred in that column, so
   it painted 10px left of centre. This band also covers a phone with "Desktop site" switched
   on, which lays the page out 980px wide.

   20px of margin gives the 10px shift, for the halving reason in note 1 above. The old band
   ended at 768px, so exactly 768px (an iPad held upright) got the phone correction and sat
   11px off; it now belongs here.

   No upper limit: measured at 992, 1280 and 1920px the row is still 10px left of the screen
   (the column spans 310-950 at 1280px), so the desktop ring needs the same correction. */
@media (min-width: 768px) {
    body .quick-services {
        margin-left: 20px !important;
    }
}

/* ------------------------------------------------------------------ *
 * 10f. The footer read as two ragged left-aligned rows with orphaned separators
 *
 * `.footer-info` (phone, visitor counts) and `.footer-links` (the policy links) are flex
 * rows left at `justify-content: normal`, i.e. flex-start, while everything below them - the
 * social icons, the updated date, the copyright - is centred. On a phone both rows wrap, so
 * the footer showed two ragged left-aligned blocks above three centred ones. Measured at
 * 425px: `.footer-info` items at x 15 / 49 / 172 then 27 on the next line; `.footer-links`
 * at 23 / 271 then 23 / 163 / 340. Centring them lines the whole footer up on one axis.
 *
 * The `|` between the links were bare text nodes sitting directly in the flex container, so
 * each one became an anonymous flex item that CSS could neither style nor silence.
 * _FooterPartial.cshtml now wraps each in `<span class="footer-sep" aria-hidden="true">`.
 * `aria-hidden` because a lone "|" is punctuation, not content, and was being announced
 * between every link.
 *
 * The separators are deliberately KEPT at every width - they are what shows the links are
 * separate items. One consequence is accepted knowingly: because the row wraps on a phone,
 * a separator can finish a line. Measured with them visible:
 *
 *     320px   3 lines, 2 of them ending in a separator
 *     375px   3 lines, 2 of them ending in a separator
 *     425px   2 lines, 1 of them ending in a separator
 *     767px   1 line,  none
 *
 * There is no CSS that can hide only a separator that lands at a line end, because a line
 * end is not something a selector can see. The alternatives - dropping the separators on
 * phones, or moving them to a leading marker on each link so a line can only start with one
 * - both change the design, so neither is applied here without a decision.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .footer .footer-info,
    .footer .footer-links {
        justify-content: center;
    }

}

/* ------------------------------------------------------------------ *
 * 10g. The mobile menu was tall and stacked on the home page only
 *
 * The menu markup lives in one place, `_AccesibilityBarPartial.cshtml`, and every layout
 * renders the same thing - yet it looked different on the home page than on the district
 * pages. Measured at 320px with the menu open:
 *
 *                        home page          district page
 *     contact row     column, h 52        row, h 24
 *     language row    column, h 31        row, h 31
 *     controls row    column, h 138       row, h 34
 *     whole menu      h 313               h 179
 *
 * The cause is a page-level stylesheet: `home-index.css` carries
 *
 *     @media (max-width: 768px) { .d-flex { flex-direction: column !important } }
 *
 * which turns EVERY `.d-flex` on that page into a column on a phone. It is loaded only on
 * the home page, so the district pages never see it and render the menu as designed.
 *
 * This rule restores the row direction inside the menu only. `.flex-column` is excluded
 * because the menu's own wrapper legitimately uses it, and a bare `.mobile-menu .d-flex`
 * (0-2-0) would outrank Bootstrap's `.flex-column` (0-1-0) and flatten the whole menu into
 * one line. !important and the two-class selector are both needed to beat the blanket rule,
 * which carries !important of its own and is loaded after this file.
 *
 * NOT fixed here: the blanket rule itself. It affects every `.d-flex` on the home page and
 * unpicking it needs a sweep of that whole page, not a menu fix.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .mobile-menu .d-flex:not(.flex-column) {
        flex-direction: row !important;
    }
}

/* ------------------------------------------------------------------ *
 * 10h. A stray blue arrow sat in the page flow on the district site
 *
 * `_ScrollToTopButtonPartial.cshtml` emits a bare, unstyled link:
 *
 *     <a id="button" href="#top" class="scroll-to-top" aria-label="Scroll to top"> ↑ </a>
 *
 * There is no CSS for `.scroll-to-top` anywhere except print.css, so it renders as a raw
 * arrow in default link blue sitting in the content flow, measured 6x18px - well under any
 * usable tap target. `Views/DistrictSCLR/Index.cshtml` includes that partial, while
 * `_LayoutDistrictWebsite.cshtml` already provides the real control, the 54x54 fixed
 * `#scrollToTopBtn`. Both were on screen at once; the stray one is a duplicate.
 *
 * Hidden rather than deleted because the request was for the phone view. Nothing is lost to
 * a keyboard or screen-reader user: the surviving button carries the same
 * `aria-label="Scroll to top"` and is 54x54 instead of 6x18.
 *
 * NOT done here: the same stray link is on screen at desktop widths too, and the honest fix
 * is one line - drop the `<partial name="_ScrollToTopButtonPartial" />` from
 * Views/DistrictSCLR/Index.cshtml. That needs a decision, since it changes the desktop view.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    a.scroll-to-top {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * 10i. Two About cards were narrower than the five beneath them
 *
 * In the home page's "आमच्या विषयी" band, नेतृत्व and विभाग/जिल्हा/तालुका स्तरीय अधिकारी sat in a
 * `.row.g-4` while the other five (भूमापन, नगर भूमापन, एकत्रीकरण, आस्थापना ...) sit in
 * `.about-us-cards`. Both are direct children of the same section, but the row carried
 *
 *     style="margin-left: 5rem !important; margin-right: 5rem !important; ..."
 *
 * 5rem each side is 140px, and that is exactly the width the row was missing at every size:
 *
 *     viewport   .row.g-4   .about-us-cards
 *       320        140px        280px
 *       425        246px        386px
 *       767        587px        727px
 *
 * The two cards therefore rendered 246px wide against the others' 386px, and the second
 * one's title wrapped to a third line, so they were not even the same height as each other
 * (128px and 157px). With the row at its parent's width both become 128px and match.
 *
 * The margin could not be overridden from a stylesheet: a declaration in a `style`
 * attribute is author-origin with a specificity above any selector, so an inline
 * `!important` outranks an `!important` rule in CSS. `_OfficersPartial.cshtml` already
 * carries `.row.g-4[style*="margin-left: 5rem"] { margin-left: 1rem !important }` - an
 * attempt at exactly this, which cannot work for that reason. The inline style has been
 * replaced with this class in Views/Home/Index.cshtml, which is also what the CSP rule in
 * CLAUDE.md asks for.
 *
 * The 5rem indent is preserved from 768px up, so desktop is unchanged.
 * ------------------------------------------------------------------ */
/* `.row.about-cards-row` (0-2-0), not a bare `.about-cards-row` (0-1-0): Bootstrap's own
   `.row { margin-left: calc(-.5 * var(--bs-gutter-x)) }` is 0-1-0 and loads after this file,
   so a single-class rule loses on source order and the desktop indent silently became the
   -10.5px gutter margin instead of 5rem. The inline style it replaced never had that problem
   because it was inline. */
.row.about-cards-row {
    margin-bottom: 20px;
}

/* Above 992px the sibling `.about-us-cards` stops filling its container: its five cards are
   a fixed 250px each and it is `display: flex; justify-content: center`, so they settle into
   a 1330px band (5 x 250 + 4 x 20 gap) centred in whatever room there is. This row still
   spanned the full container, so the two cards stuck out past the five below - measured
   overhangs of 35px each side at 1440px and 595px each side at 2560px.
   Capping the row to that band lines them up. 1351px rather than 1330px because Bootstrap's
   row sits 10.5px outside its content box on each side, so the cards inside land on 1330.

   Bounded at 1391px, the narrowest viewport whose container (1391 - 2 x 20px section padding
   = 1351px) actually reaches the cap. The cap must not apply below that: `margin: auto`
   replaces Bootstrap's -10.5px row margins, so wherever the container is narrower than the
   cap the row loses those margins and gains nothing - at 768px that pulled the two cards to
   31..738 inside lower cards spanning 20..748, and at 1370px to 31..1340 inside 20..1350,
   the opposite error in both cases.

   Between 992 and 1369px the lower cards wrap, so the band steps down with how many fit on
   the first row. Measured across that range:

       viewport      container   cards/row   band
       992 - 1099    952 - 1059      3        790px
      1100 - 1369   1060 - 1330      4       1060px
      1370 +        1330 +           5       1330px

   so each step gets its own cap of band + 21px. Each media query starts where the container
   is actually wider than its cap, never at the width where the band first changes: from 1100
   to 1120, and again from 1370 to 1390, the cards already fill the container exactly and a
   cap would only strip the row's negative margins and pull it 10px inside.

   These three constants are arithmetic on the lower cards - 250px each, 20px gap, five of
   them (`.about { width: 250px }` in styles.css). If a card is added or that width changes,
   all three have to be re-measured. Making the lower cards stretch instead of sitting at a
   fixed 250px would remove the need for any of this, but that is a redesign of that block. */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .row.about-cards-row {
        max-width: 811px;      /* 3 x 250 + 2 x 20 gap, + 21 */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1121px) and (max-width: 1369.98px) {
    .row.about-cards-row {
        max-width: 1081px;     /* 4 x 250 + 3 x 20 gap, + 21 */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1391px) {
    .row.about-cards-row {
        max-width: 1351px;     /* 5 x 250 + 4 x 20 gap, + 21 */
        margin-left: auto;
        margin-right: auto;
    }
}

/* The 5rem indent the inline style applied is NOT reinstated at any width. It made this row
   140px narrower than its sibling `.about-us-cards`, so the two cards started and ended
   inside the भूमापन card instead of lining up with it. Bootstrap's own `.row` negative
   gutter margins are left to do their job: the row sits 10.5px outside the container on each
   side, the columns pad back by the same 10.5px, and the card edges land exactly on the
   container edges - which is where `.about-us-cards` puts the भूमापन card too. */

/* Side by side from 576px up, the two cards were different heights - 128px for नेतृत्व and
   157px for विभाग,जिल्हा आणि तालुका स्तरीय अधिकारी, whose longer title wraps to two lines.
   The COLUMNS were already equal (Bootstrap stretches them, both measured 157px); it was the
   card inside that stopped at its own content height and left a gap under the shorter one.
   Letting the card fill its column squares them off.

   No media query: measured at 1024 and 1280px, where both titles fit on one line, the cards
   are 128px with or without this rule, and below 576px each card is alone on its row line,
   so the column height is the card height. It only does anything where they actually sit
   side by side with unequal text. */
.row.about-cards-row .about-card {
    height: 100%;
}

/* ------------------------------------------------------------------ *
 * 10j. The four "संपर्क करा" cards were not the same height
 *
 * `दूरध्वनी क्रमांक` carries a phone number under its title while the other three are title
 * only, so it stood 99px against their 77px - a 22px step measured at 768, 1024, 1440 and
 * 1920px. Two things had to be undone together, and neither works alone:
 *
 *   `.help-support-cards` is `align-items: center`, which centres the shorter cards in the
 *   line instead of stretching them, and `styles.css` gives `.help-card { height: 100% }`,
 *   which is a definite height as far as `stretch` is concerned - so stretch is ignored.
 *   That 100% also does not do what it looks like: the flex container's own height is
 *   content-based, so the percentage resolves against an indefinite parent and each card
 *   just takes its own content height.
 *
 * Verified: container stretch alone leaves 99/77/77/77, card `height: auto` alone leaves it
 * too, and only the pair gives 99/99/99/99.
 *
 * Not bounded by a media query, and that was checked rather than assumed: at 375 and 768px
 * each card is alone on its own flex line, so its line height is its own height and the rule
 * changes nothing (measured 95/73/73/73 and 99/77/77/77 before and after). It only acts
 * where the cards actually share a line.
 * ------------------------------------------------------------------ */
.help-support-cards .help-card {
    align-self: stretch;
    height: auto;
}

/* Stretch only equalises cards that SHARE a flex line. Below 991px each card is alone on its
   own line, so its line height is its own height and the rule above can do nothing - the
   phone card stayed 95px against the others' 73px at 320/375/425 and 99 against 77 at 768.
   A single-column grid with `grid-auto-rows: 1fr` sizes every row to the tallest, which is
   what equalises them when stacked, and unlike a `min-height` it stays content-driven: no
   pixel value to go stale if the text or the zoom level changes (trap 5.23).
   Bounded at 990.98px because the cards stop being one-per-line at 991 - measured 1+1+1+1 up
   to 990, 3+1 at 991, and all four on one line from 992, where the stretch rule already
   handles it. Forcing a single column above that would stack cards that currently sit in a
   row. */
@media (max-width: 990.98px) {
    /* The element also carries Bootstrap's `d-flex`, so `display: flex !important` is already
       on it. A plain `.help-support-cards { display: grid !important }` is the same 0-1-0 and
       bootstrap.min.css loads after this file, so it still lost on source order - the cards
       stayed flex and the heights unchanged. `.col-md-12 > .help-support-cards` is 0-2-0 and
       wins outright. */
    .col-md-12 > .help-support-cards {
        display: grid !important;
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
    }
}

/* ------------------------------------------------------------------ *
 * 10k. The hero's logo panel was half-width on tablets with nothing beside it
 *
 * The hero row's first column is `col-lg-3 col-md-6 col-12`. On a phone `col-12` gives it
 * the full width and the panels stack cleanly; from 992px `col-lg-3` puts it in the intended
 * three-column desktop layout. In between, `col-md-6` halves it - and nothing sits in the
 * other half, because the two panels that follow are full width until `lg`. Measured:
 *
 *     viewport   column    empty space to its right
 *       768       384px            384px
 *       820       410px            410px
 *       900       450px            450px
 *       991       496px            496px
 *
 * Restoring the full width there makes the tablet read like the phone - logo, quote, service
 * circle one under another - with no dead half-screen. Bounded at 991.98px: from 992px the
 * column is 248px because of `col-lg-3`, which is the desktop design and not a defect.
 *
 * `.hero-section .col-lg-3.col-md-6.col-12` is 0-4-0, so it outranks Bootstrap's `.col-md-6`
 * on specificity and does not depend on which file loads last.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section .col-lg-3.col-md-6.col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------ *
 * 11. Inner pages whose Bootstrap rows bled past the screen
 *
 * A `.row` carries `margin-left/right: -12px` so its columns' own 12px padding lines the
 * content up with the surrounding `.container`. Drop that row into a full-width block with
 * no container and the 12px on each side has nothing to cancel it: the page becomes 24px
 * wider than the screen and scrolls sideways.
 *
 * Found by hiding elements one at a time and watching document.scrollWidth, on:
 *     /RTI                 #accordion-style-1 measured -12..402 (414 wide on a 390 screen)
 *     /Home/Tenders        div.col-12         measured -12..402
 *     /DiscussionAndTalks  div.col-sm-12.grid-margin measured -12..402
 *     /Pages/GetByFooterPageName  a .row inside the CMS card, margin: 0 -12px
 *
 * The last one is CMS-authored HTML, so it cannot be fixed in a view - which is why this is
 * a stylesheet rule rather than markup edits. Scoped to each page's own wrapper so rows that
 * are correctly inside a container keep their normal gutters, and bounded to mobile so no
 * desktop layout shifts.
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    #accordion-style-11 > .row,
    #accordion-style-1 > .row,
    .row.screen-reader,
    #actsRulesSection .row,
    .card-body .container-fluid > .row,
    main#main-content > .row,
    .main-panel > .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* The footer/CMS pages centre their content in a .col-10. On a 390px screen that leaves
       only 305px for the text and still overflowed; full width is both wider and correct. */
    .page-body-wrapper .col-10.mx-auto {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* CMS-authored HTML carries its own fixed widths and tables - measured 414px inside a
       249px box on Web Policy. Let that block scroll inside itself rather than drag the page
       sideways; a horizontal scrollbar on one panel is far better than on the whole page. */
    .page-body-wrapper .card > [id^="collapse-"],
    .page-body-wrapper .card > [id^="collapse-"] > .card-body {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------ *
 * 12. Grievance form: file input and form padding at the narrowest screens
 *
 * A file input sizes itself from its "Choose file" button plus the filename text and will
 * not shrink to its container: measured 303px wide inside a 216px column at 320px, pushing
 * the page 47px sideways. Constraining it is the fix; the control stays fully usable.
 *
 * The form wrapper also carries 40px of padding on each side, which is a quarter of a 320px
 * screen spent on empty margin. Trimmed to 16px below the sm breakpoint only.
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* The file input is position:absolute and no ancestor is positioned, so its percentage
       width resolves against the viewport rather than its 216px column - which is why simply
       setting width:100% made it wider, not narrower. Giving the column a positioning context
       lets max-width finally mean "the column". */
    .grievance-form-container .row > [class*="col-"] {
        position: relative;
    }

    input[type="file"] {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* A long unbreakable string cannot wrap and simply runs out of its box: measured on
       Mahsul Mahiti Tantradnyan, where the URL https://mahabhumi.gov.in/mahabhumilink needs
       290px inside a 248px paragraph. `anywhere` only breaks words that do not otherwise
       fit, so ordinary Marathi and English text is unaffected. */
    main#main-content p,
    main#main-content li,
    main#main-content td,
    main#main-content dd {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 575.98px) {
    .grievance-form-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ------------------------------------------------------------------ *
 * 13. PDF download labels printed across their neighbours
 *
 * These labels carry `white-space: nowrap` so the size and the file name stay on one line
 * (RTI/Index.cshtml line 62, and the same in EODB and _TrainingAcademyPartial). That holds
 * only while the label is just a size. Give a document a title and the line cannot break:
 * measured on /RTI at 375px, "(3.16 MB) माहिती अधिकार अधिनियत कलम 4 पुणे विभाग" rendered
 * 335px wide inside a 120px column - 215px of it drawn straight over the next PDF's name.
 *
 * RTS/Index.cshtml already solves this locally with exactly the rules below; this simply
 * extends the same treatment to the pages that were left behind. Not bounded to mobile,
 * because a long enough title overruns a narrow column at any width - which is why RTS's
 * own fix is not bounded either.
 *
 * `span.custom-pdf-text` (0,1,1) is needed to outrank the page's own `.custom-pdf-text`
 * (0,1,0), which is rendered after this file - see trap 5.22.
 * ------------------------------------------------------------------ */
span.custom-pdf-text {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * 14. Safety net for the accessibility widget and toast container
 *
 * Notyf renders a full-width container; when something else has already made the
 * document wider it stretches to match and keeps it there on the next paint.
 * Pinning it to the viewport stops that feedback loop.
 * ------------------------------------------------------------------ */
.notyf {
    max-width: 100vw;
}

/* ------------------------------------------------------------------ *
 * 15. Paid-service form pages were unusable on a phone
 *
 * Every paid-service page - the 7/12 / 8A / Ferfar search forms (_View712,
 * _View8AExtract, _ViewFerfarCopy), the digitally-signed download pages
 * (Property Card, 8A, 7/12 via _PropertyCardPartial / _8APartial / _712Partial)
 * and the view-only pages - renders through _ServicesLayout, so they all share
 * one `#body` wrapper and build their fields with the same Bootstrap grid:
 * `.form-group.row` holding `col-6` / `col-4` / bare `col` columns.
 *
 * Those column classes carry NO responsive prefix (`col-6` is 50% at every
 * width, `col` is an equal share of the row), so on a phone the Division /
 * District / Taluka / Village selects stayed two-across and the five search-type
 * radios stayed five-across. At ~200px per column the long Marathi/English
 * labels had nowhere to go and wrapped one character per line ("Do you have
 * ULPIN" printed vertically). On top of that the content sits inside TWO nested
 * `col-11 mx-auto` wrappers (_ServicesLayout row + each view's inner wrapper)
 * plus a `col-sm-9` body, so a large band of the narrow screen was spent on
 * empty left/right margin instead of the form.
 *
 * Because the whole family shares `#body` and the same grid, one scoped block
 * fixes them all at once (and any future service page on this layout). Bounded
 * to the phone breakpoint, so the tuned two-column desktop layout is untouched
 * at >=768px. `#body ...` (id, 1,x,x) outranks Bootstrap's `.col-*` (0,1,0), and
 * this file loads last, so equal-specificity control rules win on source order.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Reclaim the empty side band: collapse the two nested `col-11 mx-auto`
       wrappers and the `col-sm-9` services body to the full screen width, and
       drop the auto-centring / row gutter margins that only make sense while
       the column is narrower than its parent. */
    #body,
    #body.col-md-9,
    .card-body > .row.col-11.mx-auto,
    #body .row > .col-11.mx-auto,
    #body .col-11.mx-auto {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Stack every field one below the other: each column in a form row takes the
       full width. Covers col-6 (dropdowns / mobile / survey no), col-4 & col-sm-6
       (the ULPIN toggle) and the bare `col` search-type radios. */
    #body .form-group.row > [class*="col-"],
    #body .form-group.row > .col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Let the labels wrap as whole words instead of one letter per line. */
    #body .form-group label {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* The layout shrinks these controls to .85rem / 34px for a dense desktop
       grid; full width on a phone gives room to make them legible and tappable
       (>=40px is a comfortable touch target). */
    #body select.form-control,
    #body input.form-control,
    #body .form-control {
        font-size: 1rem !important;
        height: auto !important;
        min-height: 40px;
    }

    /* Trim the form card's side padding so the now-full-width fields keep as much
       usable width as possible. */
    #body .form-card {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Step-2 review card uses a fixed-width colgroup table (55%/45%). Let it
       scroll inside its own panel rather than drag the whole page sideways. */
    #body table {
        max-width: 100%;
    }

    #body .step-tab-panel[data-step="step2"] .col-lg-8,
    #body .step-tab-panel[data-step="step2"] .col-lg-4 {
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------ *
 * 15b. Paid-service flow — flatten the nested cards to ONE card on mobile
 *
 * After testing the full 7/12 flow (steps 1-3) on a phone, step 1 was still
 * narrow. The real cause is nesting: the fields sit inside THREE stacked frames
 * (outer `.card.theme-bg-light` -> inner `.card.card-white` -> `.form-card`) AND
 * several nested Bootstrap columns (`.row.col-11`, `#body.col-md-9`, the inner
 * `.col-11`, and each field's own column) that EACH add ~12px of gutter padding
 * on both sides. Stacked, that is ~50-70px of dead space PER SIDE on a 375px
 * screen. §15 trimmed the card paddings but not the column gutters, so the
 * fields stayed narrow.
 *
 * On mobile we collapse it to effectively ONE card: zero the column gutters and
 * row negative-margins, drop the outer card's frame/backdrop and the redundant
 * form-card border, and keep the inner white card as the single visible frame
 * with minimal padding. Also give the 7-column step-3 cart a readable min-width
 * so it scrolls sideways instead of crushing every column. Desktop keeps every
 * frame, gutter and table exactly as designed (all bounded to the phone width).
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Page wrapper: trim its side padding too. */
    .page-body-wrapper.container-fluid {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Kill the empty band below a short form: `.main-panel { min-height: 100vh }`
       forces the panel to a full viewport height, so on a short step (e.g. step 1)
       a large empty box sits between the card and the footer. Let the panel shrink
       to its content on mobile; the footer then follows the card directly.
       Desktop keeps the 100vh (this rule only exists below 768px). */
    .main-panel {
        min-height: 0 !important;
    }

    /* On mobile the sidebar (services list) stacks ABOVE the form card; the zeroed
       column gutters left them touching. Add a gap between the two stacked cards.
       Desktop has them side-by-side, so no vertical gap is wanted there. */
    #body {
        margin-top: 16px !important;
    }

    /* 1. Kill the stacked Bootstrap column gutters (12px each, several levels
          deep) and the row negative-margins they cancel — the real cause of the
          narrow fields. Everything is stacked full-width on mobile, so no
          horizontal gutter is needed. */
    .card.theme-bg-light > .card-body > .row.col-11.mx-auto,
    #body,
    #body [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Outer services card -> no frame/backdrop on mobile, and pulled out to the
          screen edge so the cream `--bg-color` band beside it disappears. The
          negative margins cancel the page wrapper's 6px padding (services card
          only — other pages keep their wrapper padding); its card-body loses its
          side padding so the inner white card runs full-bleed. */
    .card.theme-bg-light {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
    .card.theme-bg-light > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* 3. The inner white card is now the single visible card — minimal padding. */
    #body .card.card-white > .card-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 4. `.form-card` is a redundant inner frame on mobile — drop its border and
          most of its padding so the fields reach the card edge. */
    #body .form-card {
        border: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 5. Cart (step 3) is a 7-column table; crushing all 7 into ~355px makes each
          column unreadable and breaks service names mid-word. A readable min-width
          lets its .table-responsive wrapper scroll sideways instead, and text
          wraps on whole words. (The step-2 review table is NOT in a
          .table-responsive, so it still fits full-width per §15.) */
    #body .table-responsive > table {
        min-width: 620px;
    }
    #body .table-responsive > table th,
    #body .table-responsive > table td {
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }
}

/* ------------------------------------------------------------------ *
 * 15c. CcAvenue payment page (/CcAvenue/Payment) — mobile
 *
 * This page has its OWN layout (`.container-fluid > .content-wrapper > .card-white`),
 * NOT the services `#body` wrapper, so §15/§15b never reach it. Its cart column and
 * total/payment column are hard-coded `col-9` / `col-3` (now `col-12 col-md-9` /
 * `col-12 col-md-3` in the markup) so they stack on a phone; the rules below flatten
 * the nested `card-inverse-light` cards, gap the two stacked cards, and give the
 * 7-column cart a readable min-width so it scrolls instead of crushing. All scoped to
 * the `.ccavenue-payment` hook and the phone breakpoint, so desktop is untouched. */
@media (max-width: 767.98px) {
    /* Kill nested column gutters so the inner cards use the full width. */
    .ccavenue-payment .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .ccavenue-payment [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Outer white card: minimal side padding. */
    .ccavenue-payment .card.card-white > .card-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Flatten the inner card-in-card, and gap the two now-stacked cards. */
    .ccavenue-payment .card.card-inverse-light {
        border: 0 !important;
        box-shadow: none !important;
        margin-bottom: 14px !important;
    }
    .ccavenue-payment .card.card-inverse-light > .card-body {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 7-column cart: readable min-width -> horizontal scroll, wrap names on words. */
    .ccavenue-payment .table-responsive > table {
        min-width: 620px;
    }
    .ccavenue-payment .table-responsive > table th,
    .ccavenue-payment .table-responsive > table td {
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }
}

/* ------------------------------------------------------------------ *
 * GIGW 5.2.7 / 5.2.45 — form hints and the required-fields legend
 *
 * 5.2.45 asked for the expected format of each field. The example is carried in the field's
 * own `placeholder`, which is what the design calls for.
 *
 * A placeholder's default grey is typically around 2.8:1, under the 4.5:1 that 1.4.3 asks
 * of text this size, and here it is the only place the required format appears - so it is
 * pinned to #495057, measured at 8.18:1 on the white field. The footer partial already uses
 * that value elsewhere for the same reason.
 *
 * Worth recording for whoever reads the audit response: a placeholder disappears as soon as
 * someone types, so the format is not on screen while the field is being filled. The
 * validation messages carry it too (5.2.46), which is what covers that gap.
 * ------------------------------------------------------------------ */
#feedbackForm .form-control::placeholder {
    color: #495057;
    opacity: 1; /* Firefox dims placeholders by default; that would undo the contrast above */
}

.form-required-legend {
    color: #495057;
    margin-bottom: 1rem;
}

    .form-required-legend .required-mark {
        /* The asterisk keeps the same red the field markers use, so the legend and the
           markers it explains are recognisably the same symbol. */
        color: #c62828;
        font-weight: 700;
    }

/* ------------------------------------------------------------------ *
 * GIGW 5.2.17 / WCAG 1.4.10 — floating buttons must not cover the hero's service links
 *
 * Measured on the home page: at 320px the "८ अ" pill sits under the scroll-to-top button, and
 * at 375px "८ अ" and "आपली चावडी" sit under the chat bubble and scroll-to-top. Those are
 * links to services — tapping there hits the floating button instead, which is the "loss of
 * functionality" 1.4.10 forbids. At 576px and wider nothing is covered, so the rule stops
 * there; the same measurement at 576, 768, 992 and 1280 found zero overlaps.
 *
 * `.hero-in-view` is put on <html> by floating-controls.js while the ring is on screen. The
 * buttons are only out of the way for that stretch of the page — scroll past the ring and
 * both return.
 *
 * visibility rather than display: the elements keep their place in the layout, so nothing
 * below them shifts as they come and go, and the transition has something to animate.
 *
 * The accessibility widget is not included on purpose. Hiding an accessibility control to
 * solve an accessibility finding would be a worse defect than the one being fixed.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {

    html.hero-in-view .chat-bubble-container,
    html.hero-in-view #scrollToTopBtn {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    .chat-bubble-container,
    #scrollToTopBtn {
        transition: opacity 0.2s ease;
    }
}