/**
 * D7 -> D11 CSS / layout parity fixes.
 * -------------------------------------------------------------------------
 * Loaded LAST in the `global-styling` library (after bootstrap.css + style.css)
 * so these rules win the cascade. Kept in a separate file (not style.css) on
 * purpose: this is the authoritative, self-contained parity layer and must
 * survive re-migration and any independent rewrite of style.css.
 *
 * CLASS OF BUG addressed here: a D7 *custom* component whose markup was hand
 * written in the D7 theme is produced in D11 by a contrib module with DIFFERENT
 * default class names, so the ported CSS (which targets the old classes) misses
 * it and the component renders unstyled.
 */

/* =========================================================================
 * QUICKTABS  (/about-us, /nri-banking, /accounts)
 * -------------------------------------------------------------------------
 * D7 rendered a custom JS tab widget as  <ul class="tabs"> + .tab_container +
 * .tab_content  and styled it in bootstrap.css:
 *
 *   ul.tabs            { width:100%; text-align:center; }
 *   ul.tabs li         { display:inline-block; margin:0 20px 0 20px;
 *                        padding:0 0 10px 0; line-height:34px !important;
 *                        cursor:pointer; font-family:'DINPro-Regular';
 *                        font-size:18px; text-transform:uppercase;
 *                        color:#444444; }
 *   ul.tabs li.active  { background:url('../images/tab-highlight.png')
 *                        no-repeat bottom center; color:#ff6600; }
 *   .tab_container     { clear:both; width:100%; padding-bottom:0; }
 *   .tab_content       { clear:both; padding-top:25px; padding-bottom:25px; }
 *
 * D11 uses the Quicktabs module:  <ul class="quicktabs-tabs"> (container
 * .quicktabs-main, panels .quicktabs-tabpage, active = <li class="active">).
 * The tab label lives inside an <a>, so the D7 typography that sat on the <li>
 * is re-applied to the <a> here, and the active-underline image to li.active.
 *
 * Centered via text-align:center on the <ul>; the tabs are inline-block units
 * that WRAP to a second row (D7 behaviour) — white-space:normal on the <ul>
 * lets the row break, white-space:nowrap on each <li> keeps a label intact.
 * ========================================================================= */

ul.quicktabs-tabs {
  width: 100%;
  max-width: 996px;          /* D7 ul.tabs rendered ~996px wide (narrower than
                                the full 1231 container), which is what makes the
                                5 tabs wrap 4+1 instead of all on one row. */
  text-align: center;        /* horizontal centering, as D7 ul.tabs */
  list-style: none;
  margin: 0 auto;            /* centre the 996px row in the container */
  padding: 0;
  border: 0;                 /* D7 ul.tabs had no border/underline on the row */
  white-space: normal;       /* allow the tab row to wrap to a 2nd row (D7) */
}

ul.quicktabs-tabs li {
  display: inline-block;     /* D7 ul.tabs li */
  margin: 0 20px;            /* D7: margin:0 20px 0 20px */
  padding: 0 0 10px 0;       /* D7: padding:0 0 10px 0 (room for underline) */
  line-height: 34px;         /* D7: line-height:34px */
  list-style: none;
  cursor: pointer;
  font-family: 'DINPro-Regular', Arial, sans-serif;
  font-size: 18px;           /* D7 */
  text-transform: uppercase; /* D7 */
  color: #444444;            /* D7 inactive colour */
  background: none;
  white-space: nowrap;       /* keep each label (e.g. SENIOR MANAGEMENT TEAM) intact */
  vertical-align: bottom;
  width: auto;               /* a framework rule inflates the ACTIVE li to ~50%
                                of the row (601px), spreading the tabs and making
                                the 455px underline image span across the text.
                                Force content width so every tab is label-sized. */
}

/* Label is an <a> in Quicktabs: carry the D7 typography and strip link styling */
ul.quicktabs-tabs li a {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: #444444;
  font-family: 'DINPro-Regular', Arial, sans-serif;
  font-size: 18px;
  line-height: 34px;
  text-transform: uppercase;
  text-decoration: none;
}

