/**
 * Akshay Portfolio — presentation layer.
 * Tokens also exposed as --ak-* for Elementor widgets.
 */

:root {
	--ak-bg: #0b0f14;
	--ak-text: #f5f7fa;
	--ak-muted: #9aa4b2;
	--ak-accent: #7c5cfc;
	--ak-success: #22c55e;
	--ak-card: #121821;
	--ak-border: #252d38;
	--ak-radius: 4px;
	--ak-header-h: 4.25rem;
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	background: var(--ak-bg);
	color: var(--ak-text);
	max-width: 100%;
}

/* Subtle atmosphere — not a flat fill */
body::before {
	content: "";
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 80% 50% at 10% -10%, rgba(124, 92, 252, 0.18), transparent 55%),
		radial-gradient(ellipse 60% 40% at 90% 0%, rgba(34, 197, 94, 0.06), transparent 50%),
		linear-gradient(180deg, #0b0f14 0%, #0d1219 100%);
}

a {
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Sticky must be on the template-part <header>, not only the inner group */
.wp-site-blocks > header.wp-block-template-part,
body > .wp-site-blocks > header,
header.wp-block-template-part:has(.ak-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

/* Header */
.ak-header {
	position: relative;
	z-index: 1000;
	background: rgba(11, 15, 20, 0.92);
	border-bottom: 1px solid var(--ak-border);
	padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
	width: 100%;
}

/* Blur on a pseudo so it does not trap position:fixed overlay */
.ak-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.ak-header > * {
	position: relative;
	z-index: 1;
}

.ak-header__inner {
	min-height: var(--ak-header-h);
	gap: 1rem;
	min-width: 0;
}

.ak-header .wp-block-site-title {
	flex: 0 1 auto;
	min-width: 0;
}

.ak-header .wp-block-site-title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ak-header .wp-block-navigation {
	flex: 0 0 auto;
	min-width: 0;
}

.ak-header .wp-block-site-title a {
	letter-spacing: -0.03em;
	color: var(--ak-text) !important;
}

.ak-header .wp-block-navigation,
.ak-header .wp-block-navigation .wp-block-navigation-item {
	color: var(--ak-muted);
}

.ak-header .wp-block-navigation a,
.ak-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--ak-muted) !important;
}

.ak-header .wp-block-navigation a:hover,
.ak-header .wp-block-navigation a:focus,
.ak-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.ak-header .wp-block-navigation .current-menu-item > a,
.ak-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ak-text) !important;
}

/* Only the dropdown panel — not the parent .wp-block-navigation-submenu <li> */
.ak-header .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.ak-header .wp-block-navigation__submenu-container {
	background-color: var(--ak-card) !important;
	background: var(--ak-card) !important;
	color: var(--ak-text) !important;
	border: 1px solid var(--ak-border) !important;
	border-radius: var(--ak-radius);
	padding: 0.35rem !important;
	min-width: 14rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.ak-header .wp-block-navigation-submenu {
	border: none !important;
	background: transparent !important;
}

.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item,
.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.ak-header .wp-block-navigation__submenu-container a,
.ak-header .wp-block-navigation__submenu-container a:visited {
	color: var(--ak-muted) !important;
	background: transparent !important;
	padding: 0.45rem 0.75rem !important;
}

.ak-header .wp-block-navigation__submenu-container a:hover,
.ak-header .wp-block-navigation__submenu-container a:focus,
.ak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--ak-text) !important;
	background: rgba(124, 92, 252, 0.12) !important;
}

.ak-header .wp-block-navigation__submenu-icon,
.ak-header .wp-block-navigation__submenu-icon svg {
	color: var(--ak-muted) !important;
	fill: var(--ak-muted) !important;
	stroke: var(--ak-muted) !important;
}

/* Mobile overlay drawer */
.ak-header .wp-block-navigation__responsive-container-open,
.ak-header .wp-block-navigation__responsive-container-close {
	color: var(--ak-text) !important;
	padding: 0.35rem;
}

.ak-header .wp-block-navigation__responsive-dialog,
.ak-header .wp-block-navigation__responsive-container-close svg,
.ak-header .wp-block-navigation__responsive-container-open svg {
	color: var(--ak-text) !important;
	fill: var(--ak-text) !important;
}

/*
 * Core only overlays below 600px. Eight links overflow from tablet up,
 * so keep the hamburger through 1100px.
 */
@media (max-width: 1100px) {
	.ak-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.ak-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
		width: 0;
		height: 0;
		overflow: hidden;
	}
}

.ak-header .wp-block-navigation__responsive-container.is-menu-open {
	display: block !important;
	position: fixed !important;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	min-height: 100vh;
	max-width: none !important;
	padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 2rem;
	background-color: var(--ak-bg) !important;
	color: var(--ak-text) !important;
	z-index: 100000;
	overflow: auto;
}

.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	max-width: none !important;
	width: 100%;
	background-color: transparent !important;
	color: var(--ak-text) !important;
}

.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	width: 100%;
	gap: 0.15rem;
}

.ak-header .wp-block-navigation__responsive-container.is-menu-open a,
.ak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--ak-text) !important;
	font-family: "Syne", sans-serif;
	font-size: clamp(1.35rem, 5vw, 1.85rem);
	font-weight: 700;
	line-height: 1.25;
	padding: 0.55rem 0 !important;
	width: 100%;
}

