/* ===================== AFR Header + Mega (scoped, NO Superfish) ===================== */

/* ---------- Design tokens ---------- */
:root{
  --afr-blue:#133358;
  --afr-red:#c42124;
  --afr-dark-red:#811e20;

  --flyout-bg:#f5f6f7;
  --text-dark:#1d2f5e;

  --hdr-max:1200px;
  --hdr-pad:24px;

  --flyout-one-col:200px;
  --flyout-pad-x:16px;

  --l2w:360px; /* left rail */
  --l3w:360px; /* middle */
  --l4w:300px; /* right */
}

/* Kill legacy mobile sidebar if present */
.uou-block-11a{display:none !important}

/* ---------- Top utility bar ---------- */

/* Visually hidden but still available to screen readers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

/* Optional: make it visible when focused (for skip links, etc.) */
.sr-only-focusable:active,
.sr-only-focusable:focus{
  position:static !important;
  width:auto; height:auto;
  margin:0;
  overflow:visible;
  clip:auto; clip-path:none;
  white-space:normal;
}

.afr-header .topbar{
  background:#f4f4f4;
  border-bottom:1px solid #d0d0d0;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  height:75px;
  position:relative;
  z-index:2000;
  display: flex;
  padding-bottom: 5px;
}
.afr-header .topbar .container{
    padding:0 var(--hdr-pad);
    height:100%;
   max-width:var(--hdr-max);
   margin-inline:auto;
   display:flex;
  align-items:center;      /* vertical center */
  justify-content:flex-end;
  box-sizing:border-box;
}
.afr-header .utility{
  margin:0; padding:0; list-style:none;
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  margin:0; padding:0; list-style:none;
}
.afr-header .utility li{margin:0}
.afr-header .utility .new-links a,
.afr-header .utility .login a{
  color:#fff; text-decoration:none;
  font:600 13px/1.1 'Roboto','Open Sans',sans-serif;
  padding:10px 16px; margin:0px;
  background:var(--afr-red) !important; border-radius:8px;
  text-transform:uppercase;
}
.afr-header .utility .new-links a:hover,
.afr-header .utility .login a:hover{background:var(--afr-dark-red) !important}

/* ---------- Main header row (logo + primary) ---------- */
.afr-header .header-main{ background:#fff; display:flow-root; position:relative; z-index:1500; }

.afr-header .header-main .header-inner{
  position:relative; z-index:1000;
  display:flex; align-items:center; gap:0px;
  justify-content:flex-start;            /* base; overridden below */
  max-width:var(--hdr-max); margin-inline:auto; box-sizing:border-box; min-height:78px;

  /* single source of truth for row padding */
  padding:30px var(--hdr-pad);
}

.afr-header .logo img{width:142px; height:auto; display:block}


/* ========================================================================== */
/*                                DESKTOP (≥1025px)                           */
/* ========================================================================== */
@media (min-width:1025px){
  .afr-header .mainnav{
    position:static; width:auto; height:auto; transform:none;
    background:transparent; padding:0; box-shadow:none; overflow:visible;
  }
 

  /* Root row: L1 */
  .afr-header .nav-root{
    margin:0; padding:0; list-style:none;
    display:flex; align-items:center; justify-content:flex-end; gap:40px; line-height:1;
  }
  .afr-header .nav-root > .nav-item{margin:0}

  .afr-header .nav-root > .nav-item > .nav-label{
    display:block; padding:10px 16px;
    font:600 15px/30px 'Roboto','Open Sans',sans-serif;
    text-transform:uppercase; text-decoration:none; color:var(--text-dark);
    border-radius:6px;
  }
  .afr-header .nav-root > .nav-item > .nav-label:hover,
  .afr-header .nav-root > .nav-item.is-active > .nav-label{
    background:var(--afr-red); color:#fff; text-decoration:none;
  }

  /* Desktop mega flyout host */
  .afr-header #mega-flyout{
    position:absolute; left:0; right:0; top:100%; z-index:2000; display:none;
  }

  /* Mega shell + layout */
  .afr-header #mega-flyout .mega4-flyout{
    position:absolute; left:50%; transform:translateX(-50%); margin:0;
    width:auto; background:var(--flyout-bg);
    box-shadow:0 12px 30px rgba(0,0,0,.1);
    padding:20px var(--flyout-pad-x);
    border-top:3px solid var(--afr-red);
    overflow:visible; box-sizing:border-box;
  }
  .afr-header #mega-flyout .mega4-flyout.one-cols{
    width:220px;
    max-width:220px;
  }
  .afr-header #mega-flyout .mega4-flyout.two-cols{
   /* l2w + desired L3 min + grid gap(10px) + horizontal padding */
  min-width: calc(var(--l2w) + 360px + 10px + 2 * var(--flyout-pad-x));
  max-width: min(1000px, 95vw); /* keep your cap */
}

