/*
Theme Name:   V&P Immobilien
Theme URI:    https://vp-immobilien.ch
Description:  Child theme of Hello Elementor for V&P Immobilien & Invest GmbH. Holds the design-system CSS that the Elementor Global Kit cannot express (gold gradient, component classes, hover states). Colours, fonts and type sizes live in Elementor > Site Settings.
Author:       V&P Immobilien & Invest GmbH
Template:     hello-elementor
Version:      1.0.0
Text Domain:  vp-immobilien
*/

/* ---------------------------------------------------------------
   Tokens. Each one reads the Elementor Global Kit colour first, so
   changing a global colour in Site Settings also updates these.
   --------------------------------------------------------------- */
body {
	--vp-black: var(--e-global-color-primary, #000000);
	--vp-ink: var(--e-global-color-text, #14110E);
	--vp-ink-2: var(--e-global-color-textsec, #2E2A24);
	--vp-gold: var(--e-global-color-accent, #C9A227);
	--vp-gold-dark: var(--e-global-color-golddrk, #9A7A1D);
	--vp-gold-link: var(--e-global-color-goldlnk, #8A6D1F);
	--vp-gold-light: var(--e-global-color-goldlgt, #E8C87A);
	--vp-gold-border: var(--e-global-color-goldbrd, #D8BE72);
	--vp-tint: var(--e-global-color-wrmtint, #EFE9DC);
	--vp-hair: var(--e-global-color-hairlgt, #EAE5DC);
	--vp-hair-dark: var(--e-global-color-hairdrk, #242424);
	--vp-dark-muted: var(--e-global-color-drkmutd, #B8AE99);
	--vp-dark-dim: var(--e-global-color-drkdimm, #8F8778);
	--vp-hero-sub: var(--e-global-color-herosub, #DCD5C6);
	--vp-btn-ink: var(--e-global-color-btnink, #F5EFE2);
	--vp-gradient: linear-gradient(135deg, #E5CB86 0%, #C9A227 48%, #9A7A1D 100%);
	--vp-gradient-hover: linear-gradient(135deg, #F0DCA8 0%, #D9B33A 48%, #B08F2A 100%);
	--vp-ease: 180ms ease;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nothing is rounded (client instruction). */
.elementor-button,
.e-con,
.elementor-widget-image img,
.elementor-field-group input,
.elementor-field-group textarea,
.elementor-field-group select,
.elementor-field-group .elementor-button { border-radius: 0 !important; }

.elementor-widget-text-editor p:last-child { margin-block-end: 0; }
.elementor-widget-text-editor p { margin-block-start: 0; }
.elementor-heading-title a { color: inherit; transition: color var(--vp-ease); }

/* ---------------------------------------------------------------
   Gold fill: the three-stop gradient is not a Kit token, so every
   gold surface uses this class.
   --------------------------------------------------------------- */
.vp-gold { background: var(--vp-gradient); }
.e-con.vp-gold { background: var(--vp-gradient); }

/* Eyebrow pill (Heading widget, class vp-eyebrow). */
.vp-eyebrow .elementor-heading-title {
	display: inline-block;
	background: var(--vp-gradient);
	color: var(--vp-ink);
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 500;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 9px 16px;
}

/* ---------------------------------------------------------------
   Buttons (Button widget + class). Native per-widget settings still
   win over these, so a button can be restyled in the panel.
   --------------------------------------------------------------- */
.elementor-widget.vp-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	padding: 0 36px;
	border: 0;
	border-radius: 0;
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color var(--vp-ease), color var(--vp-ease), border-color var(--vp-ease);
}
.elementor-widget.vp-btn--h56 .elementor-button { height: 56px; }
.elementor-widget.vp-btn--sm-type .elementor-button { font-size: 12.5px; }
.elementor-widget.vp-btn--ls12 .elementor-button { letter-spacing: 0.12em; }
.elementor-widget.vp-btn--px34 .elementor-button { padding: 0 34px; }
.elementor-widget.vp-btn--px40 .elementor-button { padding: 0 40px; }

.elementor-widget.vp-btn--gold .elementor-button { background: var(--vp-gradient); color: var(--vp-ink); }
.elementor-widget.vp-btn--gold .elementor-button:hover,
.elementor-widget.vp-btn--gold .elementor-button:focus-visible { background: var(--vp-gradient-hover); color: var(--vp-ink); }

/* Black button on the gold CTA bands: hover to white. */
.elementor-widget.vp-btn--black .elementor-button { background: var(--vp-black); color: var(--vp-btn-ink); }
.elementor-widget.vp-btn--black .elementor-button:hover,
.elementor-widget.vp-btn--black .elementor-button:focus-visible { background: #FFFFFF; color: var(--vp-ink); }

/* Black button on light grounds: hover to gold. */
.elementor-widget.vp-btn--black-gold .elementor-button { background: var(--vp-black); color: #FFFFFF; }
.elementor-widget.vp-btn--black-gold .elementor-button:hover,
.elementor-widget.vp-btn--black-gold .elementor-button:focus-visible { background: var(--vp-gradient); color: var(--vp-ink); }

/* Outline button on the Home hero. */
.elementor-widget.vp-btn--outline .elementor-button { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.45); }
.elementor-widget.vp-btn--outline .elementor-button:hover,
.elementor-widget.vp-btn--outline .elementor-button:focus-visible { border-color: var(--vp-gold); color: var(--vp-gold-light); }

/* Kontakt button in the nav bar. */
.elementor-widget.vp-btn--nav .elementor-button {
	height: 44px;
	padding: 0 22px;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	background: var(--vp-gradient);
	color: var(--vp-ink);
}
.elementor-widget.vp-btn--nav .elementor-button:hover,
.elementor-widget.vp-btn--nav .elementor-button:focus-visible { background: #FFFFFF; color: var(--vp-ink); }

/* ---------------------------------------------------------------
   Icons. The SVGs are 1.5px line icons drawn with currentColor;
   Elementor sets an svg fill, which would flood them, so fill is
   forced off here.
   --------------------------------------------------------------- */
.vp-tile .elementor-icon svg,
.vp-line-ico .elementor-icon svg,
.vp-fact .elementor-icon-list-icon svg { fill: none !important; }

.vp-tile .elementor-icon-wrapper { line-height: 0; }
.vp-tile .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--vp-gradient);
	color: var(--vp-ink);
	box-shadow: 0 2px 10px rgba(154, 122, 29, 0.22);
	font-size: 27px;
}
.vp-tile .elementor-icon svg { width: 27px; height: 27px; color: var(--vp-ink); }
.vp-tile--64 .elementor-icon { width: 64px; height: 64px; font-size: 30px; }
.vp-tile--64 .elementor-icon svg { width: 30px; height: 30px; }

.vp-line-ico .elementor-icon-wrapper { line-height: 0; }
.vp-line-ico .elementor-icon { color: var(--vp-gold-dark); font-size: 22px; }
.vp-line-ico .elementor-icon svg { width: 22px; height: 22px; }

/* Hero fact strip (Icon List, one item per cell). */
.vp-fact .elementor-icon-list-item { align-items: center; }
.vp-fact .elementor-icon-list-icon { color: var(--vp-gold); }
.vp-fact .elementor-icon-list-icon svg { width: 20px; height: 20px; color: var(--vp-gold); }
.vp-fact .elementor-icon-list-text { color: #FFFFFF; transition: color var(--vp-ease); }
.vp-fact a:hover .elementor-icon-list-text { color: var(--vp-gold-light); }

/* ---------------------------------------------------------------
   Links and label rows
   --------------------------------------------------------------- */
.vp-util .elementor-heading-title a:hover,
.vp-legal .elementor-heading-title a:hover { color: var(--vp-gold-light); }

.vp-foot-links a .elementor-icon-list-text { transition: color var(--vp-ease); }

/* Contact rows on black (Home): the whole row is the link. */
.vp-crow .vp-crow__v .elementor-heading-title { color: #FFFFFF; transition: color var(--vp-ease); }
a.vp-crow:hover .vp-crow__v .elementor-heading-title,
a.vp-crow:focus-visible .vp-crow__v .elementor-heading-title { color: var(--vp-gold-light); }

/* Contact rows on white (Kontakt page). */
.vp-krow .elementor-heading-title a:hover { color: var(--vp-gold-link); }

/* Home service cards are links; keep text colours and lift on hover. */
a.e-con.vp-card { color: inherit; text-decoration: none; }
.vp-card .vp-card__link .elementor-heading-title { transition: color var(--vp-ease); }
a.vp-card:hover .vp-card__link .elementor-heading-title { color: var(--vp-gold); }

/* ---------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------- */
.e-con.vp-baseline { --align-items: baseline; }
.elementor-element.elementor-widget.vp-ord { min-width: 34px; }
.elementor-element.elementor-widget.vp-crow__l { min-width: 92px; }
.elementor-element.elementor-widget.vp-krow__l { min-width: 100px; }

/* Split-section photo fills its column (Image widget, class vp-fill). */
.elementor-widget-image.vp-fill { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.elementor-widget-image.vp-fill img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Measure limits: max-width in ch, applied to the text element itself so ch uses its own font size. */
.vp-mw-15 .elementor-heading-title, .vp-mw-15 p { max-width: 15ch; }
.vp-mw-16 .elementor-heading-title, .vp-mw-16 p { max-width: 16ch; }
.vp-mw-18 .elementor-heading-title, .vp-mw-18 p { max-width: 18ch; }
.vp-mw-20 .elementor-heading-title, .vp-mw-20 p { max-width: 20ch; }
.vp-mw-22 .elementor-heading-title, .vp-mw-22 p { max-width: 22ch; }
.vp-mw-30 .elementor-heading-title, .vp-mw-30 p { max-width: 30ch; }
.vp-mw-44 .elementor-heading-title, .vp-mw-44 p { max-width: 44ch; }
.vp-mw-46 .elementor-heading-title, .vp-mw-46 p { max-width: 46ch; }
.vp-mw-48 .elementor-heading-title, .vp-mw-48 p { max-width: 48ch; }
.vp-mw-50 .elementor-heading-title, .vp-mw-50 p { max-width: 50ch; }
.vp-mw-52 .elementor-heading-title, .vp-mw-52 p { max-width: 52ch; }
.vp-mw-70 p, .vp-mw-70 li, .vp-mw-70 h2, .vp-mw-70 h3 { max-width: 70ch; }
.vp-center .elementor-heading-title { margin-inline: auto; }
/* Container-level measure (design: max-width 52ch on the wrapper at the 16px base size). */
.e-con.vp-box-52 { font-size: 16px; max-width: 52ch; }
.vp-pretty .elementor-heading-title { text-wrap: pretty; }

/* Gold-dash list (Home, Über uns split). */
.vp-dash-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vp-dash-list li { display: flex; gap: 14px; align-items: baseline; margin: 0; }
.vp-dash-list li::before { content: "\2014"; color: var(--vp-gold); flex: 0 0 auto; }

/* Portrait placeholders on Home: the one round element on the site. */
.vp-initial-circle .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--vp-tint);
}

/* Header logo sizes. The link and widget get line-height 0 so the image does not sit on a text baseline. */
.elementor-widget.vp-logo { line-height: 0; }
.elementor-widget.vp-logo a { display: block; line-height: 0; }
.vp-logo img { height: 68px; width: auto; max-width: none; display: block; }
.vp-logo--footer img { height: 42px; }
@media (max-width: 767px) {
	.vp-logo img { height: 46px; }
	.vp-logo--footer img { height: 42px; }
	/* Compact Kontakt button so logo, button and burger share one row on phones. */
	.elementor-widget.vp-btn--nav .elementor-button { height: 40px; padding: 0 16px; font-size: 12px; letter-spacing: 0.08em; }
}

/* Nav: match the design's 2px underline sitting under 6px of padding. */
.vp-nav .elementor-nav-menu--main .elementor-item { line-height: normal; }
.vp-nav .elementor-nav-menu--dropdown .elementor-item { line-height: normal; }
.vp-nav .elementor-menu-toggle { color: var(--vp-hero-sub); }

/* Kontakt form. */
.vp-form .elementor-field-group:not(.elementor-field-type-submit) .elementor-field-textual { min-height: 52px; }
.vp-form textarea.elementor-field-textual { min-height: 120px; padding-top: 14px; padding-bottom: 14px; }
.vp-form .elementor-field-label { line-height: normal; }
.vp-form .elementor-field-textual::placeholder { color: var(--vp-ink-2); opacity: 1; }
.vp-form .elementor-field-textual:focus { border-color: var(--vp-gold) !important; outline: none; box-shadow: 0 0 0 1px var(--vp-gold); }
.vp-form .elementor-field-type-submit .elementor-button {
	height: 58px;
	background: var(--vp-black);
	color: var(--vp-btn-ink);
	transition: color var(--vp-ease);
}
.vp-form .elementor-field-type-submit .elementor-button:hover,
.vp-form .elementor-field-type-submit .elementor-button:focus-visible { background: var(--vp-gradient); color: var(--vp-ink); }
.vp-form .elementor-field-type-submit { margin-top: 4px; }
.vp-form .elementor-message { font-family: "Jost", system-ui, sans-serif; font-size: 16px; margin-top: 14px; }

/* Consent-gated map on Kontakt: nothing loads from OpenStreetMap until the visitor clicks. */
.vp-map { position: relative; }
.vp-map iframe.vp-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

/* Language switcher in the header top bar ([vp_languages] shortcode). */
.vp-lang { display: flex; align-items: center; gap: 14px; }
.vp-lang .vp-lang__link {
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.45;
	letter-spacing: 0.08em;
	color: var(--vp-dark-dim);
	text-decoration: none;
	transition: color var(--vp-ease);
}
.vp-lang .vp-lang__link:hover,
.vp-lang .vp-lang__link:focus-visible,
.vp-lang .vp-lang__link.is-current { color: var(--vp-gold-light); }

/* Legal pages body copy. */
.vp-legal-copy h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.25; margin: 40px 0 12px; }
.vp-legal-copy h2:first-child { margin-top: 0; }
.vp-legal-copy p { margin-block-end: 16px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}