/* =========================================================
   STUDY MRCOG FOOTER
========================================================= */

:root {
	--footer-blue: #2d378e;
	--footer-pink: #ef5f93;

	--footer-text: #17213a;
	--footer-muted: #68708a;

	--footer-border: #e8eaf2;

	--footer-background: #ffffff;

	--footer-contact-height: 62px;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
	position: relative;

	background:
		radial-gradient(
			circle at 10% 20%,
			rgba(239, 95, 147, 0.07),
			transparent 25%
		),
		radial-gradient(
			circle at 25% 55%,
			rgba(45, 55, 142, 0.05),
			transparent 28%
		),
		#ffffff;

	border-top:
		1px solid var(--footer-border);

	color: var(--footer-text);

	padding:
		72px 0 32px;

	overflow: hidden;
}


/* subtle top accent */

.site-footer::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 3px;

	background:
		linear-gradient(
			90deg,
			var(--footer-blue),
			var(--footer-pink)
		);
}


.footer-container {
	width: calc(100% - 48px);

	max-width: 1320px;

	margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.footer-main {
	display: grid;

	grid-template-columns:
		1.05fr
		1.65fr
		0.75fr
		1fr;

	gap: 54px;

	align-items: start;
}


/* =========================================================
   HEADINGS
========================================================= */

.footer-heading {
	position: relative;

	margin:
		0 0 22px;

	padding-bottom: 12px;

	color: var(--footer-blue);

	font-size: 14px;
	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}


.footer-heading::after {
	content: "";

	position: absolute;

	bottom: 0;
	left: 0;

	width: 38px;
	height: 2px;

	background:
		var(--footer-pink);

	border-radius: 50px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-logo {
	display: inline-flex;

	margin-bottom: 22px;

	text-decoration: none;
}


.footer-logo-image {
	display: block;

	width: auto;
	height: 70px;

	max-width: 205px;

	object-fit: contain;
}


.footer-site-name {
	font-size: 26px;
	font-weight: 700;

	color: var(--footer-blue);
}


.footer-brand-text {
	max-width: 290px;

	margin:
		0 0 25px;

	color: var(--footer-muted);

	font-size: 14px;

	line-height: 1.75;
}


.footer-enquiry-button {
	display: inline-flex;

	align-items: center;

	gap: 9px;

	padding:
		12px 18px;

	background:
		var(--footer-blue);

	color: #ffffff;

	border-radius: 40px;

	font-size: 13px;
	font-weight: 600;

	text-decoration: none;

	box-shadow:
		0 9px 25px
		rgba(45, 55, 142, 0.18);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}


.footer-enquiry-button svg {
	width: 18px;
	height: 18px;
}


.footer-enquiry-button:hover {
	background:
		var(--footer-pink);

	transform:
		translateY(-2px);

	box-shadow:
		0 12px 28px
		rgba(239, 95, 147, 0.22);
}


/* =========================================================
   OFFICE ACCORDION
========================================================= */

.footer-office-accordion {
	display: grid;

	gap: 7px;
}


.footer-office-item {
	border:
		1px solid var(--footer-border);

	border-radius: 10px;

	background:
		rgba(255, 255, 255, 0.72);

	overflow: hidden;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}


.footer-office-item.is-open {
	border-color:
		rgba(239, 95, 147, 0.25);

	box-shadow:
		0 8px 25px
		rgba(28, 38, 80, 0.06);
}


.footer-office-toggle {
	width: 100%;

	display: flex;

	align-items: center;

	justify-content:
		space-between;

	gap: 16px;

	padding:
		13px 15px;

	background: transparent;

	border: 0;

	color: var(--footer-text);

	text-align: left;

	cursor: pointer;
}


.footer-office-title {
	display: grid;

	gap: 3px;
}


.footer-office-title strong {
	font-size: 13px;
	font-weight: 600;

	line-height: 1.3;
}


.footer-office-title small {
	color: var(--footer-pink);

	font-size: 12px;
	font-weight: 500;
}


/* PLUS ICON */

.footer-office-icon {
	position: relative;

	width: 20px;
	height: 20px;

	flex: 0 0 20px;

	border-radius: 50%;

	background:
		#f7f7fb;
}


.footer-office-icon::before,
.footer-office-icon::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 9px;
	height: 1.5px;

	background:
		var(--footer-blue);

	border-radius: 10px;

	transform:
		translate(-50%, -50%);

	transition:
		transform 0.2s ease;
}


.footer-office-icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}


