/*
Theme Name: Brandface Studio
Theme URI: https://example.com/brandface-studio
Author: Brand Face Business Rep
Description: Editorial/theatrical motyw blokowy dla Brand Face Business Rep - profesjonalnej reprezentacji marki przed kamerą.
Version: 4.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: brandface-studio
*/

:root {
	--wp--preset--spacing--outer: clamp(1.25rem, 4vw, 4rem);
	--bf-ink-soft: #4a443c;
	--bf-ink-soft-on-dark: rgba(250, 247, 242, 0.82);
	--bf-line: rgba(27, 23, 18, 0.12);
	--bf-line-on-dark: rgba(250, 247, 242, 0.22);
	--bf-line-wine: rgba(107, 27, 34, 0.4);
}

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

.wp-site-blocks { overflow-x: hidden; }

::selection { background: var(--wp--preset--color--wine); color: var(--wp--preset--color--cream); }

/* ---------- typographic helpers ---------- */
.bf-eyebrow,
.bf-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wine);
	margin-bottom: 24px;
	display: block;
}
.has-wine-background-color .bf-eyebrow,
.has-wine-background-color .bf-label,
.has-ink-background-color .bf-eyebrow,
.has-ink-background-color .bf-label { color: var(--wp--preset--color--gold); }

.bf-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-style: normal;
	letter-spacing: -.01em;
	line-height: 1.08;
	text-wrap: balance;
}
.bf-display em { font-style: italic; color: var(--wp--preset--color--wine); }
.has-wine-background-color .bf-display em,
.has-ink-background-color .bf-display em { color: var(--wp--preset--color--gold); }

.bf-lede { max-width: 42rem; color: var(--bf-ink-soft); font-size: 18px; line-height: 1.6; }
.has-wine-background-color .bf-lede,
.has-ink-background-color .bf-lede { color: var(--bf-ink-soft-on-dark); }
.bf-measure { max-width: 38rem; }

/* ---------- section shell - one screen, one statement ---------- */
.bf-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.bf-section--tight { min-height: 0; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.bf-section--warm { background: var(--wp--preset--color--cream-warm); }
.bf-align-left, .bf-align-left .wp-block-column { text-align: left; }

.bf-rule { border: none; border-top: 1px solid var(--bf-line-wine); opacity: 1; margin: 0; }
.has-ink-background-color .bf-rule,
.has-wine-background-color .bf-rule { border-top-color: var(--bf-line-on-dark); }

/* ---------- scroll-cue (hero) ---------- */
.bf-scroll-cue { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); width: 1px; height: 56px; background: var(--bf-line); overflow: hidden; }
.bf-scroll-cue::after { content: ""; position: absolute; top: -56px; left: 0; width: 100%; height: 100%; background: var(--wp--preset--color--wine); animation: bf-scroll-drop 2.2s ease-in-out infinite; }
@keyframes bf-scroll-drop { 50% { top: 0; } 100% { top: 56px; } }
@media (prefers-reduced-motion: reduce) { .bf-scroll-cue::after { animation: none; top: 0; } }

/* ---------- curtain intro ---------- */
.bf-curtain { position: fixed; top: 0; bottom: 0; width: 50vw; z-index: 200; background: linear-gradient(180deg, var(--wp--preset--color--wine), var(--wp--preset--color--wine-deep)); }
.bf-curtain--l { left: 0; animation: bf-curtain-l 1.4s .3s cubic-bezier(.77,0,.18,1) forwards; }
.bf-curtain--r { right: 0; animation: bf-curtain-r 1.4s .3s cubic-bezier(.77,0,.18,1) forwards; }
@keyframes bf-curtain-l { to { transform: translateX(-100%); } }
@keyframes bf-curtain-r { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .bf-curtain--l, .bf-curtain--r { animation-duration: .6s; } }

/* ---------- cursor spotlight ---------- */
#bf-spotlight {
	position: fixed; inset: 0; pointer-events: none; z-index: 2;
	background: radial-gradient(circle 420px at var(--sx, 50%) var(--sy, 20%), rgba(255,250,240,0.5), rgba(255,250,240,0) 70%);
	mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: reduce), (hover: none) { #bf-spotlight { display: none; } }

/* ---------- header - fixed, fades in once the curtain has opened ---------- */
.bf-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; opacity: 0; animation: bf-fade-in 1s 1.8s forwards; }
@media (max-width: 782px) { .bf-site-header { background: var(--wp--preset--color--cream); } }
@keyframes bf-fade-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bf-site-header { opacity: 1; animation: none; } }

.bf-nav-cta a { border-bottom: 1px solid currentColor; padding-bottom: 3px; text-decoration: none !important; transition: opacity .3s ease; }
.bf-nav-cta a:hover { opacity: .6; }

