/* =========================================================
   Exam Routes Help Centre
   ========================================================= */
:root{
  --er-ink:#0A1626; --er-blue:#1063E2; --er-amber:#FFB300;
  --er-muted:#46536B; --er-meta:#76839B;
  --er-line:#E7EBF2; --er-soft:#F4F7FC;
}

.erh{ --pad:1.25rem; }

/* ---------- hero ---------- */
.erh-hero{
  background:var(--er-soft); border-bottom:1px solid var(--er-line);
  padding:5rem var(--pad) 4rem; text-align:center;
  margin-inline:calc(50% - 50vw); /* full bleed inside a constrained page */
}
.erh-title{
  font-size:clamp(2.4rem,6vw,4.2rem); font-weight:800; letter-spacing:-.04em;
  line-height:1.02; color:var(--er-ink); margin:0 0 2.2rem;
}
.erh-searchwrap{
  position:relative; max-width:640px; margin:0 auto;
}
.erh-searchicon{
  position:absolute; left:1.6rem; top:50%; transform:translateY(-50%);
  width:20px; height:20px; fill:none; stroke:var(--er-meta);
  stroke-width:2; stroke-linecap:round; pointer-events:none;
}
.erh-search{
  width:100%; border:1px solid transparent; background:#fff;
  border-radius:999px; padding:1.15rem 1.6rem 1.15rem 3.5rem;
  font:inherit; font-size:1.05rem; color:var(--er-ink);
  box-shadow:0 4px 22px rgba(10,22,38,.07);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.erh-search::placeholder{ color:var(--er-meta); }
.erh-search:focus{
  outline:none; border-color:var(--er-blue);
  box-shadow:0 4px 26px rgba(16,99,226,.18);
}
.erh-count{ margin:1.1rem 0 0; font-size:.92rem; color:var(--er-meta); }

/* ---------- category tiles ---------- */
.erh-tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1rem; max-width:1240px; margin:3.5rem auto 0; padding:0 var(--pad);
}
.erh-tile{
  display:flex; flex-direction:column; gap:1.6rem;
  padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--er-line);
  border-radius:18px; background:#fff; text-decoration:none; color:var(--er-ink);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.erh-tile:hover{
  border-color:#C9D6EC; transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(10,22,38,.08);
}
.erh-tileicon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px; background:var(--er-soft);
  font-size:1.35rem; line-height:1;
}
.erh-tilename{ font-weight:600; font-size:1.02rem; line-height:1.3; }

/* ---------- sections + accordions ---------- */
.erh-sections{ max-width:840px; margin:0 auto; padding:0 var(--pad); }
.erh-section{ padding-top:4.5rem; scroll-margin-top:5rem; }
.erh-secttitle{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.03em;
  color:var(--er-ink); margin:0 0 .5rem;
}
.erh-sectdesc{ color:var(--er-muted); margin:0 0 1.6rem; font-size:1rem; }

.erh-acc{ border-top:1px solid var(--er-line); }
.erh-item{ border-bottom:1px solid var(--er-line); }
.erh-q{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem .25rem; cursor:pointer; list-style:none;
  font-size:1.06rem; font-weight:600; color:var(--er-ink); line-height:1.4;
  transition:color .18s ease;
}
.erh-q::-webkit-details-marker{ display:none; }
.erh-q:hover{ color:var(--er-blue); }
.erh-chev{
  flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--er-meta);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease, stroke .18s ease;
}
.erh-item[open] .erh-chev{ transform:rotate(180deg); stroke:var(--er-blue); }
.erh-a{
  padding:0 .25rem 1.6rem; color:var(--er-muted);
  font-size:1rem; line-height:1.75; max-width:68ch;
}
.erh-a > *:first-child{ margin-top:0; }
.erh-a > *:last-child{ margin-bottom:0; }
.erh-a a{ color:var(--er-blue); text-decoration:underline; text-underline-offset:3px; }
.erh-a ul, .erh-a ol{ padding-left:1.25rem; }
.erh-a li{ margin-block:.4rem; }

.erh-noresults{
  max-width:840px; margin:3.5rem auto 0; padding:0 var(--pad);
  text-align:center; color:var(--er-muted);
}

