/* Site-wide hover interactions: buttons (colour sweep), social icons, and text links (animated underline).
   Each button picks its sweep colour (--btn-hb) and text colour (--btn-hc) from where it sits, so nothing vanishes into its background.
   Loaded on every front-end page. */

.wp-block-button__link,
.wp-element-button,
input[type="submit"].wp-block-button__link,
#mc-embedded-subscribe {
	--btn-hb: #0d314e; /* sweep colour (navy) */
	--btn-hc: #fff;    /* text colour while hovered */
	background-image: linear-gradient(var(--btn-hb), var(--btn-hb));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition:
		background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.3s ease,
		border-color 0.3s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"].wp-block-button__link:hover,
#mc-embedded-subscribe:hover {
	background-size: 100% 100%;
	color: var(--btn-hc) !important;
	border-color: var(--btn-hb);
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(13, 49, 78, 0.25);
	cursor: pointer;
}

.wp-block-button__link:active,
.wp-element-button:active,
#mc-embedded-subscribe:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 3px 8px rgba(13, 49, 78, 0.2);
	transition-duration: 0.1s;
}

/* Keyboard focus: a two-tone ring that shows on both light and dark backgrounds. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
#mc-embedded-subscribe:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3a80be;
}

/* ---- sweep colours by context ---- */

/* Coral buttons sitting on dark panels sweep to a brand blue (white text stays readable, white heart stays visible). */
.has-custom-dark-blue-background-color .wp-block-button__link.has-custom-orange-background-color,
.impact-feature .wp-block-button__link,
.news-feature #mc-embedded-subscribe {
	--btn-hb: #2d70a8;
}

/* White buttons: on the coral banner they sweep navy, on the navy crisis panel they sweep coral. */
.alert-button .wp-block-button__link {
	--btn-hb: #0d314e;
}

.crisis-button .wp-block-button__link {
	--btn-hb: #ef505d;
}

/* Navy "All news" and the light-blue "About us" button sweep coral. */
.news-button .wp-block-button__link,
.wp-block-button__link.has-custom-light-blue-background-color {
	--btn-hb: #ef505d;
}

/* ---- icons inside buttons ---- */
.wp-block-button__link img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Arrow icons slide forward and turn white against the sweep colour. */
.wp-block-button__link:hover img[src*="arrow"] {
	transform: translateX(5px);
	filter: brightness(0) invert(1);
}

/* Hearts beat while the button is hovered. */
.wp-block-button__link:hover img[src*="heart"] {
	animation: gheskio-heartbeat 0.8s ease-in-out infinite;
}

