/* The search overlay.
   Clicking the magnifier in the header takes the screen over rather than sending anyone to another
   page. On desktop it is a wide panel under a dimmed backdrop, close in feel to a mega menu; on a
   phone it fills the screen, because a floating panel on a small screen is just a worse page.
   Results are grouped so it is obvious at a glance whether a hit is a course you book, a
   qualification you enrol on, something you can start online today, or a guide to read. */

.acadame-so { position:fixed; inset:0; z-index:99999; display:none; }
.acadame-so.on { display:block; }
.acadame-so, .acadame-so * { box-sizing:border-box; font-family:Poppins,Inter,system-ui,Arial,sans-serif; }

/* The toned-down screen behind. Deliberately not black: navy at low opacity keeps it on-brand and
   stops the page underneath looking switched off. */
.acadame-so-veil { position:absolute; inset:0; background:rgba(9,24,52,.55); opacity:0; transition:opacity .22s ease; }
.acadame-so.on .acadame-so-veil { opacity:1; }
@supports (backdrop-filter:blur(3px)) { .acadame-so-veil { backdrop-filter:blur(3px) saturate(.9); } }

.acadame-so-panel {
  position:relative; width:min(940px,calc(100% - 32px)); margin:8vh auto 0; background:#fff;
  border-radius:18px; box-shadow:0 30px 80px rgba(9,24,52,.35); overflow:hidden;
  transform:translateY(-10px) scale(.99); opacity:0; transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
  display:flex; flex-direction:column; max-height:84vh;
}
.acadame-so.on .acadame-so-panel { transform:none; opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .acadame-so-veil, .acadame-so-panel { transition:none; }
}

