/*
Theme Name: Sibel Selects
Theme URI: https://sibelselects.com
Author: Sibel Selects
Description: Custom theme for Sibel Selects – personal & fashion stylist, Stockholm. Built from the Sibel Selects Figma design.
Version: 1.0.10
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sibel-selects
*/

:root {
	--ink: #000;
	--dark: #29211f;
	--grey: #736e6b;
	--paper: #e7e6e2;
	--line: #e3e0db;
	--nav-h: 60px;
	--sans: "Inter", system-ui, -apple-system, sans-serif;
	--script: "Alex Brush", cursive;
	--serif: "Inria Serif", Georgia, serif;
	--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shade { position: absolute; inset: 0; background: rgba(0,0,0,.15); pointer-events: none; }

/* ---------- Nav ---------- */
.site-nav {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	padding: 0 40px;
	background: #fff;
	position: relative;
	z-index: 5;
}
.site-nav nav { display: flex; gap: 32px; }
.site-nav a {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
}
.site-nav a:hover { opacity: .6; }

/* ---------- Footer ---------- */
.site-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 40px;
	border-top: 1px solid var(--line);
	background: #fff;
}
.footer-logo { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; line-height: 1; text-decoration: none; color: var(--dark); }
.footer-links { display: flex; align-items: center; gap: 32px; }
.footer-social { display: flex; gap: 32px; }
.footer-links a { font-size: 12px; letter-spacing: .5px; text-decoration: none; color: var(--dark); }
.footer-social a { text-transform: uppercase; }
.footer-links a:hover { opacity: .6; }
.footer-meta { font-size: 11px; letter-spacing: .5px; color: var(--grey); }

/* ---------- Shared text ---------- */
.eyebrow {
	font-size: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
}
.eyebrow--small { font-size: 11px; letter-spacing: 2px; }
.serif-title {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.2;
	color: #1a1a1a;
	text-align: center;
}
.serif-title em { font-weight: 700; font-style: italic; }
.btn {
	display: inline-block;
	padding: 16px 36px;
	background: var(--dark);
	color: #fff;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity .2s;
}
.btn:hover { opacity: .85; }

/* ---------- Home ---------- */
.home-hero {
	position: relative;
	height: calc(100vh - var(--nav-h));
	height: calc(100svh - var(--nav-h));
	min-height: 520px;
	max-height: 1100px;
	overflow: hidden;
	color: #fff;
}
.home-hero .cover { object-position: 50% 36.7%; }
.home-hero-text {
	position: absolute;
	left: 0; right: 0; bottom: 70px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 0 16px;
	text-align: center;
}
.script { margin: 0; font-family: var(--script); font-weight: 400; line-height: 1; }
.home-hero h1 { font-family: "Monsieur La Doulaise", var(--script); font-size: 170px; }
.home-hero .eyebrow { line-height: 1.5; }

/* Receipt: real text laid over the blank receipt photo (1440 x 809 coordinates) */
.receipt {
	position: relative;
	overflow: hidden;
	background: var(--paper);
	height: calc(100vw * 809 / 1440);
}
.receipt-stage {
	position: absolute;
	top: 0; left: 50%;
	height: 100%;
	aspect-ratio: 1440 / 809;
	transform: translateX(-50%);
	container-type: inline-size;
}
.receipt-photo { width: 100%; height: 100%; }
.receipt-text {
	position: absolute;
	left: calc(607 / 1440 * 100%);
	top: calc(313 / 809 * 100%);
	width: calc(224 / 1440 * 100%);
	font-family: var(--mono);
	font-size: calc(10.5 / 1440 * 100cqw);
	line-height: 1.276;
	color: #1a1a1a;
	display: flex; flex-direction: column;
	gap: calc(26 / 1440 * 100cqw);
}
.receipt--thanks .receipt-text { top: calc(308 / 809 * 100%); width: calc(222 / 1440 * 100%); }
.receipt-text a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.receipt-text a:hover { opacity: .6; }
.receipt-email { text-align: center; }

