/* Loaded after each Webflow export so shared shell elements cannot widen the page. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.navbar-fixed,
.site-header,
.site-footer,
.footer {
  width: 100%;
  max-width: 100%;
}

/*
 * Webflow gives .nav-menu min-width:95%, which is wider than the room left
 * beside the logo, so the menu is pushed out past the container. The shell
 * used to answer that with min-width:0 -- but the menu is right-aligned, so
 * once it was allowed to be narrower than its links they overflowed *left*,
 * straight across the logo. min-width:auto is the middle ground: the menu is
 * never narrower than its own links, so it cannot ride over the logo, and
 * never a flat 95%, so it cannot shoot past the container either.
 */
.navbar-fixed .nav-menu {
  min-width: auto;
}

/*
 * The header row needs about 1545px to lay itself out at full size: a 216px
 * logo, eight links whose text totals 1199px, and the container s 65px
 * gutters. Below that the eight links no longer fit beside the logo, and the
 * horizontal menu is still in use all the way down to 992px -- Webflow only
 * swaps in the hamburger at 991px, and its script ignores the button above
 * that width, so collapsing earlier would leave a button that does nothing.
 *
 * Live resolves the shortfall by letting the row overflow the viewport, which
 * pushes About Us off-screen behind a horizontal scrollbar. This shell clips
 * horizontal overflow, so that would hide the link outright.
 *
 * Instead the gutters, the logo, the gaps and the link text scale down
 * together across that band, so the same eight links always fit. Everything
 * is back to its full live size at 1600px and above.
 */
@media screen and (min-width: 992px) and (max-width: 1600px) {
  .navbar-fixed .nav-container {
    padding-left: clamp(10px, 9.013vw - 79.4px, 64.8px);
    padding-right: clamp(10px, 9.013vw - 79.4px, 64.8px);
  }

  .navbar-fixed .brand {
    width: clamp(140px, 16.447vw - 23.2px, 240px);
  }

  .navbar-fixed .brand img {
    width: 100%;
    height: auto;
  }

  .navbar-fixed .menu-wrap {
    gap: clamp(0px, 0.8224vw - 8.16px, 5px);
  }

  .navbar-fixed .menu-wrap > a {
    padding-left: clamp(2px, 1.5132vw - 13.01px, 11.2px);
    padding-right: clamp(2px, 1.5132vw - 13.01px, 11.2px);
  }

  .navbar-fixed .menu-wrap .nav-item-title {
    font-size: clamp(12.5px, 0.9046vw + 3.53px, 18px);
    white-space: nowrap;
  }
}

/* ===================================================================
   Blog index — classes the live indiaontrack.in/blog design uses that
   are newer than the captured Webflow stylesheet in site_assets.
   Values copied from the live page CSS so the local page matches.
   =================================================================== */

.paragraph-17 {
  box-sizing: border-box;
  clear: both;
  text-align: center;
  padding-top: 34px;
  font-family: "Montserrat Variablefont Wght", Montserrat, sans-serif;
  font-weight: 700;
  position: relative;
  top: 300px;
  bottom: auto;
}

.heading-35 {
  color: var(--walsh--black, #000);
  font-family: Gotham, Montserrat, sans-serif;
  font-weight: 700;
}

.div-block-55 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--waves-library--black, #000);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  display: flex;
}

/* The base .sidebar-categories rule is display:none (it hides the old
   right-rail block); the `new` variant is the filter bar above the list. */
.sidebar-categories.new {
  width: 100%;
  display: block;
}

/* Blog cards — .paragraph-14 is the excerpt style on the live site and is
   newer than the captured Webflow stylesheet, so the managed cards had no
   rule to inherit and fell back to the browser default font. */

.paragraph-14 {
  color: var(--walsh--black, #000);
  text-align: left;
  font-family: "Montserrat Variablefont Wght", Montserrat, sans-serif;
  font-size: 16px;
  position: static;
}

/* The captured stylesheet predates a few colour/size tweaks that are live
   today. These bring the blog index back in line with indiaontrack.in/blog. */

/* Live sets the card title to the brand off-black; the capture left it pure
   black, which reads heavier next to the excerpt. */
.blog-post-title,
.blog-recent-post-title {
  color: var(--walsh--black, #2c2c2c);
}

/* "Recent Posts" is 28px on live, 24px in the capture. */
.sidebar-recent-posts .heading-16 {
  font-size: 28px;
  color: var(--waves-library--black, #131313);
}

/* --grey is #f5f7fa, a background tint, so the date rendered near-white on
   white. Live never notices because its date field is empty; ours is not, so
   use the site's text grey instead. */
.blog-recent-post-date {
  color: #797c83;
  font-size: 14px;
  margin-top: 4px;
}