/* ISO TOOLKITS — HEADER V16 / GRID-ALIGNED RESPONSIVE TOPBAR | 2026-11-09
   Scope: Top utility bar and responsive alignment of the existing main header.
   Requires site-core.css, site-components.css, font-awesome.css, information.css.
   All ISO Toolkits, Industry Bundles, Knowledge Hub, Success Stories and About
   mega-menu source data and links remain in the original HTML/shared-menus.js.

   Reference colors (sampled from the supplied Meirc screenshot):
   --iso-top-bg:    #2F6BAC (matches existing V11 brand bar closely)
   --iso-top-hover: #153076 (sampled dark-blue hover from reference image)
   --iso-top-text:  #FFFFFF
*/

.page-header.iso-site-header {
  --iso-top-bg:#2F6BAC;
  --iso-top-hover:#153076;
  --iso-top-text:#FFFFFF;
  /* Same content-grid widths as .grid-row and .it-page-banner */
  --iso-content-grid-width:1170px;
  --iso-content-grid-gutter:16px;
  box-shadow:0 3px 14px rgba(6,47,73,.06);
}

/* V16: prevent overall width calculations from exceeding the viewport. */
.page-header.iso-site-header .iso-utility-topbar,
.page-header.iso-site-header .iso-utility-topbar__inner,
.page-header.iso-site-header .iso-utility-topbar__links {
  box-sizing:border-box;
}
.page-header.iso-site-header .iso-utility-topbar__links>a>span {min-width:0;}