/* Active tab underline. D7 put the tab-highlight.png (a 455px line, clipped to
   the tab's width) on the li. In D11 the active li is inflated (see width:auto
   above) so the line would span far past the label and cut through the text.
   Put the underline on the <a> instead — it is exactly the label's width — so
   the orange line + caret sits neatly under the word, matching D7. */
ul.quicktabs-tabs li.active,
ul.quicktabs-tabs li.active a {
  color: #ff6600;
}
ul.quicktabs-tabs li.active {
  background: none;
}
ul.quicktabs-tabs li.active a {
  display: inline-block;     /* give the inline <a> a box for the bg + padding */
  padding-bottom: 10px;      /* D7 li padding-bottom:10px (room for underline) */
  background: url('../images/tab-highlight.png') no-repeat bottom center;
}
ul.quicktabs-tabs li a:hover {
  color: #ff6600;            /* harmless affordance; D7 orange on interaction */
}

/* .tab_container  ->  .quicktabs-main / .quicktabs-container */
.quicktabs-main,
.quicktabs-container {
  clear: both;
  width: 100%;
  padding-bottom: 0;
}

/* .tab_content  ->  .quicktabs-tabpage */
.quicktabs-tabpage {
  clear: both;
  padding-top: 25px;
  padding-bottom: 25px;
}

/* Inactive panels stay hidden; Quicktabs toggles .quicktabs-hide via JS */
.quicktabs-hide,
.quicktabs-tabpage.quicktabs-hide {
  display: none !important;
}

/* Quicktabs tab heading (DefectID_011): D7 printed an <h2> above each About Us
 * tab's content (block title / view header). The theme's quicktabs template
 * now only emits it when a heading is set, so show it — overriding the
 * style.css ~4233 display:none — and leave sizing to the bootstrap.css h2
 * rule, exactly as D7 did. */
.quicktabs-tabpage h2.quicktabs-block-title {
  display: block;
}

/* =========================================================================
 * INNER-PAGE BANNER TITLE  (inner_banner region, every inner page,
 * e.g. /personal-loan, /gold-loan, /housing-loan)
 * -------------------------------------------------------------------------
 * D7 floated the orange title tab to the RIGHT of the banner strip; the D11
 * rebuild (style.css ~4135-4144) re-created it pinned to the LEFT. This layer
 * flips it back to the D7 geometry.
 *
 * D7 markup / CSS (bootstrap.css ~2716-2720):
 *   .banner-inner        { height:295px; overflow:hidden;
 *                          background-position:right top; }   <- cropped strip
 *   .banner-inner .inner-header2      { text-align:right; width:32%;
 *                          border-bottom:1px solid #FF6600; box-sizing:border-box; }
 *   .banner-inner .inner-header2 span { background:#FF6600; float:right;
 *                          width:72%; }
 *
 * D11 markup (confirmed on http://csb-d11.ddev.site/personal-loan):
 *   .inner-banner-wrap (position:relative) >
 *     <img width="1583" height="295">   (real <img>, NOT a CSS background)
 *     .inner-banner-title (position:absolute; top:50%; left:0) > span (orange)
 *
 * So the D7 `.inner-header2` box maps to D11 `.inner-banner-title`, and the D7
 * `.inner-header2 span` maps to D11 `.inner-banner-title span` (already orange
 * with white uppercase text from style.css — we keep that look and only move /
 * shape it). These rules load last, so they win the left:0 in style.css.
 * ========================================================================= */

/* CORRECTION (was a wrong-direction flip): D7's `.inner-header2` is a
   width:32% block with NO float on the box itself, so it sits on the LEFT;
   its `text-align:right` + `span{float:right;width:72%}` only position the
   orange block to the RIGHT EDGE OF THAT LEFT BOX. The box is LEFT, not right.
   D11's style.css already had it at left:0 — keep that, and add the D7 32% /
   float-right geometry so the orange tab lands in the same place as D7. */
.inner-banner-title {
  left: 0;
  right: auto;
}

