/*
 * VonSteffen theme layer. tailwind.css is the untouched build from the
 * original site; this file adds only what WordPress needs on top of it.
 * All colours come from the original design tokens (--background, --primary…).
 */

/* ---------- Base ---------- */

html { scroll-padding-top: 7rem; }
body.vs-site {
	margin: 0;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans, "Karla", ui-sans-serif, system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in oklab, var(--primary) 35%, transparent); }
:focus-visible { outline: 1px solid var(--primary); outline-offset: 3px; }

.vs-skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--primary); color: var(--primary-foreground);
	padding: .6rem 1rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.vs-skip-link:focus { top: 1rem; }

/* Utilities the templates use that the original build did not include. */
.py-10 { padding-block: calc(var(--spacing) * 10); }
.py-24 { padding-block: calc(var(--spacing) * 24); }
.pb-10 { padding-bottom: calc(var(--spacing) * 10); }
.mb-10 { margin-bottom: calc(var(--spacing) * 10); }
@media (width >= 48rem) {
	.md\:py-14 { padding-block: calc(var(--spacing) * 14); }
	.md\:py-16 { padding-block: calc(var(--spacing) * 16); }
	.md\:py-20 { padding-block: calc(var(--spacing) * 20); }
}

/* ---------- Header ---------- */

.admin-bar .vs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vs-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .vs-header { top: 0; } }

/* Header uses the monogram (the stacked lockup's wording is unreadable in a
   compact bar); the footer carries the full approved mark. */
.vs-logo-link { display: inline-flex; align-items: center; }
.vs-logo { height: 2.9rem; width: auto; display: block; }
@media (max-width: 640px) { .vs-logo { height: 2.25rem; } }
.vs-logo--footer { height: 4.5rem; margin-bottom: .25rem; }

.vs-dropdown { position: relative; }
.vs-dropdown-menu {
	position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
	min-width: 15rem; padding: .5rem 0; z-index: 50;
	background: var(--popover); border: 1px solid var(--border);
	box-shadow: 0 20px 40px -20px rgb(0 0 0 / .7);
	display: flex; flex-direction: column;
	text-transform: none; letter-spacing: .04em;
}
.vs-dropdown-menu[hidden] { display: none; }
.vs-dropdown-menu a {
	padding: .6rem 1.25rem; font-size: .875rem; color: var(--muted-foreground);
	transition: color .15s, background-color .15s;
}
.vs-dropdown-menu a:hover, .vs-dropdown-menu a:focus-visible, .vs-dropdown-menu a.is-current {
	color: var(--primary); background: var(--accent); outline: none;
}

.vs-cart-link {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; color: var(--foreground); transition: color .15s;
}
.vs-cart-link:hover { color: var(--primary); }
.vs-cart-count {
	position: absolute; top: -.1rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
	border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
	font-size: .65rem; line-height: 1.1rem; text-align: center; font-weight: 600;
}
.vs-cart-count.is-empty { display: none; }

/* ---------- Footer ---------- */

.vs-footer-links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }

/* ---------- Long-form content (policies, account, generic pages) ---------- */

.vs-prose { color: var(--muted-foreground); font-size: 1rem; line-height: 1.75; }
.vs-prose > * + * { margin-top: 1.1em; }
.vs-prose h1, .vs-prose h2, .vs-prose h3, .vs-prose h4 {
	font-family: var(--font-display); color: var(--foreground); line-height: 1.2; margin-top: 2em;
}
.vs-prose h2 { font-size: 1.875rem; }
.vs-prose h3 { font-size: 1.5rem; }
.vs-prose h4 { font-size: 1.2rem; }
.vs-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.vs-prose ul { list-style: disc; padding-left: 1.4em; }
.vs-prose ol { list-style: decimal; padding-left: 1.4em; }
.vs-prose ol[type="A"] { list-style-type: upper-alpha; }
.vs-prose li + li { margin-top: .4em; }
.vs-prose strong { color: var(--foreground); }
.vs-prose blockquote { border-left: 1px solid var(--primary); padding-left: 1.25rem; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--foreground); }
.vs-prose table { width: 100%; border: 1px solid var(--border); }
.vs-prose th, .vs-prose td { border: 1px solid var(--border); padding: .6rem .8rem; text-align: left; }
.vs-prose img { max-width: 100%; height: auto; }
.vs-prose hr { border-color: var(--border); margin-block: 2.5rem; }

/* ---------- Forms (shared by inquiry builder, account, checkout, Complianz) ---------- */

.vs-site input[type="text"], .vs-site input[type="email"], .vs-site input[type="tel"],
.vs-site input[type="password"], .vs-site input[type="number"], .vs-site input[type="search"],
.vs-site input[type="url"], .vs-site input[type="date"], .vs-site select, .vs-site textarea {
	font: inherit; color: var(--foreground); background-color: var(--background);
	border: 1px solid var(--input); border-radius: 0;
}
.vs-site input:focus, .vs-site select:focus, .vs-site textarea:focus { border-color: var(--primary); outline: none; }
.vs-site ::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); }

/* ---------- Complianz consent banner in brand colours ---------- */

