/* ==========================================================================
   Base Enhancements
   ========================================================================== */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

::selection {
	background-color: var(--wp--preset--color--primary);
	color: #ffffff;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	body {
		--wp--preset--color--base: #0a0e14;
		--wp--preset--color--contrast: #f0f4f8;
		--wp--preset--color--primary: #bfcfe2;
		--wp--preset--color--accent: #f96d64;
		--wp--preset--color--surface: #12181f;
		--wp--preset--color--tertiary: #1a2230;
		--wp--preset--color--secondary-text: #a8b5c4;
		--wp--preset--color--muted: #7a8a9e;
	}
}

/* ==========================================================================
   Card Style
   ========================================================================== */

.is-style-card-hover {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(36, 84, 133, 0.1);
	border-radius: 1.5rem;
	overflow: hidden;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.is-style-card-hover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, rgba(36, 84, 133, 0.5) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.is-style-card-hover:hover::before,
.is-style-card-hover:focus-within::before {
	transform: scaleX(1);
}

.is-style-card-hover:hover,
.is-style-card-hover:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.1);
}

.is-style-card-hover a {
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	.is-style-card-hover {
		border-color: rgba(168, 181, 196, 0.1);
	}

	.is-style-card-hover::before {
		background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, rgba(191, 207, 226, 0.5) 100%);
	}

	.is-style-card-hover:hover,
	.is-style-card-hover:focus-within {
		border-color: var(--wp--preset--color--primary);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
	}
}

/* ==========================================================================
   Category / Tag Pills
   ========================================================================== */

.wp-block-post-terms a {
	display: inline-block;
	padding: 0.25em 0.75em;
	background: var(--wp--preset--color--tertiary);
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-post-terms a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Read More Link
   ========================================================================== */

.wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */

pre.wp-block-code {
	overflow-x: auto;
	tab-size: 4;
}

pre.wp-block-code code {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

code:not(pre code) {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 0.875em;
	background: var(--wp--preset--color--tertiary);
	padding: 0.2em 0.4em;
	border-radius: 0.375rem;
}

@media (prefers-color-scheme: dark) {
	pre.wp-block-code {
		background: var(--wp--preset--color--tertiary) !important;
		color: var(--wp--preset--color--contrast) !important;
		border-color: rgba(168, 181, 196, 0.1) !important;
	}
}

/* ==========================================================================
   Navigation Enhancements
   ========================================================================== */

.wp-block-navigation a {
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical dividers between desktop nav items */
@media (min-width: 600px) {
	.wp-block-navigation .wp-block-navigation__container {
		gap: 1.5rem;
	}

	.wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
		content: '';
		display: block;
		width: 1px;
		height: 1em;
		margin-left: -0.75rem;
		margin-right: 0.75rem;
		background: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	}
}

/* Mobile overlay: frosted glass effect */
.wp-block-navigation__responsive-container.is-menu-open {
	background: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
}

/* Mobile overlay: nested submenu tree lines */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	border-right: none;
	padding-right: 0.5rem;
	position: relative;
}

/* Vertical line that stops at the last item's center */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}

/* Clip the vertical line at the last item's center */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child::before {
	content: '';
	position: absolute;
	right: -0.5rem;
	top: 50%;
	bottom: -1rem;
	width: 1px;
	background: var(--wp--preset--color--base);
	z-index: 1;
}

/* Horizontal branch lines */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item::after {
	content: '';
	position: absolute;
	right: -0.5rem;
	top: 50%;
	width: 1rem;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}



/* ==========================================================================
   Post Navigation Links
   ========================================================================== */

.wp-block-post-navigation-link a {
	font-weight: 500;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Separator
   ========================================================================== */

.wp-block-separator {
	border-color: rgba(36, 84, 133, 0.1) !important;
}

@media (prefers-color-scheme: dark) {
	.wp-block-separator {
		border-color: rgba(168, 181, 196, 0.1) !important;
	}

	.wp-block-group[style*="border-bottom-color"],
	.wp-block-group[style*="border-top-color"] {
		border-color: rgba(168, 181, 196, 0.1) !important;
	}
}