/* =========================================================================
   Villa Sapphire site.css (child theme 1.0.0)
   Fonts, tokens, base, keyframes and behaviour states from the Homepage design.
   Layout and component styling lives in Elementor global classes (vs-*).
   Hooks used here and in site.js are data-vs-* attributes on atomic elements
   (always give them a value, e.g. "1": atomic elements drop empty attributes).
   ========================================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
	font-family: 'Belgiano';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/belgiano-serif.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens (mirror the Elementor variables, for CSS-only use) ---------- */
:root {
	--vs-navy: #0F2952;
	--vs-navy-d: #0A1D3C;
	--vs-navy-dd: #071530;
	--vs-champ: #D8C9A3;
	--vs-gold: #9C8955;
	--vs-stone: #FAF7F1;
	--vs-stone-2: #F2EDE3;
	--vs-ink: #1B2333;
	--vs-mute: #5D6576;
	--vs-line: rgba(15, 41, 82, .14);
	--vs-line-l: rgba(216, 201, 163, .32);
	--vs-serif: 'Belgiano', 'Times New Roman', serif;
	--vs-sans: 'Inter', system-ui, sans-serif;
	--vs-pad: clamp(20px, 5vw, 88px);
	--vs-edge: max(var(--vs-pad), calc((100vw - 1600px) / 2 + var(--vs-pad)));
	--vs-ease: cubic-bezier(.22, .8, .18, 1);
	--vs-gap: clamp(14px, 1.6vw, 24px);
}

/* ---------- Base (as the design) ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--vs-stone);
	color: var(--vs-ink);
	font-family: var(--vs-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
body h1, body h2, body h3, body h4, body p, body figure { margin: 0; }
body p { text-wrap: pretty; }
::selection { background: var(--vs-champ); color: var(--vs-navy); }

/* ---------- Header (Theme Builder header, fixed over the page) ---------- */
/* The location wrapper is the fixed element; it never gets a backdrop-filter, so the
   mobile menu inside it can still be position:fixed to the viewport. */
[data-elementor-type="header"] { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: transform .6s var(--vs-ease); }
body.admin-bar [data-elementor-type="header"] { top: 32px; }
@media (max-width: 782px) { body.admin-bar [data-elementor-type="header"] { top: 46px; } }
.vs-nav-hide [data-elementor-type="header"] { transform: translateY(-100%); }
.vs-nav-hide body.admin-bar [data-elementor-type="header"] { transform: translateY(calc(-100% - 46px)); }

/* Pages without a hero: keep content clear of the fixed header. */
.vs-no-hero body { padding-top: var(--vs-header-h, 0px); }