@keyframes gheskio-heartbeat {
	0%, 100% { transform: scale(1); }
	25% { transform: scale(1.3); }
	50% { transform: scale(1.05); }
	70% { transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-element-button,
	#mc-embedded-subscribe,
	.wp-block-button__link img {
		transition: none;
	}

	.wp-block-button__link:hover,
	.wp-element-button:hover,
	#mc-embedded-subscribe:hover {
		transform: none;
	}

	.wp-block-button__link:hover img[src*="heart"],
	.wp-block-button__link:hover img[src*="arrow"] {
		animation: none;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Social icons (footer): the navy circle floods coral from the centre, the icon
   springs up with a little tilt and the logo pops. A coral disc sits over the
   image with "lighten" blending, so navy turns coral while the white logo stays white.
   --------------------------------------------------------------------------- */
.wp-block-image > a[href*="instagram.com"],
.wp-block-image > a[href*="x.com/"],
.wp-block-image > a[href*="facebook.com"],
.wp-block-image > a[href*="linkedin.com"],
.wp-block-image > a[href*="youtube.com"] {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	isolation: isolate;
	overflow: hidden;
	line-height: 0;
	transition:
		transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s ease;
}

.wp-block-image > a[href*="instagram.com"]::after,
.wp-block-image > a[href*="x.com/"]::after,
.wp-block-image > a[href*="facebook.com"]::after,
.wp-block-image > a[href*="linkedin.com"]::after,
.wp-block-image > a[href*="youtube.com"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #ef505d;
	mix-blend-mode: lighten;
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.wp-block-image > a[href*="instagram.com"] img,
.wp-block-image > a[href*="x.com/"] img,
.wp-block-image > a[href*="facebook.com"] img,
.wp-block-image > a[href*="linkedin.com"] img,
.wp-block-image > a[href*="youtube.com"] img {
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wp-block-image > a[href*="instagram.com"]:hover,
.wp-block-image > a[href*="x.com/"]:hover,
.wp-block-image > a[href*="facebook.com"]:hover,
.wp-block-image > a[href*="linkedin.com"]:hover,
.wp-block-image > a[href*="youtube.com"]:hover,
.wp-block-image > a[href*="instagram.com"]:focus-visible,
.wp-block-image > a[href*="x.com/"]:focus-visible,
.wp-block-image > a[href*="facebook.com"]:focus-visible,
.wp-block-image > a[href*="linkedin.com"]:focus-visible,
.wp-block-image > a[href*="youtube.com"]:focus-visible {
	opacity: 1;
	transform: translateY(-5px) rotate(-6deg);
	box-shadow: 0 10px 20px rgba(239, 80, 93, 0.45);
	outline: none;
}

.wp-block-image > a[href*="instagram.com"]:hover::after,
.wp-block-image > a[href*="x.com/"]:hover::after,
.wp-block-image > a[href*="facebook.com"]:hover::after,
.wp-block-image > a[href*="linkedin.com"]:hover::after,
.wp-block-image > a[href*="youtube.com"]:hover::after,
.wp-block-image > a[href*="instagram.com"]:focus-visible::after,
.wp-block-image > a[href*="x.com/"]:focus-visible::after,
.wp-block-image > a[href*="facebook.com"]:focus-visible::after,
.wp-block-image > a[href*="linkedin.com"]:focus-visible::after,
.wp-block-image > a[href*="youtube.com"]:focus-visible::after {
	transform: scale(1);
}

.wp-block-image > a[href*="instagram.com"]:hover img,
.wp-block-image > a[href*="x.com/"]:hover img,
.wp-block-image > a[href*="facebook.com"]:hover img,
.wp-block-image > a[href*="linkedin.com"]:hover img,
.wp-block-image > a[href*="youtube.com"]:hover img {
	transform: scale(1.14) rotate(6deg);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image > a[href*="instagram.com"],
	.wp-block-image > a[href*="x.com/"],
	.wp-block-image > a[href*="facebook.com"],
	.wp-block-image > a[href*="linkedin.com"],
	.wp-block-image > a[href*="youtube.com"],
	.wp-block-image > a[href*="instagram.com"]::after,
	.wp-block-image > a[href*="x.com/"]::after,
	.wp-block-image > a[href*="facebook.com"]::after,
	.wp-block-image > a[href*="linkedin.com"]::after,
	.wp-block-image > a[href*="youtube.com"]::after,
	.wp-block-image > a img {
		transition: none;
	}

	.wp-block-image > a[href*="instagram.com"]:hover,
	.wp-block-image > a[href*="x.com/"]:hover,
	.wp-block-image > a[href*="facebook.com"]:hover,
	.wp-block-image > a[href*="linkedin.com"]:hover,
	.wp-block-image > a[href*="youtube.com"]:hover {
		transform: none;
	}

	.wp-block-image > a[href*="instagram.com"]:hover img,
	.wp-block-image > a[href*="x.com/"]:hover img,
	.wp-block-image > a[href*="facebook.com"]:hover img,
	.wp-block-image > a[href*="linkedin.com"]:hover img,
	.wp-block-image > a[href*="youtube.com"]:hover img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Text links: an underline draws in from the left on hover and retracts out to the right.
   Only the link the pointer is directly over underlines. Buttons, menu items and anything containing
   an image (logo, social icons) keep their own behaviour, and the line is 1px, a little below the text.
   --------------------------------------------------------------------------- */
:root {
	--link-ul: #ef505d; /* underline colour on light backgrounds */
}

/* On dark or coral backgrounds the underline is white. */
.crisis-panel,
.impact-feature,
.news-feature,
.alert-banner,
.has-custom-dark-blue-background-color,
.has-custom-orange-background-color {
	--link-ul: #fff;
}

.wp-site-blocks a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(:has(img)) {
	background-image: linear-gradient(var(--link-ul), var(--link-ul));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 0.16em; /* vertical padding on an inline link does not move the layout */
	transition:
		background-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-position 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.25s ease;
}

/* News titles: core makes these links inline-block, which would draw one line across the whole column.
   Plain inline links underline each line of text to its own width. */
.wp-site-blocks .wp-block-post-title a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(:has(img)) {
	display: inline;
}

.wp-site-blocks a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(:has(img)):hover,
.wp-site-blocks a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(:has(img)):focus-visible {
	background-position: 0% 100%;
	background-size: 100% 1px;
	opacity: 1;
}

/* Linked titles that wrap onto two lines need a little more line spacing, so each line's underline clears the next line of text. */
.wp-block-post-title {
	line-height: 1.5;
}

.story-title,
.service-title {
	line-height: 1.4;
}

/* Menu items (header and footer): no underline. The text turns coral and rises a touch;
   dropdown items get a soft pink highlight instead. */
.wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: #ef505d;
	transform: translateY(-2px);
	opacity: 1;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: #f04f5c14;
	border-radius: 4px;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(:has(img)) {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}

	.wp-block-navigation .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Logo (header and footer): both link to the homepage. On hover the logo lifts with a springy
   scale (no shadow: the logo image has a solid white background, so a shadow would outline it as a box).
   The effect is on the image, because a plain link cannot be transformed.
   --------------------------------------------------------------------------- */
.wp-site-blocks .custom-logo-link,
.wp-site-blocks a[href="/"]:has(> img) {
	display: inline-block;
	border-radius: 6px;
	line-height: 0;
}

.wp-site-blocks .custom-logo-link img,
.wp-site-blocks a[href="/"] > img {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wp-site-blocks .custom-logo-link:hover,
.wp-site-blocks a[href="/"]:has(> img):hover {
	opacity: 1;
}

.wp-site-blocks .custom-logo-link:hover img,
.wp-site-blocks .custom-logo-link:focus-visible img,
.wp-site-blocks a[href="/"]:hover > img,
.wp-site-blocks a[href="/"]:focus-visible > img {
	transform: translateY(-3px) scale(1.05);
}

.wp-site-blocks .custom-logo-link:focus-visible,
.wp-site-blocks a[href="/"]:has(> img):focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #3a80be;
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .custom-logo-link img,
	.wp-site-blocks a[href="/"] > img {
		transition: none;
	}

	.wp-site-blocks .custom-logo-link:hover img,
	.wp-site-blocks .custom-logo-link:focus-visible img,
	.wp-site-blocks a[href="/"]:hover > img,
	.wp-site-blocks a[href="/"]:focus-visible > img {
		transform: none;
	}
}