/* ---------- bottom CTA ---------- */
.erh-cta{
  max-width:840px; margin:5rem auto 6rem; padding:3.2rem 2rem;
  background:var(--er-ink); border-radius:28px; text-align:center; color:#fff;
}
.erh-ctatitle{
  font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-.03em;
  color:#fff; margin:0 0 .7rem;
}
.erh-ctatext{ color:#C3CEE2; margin:0 0 1.8rem; font-size:1.02rem; }
.erh-btn{
  border:0; cursor:pointer; font:inherit; font-weight:600; font-size:1rem;
  background:var(--er-blue); color:#fff; border-radius:999px; padding:.95rem 2.1rem;
  transition:background .18s ease, transform .18s ease;
}
.erh-btn:hover{ background:#0B4FBC; transform:translateY(-1px); }

/* =========================================================
   Report / contact modal
   ========================================================= */
.erm{ position:fixed; inset:0; z-index:9999; display:flex;
      align-items:center; justify-content:center; padding:1.25rem; }
.erm[hidden]{ display:none; }
.erm-backdrop{
  position:absolute; inset:0; background:rgba(10,22,38,.55);
  backdrop-filter:blur(3px); animation:erm-fade .22s ease;
}
.erm-panel{
  position:relative; width:100%; max-width:560px; max-height:90vh; overflow:auto;
  background:#fff; border-radius:26px; padding:2.4rem 2.2rem 2rem;
  box-shadow:0 30px 80px rgba(10,22,38,.35);
  animation:erm-pop .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes erm-fade{ from{opacity:0} to{opacity:1} }
@keyframes erm-pop{ from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){
  .erm-backdrop,.erm-panel{ animation:none; }
}

.erm-x{
  position:absolute; top:1.1rem; right:1.1rem; width:36px; height:36px;
  border:0; border-radius:50%; background:var(--er-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.erm-x:hover{ background:#E7EFFD; }
.erm-x svg{ width:16px; height:16px; fill:none; stroke:var(--er-ink); stroke-width:2; stroke-linecap:round; }

.erm-h{
  font-size:1.6rem; font-weight:800; letter-spacing:-.03em;
  color:var(--er-ink); margin:0 0 .4rem;
}
.erm-sub{ color:var(--er-muted); margin:0 0 1.6rem; font-size:.98rem; }

.erm-types{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-bottom:1.5rem; }
.erm-type input{ position:absolute; opacity:0; pointer-events:none; }
.erm-type span{
  display:block; padding:.8rem .9rem; border:1px solid var(--er-line);
  border-radius:13px; font-size:.93rem; font-weight:600; color:var(--er-ink);
  cursor:pointer; text-align:center; transition:all .16s ease;
}
.erm-type span:hover{ border-color:#C9D6EC; background:var(--er-soft); }
.erm-type input:checked + span{
  border-color:var(--er-blue); background:#E7EFFD; color:var(--er-blue);
  box-shadow:inset 0 0 0 1px var(--er-blue);
}
.erm-type input:focus-visible + span{ outline:2px solid var(--er-blue); outline-offset:2px; }

.erm-row{ margin-bottom:1rem; }
.erm-half{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.erm-lab{ display:block; font-size:.86rem; font-weight:600; color:var(--er-ink); margin-bottom:.4rem; }
.erm-lab span{ color:var(--er-meta); font-weight:400; }
.erm-in{
  width:100%; border:1px solid var(--er-line); border-radius:13px;
  padding:.8rem 1rem; font:inherit; font-size:.97rem; color:var(--er-ink);
  background:#fff; transition:border-color .16s ease, box-shadow .16s ease;
}
.erm-in:focus{ outline:none; border-color:var(--er-blue); box-shadow:0 0 0 3px rgba(16,99,226,.13); }
.erm-ta{ resize:vertical; min-height:110px; line-height:1.6; }
.erm-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; }

.erm-submit{
  width:100%; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:1rem;
  background:var(--er-blue); color:#fff; border-radius:999px; padding:1rem 1.5rem;
  margin-top:.6rem; transition:background .18s ease;
}
.erm-submit:hover:not(:disabled){ background:#0B4FBC; }
.erm-submit:disabled{ opacity:.6; cursor:default; }
.erm-legal{ font-size:.8rem; color:var(--er-meta); text-align:center; margin:.9rem 0 0; }
.erm-legal a{ color:var(--er-meta); }
.erm-err{
  margin:.9rem 0 0; padding:.75rem .95rem; border-radius:12px;
  background:#FDECEC; color:#9B1C1C; font-size:.9rem;
}

.erm-done{ text-align:center; padding:1.5rem 0 .5rem; }
.erm-tick{
  width:64px; height:64px; margin:0 auto 1.4rem; border-radius:50%;
  background:#E6F6EE; display:flex; align-items:center; justify-content:center;
}
.erm-tick svg{ width:28px; height:28px; fill:none; stroke:#0E9F6E; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

body.erm-open{ overflow:hidden; }

@media (max-width:640px){
  .erm-panel{ padding:2rem 1.3rem 1.6rem; border-radius:22px; }
  .erm-types{ grid-template-columns:1fr; }
  .erm-half{ grid-template-columns:1fr; }
  .erh-cta{ padding:2.4rem 1.3rem; margin-inline:var(--pad); }
}

/* line icons in the category tiles */
.erh-tileicon{ color:var(--er-blue); }
.erh-svg{ width:22px; height:22px; display:block; }
.erh-tile:hover .erh-tileicon{ background:#E7EFFD; }

/* inputs must include padding in their width */
.erm-in, .erh-search{ box-sizing:border-box; }
.erm-half > div{ min-width:0; }

@media (max-width:640px){
  .erh-tile{ gap:1rem; padding:1.1rem 1.1rem 1.2rem; }
  .erh-hero{ padding:3.5rem var(--pad) 3rem; }
}

/* help tiles: 4 across on desktop */
.erh-tiles{ grid-template-columns:repeat(4,1fr); max-width:1080px; }
@media (max-width:1000px){ .erh-tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .erh-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){  .erh-tiles{ grid-template-columns:1fr; } }

/* keep the cookie "Manage consent" tab clear of the live-chat bubble */
.er-has-chat #cmplz-manage-consent .cmplz-manage-consent{
  right:92px !important;
}
@media (max-width:600px){
  .er-has-chat #cmplz-manage-consent .cmplz-manage-consent{
    right:76px !important;
  }
}

/* inline "Contact us" links inside help answers */
.erh-a a[data-er-open-report]{
  color:#1063E2; font-weight:600; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.erh-a a[data-er-open-report]:hover{ color:#0B4FBC; }

/* help category icons in brand amber */
.erh-tileicon{ color:#D98F00; background:#FFF7E8; }
.erh-tile:hover .erh-tileicon{ background:#FFEFD0; color:#C07E00; }

/* amber icon, original pale chip behind it */
.erh-tileicon{ color:#D98F00; background:var(--er-soft); }
.erh-tile:hover .erh-tileicon{ background:#E7EFFD; color:#C07E00; }