.home-film {
	position: relative;
	display: block;
	aspect-ratio: 1440 / 810;
	overflow: hidden;
	background: #111;
	text-decoration: none;
}
.home-film video { background: #111; }
.home-film .shade { background: rgba(0,0,0,.10); transition: background .35s ease; }
.home-film:hover .shade, .home-film:focus-visible .shade { background: rgba(0,0,0,.40); }
.home-film-label {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--serif);
	font-size: 64px;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.2;
	color: #fff;
	pointer-events: none;
}

/* ---------- Portfolio ---------- */
.stylist {
	display: flex; flex-direction: column; align-items: center;
	padding: 40px 16px 15px;
	gap: 40px;
}
.stylist-photo { width: 511px; aspect-ratio: 511 / 767; object-fit: cover; }
.the-work {
	display: flex; flex-direction: column; align-items: center;
	padding: 96px 16px 24px;
	gap: 14px;
}
.the-work .serif-title { margin-top: 16px; }
.divider { width: 1px; height: 48px; background: #bfbab3; margin-top: 16px; }

.project {
	min-height: 800px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px;
	padding: 40px 16px;
}
.cap { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cap-title { font-size: 12px; }
.cap-credit { font-size: 11px; font-weight: 500; }

/* Video players */
.vplayer {
	position: relative;
	width: calc(var(--w) * 1px);
	max-width: 100%;
	aspect-ratio: var(--w) / var(--h);
	background: #000;
	overflow: hidden;
	cursor: pointer;
}
.vplayer video { width: 100%; height: 100%; object-fit: cover; }
.vplayer:fullscreen video, .vplayer:-webkit-full-screen video { object-fit: contain; }
.vp-bar {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 44px;
	display: flex; align-items: center; gap: 16px;
	padding: 0 18px;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55));
	cursor: default;
	opacity: 1;
	transition: opacity .3s;
}
.vplayer.is-playing.is-idle .vp-bar { opacity: 0; }
.vp-seek {
	flex: 1;
	-webkit-appearance: none; appearance: none;
	height: 16px;
	background: transparent;
	cursor: pointer;
	--p: 0%;
}
.vp-seek::-webkit-slider-runnable-track {
	height: 2px; border-radius: 1px;
	background: linear-gradient(to right, #fff var(--p), rgba(255,255,255,.35) var(--p));
}
.vp-seek::-moz-range-track { height: 2px; background: rgba(255,255,255,.35); }
.vp-seek::-moz-range-progress { height: 2px; background: #fff; }
.vp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin-top: -4px; }
.vp-seek::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; }
.vp-full { display: flex; padding: 10px; margin-right: -10px; }
.vp-sound {
	position: absolute; left: 12px; bottom: 12px;
	display: flex; padding: 8px;
	background: rgba(0,0,0,.35); border-radius: 50%;
	z-index: 2;
}
.has-controls .vp-sound { bottom: 52px; }
.vp-sound[hidden] { display: none; }

/* Slideshows */
.slideshow { display: flex; align-items: center; }
.ss-arrow {
	width: 40px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	color: #9e9e9e;
	flex: none;
}
.ss-arrow:hover { color: #555; }
.ss-stage { position: relative; width: 400px; aspect-ratio: 2 / 3; }
.ss-slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
	display: flex; align-items: center; justify-content: center;
}
.ss-slide.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.ss-slide img, .ss-slide video { width: 100%; height: 100%; object-fit: contain; }
.ss-slide video { cursor: pointer; }

.cta {
	display: flex; flex-direction: column; align-items: center;
	gap: 24px;
	padding: 96px 16px 112px;
}

