/*
 * Header refresh: a cleaner, more polished site header and main menu, and a
 * "Book Appointment" button styled like the home page Search button. Styling only; the menu is still edited in
 * Appearance > Menus. Delete this file and its enqueue in functions.php to revert.
 */

.c27-main-header {
	--hr-ink: #221536;
	--hr-text: #3d3550;
	--hr-muted: #8a859a;
	--hr-purple: #462170;
	--hr-teal: #0ba9a9;
	--hr-pink: #fa346e;
	--hr-lavender: #f5f0fb;
	--hr-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 1. Header bar ---------- */

/* Frosted white bar with a soft shadow instead of a hard grey line. */
.c27-main-header.header .header-skin {
	background: rgba(255, 255, 255, .94) !important;
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
	backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 0 !important;
	box-shadow: 0 1px 0 rgba(34, 21, 54, .06), 0 10px 30px -14px rgba(34, 21, 54, .25);
}

/* Thin brand-colour line along the top edge. */
.c27-main-header.header .header-skin::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hr-teal) 0%, var(--hr-purple) 55%, var(--hr-pink) 100%);
}

.c27-main-header .logo a img {
	transition: transform .3s var(--hr-ease);
}
.c27-main-header .logo a:hover img {
	transform: scale(1.03);
}

/* ---------- 2. Main menu (desktop) ---------- */

@media only screen and (min-width: 1201px) {
	.c27-main-header .i-nav > ul > li {
		margin-left: 11px;
		margin-right: 11px;
	}

	.c27-main-header .i-nav > ul > li > a {
		position: relative;
		padding: 8px 2px;
		font-weight: 600 !important;
		letter-spacing: .01em;
		color: var(--hr-ink) !important;
		transition: color .2s ease;
	}

	/* Underline that grows from the centre on hover and marks the current page. */
	.c27-main-header .i-nav > ul > li > a::after {
		content: "";
		position: absolute;
		left: 50%;
		right: 50%;
		bottom: 0;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--hr-teal), var(--hr-purple));
		transition: left .25s var(--hr-ease), right .25s var(--hr-ease);
	}

	.c27-main-header .i-nav > ul > li:hover > a,
	.c27-main-header .i-nav > ul > li.current-menu-item > a,
	.c27-main-header .i-nav > ul > li.current-menu-ancestor > a {
		color: var(--hr-purple) !important;
	}

	.c27-main-header .i-nav > ul > li:hover > a::after,
	.c27-main-header .i-nav > ul > li > a:focus-visible::after,
	.c27-main-header .i-nav > ul > li.current-menu-item > a::after,
	.c27-main-header .i-nav > ul > li.current-menu-ancestor > a::after {
		left: 0;
		right: 0;
	}

	.c27-main-header .i-nav > ul > li > .submenu-toggle i {
		color: var(--hr-muted) !important;
		transition: transform .25s var(--hr-ease), color .2s ease;
	}
	.c27-main-header .i-nav > ul > li:hover > .submenu-toggle i {
		color: var(--hr-purple) !important;
		transform: rotate(180deg);
	}

	/* Dropdowns: rounded cards with a soft shadow. */
	.c27-main-header .main-nav .i-dropdown {
		padding: 8px !important;
		border: 1px solid rgba(70, 33, 112, .08) !important;
		border-radius: 14px !important;
		box-shadow: 0 20px 44px -14px rgba(34, 21, 54, .3), 0 2px 6px rgba(34, 21, 54, .06) !important;
	}

	.c27-main-header .main-nav .i-dropdown li {
		float: none;
	}

	.c27-main-header .main-nav .i-dropdown li a {
		margin: 0 !important;
		padding: 10px 12px !important;
		border-bottom: 0 !important;
		border-radius: 9px;
		font-weight: 500;
		line-height: 1.4;
		color: var(--hr-text) !important;
		transition: background .15s ease, color .15s ease, padding .2s var(--hr-ease);
	}

	.c27-main-header .main-nav .i-dropdown li:hover > a {
		background: var(--hr-lavender);
		color: var(--hr-purple) !important;
		padding-left: 16px !important;
	}

	/* Phone and email menu item: a contact block with a phone icon. */
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 40px;
		padding: 4px 0 4px 48px;
		line-height: 1.3;
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a::after {
		display: none;
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 38px;
		height: 38px;
		margin-top: -19px;
		border-radius: 50%;
		background: rgba(11, 169, 169, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230ba9a9'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / 18px no-repeat;
		transition: transform .25s var(--hr-ease), background-color .2s ease;
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a:hover::before {
		transform: rotate(-12deg) scale(1.06);
		background-color: rgba(11, 169, 169, .2);
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a strong {
		margin-bottom: 0 !important;
		font-size: 15px !important;
		font-weight: 700;
		letter-spacing: .02em;
		color: var(--hr-purple);
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a br {
		display: none;
	}
	.c27-main-header .i-nav > ul > li#menu-item-17037 > a span {
		font-size: 12px;
		font-weight: 500;
		color: var(--hr-muted);
	}

	/* Sign in / Register: quieter so the booking button stands out. */
	.c27-main-header .signin-area > a {
		font-weight: 600;
		color: var(--hr-text) !important;
		transition: color .2s ease;
	}
	.c27-main-header .signin-area > a:hover {
		color: var(--hr-purple) !important;
	}
}

/* ---------- 3. "Book Appointment" button ---------- */

/* Matches the Search button on the home page: a teal pill with a soft glow. */
.c27-main-header .header-button a.buttons.button-2 {
	gap: 7px;
	padding: 11px 22px 11px 18px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	color: #fff !important;
	background: var(--hr-teal) !important;
	box-shadow: 0 8px 18px -10px rgba(11, 169, 169, .9) !important;
	transition: background .2s ease, transform .2s var(--hr-ease);
}

/* Calendar icon. */
.c27-main-header .header-button a.buttons.button-2::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4M8.5 14.5l2.3 2.3 4.7-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c27-main-header .header-button a.buttons.button-2:hover {
	color: #fff !important;
	background: #088c8c !important;
	transform: translateY(-1px);
}

.c27-main-header .header-button a.buttons.button-2:focus-visible {
	outline: 3px solid rgba(70, 33, 112, .45);
	outline-offset: 3px;
}

/* ---------- 4. Mobile and tablet ---------- */

@media only screen and (max-width: 1200px) {
	/* Book button inside the slide-out menu. */
	.c27-main-header .mobile-nav-button .header-button {
		padding: 10px 16px 16px;
	}
	.c27-main-header .mobile-nav-button .header-button a.buttons.button-2 {
		justify-content: center;
		font-size: 15px !important;
	}

	/* Also show a compact booking button in the header bar. */
	.c27-main-header .header-right .header-button {
		display: flex !important;
		margin-left: 10px;
	}
	.c27-main-header .header-right .header-button a.buttons.button-2 {
		padding: 9px 15px 9px 13px !important;
		font-size: 13px !important;
	}
}

@media only screen and (max-width: 480px) {
	.c27-main-header .header-right .header-button a.buttons.button-2 {
		padding: 8px 11px !important;
		font-size: 12px !important;
	}
	.c27-main-header .header-right .header-button a.buttons.button-2::before {
		display: none;
	}
}

/* Too narrow for the extra button: keep the original mobile layout. */
@media only screen and (max-width: 389px) {
	.c27-main-header .header-right .header-button {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c27-main-header *,
	.c27-main-header *::before,
	.c27-main-header *::after {
		transition: none !important;
	}
}