/*
Theme Name: VP Cinematic
Theme URI: https://example.com/vp-cinematic
Author: Vardas Pavardė
Description: Lean presentation theme for the cinematic filmmaker/videographer portfolio. All functionality (CPTs, fields, schema, i18n, the motion layer) lives in the theme-independent "VP Core" plugin, so this theme only handles layout and can be swapped for a Bricks or GeneratePress child without losing data. Dark premium, video-first, Polylang-ready (LT default). See DESIGN-SPEC.md.
Version: 0.8.4
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vp-cinematic
Tags: portfolio, video, multilingual, custom-menu, featured-images, translation-ready
*/

/* Runtime styling ships with VP Core (modules/50-assets/css/cinematic.css).
   Theme-only layout tweaks can go below. */

body { margin: 0; background: var(--vp-bg, #0A0A0A); color: var(--vp-text, #fff); font-family: var(--vp-font-body, system-ui, sans-serif); }
/* Clip the off-screen reveal transforms ([data-reveal="left"/"right"] shift
   ±48px) so they never create a horizontal scrollbar before they animate in.
   `clip` keeps position:sticky/fixed working; `hidden` is the older fallback. */
html, body { overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
.site-main { display: block; }

/* Header */
.c-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 84px; transition: height 0.35s var(--vp-ease); }
.c-nav.is-scrolled .c-nav__inner { height: 66px; }

.c-nav__panel { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); margin-left: auto; }
.c-nav__nav { display: flex; }
.c-nav__menu { display: flex; align-items: center; gap: clamp(1.2rem, 2.2vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.c-nav__menu a { position: relative; text-decoration: none; color: var(--vp-text, #fff); font-family: var(--vp-font-head, sans-serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 0; transition: color 0.3s var(--vp-ease); }
.c-nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--vp-accent, #C9A86A); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.4s var(--vp-ease); }
.c-nav__menu a:hover { color: var(--vp-accent, #C9A86A); }
.c-nav__menu a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.c-nav__menu .current-menu-item > a, .c-nav__menu .current_page_item > a { color: var(--vp-accent, #C9A86A); }
.c-nav__menu .current-menu-item > a::after { transform: scaleX(1); }

.c-nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.c-nav__cta { min-width: auto; padding: 0.6em 1.3em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* Hamburger (mobile) */
.c-nav__toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; z-index: 101; margin-left: auto; }
.c-burger, .c-burger::before, .c-burger::after { content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--vp-text, #fff); transition: transform 0.35s var(--vp-ease), opacity 0.2s; }
.c-burger { top: 21px; }
.c-burger::before { top: -7px; }
.c-burger::after { top: 7px; }
.nav-open .c-burger { background: transparent; }
.nav-open .c-burger::before { transform: translateY(7px) rotate(45deg); }
.nav-open .c-burger::after { transform: translateY(-7px) rotate(-45deg); }

/* Open mobile menu must sit above the grain (150) + progress bar (200) and lock
   the page behind it. The nav's own backdrop-filter (added on scroll) must be
   removed while open — a filtered ancestor becomes the containing block for the
   position:fixed panel, which otherwise anchors the panel to the 66px nav box
   and distorts it after scrolling. */
body.nav-open { overflow: hidden; }
.nav-open .c-nav {
	z-index: 9990;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: 0 !important;
}
.nav-open .c-grain::before, .nav-open .c-progress { display: none; }

@media (max-width: 860px) {
	.c-nav__toggle { display: inline-block; }
	/* No blur on the mobile bar: a filtered ancestor would become the containing
	   block for the fixed panel and break its off-screen position. Solid bg. */
	.c-nav.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 10, 10, 0.92); }
	.c-nav__panel {
		position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 2.5rem;
		padding: 6rem 1.5rem 2rem; overflow-y: auto;
		background: rgba(10, 10, 10, 0.97);
		transform: translateY(-100%); visibility: hidden; pointer-events: none;
		transition: transform 0.5s var(--vp-ease), visibility 0s linear 0.5s; will-change: transform;
	}
	.nav-open .c-nav__panel { transform: none; visibility: visible; pointer-events: auto; transition: transform 0.5s var(--vp-ease), visibility 0s; }
	.c-nav__menu { flex-direction: column; text-align: center; gap: 1.8rem; }
	.c-nav__menu a { font-size: 1.5rem; }
	.c-nav__actions { flex-direction: column; }
}
.c-brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--vp-accent, #C9A86A); }
.c-brand__mark { color: var(--vp-accent, #C9A86A); flex: 0 0 auto; transition: transform 0.5s var(--vp-ease); }
.c-brand:hover .c-brand__mark { transform: rotate(-8deg) scale(1.05); }
.c-brand__text { font-family: var(--vp-font-head, sans-serif); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.92rem; color: var(--vp-text, #fff); }
.c-brand img, .c-brand .custom-logo { max-height: 40px; width: auto; }
.c-nav__lang { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.c-nav__lang a { text-decoration: none; color: var(--vp-muted, #9A9A9A); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; }
.c-nav__lang .current-lang a, .c-nav__lang a:hover { color: var(--vp-accent, #C9A86A); }

/* Testimonials — elegant cards */
.c-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .c-testimonials { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
.c-testimonial {
	position: relative; margin: 0; padding: 2rem 1.75rem 1.5rem; background: var(--vp-bg-2, #111);
	border: 1px solid var(--vp-line, #222); border-radius: 4px;
}
.c-testimonial::before {
	content: "“"; position: absolute; top: 0.1em; left: 0.4rem; font-family: Georgia, serif;
	font-size: 4rem; line-height: 1; color: var(--vp-accent, #C9A86A); opacity: 0.35;
}
.c-testimonial blockquote { font-size: 1.05rem; line-height: 1.6; margin: 0.5rem 0 1.25rem; position: relative; }
.c-testimonial figcaption { color: var(--vp-text); font-weight: 600; }
.c-testimonial figcaption .c-card__meta { display: block; color: var(--vp-muted); font-weight: 400; margin-top: 0.15rem; }

/* Project single meta bar */
.c-meta { display: flex; flex-wrap: wrap; gap: 2rem; border-block: 1px solid var(--vp-line, #222); padding-block: 1.25rem; }
.c-meta__label { color: var(--vp-muted, #9A9A9A); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; }

/* About */
.c-about { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.c-about--single { grid-template-columns: 1fr; max-width: 820px; }
@media (max-width: 860px) { .c-about { grid-template-columns: 1fr; } }

/* Testimonials should not look like leftover stacked text */
.c-testimonial figcaption { color: var(--vp-muted); }

/* Footer */
.c-footer { border-top: 1px solid var(--vp-line, #222); padding-block: 3rem; }
.c-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.c-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
@media (max-width: 768px) { .c-footer__cols { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   NFilms — client feedback revisions (see _deploy/CHANGES.md)
   ============================================================ */

/* Rounded thumbnails on every project card + marquee item (not square). */
.c-card, .c-mq { border-radius: 16px; }

/* Brand mark shown on load / page transitions — uppercase (NFILMS). */
.c-preloader__mark { text-transform: uppercase; }

/* Hero tagline (FILMMAKER · DOP · POST PRODUCTION): pin the weight + force the
   same font smoothing so Chrome and Safari render it identically (Safari was
   rendering it lighter). */
.c-hero__subtitle {
	font-family: var(--vp-font-body, system-ui, sans-serif);
	font-weight: 500;
	/* scale size + tracking down on narrow screens so the long tagline never overflows */
	font-size: clamp(0.72rem, 2.4vw, 0.95rem);
	letter-spacing: clamp(0.08em, 1.2vw, 0.18em);
	text-transform: uppercase;
	text-wrap: balance;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Portfolio category filter bar (ALL + categories), aligned to the right.
   Buttons change colour on hover and when active. */
.c-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0 0 clamp(18px, 2.5vw, 30px); }
.c-filter__btn {
	font-family: var(--vp-font-head, sans-serif); font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--vp-muted, #9A9A9A);
	background: transparent; border: 1px solid var(--vp-line, #222); border-radius: 999px;
	padding: 0.55em 1.25em; cursor: pointer;
	transition: color 0.3s var(--vp-ease), background 0.3s var(--vp-ease), border-color 0.3s var(--vp-ease);
}
.c-filter__btn:hover,
.c-filter__btn.is-active { color: var(--vp-bg, #0A0A0A); background: var(--vp-accent, #C9A86A); border-color: var(--vp-accent, #C9A86A); }

/* Buttons: the base .c-btn is an inline-flex with min-width:9rem but no
   justify-content, so short labels stuck to the left and left an empty gap on
   the right. Centre the content. */
.c-btn { justify-content: center; }

/* Contact form: constrain width (left-aligned within its container). */
.c-form { max-width: 720px; }

/* Footer copyright line: centred + smaller (2026 NFilms). */
.c-footer__copy { text-align: center; font-size: 0.8rem; }

/* Closing CTA band — one call-to-action (the duplicate button in the About
   block was removed). A divider + soft accent glow set it apart. */
.vp-cta { border-top: 1px solid var(--vp-line, #222); margin-top: clamp(20px, 4vw, 48px); position: relative; }
.vp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(201, 168, 106, 0.10), transparent 70%); pointer-events: none; }
.vp-cta > .vp-container { position: relative; z-index: 1; }
.vp-cta .c-btn { margin-top: 0.5rem; }

/* Per-category background hero image — cover + dark overlay for legible text.
   vp-core already darkens every compact hero via `.c-hero--compact::after`, so
   the old `::before` gradient here stacked on top of it and pushed the image to
   near-black ("background doesn't show up"). Neutralise the plugin overlay for
   image heroes and use ONE moderate gradient so the photo stays visible while
   the title remains legible. */
.c-hero--bg { background-size: cover; background-position: center; position: relative; }
.c-hero--bg.c-hero--compact::after { background: none; }
.c-hero--bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.85), rgba(10,10,10,0.32) 55%, rgba(10,10,10,0.6)); z-index: 0; }
.c-hero--bg .c-hero__inner { position: relative; z-index: 1; }

/* Hero responsiveness — small-viewport height so the mobile address bar doesn't
   push content out of a 100vh box (older browsers keep the core 100vh). */
.c-hero { min-height: 100svh; }
/* Inner-page heroes (portfolio list, single project, contact) fill the full
   viewport and centre their content in it — exactly like the homepage hero. The
   fixed header is transparent and floats over the hero, so the title belongs at
   the true viewport centre (not pushed below the header). Resets the old
   `min-height: 100svh - 84px` and the broken `clamp(72px,10vh,40px)` padding-top
   from cinematic.css that pushed the title off-centre. */
.c-hero--compact { box-sizing: border-box; min-height: 100svh; padding-top: 0; }
/* When logged in, the WP admin bar pushes the whole page down (html margin-top:
   32px desktop / 46px on ≤782px). Shrink the hero by that much so the centred
   title stays centred in what's actually visible. No effect for real visitors. */
.admin-bar .c-hero, .admin-bar .c-hero--compact { min-height: calc(100svh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .c-hero, .admin-bar .c-hero--compact { min-height: calc(100svh - 46px); }
}
@media (max-width: 640px) {
	.c-hero { min-height: 100svh; }
	.c-hero--compact { box-sizing: border-box; min-height: 100svh; padding-top: 0; }
	.c-hero__inner { padding-inline: 1.25rem; }
	.c-hero__title { font-size: clamp(34px, 9vw, 56px); }
	.c-hero__scroll { bottom: calc(1rem + env(safe-area-inset-bottom)); }
	.c-hero__desc { font-size: 0.95rem; }
}
@media (max-width: 380px) {
	.c-hero__title { font-size: clamp(34px, 11vw, 44px); }
}

/* Scroll cue — a refined "mouse" indicator with an animated wheel + a soft
   chevron pulse, instead of the plain bouncing ⌄. Markup unchanged (the glyph
   is hidden and drawn with pseudo-elements). */
.c-hero__scroll {
	width: 26px; height: 42px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.45);
	border-radius: 16px; display: grid; justify-items: center; align-content: start;
	color: transparent; font-size: 0; text-decoration: none;
	animation: none; /* drop the old bounce; animate the wheel instead */
	transition: border-color 0.35s var(--vp-ease), transform 0.35s var(--vp-ease), box-shadow 0.35s var(--vp-ease);
}
.c-hero__scroll::before {
	content: ""; margin-top: 7px; width: 3px; height: 8px; border-radius: 2px;
	background: var(--vp-accent, #C9A86A); animation: vp-scroll-wheel 1.8s var(--vp-ease) infinite;
}
.c-hero__scroll::after {
	content: ""; position: absolute; bottom: -14px; left: 50%; width: 8px; height: 8px;
	border-right: 1.5px solid var(--vp-accent, #C9A86A); border-bottom: 1.5px solid var(--vp-accent, #C9A86A);
	transform: translate(-50%, 0) rotate(45deg); opacity: 0; animation: vp-scroll-chevron 1.8s var(--vp-ease) infinite;
}
.c-hero__scroll:hover { border-color: var(--vp-accent, #C9A86A); transform: translate(-50%, -4px); box-shadow: 0 0 0 4px rgba(201, 168, 106, 0.12); }
@keyframes vp-scroll-wheel {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	70% { opacity: 1; transform: translateY(13px); }
	100% { opacity: 0; transform: translateY(15px); }
}
@keyframes vp-scroll-chevron {
	0%, 40% { opacity: 0; }
	60% { opacity: 0.9; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.c-hero__scroll::before, .c-hero__scroll::after { animation: none; }
	.c-hero__scroll::before { opacity: 1; }
}

/* Hero background video via YouTube/Vimeo embed — cover the whole hero. */
.c-hero__embed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.c-hero__embed iframe {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0;
}


.grecaptcha-badge { 
    visibility: hidden !important;
}