/* India Salary Guide 2026 -- page-specific styles (AICOIN-100)
   Matches the site's existing design tokens: Outfit font, #047cb6/#3e4095/#319cee
   blue family, #3bb44d/#319a52 green accent, #2d2d2d body text (see
   frontend/src/styles/globals.css, public/assets/css/header.css/footer.css). */

:root {
  --isg-blue: #047cb6;
  --isg-blue-dark: #3e4095;
  --isg-accent: #319cee;
  --isg-green: #3bb44d;
  --isg-green-dark: #319a52;
  --isg-text: #2d2d2d;
  --isg-muted: #747474;
  --isg-bg-light: #fafafa;
  --isg-border: #e3e3e3;
  --isg-radius: 10px;

  /* AICOIN-101 (header-footer-clone): footer.css references --text-dark-color (the footer link
     lists, the "Find A Job" label) but never defines it anywhere in header.css/footer.css or here --
     a leftover reference to a variable that only exists in the live Next.js app's own compiled
     globals.css, which this static page doesn't load. Left undefined, those 3 rules fell back to the
     inherited body colour (#2d2d2d) with default underline instead of the live site's own #747474,
     no-underline look. Measured directly against www.allianceinternational.co.in's footer
     (getComputedStyle on its nav links and "Find A Job" label): #747474 both places. */
  --text-dark-color: #747474;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Outfit", "Segoe UI", Arial, sans-serif;
  color: var(--isg-text);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
}

/* AICOIN-101 (header-footer-clone): scoped to <main> only -- this is this page's own body-content
   image reset; header.css/footer.css already size their own icons off each img's real width/height
   attributes and don't need it. (A desktop-width overflow surfaced while QA-ing this locally turned
   out to be a local-preview-only artifact -- python -m http.server can't serve the /_next/image/
   proxy paths copied verbatim from the live header/footer, and a broken img with a srcset but no
   sizes attribute renders at an inflated size instead of its width/height attributes; confirmed
   /_next/image/ itself resolves fine on real staging, and the overflow disappears once the images
   load -- not a real bug, nothing to fix there. This scoping is just cleanup: a page-content reset
   has no business reaching into a shared, separately-styled component.) */
main img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--isg-blue);
}

/* AICOIN-101 (header-footer-clone): more footer gaps found alongside --text-dark-color above, same
   root cause (rules in footer.css that the live site's current markup doesn't actually use any
   more). Measured against www.allianceinternational.co.in's footer:
   1) the nav link lists, and the per-office "Contact Us" links (.contact-btn), render with a plain
      underline there (footer.css sets their colour but never text-decoration, so this page's default
      anchor underline showed through -- .contact-btn's own colour, #008dd2, was already correct);
   2) footer.css's own `.find-btn` selector for the "Find A Job" label matches nothing in the real
      markup (ours or live's) -- it's `.com-btn span.pe-3.align-self-center` on both, dead CSS same as
      the undefined variable; targeting the real element directly instead;
   3) the office-address paragraphs (.com-para, "B-707 MONDEAL SQUARE Sarkhej...") are a visibly
      different grey, #494b4c -- not the #747474 of the links/labels above; footer.css points both at
      the same --text-dark-color, so fixing that variable alone would have left the address text the
      wrong shade;
   4) the "Yes, I'm Employer" / "No, I'm Job Seeker" / "I want to Outsource IT Project" radio labels
      share the same .com-para class as the address paragraphs above, but footer.css's one .com-para
      rule is tag-qualified to `p.com-para` -- these are `<label class="com-para">`, so they match
      nothing in footer.css at all (ours or live's current build) and fell back to the inherited body
      colour; live's labels are #747474, same size/weight as this page already had.
   These are targeted overrides, not the variable, because each needs its own value. */
footer .footer-content ul li a,
footer .contact-btn {
  text-decoration: none;
}

footer .com-btn span.pe-3.align-self-center,
footer label.com-para {
  color: #747474;
}

footer .footer-content p.com-para {
  color: #494b4c;
}

.isg-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 60px);
}

/* ---------- header ---------- */
/* AICOIN-100 revision: header/footer chrome now reuses the site's own #ae_header / main-footer markup,
   header.css / footer.css, and the real Bootstrap 5.3.3 the site itself runs (loaded in <head>), for
   sitewide consistency. Bootstrap supplies .container, .row, .col-lg-N, .navbar-collapse and .navbar-toggler
   behaviour on its own. Two gaps header.css/Bootstrap don't cover (they live in the site's own global
   utility CSS, which this legacy-path page doesn't load) are supplied below: */

/* .disp-mob/.disp-desk are the site's own responsive-swap utility classes (not Bootstrap, not in
   header.css) -- without a definition both the mobile and desktop CTA-button sets showed at once. */
.disp-mob {
  display: none;
}

