/*
 * Header and footer matching the cv-postman.com main site.
 *
 * The main site is Tailwind-based; these are the equivalent plain-CSS rules.
 * Tailwind tokens used: purple #6B46C1 / #553C9A, purple-400 #c084fc,
 * purple-200 #e9d5ff, purple-50 #faf5ff, gray-400 #9ca3af, gray-600 #4b5563,
 * gray-800 #1f2937, gray-900 #111827, yellow-300 #fde047.
 */

:root {
	--cvp-purple: #6b46c1;
	--cvp-purple-dark: #553c9a;
	--cvp-purple-400: #c084fc;
	--cvp-purple-50: #faf5ff;
	--cvp-gray-400: #9ca3af;
	--cvp-gray-600: #4b5563;
	--cvp-gray-800: #1f2937;
	--cvp-gray-900: #111827;
	--cvp-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cvp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--cvp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--cvp-shadow-xl: 0 20px 25px -5px rgb(233 213 255 / 0.5), 0 8px 10px -6px rgb(233 213 255 / 0.5);
}

/* ------------------------------------------------------------------ *
 * Box model + typography reset
 *
 * Tailwind applies border-box globally, the theme does not, so widths and
 * padding have to be reconciled here or max-width excludes the padding.
 * The blog body is also 22px / weight 300 against the main site's
 * 16px / weight 400, so the chrome pins its own scale rather than
 * inheriting the theme's larger reading size.
 * ------------------------------------------------------------------ */

.cvp-nav,
.cvp-nav *,
.cvp-nav *::before,
.cvp-nav *::after,
.cvp-nav-spacer,
.cvp-footer,
.cvp-footer *,
.cvp-footer *::before,
.cvp-footer *::after {
	box-sizing: border-box;
}

.cvp-nav,
.cvp-footer {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: normal;
}

/* ------------------------------------------------------------------ *
 * Shared logo
 * ------------------------------------------------------------------ */

.cvp-logo {
	display: inline-block;
	font-family: var(--cvp-font);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.cvp-logo__cv {
	color: var(--cvp-purple);
}

.cvp-logo__postman {
	background-image: linear-gradient(to right, var(--cvp-purple), var(--cvp-purple-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

.cvp-nav {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 50;
	width: 100%;
	padding-block: 1.25rem;
	font-family: var(--cvp-font);
	background: transparent;
	transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
}

.cvp-nav.is-scrolled {
	padding-block: 0.75rem;
	background: rgb(255 255 255 / 0.95);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: var(--cvp-shadow-lg);
}

.cvp-nav__container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 1.5rem;
}

@media (min-width: 640px) {
	.cvp-nav__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.cvp-nav__container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.cvp-nav__container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.cvp-nav__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.cvp-nav__container {
		max-width: 1536px;
	}
}

.cvp-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 2rem;
}

/* Keeps content clear of the fixed header (1.25rem padding x2 + 2rem bar). */
.cvp-nav-spacer {
	height: 4.5rem;
}

.cvp-nav__desktop {
	display: none;
}

@media (min-width: 1024px) {
	.cvp-nav__desktop {
		display: flex;
		align-items: center;
		gap: 2rem;
	}
}

.cvp-nav__links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.cvp-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	color: var(--cvp-gray-600);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: color 0.2s, background-color 0.2s;
}

.cvp-nav__link:hover,
.cvp-nav__link:focus-visible {
	color: var(--cvp-purple);
	background: var(--cvp-purple-50);
}

.cvp-nav__link[aria-current="page"] {
	color: var(--cvp-purple);
}

.cvp-nav__link-text {
	position: relative;
}

.cvp-nav__link-text::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 2px;
	background: var(--cvp-purple);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s;
}

.cvp-nav__link:hover .cvp-nav__link-text::after,
.cvp-nav__link:focus-visible .cvp-nav__link-text::after {
	transform: scaleX(1);
}

.cvp-nav__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.cvp-btn-ghost {
	padding: 0.375rem 1rem;
	color: var(--cvp-gray-600);
	text-decoration: none;
	transition: color 0.2s;
}

.cvp-btn-ghost:hover,
.cvp-btn-ghost:focus-visible {
	color: var(--cvp-purple);
}

.cvp-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1.5rem;
	color: #fff;
	text-decoration: none;
	background: var(--cvp-purple);
	border-radius: 0.75rem;
	box-shadow: var(--cvp-shadow-md);
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.cvp-btn-primary:hover,
.cvp-btn-primary:focus-visible {
	color: #fff;
	background: var(--cvp-purple-dark);
	transform: scale(1.05);
	box-shadow: var(--cvp-shadow-xl);
}

.cvp-btn-primary__arrow {
	color: #fde047;
}

/* Burger */

.cvp-burger {
	display: inline-flex;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background-color 0.2s;
}

.cvp-burger:hover {
	background: var(--cvp-purple-50);
}