/* ---------- scroll reveal - slow, deliberate, staggered ---------- */
.bf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.bf-reveal.is-visible { opacity: 1; transform: translateY(0); }
.bf-reveal-d1.is-visible { transition-delay: .12s; }
.bf-reveal-d2.is-visible { transition-delay: .24s; }
.bf-reveal-d3.is-visible { transition-delay: .36s; }
.bf-reveal-d4.is-visible { transition-delay: .48s; }
.bf-reveal-d5.is-visible { transition-delay: .6s; }
.bf-reveal-d6.is-visible { transition-delay: .72s; }

.bf-reveal .bf-card,
.bf-reveal .bf-price-card,
.bf-reveal .bf-frame,
.bf-reveal .bf-checklist li,
.bf-reveal .bf-step {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s ease, transform .9s ease;
}
.bf-reveal.is-visible .bf-card,
.bf-reveal.is-visible .bf-price-card,
.bf-reveal.is-visible .bf-frame,
.bf-reveal.is-visible .bf-checklist li,
.bf-reveal.is-visible .bf-step {
	opacity: 1;
	transform: translateY(0);
}
.bf-reveal.is-visible .bf-card:nth-child(1), .bf-reveal.is-visible .bf-price-card:nth-child(1), .bf-reveal.is-visible .bf-frame:nth-child(1), .bf-reveal.is-visible .bf-checklist li:nth-child(1), .bf-reveal.is-visible .bf-step:nth-child(1) { transition-delay: .12s; }
.bf-reveal.is-visible .bf-card:nth-child(2), .bf-reveal.is-visible .bf-price-card:nth-child(2), .bf-reveal.is-visible .bf-frame:nth-child(2), .bf-reveal.is-visible .bf-checklist li:nth-child(2), .bf-reveal.is-visible .bf-step:nth-child(2) { transition-delay: .24s; }
.bf-reveal.is-visible .bf-card:nth-child(3), .bf-reveal.is-visible .bf-price-card:nth-child(3), .bf-reveal.is-visible .bf-frame:nth-child(3), .bf-reveal.is-visible .bf-checklist li:nth-child(3), .bf-reveal.is-visible .bf-step:nth-child(3) { transition-delay: .36s; }
.bf-reveal.is-visible .bf-card:nth-child(4), .bf-reveal.is-visible .bf-price-card:nth-child(4), .bf-reveal.is-visible .bf-frame:nth-child(4), .bf-reveal.is-visible .bf-checklist li:nth-child(4), .bf-reveal.is-visible .bf-step:nth-child(4) { transition-delay: .48s; }
.bf-reveal.is-visible .bf-card:nth-child(5), .bf-reveal.is-visible .bf-price-card:nth-child(5), .bf-reveal.is-visible .bf-frame:nth-child(5), .bf-reveal.is-visible .bf-checklist li:nth-child(5), .bf-reveal.is-visible .bf-step:nth-child(5) { transition-delay: .6s; }
.bf-reveal.is-visible .bf-card:nth-child(6), .bf-reveal.is-visible .bf-price-card:nth-child(6), .bf-reveal.is-visible .bf-frame:nth-child(6), .bf-reveal.is-visible .bf-checklist li:nth-child(6), .bf-reveal.is-visible .bf-step:nth-child(6) { transition-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
	.bf-reveal,
	.bf-reveal .bf-card,
	.bf-reveal .bf-price-card,
	.bf-reveal .bf-frame,
	.bf-reveal .bf-checklist li,
	.bf-reveal .bf-step { opacity: 1; transform: none; transition: none; }
}

/* ---------- media / photography ---------- */
.bf-frame {
	position: relative;
	border: 1px solid var(--bf-line-wine);
	background: var(--wp--preset--color--cream-warm);
	display: flex; align-items: flex-end; justify-content: flex-start;
	overflow: hidden;
}
.has-ink-background-color .bf-frame,
.has-wine-background-color .bf-frame { border-color: var(--bf-line-on-dark); background: rgba(250, 247, 242, 0.06); }
.bf-frame--hero { aspect-ratio: 3 / 4; width: 100%; }
.bf-frame--portrait { aspect-ratio: 4 / 5; }
.bf-frame--gallery { aspect-ratio: 3 / 4; max-width: 22rem; margin: 0 auto; }
.bf-frame--card-photo { max-width: 100%; margin: 1.25rem 0 0; }
.bf-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.bf-frame-caption { padding: 1.5rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-ink-soft); }
.has-ink-background-color .bf-frame-caption,
.has-wine-background-color .bf-frame-caption { color: var(--bf-ink-soft-on-dark); }
.bf-frame::before { content: ""; position: absolute; inset: 1rem; border: 1px solid rgba(250, 247, 242, 0.5); pointer-events: none; }
.has-ink-background-color .bf-frame::before,
.has-wine-background-color .bf-frame::before { border-color: var(--bf-line-on-dark); }