.ak-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
.ak-header .wp-block-navigation__responsive-container.is-menu-open a:focus {
	color: var(--ak-accent) !important;
}

/* Main content shell (replaces block style padding attrs) */
.ak-main {
	padding-top: var(--wp--preset--spacing--60, clamp(2rem, 4vw, 3rem));
	padding-bottom: 0;
	width: 100%;
}

.ak-main--flush-top {
	padding-top: 0;
}

.ak-main--full,
.ak-main--full > .wp-block-post-content {
	max-width: none !important;
	width: 100%;
}

.ak-main--full > .wp-block-post-content {
	padding: 0;
}

.ak-header__inner,
.ak-footer__inner {
	align-items: center;
	width: 100%;
}

/* Hero */
.ak-hero {
	padding-block: clamp(3.5rem, 12vw, 7.5rem);
	position: relative;
}

.ak-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ak-accent);
	font-family: "Syne", sans-serif;
}

.ak-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(2.75rem, 8vw, 4.5rem);
	line-height: 1.02;
	max-width: 12ch;
}

.ak-lede {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	color: var(--ak-muted);
	max-width: 38rem;
	line-height: 1.55;
	margin-bottom: 1.75rem;
}

.ak-section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.ak-section__sub {
	color: var(--ak-muted);
	margin-top: -0.5rem;
	margin-bottom: 2rem;
	max-width: 40rem;
}

/* Cards — interaction containers */
.ak-card {
	background: var(--ak-card);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-radius);
	padding: 1.35rem 1.4rem;
	height: 100%;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ak-card:hover {
	border-color: rgba(124, 92, 252, 0.45);
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.ak-card h3 {
	margin-top: 0;
}

.ak-card p {
	color: var(--ak-muted);
}

.ak-card-grid {
	gap: 1.25rem !important;
}

.ak-card-grid .wp-block-column {
	margin: 0 !important;
}

/* Buttons */
.wp-block-button__link {
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(124, 92, 252, 0.35);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--ak-border);
	color: var(--ak-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ak-accent);
	box-shadow: none;
}

.ak-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1rem;
	border-radius: var(--ak-radius);
	background: var(--ak-accent);
	color: var(--ak-text) !important;
	font-family: "Syne", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
}

.ak-btn--ghost {
	background: transparent;
	border: 1px solid var(--ak-border);
}

.ak-btn--ghost:hover {
	border-color: var(--ak-accent);
}

.ak-btn--success {
	background: var(--ak-success);
	color: #04120a !important;
}

/* Meta panel on singles */
.ak-meta-panel {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--ak-border);
}

.ak-meta-panel__stack {
	color: var(--ak-muted);
	margin-bottom: 1rem;
}

.ak-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ak-accent);
	margin-right: 0.5rem;
	font-family: "Syne", sans-serif;
}

.ak-meta-panel__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
}

.ak-code-block {
	margin: 0;
	background: var(--ak-card);
	border: 1px solid var(--ak-border);
	border-radius: var(--ak-radius);
	overflow: hidden;
}

.ak-code-block figcaption {
	padding: 0.55rem 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ak-muted);
	border-bottom: 1px solid var(--ak-border);
	font-family: "Syne", sans-serif;
}

.ak-code-block pre {
	margin: 0;
	padding: 1rem 1.15rem;
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ak-text);
	background: transparent;
}

.ak-term-chips .wp-block-post-terms a,
.ak-term-chips a {
	display: inline-block;
	margin: 0 0.35rem 0.5rem 0;
	padding: 0.2rem 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid var(--ak-border);
	border-radius: 999px;
	color: var(--ak-muted) !important;
	text-decoration: none !important;
}

.ak-term-chips a:hover {
	border-color: var(--ak-accent);
	color: var(--ak-text) !important;
}

.ak-post-meta {
	gap: 1rem;
	color: var(--ak-muted);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

/* Footer */
.ak-footer {
	border-top: 1px solid var(--ak-border);
	padding: 2rem clamp(1.25rem, 4vw, 3rem);
	margin-top: auto;
}

.ak-footer__brand {
	margin: 0;
	font-family: "Syne", sans-serif;
	font-weight: 600;
}

.ak-footer__meta {
	margin: 0;
	color: var(--ak-muted);
	font-size: 0.9rem;
}

/* Query grid cards from post-template */
.wp-block-post-template.is-layout-grid {
	gap: 1.25rem;
}

.wp-block-post-template .ak-card .wp-block-post-excerpt__excerpt {
	color: var(--ak-muted);
}

/* Motion */
@media (prefers-reduced-motion: no-preference) {
	.ak-hero .ak-eyebrow,
	.ak-hero .ak-hero__title,
	.ak-hero .ak-lede,
	.ak-hero .wp-block-buttons {
		animation: ak-rise 0.7s ease both;
	}

	.ak-hero .ak-hero__title {
		animation-delay: 0.08s;
	}

	.ak-hero .ak-lede {
		animation-delay: 0.16s;
	}

	.ak-hero .wp-block-buttons {
		animation-delay: 0.24s;
	}

	.ak-card.is-visible {
		animation: ak-rise 0.55s ease both;
	}
}

@keyframes ak-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Success accent — only for positive metrics if used */
.ak-success {
	color: var(--ak-success);
}

@media (max-width: 781px) {
	.ak-hero__title {
		max-width: none;
	}

	.ak-card-grid {
		flex-direction: column;
	}
}