@media (min-width: 1024px) {
	.cvp-burger {
		display: none;
	}
}

.cvp-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.5rem;
	height: 1.25rem;
}

.cvp-burger__bar {
	width: 100%;
	height: 2px;
	background: var(--cvp-gray-600);
	transition: transform 0.3s, opacity 0.3s;
}

.cvp-burger[aria-expanded="true"] .cvp-burger__bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.cvp-burger[aria-expanded="true"] .cvp-burger__bar:nth-child(2) {
	opacity: 0;
}

.cvp-burger[aria-expanded="true"] .cvp-burger__bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* Mobile menu */

.cvp-mobile {
	max-height: 0;
	overflow: hidden;
	background: #fff;
	border-radius: 0.5rem;
	box-shadow: var(--cvp-shadow-lg);
	opacity: 0;
	transition: max-height 0.3s, opacity 0.3s, margin-top 0.3s;
}

@media (min-width: 1024px) {
	.cvp-mobile {
		display: none;
	}
}

.cvp-mobile.is-open {
	max-height: 24rem;
	margin-top: 1rem;
	opacity: 1;
}

.cvp-mobile__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: 1rem;
}

.cvp-mobile__link {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--cvp-gray-600);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: color 0.2s, background-color 0.2s;
}

.cvp-mobile__link:hover {
	color: var(--cvp-purple);
	background: var(--cvp-purple-50);
}

.cvp-mobile__link[aria-current="page"] {
	color: var(--cvp-purple);
}

.cvp-mobile__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1rem;
}

.cvp-mobile__ghost,
.cvp-mobile__primary {
	display: block;
	text-align: center;
	text-decoration: none;
	border-radius: 0.5rem;
}

.cvp-mobile__ghost {
	padding: 0.5rem 1rem;
	color: var(--cvp-gray-600);
	transition: color 0.2s, background-color 0.2s;
}

.cvp-mobile__ghost:hover {
	color: var(--cvp-purple);
	background: var(--cvp-purple-50);
}

.cvp-mobile__primary {
	padding: 0.625rem 1.5rem;
	color: #fff;
	background: var(--cvp-purple);
	border-radius: 0.75rem;
	box-shadow: var(--cvp-shadow-md);
	transition: background-color 0.2s;
}

.cvp-mobile__primary:hover {
	color: #fff;
	background: var(--cvp-purple-dark);
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.cvp-footer {
	padding-block: 4rem;
	font-family: var(--cvp-font);
	color: #fff;
	background: var(--cvp-gray-900);
}

.cvp-footer__container {
	width: 80%;
	margin-inline: auto;
}

.cvp-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.cvp-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cvp-logo--footer {
	margin-bottom: 1rem;
	line-height: 2rem;
}

.cvp-footer__tagline {
	margin: 0 0 1rem;
	color: var(--cvp-gray-400);
}

.cvp-footer__social {
	display: flex;
	gap: 1rem;
}

.cvp-footer__social a {
	display: inline-flex;
	color: var(--cvp-gray-400);
	text-decoration: none;
	transition: color 0.2s;
}

/* Social icons track the main site's text-xl; contact icons its base size. */
.cvp-footer__social svg {
	width: 1.25rem;
	height: 1.25rem;
}

.cvp-footer__icon svg {
	width: 1rem;
	height: 1rem;
}

.cvp-footer__social a:hover {
	color: var(--cvp-purple);
}

.cvp-footer__heading {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.75rem;
	color: #fff;
}

.cvp-footer__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cvp-footer__list a {
	color: var(--cvp-gray-400);
	text-decoration: none;
	transition: color 0.2s;
}

.cvp-footer__list a:hover {
	color: #fff;
	text-decoration: underline;
}

.cvp-footer__list--contacts li {
	display: flex;
	align-items: center;
	color: var(--cvp-gray-400);
}

.cvp-footer__icon {
	display: inline-flex;
	margin-inline-end: 0.5rem;
	color: var(--cvp-purple);
}

.cvp-footer__divider {
	margin-block: 2rem;
	border-top: 1px solid var(--cvp-gray-800);
}

.cvp-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--cvp-gray-400);
}

@media (min-width: 768px) {
	.cvp-footer__bottom {
		flex-direction: row;
		gap: 0;
	}
}

.cvp-footer__credit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cvp-footer__credit a {
	color: var(--cvp-purple);
	text-decoration: none;
	transition: color 0.2s;
}

.cvp-footer__credit a:hover {
	color: var(--cvp-purple-400);
}

/* Strip the theme's default spacing around the footer template part. */
.wp-block-template-part:has(.cvp-footer) {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cvp-nav,
	.cvp-nav__link,
	.cvp-nav__link-text::after,
	.cvp-btn-primary,
	.cvp-burger__bar,
	.cvp-mobile {
		transition: none;
	}
}