/*
 * VAVA Garment — global stylesheet (Builder Settings > Style)
 *
 * Visual design (colour, type, spacing, layout) lives in Builder blocks and
 * Builder Tokens. This file only holds what blocks cannot express:
 *   1. base/element defaults      4. mobile navigation states
 *   2. focus & accessibility      5. motion (reveal, hover, reduced motion)
 *   3. header scroll state        6. forms and portfolio filter states
 * Source of truth: builder_site/assets/global.css in the project repo.
 */

/* 1. Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html, body { overflow-x: clip; }
body { background: var(--vava-white); color: var(--vava-charcoal); text-rendering: optimizeLegibility; }
::selection { background: var(--vava-aqua); color: var(--vava-navy); }
img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }
ol, ul { margin: 0; padding: 0; }

/* 2. Accessibility ------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--vava-aqua); outline-offset: 3px; border-radius: 2px; }
.vv-footer :focus-visible, .vv-dark :focus-visible { outline-color: var(--vava-aqua); }
.vv-skip {
	position: absolute; left: 16px; top: -64px; z-index: 100;
	padding: 12px 18px; background: var(--vava-navy); color: #fff !important;
	font-weight: 600; font-size: 14px; border-radius: var(--vava-radius-sm); text-decoration: none;
	transition: top .2s ease;
}
.vv-skip:focus { top: 12px; }
.vv-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. Header -------------------------------------------------------------- */
.vv-header.is-scrolled { border-bottom-color: var(--vava-line); box-shadow: 0 10px 30px -24px rgba(10, 28, 46, .35); }
.vv-header.is-scrolled .vv-header-inner { padding-top: 12px; padding-bottom: 12px; }
.vv-navlink::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
	background: var(--vava-aqua); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--vava-ease);
}
.vv-nav-desktop .vv-navlink:hover::after,
.vv-nav-desktop .vv-navlink[aria-current="page"]::after { transform: scaleX(1); }
.vv-navlink[aria-current="page"] { color: var(--vava-aqua-deep) !important; }
.vv-mobile-link::after { display: none; }

/* 4. Navigation breakpoint (1200px: the full menu needs more room than Builder's 1024px tablet break) */
.vv-header .vv-mobile-nav {
	visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
	transition: opacity .35s var(--vava-ease), transform .35s var(--vava-ease), visibility 0s linear .35s;
}
html.vv-nav-open { overflow: hidden; }
html.vv-nav-open .vv-header .vv-mobile-nav {
	visibility: visible; opacity: 1; transform: none; pointer-events: auto;
	transition: opacity .35s var(--vava-ease), transform .35s var(--vava-ease), visibility 0s;
}
html.vv-nav-open .vv-menu-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
html.vv-nav-open .vv-menu-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 1199px) {
	.vv-header .vv-nav-desktop { display: none; }
	.vv-header .vv-menu-btn { display: inline-flex; }
}
@media (min-width: 1200px) {
	.vv-header .vv-mobile-nav { display: none; }
}

/* 5. Motion -------------------------------------------------------------- */
/* Hidden states apply only once JS has marked <html class="vv-js">, so content
   is always visible without JS, in the Builder editor, and to crawlers. */
html.vv-js .vv-reveal {
	opacity: 0; transform: translate3d(0, 26px, 0);
	transition: opacity .9s var(--vava-ease), transform .9s var(--vava-ease);
	transition-delay: calc(var(--vv-i, 0) * 90ms);
}
html.vv-js .vv-reveal.is-in { opacity: 1; transform: none; }
html.vv-js .vv-reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--vava-ease); }
html.vv-js .vv-reveal-img.is-in { clip-path: inset(0 0 0 0); }
html.vv-js .vv-hero-img img { transform: scale(1.08); transition: transform 1.8s var(--vava-ease); }
html.vv-js .vv-hero-img.is-in img { transform: scale(1); }

.vv-zoom img { transition: transform 1s var(--vava-ease); will-change: transform; }
.vv-card:hover .vv-zoom img, .vv-card:focus-visible .vv-zoom img { transform: scale(1.045); }
.vv-btn:hover .vv-arrow, .vv-card:hover .vv-arrow, .vv-row:hover .vv-arrow { transform: translateX(4px); }
.vv-btn:active { transform: translateY(0) scale(.985); }
.vv-row:hover h3 { color: var(--vava-aqua) !important; }
.vv-row h3 { transition: color .35s var(--vava-ease); }

/* Decorative measuring-tape ticks (page hero) */
.vv-ticks {
	background-image:
		repeating-linear-gradient(90deg, var(--vava-slate) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(90deg, var(--vava-slate) 0 1px, transparent 1px 60px);
	background-size: 100% 5px, 100% 10px; background-repeat: no-repeat; background-position: bottom left;
	opacity: .22 !important;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	html.vv-js .vv-reveal, html.vv-js .vv-reveal-img, html.vv-js .vv-hero-img img { opacity: 1; transform: none; clip-path: none; }
	[data-vv-parallax] { transform: none !important; }
}

/* 6. Forms & filter ------------------------------------------------------ */
.vv-form input, .vv-form select, .vv-form textarea { transition: border-color .2s ease, box-shadow .2s ease; }
.vv-form input:focus, .vv-form select:focus, .vv-form textarea:focus {
	outline: none; border-color: var(--vava-aqua-deep) !important; box-shadow: 0 0 0 3px rgba(34, 184, 176, .22) !important;
}
.vv-form [aria-invalid="true"] { border-color: #B42318 !important; }
.vv-form .vv-error { color: #B42318; font-size: 13px; margin-top: 6px; }
.vv-form .vv-error::before { content: "⚠ "; }
.vv-form input:disabled { background: var(--vava-offwhite) !important; cursor: not-allowed; color: var(--vava-slate); }
.vv-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }
.vv-form-status:empty { display: none; }
.vv-form-status[data-state="success"] { background: var(--vava-aqua-soft); border-color: var(--vava-aqua) !important; }
.vv-form-status[data-state="error"] { background: #FEF3F2; border-color: #B42318 !important; }
.vv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.vv-filter-btn[aria-pressed="true"] { background: var(--vava-navy) !important; color: #fff !important; border-color: var(--vava-navy) !important; }
.vv-pf-item.is-hidden { display: none !important; }

/* 7. Placeholder content -------------------------------------------------- */
/* Anything VAVA Garment still has to supply is tagged data-placeholder="true"
   in Builder (Attributes panel). Remove the attribute once real content is in. */
[data-placeholder="true"] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }