/**
 * Senior HR Forum – Update 14: layered homepage + Join Us box.
 * Loads after brand.css. Homepage rules are scoped to .shf-home so other pages are untouched;
 * the Join Us box rules (.shf-subscribe) apply wherever the box is used.
 *
 * Layering ideas (after the Gutenify Bizvero demo homepage):
 * sections overlap each other with rounded edges, cards sit over soft shapes and offset
 * blocks, the bento columns are staggered, the events header sits on a split teal band
 * that the event cards overlap, and the Join Us panel straddles the footer.
 */

/* ---------- Page canvas: allow overlaps, never sideways scroll ---------- */
.shf-home { overflow-x: clip; }
.shf-home > .shf-home-section { position: relative; }

/* ---------- 1. About: lifts over the hero skyline ---------- */
.shf-home .shf-about {
	margin-top: -72px !important;
	z-index: 9; /* the parent theme puts every Cover (the hero) on z-index 8 */
	border-radius: 56px 56px 0 0;
	box-shadow: 0 -20px 50px rgba(11, 26, 51, 0.10);
	padding-top: calc(var(--wp--preset--spacing--60) + 8px) !important;
	overflow: visible;
}
/* Soft shapes behind the content */
.shf-home .shf-about::before,
.shf-home .shf-about::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	border-radius: 50%;
}
.shf-home .shf-about::before {
	width: 420px; height: 420px; left: -160px; top: 120px;
	background: radial-gradient(circle at 60% 40%, rgba(34, 184, 207, 0.20), rgba(34, 184, 207, 0) 68%);
}
.shf-home .shf-about::after {
	width: 560px; height: 560px; right: -220px; top: 46%;
	border: 1.5px solid rgba(11, 106, 133, 0.12);
	outline: 1.5px solid rgba(11, 106, 133, 0.07);
	outline-offset: 44px;
}
.shf-home .shf-about > * { position: relative; z-index: 1; }

/* Intro becomes a floating white card on an offset teal block */
.shf-home .shf-about__split { align-items: center !important; }
.shf-home .shf-about__intro {
	position: relative;
	isolation: isolate;
	border-left: 0 !important;
	padding: 36px 36px 34px !important;
	margin-top: 8px;
}
.shf-home .shf-about__intro::before,
.shf-home .shf-about__intro::after { content: ""; position: absolute; border-radius: 26px; pointer-events: none; }
.shf-home .shf-about__intro::after {
	inset: 0;
	z-index: -1;
	background: #fff;
	box-shadow: 0 24px 50px rgba(11, 106, 133, 0.14);
}
.shf-home .shf-about__intro::before {
	inset: 22px -18px -18px 22px;
	z-index: -2;
	background: linear-gradient(150deg, var(--shf-cyan) 0%, var(--shf-teal) 100%);
}
.shf-home .shf-about__intro .shf-about__lead { color: var(--shf-slate); }
/* Headline: a thin orange accent bar that hangs into the margin */
.shf-home .shf-about__text { position: relative; padding-top: 6px; }

/* ---------- 2. Numbers bento: staggered, overlapping tiles ---------- */
.shf-home .shf-bento { position: relative; isolation: isolate; align-items: stretch; }
.shf-home .shf-bento::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 18%; right: 18%; top: 12%; bottom: -6%;
	border-radius: 48px;
	background: linear-gradient(135deg, rgba(34, 184, 207, 0.16), rgba(11, 106, 133, 0.06));
	transform: rotate(-3deg);
	pointer-events: none;
}
.shf-home .shf-bento__col--1 { padding-bottom: 56px; }
.shf-home .shf-bento__col--2 { margin-top: 56px !important; }
.shf-home .shf-bento__col--3 { margin-top: 28px !important; margin-bottom: 28px !important; }
/* A light card sits over the tile below it */
.shf-home .shf-bento__col > .shf-stat--light { position: relative; z-index: 2; }
.shf-home .shf-bento__col--1 > .shf-stat--light { margin-right: -14px !important; }
.shf-home .shf-bento__col--1 > .shf-bento__card--years { margin-top: -46px !important; padding-top: 70px !important; margin-left: 18px !important; }
.shf-home .shf-bento__col--3 > .shf-stat--light { margin-left: -14px !important; }
.shf-home .shf-bento__col--3 > .wp-block-html,
.shf-home .shf-bento__col--3 > .shf-bento__visual { margin-top: -46px !important; flex: 1 1 auto; }
.shf-bento__card--years .shf-stat__num { font-size: clamp(3.4rem, 2.2rem + 3vw, 5rem) !important; }

/* Decorative tile: rings, dot grid and the logo mark, no text */
.shf-bento__visual {
	position: relative;
	overflow: hidden;
	min-height: 240px;
	height: 100%;
	border-radius: 24px;
	background:
		radial-gradient(80% 70% at 85% 100%, rgba(34, 184, 207, 0.55) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(160deg, #D3EEF4 0%, #BFE8F0 100%);
	box-shadow: inset 0 0 0 1px rgba(11, 106, 133, 0.10);
}
.shf-bento__visual-ring {
	position: absolute;
	width: 300px; height: 300px;
	left: -90px; bottom: -150px;
	border-radius: 50%;
	border: 26px solid rgba(11, 106, 133, 0.85);
	box-shadow: 0 0 0 26px rgba(34, 184, 207, 0.25);
}
.shf-bento__visual-dots {
	position: absolute;
	top: 64px; right: 24px;
	width: 132px; height: 96px;
	background-image: radial-gradient(rgba(11, 106, 133, 0.45) 1.6px, transparent 1.8px);
	background-size: 14px 14px;
}
.shf-bento__visual-chip {
	position: absolute;
	right: 34px; bottom: 30px;
	width: 84px; height: 84px;
	border-radius: 24px;
	background: #fff url("../images/logo/shf-mark-fullcolour.svg") center / 52px no-repeat;
	box-shadow: 0 16px 34px rgba(11, 26, 51, 0.16);
	transform: rotate(-6deg);
}
.shf-bento__visual::after {
	content: "";
	position: absolute;
	left: 40px; top: 88px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--shf-sunset);
	box-shadow: 0 0 0 7px rgba(255, 122, 26, 0.18);
}

/* ---------- 3. Events: split teal band that the cards overlap ---------- */
.shf-home .shf-events { padding-top: 0 !important; }
.shf-home .shf-events::before { z-index: 2; opacity: 0.5; }
.shf-home .shf-events-head {
	position: relative;
	z-index: 1;
	padding: calc(var(--wp--preset--spacing--60) + 8px) 0 96px;
	color: #fff;
}
.shf-home .shf-events-head::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0; bottom: 0;
	left: calc(50% - 50vw);
	right: 9%;
	border-radius: 0 0 72px 0;
	background:
		radial-gradient(50% 80% at 100% 0%, rgba(34, 184, 207, 0.45) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(150deg, #0B6A85 0%, #08546A 100%);
}
.shf-home .shf-events-head::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: calc(9% - 34px); top: 64px;
	width: 120px; height: 120px;
	background-image: radial-gradient(rgba(11, 106, 133, 0.45) 1.6px, transparent 1.8px);
	background-size: 14px 14px;
}
.shf-home .shf-events-head .shf-kicker { color: #fff !important; }
.shf-home .shf-events-head .shf-events__title { color: #fff !important; }
.shf-home .shf-events-head .shf-section__lead { color: #E3F3F7; }
.shf-home .shf-events-head__top { margin-bottom: 26px !important; }
.shf-home .shf-events-head__bar { border-top-color: rgba(255, 255, 255, 0.28); padding-right: 11%; }
.shf-home .shf-events-head .shf-event-chips a { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.shf-home .shf-events-head .shf-event-chips a:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.shf-home .shf-events-head .shf-event-chips a:focus-visible { outline-color: #fff; }
.shf-home .shf-events-head .shf-btn-dark .wp-block-button__link { background: #fff !important; color: var(--shf-ink) !important; }
.shf-home .shf-events-head .shf-btn-dark .wp-block-button__link:hover,
.shf-home .shf-events-head .shf-btn-dark .wp-block-button__link:focus-visible { background: var(--shf-cyan-soft) !important; }
.shf-home .shf-events-head .shf-btn-dark .wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Cards rise over the bottom of the band. A tighter card shadow, so it is not cut off
   in a hard-edged grey strip by the sideways-scrolling row. */
.shf-home .shf-event-slider .wp-block-post-template > li > * { box-shadow: 0 4px 12px rgba(11, 26, 51, 0.08) !important; }
.shf-home .shf-event-slider { margin-top: -66px !important; z-index: 3; }

/* ---------- 4. Articles: dark band slides up over Events, staggered cards ---------- */
.shf-home .shf-mix {
	z-index: 10;
	margin-top: -40px !important;
	border-radius: 72px 0 0 0;
	padding-bottom: calc(var(--wp--preset--spacing--60) + 64px) !important;
}
.shf-home .shf-mix-grid .wp-block-post-template { align-items: start; }
.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(2) { margin-top: 48px !important; height: 400px; }
.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(3) { margin-top: -24px !important; height: 420px; }
.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(1) { height: 470px; }

/* ---------- 5. Tools & Templates: lifts over the Articles band ---------- */
.shf-home .shf-tools {
	z-index: 11;
	margin-top: -56px !important;
	border-radius: 0 72px 0 0;
}

/* ---------- 6. Join Us: panel straddles the footer ---------- */
.shf-home .shf-join-band {
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: 0 !important;
	background: linear-gradient(180deg, var(--shf-cyan-soft) 0%, #EEF9FB 62%, var(--shf-ink) 62%, var(--shf-ink) 100%) !important;
}
.shf-home .shf-join-band + * { margin-top: 0 !important; }

/* ---------- Join Us box (everywhere it is used) ---------- */
.shf-subscribe {
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(34, 184, 207, 0.40) 0%, rgba(34, 184, 207, 0) 70%),
		linear-gradient(150deg, #0B6A85 0%, #08546A 100%);
	box-shadow: 0 30px 60px rgba(11, 26, 51, 0.24);
	border-radius: 28px;
}
.shf-subscribe::after {
	content: "";
	position: absolute;
	left: -70px; bottom: -110px;
	width: 240px; height: 240px;
	border-radius: 50%;
	border: 22px solid rgba(255, 255, 255, 0.08);
	pointer-events: none;
}
.shf-subscribe .shf-kicker { color: #fff !important; }
.shf-subscribe__text { color: #E3F3F7 !important; }
.shf-subscribe__cta { margin: 0 0 6px !important; }
.shf-btn-subscribe .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	justify-content: center;
	padding: 18px 34px !important;
	border-radius: 999px !important;
	background: var(--shf-sunset) !important;
	color: var(--shf-ink) !important; /* 6.7:1 on the orange */
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	box-shadow: 0 14px 30px rgba(255, 122, 26, 0.32);
	transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.shf-btn-subscribe .wp-block-button__link::after {
	content: "";
	width: 22px; height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .22s ease;
}
.shf-btn-subscribe .wp-block-button__link:hover,
.shf-btn-subscribe .wp-block-button__link:focus-visible {
	background: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(11, 26, 51, 0.28);
}
.shf-btn-subscribe .wp-block-button__link:hover::after,
.shf-btn-subscribe .wp-block-button__link:focus-visible::after { transform: translateX(5px); }
.shf-btn-subscribe .wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.shf-subscribe__or { margin: 34px auto 14px !important; color: #E3F3F7 !important; font-size: 0.95rem; letter-spacing: 0.01em; word-spacing: 0.14em; max-width: 420px; }
.shf-subscribe__or::before, .shf-subscribe__or::after { background: rgba(255, 255, 255, 0.3) !important; }
.shf-subscribe__alt { gap: 10px !important; }
.shf-btn-follow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px 9px 14px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.10) !important;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff !important;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color .18s ease, border-color .18s ease;
}
.shf-btn-follow .wp-block-button__link::before {
	content: "";
	width: 18px; height: 18px;
	flex: 0 0 18px;
	background: currentColor;
}
.shf-btn-follow--li .wp-block-button__link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.06c.53-1 1.83-2.06 3.77-2.06C21.1 9.04 22 11.4 22 14.5V21h-4v-5.8c0-1.38-.03-3.16-1.93-3.16-1.93 0-2.22 1.5-2.22 3.06V21h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9.5 9.5h3.8v1.6h.06c.53-1 1.83-2.06 3.77-2.06C21.1 9.04 22 11.4 22 14.5V21h-4v-5.8c0-1.38-.03-3.16-1.93-3.16-1.93 0-2.22 1.5-2.22 3.06V21h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shf-btn-follow--fb .wp-block-button__link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 21v-7.6h2.6l.4-3h-3V8.5c0-.9.3-1.5 1.5-1.5h1.6V4.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.9v3h2.6V21h3.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.6 21v-7.6h2.6l.4-3h-3V8.5c0-.9.3-1.5 1.5-1.5h1.6V4.3c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.9v3h2.6V21h3.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.shf-btn-follow .wp-block-button__link:hover,
.shf-btn-follow .wp-block-button__link:focus-visible { background: rgba(255, 255, 255, 0.2) !important; border-color: #fff; }
.shf-btn-follow .wp-block-button__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
	.shf-home .shf-bento__col--1, .shf-home .shf-bento__col--2 { padding-bottom: 0; }
	.shf-home .shf-bento__col--2 { margin-top: 36px !important; }
	.shf-home .shf-bento__col--3 { margin: 0 !important; }
	.shf-home .shf-bento__col--3 > .wp-block-html,
	.shf-home .shf-bento__col--3 > .shf-bento__visual,
	.shf-home .shf-bento__col--3 > .shf-stat--light { margin: 0 !important; }
	.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(n) { margin-top: 0 !important; }
	.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(3) { margin-top: 32px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
	.shf-home .shf-about { margin-top: -48px !important; border-radius: 32px 32px 0 0; }
	.shf-home .shf-about__intro { padding: 26px 22px 24px !important; margin-right: 12px; }
	.shf-home .shf-about__intro::before { inset: 14px -12px -12px 14px; }
	.shf-home .shf-bento::before { left: 6%; right: 6%; }
	.shf-home .shf-bento__col--2 { margin-top: 0 !important; }
	.shf-home .shf-bento__col--1 > .shf-stat--light { margin-right: 18px !important; }
	.shf-home .shf-bento__col--1 > .shf-bento__card--years { margin: -34px 0 0 18px !important; padding-top: 56px !important; }
	.shf-home .shf-bento__col--3 > .shf-stat--light { margin: 0 0 0 18px !important; }
	.shf-home .shf-bento__col--3 > .wp-block-html,
	.shf-home .shf-bento__col--3 > .shf-bento__visual { margin: -34px 18px 0 0 !important; }
	.shf-bento__visual { min-height: 190px; }
	.shf-bento__visual-dots { display: none; }
	.shf-bento__visual::after { left: auto; right: 140px; top: auto; bottom: 46px; }
	.shf-home .shf-events-head { padding-bottom: 84px; }
	.shf-home .shf-events-head::before { right: -6px; border-radius: 0 0 40px 0; }
	.shf-home .shf-events-head::after { display: none; }
	.shf-home .shf-events-head__bar { padding-right: 0; }
	.shf-home .shf-event-slider { margin-top: -56px !important; }
	.shf-home .shf-mix { border-radius: 40px 0 0 0; }
	.shf-home .shf-mix-grid .wp-block-post-template > li:nth-child(n) { margin-top: 0 !important; }
	.shf-home .shf-tools { border-radius: 0 40px 0 0; }
	.shf-btn-subscribe { width: 100%; }
	.shf-btn-subscribe .wp-block-button__link { width: 100%; box-sizing: border-box; min-width: 0; }
	.shf-btn-follow { flex: 0 1 auto !important; }
	.shf-btn-follow .wp-block-button__link { width: auto !important; min-width: 0; }
}