/*
 * Universal site menu (Design 3, approved 2026-10-28), loaded on every page the new menu is switched on for.
 * Every rule is scoped by #iqm-nav (computer) or #iqm-acc (phone), the ids the plugin gives the two <nav>s, so the
 * page's own header styles cannot reach inside the menu. The old preview rules that only worked on the home page
 * (html body ...) now start with "html body" so they hold on every page.
 */
/* Format F header menu, clean design preview 2026-10-27 (NOT live).
   One panel style for every dropdown: white card, small grey column labels, serif links,
   one bottom bar with a single "All ... →" link. Colour: navy text, one orange arrow on hover.
   Scoped by #iqm-nav / #iqm-acc because the home page resets every element
   (html body * {padding:0}) and styles .menu a / .msheet-links a. */

/* ---------- bar ---------- */
html body header.site .navpill { position: relative; }
html body nav.menu#iqm-nav { gap: 26px; align-items: center; }
#iqm-nav .iqm-dd { position: static; }
#iqm-nav .iqm-dt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 1px; font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: #3E4E63; white-space: nowrap; transition: color .2s; }
#iqm-nav .iqm-dt svg { width: 10px; height: 10px; opacity: .6; transition: transform .25s, opacity .25s; }
#iqm-nav .iqm-dt::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 3px; border-radius: 4px;
  background: var(--gold-grad); transition: right .24s cubic-bezier(.2,.7,.3,1); }
#iqm-nav .iqm-dd:hover .iqm-dt, #iqm-nav .iqm-dd.is-open .iqm-dt { color: var(--navy); }
#iqm-nav .iqm-dd:hover .iqm-dt::after, #iqm-nav .iqm-dd.is-open .iqm-dt::after { right: 16px; }
#iqm-nav .iqm-dd.is-open .iqm-dt svg { transform: rotate(180deg); opacity: 1; }
@media (max-width: 1180px) {
  html body nav.menu#iqm-nav { gap: 18px; }
  #iqm-nav .iqm-dt, html body #iqm-nav > a { font-size: 14.5px; }
}
@media (max-width: 980px) {
  html body nav.menu#iqm-nav { display: none; }
  html body header.site .burger { display: grid; }
}

/* ---------- panel shell (same for all five) ---------- */
#iqm-nav .iqm-p { display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 90; text-align: left;
  padding: 24px 28px 0; border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(5,22,39,.45), 0 4px 14px -6px rgba(5,22,39,.10), 0 0 0 1px rgba(12,49,88,.07); }
#iqm-nav .iqm-dd.is-open .iqm-p, #iqm-nav .iqm-dd:hover .iqm-p { display: block; }
#iqm-nav .iqm-p::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
#iqm-nav .iqm-p .cols { display: grid; gap: 0 36px; }
#iqm-nav .iqm-p h6 { margin: 0 0 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8A97A8; }
#iqm-nav .iqm-p ul { list-style: none; margin: 0; padding: 0; }

/* list links */
#iqm-nav .iqm-p li a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -10px; padding: 7px 10px; border-radius: 10px; font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; transition: background .15s; }
#iqm-nav .iqm-p li a::after { content: "→"; position: static; left: auto; right: auto; bottom: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--sans); font-size: 13px; color: var(--gold-2); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
#iqm-nav .iqm-p li a:hover, #iqm-nav .iqm-p li a.is-hover { background: #F7F3EC; }
#iqm-nav .iqm-p li a:hover::after, #iqm-nav .iqm-p li a.is-hover::after { opacity: 1; transform: none; }

/* bottom bar */
#iqm-nav .iqm-p .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px -28px 0; padding: 14px 28px;
  border-top: 1px solid #F1EBE1; background: #FBF8F3; border-radius: 0 0 24px 24px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
#iqm-nav .iqm-p .foot a { display: inline-flex; gap: 6px; padding: 0; font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--navy); }
#iqm-nav .iqm-p .foot a::after { display: none; }
#iqm-nav .iqm-p .foot a span { color: var(--gold-2); }