.afr-header #mega-flyout .mega4-arrow{
  position:absolute; top:-12px; width:0; height:0; pointer-events:none; z-index:2;
  border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:12px solid var(--afr-red);
}

.afr-header #mega-flyout .mega4-cols{ display:grid; gap:10px; align-items:stretch; }
.afr-header #mega-flyout .mega4-flyout.one-cols  .mega4-cols{ grid-template-columns: var(--flyout-one-col); }
.afr-header #mega-flyout .mega4-flyout.two-cols .mega4-cols{ grid-template-columns: var(--l2w) minmax(360px, 1fr);} /* L2 fixed 360; L3 min bumped */
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-cols{ grid-template-columns: var(--l2w) minmax(260px, var(--l3w)) var(--l4w); }
.afr-header #mega-flyout .mega4-cols>*{ min-width:0; }

.afr-header #mega-flyout .mega4-l2{ background:var(--flyout-bg); padding:0px; } /* no column border */
.afr-header #mega-flyout .mega4-l3,
.afr-header #mega-flyout .mega4-l4{ background:var(--flyout-bg); }

/* L2 buttons */
.afr-header #mega-flyout .mega4-l2btn{
  display:block; width:100%; text-align:left; padding:10px 12px; margin: 0px 0px 10px 0px; background:none; border:0;
  color:#222; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:16px; font-weight:600; line-height:1.35; text-transform:uppercase;
  position:relative; /* anchor for ::after */
}
.afr-header #mega-flyout .mega4-l2btn:hover,
.afr-header #mega-flyout .mega4-l2btn:focus-visible,
.afr-header #mega-flyout .mega4-l2btn.is-active{
  color:var(--afr-red); font-weight:700; outline:none; text-decoration:none;
}

/* Per-row divider only for L2 items that actually have L3 */
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2btn.has-l3,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2btn.has-l3,
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2item.has-l3 > .mega4-l2btn,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2item.has-l3 > .mega4-l2btn{
  box-sizing: border-box;            /* keep width stable */
  border-right: 2px solid var(--afr-red);
  padding-right: 16px;               /* breathing room from the line */
}

/* Persist row divider on any L2 that has children, regardless of l3-empty/hover elsewhere */
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2item.has-l3 > .mega4-l2btn,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2item.has-l3 > .mega4-l2btn{
  border-right: 2px solid var(--afr-red) !important;
  padding-right: 16px; /* keep breathing room from the line */
}

/* Optional: keep your darker hover without dropping persistence */
.afr-header #mega-flyout .mega4-flyout .mega4-l2item.has-l3 > .mega4-l2btn:hover,
.afr-header #mega-flyout .mega4-flyout .mega4-l2item.has-l3 > .mega4-l2btn:focus-visible{
  border-right-color: var(--afr-dark-red) !important;
}


/* Optional: darker on hover/focus */
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2btn.has-l3:hover,
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2item.has-l3 > .mega4-l2btn:hover,
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2btn.has-l3:focus-visible,
.afr-header #mega-flyout .mega4-flyout.two-cols  .mega4-l2item.has-l3 > .mega4-l2btn:focus-visible,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2btn.has-l3:hover,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2item.has-l3 > .mega4-l2btn:hover,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2btn.has-l3:focus-visible,
.afr-header #mega-flyout .mega4-flyout.three-cols .mega4-l2item.has-l3 > .mega4-l2btn:focus-visible{
  border-right-color: var(--afr-dark-red);
}

