/*
Theme Name: Personal Dev Theme
Theme URI: https://kostasthanos.com
Author: Konstantinos Thanos
Author URI: https://kostasthanos.com
Description: Personal portfolio and plugin store theme
Version: 1.0.0
License: Private
Text Domain: personal-dev-theme
*/

:root {
	--color-bg: #0a0a0f;
	--color-text: #f5f5f7;
	--color-accent: #288fda;
	--transition-fast: 0.2s ease;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
	transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.site-header.header-bg-solid {
	background-color: var(--header-bg);
}

.site-header.is-sticky.use-sticky-bg {
	background-color: var(--header-sticky-bg);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
}

.site-logo {
	display: flex;
	align-items: center;
}

.site-logo .logo-img {
	height: var(--header-logo-size, 40px);
	width: auto;
	transition: opacity var(--transition-fast), height var(--transition-fast);
}

.site-header.is-sticky .logo-img {
	height: var(--header-sticky-logo-size, 32px);
}

.site-logo .logo-text {
	font-weight: 700;
	font-size: 1.25rem;
}

.main-navigation {
	justify-self: center;
}

.main-navigation .primary-menu {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
	font-size: 0.95rem;
	opacity: 0.85;
	transition: opacity var(--transition-fast), color var(--transition-fast);
}

.main-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transition: transform var(--transition-fast);
}

.main-navigation a:hover {
	opacity: 1;
	color: var(--color-accent);
}

.main-navigation a:hover::after {
	transform: scaleX(1);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	opacity: 1;
	color: var(--color-accent);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
	transform: scaleX(1);
}

.header-ctas {
	display: flex;
	gap: 12px;
	justify-self: end;
}

.btn-cta {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 6px;
	background: transparent;
	border: 1px solid var(--btn-bg);
	color: var(--btn-bg);
	font-size: 0.9rem;
	font-weight: 600;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-cta:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: #fff;
	transform: translateY(-1px);
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	color: var(--color-text);
	z-index: 160;
}

.menu-icon {
	width: 24px;
	height: 24px;
	overflow: visible;
}

.menu-icon .bar,
.menu-icon .cross {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.3s ease;
}

.menu-icon .icon-close .cross {
	stroke-dashoffset: 1;
}

.menu-icon .icon-bars .bar:nth-child(1) {
	transition-delay: 0.08s;
}

.menu-icon .icon-bars .bar:nth-child(2) {
	transition-delay: 0.04s;
}

.site-header.menu-open .menu-icon .icon-bars .bar {
	stroke-dashoffset: 1;
}

.site-header.menu-open .menu-icon .icon-bars .bar:nth-child(1) {
	transition-delay: 0s;
}

.site-header.menu-open .menu-icon .icon-bars .bar:nth-child(2) {
	transition-delay: 0.04s;
}

.site-header.menu-open .menu-icon .icon-bars .bar:nth-child(3) {
	transition-delay: 0.08s;
}

.site-header.menu-open .menu-icon .icon-close .cross {
	stroke-dashoffset: 0;
}

.site-header.menu-open .menu-icon .icon-close .cross:nth-child(1) {
	transition-delay: 0.15s;
}

.site-header.menu-open .menu-icon .icon-close .cross:nth-child(2) {
	transition-delay: 0.22s;
}

.menu-icon-custom {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
}

.menu-icon-custom img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.icon-close-img {
	opacity: 0;
	transform: rotate(-45deg);
}

.site-header.menu-open .icon-open-img {
	opacity: 0;
	transform: rotate(45deg);
}

.site-header.menu-open .icon-close-img {
	opacity: 1;
	transform: rotate(0deg);
}

body.no-scroll {
	overflow: hidden;
}

@media (max-width: 782px) {
	.header-inner {
		display: flex;
		justify-content: space-between;
	}

	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		background: rgba(10, 10, 15, 0.98);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
		z-index: 150;
	}

	.site-header.menu-open .main-navigation {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.main-navigation .primary-menu {
		flex-direction: column;
		align-items: center;
		gap: 26px;
	}

	.main-navigation .primary-menu a {
		font-size: 1.5rem;
	}

	.header-ctas {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 12%;
		justify-self: auto;
		flex-direction: column;
		align-items: center;
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		transition: opacity 0.25s ease 0.05s, transform 0.25s ease 0.05s, visibility 0.25s ease;
		z-index: 151;
	}

	.site-header.menu-open .header-ctas {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* Homepage sections */

.section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px;
}

.section-eyebrow {
	margin: 0 0 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.section-title {
	margin: 0 0 40px;
	font-size: 2rem;
}

/* Skills */

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.skill-card {
	display: block;
	padding: 24px 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
	transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.skill-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-accent);
}

.skill-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin: 0 auto 12px;
}

.skill-title {
	margin: 0 0 6px;
	font-size: 1rem;
}

.skill-text {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

.skill-text p {
	margin: 0;
}

/* Work */

.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.work-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.02);
	transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.work-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-accent);
}

.work-media {
	position: relative;
}

.work-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.work-icons {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.work-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(10, 10, 15, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.work-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.work-body {
	padding: 20px;
}

.work-tag {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-accent);
}

.work-title {
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.work-description {
	margin: 0 0 12px;
	font-size: 0.9rem;
	opacity: 0.75;
}

.work-description p {
	margin: 0;
}

.work-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent);
	transition: gap var(--transition-fast);
}

.work-link:hover {
	gap: 10px;
}

/* Footer */

.site-footer {
	padding: 48px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 16px;
}

.site-footer-vertical .footer-inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.site-footer-vertical .footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.site-footer-horizontal .footer-inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	text-align: left;
}

.site-footer-horizontal .footer-brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.footer-logo img {
	height: var(--footer-logo-size, 32px);
	width: auto;
}

.footer-copyright {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.6;
}

@media (max-width: 600px) {
	.site-footer-horizontal .footer-inner {
		flex-direction: column;
		text-align: center;
	}

	.site-footer-horizontal .footer-brand {
		flex-direction: column;
	}
}

.footer-socials {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--social-icon-size, 18px) + 18px);
	height: calc(var(--social-icon-size, 18px) + 18px);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
	opacity: 0.8;
}

.social-link:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.social-link svg,
.social-icon-img {
	width: var(--social-icon-size, 18px);
	height: var(--social-icon-size, 18px);
}

.social-link.has-background {
	background: var(--social-bg);
	color: var(--color-bg);
}

.social-link.has-background.is-rounded {
	border-radius: 50%;
}

.social-link.has-background:not(.is-rounded) {
	border-radius: 6px;
}

/* Back to top */

.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 99;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}