/* "IQ " before each chip number: read by Google and screen readers, not shown */
#iqm-nav .vh, #iqm-acc .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* score chips */
#iqm-nav .iqm-p .chips { display: grid; grid-template-columns: repeat(4, 52px); gap: 8px; }
#iqm-nav .iqm-p .chips a { display: grid; place-items: center; height: 42px; padding: 0; border-radius: 12px; background: #F4EEE4;
  font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--navy); transition: background .15s, color .15s; }
#iqm-nav .iqm-p .chips a::after { display: none; }
#iqm-nav .iqm-p .chips a:hover, #iqm-nav .iqm-p .chips a.is-hover { background: var(--navy); color: #fff; }
#iqm-nav .iqm-p .chips a.all { background: #fff; box-shadow: inset 0 0 0 1px #E6DED2; font-family: var(--sans); font-size: 12px; font-weight: 800; }
#iqm-nav .iqm-p .chips-note { margin: 10px 0 0; font-family: var(--sans); font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 232px; }

/* Learn: 2 x 2 section cards */
#iqm-nav .iqm-p .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#iqm-nav .iqm-p .cards a { display: block; padding: 14px 14px 13px; border-radius: 14px; background: #F7F3EC; transition: background .15s; }
#iqm-nav .iqm-p .cards a::after { display: none; }
#iqm-nav .iqm-p .cards b { display: block; font-family: var(--serif); font-size: 15.5px; font-weight: 700; color: var(--navy); }
#iqm-nav .iqm-p .cards small { display: block; margin-top: 3px; font-family: var(--sans); font-size: 12.5px; line-height: 1.4; color: var(--muted); }
#iqm-nav .iqm-p .cards a:hover, #iqm-nav .iqm-p .cards a.is-hover { background: var(--navy); }
#iqm-nav .iqm-p .cards a:hover b, #iqm-nav .iqm-p .cards a.is-hover b { color: #fff; }
#iqm-nav .iqm-p .cards a:hover small, #iqm-nav .iqm-p .cards a.is-hover small { color: #B9C7D8; }

/* Tools: one "start here" card + 2 x 3 tool rows */
#iqm-nav .iqm-p .lead { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, #123F6E 0%, #0C3158 60%, #0A2A4B 100%); }
#iqm-nav .iqm-p .lead::after { display: none; }
#iqm-nav .iqm-p .lead em { align-self: flex-start; font-style: normal; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #FFC24B; }
#iqm-nav .iqm-p .lead b { font-family: var(--serif); font-size: 18px; line-height: 1.25; font-weight: 700; color: #fff; }
#iqm-nav .iqm-p .lead small { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: #B9C7D8; }
#iqm-nav .iqm-p .lead span { margin-top: auto; padding-top: 6px; font-family: var(--sans); font-size: 13px; font-weight: 800; color: #FFC24B; }
#iqm-nav .iqm-p .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; align-content: start; }
#iqm-nav .iqm-p .tools a { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px; border-radius: 12px; transition: background .15s; }
#iqm-nav .iqm-p .tools a::after { display: none; }
#iqm-nav .iqm-p .tools a:hover, #iqm-nav .iqm-p .tools a.is-hover { background: #F7F3EC; }
#iqm-nav .iqm-p .tools i { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #F4EEE4; color: var(--navy); }
#iqm-nav .iqm-p .tools i svg { width: 19px; height: 19px; }
#iqm-nav .iqm-p .tools b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--navy); }
#iqm-nav .iqm-p .tools small { display: block; margin-top: 1px; font-family: var(--sans); font-size: 12px; color: var(--muted); }

