/* Unirecruit navigation drawer (owner request 2026-10-08).
   <= 900px: the header nav collapses behind .nav-toggle into a right-hand drawer.
   >  900px: nothing here applies except hiding the toggle, so desktop is unchanged. */

.nav-toggle { display: none; }

@media (min-width: 901px) {
  .nav-toggle,
  .nav-backdrop { display: none !important; }
}
/* The full menu on every page (owner 27 Oct 2026: "the menu at the top should not be lost after clicking on About and
   every tab"): pages without their own menu show the generated one in their header row; nav.js NavOverflow folds what
   does not fit into "More". */
@media (min-width: 901px) {
  .site-menu-generated { display: flex !important; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; margin: 0 6px; overflow: visible; }
  .site-menu-generated > a { white-space: nowrap; flex: 0 0 auto; padding: 7px 9px; border-radius: 8px; color: #4d5374; font-size: 14px; font-weight: 600; text-decoration: none; }
  .site-menu-generated > a:hover, .site-menu-generated > a[aria-current="page"] { background: #f1edff; color: #4f37ad; }
  .site-menu-generated > a[href="/post-job"] { padding: 7px 14px; border-radius: 999px; background: #ffd84d; color: #141a3a; font-weight: 800; }
  .site-menu-generated > a.nav-signin { border: 1px solid #d9d3f5; color: #4f37ad; font-weight: 800; }
  .resource-header .resource-shell { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; max-width: 1240px; }
  .resource-header .resource-shell > a:not(:first-child):not(.nav-admin-desktop):not(.nav-likes) { display: none; } /* "Browse jobs": the menu starts with Jobs */
  body[data-theme="dark"] .site-menu-generated > a { color: #dce2ff; }
  body[data-theme="dark"] .site-menu-generated > a:hover, body[data-theme="dark"] .site-menu-generated > a[aria-current="page"] { background: rgba(189,199,245,.12); color: #fff; }
}

@media (max-width: 900px) {
  /* Header bar: logo left, controls right, never wider than the screen. */
  .site-header {
    overflow: visible !important;
    /* backdrop-filter would make the header the containing block of the fixed drawer */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    flex-wrap: nowrap;
  }
  .site-header.nav-open { z-index: 70; }
  .site-header .brand { margin-right: auto; }
  .site-header .resource-theme-toggle { margin-left: 0; margin-right: 0; }

  .resource-header .resource-shell { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; gap: 10px; }
  .resource-header .resource-shell > a:first-child { margin-right: auto; }
  .resource-header .resource-shell > a:not(:first-child):not(.nav-likes) { display: none; }
  .resource-header .resource-theme-toggle { margin-left: 0; }
  .resource-header > .nav-toggle { position: absolute; top: 14px; right: 16px; }
  .resource-header > nav:not(#site-menu) { display: none; } /* its links are in the drawer */
  .resource-header:not(:has(.resource-shell)) { position: relative; padding-right: 76px; padding-left: 16px; }

  .nav-toggle {
    position: relative;
    z-index: 62;
    order: 99;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid #e3e6f0;
    border-radius: 11px;
    background: #fff;
    color: #1b2552;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .resource-header .nav-toggle { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; }
  .nav-toggle[aria-expanded="true"] { border-color: #e3e6f0; background: #fff; color: #1b2552; }
  .nav-toggle:focus-visible { outline: 3px solid #b8a9ff; outline-offset: 2px; }

  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, background-color .2s ease;
  }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before,
  .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -6px; }
  .nav-toggle-icon::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background-color: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

  /* The drawer. Ids beat the page stylesheets' nav rules (some use !important). */
  #site-menu {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 60;
    display: flex !important;
    flex: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    box-sizing: border-box;
    width: min(340px, 86vw);
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 84px 16px 28px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: -24px 0 60px rgba(14, 18, 47, .25);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .26s;
  }
  .nav-open #site-menu {
    transform: none;
    visibility: visible;
    transition: transform .26s cubic-bezier(.23, 1, .32, 1);
  }
  #site-menu a {
    box-sizing: border-box;
    display: block;
    flex: none !important;
    padding: 12px 14px !important;
    border-radius: 10px;
    color: #1f2850 !important;
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
  }
  #site-menu a:hover,
  #site-menu a:focus-visible,
  #site-menu a[aria-current="page"] { background: #f2efff; color: #4f37ad !important; outline: none; }
  #site-menu .nav-signin { margin-top: 10px; border: 1px solid #d9d6f2; text-align: center; color: #4f37ad !important; }
  #site-menu .theme-toggle { flex: none; margin: 10px 14px 0; }
  #site-menu .nav-auth { flex: none; margin: 12px 0 0 !important; padding: 12px 14px !important; font-size: 1rem !important; }

  .nav-backdrop { position: fixed; inset: 0; z-index: 58; background: rgba(14, 18, 47, .55); }
  .nav-backdrop[hidden] { display: none; }

  html.nav-locked,
  html.nav-locked body { overflow: hidden; }

  body[data-theme="dark"] #site-menu { background: #101941; box-shadow: -24px 0 60px rgba(0, 0, 0, .45); }
  body[data-theme="dark"] #site-menu a { color: #e7eaff !important; }
  body[data-theme="dark"] #site-menu a:hover,
  body[data-theme="dark"] #site-menu a:focus-visible,
  body[data-theme="dark"] #site-menu a[aria-current="page"] { background: rgba(137, 112, 238, .2); color: #fff !important; }
  body[data-theme="dark"] #site-menu .nav-signin { border-color: rgba(189, 199, 245, .28); }
  body[data-theme="dark"] .nav-toggle,
  body[data-theme="dark"] .nav-toggle[aria-expanded="true"] { border-color: rgba(188, 197, 244, .22); background: #151e46; color: #f1edff; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #site-menu,
  .nav-open #site-menu,
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after { transition: none; }
}
.site-header nav a.nav-admin,.resource-header nav a.nav-admin,#site-menu a.nav-admin{color:#6d4aff;font-weight:800}
body[data-theme="dark"] #site-menu a.nav-admin,body[data-theme="dark"] .site-header nav a.nav-admin{color:#b7a6ff}

/* owner 2026-10-16: "Post a job" stands out in every menu, for employers. */
#site-menu a[href="/post-job"]{border-radius:999px;background:#ffd84d;color:#141a3a!important;padding:7px 14px;font-weight:850}
/* The off-canvas menu must never widen the page on phones (regression 23 Oct: /documents and job pages scrolled to 734 px). */
html,body{overflow-x:clip}


/* EN | MT switch (owner 25 Oct 2026): a quiet option beside the menu, English by default. */
.lang-switch{display:inline-flex;flex:none;align-items:center;margin:0 8px 0 auto;border:1px solid rgba(91,67,200,.35);border-radius:999px;overflow:hidden}
.lang-switch button{font:inherit;font-size:.76rem;font-weight:800;letter-spacing:.03em;padding:6px 9px;min-width:36px;border:0;background:transparent;color:inherit;cursor:pointer}
.lang-switch button[aria-pressed="true"]{background:#5b43c8;color:#fff}
@media (min-width:901px){.lang-switch{order:5;margin-left:12px}}
/* Maltese pages: articles stay with their noun (mt.json joins "L-" to the next word), so the longer Maltese words get a
   little more room in the homepage heading (its longest word, "L-opportunitajiet", is 8.1em; the text column is
   about 30% of the screen on desktop), and no heading can push the page sideways. */
html[lang="mt"] :is(h1,h2,h3){overflow-wrap:break-word}
html[lang="mt"] .hero-copy h1{font-size:clamp(1.85rem,3.3vw,4rem)!important}
@media (max-width:760px){html[lang="mt"] .hero-copy h1{font-size:min(2.5rem,9.4vw)!important}}
/* Join the channels (growth plan, owner 25 Oct 2026): under a sent application, and once after signing up. */
.join-card{display:grid;gap:6px;margin:14px 0;padding:14px;border:1px solid rgba(21,128,61,.25);border-radius:14px;background:#f3fbf6;color:#172044;font-size:.92rem;line-height:1.45}
.join-card strong{font-size:1rem}
.join-card p{margin:0}
.join-actions{display:flex;gap:8px;margin-top:4px}
.join-btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:11px;color:#fff!important;font-weight:800;text-decoration:none}
.join-wa{background:#15803d}.join-tg{background:#146a9b}
.join-float{position:fixed;z-index:61;left:12px;right:12px;bottom:12px;box-shadow:0 14px 40px rgba(16,24,64,.25);border-radius:14px}
.join-float .join-card{margin:0;padding-right:40px;background:#fff}
.join-close{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#172044;font-size:1.3rem;line-height:1;opacity:.6;cursor:pointer}
@media (min-width:720px){.join-float{left:20px;right:auto;bottom:20px;width:360px}}
body[data-theme="dark"] .join-card{background:#12301f;color:#eef1ff;border-color:rgba(37,211,102,.3)}
body[data-theme="dark"] .join-float .join-card{background:#151f49}
body[data-theme="dark"] .join-close{color:#eef1ff}
/* About you, optional (owner 25 Oct 2026): My applications and the apply panel. */
.about-you{display:grid;gap:10px;margin:14px 0;padding:16px;border:1px solid #dcd6f5;border-radius:14px;background:#faf9ff;color:#172044;font-size:.92rem;line-height:1.45}
.about-you h2{margin:0;font-size:1.05rem}.about-you h2 small{font-weight:600;color:#667085;font-size:.8rem}
.about-you .ay-why{margin:0;color:#4b5375}
.about-you label{display:grid;gap:4px;font-weight:700}
.about-you select,.about-you input[type=date]{min-height:44px;padding:0 10px;border:1px solid #cfd3e3;border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:500;font-size:16px}
.about-you fieldset{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.about-you legend{width:100%;margin-bottom:4px;font-weight:700}
.about-you .ay-choice{display:flex;grid-template-columns:none;gap:6px;align-items:center;font-weight:600}
.about-you .ay-choice input{width:20px;height:20px;accent-color:#5b43c8}
.about-you .ay-actions{display:flex;flex-wrap:wrap;gap:8px}
.about-you .ay-actions button{min-height:42px;padding:0 16px;border:1px solid #cfd3e3;border-radius:10px;background:#fff;color:#172044;font:inherit;font-weight:800;cursor:pointer}
.about-you .ay-actions .ay-save{border-color:#5b43c8;background:#5b43c8;color:#fff}
.about-you.is-done,.about-you.is-later{grid-template-columns:1fr auto;align-items:center;padding:12px 16px}
.about-you.is-done p,.about-you.is-later p{margin:0}.about-you.is-done span{color:#667085;font-size:.82rem}
.about-you .ay-status:empty{display:none}.about-you .ay-status{margin:0;color:#b42318;font-weight:700}
.about-you .ay-thanks{margin:0;color:#1f7a4d;font-weight:800;grid-column:1/-1}
.about-you .ay-young{margin:0;grid-column:1/-1;color:#8a4b00}
body[data-theme="dark"] .about-you{background:#151f49;color:#eef1ff;border-color:rgba(189,199,245,.25)}
body[data-theme="dark"] .about-you select,body[data-theme="dark"] .about-you input[type=date],body[data-theme="dark"] .about-you .ay-actions button:not(.ay-save){background:#0f173d;color:#eef1ff;border-color:rgba(189,199,245,.3)}
body[data-theme="dark"] .about-you .ay-why,body[data-theme="dark"] .about-you h2 small{color:#c3c9e8}
.about-you [hidden]{display:none!important}
/* Wide screens: the links on one line, the rest under "More" (nav.js NavOverflow, owner 27 Oct 2026). The header no
   longer clips (it hid the EN | MT switch and would hide the More list). */
@media (min-width: 901px) {
  .site-header { overflow: visible !important; }
  .site-header nav#site-menu { overflow: visible !important; flex-wrap: nowrap; min-width: 0; }
  .site-header nav#site-menu > a { white-space: nowrap; flex: 0 0 auto; }
  .nav-more { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
  .nav-more[hidden], .nav-more-list[hidden] { display: none !important; }
  .nav-more-btn { padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .nav-more-btn[aria-expanded="true"], .nav-more-btn:hover { background: #f1edff; color: #4f37ad; }
  .nav-more-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 80; min-width: 230px; display: grid; gap: 2px; padding: 8px; background: #fff; border: 1px solid #e3e5f0; border-radius: 14px; box-shadow: 0 14px 40px rgba(16, 24, 64, .18); }
  .nav-more-list a { display: block; padding: 10px 12px; border-radius: 10px; color: #172044 !important; white-space: nowrap; text-decoration: none; font-weight: 600; }
  .nav-more-list a:hover, .nav-more-list a:focus-visible { background: #f1edff; outline: none; }
  body[data-theme="dark"] .nav-more-list { background: #151f49; border-color: rgba(189, 199, 245, .25); }
  body[data-theme="dark"] .nav-more-list a { color: #eef1ff !important; }
  body[data-theme="dark"] .nav-more-list a:hover { background: rgba(189, 199, 245, .12); }
}
/* Signed in as admin: the admin links belong to the phone drawer; on desktop the one Admin button leads to them. */
@media (min-width: 901px) {
  #site-menu > a.nav-admin, .nav-more-list a.nav-admin { display: none !important; }
}

/* Liked jobs heart at the top (owner 28 Oct 2026): the number of liked jobs, opening the list on My applications. */
.nav-likes{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:999px;color:#5b43c8;text-decoration:none;margin:0 2px}
.nav-likes svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.nav-likes.has-likes svg{fill:#e5484d;stroke:#e5484d}
.nav-likes:hover{background:rgba(91,67,200,.08)}
.nav-likes-n{position:absolute;top:1px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font:800 .68rem/19px Montserrat,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.nav-likes-n[hidden]{display:none}
body[data-theme="dark"] .nav-likes{color:#c4b5ff}
body[data-theme="dark"] .nav-likes-n{box-shadow:0 0 0 2px #0c1033}

/* Phones (28 Oct 2026): the logo, liked-jobs heart, EN/MT switch, theme button and menu button must all fit on one row.
   The menu button had been pushed off the right edge; the logo now gives way to the controls. */
@media (max-width:480px){
  .resource-header .resource-shell{gap:6px}
  .resource-header .resource-logo,body[data-theme="dark"] .resource-header .resource-logo{height:auto!important;max-height:52px;width:calc(100vw - 236px)!important;max-width:190px!important;min-width:86px;padding:5px 8px!important}
  .site-header .brand{height:auto!important}
  .site-header .brand-logo,body[data-theme="dark"] .site-header .brand-logo{height:auto!important;max-height:56px;width:calc(100vw - 196px)!important;max-width:230px!important;min-width:112px;padding:5px 8px!important}
  .lang-switch{margin:0 4px 0 auto}
  .lang-switch button{min-width:28px;padding:5px 6px;font-size:.72rem}
  .nav-likes{width:34px;height:34px;margin:0}
  .nav-likes svg{width:22px;height:22px}
}