.bf-video-frame { max-width: 46rem; margin: 0 auto; width: 100%; border: 1px solid var(--bf-line-wine); padding: .5rem; border-radius: 2px; background: var(--wp--preset--color--cream-warm); }
.bf-video-frame video { width: 100%; height: auto; display: block; border-radius: 1px; }

.bf-press-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem); }
.bf-press-bar span { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: .03em; color: var(--wp--preset--color--wine); opacity: .75; }

.bf-hero-grid { gap: clamp(2rem, 5vw, 4rem); }
.bf-hero-grid > .wp-block-column { min-width: 0; }
.bf-hero-grid h1 { overflow-wrap: break-word; word-break: normal; }

/* ---------- checklist - refined, monochrome dash marker ---------- */
.bf-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; text-align: left; }
.bf-checklist li {
	display: flex; gap: .9rem; align-items: baseline;
	font-family: var(--wp--preset--font-family--display); font-size: clamp(1.1rem, 2vw, 1.5rem);
	padding-bottom: 1rem; border-bottom: 1px solid var(--bf-line-wine);
}
.has-ink-background-color .bf-checklist li,
.has-wine-background-color .bf-checklist li { border-bottom-color: var(--bf-line-on-dark); }
.bf-checklist li:last-child { border-bottom: none; padding-bottom: 0; }
.bf-checklist .bf-mark { flex: none; color: var(--wp--preset--color--wine); font-style: italic; }
.has-ink-background-color .bf-checklist .bf-mark,
.has-wine-background-color .bf-checklist .bf-mark { color: var(--wp--preset--color--gold); }

/* ---------- cards ---------- */
.bf-card {
	height: 100%;
	border: 1px solid var(--bf-line-wine);
	border-radius: 2px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: box-shadow .3s ease, border-color .3s ease;
}
.has-ink-background-color .bf-card,
.has-wine-background-color .bf-card { border-color: var(--bf-line-on-dark); }
.bf-card:hover { border-color: var(--wp--preset--color--wine); }

.bf-round { border-radius: 2px; overflow: hidden; }
.bf-project-number { font-variant-numeric: tabular-nums; }

/* ---------- values grid ---------- */
.bf-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem; }
.bf-value-number { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.25rem; color: var(--wp--preset--color--wine); display: block; margin-bottom: .5rem; }

/* ---------- process steps ---------- */
.bf-steps { display: flex; flex-direction: column; }
.bf-step { display: flex; align-items: baseline; gap: 2rem; padding: 1.75rem 0; border-top: 1px solid var(--bf-line); text-align: left; }
.bf-steps .bf-step:last-child { border-bottom: 1px solid var(--bf-line); }
.bf-step-number { font-family: var(--wp--preset--font-family--display); font-style: italic; color: var(--wp--preset--color--wine); font-size: 1.25rem; min-width: 2.25rem; flex: none; }
@media (max-width: 700px) { .bf-step { flex-direction: column; gap: .5rem; } }

/* ---------- pricing / modele współpracy ---------- */
.bf-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 782px) { .bf-pricing { grid-template-columns: 1fr; } }

.bf-price-card {
	position: relative;
	display: flex; flex-direction: column; gap: 1.1rem;
	height: 100%; text-align: left;
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--bf-line);
	border-radius: 2px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.bf-price-card:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--wine); }

/* Model I jest kotwicą wizualną: mocniejsza ramka, delikatny podkład
   koloru i cień nadają mu kontrast wobec dwóch pozostałych kart -
   spojrzenie ląduje na nim jako pierwszym i to on staje się punktem
   odniesienia dla reszty oferty. */
.bf-price-card--featured {
	border: 2px solid var(--wp--preset--color--gold);
	background: color-mix(in srgb, var(--wp--preset--color--gold) 6%, var(--wp--preset--color--cream));
	box-shadow: 0 24px 60px rgba(27, 23, 18, .1);
}
@media (min-width: 783px) {
	.bf-price-card--featured { transform: scale(1.04); }
	.bf-price-card--featured:hover { transform: scale(1.04) translateY(-6px); }
}

.bf-price-badge { color: var(--wp--preset--color--gold); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.bf-price-model { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bf-ink-soft); margin: 0; }
.bf-price-name { font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.5rem,2.2vw,1.85rem); line-height: 1.05; }
.bf-price-frame { font-size: .85rem; font-style: italic; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--wine); margin: 0; }
.bf-price-count { font-size: .72rem; letter-spacing: .06em; color: var(--bf-ink-soft); margin: 0; }
.bf-price-count strong { color: var(--wp--preset--color--ink); font-weight: 600; }
.bf-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.bf-price-list li { display: flex; gap: .6rem; color: var(--bf-ink-soft); }
.bf-price-list li::before { content: "-"; color: var(--wp--preset--color--wine); flex: none; }
.bf-price-card .wp-block-button__link { width: 100%; text-align: center; margin-top: auto; }