@media (max-width: 991px) {
  .disp-mob {
    display: block;
  }

  .disp-desk {
    display: none;
  }
}

/* The logo has no protected width outside header.css's own >1300px media query (it targets
   .navbar-brand, a class this page's captured markup doesn't use) -- combined with this page's own
   `img { max-width: 100% }` rule below, the flex layout let the logo collapse to near-zero width
   whenever the nav row's content was wide. Give it back a fixed, non-shrinking size.
   AICOIN-101 (header-footer-clone, round 2): 180px was never measured against the live site -- it
   rendered at 213x71 there (getComputedStyle on www.allianceinternational.co.in's header logo <img>,
   1440px viewport), against the img's own 229x76 width/height attributes (229/76 = 3.013; 213/3.013
   ~= 70.7, so height:auto still lands on the same ~71px live shows). Corrected to the measured value. */
.logo-dropdown-container {
  flex-shrink: 0;
}

/* AICOIN-122: this rule was never carried over from the live site's compiled header CSS -- without
   it .logo-dropdown-container fell back to display:block, so the logo and the "IN" country
   selector stacked on separate lines instead of sitting side by side, taking the navbar tall.
   Ported verbatim (getComputedStyle on www.allianceinternational.co.in's header: display flex,
   align-items center, gap 15px, position relative). */
.logo-dropdown-container {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}

.logo-positioned {
  display: block;
}

@media (max-width: 768px) {
  .logo-dropdown-container {
    gap: 8px;
  }
}

.brand-logo-img img {
  width: 213px;
  max-width: 213px;
  height: auto;
}

/* AICOIN-101: About Us/Services/Franchise/Locations nav dropdowns are now the live site's own
   mega-menu markup+classes (.nav-item.dropdown/.dropdown-toggle/.dropdown-menu), verbatim from
   www.allianceinternational.co.in -- header.css (loaded sitewide, see above) already styles them
   fully. The only gap is the toggle behaviour, since the live React app's click handlers aren't
   present on this static page -- supplied in india-salary-guide.js. */

/* AICOIN-101 (header-footer-clone): the live site's real mobile header is now built here too --
   .header-bottom-mob, spliced verbatim from www.allianceinternational.co.in's own mobile DOM
   (hamburger -> flat nav-item list with per-item accordions -> 4 CTA buttons), a sibling of
   .header-wrapper-box/.header-bottom-desk inside the same <header>. header.css's own unmodified
   rules already do the showing/hiding (.header-wrapper-box + .header-bottom-desk hidden,
   .header-bottom-mob shown, both at the same <=991px breakpoint it always used) -- no override
   needed here any more. The earlier approximation that forced the desktop header to stay visible
   on mobile (because this component didn't exist yet) has been removed along with it. */

/* ---------- buttons (mirrors the site's pill CTA style, e.g. bdcall.css .cta-btn) ---------- */
.isg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px);
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--isg-blue);
  background: var(--isg-blue);
  color: #fff;
  transition: 0.25s ease all;
  cursor: pointer;
  line-height: 1.2;
}

.isg-btn:hover {
  background: #fff;
  color: var(--isg-blue);
}

.isg-btn.isg-btn-outline {
  background: #fff;
  color: var(--isg-blue);
}

.isg-btn.isg-btn-outline:hover {
  background: var(--isg-blue);
  color: #fff;
}

.isg-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