/* ---------- phone drawer: same groups as an accordion ---------- */
#iqm-acc { overflow-y: auto; min-height: 0; padding: 2px 0 6px; }
/* user 28 Oct: no scroll bar beside the menu list; it still scrolls by finger, wheel or trackpad */
#iqm-acc { scrollbar-width: none; -ms-overflow-style: none; }
#iqm-acc::-webkit-scrollbar { display: none; width: 0; height: 0; }
#iqm-acc .acc-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--navy); padding: 13px 4px; border-bottom: 1px solid #F3EDE4; }
#iqm-acc .acc-row svg { width: 14px; height: 14px; color: var(--gold-2); transition: transform .25s; }
#iqm-acc .acc-open > .acc-row { border-bottom-color: transparent; }
#iqm-acc .acc-open > .acc-row svg { transform: rotate(180deg); }
#iqm-acc .acc-body { display: none; padding: 0 0 14px; border-bottom: 1px solid #F3EDE4; }
#iqm-acc .acc-open > .acc-body { display: block; }
#iqm-acc h6 { margin: 10px 4px 2px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8A97A8; }
#iqm-acc .acc-body ul { list-style: none; margin: 0; padding: 0; }
#iqm-acc .acc-body li a { display: block; padding: 8px 4px; border: 0; font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--navy); }
#iqm-acc .acc-body a::after { display: none; }
#iqm-acc .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 4px; }
#iqm-acc .chips a { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center;
  height: 42px; padding: 0; border: 0; border-radius: 12px; background: #F4EEE4;
  font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--navy); }
