/* ==========================================================================
   CISF refinements — loaded last, on top of the MHA DBIM theme.
   Normalises image sizes/backgrounds and fixes persona text overlap.
   ========================================================================== */

/* ---------- Key persons (PM / HM / DG) ----------
   All three white-background photos (481x462) are shown as uniform rectangular
   portraits in a single symmetric row (3 equal columns). The HM photo has faint
   grey/black lines baked into its left/right edges, so we inset-crop every image
   slightly (scale up + clip overflow) to push those edges out of the frame. */
.aboutbox2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);   /* three equal columns, one row */
  gap: 18px;
  align-items: stretch;
}
.aboutbox2 > a { text-decoration: none; display: block; height: 100%; }
.aboutbox2 .aboutbox-mins {
  background: #ffffff;
  border: 1px solid var(--sttl-theme-gray, #ebeaea);
  border-bottom: 4px solid var(--sttl-theme-blue, #29136C);
  border-radius: 8px;
  padding: 16px 14px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.aboutbox2 .aboutbox-mins span {
  display: block;
  width: 100%;
  aspect-ratio: 481 / 462;                 /* identical frame for all three */
  margin: 0 auto 14px;
  overflow: hidden;                        /* clips the inset-cropped edges */
  background: #ffffff;
  border: 1px solid var(--sttl-theme-gray, #ebeaea);
}
.aboutbox2 .aboutbox-mins span img.about-section-img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* show the FULL portrait — no cropping */
  background: #ffffff;
  display: block;
}
/* Only the HM photo carries faint baked-in edge lines: nudge them out of view
   with a tiny horizontal inset-crop, without cropping the top/bottom. */
.aboutbox2 .aboutbox-mins span img.about-section-img.person-crop {
  object-fit: cover;
  transform: scaleX(1.05);
}
.aboutbox2 .aboutbox-mins .nameminister { margin-top: auto; }
.aboutbox2 .aboutbox-mins .nameminister .textsmall {
  margin: 0; font-weight: 600; color: var(--sttl-theme-150202, #150202);
  white-space: nowrap;            /* keep "Shri Praveer Ranjan, IPS" on one line */
  font-size: 0.95em;
}
.aboutbox2 .aboutbox-mins .nameminister .textbold {
  margin: 2px 0 0; font-size: var(--sttl-theme-font-14, .875em);
  text-transform: uppercase; color: var(--sttl-theme-555555, #555);
  white-space: nowrap;
}

/* ---------- Social media cards: uniform image size + white background ---------- */
.media-sec .media-head {
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;                 /* fill the equal-height column; NOT 50% (buggy) */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.media-sec .media-head .media-img {
  width: 100%;
  height: 150px;                /* fit the small social icons (was 300px) */
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--sttl-theme-gray, #ebeaea);
}
.media-sec .media-head .media-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
}
.media-sec .media-head h3 {
  color: var(--sttl-theme-blue, #29136C);
  font-weight: 600;
  margin: 14px 16px 8px;
}
.media-sec .media-head .media_filed {
  padding: 0 16px 16px;
  color: var(--sttl-theme-150202, #150202);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.media-sec .media-head .media_filed p { margin-bottom: 12px; }
.media-sec .media-head .media_filed .viewmore { margin-top: auto; align-self: flex-start; }

/* ---------- User Personas: fix text/image OVERLAP ----------
   The theme stacks the Owl dots absolutely at the bottom and the title has only
   20px top margin, so on a tall image the title and dots overlapped. We give the
   carousel breathing room: fixed circular image, clear gap before the title, and
   reserved space below for the Owl dots/nav. */
#persona { padding-bottom: 50px; }                 /* room for dots/nav below */
#persona .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#persona .item img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--sttl-theme-blue, #29136C);
  box-shadow: 0 0 0 4px #ffffff, 0 4px 10px rgba(0, 0, 0, .12);
  margin: 0 auto;
}
#persona .item .carousel-title-type-2 {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  line-height: 1.3;
}
/* keep the Owl dots clear of the title */
#persona .owl-dots { bottom: 10px !important; }
#persona #persona .owl-nav,
#persona .owl-nav { top: auto !important; bottom: 0 !important; transform: translateX(-50%) !important; }

/* Keep the three key-person cards in a single row down to tablet widths */
@media (max-width: 767px) {
  .aboutbox2 .aboutbox-mins { padding: 10px 8px; }
  .aboutbox2 .aboutbox-mins .nameminister .textsmall { font-size: 0.8em; }
  .aboutbox2 .aboutbox-mins .nameminister .textbold { font-size: 0.72em; }
}
@media (max-width: 575px) {
  /* allow names to wrap gracefully only on very small phones */
  .aboutbox2 .aboutbox-mins .nameminister .textsmall,
  .aboutbox2 .aboutbox-mins .nameminister .textbold { white-space: normal; }
  .media-sec .media-head .media-img { height: 200px; }
  #persona .item img { width: 150px; height: 150px; }
}

/* ---------- Logo fix ----------
   The CISF emblem is roughly square, unlike MHA's tall national emblem, so the
   theme's fixed sizing / negative margin / bottom-alignment squeezed it.
   Let it render in its natural aspect ratio and align neatly with the text. */
.logo { align-items: center; }
.logoMain img.national_emblem {
  width: auto !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain;
  margin-bottom: 0 !important;
}
.logo .logo-text { height: auto; line-height: 1.3; }
@media (max-width: 575px) {
  .logoMain img.national_emblem { height: 56px !important; }
}

/* ==========================================================================
   Accessibility: Default Cursor (large pointer)
   The DBIM theme points body.Default_Cursor at cursor-large.png /
   cursor-pointer-large.png, which are not shipped in this project, so the
   effect silently fell back to the normal cursor. Provide a working, asset-free
   large-cursor effect using a scalable inline SVG cursor (with keyword
   fallbacks), so the 8th accessibility control has a visible result.
   Loaded after the theme, so these win without editing any theme file.
   ========================================================================== */
body.Default_Cursor,
body.Default_Cursor * {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l0 20 5-6 3 7 3-1-3-7 7 0z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,
    auto !important;
}
body.Default_Cursor a,
body.Default_Cursor button,
body.Default_Cursor [role="button"],
body.Default_Cursor label,
body.Default_Cursor input[type="submit"],
body.Default_Cursor .pointer {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2v13l3-3 2.2 5 2.3-1-2.1-4.8 4.6-0.2z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 9 2,
    pointer !important;
}

/* ==========================================================================
   Skip-to-content target: invisible, zero-height landing point placed right
   after the header so the "Skip to main Content" link always has somewhere to
   jump. scroll-margin gives a little breathing room below any sticky header.
   ========================================================================== */
#content {
  display: block;
  height: 0;
  scroll-margin-top: 20px;
}
#content:focus { outline: none; }

/* ==========================================================================
   Leaders bar: PM photo (left) + existing header top bar (center) + HM photo
   (right). The center keeps the original .px-120/.row markup unchanged; this
   only arranges the three pieces in a row. Scoped so the DBIM theme is untouched.
   ========================================================================== */
.cisf-leaders-bar {
  position: relative;           /* anchor for the corner-pinned photos */
  display: flex;
  align-items: center;
  justify-content: center;      /* centre the content block in the bar */
  min-height: 196px;            /* room for the enlarged photos + padding */
  overflow: hidden;             /* belt-and-braces: no photo spills outside */
}
.cisf-leaders-center {
  flex: 0 1 auto;               /* a centred block, not a full-width stretch */
  min-width: 0;
  width: 100%;                  /* keep the inner .px-120 grid behaving normally */
  max-width: 100%;
}
/* Photos pinned to the absolute top corners of the bar. */
.cisf-leader {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
  padding: 0;
  z-index: 2;
}
.cisf-leader--left  { left: 0; }
.cisf-leader--right { right: 0; }
.cisf-leader img {
  width: auto;
  height: 180px;                /* enlarged PM/HM leader photos (base) */
  object-fit: contain;          /* keep original shape / aspect ratio */
  display: block;
  background: #ffffff;
}
/* Size order PM > HM: Prime Minister (left) a touch larger than Home Minister (right). */
.cisf-leader--left  img { height: 190px; }
.cisf-leader--right img { height: 172px; }

/* Give the centred content horizontal clearance so it never slides under the
   corner photos. Reserve a gutter wide enough for the enlarged portraits so
   there is no overlap. */
.cisf-leaders-center { padding-left: 210px; padding-right: 200px; }

/* Tablet: smaller portraits + matching gutters/height so nothing overlaps. */
@media (max-width: 1199px) {
  .cisf-leaders-bar { min-height: 128px; }
  .cisf-leader img { height: 116px; }
  .cisf-leaders-center { padding-left: 132px; padding-right: 132px; }
}
/* Phones: stack the centre block BELOW the two corner photos so the narrow
   viewport is never cramped and nothing overlaps. */
@media (max-width: 767px) {
  .cisf-leaders-bar { min-height: 0; display: block; padding-top: 96px; }
  .cisf-leader img { height: 84px; }
  .cisf-leaders-center { padding-left: 0; padding-right: 0; }
}

/* ==========================================================================
   Home: remove the large empty gap after the "In Social Media" section.
   The footer initiative strip (#footer-carousel-static) carries the theme's
   .owl-carousel class but is never JS-initialised, so Owl's reserved layout
   left a tall empty band on the dark page background. It is laid out with a
   plain inline flex, so we neutralise the leftover carousel sizing and tighten
   the section spacing. Scoped; no theme file touched.
   ========================================================================== */
.client-logos {
  max-height: none !important;  /* theme caps it at 164px; let it fit content */
  width: auto !important;
  margin: 0 auto !important;    /* was 40px bottom; kill the trailing gap */
  padding: 12px 0 !important;   /* just enough to frame the logo row */
}
#footer-carousel-static {
  min-height: 0 !important;     /* drop any leftover reserved height */
}
.client-logos #footer-carousel-static > a {
  display: inline-flex;
  align-items: center;
  height: auto !important;
}
.client-logos #footer-carousel-static > a img { max-height: 54px; }

/* ==========================================================================
   About Us — balance the right column.
   Only the DG card is active now (PM/HM are commented out), but the earlier
   rule forced .aboutbox2 into 3 equal columns, leaving two empty columns of
   blank space to the right of the single card. Switch to a right-aligned flex
   so the card(s) sit flush to the extreme right, next to the intro text, with
   no empty columns. Overrides the grid above (later rule + !important wins).
   ========================================================================== */
.aboutbox2 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;     /* push the DG card to the extreme right corner */
  gap: 18px;
  margin-right: 0;
  padding-right: 0;
}
.aboutbox2 > a {
  flex: 0 0 auto;
  width: 200px;                  /* enlarged single-card width, hugs the right edge */
  max-width: 100%;
  margin-right: 0;               /* flush to the right corner */
}
/* Make the DG portrait smaller (override the near-square 481/462 frame) and
   remove the blank gap: the card now hugs its content instead of stretching to
   the grid-cell height, so no empty space appears below the shrunk photo. */
.aboutbox2 .aboutbox-mins span {
  aspect-ratio: auto;
  width: 166px;                  /* enlarged DG photo, still < HM leader (172px) */
  height: 166px;
  margin: 0 auto 12px;           /* centred, small gap before the name */
}

/* ---------- About row: close the gap between the text and the DG photo ----------
   Scoped to the About Us row only. Shrink the DG (right) column to just fit the
   small card and let the text (left) column expand to take the remaining space,
   so the text sits adjacent to the DG photo instead of leaving a big gap. */
.about_ministry > .col-xl-8 {
  flex: 1 1 auto !important;
  max-width: calc(100% - 250px) !important;   /* text fills all but the card gutter */
  width: auto !important;
}
.about_ministry > .col-xl-4 {
  flex: 0 0 240px !important;    /* just wide enough for the 200px card + edge */
  max-width: 240px !important;
  width: 240px !important;
  /* Lift the DG card up so its top sits slightly above, parallel to where the
     "About Us" heading begins, instead of starting below the heading line. */
  margin-top: -64px !important;
}
@media (max-width: 991px) {
  /* On stacked layout drop the lift so the card doesn't overlap the heading. */
  .about_ministry > .col-xl-4 { margin-top: 0 !important; }
}
@media (max-width: 991px) {
  /* stacked layout: both columns full width again */
  .about_ministry > .col-xl-8,
  .about_ministry > .col-xl-4 {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
.aboutbox2 .aboutbox-mins span img.about-section-img {
  object-fit: cover;             /* fill the smaller frame cleanly, no letterbox */
  object-position: top center;   /* keep the face in view when trimmed */
}
/* Card hugs its content (no bottom gap) now that the photo is smaller. */
.aboutbox2 .aboutbox-mins { height: auto; }
.aboutbox2 > a { height: auto; }
.aboutbox2 .aboutbox-mins .nameminister { margin-top: 0; }
/* On tablet/stacked layouts, centre the card instead of hugging the edge. */
@media (max-width: 991px) {
  .aboutbox2 { justify-content: center; }
}

/* Keep the DG card fixed at the top of its column: the inline reveal panels
   (CISF: The Security Shield / Training Centers) live in the LEFT column, so
   expanding them makes that column taller. Aligning the row to the top (instead
   of the flex default) stops the DG photo from re-centring / shifting down when
   a panel opens. Scoped to the About Us row only. */
.about_ministry {
  align-items: flex-start !important;
}
.about_ministry > .col-xl-4 .about-section,
.about_ministry > .col-xl-4 .aboutbox2 {
  align-items: flex-start;
}

/* Even out the intro paragraph so it fills its column cleanly. */
.about_ministry .aboutinner {
  text-align: justify;
  text-justify: inter-word;
  margin-bottom: 8px;
}

/* ==========================================================================
   Social media section — remove excess empty space.
   The .media-img area was 300px tall but the social icons are small, leaving
   large empty white space in each card (and a very tall section). Shrink the
   image area to fit the icons and trim the section's bottom padding so the gap
   to the next section is about one line. Scoped; no theme file touched.
   ========================================================================== */
.media-sec { padding-top: 36px !important; padding-bottom: 16px !important; }
.media-sec .media-head .media-img { height: 150px !important; }
.media-sec .media-head .media-img img { object-fit: contain; }

/* THE REAL FIX: the theme locks .media_filed to height:300px (style.css line ~349),
   so each card had ~300px of empty white below one line of text -> the huge gap.
   Let it size to its content. */
.media-sec .media-head .media_filed {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 575px) {
  .media-sec .media-head .media-img { height: 140px !important; }
}

/* ==========================================================================
   Header top bar: one-line force name, wider search, no overlap, even spacing.
   Lay the three columns (logo | search | controls) on a single flex row:
   logo hugs the left, search + controls sit on the right, with the search
   growing to fill the middle so there is no open/uneven gap between the two
   flanking PM/HM photos. Scoped; theme untouched.
   ========================================================================== */
.cisf-leaders-center .px-120 > .row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
}

/* Logo: left, sized to its content, never shrinks so the name stays readable. */
.cisf-leaders-center .px-120 > .row > .col-xl-4 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
/* Two tidy lines: "Government of India" on line 1, then the full force name on
   line 2 as one complete non-wrapping line. */
.logoMain .logo .logo-text {
  display: block;
  white-space: nowrap;          /* "Government of India" stays on its own line */
}
.logoMain .logo .logo-text strong {
  display: block;               /* force the force name onto the next line */
  white-space: nowrap;          /* keep it on a single complete line */
}

/* Search: takes the middle, grows to fill, pushed toward the controls. */
.cisf-leaders-center .px-120 > .row > .col-xl-3 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;   /* keep it to the right of the logo */
}
.searchcontainer { justify-content: flex-end !important; }
.searchcontainer .input-group,
.searchcontainer .search-block-form,
.searchcontainer .search-form,
.searchcontainer .form-item-keys { width: 100% !important; }
.searchcontainer #edit-keys,
.searchcontainer .form-search {
  width: 100% !important;
  min-width: 220px;               /* a good long bar */
}

/* Controls (skip / language / accessibility): fixed to the right, no stretch. */
.cisf-leaders-center .px-120 > .row > .col-xl-5 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.cisf-leaders-center .menuicons,
.cisf-leaders-center .logoswach-wrap,
.cisf-leaders-center .menutop { justify-content: flex-end !important; }

/* On tablet/stacked widths let the row wrap again so nothing is squeezed. */
@media (max-width: 1199px) {
  .cisf-leaders-center .px-120 > .row { flex-wrap: wrap; }
  .cisf-leaders-center .px-120 > .row > .col-xl-3 { flex: 1 1 100%; margin-left: 0 !important; }
}

/* ---------- CISF: The Security Shield inline reveal ----------
   Collapsible panel that opens under the About link boxes on the same page.
   Scoped to .cisf-shield-* so it never touches other theme styles. */
.cisf-shield-panel {
  margin-top: 8px;
}
.cisf-shield-inner {
  background: #f4f6fb;
  border-left: 4px solid #214aab;
  border-radius: 6px;
  padding: 20px 24px;
}
.cisf-shield-title {
  font-size: 20px;
  line-height: 1.35;
  color: #162f6a;
  margin: 0 0 12px;
}
.cisf-shield-inner p {
  margin: 0 0 12px;
  text-align: justify;
  color: #333;
}
.cisf-shield-inner p:last-child {
  margin-bottom: 0;
}

/* ---------- Training Centers inline reveal (link list) ----------
   Shares the .cisf-shield-* panel styling; adds the URL list layout. */
.cisf-shield-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.cisf-shield-links li {
  position: relative;
  padding-left: 18px;
}
.cisf-shield-links li::before {
  content: "\f105"; /* FontAwesome 4.7 angle-right */
  font-family: "FontAwesome";
  position: absolute;
  left: 0;
  top: 1px;
  color: #214aab;
}
.cisf-shield-links a {
  color: #162f6a;
  text-decoration: none;
  word-break: break-word;
}
.cisf-shield-links a:hover,
.cisf-shield-links a:focus {
  color: #214aab;
  text-decoration: underline;
}
@media (max-width: 575px) {
  .cisf-shield-links {
    grid-template-columns: 1fr;
  }
}

/* ---------- Language switch icon ----------
   Adds a small globe before the EN / हिन्दी links without changing the existing
   switcher markup/layout. Scoped to the language region so nothing else moves. */
.region--language .language-switcher-language-url .block__content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.region--language .language-icon {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
  color: inherit;
}
.region--language .language-icon .fa { font-size: 15px; }
.region--language .language-link[lang="hi"] {
  /* keep the Devanagari label readable at the top-bar size */
  font-size: 0.98em;
}