/* ---------- Booking ---------- */
.booking {
	background: var(--paper);
	display: flex; justify-content: center;
	padding: 80px 16px;
}
.booking-card {
	width: 435px; max-width: 100%;
	background: #fff;
	padding: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
	font-family: var(--mono);
	font-size: 16px;
	line-height: 1.3;
	color: #1a1a1a;
	display: flex; flex-direction: column;
	gap: 14px;
}
.booking-card h1 { margin: 0; font-size: 16px; font-weight: 400; }
.booking-intro { color: #6b6965; margin-bottom: 4px; }
.booking-error { color: #a33; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field legend { padding: 0; }
.field input, .field textarea {
	font: inherit; color: inherit;
	border: 0; border-bottom: 1px solid #8c8a85;
	border-radius: 0;
	background: transparent;
	padding: 2px 0 4px;
	outline: none;
	width: 100%;
}
.field textarea {
	resize: vertical;
	line-height: 26px;
	padding: 0;
	border-bottom: 0;
	background: repeating-linear-gradient(to bottom, transparent 0 25px, #8c8a85 25px 26px);
	min-height: 52px;
}
.field input:focus, .field textarea:focus { border-color: #1a1a1a; }
.types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.types legend { grid-column: 1 / -1; margin-bottom: 4px; }
.tick { cursor: pointer; display: flex; }
.tick input { position: absolute; opacity: 0; pointer-events: none; }
.tick span::before { content: "[ ] "; white-space: pre; }
.tick input:checked + span::before { content: "[x] "; }
.tick input:focus-visible + span { outline: 1px dotted #1a1a1a; }
.send {
	margin-top: 8px;
	background: #1a1a1a;
	color: #f5f3ee;
	padding: 9px;
	font-family: var(--mono);
	font-size: 16px;
	letter-spacing: .5px;
}
.send:hover { opacity: .85; }

/* ---------- Thank you ---------- */
.back-home {
	background: var(--paper);
	display: flex; justify-content: center;
	padding: 0 16px 72px;
}
.back-home a { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--dark); }
.back-home a:hover { opacity: .6; }

/* Other pages (privacy policy etc.) */
.plain-page { max-width: 760px; margin: 0 auto; padding: 80px 16px; }
.plain-title { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 32px; }
.plain-content { font-size: 15px; line-height: 1.7; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.site-nav { justify-content: center; padding: 0 16px; }
	.site-nav nav { gap: 16px; }
	.site-nav a { font-size: 10px; }

	.site-footer { flex-direction: column; gap: 10px; padding: 28px 16px 20px; text-align: center; }
	.footer-logo { font-size: 11px; }
	.footer-links { flex-direction: column; gap: 10px; }
	.footer-social { gap: 24px; }
	.footer-social a { font-size: 11px; }
	.footer-meta { font-size: 10px; }

	.eyebrow { font-size: 11px; letter-spacing: 1.5px; max-width: 320px; }

	.home-hero .cover { object-position: 50% 0%; }
	.home-hero-text { bottom: 48px; }
	.home-hero h1 { font-size: min(88px, 22.5vw); white-space: nowrap; }

	.receipt { height: 640px; }

	.home-film { aspect-ratio: 390 / 695; }
	.home-film-label { font-size: 40px; }

	.stylist { padding-top: 28px; gap: 28px; padding-bottom: 16px; }
	.stylist .serif-title { font-size: 26px; }
	.stylist-photo { width: 326px; }
	.the-work { padding-top: 56px; }

	.project { min-height: 0; padding: 28px 16px; }
	.vplayer--wide { width: 358px; }
	.vplayer--tall { width: 315px; }
	.has-controls .vp-bar { height: 34px; padding: 0 12px; gap: 12px; }
	.ss-arrow { width: 32px; }
	.ss-stage { width: calc(100vw - 32px - 64px); max-width: 300px; }

	.booking { padding: 40px 20px; }
	.booking-card { padding: 28px 20px; font-size: 14.5px; }
	.booking-card h1, .send { font-size: 14.5px; }

	.receipt--thanks { height: 700px; }
	.receipt--thanks .receipt-stage { height: 971px; top: -142px; left: calc(50% - 867.6px); transform: none; }
	.back-home { padding-bottom: 56px; }
}