/* ==========================================================================
   PINHOLEIR HEADER
   ========================================================================== */

.ph-site-header {
	--header-blue: #075cf4;
	--header-navy: #062760;
	--header-topbar: #031e54;
	--header-text: #09295f;

	position: relative;
	z-index: 1000;

	width: 100%;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.ph-topbar {
	position: relative;
	z-index: 10;

	width: 100%;
	height: 64px;

	background:
		linear-gradient(
			90deg,
			#031d50 0%,
			#06245f 52%,
			#031b4c 100%
		);

	color: rgba(255, 255, 255, 0.88);
}

.ph-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: min(100% - 100px, 1320px);
	height: 100%;

	margin-inline: auto;
}

/* ==========================================================================
   TOP LEFT INFO
   ========================================================================== */

.ph-topbar__info {
	display: flex;
	align-items: center;

	height: 100%;
}

.ph-topbar__item {
	position: relative;

	display: inline-flex;
	align-items: center;

	gap: 9px;

	min-height: 30px;

	padding: 0 19px;

	color: rgba(255, 255, 255, 0.86);

	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	white-space: nowrap;

	text-decoration: none;

	transition:
		color 0.3s ease,
		opacity 0.3s ease;
}

.ph-topbar__item:first-child {
	padding-left: 0;
}

.ph-topbar__item:not(:last-child)::after {
	position: absolute;

	top: 50%;
	right: 0;

	width: 1px;
	height: 22px;

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

	content: "";

	transform: translateY(-50%);
}

.ph-topbar__item:hover {
	color: #ffffff;
}

.ph-topbar__icon {
	display: grid;

	width: 22px;
	height: 22px;

	flex: 0 0 22px;

	place-items: center;

	color: #3482ff;
}

