/* Senior HR Forum v1.8.0 (loads after every earlier layer).
 * 1. Events 60+ ring: orbiting orange dot
 * 2. Homepage Articles: McKinsey-style staggered photo cards (restored from v1.3.0-v1.4.1)
 * 3. Article type label + tidier article page
 * 4. Homepage hero: crisp skyline, light patch only behind the words
 * 5. Contact: orange dot after "touch"
 * 6. Join page
 */

/* ===================== 1. Events 60+ ring: the orange dot keeps orbiting ===================== */
.shf-hero-stat__rings::after { display: none; }
.shf-hero-stat__orbit {
	position: absolute; inset: -1px; border-radius: 50%;
	transform: rotate(42deg);
	pointer-events: none;
}
.shf-hero-stat__dot {
	position: absolute; left: 50%; top: 0;
	width: 10px; height: 10px; margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--shf-sunset, #FF7A1A);
	box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.20), 0 0 14px rgba(255, 122, 26, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
	@keyframes shf-v18-orbit { from { transform: rotate(42deg); } to { transform: rotate(402deg); } }
	.shf-hero-stat__orbit { animation: shf-v18-orbit 26s linear infinite; will-change: transform; }
	.shf-hero-stat.is-offscreen .shf-hero-stat__orbit { animation-play-state: paused; }
	.editor-styles-wrapper .shf-hero-stat__orbit { animation: none; }
}

