/*
 * Homepage corrections, 4 Oct 2026.
 *
 * Hand-written. Deliberately NOT in epic.css or epic-site.css, both of which carry
 * "generated - see build_theme.py. Do not add rules here; they will be overwritten."
 * Loaded after them, so these rules win.
 */

/* ---------------------------------------------------------- the invisible hover ------------- */
/*
 * Paul: "when we put the cursor on this it changes color to black and you can no longer see what
 * you're about to click."
 *
 * .srhcta sits on the dark navy SRH panel in amber. It styled its underline and spacing on hover
 * but never its colour, so Astra's own `a:hover { color: var(--ast-global-color-1) }` took over
 * and painted it #1a1a1a - near-black on #04222F, a contrast ratio of 1.06:1. Invisible.
 *
 * I hovered every link on the homepage, the government, procurement, continuity and SRH pages -
 * 99 to 107 links each - and measured the contrast of the hover colour against what is actually
 * behind it. This was the only one that failed. The rest are left alone.
 */
.srhcta:hover,
.srhcta:focus,
.srhcta:focus-visible {
	color: #FFC65C;          /* a brighter amber, so hover still reads as a change */
	border-bottom-color: #FFC65C;
}

/* ---------------------------------------------------------- the service cards --------------- */
/*
 * Paul: "when you put your cursor on each card, the word 'Explore -->' shows up, but it does not
 * link to anything."
 *
 * The cards are now <a class="svc"> rather than <div class="svc">. The layout rules in epic.css
 * already set display:flex on .svc so the card itself is unchanged; these only stop a link's
 * default behaviour from leaking in.
 */
a.svc {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
/* Astra recolours every <a> on hover. Without this the whole card - heading and body text -
   turned near-black the moment the cursor touched it. */
a.svc:hover { color: inherit; }
a.svc:hover h3 { color: var(--blue); }
a.svc h3 { transition: color .22s; }
a.svc:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: -3px;
}

/* ---------------------------------------------------------- continuity link ----------------- */
/* The link out to the business-continuity page sits on the dark panel, under the six steps. */
.contin .srhcta { margin-top: 20px; }

/* ---------------------------------------------------------- certified documents band -------- */
/*
 * Paul: "Can we move this 'Need a certified personal document translation?' section up a bit so it
 * doesn't sit so close to the footer?"
 *
 * It was `padding-bottom:0` inside a section whose default top padding is up to 134px, directly
 * after another section that also ends with up to 134px - so there was an empty band roughly a
 * screen tall above it, and nothing at all below it before the footer began.
 */
.gatewrap {
	padding-top: clamp(30px, 3vw, 46px);
	padding-bottom: clamp(44px, 4.4vw, 68px);
}