#iqm-acc .chips a.all { background: #fff; box-shadow: inset 0 0 0 1px #E6DED2; font-family: var(--sans); font-size: 12px; font-weight: 800; }
#iqm-acc .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
#iqm-acc .cards a { display: block; padding: 12px; border: 0; border-radius: 12px; background: #F7F3EC; }
#iqm-acc .cards b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--navy); }
#iqm-acc .cards small { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11.5px; line-height: 1.35; color: var(--muted); }
#iqm-acc a.lead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 14px;
  background: linear-gradient(160deg, #123F6E 0%, #0C3158 60%, #0A2A4B 100%); }
#iqm-acc a.lead em { display: block; font-style: normal; font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #FFC24B; }
#iqm-acc a.lead b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff; }
#iqm-acc a.lead span { color: #FFC24B; font-family: var(--sans); font-weight: 800; }
#iqm-acc a.all-link { display: inline-flex; gap: 6px; margin-top: 8px; padding: 6px 4px 0; border: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 800; color: var(--navy); }
#iqm-acc a.all-link span { color: var(--gold-2); }

/* Phone menu for Design 2 (28 Oct): sections open DOWNWARD, and each group inside is its own small dropdown.
   Loaded after f-design.css + designs.css + v3.css. No boxes, no cards, no side slide. */

#iqm-acc .pN2 { padding: 0 0 14px; }
#iqm-acc .pN2 .sec-intro { margin: 0 4px 6px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }

/* the inner dropdowns (one open at a time inside a section) */
#iqm-acc .pN2 .mgrp { margin-left: 8px; border-top: 1px solid #F3EDE4; }
#iqm-acc .pN2 .mgrp-row { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px; font-family: var(--serif); font-size: 17.5px; font-weight: 600; color: var(--navy); }
#iqm-acc .pN2 .mgrp-row svg { width: 13px; height: 13px; color: var(--gold-2); transition: transform .25s; }
#iqm-acc .pN2 .mgrp.open .mgrp-row svg { transform: rotate(180deg); }
#iqm-acc .pN2 .mgrp-body { display: none; margin: -2px 0 10px 4px; padding-left: 12px; border-left: 2px solid #F0E6D8; }
#iqm-acc .pN2 .mgrp.open .mgrp-body { display: block; }
#iqm-acc .pN2 .mgrp-body ul { list-style: none; margin: 0; padding: 0; }
#iqm-acc .pN2 .mgrp-body li a { display: block; padding: 7px 4px; border: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; color: #3E4E63; }
#iqm-acc .pN2 .mgrp-body li a::after { display: none; }
#iqm-acc .pN2 .mgrp-body .tag { margin: 6px 0 0 4px; }
#iqm-acc .pN2 .mgrp-body a.all-link { margin-top: 2px; padding-top: 6px; }
#iqm-acc .pN2 a.sec-all { margin: 10px 4px 0 12px; }

/* Design 3 (28 Oct): Design 1's look, but each group starts with its name and one short line.
   Icons only on the phone (user 28 Oct: the computer looks better simple). No tinted squares, no cards
   (manager 27 Oct). Loaded after f-design.css + mobile-nested.css. */

/* ---------- computer: group name + short line, a thin line under it, plain links ---------- */
#iqm-nav .iqm-p .cols.g3s { gap: 0 40px; }
#iqm-nav .iqm-p .g3-h { margin: 0 0 8px; padding: 0 0 11px; border-bottom: 1px solid #F1EBE1; }
#iqm-nav .iqm-p .g3-h b { display: block; font-family: var(--serif); font-size: 16px; line-height: 1.25; font-weight: 700; color: var(--navy); }
#iqm-nav .iqm-p .g3-h small { display: block; margin-top: 2px; font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap; }
#iqm-nav .iqm-p .g3 li a { padding-top: 6px; padding-bottom: 6px; }
#iqm-nav .iqm-p .g3 li a small { display: block; margin-top: 1px; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); }

/* ---------- phone: each group row shows its icon, name and short line ---------- */
#iqm-acc .pN2 .mgrp-row { justify-content: flex-start; gap: 12px; }
#iqm-acc .pN2 .mgrp-row > i { flex: 0 0 22px; display: grid; place-items: center; color: var(--gold-2); }
#iqm-acc .pN2 .mgrp-row > i svg, #iqm-acc .pN2 .mgrp.open .mgrp-row > i svg { width: 21px; height: 21px; transform: none; }
#iqm-acc .pN2 .mgrp-row > span { flex: 1; min-width: 0; }
#iqm-acc .pN2 .mgrp-row b { display: block; font-weight: 600; }
#iqm-acc .pN2 .mgrp-row small { display: block; margin-top: 1px; font-family: var(--sans); font-size: 12.5px; font-weight: 400; color: var(--muted); }
#iqm-acc .pN2 .mgrp-body { margin-left: 14px; padding-left: 20px; }
/* text sits next to its icon (the site's phone-menu links push it to the right edge), and every row is at
   least 44px tall so it is easy to tap */
#iqm-acc .pN2 .mgrp-body li a { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 10px; padding-bottom: 10px; text-align: left; }
#iqm-acc .pN2 a.sec-all { align-items: center; min-height: 44px; margin-top: 4px; padding: 0 4px; }
/* small phones (360px wide): a little smaller and less indented, so long names stay on one line */
@media (max-width: 370px) {
  #iqm-acc .pN2 .mgrp-row small { font-size: 12px; }
  #iqm-acc .pN2 .mgrp-body { margin-left: 10px; padding-left: 14px; }
  #iqm-acc .pN2 .mgrp-body li a { font-size: 15px; gap: 10px; }
}
#iqm-acc .pN2 .mgrp-body li a i { flex: 0 0 18px; display: grid; place-items: center; color: #8A97A8; }
#iqm-acc .pN2 .mgrp-body li a i svg { width: 17px; height: 17px; }
#iqm-acc .pN2 .mgrp-body li a small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); }

/* hover bridge between the bar and its dropdown (the gap under the pill) */
#iqm-nav .iqm-p::before { top: -26px; height: 26px; }

/* 761-980px: the new menu folds into the burger earlier than the old one (980px, not 760px); without this the
   button and the burger bunch up next to the logo with an empty pill to their right */
@media (min-width: 761px) and (max-width: 980px) {
  html body header.site .nav-cta { margin-left: auto; }
}