/*
Theme Name: Viktor Gebbeken
Theme URI: https://viktorgebbeken.com
Author: Viktor Gebbeken
Description: Personal one-page biography theme for viktorgebbeken.com: midnight blue, cream and champagne, with a built-in contact form.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hooked
*/

/* Page */
.vg-page {
	padding-top: 3.5rem;
	padding-bottom: 4rem;
	text-align: center;
}
.vg-page > * + * {
	margin-block-start: 3rem;
}

/* Language */
html:not([data-lang="nl"]) .vg-nl,
html[data-lang="nl"] .vg-en {
	display: none !important;
}
.vg-lang {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	margin: 0;
	display: flex;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.vg-lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 36px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--muted);
	border: 1px solid transparent;
}
html:not([data-lang="nl"]) .vg-lang a[data-set-lang="en"],
html[data-lang="nl"] .vg-lang a[data-set-lang="nl"] {
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--line);
}

/* Header */
.vg-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 500;
	letter-spacing: -0.02em;
	font-size: 2.9rem;
	line-height: 1;
}
.vg-portrait {
	margin: 1.5rem auto 0;
	display: table;
	padding: 8px;
	background: var(--wp--preset--color--cream);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.vg-portrait img {
	width: 168px;
	height: 168px;
	object-fit: cover;
	object-position: center 35%;
	display: block;
	border-radius: 8px;
}
.vg-social {
	margin-top: 1.25rem;
	gap: 0.75rem;
}
.vg-social .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.9rem;
	padding: 0.7rem 1.25rem;
}
.vg-social .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--vg-icon) center / contain no-repeat;
	mask: var(--vg-icon) center / contain no-repeat;
}
.vg-linkedin {
	--vg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cline x1='8' y1='10.5' x2='8' y2='16.5'/%3E%3Cline x1='8' y1='7.5' x2='8' y2='7.6'/%3E%3Cpath d='M12 16.5v-3.5a2.5 2.5 0 0 1 5 0v3.5'/%3E%3Cline x1='12' y1='10.5' x2='12' y2='16.5'/%3E%3C/svg%3E");
}
.vg-instagram {
	--vg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='17.5' y1='6.5' x2='17.5' y2='6.6'/%3E%3C/svg%3E");
}
.vg-instagram .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--cream);
}
.vg-instagram .wp-block-button__link:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--midnight);
}

/* Headline */
.vg-title {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 3.1rem);
	line-height: 1.08;
}
.vg-accent {
	color: var(--wp--preset--color--champagne);
}

/* Story */
.vg-story p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--soft-cream);
}

/* Signature */
.vg-story .vg-signature {
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--signature);
	font-size: clamp(2rem, 8vw, 2.6rem);
	line-height: 1.1;
	color: var(--wp--preset--color--cream);
	transform: rotate(-4deg);
}

/* HOOKED card */
.vg-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 1.5rem 1.25rem;
}
.vg-card > * + * {
	margin-block-start: 0.75rem;
}
.vg-card .vg-icon img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line);
}
.vg-card .vg-wordmark img {
	width: 150px;
	height: auto;
}
.vg-card figure {
	margin-left: auto;
	margin-right: auto;
}
.vg-label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.vg-card p {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--soft-cream);
}
.vg-card a {
	font-weight: 500;
	text-decoration: none;
}

/* Contact */
.vg-contact-title {
	font-size: 1.9rem;
	line-height: 1.15;
}
.vg-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-align: left;
}
.vg-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 500;
}
.vg-form label span {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.vg-form input,
.vg-form textarea {
	min-height: 44px;
	padding: 0 0.85rem;
	background: #0B1122;
	border: 1px solid #3A4052;
	border-radius: 8px;
	color: var(--wp--preset--color--cream);
	font: inherit;
	font-size: 16px; /* 16px or more stops iPhone from zooming in on focus */
	font-weight: 400;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
.vg-form textarea {
	padding: 0.75rem 0.85rem;
	resize: vertical;
}
.vg-form input:focus,
.vg-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--champagne);
	outline-offset: 1px;
}
.vg-form .vg-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}
#contact {
	scroll-margin-top: 1.5rem;
}
.vg-form button {
	align-self: center;
	min-height: 48px;
	padding: 0 2rem;
	background: var(--wp--preset--color--champagne);
	color: var(--wp--preset--color--midnight);
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.vg-form button:hover {
	background: var(--wp--preset--color--cream);
}
.vg-notice {
	border: 1px solid var(--wp--preset--color--champagne);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
}
.vg-notice p {
	margin: 0;
}
.vg-notice p + p {
	margin-top: 0.4rem;
	color: var(--wp--preset--color--soft-cream);
	font-size: 0.95rem;
}
.vg-notice.is-error {
	border-color: #E8A0A0;
}

/* Footer */
.vg-footer {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
.vg-footer p {
	margin: 0.25rem 0 0;
}
.vg-footer a {
	color: var(--wp--preset--color--muted);
}


/* Load animation: everything rises in one after another, the signature writes itself.
   Only on the live site (html[data-lang] is set by the theme script), not in the editor,
   and switched off for visitors who prefer reduced motion. */
@keyframes vg-rise {
	from { opacity: 0; translate: 0 16px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes vg-pop {
	from { opacity: 0; scale: 0.94; }
	to   { opacity: 1; scale: 1; }
}
@keyframes vg-write {
	from { clip-path: inset(-30% 100% -30% -5%); }
	to   { clip-path: inset(-30% -5% -30% -5%); }
}
@media (prefers-reduced-motion: no-preference) {
	html[data-lang] .vg-lang,
	html[data-lang] .vg-title,
	html[data-lang] .vg-social,
	html[data-lang] .vg-card,
	html[data-lang] .vg-story > p:not(.vg-signature),
	html[data-lang] .vg-contact,
	html[data-lang] .vg-footer {
		animation: vg-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	html[data-lang] .vg-portrait {
		animation: vg-pop 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	html[data-lang] .vg-signature {
		animation: vg-write 1.3s cubic-bezier(0.55, 0, 0.35, 1) both;
	}
	html[data-lang] .vg-lang { animation-delay: 0.1s; }
	html[data-lang] .vg-title { animation-delay: 0.05s; }
	html[data-lang] .vg-portrait { animation-delay: 0.2s; }
	html[data-lang] .vg-social { animation-delay: 0.32s; }
	html[data-lang] .vg-card { animation-delay: 0.44s; }
	html[data-lang] .vg-story > p:nth-child(1) { animation-delay: 0.56s; }
	html[data-lang] .vg-story > p:nth-child(2) { animation-delay: 0.66s; }
	html[data-lang] .vg-story > p:nth-child(3) { animation-delay: 0.76s; }
	html[data-lang] .vg-signature { animation-delay: 0.95s; }
	html[data-lang] .vg-contact { animation-delay: 0.85s; }
	html[data-lang] .vg-footer { animation-delay: 0.95s; }
	/* After sending the form, show the page straight away. */
	html[data-lang].vg-no-anim * { animation: none !important; }
}