/* ===================== 2. Homepage Articles (McKinsey style) ===================== */
.shf-mck {
	background:
		radial-gradient(55% 60% at 92% 8%, rgba(34, 184, 207, 0.22) 0%, rgba(34, 184, 207, 0) 70%),
		radial-gradient(45% 50% at 0% 100%, rgba(34, 184, 207, 0.10) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(155deg, #063F50 0%, #08546A 38%, #063F50 72%, #0B1A33 100%) !important;
	position: relative;
}
.shf-home .shf-mck {
	z-index: 10;
	margin-top: -40px !important;
	border-radius: 72px 0 0 0;
	padding-bottom: calc(var(--wp--preset--spacing--60) + 64px) !important;
}
.shf-mck-layout {
	display: grid;
	grid-template-columns: 1fr 1fr 1.15fr;
	column-gap: 28px;
	row-gap: 44px;
	align-items: start;
}
.shf-mck-layout > * { margin: 0 !important; }
.shf-mck-head { grid-column: 1 / span 2; grid-row: 1; padding-top: 8px; }
.shf-mck-head > * { margin: 0 !important; }
.shf-mck-grid, .shf-mck-grid .wp-block-post-template { display: contents; }
.shf-mck-grid .wp-block-post-template > li { margin: 0 !important; min-width: 0; list-style: none; }
.shf-mck-grid .wp-block-post-template > li:nth-child(1) { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; min-height: 600px; }
.shf-mck-grid .wp-block-post-template > li:nth-child(2) { grid-column: 1; grid-row: 2; height: 400px; }
.shf-mck-grid .wp-block-post-template > li:nth-child(3) { grid-column: 2; grid-row: 2; height: 400px; margin-top: 72px !important; }
.shf-mck-grid .wp-block-post-template > li:nth-child(n+4) { display: none; }
.shf-mck__kicker {
	margin: 0 0 18px !important;
	color: var(--shf-cyan-bright) !important;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.78rem;
	font-weight: 700;
}
.shf-mck__title {
	color: #fff !important;
	font-size: clamp(2.4rem, 1.1rem + 3.9vw, 4.3rem) !important;
	line-height: 1.04 !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em;
	text-transform: none !important;
	margin: 0 !important;
}
.shf-mck__l1, .shf-mck__l2 { display: block; }
.shf-mck__l2 { padding-left: 1.4em; }
.shf-mck__row { gap: 32px !important; margin-top: 30px !important; align-items: center; }
.shf-mck__lead { color: #D6E4EA; font-size: 1rem; line-height: 1.6; max-width: 44ch; margin: 0 !important; }
.shf-mck .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.shf-mck__all { margin: 40px 0 0 !important; text-align: right; }
.shf-mck__all a { color: #fff; font-weight: 600; text-underline-offset: 5px; }
.shf-mck__all a:hover { color: var(--shf-cyan-bright); }
/* Card: the post's own picture under a deep-teal scrim; plain brand pattern when a post has no picture. */
.shf-mck-card {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background:
		radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.6px) 0 0 / 18px 18px,
		radial-gradient(80% 70% at 85% 15%, rgba(34, 184, 207, 0.45) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(140deg, #0B6A85 0%, #08546A 55%, #063F50 100%);
	box-shadow: 0 24px 50px rgba(2, 20, 28, 0.35);
}
.shf-mck-card__image { position: absolute !important; inset: 0; margin: 0 !important; height: 100%; }
.shf-mck-card__image img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s ease; }
.shf-mck-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 36, 48, 0.96) 0%, rgba(4, 36, 48, 0.84) 36%, rgba(4, 36, 48, 0.22) 62%, rgba(4, 36, 48, 0.55) 80%, rgba(4, 36, 48, 0.95) 100%);
	pointer-events: none;
}
.shf-mck-card:hover .shf-mck-card__image img { transform: scale(1.04); }
.shf-mck-card__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 12px;
	padding: 28px 28px 22px;
}
.shf-mck-card__body > * { margin: 0 !important; }
.shf-mck-card__label {
	color: var(--shf-cyan-bright) !important;
	font-size: 0.78rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.shf-mck-card__title {
	font-size: clamp(1.3rem, 1rem + 0.9vw, 1.65rem) !important;
	line-height: 1.24 !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: -0.005em;
}
.shf-mck-card__title a { color: #fff !important; text-decoration: none; }
.shf-mck-card__title a::after { content: ""; position: absolute; inset: 0; }
.shf-mck-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.shf-mck-card__title a:focus-visible { outline: none; }
.shf-mck-card:focus-within { outline: 3px solid var(--shf-cyan); outline-offset: 3px; }
.shf-mck-grid li:nth-child(1) .shf-mck-card__title { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem) !important; line-height: 1.15 !important; }
.shf-mck-grid li:nth-child(1) .shf-mck-card__body { padding: 36px 34px 26px; }
.shf-mck-card__date { margin-top: auto !important; color: #D0DEE4; font-size: 0.86rem; }
.shf-mck-card__date a { color: inherit; }
@media (max-width: 960px) {
	.shf-mck-layout { grid-template-columns: 1fr 1fr; row-gap: 22px; column-gap: 22px; }
	.shf-mck-head { grid-column: 1 / span 2; margin-bottom: 18px !important; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(1) { grid-column: 1 / span 2; grid-row: auto; min-height: 0; height: 440px; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(2) { grid-column: 1; grid-row: auto; height: 360px; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(3) { grid-column: 2; grid-row: auto; height: 360px; margin-top: 40px !important; }
}
@media (max-width: 600px) {
	.shf-home .shf-mck { border-radius: 40px 0 0 0; }
	.shf-mck-layout { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.shf-mck-head { grid-column: 1; }
	.shf-mck__l2 { padding-left: 1em; }
	.shf-mck__row { gap: 18px !important; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(n) { grid-column: 1; margin-top: 0 !important; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(1) { height: 380px; }
	.shf-mck-grid .wp-block-post-template > li:nth-child(2),
	.shf-mck-grid .wp-block-post-template > li:nth-child(3) { height: 300px; }
	.shf-mck-grid li:nth-child(1) .shf-mck-card__body { padding: 26px 24px 20px; }
	.shf-mck-card::after { background: linear-gradient(180deg, rgba(4, 36, 48, 0.96) 0%, rgba(4, 36, 48, 0.88) 50%, rgba(4, 36, 48, 0.45) 66%, rgba(4, 36, 48, 0.92) 84%, rgba(4, 36, 48, 0.97) 100%); }
	.shf-mck__all { text-align: left; margin-top: 28px !important; }
}

/* ===================== 3. Article type label + article page ===================== */
.shf-type-pill {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 !important;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var(--shf-teal, #0B6A85);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--maven-pro);
	font-size: 0.78rem !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.shf-type-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--shf-sunset, #FF7A1A); }
.shf-type-pill:empty { display: none; }

/* Header: left-aligned, one clear line of meta, then the title, then the date. */
.shf-article-head--v18 { text-align: left; }
.shf-article-head--v18 > * { margin-left: auto !important; margin-right: auto !important; }
.shf-article-head--v18 .shf-article-head__meta { gap: 14px !important; margin-bottom: 18px !important; }
.shf-article-head--v18 .shf-article-head__cats { margin: 0 !important; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.shf-article-head--v18 .shf-article-head__cats a:not(:first-child),
.shf-article-head--v18 .shf-article-head__cats .wp-block-post-terms__separator { display: none; }
.shf-article-head--v18 .shf-article-head__cats a { color: var(--shf-teal-dark, #084F63) !important; }
.shf-article-head--v18 .shf-article-head__title {
	text-align: left !important;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em;
	margin-top: 0 !important; margin-bottom: 0 !important; text-wrap: balance;
}
.shf-article-head--v18 .shf-article-head__date,
.shf-article-head--v18 .shf-article-head__date time { text-align: left; }
.shf-article-head--v18 .shf-article-head__date { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid rgba(11, 106, 133, 0.18); color: var(--shf-slate); font-size: 0.95rem; }

/* Body: one rhythm for everything. */
.shf-article--v18 > * { margin-block-start: 0 !important; }
.shf-article--v18 > * + * { margin-block-start: 40px !important; }
.shf-article--v18 .shf-article__image { margin-top: 8px !important; }
.shf-article--v18 .shf-article__image img { border-radius: 14px; box-shadow: none; border: 1px solid var(--shf-line, #DCE8EC); }
.shf-article--v18 .shf-article__content { font-size: 1.08rem; line-height: 1.75; }
.shf-article--v18 .shf-article__content > * + * { margin-block-start: 1.1em; }
.shf-article--v18 .shf-article__content :is(h2, h3, h4) { margin-block-start: 1.9em; margin-block-end: 0.4em; line-height: 1.25; }
.shf-article--v18 .shf-article__content p:empty { display: none; }
.shf-article--v18 .shf-article__content img { border-radius: 10px; }
.shf-article--v18 .shf-article__content figure { margin-block: 1.6em; }
/* One quiet line instead of the boxed question. */
.shf-article--v18 .shf-article__join {
	background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	padding: 22px 0 0 !important; border-top: 1px solid var(--shf-line, #DCE8EC) !important;
	color: var(--shf-slate); font-size: 1rem;
}
.shf-article--v18 .shf-article__join a { color: var(--shf-teal-dark, #084F63); font-weight: 700; text-decoration: none; }
.shf-article--v18 .shf-article__join a::after { content: " \2192"; color: var(--shf-teal, #0B6A85); } /* v1.8.8: was orange */
.shf-article--v18 .shf-article__join a:hover { text-decoration: underline; }
/* Previous / next: two even tiles. */
.shf-article__pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.shf-article__pager > * { margin: 0 !important; }
.shf-article--v18 .shf-article__nav {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 20px; border: 1px solid var(--shf-line, #DCE8EC); border-radius: 14px; background: #fff;
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--shf-slate);
	transition: border-color .2s ease, transform .2s ease;
}
.shf-article--v18 .shf-article__nav:hover { border-color: var(--shf-teal, #0B6A85); transform: translateY(-2px); }
.shf-article--v18 .shf-article__nav a {
	display: block;
	font-family: var(--wp--preset--font-family--maven-pro);
	font-size: 1.02rem; letter-spacing: 0; text-transform: none; line-height: 1.35;
	color: var(--shf-ink) !important; text-decoration: none;
}
.shf-article--v18 .shf-article__nav a::after { content: ""; position: absolute; inset: 0; }
.shf-article--v18 .shf-article__nav { position: relative; }
.shf-article--v18 .shf-article__nav--next { text-align: right; align-items: flex-end; }
.shf-article--v18 .shf-article__nav:empty { display: none; }
.shf-article__pager:has(.shf-article__nav--prev:empty) .shf-article__nav--next { grid-column: 2; }
@media (max-width: 600px) {
	.shf-article__pager { grid-template-columns: minmax(0, 1fr); }
	.shf-article--v18 .shf-article__nav--next { text-align: left; align-items: flex-start; grid-column: auto !important; }
	.shf-article--v18 > * + * { margin-block-start: 32px !important; }
}
@media (prefers-reduced-motion: reduce) { .shf-article--v18 .shf-article__nav:hover { transform: none; } }

/* ===================== 4. Homepage hero (v1.8.5): light glass tower ===================== */
/* Glass tower under a bright sky (Acres of Film, Pexels 31373163). v1.8.18: regraded clearer (dehazed, clean light-blue sky, crisp clouds, calmer building).
   A soft light fade sits only behind the words on the left, so the tower and the sky stay crisp.
   WebP with a JPEG fallback (inc/v18.php). */
.shf-hero--v15.wp-block-cover { background: #E4F1F5; }
.shf-hero--v15 .shf-hero__picture { display: contents; }
.shf-hero--v15 .wp-block-cover__image-background { object-position: 50% 45% !important; filter: none !important; }
.shf-hero--v15 .wp-block-cover__background {
	/* v1.8.18: a soft, narrow light fade on the left behind the headline only (was a heavy pale wash
	   over the left half and the lower right); nothing over the tower or the sky on the right. */
	opacity: 1 !important; z-index: 1;
	background:
		linear-gradient(90deg, rgba(238, 248, 251, 0.80) 0%, rgba(238, 248, 251, 0.68) 30%, rgba(238, 248, 251, 0.50) 42%, rgba(238, 248, 251, 0.14) 54%, rgba(238, 248, 251, 0) 64%) !important;
}
.shf-hero--v15 .shf-proof { background: rgba(255, 255, 255, 0.88); box-shadow: 0 14px 34px rgba(11, 26, 51, 0.16); }
.shf-hero--v15 .shf-btn-light .wp-block-button__link { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 10px 26px rgba(11, 26, 51, 0.14); }
.shf-hero--v15 .shf-btn-primary .wp-block-button__link { box-shadow: 0 10px 26px rgba(11, 26, 51, 0.18); }
@media (max-width: 900px) {
	.shf-hero--v15 .wp-block-cover__background {
		background: linear-gradient(180deg, rgba(238, 248, 251, 0.86) 0%, rgba(238, 248, 251, 0.72) 42%, rgba(238, 248, 251, 0) 66%) !important;
	}
	.shf-hero--v15 .wp-block-cover__image-background { object-position: 50% 40% !important; }
}

/* ===================== 5. Contact + Join: the orange dot after the last letter ===================== */
.shf-dot--h {
	display: inline-block;
	width: 0.2em; height: 0.2em;
	margin-left: 0.07em;
	border-radius: 50%;
	background: var(--shf-sunset, #FF7A1A);
	box-shadow: 0 0 0 0.07em rgba(255, 122, 26, 0.18);
	vertical-align: baseline;
}

/* ===================== 6. Social buttons and option chips (Contact page form) ===================== */
.shf-join-social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px !important; }
.shf-join-social__btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 22px; border-radius: 999px;
	font-family: var(--wp--preset--font-family--maven-pro); font-weight: 700; font-size: 1rem; text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.shf-join-social__btn--li { background: var(--shf-teal); color: #fff; box-shadow: 0 10px 22px rgba(11, 106, 133, 0.25); }
.shf-join-social__btn--fb { background: #fff; color: var(--shf-teal-dark); border: 1.5px solid rgba(11, 106, 133, 0.35); }
.shf-join-social__btn:hover, .shf-join-social__btn:focus-visible { transform: translateY(-2px); }
.shf-join-social__btn--li:hover { background: var(--shf-teal-dark); }
.shf-join-social__btn:focus-visible { outline: 3px solid var(--shf-teal-dark); outline-offset: 3px; }

.shf-mform__cats { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.shf-mform__cats legend { padding: 0; margin-bottom: 10px; font-size: 0.92rem; font-weight: 700; color: var(--shf-ink); }
.shf-mform__options { display: flex; flex-wrap: wrap; gap: 10px; }
.shf-mform__option { position: relative; cursor: pointer; }
.shf-mform__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shf-mform__option span {
	display: inline-block; padding: 10px 18px; border-radius: 999px;
	border: 1.5px solid var(--shf-line, #DCE8EC); background: #F6FBFC;
	font-family: var(--wp--preset--font-family--maven-pro); font-weight: 700; font-size: 0.95rem; color: var(--shf-ink);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.shf-mform__option:hover span { border-color: var(--shf-cyan); }
.shf-mform__option input:checked + span { background: var(--shf-teal); border-color: var(--shf-teal); color: #fff; }
.shf-mform__option input:focus-visible + span { outline: 3px solid var(--shf-teal-dark); outline-offset: 2px; }
.shf-mform__check label { display: flex; align-items: center; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.shf-mform__check input { width: 18px; height: 18px; accent-color: var(--shf-teal); }

@media (prefers-reduced-motion: reduce) { .shf-join-social__btn:hover { transform: none; } }
/* Pager labels (the block shows only the arrow and the title when the label is not part of the link). */
.shf-article--v18 .shf-article__nav [class*="__arrow-"] { display: none; }
/* v1.8.11: the "Previous …" / "Next …" labels are real text now, chosen per kind of post (inc/v1811.php, assets/css/v1811.css). */

/* ===================== 7. v1.8.1: shared Contact form (enquiry + membership) ===================== */
#message { scroll-margin-top: 96px; }
.shf-cform__mode { margin-bottom: 22px; }
.shf-cform [hidden] { display: none !important; }
.shf-cform__opt { font-weight: 400; color: var(--shf-slate); }
.shf-cform__perk {
	margin: 16px 0 0 !important; padding: 12px 16px; border-radius: 12px;
	background: var(--shf-cyan-soft, #DFF4F8); color: var(--shf-teal-dark, #08546A); font-size: 0.95rem;
}
.shf-contact-social { margin-top: 6px !important; gap: 10px; }
.shf-contact-social .shf-join-social__btn { padding: 10px 18px; font-size: 0.95rem; }
.shf-contact-row--follow { align-items: start; }

/* ===================== 8. v1.8.1: "Subscribe now" hover, same motion as "Join us" in a light colour ===================== */
/* Same effect as the header "Join us" button (lift, soft glow ring, colour fades in, light sheen sweeps
   across), but in light mist-to-cyan instead of teal, with ink text (7:1 or more on every part of the
   gradient). No orange and no dark colour on hover (Susanne, 23 Oct 2026). */
.shf-btn-subscribe .wp-block-button__link {
	position: relative; overflow: hidden; isolation: isolate;
	/* v1.8.8: no background-color fade, so the hover never passes through orange/peach tints; the
	   mist-to-cyan layer (::before) fades in instead. The shadow (orange glow at rest) also switches without a fade. */
	transition: transform .2s ease, color .2s ease !important;
}
.shf-btn-subscribe .wp-block-button__link::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background:
		linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 62%) no-repeat,
		linear-gradient(110deg, #DDF6FA 0%, #22B8CF 100%);
	background-size: 260% 100%, 100% 100%;
	background-position: 140% 0, 0 0;
	opacity: 0; transition: opacity .25s ease;
}
.shf-btn-subscribe .wp-block-button__link:hover,
.shf-btn-subscribe .wp-block-button__link:focus-visible {
	background: #DDF6FA !important;
	color: var(--shf-ink, #0B1A33) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(4, 30, 40, 0.28), 0 0 0 4px rgba(34, 184, 207, 0.30) !important;
}
.shf-btn-subscribe .wp-block-button__link:hover::before,
.shf-btn-subscribe .wp-block-button__link:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.shf-btn-subscribe .wp-block-button__link:hover::before,
	.shf-btn-subscribe .wp-block-button__link:focus-visible::before { background-position: -40% 0, 0 0; transition: opacity .25s ease, background-position .7s ease; }
}
@media (prefers-reduced-motion: reduce) {
	.shf-btn-subscribe .wp-block-button__link:hover, .shf-btn-subscribe .wp-block-button__link:focus-visible { transform: none; }
}
.shf-btn-subscribe .wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Light hero button ("Read the latest articles"): its hover ring was orange; now brand cyan. */
.shf-btn-light .wp-block-button__link:hover,
.shf-btn-light .wp-block-button__link:focus-visible { border-color: var(--shf-cyan, #22B8CF) !important; }

/* ===================== 9. v1.8.1: Events header always light on the dark band ===================== */
.shf-events-hero :is(.shf-events-hero__title, h1) { color: #fff !important; }
.shf-events-hero .shf-kicker { color: #9FE7F2 !important; }
.shf-events-hero .shf-events-hero__intro { color: #E3EEF2 !important; }