/* ---------------------------------------------------------------- the input */
.acadame-so-top { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid #E7EDF6; }
.acadame-so-top svg { width:22px; height:22px; flex:0 0 22px; color:#8C9AB4; }
.acadame-so-in {
  flex:1 1 auto; min-width:0; border:0; outline:0; background:none; padding:6px 0;
  font-size:15px; font-weight:600; color:#0F3069; letter-spacing:-.01em;
}
.acadame-so-in::placeholder { color:#9AA6BC; font-weight:500; }
.acadame-so-x {
  flex:0 0 auto; border:0; background:#F1F4FA; color:#5B6675; border-radius:8px; cursor:pointer;
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:7px 10px; line-height:1;
}
.acadame-so-x:hover { background:#E4EAF5; color:#0F3069; }
/* No ring on the field itself: a text input with a caret in it is already obviously focused, and a
   3px red box around the whole width read as an error state. Buttons keep their ring. */
.acadame-so-in:focus-visible { outline:none; }
.acadame-so-x:focus-visible { outline:2px solid #0F3069; outline-offset:2px; }

/* ---------------------------------------------------------------- filter tabs */
.acadame-so-tabs { display:flex; gap:6px; padding:12px 20px 0; flex-wrap:wrap; }
.acadame-so-tabs button {
  border:1px solid #DCE4EF; background:#fff; color:#5B6675; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:600; padding:6px 13px; line-height:1.4; white-space:nowrap;
}
.acadame-so-tabs button[aria-pressed="true"] { background:#0F3069; border-color:#0F3069; color:#fff; }
.acadame-so-tabs button:disabled { opacity:.35; cursor:default; }
.acadame-so-tabs button i { font-style:normal; opacity:.65; margin-left:5px; font-weight:500; }
.acadame-so-tabs button:focus-visible { outline:2px solid #0F3069; outline-offset:2px; }

/* ---------------------------------------------------------------- results */
.acadame-so-body { overflow-y:auto; overscroll-behavior:contain; padding:6px 20px 20px; flex:1 1 auto; }
.acadame-so-grp { margin-top:18px; }
.acadame-so-grp:first-child { margin-top:10px; }
.acadame-so-grp > h3 {
  margin:0 0 8px; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8C9AB4; display:flex; align-items:center; gap:8px;
}
.acadame-so-grp > h3::after { content:""; flex:1 1 auto; height:1px; background:#EDF1F8; }
.acadame-so-grp > h3 b { color:#0F3069; font-weight:700; }

/* A colour bar per group so courses, qualifications, eLearning and guides are told apart at a glance
   — but each row also carries the group's name in words, so colour is never the only signal. */
.acadame-so-row {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  border-left:3px solid transparent; text-decoration:none; color:inherit;
}
.acadame-so-row:hover, .acadame-so-row.sel { background:#F5F8FD; }
.acadame-so-row .t { flex:1 1 auto; min-width:0; }
.acadame-so-row .t b { display:block; font-size:13px; font-weight:500; color:#0F3069; line-height:1.35; }
.acadame-so-row .t span { display:block; font-size:11px; font-weight:500; color:#5B6675; margin-top:2px; }
.acadame-so-row mark { background:#FFF1A8; color:inherit; padding:0 1px; border-radius:2px; }
.acadame-so-row .tag {
  flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; background:#EEF2F9; color:#41506B;
}
.acadame-so-row .dts {
  flex:0 0 auto; border:1px solid #D12038; background:#fff; color:#D12038; border-radius:8px;
  font-size:11.5px; font-weight:700; padding:7px 12px; cursor:pointer; white-space:nowrap;
}
.acadame-so-row .dts:hover { background:#D12038; color:#fff; }

.acadame-so-k-course { border-left-color:#0F3069; }
.acadame-so-k-qual   { border-left-color:#7A4BC4; }
.acadame-so-k-elearn { border-left-color:#0E8F76; }
.acadame-so-k-plant  { border-left-color:#C87A12; }
.acadame-so-k-card   { border-left-color:#2E6BD4; }
.acadame-so-k-test   { border-left-color:#8C9AB4; }
.acadame-so-k-blog   { border-left-color:#C8102E; }
.acadame-so-k-centre, .acadame-so-k-page { border-left-color:#B7C3D6; }

.acadame-so-more {
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font-size:12.5px; font-weight:700; color:#D12038; padding:8px 15px;
}

/* ---------------------------------------------------------------- empty and resting states */
.acadame-so-empty { padding:26px 12px 30px; }
.acadame-so-empty p { margin:0 0 10px; font-size:13px; color:#5B6675; }
.acadame-so-empty b { color:#0F3069; }
.acadame-so-empty a { color:#D12038; font-weight:600; }
.acadame-so-sugg { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.acadame-so-sugg button {
  border:1px solid #DCE4EF; background:#fff; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:600; color:#0F3069; padding:7px 13px;
}
.acadame-so-sugg button:hover { border-color:#0F3069; background:#F5F8FD; }

.acadame-so-foot {
  border-top:1px solid #E7EDF6; padding:10px 20px; display:flex; gap:16px; align-items:center;
  font-size:12px; color:#8C9AB4; flex-wrap:wrap;
}
.acadame-so-foot kbd {
  font:inherit; font-size:11px; background:#F1F4FA; border:1px solid #DCE4EF; border-bottom-width:2px;
  border-radius:5px; padding:1px 6px; color:#5B6675;
}
.acadame-so-foot .sp { flex:1 1 auto; }

/* ---------------------------------------------------------------- phone
   Full screen. Nothing floats, nothing is half-covered, and the keyboard has somewhere to go. */
@media (max-width:720px) {
  .acadame-so-panel {
    width:100%; margin:0; max-height:none; height:100%; border-radius:0;
    transform:translateY(12px); box-shadow:none;
  }
  .acadame-so-veil { background:rgba(9,24,52,.35); }
  .acadame-so-top { padding:14px 16px; position:sticky; top:0; background:#fff; z-index:2; }
  .acadame-so-in { font-size:16px; }   /* 16px or iOS zooms the whole page on focus */
  .acadame-so-tabs { padding:10px 16px 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .acadame-so-tabs::-webkit-scrollbar { display:none; }
  .acadame-so-body { padding:4px 16px 24px; -webkit-overflow-scrolling:touch; }
  .acadame-so-row { padding:12px 10px; }
  .acadame-so-row .tag { display:none; }        /* the group heading already says it */
  .acadame-so-foot { display:none; }            /* no keyboard to explain */
}

/* The header button that opens it. */
.acadame .hdr-actions .so-open { cursor:pointer; }

/* Stop the page behind scrolling while the overlay is up. */
body.acadame-so-lock { overflow:hidden !important; }

/* ---------------------------------------------------------------- dates, in place
   Pressing Dates on a result swaps the results for that course's live availability without leaving
   the overlay or the page. Same scale, same colours and the same Arlo data as the menu. */
.acadame-so-back {
  border:1px solid #DCE4EF; background:#fff; color:#0F3069; border-radius:999px; cursor:pointer;
  font-size:12.5px; font-weight:700; padding:6px 14px; line-height:1.4;
}
.acadame-so-back:hover { background:#DCE8FF; border-color:#0F3069; }
.acadame-so-back:focus-visible { outline:2px solid #0F3069; outline-offset:2px; }

.acadame-so-dhead { display:flex; align-items:center; flex-wrap:wrap; gap:4px 14px; padding:10px 12px 12px; border-bottom:1px solid #EDF1F8; margin-bottom:6px; }
.acadame-so-deyebrow { flex:0 0 100%; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#D12038; }
.acadame-so-dhead strong { font-size:14px; font-weight:700; color:#0F3069; line-height:1.3; }
.acadame-so-dpage { margin-left:auto; font-size:12.5px; font-weight:700; color:#D12038; text-decoration:none; white-space:nowrap; }

.acadame-so-dmsg { font-size:13px; color:#5B6675; margin:10px 12px; }
.acadame-so-dmsg b { color:#0F3069; }
.acadame-so-dmsg a { color:#D12038; font-weight:700; }
.acadame-so-dask { display:inline-block; margin:0 8px 0 12px; font-size:12.5px; font-weight:700; color:#fff; background:#D12038; border-radius:8px; padding:8px 14px; text-decoration:none; }
.acadame-so-dask.alt { background:#fff; color:#0F3069; border:1px solid #DCE4EF; margin-left:0; }

.acadame-so-dlist { display:grid; grid-template-columns:repeat(auto-fill,minmax(410px,1fr)); gap:0 26px; }
.acadame-so-drow { display:flex; align-items:center; gap:12px; padding:9px 12px; border-bottom:1px solid #EEF2F8; }
.acadame-so-dcal { flex:0 0 42px; text-align:center; background:#F5F7FB; border:1px solid #DCE4EF; border-radius:8px; padding:3px 0; }
.acadame-so-dcal b { display:block; font-size:14px; font-weight:700; color:#0F3069; line-height:1.1; }
.acadame-so-dcal span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:#5B6675; }
.acadame-so-dwhen { flex:1 1 auto; min-width:0; }
.acadame-so-dwhen strong { display:block; font-size:13px; font-weight:500; color:#0F3069; line-height:1.3; }
.acadame-so-dwhen small { display:block; font-size:11px; font-weight:500; color:#5B6675; }
.acadame-so-dpr { flex:0 0 auto; font-size:12px; font-weight:700; color:#0F3069; }
.acadame-so-dpr small { font-size:10px; font-weight:500; color:#5B6675; }
.acadame-so-dbook { flex:0 0 auto; font-size:11.5px; font-weight:700; color:#fff; background:#D12038; border-radius:8px; padding:7px 12px; text-decoration:none; white-space:nowrap; }
.acadame-so-dbook.full { background:#fff; color:#0F3069; border:1px solid #DCE4EF; }
.acadame-so-dbook:hover { background:#a90d24; color:#fff; }
@media (max-width:900px) { .acadame-so-dlist { grid-template-columns:1fr; } }