@media (min-width: 1024px) {   /* D7 bootstrap.css: tab layout only above 1023px */
  .inner-banner-title {
    width: 32%;                        /* D7 .inner-header2 width:32% */
    text-align: right;                 /* D7 .inner-header2 text-align:right */
    box-sizing: border-box;
    border-bottom: 1px solid #ff6600;  /* D7 orange underline strip */
  }
  /* D7 .inner-header2 span { float:right; width:72% } — orange block at the
     right end of the left 32% box, leaving the orange underline to its left. */
  .inner-banner-title span {
    float: right;
    width: 72%;
    box-sizing: border-box;
    /* D7 .inner-header2 span: compact orange box. D11's own rule bloats the
       padding to 16/55/16/60 making the box much taller than D7 — restore D7. */
    padding: 5px 15px 7px 15px;
    line-height: 42.8571px;   /* D7 font-size:30px * 1.4286 */
  }
}

/* <=1023px D7 (bootstrap.css @media max-width:1023px) turns the title into a
   full-width centred 24px orange bar sitting 13px above the banner's bottom
   edge (measured: box 0,+236 Wx46 inside the 295px banner). */
@media (max-width: 1023px) {
  .inner-banner-title {
    top: auto;
    bottom: 13px;
    transform: none;
    width: 100%;
    text-align: center;
    border-bottom: 0;
  }
  .inner-banner-title span {
    display: block;
    float: none;
    width: 100%;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 34.2857px;   /* 24px * 1.4286 -> 46px bar like D7 */
    padding: 5px 15px 7px 15px;
    word-wrap: break-word;
  }
}

/* D7 cropped the banner to a fixed 295px strip (banner-inner height:295px;
   overflow:hidden; background-position:right top). D11 uses a real <img>
   (1583x295) at width:100%/height:auto, so cap the wrapper and cover-crop the
   image to the same 295px strip, keeping D7's right/top crop anchor. */
.inner-banner-wrap {
  max-height: 295px;
  overflow: hidden;
}
.inner-banner-wrap img {
  width: 100%;
  /* !important: a more specific D11 rule (.field-content img / views img) keeps
     height:auto, letting the 1583x295 image scale down to ~268px at 1440px wide.
     D7's banner is a fixed 295px strip, so force 295 + cover-crop (right top). */
  height: 295px !important;
  object-fit: cover;
  object-position: right top;  /* D7 background-position:right top */
}

/* =========================================================================
 * MOBILE TABS -> ACCORDION  (quicktabs pages: /accounts, /nri-banking)
 * -------------------------------------------------------------------------
 * D7 rendered dual markup: horizontal <ul class="tabs"> on desktop AND
 * per-panel <h*> drawer headings (.tab_drawer_heading) that became an
 * accordion at <=767px (bootstrap.css ~3183-3185). D11 Quicktabs emits NO
 * drawer headings, so the JS behaviour `csbMobileAccordion`
 * (js/parity-interactions.js) SYNTHESISES one heading per panel as
 * `.csb-qt-drawer` and marks the open one `.d_active` (D7's class), wrapping
 * the widget in `.csb-accordion-active`. This styles those synthesised
 * elements to match the D7 accordion exactly.
 *
 * Desktop: headings hidden (D7 `.tab_drawer_heading{display:none}`); the
 * normal horizontal quicktabs row shows. Mobile: JS hides the row, these
 * rules reveal the drawer headings. acc-down.png / acc-up.png are present in
 * the theme images/ dir (../images/ resolves from this file's css/ dir).
 * ========================================================================= */
.csb-qt-drawer {
  display: none;  /* desktop: hidden, like D7 .tab_drawer_heading */
}

@media (max-width: 767px) {
  /* JS adds .csb-accordion-active to the quicktabs wrapper on mobile */
  .csb-accordion-active ul.quicktabs-tabs {
    display: none;  /* hide the horizontal tab row; drawers drive nav */
  }

  /* D7 .tab_drawer_heading -> synthesised .csb-qt-drawer */
  .csb-accordion-active .csb-qt-drawer {
    display: block;
    cursor: pointer;
    margin: 7px 0 0 0;          /* D7 margin-top:7px (first drawer) */
    padding: 15px 12px 14px 12px;
    background: url('../images/acc-down.png') no-repeat right center #fff;
    border-top: 2px solid #d8d9d3;
    font-family: 'DINPro-Regular', Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    color: #666;
  }

  /* D7 .d_active (open drawer): orange + up-arrow */
  .csb-accordion-active .csb-qt-drawer.d_active {
    background: url('../images/acc-up.png') no-repeat right center #fff;
    color: #ff5d00;
    border-top: 1px solid #ff6600 !important;
  }
}