[data-vs-nav] {
	position: relative;
	color: #fff;
	background: linear-gradient(180deg, rgba(7, 21, 48, .88) 0%, rgba(7, 21, 48, .6) 55%, rgba(7, 21, 48, 0) 100%);
	transition: background .6s var(--vs-ease);
}
[data-vs-nav]::after {
	content: "";
	position: absolute; left: 0; right: 0; top: 100%; height: 70px;
	background: linear-gradient(180deg, rgba(7, 21, 48, .35), rgba(7, 21, 48, 0));
	pointer-events: none;
	transition: opacity .5s;
}
.vs-nav-solid [data-vs-nav] { background: rgba(10, 29, 60, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vs-nav-solid [data-vs-nav]::after { opacity: 0; }
.vs-menu-open [data-vs-nav] { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vs-menu-open [data-vs-nav]::after { opacity: 0; }

/* Top bar collapses and the bar tightens once the header turns solid (homepage). */
[data-vs-topbar] { overflow: hidden; transition: height .5s var(--vs-ease), opacity .4s, border-color .4s; }
html.vs-nav-compact .elementor [data-vs-topbar] { height: 0; opacity: 0; border-color: transparent; }
[data-vs-navbar] { transition: padding .6s var(--vs-ease); }
html.vs-nav-compact .elementor [data-vs-navbar] { padding-top: 13px; padding-bottom: 13px; }

/* Nav link underline (grows from the left on hover) */
[data-vs-ul] { position: relative; }
[data-vs-ul]::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--vs-champ);
	transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--vs-ease);
}
[data-vs-ul]:hover::after, [data-vs-ul]:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Menu button: two lines that cross when open */
[data-vs-burger] { position: relative; cursor: pointer; color: #fff; }
[data-vs-burger]::before, [data-vs-burger]::after {
	content: "";
	position: absolute; left: 0; right: 0; height: 1px;
	background: currentColor;
	transition: transform .5s var(--vs-ease), top .5s var(--vs-ease);
}
[data-vs-burger]::before { top: 6px; }
[data-vs-burger]::after { top: 15px; }
.vs-menu-open [data-vs-burger]::before { top: 11px; transform: rotate(45deg); }
.vs-menu-open [data-vs-burger]::after { top: 11px; transform: rotate(-45deg); }

/* Full-screen mobile menu (sits under the header bar) */
[data-vs-mmenu] {
	position: fixed !important; inset: 0; z-index: -1;
	transform: translateY(-100%); visibility: hidden;
	transition: transform .9s var(--vs-ease), visibility 0s .9s;
}
.vs-menu-open [data-vs-mmenu] { transform: none; visibility: visible; transition: transform .9s var(--vs-ease); }
html.vs-menu-open, html.vs-menu-open body { overflow: hidden; }

/* ---------- Buttons: fill slides up on hover, optional arrow ---------- */
[data-vs-btn] { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--vs-ease), border-color .5s, background-color .5s; }
[data-vs-btn]::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--vs-champ);
	transform: translateY(101%);
	transition: transform .6s var(--vs-ease);
}
[data-vs-btn]:hover::before, [data-vs-btn]:focus-visible::before { transform: none; }
[data-vs-btn="solid"]::before { background: #fff; }
[data-vs-btn="dk"]::before { background: var(--vs-navy); }
.elementor [data-vs-btn="line"]:hover, .elementor [data-vs-btn="line"]:focus-visible,
.elementor [data-vs-btn="solid"]:hover, .elementor [data-vs-btn="solid"]:focus-visible,
.elementor [data-vs-btn="nv"]:hover, .elementor [data-vs-btn="nv"]:focus-visible { color: var(--vs-navy); border-color: var(--vs-champ); }
.elementor [data-vs-btn="dk"]:hover, .elementor [data-vs-btn="dk"]:focus-visible { color: #fff; border-color: var(--vs-navy); }
[data-vs-arrow]::after {
	content: "";
	display: inline-block; flex: none;
	width: 22px; height: 8px; margin-left: 14px;
	background: currentColor;
	-webkit-mask: linear-gradient(#000, #000) left center / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3.5.5L7 4 3.5 7.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / 8px 8px no-repeat;
	mask: linear-gradient(#000, #000) left center / 100% 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3.5.5L7 4 3.5 7.5' fill='none' stroke='%23000'/%3E%3C/svg%3E") right center / 8px 8px no-repeat;
	transition: width .5s var(--vs-ease);
}
[data-vs-arrow]:hover::after { width: 34px; }

/* ---------- Line icons: drawn on when they come into view ---------- */
[data-vs-draw] svg * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vs-js [data-vs-draw]:not(.vs-in) svg * { stroke-dashoffset: 1; }
.vs-js [data-vs-draw] svg * { transition: stroke-dashoffset 1.6s var(--vs-ease); }
.vs-js [data-vs-draw] svg *:nth-child(2) { transition-delay: .15s; }
.vs-js [data-vs-draw] svg *:nth-child(3) { transition-delay: .3s; }
.vs-js [data-vs-draw] svg *:nth-child(4) { transition-delay: .45s; }

/* ---------- Editor: show everything in place, no fixed or hidden states ---------- */
.elementor-editor-active [data-elementor-type="header"] { position: relative; transform: none; }
.elementor-editor-active [data-vs-mmenu] { position: relative !important; inset: auto; z-index: auto; transform: none; visibility: visible; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}