/* ---------- hero / sections ---------- */
.isg-hero {
  padding-block: clamp(32px, 5vw, 56px);
  background: linear-gradient(180deg, #f4faff 0%, #fff 100%);
}

/* AICOIN-101: trimmed, centered hero -- one short paragraph, highlighted CTAs, no more sprawling
   4-paragraph intro. Keeps the same tokens/section as every other page, just recomposed. */
.isg-hero.isg-hero-center {
  text-align: center;
  background: radial-gradient(ellipse at top, #eaf6ff 0%, #f4faff 45%, #fff 100%);
  /* AICOIN-101: fill the first screen so "Why Salary Benchmarking Matters" sits below the fold and
     only appears once the person scrolls -- content is centered inside that extra height so the gap
     doesn't read as empty/odd space. */
  display: flex;
  align-items: center;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
}

.isg-hero-center .isg-container {
  width: 100%;
  /* AICOIN-101: nudge the content up a little within the vertically-centered hero -- shrinks the
     whitespace above the eyebrow/heading without touching the fold buffer below the CTA. */
  margin-top: -40px;
}

.isg-hero-center .isg-eyebrow {
  display: inline-block;
}

.isg-hero-center .isg-intro {
  max-width: 720px;
  margin-inline: auto;
}

.isg-hero-center .isg-btn-row {
  justify-content: center;
}

.isg-eyebrow {
  color: var(--isg-blue);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
}

h1.isg-h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  color: var(--isg-text);
  margin: 0 0 20px;
  line-height: 1.2;
}

.isg-section {
  padding-block: clamp(28px, 4vw, 48px);
}

.isg-section + .isg-section {
  border-top: 1px solid var(--isg-border);
}

.isg-section h2 {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  color: var(--isg-text);
  margin: 0 0 18px;
}

.isg-section p {
  font-size: 16px;
  color: var(--isg-muted);
  margin: 0 0 16px;
}

.isg-section p:last-child {
  margin-bottom: 0;
}

.isg-section strong {
  color: var(--isg-text);
}

.isg-intro p {
  font-size: 17px;
}

/* ---------- PDF download & lead form (AICOIN-101) ---------- */
/* AICOIN-101 (2026-11-03): this wrap used to carry its own card chrome (border, blue top accent,
   background gradient, shadow, padding) around the custom isg-lead-form. The GoHighLevel embed
   (.isg-lead-form-embed below) renders its own card -- border, radius, shadow, white background,
   padding -- inside the iframe, so keeping this wrap's border/shadow too produced a visible
   box-inside-a-box (reported by the team from a staging screenshot), fixed by dropping them.
   The embed's own card is fixed-width (766px, confirmed by measuring it at two different
   container widths -- a GoHighLevel form-builder setting inside their cross-origin iframe, not
   something this page's CSS can reach or resize), so at this wrap's full content width -- same
   as the other sections on the page -- empty space is left on both sides of the card. Restored
   as a full-width panel (matches the surrounding sections, per the team's request) with a light
   blue background + padding so that space reads as a deliberate framed panel instead of dead
   whitespace. */
.isg-lead-form-wrap {
  width: 100%;
  background: #eaf4fb;
  border-radius: var(--isg-radius);
  padding: 28px clamp(20px, 4vw, 32px);
  margin-top: 24px;
}

/* AICOIN-101 (2026-11-03): .isg-lead-form-wrap h3 / .isg-lead-form-intro removed along with the
   markup they styled -- see the comment on .isg-lead-form-wrap in index.html. The custom
   isg-lead-form grid/field/submit/message styling that used to follow this point
   point (.isg-lead-form, .isg-form-field, .isg-hp-field, #isg-lead-submit, .isg-lead-disclaimer,
   .isg-lead-message) was removed with the form itself -- none of those classes/ids exist in the
   markup anymore, replaced by the GoHighLevel embed below. */
.isg-lead-form-embed {
  width: 100%;
  /* Matches the embed's own data-height="633". The iframe's inline style is height:100%, which
     resolves to 0 against an unsized parent until form_embed.js's postMessage resize runs (or if
     it never does) -- this is that fallback floor, not a guessed design value. */
  min-height: 633px;
}

/* ---------- FAQ ---------- */
.isg-faq-item {
  border: 1px solid var(--isg-border);
  border-radius: var(--isg-radius);
  padding: 4px 20px;
  margin-bottom: 12px;
}

.isg-faq-item summary {
  font-weight: 700;
  font-size: 16px;
  padding: 14px 0;
  cursor: pointer;
  color: var(--isg-text);
}

.isg-faq-item p {
  margin: 0 0 16px;
  color: var(--isg-muted);
}

/* ---------- CTA bands ---------- */
.isg-cta-band {
  background: var(--isg-blue-dark);
  color: #fff;
  padding-block: clamp(32px, 5vw, 56px);
  text-align: center;
}

.isg-cta-band h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  margin: 0 0 14px;
}

.isg-cta-band p {
  color: #e6eeff;
  max-width: 720px;
  margin: 0 auto 8px;
}

.isg-cta-band .isg-btn-row {
  justify-content: center;
}

.isg-cta-band .isg-btn {
  background: #fff;
  color: var(--isg-blue-dark);
  border-color: #fff;
}

.isg-cta-band .isg-btn:hover {
  background: var(--isg-blue);
  border-color: var(--isg-blue);
  color: #fff;
}

/* AICOIN-101 (header-footer-clone): the footer is now spliced verbatim from the live homepage too,
   including both its .address-grid-desktop and .address-swiper-mobile variants (footer.css already
   toggles between them -- the earlier splice only carried the desktop one, which is why the office
   cards had nothing to fall back to below 767px). Bootstrap (loaded in <head>, see header comment
   above) handles its own .row/.col-lg-* grid natively now, so the hand-rolled flexbox fallback this
   page used to carry for them has been removed along with it. */

/* ---------- and-more-industries (restored: no raw LPA figures, never needed to move to the PDF) ---------- */
.isg-more-industries {
  background: var(--isg-bg-light);
  border: 1px solid var(--isg-border);
  border-radius: var(--isg-radius);
  padding: 24px;
  margin-top: 8px;
}

.isg-more-industries h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--isg-text);
}

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .isg-btn-row {
    flex-direction: column;
  }

  .isg-btn-row .isg-btn {
    width: 100%;
  }
}