/* =========================================================================
 * FOCUS OUTLINE  (every clickable element, site-wide)
 * -------------------------------------------------------------------------
 * D7 suppressed the browser focus outline (its CSS used `outline:none`
 * globally). D11 shows the browser default 5px blue focus ring on a clicked
 * tab / link / accordion heading (e.g. the quicktabs tab you select), which
 * D7 never displayed — so it reads as a stray blue box on many pages. Match
 * D7 by removing it on interactive elements.
 * ========================================================================= */
a:focus,
a:active,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
ul.quicktabs-tabs a:focus,
ul.quicktabs-tabs a:focus-visible,
.BM-holder:focus,
.tab_drawer_heading:focus,
.csb-qt-drawer:focus {
  outline: none;
}

/* =========================================================================
 * S5 — CONTENT CLIPPED UNDER THE FIXED HEADER (inner-banner top offset)
 * -------------------------------------------------------------------------
 * The site header is `#header { position:fixed; height:158px; z-index:9999 }`
 * on BOTH D7 and D11, but `body { padding-top:84px }` — i.e. the body reserves
 * only 84px while the header paints 0–158px. D7 absorbed the 74px shortfall
 * with a 25px top margin on its banner strip (`.banner-inner { margin-top:25px }`,
 * measured at top:109 on D7 vs top:84 on D11) PLUS the breadcrumb/body spacing
 * that follows it, so on D7 the banner — and, on pages whose banner view is
 * empty, the content that follows it — starts clear of the fixed header.
 *
 * In D11 the banner is `.inner-banner-wrap` with NO top margin, so it sits at
 * top:84 (25px higher than D7). On pages with a real banner image (295px tall)
 * the overlap is cosmetic, but on pages whose banner view returns NOTHING the
 * wrap collapses to height:0 and the breadcrumb/first line/quicktabs row render
 * at ~144px — tucked ~14px under the 158px header and clipped. Verified clipped:
 * /general-savings-ac, /financial-results, the 404 page, and the quicktabs row
 * on /nri-banking (D11 tabs @144 vs D7 @160).
 *
 * Restoring D7's 25px banner margin fixes BOTH symptoms with one rule:
 *   - banner pages        : banner 84 -> 109  (matches D7's top:109 exactly;
 *                           verified /accounts /personal-loan /forex align to D7)
 *   - empty-banner pages  : body-section 84 -> 109, so breadcrumb/content/tabs
 *                           144 -> 169 (clears the 158px header; D7 /nri @160).
 * The home page has no `.inner-banner-wrap` and is untouched; pages with a real
 * banner only shift 25px to match D7 (not over-padded).
 * ========================================================================= */
.inner-banner-wrap {
  margin-top: 25px;          /* D7 .banner-inner margin-top:25px (banner top 109) */
}

/* (S7 "ticker label faded" was a false positive: D7's .flash label blinks
 * identically — byte-identical @keyframes on both sites — so the audit caught it
 * mid-blink. Left unchanged for exact D7 parity; no override here.) */

/* =========================================================================
 * S8 — Footer address column wraps too narrow
 * -------------------------------------------------------------------------
 * D7's footer "second column" (`.region-footer-secondcolumn`) is 201px wide
 * with NO inner padding, so the address fits like D7: "Head Office, CSB Bhavan,"
 * and "St.Mary's College Road," each stay on ONE line, email icon inline.
 *
 * D11 nests the address/email rows one level deeper in `.col-md-12` cells that
 * add Bootstrap's 15px left+right gutter INSIDE the already-201px column, so the
 * usable text width drops to 171px and lines wrap early ("Head Office, CSB" /
 * "Bhavan,"). Dropping that inner 15/15 gutter restores the full 201px usable
 * width (measured .db 171px -> 201px; the Head Office line 2 lines -> 1 line),
 * matching D7. Scoped to the second footer block so other footer columns are
 * untouched. (The separate SARFAESI link is a content question, left alone.)
 * ========================================================================= */