/* ---------- FAQ (core/details) ---------- */
.bf-faq { text-align: left; }
.bf-faq .wp-block-details { border: none; border-top: 1px solid var(--bf-line); padding: 1.5rem 0; }
.bf-faq .wp-block-details:last-child { border-bottom: 1px solid var(--bf-line); }
.bf-faq .wp-block-details summary {
	cursor: pointer; font-family: var(--wp--preset--font-family--display);
	font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.bf-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.bf-faq .wp-block-details summary::after { content: "+"; font-family: var(--wp--preset--font-family--sans); font-weight: 300; font-size: 1.5rem; color: var(--wp--preset--color--wine); flex: none; transition: transform .3s ease; }
.bf-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.bf-faq .wp-block-details p { margin-top: .9rem; max-width: 42rem; color: var(--bf-ink-soft); }

/* ---------- language switcher ---------- */
.bf-lang-switch { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; letter-spacing: .08em; }
.bf-lang-switch button { font-family: var(--wp--preset--font-family--sans); background: none; border: none; cursor: pointer; padding: .2rem .35rem; color: var(--bf-ink-soft); text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.bf-lang-switch button[aria-pressed="true"] { color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 3px; }
.bf-lang-switch span { color: var(--bf-line); }

/* ---------- form ---------- */
.bf-form-wrap { max-width: 34rem; text-align: left; }
.bf-form { display: grid; gap: 1.15rem; }
.bf-form-row { display: grid; gap: .4rem; }
.bf-form-row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 600px) { .bf-form-row-group { grid-template-columns: 1fr; } }
.bf-form label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-ink-soft); }
.bf-form input,
.bf-form select,
.bf-form textarea { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; padding: .85rem .95rem; border: 1px solid var(--bf-line); border-radius: 2px; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }
.bf-form input:focus, .bf-form select:focus, .bf-form textarea:focus { outline: 1px solid var(--wp--preset--color--wine); outline-offset: 1px; }
.bf-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-form-submit {
	justify-self: start; border: 1px solid var(--wp--preset--color--wine); cursor: pointer;
	font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
	background: var(--wp--preset--color--wine); color: var(--wp--preset--color--cream);
	padding: 1.1rem 2.25rem; border-radius: 2px; transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.bf-form-submit:hover { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.bf-form-fine { font-size: .78rem; color: var(--bf-ink-soft); max-width: 30rem; }
.bf-form-notice { padding: 1.1rem 1.3rem; border: 1px solid var(--bf-line); border-radius: 2px; font-size: .95rem; }
.bf-form-notice--ok { border-color: var(--wp--preset--color--wine); }
.bf-form-notice--error { border-color: var(--wp--preset--color--ink); }

/* ---------- buttons + form controls on colour sections need to invert for contrast ---------- */
.has-wine-background-color .wp-block-button__link,
.has-ink-background-color .wp-block-button__link,
.has-wine-background-color .bf-form-submit,
.has-ink-background-color .bf-form-submit {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--wine);
	border-color: var(--wp--preset--color--cream);
}
.has-wine-background-color .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button__link:hover,
.has-wine-background-color .bf-form-submit:hover,
.has-ink-background-color .bf-form-submit:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}
.has-wine-background-color .bf-form label,
.has-ink-background-color .bf-form label,
.has-wine-background-color .bf-form-fine,
.has-ink-background-color .bf-form-fine { color: var(--bf-ink-soft-on-dark); }
.has-wine-background-color .bf-form input,
.has-wine-background-color .bf-form select,
.has-wine-background-color .bf-form textarea,
.has-ink-background-color .bf-form input,
.has-ink-background-color .bf-form select,
.has-ink-background-color .bf-form textarea { border-color: var(--bf-line-on-dark); }
.has-wine-background-color .bf-form-notice,
.has-ink-background-color .bf-form-notice { border-color: var(--bf-line-on-dark); }

/* ---------- misc ---------- */
.bf-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.bf-tag { font-size: .78rem; color: var(--bf-ink-soft); border: 1px solid var(--bf-line); border-radius: 2px; padding: .4rem .85rem; }
.has-ink-background-color .bf-tag,
.has-wine-background-color .bf-tag { border-color: var(--bf-line-on-dark); color: var(--bf-ink-soft-on-dark); }

@media (max-width: 600px) {
	.bf-display { letter-spacing: -.005em; }
}