/* Hub and centre page components. The dates board lives in dateboard.css. */
.acadame .i-hero { background:var(--primary); color:#fff; padding:32px 0 36px; position:relative; overflow:hidden; }

 .acadame .i-hero::before { content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; border:70px solid rgba(255,255,255,.04); pointer-events:none; }

 .acadame .i-hero-in { display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }

 .acadame .i-hero h1 { color:#fff !important; margin:8px 0 10px !important; max-width:none; }

 .acadame .i-hero .lede { color:#D9E3F5; font-size:15px !important; max-width:60ch; margin-bottom:16px !important; }

 .acadame .i-hero img { border-radius:var(--radius); box-shadow:var(--sh); width:100%; height:auto; }

 .acadame /* Fits itself to how many facts it has. A fixed four column grid left a hero with two facts sitting
   in the first half of the row with a gap where the other two would have been. */
.i-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:18px; }

 .acadame .i-facts div { padding:10px 12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; }

 .acadame .i-facts em { display:block; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#B9C6DD; }

 .acadame .i-facts strong { font-size:13.5px; color:#fff; }

 .acadame .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

 .acadame .stats div { text-align:center; padding:18px; background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:12px; }

 .acadame .stats b { display:block; font-size:26px; color:var(--primary); font-weight:800; line-height:1.1; }

 .acadame .stats span { font-size:13px; color:var(--text); }

 .acadame .steps4 { grid-template-columns:repeat(4,1fr); }

 .acadame .cta-card { background:var(--primary); color:#fff; border-radius:var(--radius); padding:32px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }

 .acadame .cta-card h2, .acadame .cta-card h4 { color:#fff !important; }

 .acadame .cta-card h4 { color:var(--red) !important; }

 .acadame .cta-card p { color:#D9E3F5; margin:0 !important; }
@media (max-width:1024px) {
  
   .acadame .i-hero-in, .acadame .cta-card { grid-template-columns:1fr; }
  
   .acadame .steps4 { grid-template-columns:1fr 1fr; }
  
   .acadame .i-facts, .acadame .stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  
   .acadame .steps4 { grid-template-columns:1fr; }
}


/* ---- Supplier set-up details + business account application form ---- */
.acadame .acct-intro { max-width:70ch; margin:0 auto 22px !important; text-align:center; }


.acadame .supplier-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }


.acadame .supplier-facts div { padding:14px 16px; background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:12px; }


.acadame .supplier-facts em { display:block; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:4px; }


.acadame .supplier-facts strong { font-size:14px; color:var(--primary); font-weight:700; word-break:break-word; }


.acadame .acct-sec { background:#fff; }


/* The form sits on its own tinted panel with white fields inside it, so the inputs read as things to
   fill in rather than as white boxes on a white page. */
.acadame .acct-card {
  max-width:880px; margin:0 auto; padding:32px;
  background:linear-gradient(180deg,#F4F8FF 0%,#EAF1FF 100%);
  border:1px solid var(--lb); border-top:4px solid var(--primary);
  box-shadow:var(--sh); }


.acadame .acct-card .acct-h { color:var(--primary); border-top-color:#C9DAF7; }


.acadame .acct-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }


.acadame .acct-form .acct-h { grid-column:1/-1; margin:14px 0 0 !important; font-size:17px; color:var(--primary); border-top:1px solid var(--border); padding-top:18px; }


.acadame .acct-form .acct-h:first-of-type { border-top:0; padding-top:0; margin-top:0 !important; }


.acadame .acct-f { display:flex; flex-direction:column; gap:5px; min-width:0; }


.acadame .acct-wide, .acadame .acct-check, .acadame .acct-actions, .acadame .acct-status:not(:empty), .acadame .acct-done { grid-column:1/-1; }


.acadame .acct-f label { font-size:13px; font-weight:600; color:var(--primary); }


.acadame .acct-f .req { color:var(--red-ink); }


.acadame .acct-f input, .acadame .acct-f select, .acadame .acct-f textarea {
  font:inherit; font-size:15px; color:var(--ink,#1c1c1c); background:#fff; width:100%;
  padding:11px 12px; border:1px solid #C3D6F5; border-radius:10px; min-height:44px;
  box-shadow:0 1px 2px rgba(15,48,105,.05); }


.acadame .acct-f textarea { min-height:84px; resize:vertical; }


.acadame .acct-f input:focus, .acadame .acct-f select:focus, .acadame .acct-f textarea:focus {
  outline:3px solid rgba(50,128,250,.35); outline-offset:1px; border-color:var(--blue,#3280FA); }


.acadame .acct-help { font-size:12.5px; color:var(--text); }


.acadame .acct-err { font-size:12.5px; color:var(--red-ink); font-weight:600; }


.acadame .acct-f.has-err input, .acadame .acct-f.has-err select, .acadame .acct-f.has-err textarea { border-color:var(--red-ink); }


.acadame .acct-check label { display:flex; gap:10px; align-items:flex-start; font-size:14px; font-weight:500; color:var(--ink,#1c1c1c); cursor:pointer; padding:4px 0; }


.acadame .acct-check input { width:20px; height:20px; margin-top:1px; flex:0 0 auto; accent-color:var(--primary); }


.acadame .acct-check.has-err span { color:var(--red-ink); }


.acadame .acct-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


.acadame .acct-actions { display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-top:6px; }


.acadame .acct-note { font-size:12.5px; color:var(--text); margin:0 !important; max-width:70ch; }


.acadame .acct-status { font-size:14px; font-weight:600; }


.acadame .acct-status.bad { color:var(--red-ink); }


.acadame .acct-status.good { color:var(--primary); }


.acadame .acct-status:not(:empty) { padding:12px 14px; border-radius:10px; background:#fff; border:1px solid var(--lb); }


.acadame .acct-done { background:#fff; border:1px solid var(--lb); border-radius:12px; padding:24px; }


.acadame .acct-done h3 { color:var(--primary); margin:0 0 8px !important; }
@media (max-width:1024px) {
  
   .acadame .supplier-facts { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  
   .acadame .acct-form { grid-template-columns:1fr; }
  
   .acadame .supplier-facts { grid-template-columns:1fr; }
  
   .acadame .acct-card { padding:20px; }
}



/* A hero or text block with no image should use the full column rather than leaving the picture's
   half of the grid empty. */
.acadame .i-hero-in.solo, .acadame .split.solo { grid-template-columns:1fr; }


.acadame .i-hero-in.solo .lede, .acadame .split.solo p, .acadame .split.solo .ticks { max-width:72ch; }



/* An outline button on the navy hero or CTA card would otherwise be navy on navy - invisible.
   Inside a dark panel it takes the ghost treatment instead, whichever style the editor picked. */
.acadame .i-hero .btn.btn-line, .acadame .i-hero a.btn-line, .acadame .i-hero button.btn-line,
.acadame .cta-card .btn.btn-line, .acadame .cta-card a.btn-line, .acadame .cta-card button.btn-line {
  background:rgba(255,255,255,.12) !important; color:#fff !important; border-color:rgba(255,255,255,.45) !important;
}


.acadame .i-hero .btn.btn-line:hover, .acadame .i-hero a.btn-line:hover, .acadame .i-hero button.btn-line:hover,
.acadame .cta-card .btn.btn-line:hover, .acadame .cta-card a.btn-line:hover, .acadame .cta-card button.btn-line:hover {
  background:rgba(255,255,255,.24) !important; color:#fff !important; border-color:rgba(255,255,255,.6) !important;
}



/* ---------- eLearning course page ---------- */
/* Modules are a sequence, so they keep the numbered step treatment - but five or six of them read
   better in three columns than in the four the information page uses. */
.acadame .el-mods { grid-template-columns:repeat(3,1fr); }


.acadame .el-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }


.acadame .el-classroom { margin-top:16px !important; font-size:14px; color:var(--text); }


.acadame .el-classroom a { font-weight:600; color:var(--red-ink); text-decoration:none; }


.acadame .el-classroom a:hover { text-decoration:underline; }
@media (max-width:900px) {
  
   .acadame .el-mods { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  
   .acadame .el-mods { grid-template-columns:1fr; }
}



/* eLearning hub - catalogue rendered from the Arlo-backed course data */
.acadame .el-find { margin-bottom:14px; }


.acadame .el-filter { width:100%; max-width:520px; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg,#fff); font-size:14px; color:var(--primary); }


.acadame .el-filter:focus { outline:2px solid var(--red); outline-offset:1px; border-color:var(--red); }


.acadame .el-count { font-size:12.5px; color:var(--red-ink); font-weight:600; min-height:18px; margin-top:6px; }


.acadame .el-jump { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }


.acadame .el-jump a { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:var(--card-bg,#fff); border:1px solid var(--border); font-size:12.5px; font-weight:600; color:var(--primary); cursor:pointer; }


.acadame .el-jump a:hover { border-color:var(--red); color:var(--red-ink); }


.acadame .el-jump a em { font-style:normal; font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px; background:var(--lb); color:var(--primary); }


.acadame .el-jump a[aria-selected="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }


.acadame .el-jump a[aria-selected="true"] em { background:rgba(255,255,255,.2); color:#fff; }


/* Only with JavaScript do the categories become tabs - otherwise they all stay open and the page
   reads as one long list, which is what a crawler and a no-JS visitor get. */
.acadame.el-js .el-cat { display:none; }


.acadame.el-js .el-cat.on { display:block; }


.acadame .el-cat { margin-bottom:34px; scroll-margin-top:90px; }


.acadame .el-cat-h { font-size:19px; color:var(--primary); padding-bottom:10px; border-bottom:2px solid var(--red); margin-bottom:26px; }


.acadame .el-grp { margin:30px 0 14px; }


.acadame .el-cat-h + .el-grp { margin-top:0; }


/* The line under a tab heading saying what is in it. Sits between the rule and the list, so the
   heading's bottom margin comes off and the blurb carries the gap instead. !important because
   .acadame h1,h2,h3,h4 in site.css sets margin:0 0 8px !important and nothing without it lands. */
.acadame .el-cat-h:has(+ .el-cat-b) { margin-bottom:12px !important; }


.acadame .el-cat-b { max-width:74ch; margin:0 0 22px !important; color:var(--text); font-size:14.5px !important; }


.acadame .el-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }


/* The filter hides cards and empty headings with the hidden attribute. Every one of these sets its
   own display, which beats [hidden] on specificity - so say it explicitly or nothing disappears. */
.acadame [hidden] { display:none !important; }


/* The card carries its own ground rather than relying on the section behind it, so a card is never
   the same colour as what it sits on. Sections alternate, so the rule flips with them: tinted card on
   a white section, white card on a tinted one. Fixing contrast here rather than by tinting the
   section is what keeps two tinted bands from ever ending up stacked. */
.acadame .el-card { position:relative; display:flex; flex-direction:column; gap:3px; padding:12px 40px 12px 14px; background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:10px; color:var(--primary); transition:.15s; }


/* A card is a link to a page with prices, dates, the ratio and the test on it. Nothing said so: the
   chevron and the hover state are the only things telling anyone there is more behind it. */
.acadame a.el-card::after { content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-5px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); transition:transform .15s, right .15s; }


.acadame a.el-card:hover { border-color:var(--red); background:#fff; transform:translateY(-2px); box-shadow:var(--sh); }


.acadame section.alt a.el-card:hover { background:var(--lr); }


.acadame a.el-card:hover::after { right:10px; }


.acadame a.el-card:focus-visible { border-color:var(--red); }


/* A category with no page of its own is not a link, so it gets no chevron and no padding for one. */
.acadame .el-card-off { padding-right:14px; }
@media (prefers-reduced-motion:reduce) {
  
   .acadame a.el-card, .acadame a.el-card::after { transition:none; }
  
   .acadame a.el-card:hover { transform:none; }
}


.acadame .el-card strong { font-size:13.5px; line-height:1.3; }


.acadame .el-card span { font-size:12.5px; color:var(--red-ink); font-weight:600; }


.acadame .el-card-off { opacity:.72; }


.acadame .el-card-off span { color:var(--text); font-weight:500; }


/* The awarding body badge inside an information hero. Without this, ".acadame .i-hero img" wins on
   source order (info.css loads after course.css, same specificity) and blows the logo up to the
   full column width, pushing the hero photo off the screen. */
/* The facts grid sits directly above, and without this the top of the logo touches its bottom edge. */
.acadame .i-hero .partner { margin-top:20px; }


.acadame .i-hero .partner img { width:auto; height:58px; max-height:58px; border-radius:8px; box-shadow:none; }


/* The hero rule here would otherwise beat the sizing in course.css on source order. */
.acadame .i-hero .partner img.rev { border-radius:0; }


/* Sections alternate white and tinted, so a boundary is normally a change of ground. Where two
   tinted sections do end up next to each other they read as one endless block, so they get a
   hairline instead. */
.acadame section.alt + section.alt { border-top:1px solid var(--border); }


/* The one-line description on each NPORS category card. The card is a flex column with a 3px gap,
   so the margin here is on top of that and sets the name/code pair apart from the sentence. */
.acadame .el-card small { display:block; margin-top:4px; font-size:12.5px; line-height:1.45; color:var(--text); font-weight:400; }
@media (max-width:1024px) {
  
   .acadame .el-list { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  
   .acadame .el-list { grid-template-columns:1fr; }
}



/* Course topsheet download - a file, not a new tab */
.acadame .el-sheet { margin:14px 0 4px; }


.acadame .el-sheet a { display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.36); color:#fff; font-size:13px; font-weight:600; transition:.15s; }


.acadame .el-sheet a:hover { background:rgba(255,255,255,.2); border-color:#fff; }


.acadame .el-sheet em { font-style:normal; font-weight:500; color:var(--pale,#C9DAF7); font-size:12px; }


.acadame .el-sheet-ic { width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700; line-height:1; }



/* ---------------------------------------------------------------- rich text blocks
   The richtext block had no styling of its own, so anything put through it (the NVQ price
   list is the first) came out as browser defaults: unstyled table, no rhythm, prices left
   aligned against long names. Prose gets a readable measure; a table gets real rows, a
   right-aligned money column with tabular figures so the digits line up, and a scroller so
   a wide table never pushes the page sideways on a phone. */
.acadame .card.rich { padding:22px 24px; }


.acadame .card.rich > *:first-child { margin-top:0 !important; }


.acadame .card.rich > *:last-child { margin-bottom:0 !important; }


.acadame .card.rich p { max-width:68ch; }


.acadame .card.rich h3 { margin:22px 0 8px !important; font-size:17px !important; }


.acadame .card.rich ul, .acadame .card.rich ol { margin:0 0 12px 20px !important; list-style:disc !important; }


.acadame .card.rich ol { list-style:decimal !important; }


.acadame .card.rich li { margin:0 0 6px; }


.acadame .card.rich table { width:100%; border-collapse:collapse; margin:6px 0 14px; font-size:14.5px; }


.acadame .card.rich thead th {
	text-align:left; font-weight:700; color:var(--primary);
	font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
	padding:0 12px 8px; border-bottom:2px solid var(--border);
}


.acadame .card.rich thead th:last-child { text-align:right; }


.acadame .card.rich tbody td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }


.acadame .card.rich tbody td:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--primary); font-weight:600; }


.acadame .card.rich tbody tr:hover td { background:var(--light); }


/* A row that is only a trade name is a group heading, not a product. */
.acadame .card.rich tbody td[colspan] { padding:18px 12px 6px; border-bottom:0; background:none; }


.acadame .card.rich tbody td[colspan] strong { color:var(--primary); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }


.acadame .card.rich tbody tr:first-child td[colspan] { padding-top:4px; }


.acadame .card.rich tbody a { color:var(--text); text-decoration:none !important; }


.acadame .card.rich tbody a:hover { color:var(--red-ink); text-decoration:underline !important; }
@media (max-width:700px) {
  
  
	.acadame .card.rich { padding:18px 14px; overflow-x:auto; }
  
  
	.acadame .card.rich table { min-width:460px; }
}



/* ---------------------------------------------------------------- comparison table
   The NPORS hub has to answer "NPORS or CPCS" side by side, and a three column
   comparison is the only honest way to show it: the same question, both answers, no
   thumb on the scale. It is the one place on the site that needs a real table rather
   than cards, so it gets its own rules instead of borrowing the rich text ones, which
   right-align their last column for money.

   The row label is a <th scope="row">, so a screen reader announces which question each
   answer belongs to. On a phone the table scrolls inside its own box rather than pushing
   the page sideways, and the label column stays put so the reader keeps their place. */
.acadame .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 10px; }


.acadame table.tbl { width:100%; min-width:520px; border-collapse:collapse; font-size:15px; background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:12px; overflow:hidden; }


.acadame table.tbl thead th {
	text-align:left; font-weight:700; color:var(--primary); background:var(--light);
	font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
	padding:12px 16px; border-bottom:2px solid var(--border); width:33%;
}


.acadame table.tbl thead th:first-child { width:34%; }


.acadame table.tbl tbody th { text-align:left; font-weight:600; color:var(--primary); padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:top; background:var(--light); }


.acadame table.tbl tbody td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:top; }


.acadame table.tbl tbody tr:last-child th,
.acadame table.tbl tbody tr:last-child td { border-bottom:0; }


.acadame p.note { max-width:68ch; margin:10px 0 0 !important; font-size:14.5px !important; color:var(--text); }


/* --red-ink, not --red: the brand red is 4.32:1 on white and small link text needs 4.5. */
.acadame a.lnk { color:var(--red-ink); font-weight:600; text-decoration:underline !important; text-underline-offset:3px; }


.acadame a.lnk:hover { text-decoration:none !important; }



/* NPORS hub, "the card" block. Each .step card ends in a link through to the qualification behind
   that card type. The link is a footer bar the width of the card, not a line of body text, and its
   ::after stretches over the whole card so the card itself is the click target. .step is otherwise
   a plain non-clickable box on course pages, so every rule here is gated on :has(.step-go). */
.acadame .step:has(.step-go) { display:flex; flex-direction:column; padding-bottom:0; transition:border-color .15s, box-shadow .15s, transform .15s; }


.acadame .step:has(.step-go):hover { border-color:var(--red); box-shadow:var(--sh); transform:translateY(-2px); }


.acadame .step:has(.step-go):focus-within { border-color:var(--red); box-shadow:var(--sh); }


.acadame .step:has(.step-go) > p:last-of-type { margin-bottom:16px !important; }


.acadame a.step-go { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:auto -18px 0; padding:11px 16px; border-top:1px solid var(--border); border-radius:0 0 11px 11px; background:var(--lb); color:var(--red-ink); font-weight:700; font-size:13px; text-decoration:none !important; transition:background .15s; }


.acadame a.step-go::after { content:""; position:absolute; inset:0; border-radius:12px; }


.acadame a.step-go span { flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:13px; line-height:1; transition:transform .15s; }


.acadame .step:has(.step-go):hover a.step-go { background:var(--lr); }


.acadame .step:has(.step-go):hover a.step-go span { transform:translateX(3px); }


.acadame a.step-go:focus-visible { outline:none; background:var(--lr) !important; }
@media (prefers-reduced-motion:reduce) {
  
  
  .acadame .step:has(.step-go), .acadame a.step-go, .acadame a.step-go span { transition:none; }
  
  
  .acadame .step:has(.step-go):hover { transform:none; }
  
  
  .acadame .step:has(.step-go):hover a.step-go span { transform:none; }
}



/* A solo split has no image, so the text column was sitting at a 72ch measure with half the section
   empty beside it. Paragraphs keep that measure, because 72ch is where prose stays readable, but a
   tick list is scanned rather than read: at desktop width it runs in two columns and fills the space
   the missing image left, which is what makes the block look deliberate rather than broken. */
@media (min-width: 900px) {
  .acadame .split.solo .ticks { max-width:none; columns:2; column-gap:40px; }
  .acadame .split.solo .ticks li { break-inside:avoid; }
}



/* A centre's dates board, under that centre's copy. One row per course: when, what, how much, and a
   Book button that goes straight to the booking system. Kept as a list rather than a table because it
   has to collapse to one column on a phone without a horizontal scroller. */
.acadame .vd { margin-top:26px; }


.acadame .vd h3 { font-size:15px; margin:0 0 10px; }


.acadame .pop a.pop-c > span + span { display:flex; flex-direction:column; align-items:flex-start; }


.acadame .pop a.pop-c .pop-go { display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:9px; font-size:12.5px; font-weight:700; line-height:1.3; color:var(--red-ink); }


.acadame .pop a.pop-c .pop-go::after { content:""; flex:0 0 auto; width:7px; height:7px; border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(-45deg); transition:transform .15s; }


.acadame .pop a.pop-c:hover .pop-go::after { transform:rotate(-45deg) translate(2px,2px); }