.cmplz-cookiebanner {
	--cmplz_banner_background_color: var(--card) !important;
	--cmplz_banner_border_color: var(--border) !important;
	--cmplz_text_color: var(--foreground) !important;
	--cmplz_hyperlink_color: var(--primary) !important;
	--cmplz_button_accept_background_color: var(--primary) !important;
	--cmplz_button_accept_border_color: var(--primary) !important;
	--cmplz_button_accept_text_color: var(--primary-foreground) !important;
	--cmplz_button_deny_background_color: transparent !important;
	--cmplz_button_deny_border_color: var(--border) !important;
	--cmplz_button_deny_text_color: var(--foreground) !important;
	--cmplz_button_settings_background_color: transparent !important;
	--cmplz_button_settings_border_color: var(--border) !important;
	--cmplz_button_settings_text_color: var(--foreground) !important;
	--cmplz_banner_border_radius: 0 !important;
	--cmplz_button_border_radius: 0 !important;
	font-family: var(--font-sans) !important;
}
.cmplz-cookiebanner .cmplz-title { font-family: var(--font-display) !important; font-size: 1.25rem !important; }
.cmplz-cookiebanner .cmplz-btn { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem !important; }

/* WordPress core block CSS gives figure a bottom margin; the original markup assumes none. */
.vs-marketing figure { margin: 0; }

/* ---------- Inquiry forms ---------- */

.vs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.vs-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 640px) { .vs-form__grid { grid-template-columns: minmax(0, 1fr); } }
.vs-form__field.is-wide { grid-column: 1 / -1; }
.vs-form__field label, .vs-form__field legend {
	display: block; margin-bottom: .5rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--foreground);
}
.vs-form__field legend { text-transform: none; letter-spacing: 0; font-size: .95rem; margin-bottom: .6rem; }
.vs-form__field input:not([type="radio"]), .vs-form__field select, .vs-form__field textarea { width: 100%; padding: .8rem 1rem; }
.vs-form__field fieldset { border: 0; padding: 0; margin: 0; }
.vs-form__choices { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.vs-form__choices label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); cursor: pointer; }
.vs-form__choices input { accent-color: var(--primary); width: 1rem; height: 1rem; }
.vs-form__field input[type="date"] { color-scheme: dark; }
.vs-form__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.vs-form__actions button { cursor: pointer; border: 0; }
.vs-form-status { border: 1px solid var(--border); border-top: 2px solid var(--primary); background: var(--background); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; color: var(--muted-foreground); line-height: 1.7; }
.vs-form-status > * + * { margin-top: .5rem; }
.vs-form-status.is-success .font-display { color: var(--foreground); }
.vs-form-status.is-error { border-top-color: var(--destructive); }
.vs-form-status a { color: var(--primary); }

/* ---------- FAQ (details/summary) ---------- */

.vs-faq { border-top: 1px solid var(--border); }
.vs-faq__item { border-bottom: 1px solid var(--border); }
.vs-faq__item summary {
	list-style: none; cursor: pointer; display: flex; gap: 1rem; align-items: baseline; padding: 1.1rem 2rem 1.1rem 0; position: relative;
	font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; color: var(--foreground);
}
.vs-faq__item summary::-webkit-details-marker { display: none; }
.vs-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 1rem; color: var(--primary); font-family: var(--font-sans); font-size: 1.25rem; }
.vs-faq__item[open] summary::after { content: "\2013"; }
.vs-faq__item summary:hover { color: var(--primary); }
.vs-faq__num { font-family: var(--font-sans); font-size: .7rem; letter-spacing: .16em; color: var(--primary); flex: none; }
.vs-faq__answer { padding: 0 0 1.4rem 2.1rem; color: var(--muted-foreground); font-size: .95rem; line-height: 1.75; }
.vs-faq__answer > * + * { margin-top: .8rem; }
.vs-faq__answer ul { list-style: disc; padding-left: 1.25rem; }
.vs-faq__answer a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Booking / bulk layout ---------- */

@media (width >= 64rem) { .vs-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.vs-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.vs-options li { border: 1px solid var(--border); padding: .45rem .9rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }
.vs-aside__list { margin-top: 1rem; border-top: 1px solid var(--border); font-size: .9rem; line-height: 1.7; color: var(--muted-foreground); }
.vs-aside__list li { padding: .9rem 0; border-bottom: 1px solid var(--border); }
.vs-aside__list strong { color: var(--foreground); font-weight: 500; }
.vs-aside__list a { color: var(--primary); }
.vs-aside .vs-faq { margin-top: 1rem; }
.vs-aside .vs-faq__item summary { font-size: 1.1rem; }
.vs-aside .vs-faq__answer { padding-left: 0; font-size: .9rem; }
.vs-bulk-image { max-height: 36rem; }
/* Calendly inline embed: its iframe fills the box, and the phone layout stacks
   the calendar above the time slots, so it needs the extra height. */
.vs-calendly { min-width: 320px; height: 1060px; border: 1px solid var(--border); background: var(--card); }
@media (width >= 48rem) { .vs-calendly { height: 760px; } }