/*
Theme Name:   view.
Theme URI:    https://www.viewpoint.co.mz
Description:  Viewpoint (view.) custom theme. Child of Hello Elementor. Holds the brand look (Poppins, #FAFAFA, black, #FFF400 highlight).
Author:       Viewpoint
Template:     hello-elementor
Version:      1.0.1
Text Domain:  view
*/

:root {
	--vp-bg: #FAFAFA;
	--vp-ink: #000000;
	--vp-yellow: #FFF400;
	--vp-muted: #6b6b6b;
	--vp-line: #d9d9d9;
	--vp-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--vp-gutter: clamp(20px, 4.2vw, 60px);
	--vp-max: 1100px;
}

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--vp-bg);
	color: var(--vp-ink);
	font-family: var(--vp-font);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vp-font);
	font-weight: 700;
	color: var(--vp-ink);
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(36px, 4.5vw, 64px); }
h2 { font-size: clamp(32px, 4.5vw, 64px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }
h4 { font-size: 16px; }

p { margin: 0 0 1em; }
strong, b { font-weight: 700; }

a { color: var(--vp-ink); text-decoration: none; transition: opacity .2s ease; }
a:hover, a:focus { color: var(--vp-ink); opacity: .6; }

img { max-width: 100%; height: auto; }

/* Yellow highlighter, lower half of the line, as on the original site */
.vp-hl,
mark {
	background: linear-gradient(to bottom, transparent 50%, var(--vp-yellow) 50%, var(--vp-yellow) 90%, transparent 90%);
	color: inherit;
	padding: 0 .05em;
}

/* Buttons: black block, small medium uppercase */
.vp-btn,
.elementor-button,
button.ff-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-block;
	background: var(--vp-ink);
	color: #fff;
	font-family: var(--vp-font);
	font-weight: 500;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 14.4px 24px;
	border: 0;
	border-radius: 0;
	line-height: 1.4;
}
.vp-btn:hover,
.elementor-button:hover,
button.ff-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: #222; color: #fff; opacity: 1; }

/* Content width used by snippets and templates */
.vp-wrap {
	width: 100%;
	max-width: calc(var(--vp-max) + 2 * var(--vp-gutter));
	margin: 0 auto;
	padding: 0 var(--vp-gutter);
}
.vp-wrap--wide { max-width: none; }

/* Forms (Fluent Forms): thin black outline boxes like Squarespace */
.fluentform .ff-el-form-control {
	border: 1px solid #000;
	border-radius: 0;
	background: transparent;
	font-family: var(--vp-font);
	font-weight: 300;
}
.fluentform .ff-el-input--label label { font-weight: 300; font-size: 12px; }

/* Hide Hello Elementor's own header/footer leftovers if any */
.site-header:not(.vp-header), .site-footer:not(.vp-footer) { display: none; }
/* ---- Elementor alignment with the original ---- */
.elementor-widget-heading .elementor-heading-title { font-family: var(--vp-font); font-weight: 700; line-height: 1.2; color: var(--vp-ink); }
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(34px, 4.5vw, 64px); }
.elementor-widget-heading h3.elementor-heading-title { font-size: clamp(22px, 2.2vw, 30px); }
.elementor-widget-heading h4.elementor-heading-title { font-size: 16px; }
.elementor-widget-text-editor { font-size: 13.3px; line-height: 1.8; color: var(--vp-ink); }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* How we work cards: centred icon and title, left-aligned text */
.vp-steps .elementor-image-box-img img { width: 48px; height: 48px; }
.vp-steps .elementor-image-box-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.vp-steps .elementor-image-box-description { text-align: left; font-size: 12.5px; line-height: 1.8; }

/* Team toggle */
.vp-toggle .elementor-tab-title { border-top: 0 !important; border-bottom: 1px solid #cfcfcf; padding: 10px 0 !important; font-weight: 700; font-size: 13px; }
.vp-toggle .elementor-tab-title a { color: var(--vp-ink); }
.vp-toggle .elementor-toggle-item { border: 0; }
.vp-toggle .elementor-tab-content { border: 0 !important; padding: 16px 0 !important; font-size: 12.5px; line-height: 1.8; }

/* Carousels (case studies) */
.vp-carousel .swiper-pagination-bullet-active { background: var(--vp-ink); }
.vp-carousel .elementor-swiper-button { color: var(--vp-ink); }

/* Fluent Forms: squared, black outline, black button */
.fluentform .ff-el-group .ff-el-form-control { border: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; font-family: var(--vp-font) !important; font-weight: 300; font-size: 13px; padding: 10px 12px; box-shadow: none !important; }
.fluentform .ff-el-group .ff-el-form-control:focus { border-color: #000 !important; outline: 2px solid var(--vp-yellow); outline-offset: 0; }
.fluentform .ff-el-input--label label { font-family: var(--vp-font); font-weight: 300 !important; font-size: 12px !important; }
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after { color: var(--vp-muted); }
.fluentform .ff_submit_btn_wrapper .ff-btn-submit,
.fluentform button.ff-btn-submit { background: var(--vp-ink) !important; color: #fff !important; border-radius: 0 !important; font-family: var(--vp-font); font-weight: 500; font-size: 11.5px; text-transform: uppercase; padding: 14px 24px; }
/* ---- Case studies ---- */
.vp-cover img { width: 100%; height: auto; display: block; }
.vp-link { font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.elementor-image-gallery .gallery { margin: 0 !important; }
.elementor-image-gallery .gallery-item img { width: 100%; height: auto; display: block; border: 0 !important; }
/* "Strips" gallery: two-column masonry at natural image heights */
.vp-strips .gallery { display: block !important; column-count: 2; column-gap: 10px; }
.vp-strips .gallery .gallery-item { display: block; width: 100% !important; max-width: 100% !important; break-inside: avoid; margin: 0 0 10px !important; padding: 0 !important; }
@media (max-width: 767px) { .vp-strips .gallery { column-count: 1; } }
.vp-narrow { max-width: 560px; }
/* ---- Portfolio ---- */
.vp-logo-grid .elementor-widget-image img { width: 100%; height: auto; transition: opacity .2s ease; }
.vp-logo-grid a:hover img { opacity: .6; }
.vp-ig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- Legal pages ---- */
.vp-legal h4 { margin: 2em 0 .6em; font-size: 16px; }
.vp-legal ul { margin: 0 0 1em 1.2em; padding: 0; }

/* ---- Cover (link in bio) ---- */
body.elementor-template-canvas { background: #000; }
.vp-dark { color: #FAFAFA; }
.vp-dark a { color: #FAFAFA; }
.vp-cover-logo { display: inline-block; font-weight: 700; font-size: 56px; line-height: 1; color: #FAFAFA; letter-spacing: -.02em; }
.vp-btn-yellow .elementor-button { background: var(--vp-yellow) !important; color: #000 !important; width: 100%; }
.vp-toggle--dark .elementor-tab-title, .vp-toggle--dark .elementor-tab-title a, .vp-toggle--dark .elementor-toggle-icon { color: #FAFAFA !important; }
.vp-toggle--dark .elementor-tab-title { border-bottom-color: #333 !important; }
.vp-toggle--dark .elementor-tab-content { color: #cfcfcf; }