.ph-topbar__icon svg {
	width: 20px;
	height: 20px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

.ph-topbar__social {
	position: relative;

	display: flex;
	align-items: center;

	gap: 3px;

	padding-left: 17px;
}

.ph-topbar__social::before {
	position: absolute;

	top: 50%;
	left: 0;

	width: 1px;
	height: 22px;

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

	content: "";

	transform: translateY(-50%);
}

.ph-topbar__social a {
	display: grid;

	width: 39px;
	height: 39px;

	place-items: center;

	color: rgba(255, 255, 255, 0.85);

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

.ph-topbar__social svg {
	width: 17px;
	height: 17px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ph-topbar__social a:first-child svg {
	fill: currentColor;
	stroke: none;
}

.ph-topbar__social a:hover {
	color: #4c8cff;

	transform: translateY(-2px);
}

/* ==========================================================================
   MAIN HEADER POSITION
   ========================================================================== */

.ph-main-header {
	position: absolute;
	top: 73px;
	right: 0;
	left: 0;
	z-index: 100;

	width: 100%;

	padding-inline: 3.2%;

	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease,
		padding 0.3s ease;
}

/* ==========================================================================
   WHITE NAV CARD
   ========================================================================== */

.ph-main-header__shell {
	display: flex;
	align-items: center;

	width: min(100%, 1360px);
	height: 108px;

	margin-inline: auto;

	padding: 0 24px 0 34px;

	border: 1px solid rgba(18, 57, 117, 0.06);
	border-radius: 27px;

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

	box-shadow:
		0 17px 45px rgba(23, 55, 105, 0.08),
		0 3px 10px rgba(23, 55, 105, 0.025);

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

	transition:
		height 0.35s ease,
		border-radius 0.35s ease,
		box-shadow 0.35s ease,
		max-width 0.35s ease;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.ph-main-header__brand {
	display: flex;
	align-items: center;

	flex: 0 0 auto;

	width: 245px;
}

.ph-main-header__brand .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.ph-main-header__brand .custom-logo {
	display: block;

	width: auto;
	height: auto;

	max-width: 205px;
	max-height: 70px;
}

.ph-main-header__logo-text {
	color: var(--header-navy);

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

	text-decoration: none;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.ph-main-nav {
	display: flex;
	align-items: stretch;
	justify-content: center;

	flex: 1;

	height: 100%;
}

.ph-main-nav__menu {
	display: flex;
	align-items: stretch;
	justify-content: center;

	gap: 34px;

	height: 100%;

	margin: 0;
	padding: 0;

	list-style: none;
}

/* menu item */

.ph-main-nav__menu > li {
	position: relative;

	display: flex;
	align-items: center;

	margin: 0;
	padding: 0;
}

/* menu link */

.ph-main-nav__menu > li > a {
	position: relative;

	display: flex;
	align-items: center;

	height: 100%;

	padding: 0 1px;

	color: #0b295e;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	text-transform: uppercase;

	transition:
		color 0.3s ease;
}

/* active underline */

.ph-main-nav__menu > li > a::after {
	position: absolute;

	right: 50%;
	bottom: 27px;
	left: 50%;

	height: 2px;

	border-radius: 10px;

	background: var(--header-blue);

	content: "";

	opacity: 0;

	transition:
		right 0.3s ease,
		left 0.3s ease,
		opacity 0.3s ease;
}

.ph-main-nav__menu > li:hover > a,
.ph-main-nav__menu > li.current-menu-item > a,
.ph-main-nav__menu > li.current-menu-ancestor > a {
	color: var(--header-blue);
}

.ph-main-nav__menu > li:hover > a::after,
.ph-main-nav__menu > li.current-menu-item > a::after,
.ph-main-nav__menu > li.current-menu-ancestor > a::after {
	right: 0;
	left: 0;

	opacity: 1;
}

/* ==========================================================================
   SUBMENU ARROW
   ========================================================================== */

.ph-main-nav__menu .menu-item-has-children > a {
	gap: 8px;
}

.ph-main-nav__menu .menu-item-has-children > a::before {
	order: 2;

	width: 7px;
	height: 7px;

	margin-top: -4px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	content: "";

	transform: rotate(45deg);

	transition: transform 0.3s ease;
}

.ph-main-nav__menu .menu-item-has-children:hover > a::before {
	margin-top: 4px;

	transform: rotate(225deg);
}

/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.ph-main-nav__menu .sub-menu {
	position: absolute;

	top: calc(100% - 19px);
	left: -24px;

	min-width: 235px;

	margin: 0;
	padding: 12px;

	border: 1px solid rgba(19, 60, 125, 0.08);
	border-radius: 15px;

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

	box-shadow:
		0 18px 45px rgba(14, 46, 99, 0.14);

	list-style: none;

	visibility: hidden;
	opacity: 0;

	transform: translateY(10px);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease;
}

.ph-main-nav__menu li:hover > .sub-menu,
.ph-main-nav__menu li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;

	transform: translateY(0);
}

.ph-main-nav__menu .sub-menu li {
	display: block;
}

.ph-main-nav__menu .sub-menu a {
	display: block;

	padding: 12px 14px;

	border-radius: 9px;

	color: var(--header-text);

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

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.ph-main-nav__menu .sub-menu a:hover {
	background: #f0f5ff;

	color: var(--header-blue);

	transform: translateX(3px);
}

/* ==========================================================================
   RIGHT ACTION
   ========================================================================== */

.ph-main-header__actions {
	display: flex;
	align-items: center;

	flex: 0 0 auto;

	margin-left: 35px;
}

/* ==========================================================================
   APPOINTMENT CTA
   ========================================================================== */

.ph-appointment {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 12px;

	min-width: 276px;
	height: 61px;

	padding: 0 24px;

	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			#075cf4 0%,
			#0549db 100%
		);

	box-shadow:
		0 11px 27px rgba(7, 92, 244, 0.18);

	color: #ffffff;

	font-size: 13px;
	font-weight: 800;
	line-height: 1;

	text-decoration: none;

	text-transform: uppercase;

	overflow: hidden;

	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

/* shine */

.ph-appointment::before {
	position: absolute;

	top: -100%;
	left: -50%;

	width: 35%;
	height: 300%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.34),
			transparent
		);

	content: "";

	transform: rotate(22deg);

	transition: left 0.65s ease;
}

.ph-appointment > * {
	position: relative;
	z-index: 2;
}

.ph-appointment__calendar {
	display: grid;

	width: 26px;
	height: 26px;

	flex: 0 0 26px;

	place-items: center;
}

.ph-appointment__calendar svg {
	width: 25px;
	height: 25px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ph-appointment__arrow {
	width: 16px;
	height: 16px;

	fill: none;
	stroke: currentColor;

	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform 0.3s ease;
}

.ph-appointment:hover {
	box-shadow:
		0 17px 34px rgba(7, 92, 244, 0.28);

	color: #ffffff;

	transform: translateY(-3px);
}

.ph-appointment:hover::before {
	left: 130%;
}

.ph-appointment:hover .ph-appointment__arrow {
	transform: translate(3px, -3px);
}

/* ==========================================================================
   STICKY HEADER
   ========================================================================== */

/*
 * Topbar stays where it is.
 * Only main navigation becomes fixed.
 */

.ph-main-header.is-sticky {
	position: fixed;

	top: 0;
	right: 0;
	left: 0;

	z-index: 9999;

	padding: 10px 3.2%;

	animation:
		phHeaderSlideDown 0.42s
		cubic-bezier(0.22, 1, 0.36, 1)
		both;
}

.ph-main-header.is-sticky .ph-main-header__shell {
	height: 78px;

	border-radius: 18px;

	box-shadow:
		0 10px 35px rgba(10, 38, 86, 0.14),
		0 2px 8px rgba(10, 38, 86, 0.05);
}

.ph-main-header.is-sticky
.ph-main-header__brand .custom-logo {
	max-height: 54px;
}

.ph-main-header.is-sticky
.ph-main-nav__menu > li > a::after {
	bottom: 18px;
}

.ph-main-header.is-sticky .ph-appointment {
	height: 52px;

	min-width: 245px;
}

@keyframes phHeaderSlideDown {

	from {
		opacity: 0;

		transform: translateY(-100%);
	}

	to {
		opacity: 1;

		transform: translateY(0);
	}
}

/* ==========================================================================
   WORDPRESS ADMIN BAR
   ========================================================================== */

.admin-bar .ph-main-header.is-sticky {
	top: 32px;
}

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

.ph-menu-toggle {
	display: none;

	width: 48px;
	height: 48px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: #f0f5ff;

	cursor: pointer;

	place-items: center;
}

.ph-menu-toggle span {
	display: block;

	width: 21px;
	height: 2px;

	margin: 4px auto;

	border-radius: 10px;

	background: var(--header-navy);

	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

/* open icon */

.ph-menu-toggle.is-active span:nth-child(1) {
	transform:
		translateY(6px)
		rotate(45deg);
}

.ph-menu-toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.ph-menu-toggle.is-active span:nth-child(3) {
	transform:
		translateY(-6px)
		rotate(-45deg);
}

/* ==========================================================================
   RESPONSIVE - LAPTOP
   ========================================================================== */

@media (max-width: 1280px) {

	.ph-topbar__inner {
		width: min(100% - 60px, 1180px);
	}

	.ph-main-header {
		padding-inline: 2.5%;
	}

	.ph-main-header__shell {
		padding-left: 26px;
	}

	.ph-main-header__brand {
		width: 205px;
	}

	.ph-main-header__brand .custom-logo {
		max-width: 180px;
	}

	.ph-main-nav__menu {
		gap: 24px;
	}

	.ph-main-header__actions {
		margin-left: 22px;
	}

	.ph-appointment {
		min-width: 235px;

		padding-inline: 18px;

		font-size: 12px;
	}
}

/* ==========================================================================
   TABLET / MOBILE NAV
   ========================================================================== */

@media (max-width: 1024px) {

	.ph-topbar {
		height: auto;

		min-height: 48px;
	}

	.ph-topbar__inner {
		width: calc(100% - 40px);
		min-height: 48px;
	}

	.ph-topbar__item {
		padding-inline: 11px;

		font-size: 11px;
	}

	.ph-topbar__social {
		display: none;
	}

	.ph-main-header {
		top: 58px;

		padding-inline: 20px;
	}

	.ph-main-header__shell {
		position: relative;

		height: 82px;

		padding: 0 17px 0 23px;

		border-radius: 21px;
	}

	.ph-main-header__brand {
		width: auto;

		margin-right: auto;
	}

	.ph-main-header__brand .custom-logo {
		max-width: 170px;
		max-height: 57px;
	}

	.ph-main-header__actions {
		margin-left: 15px;
	}

	.ph-appointment {
		min-width: 205px;
		height: 52px;

		font-size: 11px;
	}

	.ph-menu-toggle {
		display: block;

		margin-left: 10px;
	}

	/* navigation becomes dropdown */

	.ph-main-nav {
		position: absolute;

		top: calc(100% + 12px);
		right: 0;
		left: 0;

		display: block;

		width: 100%;
		height: auto;

		padding: 12px;

		border: 1px solid rgba(20, 61, 121, 0.08);
		border-radius: 18px;

		background: #ffffff;

		box-shadow:
			0 18px 45px rgba(12, 42, 92, 0.14);

		visibility: hidden;
		opacity: 0;

		transform: translateY(-8px);

		transition:
			opacity 0.3s ease,
			transform 0.3s ease,
			visibility 0.3s ease;
	}

	.ph-main-nav.is-open {
		visibility: visible;
		opacity: 1;

		transform: translateY(0);
	}

	.ph-main-nav__menu {
		display: block;

		height: auto;
	}

	.ph-main-nav__menu > li {
		display: block;

		width: 100%;
	}

	.ph-main-nav__menu > li > a {
		width: 100%;
		height: auto;

		padding: 14px 15px;

		border-radius: 10px;
	}

	.ph-main-nav__menu > li > a::after {
		display: none;
	}

	.ph-main-nav__menu > li:hover > a {
		background: #f2f6fd;
	}

	/* mobile submenu */

	.ph-main-nav__menu .sub-menu {
		position: static;

		display: none;

		min-width: 0;

		margin: 0 0 5px 13px;
		padding: 5px;

		border: 0;

		box-shadow: none;

		visibility: visible;
		opacity: 1;

		transform: none;
	}

	.ph-main-nav__menu
	.menu-item-has-children:hover > .sub-menu {
		display: block;
	}

	.ph-main-header.is-sticky {
		padding: 8px 15px;
	}

	.ph-main-header.is-sticky
	.ph-main-header__shell {
		height: 70px;
	}

	.ph-main-header.is-sticky
	.ph-main-header__brand .custom-logo {
		max-height: 48px;
	}
}

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

@media (max-width: 767px) {

	.ph-topbar {
		display: none;
	}

	.ph-main-header {
		top: 15px;

		padding-inline: 14px;
	}

	.ph-main-header__shell {
		height: 72px;

		padding: 0 11px 0 18px;

		border-radius: 18px;
	}

	.ph-main-header__brand .custom-logo {
		max-width: 145px;
		max-height: 50px;
	}

	.ph-appointment {
		display: none;
	}

	.ph-main-header__actions {
		margin-left: auto;
	}

	.ph-menu-toggle {
		display: block;

		width: 46px;
		height: 46px;
	}

	.ph-main-nav {
		top: calc(100% + 8px);

		max-height: calc(100vh - 110px);

		overflow-y: auto;
	}

	.ph-main-header.is-sticky {
		top: 0;

		padding: 7px 10px;
	}

	.ph-main-header.is-sticky
	.ph-main-header__shell {
		height: 64px;

		border-radius: 15px;
	}
}

/* WordPress mobile admin bar */

@media (max-width: 782px) {

	.admin-bar .ph-main-header.is-sticky {
		top: 46px;
	}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.ph-site-header a:focus-visible,
.ph-site-header button:focus-visible {
	outline: 3px solid rgba(7, 92, 244, 0.4);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.ph-site-header *,
	.ph-site-header *::before,
	.ph-site-header *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}