/* ==========================================================================
   NINSS static site — corrections
   --------------------------------------------------------------------------
   Every rule here fixes a defect carried over from the original WordPress
   build. This file is loaded last on every page so it wins over Elementor's
   generated CSS without any of that CSS being edited — which means it can be
   removed at any time to get the original behaviour back.
   ========================================================================== */

/* 1. Accreditation / affiliation logo row (home page).
      Two defects. The four <img> tags pointed at 150x150 thumbnails while
      Elementor sized them to the full image's aspect ratio, so each emblem was
      both blurry and squashed; the src values now point at the real files.
      And when the four columns stack on tablet and phone the images stretched
      to the full container width — the Suleman Roshan logo reached 740px.
      Each logo now sits in a uniform 265px box and is scaled to fit inside it,
      so the row stays even at every width and no emblem is distorted. */
.elementor-widget-image img[src*="/001.png"],
.elementor-widget-image img[src*="/002.png"],
.elementor-widget-image img[src*="/003.png"],
.elementor-widget-image img[src*="srmc-logo"] {
  display: block;
  width: 100% !important;
  max-width: 265px !important;
  height: 265px !important;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* 2. Footer logo, on every page.
      The site logo is placed twice: small in the header, and again in the
      footer. Both carry the same inline styling — width:100%, max-width:2667px
      — so the footer copy expanded to fill its column: 300px on desktop, and
      most of the screen width on a phone. The header copy is unaffected
      because its column is narrow. Only the footer copy is capped here. */
.ninss-footer-logo {
  display: block;
  width: auto !important;
  max-width: 160px !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .ninss-footer-logo {
    max-width: 120px !important;
  }
}

/* 3. Fee and course-outline tables were pasted in from Microsoft Word and
      carry fixed cell widths totalling 659px. On a 375px phone that forced the
      whole page to scroll sideways. Each table now scrolls inside its own box
      and the page itself stays put. */
.ninss-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4. WordPress gallery grids carry a -15px right margin that cancels the
      gutter after the last column. The overhang is empty space, but it still
      made every gallery page scroll ~5px sideways on phones. */
.elementor-widget-image-gallery .elementor-widget-container {
  overflow-x: hidden;
}

/* 5. Admission form (Apply Now).
      The theme rescales embedded iframes to preserve a video-style aspect
      ratio, which shrank the Google Form to 1176px tall on a phone and forced
      the visitor to scroll inside the frame to reach the submit button. The
      form needs 2961px at desktop width and 3024px at phone width (measured),
      so it is given a fixed height with headroom and full width instead. */
iframe[src*="docs.google.com/forms"] {
  display: block;
  width: 100% !important;
  max-width: 100%;
  /* the theme's responsive-embeds script writes an inline max-height, which
     would otherwise cap the height set below */
  max-height: none !important;
  height: 3150px !important;
  border: 0;
}

/* 6. The admissions popup image had no link at all. It now opens the same
      Google Form the Apply Now page embeds. */
.ninss-popup-link {
  display: block;
  line-height: 0;
  cursor: pointer;
}

/* 7. Attendance section added to the home page.
      It reuses the site's own Elementor markup, so the fonts and container
      width already match the surrounding sections. These rules only add the
      spacing and the brand colour (#273171, taken from the section above it),
      which the generic Elementor classes do not carry on their own. */
#ninss-attendance {
  padding: 60px 0;
}

#ninss-attendance h3 {
  color: #273171;
  margin-bottom: 10px;
}

#ninss-attendance p {
  color: #4a4a4a;
  margin-bottom: 16px;
}

#ninss-attendance a {
  color: #273171;
  font-weight: 600;
  text-decoration: underline;
}

#ninss-attendance a:hover,
#ninss-attendance a:focus {
  color: #1b2350;
}

@media (max-width: 767px) {
  #ninss-attendance {
    padding: 40px 0;
  }
}

/* 8. The home page had no <h1> at all - the institute's name appears only
      inside the logo image, so search engines and screen readers had no main
      heading to read. The heading added to the page is positioned off-screen
      rather than display:none, so assistive technology still announces it. */
.ninss-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}