#block-csb-footer-second .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================================
 * ABOUT-US (and sibling quicktabs pages) — body text column inset
 * -------------------------------------------------------------------------
 * D7 insets page body content to a 10/12 column offset by 1 (`.col-sm-10
 * .col-sm-offset-1`): content left 222, width ~996 at 1440px. Standard D11
 * content pages (e.g. /general-savings-ac, /financial-results) already carry
 * `.col-sm-10 .col-sm-offset-1` and match. But the quicktabs pages (/about-us,
 * /nri-banking, /accounts) render their body in a FULL-WIDTH `.col-sm-12`
 * (content left 120, width ~1201) — ~200px too wide vs D7.
 *
 * Give that `.col-sm-12` body column the same 10/12 + offset-1 geometry so the
 * body text (and the quicktabs panels) inset to D7's 996px at left 222.
 * Verified against D7: /about-us para 120/1201 -> 222/996 (D7 222/996); /nri &
 * /accounts content -> 207/1026 col = 996 content (D7 region 222/996). Scoped to
 * `.body-section .row > .col-sm-12.col-xs-12`; D7 uses 996 for content
 * universally, and wide-table pages use .col-sm-10/offset-1 (unaffected).
 * ========================================================================= */
@media (min-width: 768px) {
  /* ≥768px only: mirror D7's .col-sm-10/.col-sm-offset-1. Below 768px the
     column must stay full width (col-xs-12), exactly as D7's col-sm-* reverts. */
  .body-section .row > .col-sm-12.col-xs-12 {
    width: 83.33333%;          /* .col-sm-10 */
    margin-left: 8.33333%;     /* .col-sm-offset-1 */
  }
}

/* =========================================================================
 * /m-aadhaar (landing variant) — content not in the centred container
 * -------------------------------------------------------------------------
 * Standard pages wrap their body in `.body-section > .container` (max-width
 * 1231, centred at left 105). The landing variant `.body-section.landing`
 * (used by /m-aadhaar) OMITS that `.container`, so its content blocks render
 * flush-left at full 1440px width, and a Bootstrap `.row` inside #footerbanner1
 * keeps its -15px side margins with no padded container to absorb them — pushing
 * the document to 1455px wide (horizontal overflow).
 *
 * Give the landing section's top-level content blocks the same centred-container
 * geometry (max-width 1231, auto side margins, 15px padding) so the inner rows'
 * -15px margins are absorbed and the content centres in the 1231 container like
 * every other page. Verified: body scrollWidth 1455 -> 1440 (overflow gone),
 * content moves from left:0/full-width into the centred container. The banner
 * (`.container-fluide > .inner-banner-wrap`) stays full-width as on D7.
 * ========================================================================= */
