/* Hireish brand on the original portal: fonts, colours, small fixes. Loaded after the portal's own CSS. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root, body, body.light-mode, body.dark-mode { --primary-color:#0B4DD8; --primary-black-color:#141A24; --title-primary-text:#141A24; }
body, p, a, li, span, button, input, select, textarea, td, th, label { font-family:Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }
h1, h2, h3, h4, h5, .heading-line-before { font-family:"Bricolage Grotesque", Manrope, sans-serif !important; letter-spacing:-.01em; }
.theme-toggle { display:none !important; }
.dashboard-left-listbar { background:#141A24 !important; }
.dashboard-left-listbar li .list-item:hover i, .dashboard-left-listbar li.active .list-item i { color:#E8622B !important; }
.navbar-motersDesign .navbar-ui-links li.active a::after, .navbar-motersDesign .navbar-ui-links li:hover a::after { background:#0B4DD8 !important; }
.hz-match { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; background:#E6F6EC; color:#177A46; margin-top:4px; }
.hz-match.mid { background:#FFF4E5; color:#9A3412; } .hz-match.low { background:#F1F2F4; color:#6B7280; }
.hz-match small { font-weight:600; opacity:.85; }
.hz-x { border:1px solid #E4E2DC; border-radius:14px; background:#fff; padding:16px 18px; margin:0 0 14px; font-family:Manrope, sans-serif; }
.hz-x h4 { margin:0 0 4px; font-size:16px; } .hz-x p { margin:0; color:#6B7280; font-size:14px; }
.hz-x .hz-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.hz-x.warn { border-color:#fdba74; background:#fff7ed; } .hz-x.blue { border-color:#c7d7ff; background:#EEF2FF; } .hz-x.violet { border-color:#c7b8ff; background:#f5f2ff; }
.hz-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#0B4DD8; color:#fff !important; font-weight:800; font-size:14px; text-decoration:none !important; border:0; cursor:pointer; }
.hz-btn.ghost { background:#fff; color:#141A24 !important; border:1px solid #E4E2DC; } .hz-btn.site { background:#E8622B; }
.hz-jobs a { display:block; padding:10px 0; border-top:1px solid #E4E2DC; color:#141A24 !important; text-decoration:none !important; } .hz-jobs a:first-child { border-top:0; }
.hz-jobs a b { display:block; font-size:15px; } .hz-jobs a span { color:#6B7280; font-size:13px; }
.hz-ai { border:1px solid #E4E2DC; border-radius:14px; background:#FDEBE2; padding:16px; margin:0 0 18px; }
.hz-ai strong { font-family:"Bricolage Grotesque", Manrope, sans-serif; font-size:16px; color:#141A24; }
.hz-ai textarea { width:100%; min-height:84px; margin-top:8px; padding:12px; border:1px solid #E4E2DC; border-radius:10px; font-size:15px; background:#fff; }
.hz-ai .hz-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:10px; } .hz-ai .st { font-size:13.5px; color:#6B7280; }

/* Same header as the new frame: dark bar, wordmark, white links. */
body.hz-portal, body.hz-portal.light-mode { background:#FBFAF7 !important; }
.main-navbardesign, .main-navbardesign.white-primary-bgcolor-L { background:#141A24 !important; box-shadow:none !important; border-bottom:0 !important; }
.hz-brand { display:inline-flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque", Manrope, sans-serif !important; font-weight:800; letter-spacing:.08em; color:#fff !important; font-size:16px; text-decoration:none !important; }
.hz-mark { width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,#E8622B 50%,#0B4DD8 50%); display:inline-block; }
.hz-mk { font-size:10px; letter-spacing:.08em; color:#94a3b8; font-weight:700; margin-left:2px; }
.navbar-motersDesign .navbar-ui-links li a, .navbar-motersDesign .navbar-ui-links li:hover a { color:#cbd5e1 !important; font-weight:600 !important; font-size:14px !important; }
.navbar-motersDesign .navbar-ui-links li.active a { color:#fff !important; }
.navbar-motersDesign .navbar-ui-links li a::after { display:none !important; }
.navbar-motersDesign .navbar-ui-links li.hz-cta a { background:#fff; color:#141A24 !important; padding:9px 14px; border-radius:10px; font-weight:800 !important; }
.navbar-motersDesign .content-nav-details h4, .navbar-motersDesign .navbar-toggler, .navbar-motersDesign .notification-btn i { color:#fff !important; }
.navbar-motersDesign .user-nav-profiles .nav-userprf { border:2px solid rgba(255,255,255,.25); }
@media (min-width: 992px) { .navbar-ui.navbar-ui-lefts { display:none !important; } }

/* Account area, same on both bars */
.navbar-motersDesign .btn-nav-user-details { gap:8px !important; }
.navbar-motersDesign .user-nav-profiles .nav-userprf { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#E7EEFF; }
.navbar-motersDesign .content-nav-details h4 { font-size:14px !important; font-weight:600 !important; color:#fff !important; margin:0; }
.hz-logout { color:#cbd5e1 !important; font-weight:600; font-size:13px; margin-left:4px; text-decoration:none !important; }
.navbar-motersDesign .notification-btn { background:none !important; border:0 !important; } .navbar-motersDesign .notification-btn i { font-size:20px; } .navbar-motersDesign .notification-dot { background:#E8622B !important; }

/* ------------------------------------------------------------------
   One portal width, one reflow point.
   The original pages lay out in Bootstrap's .container (1140 at xl, 1320 at xxl);
   the new pages lay out in .wrap.pgrid. They used to disagree by ~180px between
   1200 and 1400, so moving between "My jobs" and "Post a job" jumped the page.
   Both now step together and widen to 1320 from 1200 up.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) { body.hz-portal .container { max-width: 1320px; } }

/* No photo: the initial in a circle, as on the new frame. The old markup pointed at a
   placeholder file that is not on the server, so it rendered as a broken-image icon. */
.navbar-motersDesign .user-nav-profiles .hz-av { width:36px; height:36px; border-radius:50%; background:#E7EEFF; color:#0B4DD8; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; border:2px solid rgba(255,255,255,.25); }

/* ==================================================================
   Phase 5 / P5.1 — one navigation shell.
   Loaded by both frames, so the sidebar, the mobile bar and the
   account area look and behave the same on every portal page.
   Deliberately uses its own hznav/hztab class names: the theme's
   .dashboard-left-listbar carried an off-canvas drawer in
   responsive.css that only the old pages had (review E01).
   ================================================================== */
.hznav-list { background:#141A24; border-radius:16px; padding:14px 12px; position:sticky; top:12px; }
.hznav-ul { list-style:none; margin:0; padding:0; }
.hznav-h { margin:14px 10px 6px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#8b98a9; font-weight:800; }
.hznav-i { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; color:#e2e8f0 !important; font-weight:600; font-size:14.5px; text-decoration:none !important; line-height:1.3; }
.hznav-i i { font-size:20px; flex:none; color:#94a3b8; }
.hznav-i span { flex:1 1 auto; min-width:0; }
.hznav-i.sub { padding-left:34px; font-weight:500; font-size:14px; }
.hznav-i.sub i { font-size:17px; }
.hznav-i:hover { background:rgba(255,255,255,.08); color:#fff !important; }
.hznav-i.on { background:#fff; color:#141A24 !important; font-weight:700; }
.hznav-i.on i { color:#E8622B; }
.hznav-i:focus-visible, .hztab-i:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.hznav-n { margin-inline-start:auto; background:#E8622B; color:#fff; font-size:11px; font-weight:800; border-radius:999px; padding:1px 7px; }
.hznav-i.on .hznav-n { background:#E8622B; color:#fff; }
[dir=rtl] .hznav-i.sub { padding-left:14px; padding-right:34px; }

/* Compact mobile bar. Five work areas plus More; everything else is in the sheet. */
.hztab, .hzsheet { display:none; }
.hztab-i { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1 1 0; min-width:0; padding:7px 2px 6px; background:none; border:0; color:#94a3b8 !important; text-decoration:none !important; font:inherit; cursor:pointer; }
.hztab-ic { position:relative; display:inline-flex; }
.hztab-i i { font-size:22px; }
.hztab-l { font-size:10.5px; font-weight:700; line-height:1.2; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hztab-i.on { color:#fff !important; }
.hztab-i.on i { color:#E8622B; }
.hztab-n { position:absolute; top:-3px; inset-inline-end:-7px; background:#E8622B; color:#fff; font-size:9.5px; font-weight:800; border-radius:999px; padding:0 4px; min-width:14px; text-align:center; }

.hzsheet-bd { position:fixed; inset:0; background:rgba(10,14,20,.5); }
.hzsheet-p { position:fixed; inset-inline:0; bottom:0; background:#141A24; border-radius:18px 18px 0 0; padding:8px 12px calc(12px + env(safe-area-inset-bottom)); max-height:76vh; overflow:auto; }
.hzsheet-hd { display:flex; align-items:center; justify-content:space-between; padding:10px 10px 6px; color:#fff; font-size:15px; }
.hzsheet-x { background:none; border:0; color:#cbd5e1; font-size:26px; line-height:1; padding:0 4px; cursor:pointer; }

@media (max-width: 1199.98px) {
  .hznav { display:none; }
  .hztab { display:flex; position:fixed; inset-inline:0; bottom:0; z-index:1030; background:#141A24; border-top:1px solid rgba(255,255,255,.08);
           padding:0 2px calc(2px + env(safe-area-inset-bottom)); align-items:stretch; }
  .hzsheet:not([hidden]) { display:block; position:fixed; inset:0; z-index:1040; }
  body.hz-portal { padding-bottom:74px; }
  body.hz-locked { overflow:hidden; }
}
/* Wide enough for the sidebar: the bar and sheet stay out of the way. */
@media (min-width: 1200px) { .hztab, .hzsheet { display:none !important; } }

/* Top bar: the same work areas as the sidebar, hidden on mobile where the bar owns them.
   Both frames keep the same three things on a phone — brand, language, account — plus the
   employer's one primary action. Log out moves into the More sheet with the other
   account actions rather than sitting beside daily work (review E09). */
.navbar-motersDesign .navbar-ui-links { display:flex; }
.navbar-motersDesign .navbar-ui-links li a[aria-current=page] { color:#fff !important; }
@media (max-width: 1199.98px) {
  .navbar-motersDesign .navbar-ui-links { display:flex !important; margin:0; padding:0; }
  .navbar-motersDesign .navbar-ui-links li:not(.hz-cta) { display:none !important; }
  .navbar-motersDesign .content-nav-details, .navbar-motersDesign .btn-nav-notification, .hz-logout { display:none !important; }
}

/* Language selector, matching the new frame's control. */
.hz-lsel-li .lsel { position:relative; }
.hz-lsel-li .lsel summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:#cbd5e1; font-size:13px; font-weight:700; padding:6px 9px; border:1px solid rgba(255,255,255,.2); border-radius:8px; }
.hz-lsel-li .lsel summary::-webkit-details-marker { display:none; }
.hz-lsel-li .lsel[open] summary { color:#fff; border-color:rgba(255,255,255,.45); }
.hz-lsel-li .lsel > div { position:absolute; top:calc(100% + 6px); inset-inline-end:0; background:#fff; border:1px solid #E4E2DC; border-radius:10px; padding:6px; min-width:120px; display:flex; flex-direction:column; z-index:1050; box-shadow:0 14px 30px -18px rgba(20,26,36,.5); }
.hz-lsel-li .lsel > div a { color:#141A24 !important; font-weight:600; font-size:14px; padding:8px 10px; border-radius:7px; text-decoration:none !important; }
.hz-lsel-li .lsel > div a:hover { background:#E7EEFF; color:#0B4DD8 !important; }

/* Page surface: the original pages tinted the portal blue (.light-bgblue-L) and used a
   3rem desktop top padding while the new pages sat on the cream background at 24px, so the
   two frames read as different products. Fixed here rather than per page, because several
   of those pages exist only on the server. */
body.hz-portal .dashboard-main-sections { background:transparent !important; }
body.hz-portal .dashboard-main-sections.pt-lg-5, body.hz-portal .dashboard-main-sections.pt-3 { padding-top:24px !important; }
body.hz-portal .dashboard-main-sections.pb-3 { padding-bottom:56px !important; }

/* Same bar height in both frames: the new one is a 60px bar (44px row + 8px above and below). */
.main-navbardesign, .main-navbardesign.py-2, .main-navbardesign.py-lg-3 { padding-top:8px !important; padding-bottom:8px !important; }
.navbar-motersDesign { min-height:44px; gap:12px; flex-wrap:wrap; }