/* L3 + L4 content */
.afr-header #mega-flyout .mega4-l3 .mega4-l3card,
.afr-header #mega-flyout .mega4-l4 .mega4-l4link{
  display:block; padding:4px 12px 8px 12px; margin: 0px 0px 10px 0px; color:#222; text-decoration:none;
}
.afr-header #mega-flyout .mega4-l3 .mega4-l3card:hover,
.afr-header #mega-flyout .mega4-l3 .mega4-l3card:focus-visible,
.afr-header #mega-flyout .mega4-l4 .mega4-l4link:hover,
.afr-header #mega-flyout .mega4-l4 .mega4-l4link:focus-visible{
  color:var(--afr-red); background:var(--flyout-bg); font-weight:700; text-decoration:none;
}
.afr-header #mega-flyout .mega4-l4list{ list-style:none; margin:0; padding:0 0px; }

/* Empty-state helpers */
.afr-header #mega-flyout .mega4-flyout.two-cols.l3-empty  .mega4-l3{ background:var(--flyout-bg); }
.afr-header #mega-flyout .mega4-flyout.three-cols.l4-empty .mega4-l4{ background:var(--flyout-bg); }

/* L3 chevron flag */
.afr-header #mega-flyout .mega4-l3 .mega4-l3card{ position:relative; padding-right:28px; }
.afr-header #mega-flyout .mega4-l3 .mega4-l3card.has-l4::after{
  content:""; position:absolute; right:10px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--afr-red); border-top:2px solid var(--afr-red);
  transform:translateY(-50%) rotate(45deg); opacity:.9;
}
.afr-header #mega-flyout .mega4-l3 .mega4-l3card.has-l4:hover::after,
.afr-header #mega-flyout .mega4-l3 .mega4-l3card.has-l4:focus-visible::after{
  right:8px; border-color:var(--afr-red);
}
}

/* ========================================================================== */
/*                             HAMBURGER (shared)                             */
/* ========================================================================== */

/* Hidden by default; we reveal on mobile only */
.afr-header .afr-hamburger{
  display:none;
  appearance:none; background:transparent; border:0;
  padding:0; margin:0; line-height:0; font-size:0;
  width:44px; height:44px; align-items:center; justify-content:center;
  position:relative; z-index:10050; cursor:pointer; pointer-events: auto;
}
/* simple three bars */
.afr-header .afr-hamburger .burger-lines{
  position:relative; display:block; width:22px; height:2px; background:#0f3353; border-radius:2px;
  box-shadow:0 -7px 0 0 #0f3353, 0 7px 0 0 #0f3353;
}

/* ========================================================================== */
/*                                MOBILE (≤1024px)                            */
/* ========================================================================== */

