/* ============================================================
   Brand logo & header — single source of truth
   ============================================================
   Markup contract (apply on every header):
     <nav class="… idg-navbar"> or <header class="… idg-navbar">
       …
       <a class="idg-logo" href="…">
         <img src="{MAIN_LOGO_URL}" alt="…">
       </a>
       …
     </nav>
   No inline width/height attributes on the <img>.
   Old classes (navbar-brand, navbarlogo-width, log-pos, main-logo)
   should not be present on the new logo element.
   ============================================================ */

:root {
  /* Header bar */
  --id-header-h-desktop: 64px;
  --id-header-h-tablet:  60px;
  --id-header-h-mobile:  56px;

  /* Logo widths per breakpoint */
  --id-logo-w-desktop-lg: 180px;  /* ≥ 1280px */
  --id-logo-w-desktop:    160px;  /* 1025–1279px */
  --id-logo-w-tablet:     140px;  /* 769–1024px */
  --id-logo-w-mobile:     120px;  /* 361–768px */
  --id-logo-w-mobile-sm:  100px;  /* ≤ 360px */

  /* Asset aspect ratio (4:1 per LOGO-STANDARD spec). aspect-ratio +
     object-fit:contain letterbox real-world assets that aren't 4:1. */
  --id-logo-aspect: 4 / 1;
}

/* ----- Header bar shared rules (desktop default) ----- */
.navbar.idg-navbar,
header.idg-navbar {
  min-height: var(--id-header-h-desktop);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* ----- Logo wrapper ----- */
.idg-logo {
  display: inline-flex;
  align-items: center;
  height: var(--id-header-h-desktop);
  padding: 8px 0;
  margin: 0;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}
.idg-logo:hover,
.idg-logo:focus,
.idg-logo:active {
  text-decoration: none;
  outline: none;
}

/* ----- Logo image ----- */
.idg-logo > img {
  display: block;
  width: var(--id-logo-w-desktop);
  height: auto;
  max-width: 100%;
  max-height: calc(var(--id-header-h-desktop) - 16px);
  aspect-ratio: var(--id-logo-aspect);
  object-fit: contain;        /* letterbox, never squash */
  object-position: left center;
  /* Defensive: neutralize legacy inline attributes if any tenant still
     ships width="X" or height="Y" on the <img>. Inline attrs lose to
     these properties because they're presentational hints, not styles. */
}

/* ============================================================
   Breakpoints
   ============================================================ */

/* Large desktop (≥ 1280px) */
@media (min-width: 1280px) {
  .idg-logo > img {
    width: var(--id-logo-w-desktop-lg);
  }
}

/* Tablet (769–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar.idg-navbar,
  header.idg-navbar {
    min-height: var(--id-header-h-tablet);
  }
  .idg-logo {
    height: var(--id-header-h-tablet);
  }
  .idg-logo > img {
    width: var(--id-logo-w-tablet);
    max-height: calc(var(--id-header-h-tablet) - 14px);
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .navbar.idg-navbar,
  header.idg-navbar {
    min-height: var(--id-header-h-mobile);
  }
  .idg-logo {
    height: var(--id-header-h-mobile);
    padding: 6px 0;
  }
  .idg-logo > img {
    width: var(--id-logo-w-mobile);
    max-height: calc(var(--id-header-h-mobile) - 12px);
  }
}

/* Small phones (≤ 360px) */
@media (max-width: 360px) {
  .idg-logo > img {
    width: var(--id-logo-w-mobile-sm);
  }
}

/* ============================================================
   Fallback for browsers without aspect-ratio support
   (Safari < 15, IE — vanishingly rare in 2026 but cheap to keep)
   ============================================================ */
@supports not (aspect-ratio: 4 / 1) {
  .idg-logo > img {
    height: calc(var(--id-logo-w-desktop) / 4);
  }
  @media (min-width: 1280px) {
    .idg-logo > img { height: calc(var(--id-logo-w-desktop-lg) / 4); }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .idg-logo > img { height: calc(var(--id-logo-w-tablet) / 4); }
  }
  @media (max-width: 768px) {
    .idg-logo > img { height: calc(var(--id-logo-w-mobile) / 4); }
  }
  @media (max-width: 360px) {
    .idg-logo > img { height: calc(var(--id-logo-w-mobile-sm) / 4); }
  }
}

/* ============================================================
   Pre-login header (<header class="headDesktop idg-navbar">)
   The .headDesktop layout uses .headL flex children. Keep the
   logo aligned consistently with how the rest of the .headL row
   flows on small viewports.
   ============================================================ */
header.headDesktop.idg-navbar {
  flex-wrap: nowrap;
}
header.headDesktop.idg-navbar .headL {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Defensive resets — ONLY when the new .idg-logo class is present.
   These guarantee no legacy rule sneaks in a margin-top/height
   override that breaks the logo box. Scoped to .idg-logo so they
   cannot leak onto anything else in the page.
   ============================================================ */
.idg-logo > img {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* ============================================================
   Footer brand logo — same contract, slightly larger box than the
   header because footers have more vertical room.
   Markup:
     <a class="idg-footer-logo" href="…" title="…">
       <img src="{MAIN_LOGO_URL}" alt="…">
     </a>
   No inline width/height on the <img>. Social-media icons and
   IRDAI logos are NOT affected — only the brand wordmark.
   ============================================================ */

:root {
  --id-flogo-w-desktop-lg: 220px;  /* ≥ 1280px */
  --id-flogo-w-desktop:    200px;  /* 1025–1279px */
  --id-flogo-w-tablet:     180px;  /* 769–1024px */
  --id-flogo-w-mobile:     160px;  /* 361–768px */
  --id-flogo-w-mobile-sm:  140px;  /* ≤ 360px */
}

.idg-footer-logo {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
}
.idg-footer-logo:hover,
.idg-footer-logo:focus,
.idg-footer-logo:active {
  text-decoration: none;
  outline: none;
}

.idg-footer-logo > img {
  display: block;
  width: var(--id-flogo-w-desktop);
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--id-logo-aspect);
  object-fit: contain;
  object-position: left center;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

@media (min-width: 1280px) {
  .idg-footer-logo > img { width: var(--id-flogo-w-desktop-lg); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .idg-footer-logo > img { width: var(--id-flogo-w-tablet); }
}
@media (max-width: 768px) {
  .idg-footer-logo > img { width: var(--id-flogo-w-mobile); }
}
@media (max-width: 360px) {
  .idg-footer-logo > img { width: var(--id-flogo-w-mobile-sm); }
}

/* aspect-ratio fallback for legacy browsers */
@supports not (aspect-ratio: 4 / 1) {
  .idg-footer-logo > img {
    height: calc(var(--id-flogo-w-desktop) / 4);
  }
  @media (min-width: 1280px) {
    .idg-footer-logo > img { height: calc(var(--id-flogo-w-desktop-lg) / 4); }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .idg-footer-logo > img { height: calc(var(--id-flogo-w-tablet) / 4); }
  }
  @media (max-width: 768px) {
    .idg-footer-logo > img { height: calc(var(--id-flogo-w-mobile) / 4); }
  }
  @media (max-width: 360px) {
    .idg-footer-logo > img { height: calc(var(--id-flogo-w-mobile-sm) / 4); }
  }
}