/* ABSI site navigation (rolled out 2026-10-16)
   Desktop (769px+): four equal tabs on the gold rule; current section = ghost tint + section-colour border, open bottom.
   Phones/tablets (768px and below): hamburger at top right, level with the logo; menu holds the 4 sections
   + Privacy Policy, About Us, Contact Us. Tablets and phones (1024px and below): the left-column section menu becomes a selector.
   Paired with js/absi-mobile-nav.js. Earlier versions: _proposals/absi-mobile-nav.v*.css */
.absi-burger, .newnav-utility, .absi-subnav-btn { display: none; }

@media screen and (max-width: 768px) {
  .absi-header-col { position: relative; }
  #logo { max-width: calc(100% - 64px); }
  #logo a img { width: 100%; max-width: 260px; height: auto; }
  .absi-burger {
    display: flex; align-items: center; justify-content: center;
    position: absolute; right: .9375rem; top: 1rem;
    width: 48px; height: 48px; padding: 0; margin: 0;
    background: #fff; border: 2px solid #004e7d; border-radius: 4px; cursor: pointer; z-index: 20;
  }
  .absi-burger .bars, .absi-burger .bars:before, .absi-burger .bars:after {
    display: block; width: 22px; height: 2px; background: #004e7d; position: relative; content: "";
    transition: transform .15s ease;
  }
  .absi-burger .bars:before { position: absolute; top: -7px; }
  .absi-burger .bars:after  { position: absolute; top: 7px; }
  .absi-burger[aria-expanded="true"] .bars { background: transparent; }
  .absi-burger[aria-expanded="true"] .bars:before { top: 0; transform: rotate(45deg); }
  .absi-burger[aria-expanded="true"] .bars:after  { top: 0; transform: rotate(-45deg); }

  nav.newnav { display: none; }
  nav.newnav.is-open { display: block; margin: .25rem 0 0; border-top: 3px solid #004e7d; }
  nav.newnav.is-open a { display: block; padding: .9rem 1rem; border-radius: 0; border-bottom: 1px solid #e5e5e5; }
  nav.newnav.is-open .newnav-utility { display: block; background: #f4f6f8; }
  nav.newnav.is-open .newnav-utility a { font-weight: normal; font-size: 16px; color: #004e7d; }
  nav.newnav.is-open a[aria-current="page"] { box-shadow: inset 5px 0 0 var(--sec) !important; }
}

@media screen and (max-width: 1024px) {
  /* Tablets and phones (v11): the section menu becomes a selector above the content, which then runs full width */
  /* float:none needs !important to beat Foundation's .left/.right helpers (Safari tap fix, v12) */
  #intcontent .sidenav, #intcontent .sidenav ~ .columns { width: 100%; float: none !important; }
  #intcontent .sidenav ~ .columns { clear: both; }
  #intcontent .sidenav .absi-subnav-btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 56px; margin: 0 0 1.25rem; padding: .55rem 1rem; text-align: left;
    background: #fff; border: 2px solid var(--absi-sec, #004e7d); border-radius: 4px; cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
  }
  #intcontent .sidenav .absi-subnav-btn[aria-expanded="true"] { margin-bottom: .25rem; }
  .absi-subnav-label { display: flex; flex-direction: column; gap: .15rem; }
  .absi-subnav-section { font-size: 12px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; color: var(--absi-sec, #004e7d); }
  .absi-subnav-current { font-size: 16px; font-weight: bold; color: #004e7d; }
  .absi-chev { width: 10px; height: 10px; border-right: 2px solid #004e7d; border-bottom: 2px solid #004e7d; transform: rotate(45deg); margin-top: -4px; flex: none; }
  .absi-subnav-btn[aria-expanded="true"] .absi-chev { transform: rotate(-135deg); margin-top: 4px; }
  #intcontent .sidenav ul.absi-subnav { display: none; margin: 0 0 1rem; border: 1px solid #ddd; border-radius: 4px; }
  #intcontent .sidenav ul.absi-subnav.is-open { display: block; }
  #intcontent .sidenav ul.absi-subnav li { width: 100%; padding: 0; border-bottom: 1px solid #eee; }
  #intcontent .sidenav ul.absi-subnav li:last-child { border-bottom: 0; }
  #intcontent .sidenav ul.absi-subnav li a { padding: .75rem 1rem; }
  #intcontent .sidenav ul.absi-subnav li a[aria-current="page"] { font-weight: bold; box-shadow: inset 4px 0 0 var(--absi-sec, #004e7d); }
}

/* ===== Section navigation – desktop blocks + ghosted current section (demo v3, 2026-10-15) =====
   Each section keeps its hue: a light "ghost" tint for the current tab, a darker shade for its bar.
   Navy text on every tint is 7:1 or better (WCAG AAA); every bar is 3.8:1 or better against its tint. */
nav.newnav a[href="insurance_source.html"]    { --sec: #96358d; --ghost: #f0e3ef; --sat: #a6539e; }
nav.newnav a[href="401k_program.html"]        { --sec: #007fa1; --ghost: #dbf4fa; --sat: #26b9e1; }
nav.newnav a[href="curated_collection.html"]  { --sec: #00827f; --ghost: #dbf0ef; --sat: #26a4a1; }
nav.newnav a[href="association_careerhq.html"]{ --sec: #d0490c; --ghost: #fde9e0; --sat: #f47a43; }
nav.newnav a.active, nav.newnav a.retirement, nav.newnav a.curated, nav.newnav a.career {
  background: var(--ghost) !important; color: #004e7d !important; box-shadow: inset 0 -5px 0 var(--sec);
}
@media screen and (min-width: 769px) {
  /* Tabs stand on the gold rule (the 2px top border of .grey) and line up with the white content box.
     The gold rule runs unbroken under every tab; only the current tab recolours its own stretch of it. */
  nav.newnav {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    background: none; border: 0; margin: .8rem 0 0; position: relative; z-index: 2;
  }
  nav.newnav a {
    position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 60px; margin: 0; padding: .75rem 1rem;
    background: #fff; color: #004e7d;
    border: 2px solid #eee !important; border-bottom: 0 !important; border-radius: 6px 6px 0 0 !important;
    box-shadow: none !important;
    font-size: 18px; font-weight: bold; line-height: 1.25;
  }
  nav.newnav a:hover { background: var(--ghost); text-decoration: underline; }
  /* Current tab (v7): 2px top and side borders (same weight as the gold rule) in a slightly lightened section colour, no bottom edge.
     The tab runs down over the gold rule so it opens straight into the page below. */
  nav.newnav a.active, nav.newnav a.retirement, nav.newnav a.curated, nav.newnav a.career {
    border-color: var(--sat) !important;
  }
  nav.newnav a.active::after, nav.newnav a.retirement::after, nav.newnav a.curated::after, nav.newnav a.career::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 2px;
    background: linear-gradient(to right, var(--sat) 2px, var(--ghost) 2px, var(--ghost) calc(100% - 2px), var(--sat) calc(100% - 2px));
  }
}

/* Homepage: same evenly spread tabs, no visible borders (no section is current there) */
@media screen and (min-width: 769px) {
  nav.newnav.newnav-home a { border-color: transparent !important; }
  nav.newnav.newnav-home a:hover { background: #fff; }   /* no section tint on hover; underline stays */
}

/* Current page in the left-column section menu is always bold (Insurance/Curated also take their section colour) */
#intcontent .sidenav li a[aria-current="page"] { font-weight: bold; }