@media (max-width:1024px){
  /* utility bar height (75px) + 1px border */
  :root { --topbar-h: 76px; }

  /* logo row left-aligned on mobile */
  .afr-header .header-main .header-inner{
    max-width:none; width:100%; padding-inline:var(--hdr-pad);
    justify-content:flex-start;
  }

  /* hamburger in the utility bar (right side) */
  .afr-header .topbar{ position:relative; }
  .afr-header .topbar .afr-hamburger{
    display:inline-flex;
    position:absolute; top:50%; right:12px; transform:translateY(-50%);
    margin:0; z-index:2001;
  }

  /* hide the topbar utilities; we clone them into the drawer */
  .afr-header .utility{ display:none; }

  /* off-canvas drawer under the utility bar */
  .afr-header .mobile-drawer{
     display:block;          
    visibility:visible;      
    pointer-events:auto;     
    position:fixed;
    top:var(--topbar-h); right:0; bottom:0;
    width:min(88vw, 420px);
    background:#fff;
    box-shadow:-12px 0 24px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .28s ease;
    z-index:10000 !important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .menu-open .afr-header .mobile-drawer{ transform:translateX(0); }
  html.menu-open body{ overflow:hidden; }

  /* accordion list */
  .afr-header .mobile-drawer .nav-root{
    margin:0; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:0;
  }
  .afr-header .nav-root > .nav-item > .nav-label{
    display:block; padding:14px 12px;
    border-bottom:1px solid #eef1f4;
    font:600 16px/24px 'Roboto','Open Sans',sans-serif;
    color:var(--text-dark); text-decoration:none; border-radius:0;
    transition:background-color .2s ease, color .2s ease; /* UPDATED: smooth state */
  }

  /* submenu visibility */
  .afr-header .mobile-drawer .nav-sub[hidden]{ display:none !important; }
  .afr-header .mobile-drawer .nav-item.open > .nav-sub{ display:block; }
  .afr-header .mobile-drawer .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:20px; }
  .afr-header .mobile-drawer .nav-item.has-children > .nav-label{ position:relative; padding-right:28px; }
  .afr-header .mobile-drawer .nav-item.open.has-children > .nav-label::after{ transform:translateY(-50%) rotate(225deg); }


  /* indentation for nested levels */
  .afr-header .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:20px; }
  .afr-header .nav-item > .nav-sub > .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:32px; }

  /* chevrons (default color = text-dark) */
  .afr-header .nav-item.has-children > .nav-label{ position:relative; padding-right:28px; }
  .afr-header .nav-item.has-children > .nav-label::after{
    content:""; position:absolute; right:12px; top:50%;
    width:8px; height:8px;
    border-right:2px solid var(--text-dark);
    border-bottom:2px solid var(--text-dark);
    transform:translateY(-50%) rotate(45deg); opacity:.7;
    transition:border-color .2s ease, opacity .2s ease, transform .2s ease;
  }
  .afr-header .nav-item.open.has-children > .nav-label::after{
    transform:translateY(-50%) rotate(225deg);
  }

  /* ===================== */
  /* L1 STATE COLORS (NEW) */
  /* ===================== */
  /* Hover/focus/active/open/current => red bg + white text */
  .afr-header .nav-root > .nav-item > .nav-label:hover,
  .afr-header .nav-root > .nav-item > .nav-label:focus-visible,
  .afr-header .nav-root > .nav-item > .nav-label:active,
  .afr-header .nav-root > .nav-item.open > .nav-label,
  .afr-header .nav-root > .nav-item.active > .nav-label,
  .afr-header .nav-root > .nav-item > .nav-label[aria-current="page"]{
    background:var(--afr-red);
    color:#fff;
    text-decoration:none;
  }
  /* Chevron turns white in the same states */
  .afr-header .nav-root > .nav-item.has-children > .nav-label:hover::after,
  .afr-header .nav-root > .nav-item.has-children > .nav-label:focus-visible::after,
  .afr-header .nav-root > .nav-item.has-children > .nav-label:active::after,
  .afr-header .nav-root > .nav-item.open.has-children > .nav-label::after,
  .afr-header .nav-root > .nav-item.active.has-children > .nav-label::after,
  .afr-header .nav-root > .nav-item.has-children > .nav-label[aria-current="page"]::after{
    border-right-color:#fff;
    border-bottom-color:#fff;
    opacity:1;
  }

  /* utilities inside drawer: full width buttons right under accordion */
  .afr-header .mobile-drawer .drawer-utilities{
    border-top:none;              /* remove divider */
    margin-top:12px;              /* space from accordion */
    padding:12px 16px 20px;
  }
  .afr-header .mobile-drawer .drawer-utilities .utility{
    display:flex !important; flex-direction:column; align-items:stretch;
    gap:10px; margin:0; padding:0; list-style:none;
  }
  .afr-header .mobile-drawer .drawer-utilities .utility .new-links a,
  .afr-header .mobile-drawer .drawer-utilities .utility .login a{
    display:block;
    width:100%;                   /* full width */
    max-width:none;
    margin:0;
    box-sizing:border-box;
    /* ensure no theme border sneaks in */
    border:none !important;
    font:600 13px/1.1 'Roboto','Open Sans',sans-serif;
    text-align: center;
  }

  /* kill list styling on nested ULs */
  .afr-header .mobile-drawer .nav-sub{
    margin:0; padding:0; list-style:none;
    border-top:1px solid #eef1f4; /* separator from parent row (optional) */
  }
  .afr-header .mobile-drawer .nav-sub li{ list-style:none; }
  .afr-header .mobile-drawer .nav-sub li::marker{ content:''; }
  .afr-header .mobile-drawer .nav-sub li::before{ content:none !important; } /* nuke theme bullets */

  /* give every nested label a “cell” */
  .afr-header .mobile-drawer .nav-sub .nav-item > .nav-label{
    display:block;
    padding:14px 12px;
    border-bottom:1px solid #eef1f4;
    background:#fff;
    color:var(--text-dark);
    text-decoration:none;
    transition:color .2s ease, background-color .2s ease; /* UPDATED */
  }

  /* ========================================= */
  /* L2/L3 STATE COLORS (NEW – text turns red) */
  /* ========================================= */
  /* Hover/focus/active/current => text afr red; background stays white */
  .afr-header .mobile-drawer .nav-sub .nav-item > .nav-label:hover,
  .afr-header .mobile-drawer .nav-sub .nav-item > .nav-label:focus-visible,
  .afr-header .mobile-drawer .nav-sub .nav-item > .nav-label:active,
  .afr-header .mobile-drawer .nav-sub .nav-item.active > .nav-label,
  .afr-header .mobile-drawer .nav-sub .nav-item > .nav-label[aria-current="page"]{
    color:var(--afr-red);
    text-decoration:none;
  }

  /* Nested chevrons follow text color on those states */
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label:hover::after,
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label:focus-visible::after,
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label:active::after,
  .afr-header .mobile-drawer .nav-sub .nav-item.active.has-children > .nav-label::after,
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label[aria-current="page"]::after{
    border-right-color:var(--afr-red);
    border-bottom-color:var(--afr-red);
    opacity:.8;
  }

  /* keep indentation by depth */
  .afr-header .mobile-drawer .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:20px; }
  .afr-header .mobile-drawer .nav-item > .nav-sub > .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:32px; }
  .afr-header .mobile-drawer .nav-item > .nav-sub > .nav-item > .nav-sub > .nav-item > .nav-sub > .nav-item > .nav-label{ padding-left:44px; }

  /* chevrons for nested parents (default state stays text-dark) */
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label{ position:relative; padding-right:28px; }
  .afr-header .mobile-drawer .nav-sub .nav-item.has-children > .nav-label::after{
    content:""; position:absolute; right:12px; top:50%;
    width:8px; height:8px;
    border-right:2px solid var(--text-dark);
    border-bottom:2px solid var(--text-dark);
    transform:translateY(-50%) rotate(45deg); opacity:.6;
    transition:border-color .2s ease, opacity .2s ease, transform .2s ease;
  }
  .afr-header .mobile-drawer .nav-sub .nav-item.open.has-children > .nav-label::after{
    transform:translateY(-50%) rotate(225deg);
  }

  /* scrim disabled per current spec */
  .afr-header .nav-scrim{ display:none !important; opacity:0 !important; pointer-events:none !important; }
}