.footer-office-item.is-open
.footer-office-icon::after {
	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* OFFICE PANEL */

.footer-office-panel {
	border-top:
		1px solid var(--footer-border);
}


.footer-office-content {
	padding:
		14px 15px 16px;
}


.footer-office-content p {
	margin:
		0 0 12px;

	color: var(--footer-muted);

	font-size: 12.5px;

	line-height: 1.6;
}


.footer-office-phones {
	display: flex;

	flex-wrap: wrap;

	gap:
		6px 14px;

	margin-bottom:
		7px;
}


.footer-office-phones a,
.footer-office-email {
	color:
		var(--footer-blue);

	font-size:
		12.5px;

	font-weight: 600;

	text-decoration: none;
}


.footer-office-phones a:hover,
.footer-office-email:hover {
	color:
		var(--footer-pink);
}


/* =========================================================
   FOOTER MENU
========================================================= */

.footer-menu {
	margin: 0;
	padding: 0;

	list-style: none;

	display: grid;

	gap: 13px;
}


.footer-menu li {
	margin: 0;
	padding: 0;
}


.footer-menu a {
	position: relative;

	display: inline-flex;

	align-items: center;

	color:
		var(--footer-muted);

	font-size: 14px;

	line-height: 1.4;

	text-decoration: none;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


.footer-menu a::before {
	content: "";

	width: 5px;
	height: 5px;

	margin-right: 9px;

	border-radius: 50%;

	background:
		var(--footer-pink);

	transition:
		transform 0.2s ease;
}


.footer-menu a:hover {
	color:
		var(--footer-blue);

	transform:
		translateX(3px);
}


.footer-menu a:hover::before {
	transform:
		scale(1.4);
}


/* =========================================================
   CONNECT
========================================================= */

.footer-connect-text {
	margin:
		0 0 20px;

	color:
		var(--footer-muted);

	font-size:
		14px;

	line-height:
		1.65;
}


.footer-contact-details {
	display: grid;

	gap: 12px;

	margin-bottom: 24px;
}


.footer-contact-details a {
	display: grid;

	gap: 2px;

	text-decoration: none;
}


.footer-contact-details span {
	color:
		var(--footer-muted);

	font-size:
		11px;

	text-transform:
		uppercase;

	letter-spacing:
		0.07em;
}


.footer-contact-details strong {
	color:
		var(--footer-text);

	font-size:
		13px;

	font-weight:
		600;

	transition:
		color 0.2s ease;
}


.footer-contact-details a:hover strong {
	color:
		var(--footer-pink);
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-socials {
	display: flex;

	flex-wrap: wrap;

	gap: 9px;
}


.footer-socials a {
	width: 38px;
	height: 38px;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	background:
		#ffffff;

	color:
		var(--footer-pink);

	border:
		1px solid var(--footer-border);

	border-radius: 50%;

	text-decoration: none;

	box-shadow:
		0 5px 16px
		rgba(20, 30, 70, 0.05);

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}


.footer-socials svg {
	width: 17px;
	height: 17px;
}


.footer-socials a:hover {
	background:
		var(--footer-pink);

	border-color:
		var(--footer-pink);

	color: #ffffff;

	transform:
		translateY(-3px);
}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
	display: grid;

	grid-template-columns:
		180px
		1fr;

	gap: 40px;

	align-items: center;

	margin-top: 52px;

	padding-top: 26px;

	border-top:
		1px solid var(--footer-border);
}


.footer-mini-logo {
	display: block;

	width: auto;
	height: 48px;

	max-width: 150px;

	object-fit: contain;
}


.footer-legal {
	text-align: right;
}


.footer-legal p {
	margin: 0;

	color:
		#747b91;

	font-size: 12px;

	line-height:
		1.6;
}


.footer-disclaimer {
	margin-top:
		5px !important;

	font-size:
		10.5px !important;

	color:
		#969bad !important;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-back-to-top {
	position: fixed;

	right: 24px;
	bottom:
		calc(
			var(--footer-contact-height)
			+ 18px
		);

	width: 46px;
	height: 46px;

	display: flex;

	align-items: center;
	justify-content: center;

	z-index: 9980;

	background:
		var(--footer-pink);

	color: #ffffff;

	border: 0;

	border-radius: 50%;

	box-shadow:
		0 8px 25px
		rgba(239, 95, 147, 0.3);

	cursor: pointer;

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(10px);

	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease,
		background-color 0.2s ease;
}


.footer-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(0);
}


.footer-back-to-top:hover {
	background:
		var(--footer-blue);
}


.footer-back-to-top svg {
	width: 21px;
	height: 21px;
}


/* =========================================================
   FIXED CONTACT BAR
========================================================= */

.footer-contact-bar {
	position: fixed;

	left: 0;
	bottom: 0;

	width: 100%;
	height:
		var(--footer-contact-height);

	z-index: 9970;

	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	background:
		rgba(255, 255, 255, 0.97);

	border-top:
		1px solid #e7e7ec;

	box-shadow:
		0 -4px 20px
		rgba(25, 30, 60, 0.05);

	-webkit-backdrop-filter:
		blur(12px);

	backdrop-filter:
		blur(12px);
}


.footer-contact-bar a {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	gap: 9px;

	color:
		#414655;

	font-size:
		13px;

	font-weight:
		500;

	text-decoration: none;

	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}


.footer-contact-bar a:not(:last-child)::after {
	content: "";

	position: absolute;

	right: 0;
	top: 25%;

	width: 1px;
	height: 50%;

	background:
		#e5e5ea;
}


.footer-contact-bar a:hover {
	color:
		var(--footer-pink);

	background:
		#fff8fb;
}


.footer-contact-bar svg {
	width: 20px;
	height: 20px;

	color:
		var(--footer-pink);

	flex-shrink: 0;
}


/* Keep content above fixed contact bar */

body {
	padding-bottom:
		var(--footer-contact-height);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

	.footer-main {
		grid-template-columns:
			1fr 1.4fr;

		gap:
			45px 60px;
	}


	.footer-brand-text {
		max-width: 420px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	:root {
		--footer-contact-height: 58px;
	}


	.site-footer {
		padding:
			52px 0 26px;
	}


	.footer-container {
		width:
			calc(100% - 32px);
	}


	.footer-main {
		grid-template-columns:
			1fr;

		gap: 40px;
	}


	.footer-logo-image {
		height: 60px;

		max-width: 185px;
	}


	.footer-brand-text {
		max-width: none;
	}


	.footer-heading {
		margin-bottom: 17px;
	}


	.footer-bottom {
		grid-template-columns:
			1fr;

		gap: 18px;

		margin-top: 40px;

		padding-top: 24px;
	}


	.footer-legal {
		text-align: left;
	}


	.footer-contact-bar a {
		flex-direction: column;

		gap: 3px;

		font-size: 9px;

		line-height: 1;
	}


	.footer-contact-bar svg {
		width: 19px;
		height: 19px;
	}


	.footer-contact-bar a:nth-child(3) span {
		font-size: 0;
	}


	.footer-contact-bar a:nth-child(3) span::after {
		content: "Call";

		font-size: 9px;
	}


	.footer-contact-bar a:nth-child(4) span {
		font-size: 0;
	}


	.footer-contact-bar a:nth-child(4) span::after {
		content: "Email";

		font-size: 9px;
	}


	.footer-back-to-top {
		right: 15px;

		width: 42px;
		height: 42px;
	}

}