/* A. TOP UTILITY HEADER */
.page-header.iso-site-header .iso-utility-topbar {
  display:block;
  width:100%;
  background:var(--iso-top-bg);
  color:var(--iso-top-text);
  border:0;
  font-family:Lato,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page-header.iso-site-header .iso-utility-topbar__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:var(--iso-content-grid-width);
  max-width:calc(100% - var(--iso-content-grid-gutter));
  min-width:0;
  min-height:34px;
  margin-inline:auto;
}
.page-header.iso-site-header .iso-utility-topbar__tagline {
  flex:1 1 auto;
  min-width:0;
  margin:0;
  color:var(--iso-top-text);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.page-header.iso-site-header .iso-utility-topbar__links {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  margin:0;
  min-width:0;
}
.page-header.iso-site-header .iso-utility-topbar__links>a,
.page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free,
.page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email {
  box-sizing:border-box;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:28px;
  margin:0;
  padding:0 12px;
  background:transparent;
  color:var(--iso-top-text);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
  text-decoration:none;
  border:0;
  border-radius:4px;
  box-shadow:none;
  transition:background-color .16s ease,color .16s ease;
}
/* Each Font Awesome icon must remain visible on both blue backgrounds. */
.page-header.iso-site-header .iso-utility-topbar__links>a .fa,
.page-header.iso-site-header .iso-utility-topbar__links>a:hover .fa,
.page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible .fa {
  display:inline-block;
  flex:0 0 15px;
  width:15px;
  font-size:13px;
  font-style:normal;
  line-height:1;
  text-align:center;
  color:#fff !important;
  opacity:1;
  visibility:visible;
}
.page-header.iso-site-header .iso-utility-topbar__links>a:hover,
.page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible,
.page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free:hover,
.page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free:focus-visible {
  background:var(--iso-top-hover);
  color:#fff !important;
  text-decoration:none;
  box-shadow:none;
}
.page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible {
  outline:2px solid #fff;
  outline-offset:-3px;
}
.page-header.iso-site-header .iso-utility-topbar__links>a:active {
  background:var(--iso-top-hover);
  color:#fff;
}

/* B. MAIN HEADER — logo-left, menu-right, original submenu design */
@media (min-width:1191px) {
  .page-header.iso-site-header .iso-header-inner {
    width:calc(100% - 40px);
    max-width:1500px;
    min-height:78px;
    gap:12px;
  }
  .page-header.iso-site-header .logo.iso-header-logo {
    flex:0 0 255px;
    max-width:255px;
  }
  .page-header.iso-site-header .logo.iso-header-logo img {max-height:72px;}
  .page-header.iso-site-header .iso-header-nav {
    flex:1 1 auto;
    justify-content:flex-end;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar {
    width:100%;
    justify-content:flex-end;
    column-gap:4px;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    min-height:78px;
    padding-left:8px;
    padding-right:8px;
    font-size:14px;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavHome>a {
    min-height:78px;
    width:44px;
  }
}
@media (min-width:1191px) and (max-width:1350px) {
  .page-header.iso-site-header .iso-header-inner {width:calc(100% - 28px);gap:8px;}
  .page-header.iso-site-header .logo.iso-header-logo {flex-basis:225px;max-width:225px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar {column-gap:2px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    padding-left:7px;
    padding-right:7px;
    font-size:13px;
  }
}
@media (min-width:1191px) and (max-width:1230px) {
  .page-header.iso-site-header .iso-header-inner {width:calc(100% - 30px);gap:8px;}
  .page-header.iso-site-header .logo.iso-header-logo {flex-basis:170px;max-width:170px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar {column-gap:4px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    padding-left:8px;
    padding-right:8px;
    font-size:12.5px;
  }
}

/* One source of truth for utility grid width at every CSS viewport size.
   A browser zoom change alters the CSS viewport and activates these breakpoints.
   Do not set utility width to viewport-40px: that ignores site content columns. */
@media (max-width:1190px){
  .page-header.iso-site-header {
    --iso-content-grid-width:940px;
    --iso-content-grid-gutter:24px;
  }
}
@media (max-width:980px){
  .page-header.iso-site-header { --iso-content-grid-width:738px; }
}

/* C. TABLET / DESKTOP ZOOM — fluid, single-row utility bar.
   At 110%–175% browser zoom, the CSS viewport may fall between 768–1190px.
   Do not force both children to flex-basis:100% (that previously produced two rows).
   Instead preserve the fixed-size useful links and ellipsize the left tagline. */
@media (min-width:768px) and (max-width:1190px) {
  .page-header.iso-site-header .iso-utility-topbar__inner {
    min-height:34px;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    gap:clamp(6px,1vw,12px);
    padding:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__tagline {
    flex:1 1 0;
    min-width:0;
    max-width:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:clamp(10px,.93vw,11.5px);
    line-height:1.25;
  }
  .page-header.iso-site-header .iso-utility-topbar__links {
    display:flex;
    flex:0 0 auto;
    min-width:0;
    flex-wrap:nowrap;
    gap:0;
    justify-content:flex-end;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a,
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free,
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email {
    flex:0 0 auto;
    min-height:28px;
    padding-inline:clamp(5px,.67vw,8px);
    font-size:clamp(10.5px,.95vw,11.3px);
    gap:4px;
    white-space:nowrap;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a .fa {
    flex-basis:13px;
    width:13px;
    font-size:12px;
  }
  .page-header.iso-site-header .iso-header-inner {gap:12px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {padding-inline:11px;}
}
/* D. MOBILE — compact premium utility navigation (V17, 2026-11-10).
   All five utility links remain present. The 4 primary destinations occupy
   a single touch-friendly row. E-mail is given a centered support pill. */
@media (max-width:767px) {
  .page-header.iso-site-header .iso-utility-topbar {
    background:linear-gradient(110deg,#245c99 0%,#2f6bac 100%);
    border-bottom:1px solid rgba(255,255,255,.20);
  }
  .page-header.iso-site-header .iso-utility-topbar__inner {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:calc(100% - 24px);
    max-width:520px;
    min-height:0;
    margin-inline:auto;
    padding:8px 0 7px;
    gap:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__tagline {
    flex:0 0 auto;
    padding:0 4px 7px;
    margin:0;
    font-size:10.8px;
    font-weight:700;
    letter-spacing:.008em;
    line-height:1.35;
    text-align:center;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .page-header.iso-site-header .iso-utility-topbar__links {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:0;
    align-items:stretch;
    justify-content:stretch;
    width:100%;
    margin:0;
    padding:5px 0 0;
    border-top:1px solid rgba(255,255,255,.22);
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a,
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free {
    display:flex;
    flex-direction:column;
    gap:3px;
    width:auto;
    min-width:0;
    min-height:45px;
    margin:0;
    padding:6px 2px 3px;
    align-items:center;
    justify-content:flex-start;
    border:0;
    border-radius:5px;
    color:#fff;
    font-size:10.6px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) + a:not(.iso-utility-topbar__email) {
    border-left:1px solid rgba(255,255,255,.20);
    border-radius:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email {
    grid-column:1 / -1;
    grid-row:1;
    place-self:center;
    display:inline-flex;
    flex-direction:row;
    min-height:26px;
    min-width:0;
    width:auto;
    max-width:100%;
    margin:0 auto 5px;
    padding:4px 14px;
    gap:7px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:99px;
    background:rgba(8,44,80,.16);
    font-size:11.5px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
    overflow-wrap:normal;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) {grid-row:2;}
  .page-header.iso-site-header .iso-utility-topbar__links>a .fa,
  .page-header.iso-site-header .iso-utility-topbar__links>a:hover .fa,
  .page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible .fa {
    display:inline-block;
    flex:0 0 16px;
    width:16px;
    height:16px;
    font-size:15px;
    line-height:16px;
    text-align:center;
    color:#fff !important;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email .fa {
    width:14px;
    height:14px;
    flex-basis:14px;
    font-size:13px;
    line-height:14px;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:hover,
  .page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible {
    background:rgba(5,39,82,.37);
    color:#fff;
  }
  .page-header.iso-site-header .iso-header-inner {gap:8px;}
}
@media (max-width:359px) {
  .page-header.iso-site-header .iso-utility-topbar__inner {width:calc(100% - 18px);padding-top:7px;}
  .page-header.iso-site-header .iso-utility-topbar__tagline {font-size:10.3px;}
  .page-header.iso-site-header .iso-utility-topbar__links>a,
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__free {
    font-size:10px;
    padding-inline:1px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .page-header.iso-site-header .iso-utility-topbar__links>a {transition:none;}
}


/* ===========================================================================
   V14 — SHARED CONTENT-GRID ALIGNMENT / MEGA MENU ANCHOR FIX

   Root cause: prior versions expanded .iso-header-inner to 1500px, while the
   page's .grid-row retains 1170 / 940 / 738px desktop/tablet widths.
   ISO Toolkits, Industry Bundles and Knowledge Hub previously positioned
   their panels against different ancestors, using left negative offsets,
   right:0 or hard-coded widths. They now share the .iso-header-inner anchor.

   Scope is exclusively Header; no HTML or JavaScript changes required.
   =========================================================================== */

/* The existing header is already positioned relative; make it explicit.
   Do not change the local positioning of Success Stories / About dropdowns. */
.page-header.iso-site-header .iso-header-inner {
  position:relative !important;
  overflow:visible !important;
}

@media (min-width:1191px) {
  .page-header.iso-site-header .iso-header-inner {
    width:1170px !important;
    max-width:calc(100% - 16px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    gap:12px;
  }
  .page-header.iso-site-header .logo.iso-header-logo {
    flex:0 0 210px;
    max-width:210px;
  }
  .page-header.iso-site-header .iso-header-nav {
    min-width:0;
    flex:1 1 auto;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar {
    width:100%;
    column-gap:3px;
    justify-content:flex-end;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    padding-left:7px;
    padding-right:7px;
    font-size:13.5px;
  }
}
@media (min-width:1191px) and (max-width:1240px){
  .page-header.iso-site-header .logo.iso-header-logo {
    flex-basis:188px;
    max-width:188px;
  }
  .page-header.iso-site-header .iso-header-inner {gap:7px;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar {column-gap:0;}
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    padding-left:5px;
    padding-right:5px;
    font-size:12.5px;
  }
}
/* Keep the site's existing 940px content-grid breakpoint aligned. */
@media (min-width:981px) and (max-width:1190px){
  .page-header.iso-site-header .iso-header-inner {
    width:940px !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    min-height:82px;
    gap:8px;
  }
  .page-header.iso-site-header .logo.iso-header-logo {
    flex:0 0 165px;
    max-width:165px;
  }
  .page-header.iso-site-header .iso-header-nav {
    min-width:0;
    flex:1 1 auto;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar {
    width:100%;
    justify-content:flex-end;
    column-gap:0;
  }
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li>a {
    min-height:82px;
    padding-left:5px;
    padding-right:5px;
    font-size:12px;
  }
}
/* Preserve original 738px stacked-tablet and <=767px mobile layout. */
@media (min-width:768px) and (max-width:980px){
  .page-header.iso-site-header .iso-header-inner {
    width:738px !important;
    max-width:calc(100% - 24px) !important;
    margin-inline:auto !important;
  }
}

/* Let all three large panels use the same positioned parent (.iso-header-inner).
   The panel markup is nested inside an LI, so LI must not become an anchor. */
@media (min-width:768px){
  .page-header.iso-site-header .iso-header-nav,
  .page-header.iso-site-header .iso-header-nav .megaNavBar,
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li.megaNavAllStandards,
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li.industryNavItem,
  .page-header.iso-site-header .iso-header-nav .megaNavBar>li.knowledgeHubNavItem {
    position:static !important;
  }
  .page-header.iso-site-header .megaNavItem.megaNavAllStandards>.megaNavPanel,
  .page-header.iso-site-header .iso-header-nav .industryNavItem>.industryMega,
  .page-header.iso-site-header .iso-header-nav .knowledgeHubNavItem>.knowledgeHubMega {
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}

/* ========================================================================
   PUBLISH FINAL V2 | 2026-11-10 | Mobile navigation visual QA
   This progressive override uses only existing header markup and icon fonts.
   Desktop / tablet >=768px unaffected; no extra CSS dependencies required.
   ======================================================================== */
@media screen and (max-width:767px) {
  /* Mobile prioritizes task navigation; desktop retains the full brand tagline.
     The logo below supplies the recognizable brand cue on small phones. */
  .page-header.iso-site-header .iso-utility-topbar__tagline {
    display:none !important;
  }
  .page-header.iso-site-header .iso-utility-topbar {
    background:linear-gradient(110deg,#245e9c 0%,#2f6bac 100%);
    border-bottom:1px solid #d2e5f3;
  }
  .page-header.iso-site-header .iso-utility-topbar__inner {
    width:calc(100% - 20px);
    max-width:520px;
    padding:6px 0 5px;
    margin:0 auto;
    gap:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__links {
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:38px 46px;
    padding:0;
    border-top:0;
    gap:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email {
    grid-column:1 / -1;
    grid-row:1;
    place-self:center;
    min-height:34px;
    max-width:100%;
    margin:0 auto 2px;
    padding:5px 13px;
    gap:7px;
    background:rgba(9,43,79,.18);
    border:1px solid rgba(255,255,255,.30);
    border-radius:99px;
    box-shadow:0 1px 2px rgba(7,35,69,.08);
    font-size:11.5px;
    line-height:1.25;
    letter-spacing:.005em;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) {
    grid-row:2;
    min-width:0;
    min-height:46px;
    justify-content:center;
    align-items:center;
    padding:5px 2px 4px;
    gap:4px;
    border-radius:4px;
    font-size:10.8px;
    font-weight:700;
    line-height:1.18;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) + a:not(.iso-utility-topbar__email) {
    border-left:1px solid rgba(255,255,255,.24);
    border-radius:0;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) .fa {
    font-size:15px;
    line-height:16px;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:hover,
  .page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible {
    color:#fff !important;
    background:rgba(2,36,77,.25);
  }
  /* Restrict this polish to the logo row and mobile menu shell. */
  .page-header.iso-site-header {
    padding-bottom:5px !important;
  }
  .page-header.iso-site-header .iso-header-inner {
    padding-top:7px !important;
    padding-bottom:4px !important;
  }
  .page-header.iso-site-header .logo.iso-header-logo img {
    max-height:53px !important;
    max-width:185px !important;
  }
  .page-header.iso-site-header .mobile-main-nav {
    margin-top:3px !important;
  }
  .page-header.iso-site-header .mobile-main-nav>a.opener,
  .page-header.iso-site-header .mobile-main-nav>i {
    min-height:44px !important;
    height:44px !important;
    line-height:44px !important;
  }
  .page-header.iso-site-header .mobile-main-nav>i {
    width:44px !important;
    font-size:20px !important;
    border-left:1px solid rgba(255,255,255,.42) !important;
  }
  .page-header.iso-site-header .mobile-main-nav>a.opener {
    font-size:14px !important;
    padding-left:15px !important;
  }
  .page-header.iso-site-header .mobile-main-nav>a.opener:focus-visible,
  .page-header.iso-site-header .iso-utility-topbar__links>a:focus-visible {
    outline:2px solid #ffd43b !important;
    outline-offset:-3px;
  }
}
@media screen and (max-width:359px) {
  .page-header.iso-site-header .iso-utility-topbar__inner {
    width:calc(100% - 14px);
    padding-top:5px;
    padding-bottom:4px;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a:not(.iso-utility-topbar__email) {
    font-size:10px;
    padding-inline:1px;
  }
  .page-header.iso-site-header .iso-utility-topbar__links>a.iso-utility-topbar__email {
    font-size:11px;
  }
}


/* ===============================================================
   PUBLISH FINAL V3 | Mobile: LOGO + MAIN NAVIGATION ONLY
   The support-email / Articles / FAQs / Purchase Guide / Download
   utility row is intentionally hidden on mobile. The desktop header
   and the mobile primary navigation remain untouched.
   =============================================================== */
@media screen and (max-width:767px) {
  .page-header.iso-site-header .iso-utility-topbar {
    display:none !important;
  }
}