.body-section.landing > div {
  max-width: 1231px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* =========================================================================
 * M1 — BODY COPY ALIGNMENT: justify (D7) vs left (D11)  (every content page)
 * -------------------------------------------------------------------------
 * D7 renders body <p> as `text-align:justify`; D11 left. Confirmed on
 * /about-us (D7 justify, D11 start) and standard pages. Standard content pages
 * hold their paragraphs in `#block-csb-content`; the quicktabs pages
 * (/about-us, /nri-banking, /accounts) hold theirs in
 * `.quicktabs-tabpage-content` (NOT inside #block-csb-content — verified), so
 * both wrappers are scoped here. Scoped to content so nav/footer are untouched.
 * ========================================================================= */
/* Narrowed 14-Oct-2026: D7's only justify rule is `.region.region-genesis p`
   (bootstrap.css), i.e. the Genesis tab of /about-us (node 72). Site-wide
   justify stretched word gaps on product cards (.vo-section) and form copy
   (/gold-loans-0, /morewithmorya) that D7 renders left-aligned. */
.page-node-72 .quicktabs-tabpage-content p {
  text-align: justify;
}

/* =========================================================================
 * L2 — PRODUCT-CARD "KNOW MORE" CTA (.view-det1)  (product grids:
 * /current-accounts, /fixed-deposits, /gold-loan — all `.knowmore_cta .view-det1`)
 * -------------------------------------------------------------------------
 * D7  : DINPro-Regular, 14px, font-weight 400, text-align left, no transform.
 * D11 : DINCondensed-Bold, 18px, centered, UPPERCASE (colour #FF6600 matches).
 * Restore the D7 typography. text-align lives on the `.knowmore_cta` container
 * (that is what centres the inline <a> in D11), so set it there AND on the <a>.
 * Colour is already #FF6600 on both — left alone.
 * ========================================================================= */
.knowmore_cta {
  text-align: left;
}
.knowmore_cta a.view-det1,
a.view-det1 {
  font-family: 'DINPro-Regular', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
}

/* =========================================================================
 * M3 — LEAD-FORM OPTION / FIELD LABELS BOLD  (/casa-enquiry = page-node-1023)
 * -------------------------------------------------------------------------
 * D7 renders the lead-form labels at font-weight 700 — the field labels
 * (Name/Mobile/Email/City), the "Select the products…" heading-label, and the
 * product option labels (Current Account / Savings Account / NRI Account /
 * Others). The ONLY labels D7 keeps at 400 are the inline radio option labels
 * (Retail Net Banking … Fee Collection) whose DIRECT parent is `.radio`.
 * D11 renders them all 400. Match D7: bold all form labels, then restore 400 on
 * the inline radio/checkbox option labels (child combinator so the product
 * option labels — direct parent a `.col-*`, not `.radio` — stay bold). Scoped
 * to the casa-enquiry node so other forms (search/login) are untouched.
 * ========================================================================= */
.page-node-1023 form label {
  font-weight: 700;
}
.page-node-1023 form .radio > label,
.page-node-1023 form .checkbox > label {
  font-weight: 400;
}

/* =========================================================================
 * H3 — DESIGNED FULL-WIDTH BANNERS CROPPED  (lead-form / baked-text PNG banners,
 * e.g. /casa-enquiry — 1583×295 artwork with baked wording)
 * -------------------------------------------------------------------------
 * The inner-banner block above cover-crops every `.inner-banner-wrap img` to a
 * 295px strip (height:295 !important; object-fit:cover; object-position:right
 * top). That is correct for the STANDARD banners — photo strips that carry the
 * theme's orange title tab (`.inner-banner-title` overlay). But the DESIGNED
 * lead-form banners bake their own wording into the artwork and carry NO
 * `.inner-banner-title` overlay (verified: casa-enquiry has 0 of them, while
 * standard banners such as /contact-us have one). On those the right-top cover
 * crop lops ~108px off each side, clipping the baked text to "art your / urney
 * with CSB". Distinguish the two by the overlay: a banner with no title overlay
 * is a designed banner → show the whole artwork (width:100%; height:auto, no
 * crop). Standard banners keep the cover-crop above, unchanged.
 * ========================================================================= */
/* Measured on D7: these banners render `background-size:100% 100%` (stretched
   to the full 295px strip, nothing cropped) at >=768px and fall back to the
   standard right-top cover crop below 768px. Letterboxing (contain) left grey
   bars on /cersai, /nri-campaign-page etc. */
@media (min-width: 768px) {
  .inner-banner-wrap:not(:has(.inner-banner-title)) img {
    object-fit: fill;
  }
}

/* =========================================================================
 * M2 — CSR LINK LIST COLLAPSES TO ONE COLUMN  (/corporate-social-responsibility
 * = page-node-4)
 * -------------------------------------------------------------------------
 * D7 lays the ~10 CSR links in TWO columns: two `ul.common-ul`, each in a
 * `col-lg-6` inside a `.row`, sitting side by side (≈483px each). In D11 the
 * `.row` is `display:block` and the `col-lg-6` renders full width (≈825px), so
 * the two lists stack into one column. Restore D7 by floating the two CSR
 * columns to 50% at the `lg` breakpoint (≥1200px, where D7's col-lg-6 engages;
 * below that D7 also stacks via col-md-12). The page has exactly those two
 * col-lg-6 blocks, so this is scoped to the CSR lists only.
 * ========================================================================= */
@media (min-width: 1200px) {
  /* NOTE specificity: the about-us body-inset rule above
     (`.body-section .row > .col-sm-12.col-xs-12`, 4 classes) ALSO matches these
     CSR cols — they carry col-sm-12/col-xs-12 — forcing them to 83.33% width +
     8.33% left margin (which is why they stacked). Out-specify it by matching
     the col-lg-6 + col-sm-12 pair (5 classes) and reset that stray margin. */
  .page-node-4 .body-section .row > .col-lg-6.col-sm-12 {
    width: 50%;
    margin-left: 0;
    float: left;
    box-sizing: border-box;
  }
}

/* L1 (D7 parity): restore a PDF-type icon before file links; the core "(x KB)"
   size suffix is dropped by the file/file-link.html.twig template override.
   Icon bundled in theme (images/application-pdf.png) — core D11 no longer ships
   per-mime icon PNGs. */
.file.file--mime-application-pdf {
  background: url('../images/application-pdf.png') no-repeat 0 55%;
  padding-left: 22px;
  display: inline-block;
}

/* ------------------------------------------------------------------ *
 * Admin Toolbar visibility (logged-in staff) — D7 showed the admin
 * bar on every page. In D11 the site #header is position:fixed; top:0;
 * z-index:9999, which completely covers the core admin Toolbar
 * (z-index 502, 40px tall) on front-end pages. Offset the fixed header
 * below the toolbar using Drupal's displacement variable. For anonymous
 * visitors the variable resolves to 0, so the header stays at top:0 —
 * no change to the public site.
 * ------------------------------------------------------------------ */
#header {
  top: var(--drupal-displace-offset-top, 0px);
}

/* Content reserves `body { padding-top: 84px }` for the fixed #header. When the
   admin toolbar displaces the header downward, add that displacement so page
   content (e.g. the user-profile View/Edit/Submissions tabs) clears the header
   instead of hiding behind it. Anonymous visitors: var is 0 -> unchanged 84px.

   !important is required: Drupal's toolbar JS writes an INLINE `padding-top`
   on <body> equal to the toolbar height only (~79px). That inline style beats a
   plain stylesheet rule, so without !important the header clearance (+displace)
   is clobbered back to the toolbar height and the top of no-banner content
   (user profile tabs, etc.) hides behind the fixed header.
   D7 (bootstrap.css) reserves the 84px only at >=992px, where #header is
   fixed; below that the header is in normal flow, so mobile gets just the
   toolbar displacement. */
body {
  padding-top: var(--drupal-displace-offset-top, 0px) !important;
}
@media (min-width: 992px) {
  /* Only pages that render the fixed #header: header-less campaign pages
     (node 318 /enquiry-gold, 674 /msme-small-loan, 801 ...) have 0 on D7. */
  body:has(#header) {
    padding-top: calc(84px + var(--drupal-displace-offset-top, 0px)) !important;
  }
}

/* =========================================================================
 * Minimal promo / campaign pages (includes/campaign-minimal.html.twig:
 * /m-aadhaar, /careers/m-BDE, /m-MDR, /m-RuPayOffer, /m-campaign3,
 * /campaign4-6) — production renders their body FULL WIDTH (left 83, width
 * ~1201 inside the 1231 container) and left-aligned. Opt this layout out of
 * the 10/12 + offset-1 inset above (it nests two .col-sm-12 columns, so the
 * inset would apply twice) and of the site-wide justified body paragraphs.
 * ========================================================================= */
@media (min-width: 768px) {
  .body-section.campaign-minimal .row > .col-sm-12.col-xs-12 {
    width: 100%;
    margin-left: 0;
  }
}
.body-section.campaign-minimal #block-csb-content p,
.body-section.campaign-minimal .region-content p {
  text-align: start;
}

/* Mega-menu widths: D7 html.tpl.php sets these in an inline <style> (Personal
   975px, NRI 1086px); without them D11 falls back to 923px and NRI headings
   wrap. Desktop only — the mobile menu is a stacked list. */
@media (min-width: 992px) {
  #nriBanking .dropdown-menu.mega-dropdown-menu.row { width: 1086px; }
  #personal .dropdown-menu.mega-dropdown-menu.row { width: 975px; }
}