/* Site header, from the Search Screen / Account Profile / Workspace Launcher designs: logo (your
   Dashboard when signed in), Dashboard + the four workspaces with a red underline on the one you're in,
   the Guardian alerts bell, avatar with name and role.
   The mobile hamburger (.mobnav / aside) is unchanged. */
.headertop { top: 0; }
.headerblk { padding-block: 0; height: 70px; align-items: center; }
.headerblk .logo img { height: 30px; width: auto; display: block; }
.hd-nav { display: flex; gap: 4px; margin-left: 44px; align-self: stretch; }
.hd-nav a { display: flex; align-items: center; padding: 0 16px; font: 500 14.5px Poppins, sans-serif; color: #495372; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: color .12s, box-shadow .12s; }
.hd-nav a:hover { color: #1b317d; }
.hd-nav a.is-on { color: #1b317d; font-weight: 600; box-shadow: inset 0 -2px 0 #d0333b; }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hd-btn { background: #1b317d; color: #fff !important; font: 600 13.5px Poppins, sans-serif; padding: 10px 20px; border-radius: 8px; white-space: nowrap; text-decoration: none !important; border: 0; }
.hd-btn:hover { background: #142663; }
.hd-btn.is-ghost { background: #fff; color: #1b317d !important; border: 1.5px solid #d7deef; padding: 8.5px 18px; }
.hd-btn.is-ghost:hover { border-color: #1b317d; background: #fff; }
.hd-user { position: relative; display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid #e4e9f7; cursor: pointer; }
.hd-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1b317d; color: #fff; font: 600 12.5px Poppins, sans-serif; display: grid; place-items: center; flex: none; }
.hd-who { line-height: 1.15; }
.hd-who b { display: block; font: 600 12.5px Poppins, sans-serif; color: #1f2a44; white-space: nowrap; }
.hd-who span { display: block; font: 400 11px Poppins, sans-serif; color: #69748f; white-space: nowrap; }
.hd-caret { font-size: 11px; color: #69748f; }
.hd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; background: #fff; border: 1px solid #e4e9f7; border-radius: 10px; box-shadow: 0 10px 30px rgba(31,42,68,.14); padding: 6px; display: none; z-index: 60; }
.hd-user.is-open .hd-menu { display: block; }
.hd-menu a { display: block; padding: 9px 12px; border-radius: 7px; font: 500 13px Poppins, sans-serif; color: #1f2a44; text-decoration: none; white-space: nowrap; }
.hd-menu a:hover { background: #f4f6fd; color: #1b317d; }
.hd-menu a.is-danger { color: #a63a34; }
.hd-menu .sep { height: 1px; background: #eef1f8; margin: 6px 4px; }
.headerrightside { gap: 0; }
.headerrightside .mobnav { margin-left: 12px; }
/* five items in the signed-in menu: tighten before the hamburger takes over */
@media (max-width: 1320px) { .hd-nav { margin-left: 24px; gap: 0; } .hd-nav a { padding: 0 11px; font-size: 13.5px; } }
@media (max-width: 1180px) { .hd-who, .hd-caret { display: none; } .hd-nav a { padding: 0 9px; font-size: 13px; } }
@media (max-width: 991px) {
  .hd-nav, .hd-who, .hd-caret { display: none; }
  .hd-right { gap: 10px; }
  .hd-btn { padding: 8px 14px; font-size: 12.5px; }
  .hd-user { padding-left: 10px; }
}

/* Guardian alerts bell (unacknowledged count) */
.hd-bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #1f2a44 !important; text-decoration: none !important; }
.hd-bell:hover { background: #eef1f8; color: #1b317d !important; }
.hd-bell .n { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; border-radius: 999px; background: #b3261e; color: #fff; font: 700 10.5px/18px Poppins, sans-serif; text-align: center; padding: 0 4px; }

/* phone menu (.mobnav aside, full-screen): the site's font, and it scrolls when the list is long */
.mobnav aside { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobnav aside a { font-family: Poppins, sans-serif !important; font-size: 19px !important; font-weight: 500; padding: 9px 0; }
.mobnav aside a.is-on { font-weight: 700; text-decoration: underline; text-decoration-color: #d0333b; text-underline-offset: 6px; }

/* Get access: the free trial's banner, under the header (header is absolute, so the page moves down by its height) */
.ga-trial { position: absolute; left: 0; right: 0; top: 70px; display: flex; align-items: center; gap: 14px; padding: 9px 30px; background: #f7f9ff; border-bottom: 1px solid #e4e9f7; border-top: 1px solid #e4e9f7; font: 13px Poppins, sans-serif; color: #495372; }
.ga-trial[hidden] { display: none; }
.ga-trial b { color: #1b317d; font-weight: 700; }
.ga-trial a { color: #1b317d; font-weight: 600; text-decoration: none; }
.ga-trial a:hover { color: #c8642a; }
.ga-trial button { margin-left: auto; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #495372; font: 600 12px Poppins, sans-serif; cursor: pointer; }
.ga-trial.is-late { background: #fdf1e3; border-color: #f3dcc2; }
.ga-trial.is-late b { color: #a35414; }
body.ga-trial-on { padding-top: 38px; }
@media (max-width: 767px) {
  .ga-trial { top: 64px; padding: 8px 14px; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
  .ga-trial-end { display: none; }
  body.ga-trial-on { padding-top: 62px; }
}