/* ========================================================================== */
/*                           BEHAVIORAL GUARD RAILS                           */
/* ========================================================================== */

/* ---- DESKTOP FLYOUT VISIBILITY ---- */
/* Host is off by default… */
.afr-header #mega-flyout{
  display:none;
  visibility:hidden;
  pointer-events:none;
}
/* …and shown when JS adds html.mega-open (or sets inline display) */
html.mega-open .afr-header #mega-flyout{
  display:block;
  visibility:visible;
  pointer-events:auto;
}

/* IMPORTANT: do NOT blanket-hide the inner shell */
.afr-header #mega-flyout .mega4-flyout{ display:block; }

/* Keep flyout suppressed when the mobile drawer is open */
.menu-open .afr-header #mega-flyout{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Base: never show drawer utilities on desktop by default */
.afr-header .drawer-utilities{
  display:none;
}

/* Mobile safety: never show desktop flyout on ≤1024px */
@media (max-width:1024px){
  .afr-header #mega-flyout{ display:none !important; }
  .afr-header .mobile-drawer .drawer-utilities{
    display:block;
  }
}

@media (min-width:1025px){
 
  .afr-header .mainnav{ margin-left:auto; } /* pushes L1 nav to the far right */
  .afr-header .nav-root{
    gap: clamp(18px, 4vw - 20px, 40px);
  }
  .afr-header .nav-root > .nav-item > .nav-label{
    padding-inline: clamp(10px, 3.5vw - 30px, 16px);
    white-space: nowrap;
  }
  
}