/* VOPAX US Co – landing page styles (brand colours, equipment filters, form)
 * Path: wp-content/themes/logico-child/assets/vopax.css (NEW – VOPAX site only)
 */

/* ---------- Brand colours (from the Figma design) ---------- */
body.vx-site {
	--rx-blue: #1858b9;
	--rx-blue-d: #12479a;
	--rx-accent: #4283e7;
	--rx-navy: #1858b9;
	--rx-deep: #061e41;
}
.vx-site .rx-title .elementor-heading-title span, .vx-site .rx-accent { color: var(--rx-accent) !important; }
.vx-site .rx-h1 .elementor-heading-title span { color: var(--rx-accent) !important; }
.vx-site .rx-nav .rx-menu a:hover, .vx-site .rx-nav .rx-menu .current-menu-item > a { color: var(--rx-accent) !important; }
.vx-site .rx-nav .rx-menu a::after { background: var(--rx-accent); }
.vx-site .rx-header__cta { background: var(--rx-accent) !important; border-color: var(--rx-accent) !important; }
.vx-site .rx-header__cta:hover { background: var(--rx-blue) !important; border-color: var(--rx-blue) !important; }
.vx-site .rx-dark { background-color: var(--rx-deep) !important; }
.vx-site .rx-footer__bottom { background: #063f65; }
.vx-site .rx-cat__count, .vx-site .rx-card__tags span { color: var(--rx-blue); }

/* Logo (VOPAX is a stacked mark, a bit wider than tall) */
.vx-logo svg, .vx-logo img { height: 92px !important; width: auto !important; display: block; }
.rx-logo--footer.vx-logo svg, .rx-logo--footer.vx-logo img { height: 110px !important; }
@media (max-width: 1300px) { .vx-logo svg, .vx-logo img { height: 84px !important; } }
@media (max-width: 1024px) { .vx-logo svg, .vx-logo img { height: 66px !important; } }
@media (max-width: 600px) { .vx-logo svg, .vx-logo img { height: 56px !important; } }

/* Section anchors land below the sticky header */
.vx-site [id="equipment"], .vx-site [id="about"], .vx-site [id="services"], .vx-site [id="contact"] { scroll-margin-top: 120px; }

/* ---------- Hero ---------- */
.vx-site .rx-hero .rx-lead, .vx-site .rx-hero .rx-lead p { max-width: 860px; font-size: 19px !important; line-height: 1.7 !important; }
.vx-site .rx-hero .rx-lead p + p { margin-top: 14px !important; }
@media (max-width: 767px) { .vx-site .rx-hero .rx-lead, .vx-site .rx-hero .rx-lead p { font-size: 16px !important; } }

/* ---------- Equipment: category tabs + grid ---------- */
.vx-eq { font-family: var(--rx-font); }
.vx-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.vx-tab {
	display: inline-flex; align-items: center; gap: 10px; font-family: var(--rx-font) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important;
	text-transform: none !important; letter-spacing: 0 !important; padding: 13px 20px !important; border-radius: 999px !important; border: 1px solid var(--rx-line) !important;
	background: #fff !important; color: var(--rx-dark) !important; cursor: pointer; transition: all .2s; white-space: nowrap;
}
.vx-tab span { font-size: 13px; font-weight: 600; background: var(--rx-bg); color: var(--rx-muted); border-radius: 999px; padding: 4px 9px; transition: all .2s; }
.vx-tab:hover { border-color: var(--rx-blue) !important; color: var(--rx-blue) !important; }
.vx-tab.is-active { background: var(--rx-blue) !important; border-color: var(--rx-blue) !important; color: #fff !important; }
.vx-tab.is-active span { background: rgba(255, 255, 255, .2); color: #fff; }
.vx-active { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 20px; }
.vx-active:empty { display: none; }
.vx-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: #E8F0FC; color: var(--rx-blue); font-family: var(--rx-font); font-size: 14px; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.vx-chip span { font-size: 16px; line-height: 1; }
.vx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; transition: opacity .2s; }
.vx-eq.is-loading .vx-grid { opacity: .45; pointer-events: none; }
.vx-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 20px; border: 2px dashed var(--rx-line); border-radius: 16px; color: var(--rx-muted); }
.vx-empty strong { font-size: 19px; color: var(--rx-dark); }
.vx-more-wrap { display: flex; justify-content: center; margin-top: 32px; }
.vx-more[hidden] { display: none !important; }
@media (max-width: 1024px) { .vx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
	.vx-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 22px; padding: 0 20px 6px; scrollbar-width: none; }
	.vx-tabs::-webkit-scrollbar { display: none; }
	.vx-tab { font-size: 15px !important; padding: 12px 16px !important; }
	.vx-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact (Elementor form) ---------- */
.vx-contact-head { text-align: center; max-width: 720px; margin: 0 auto 36px !important; }
.vx-formcard { max-width: 1060px; margin: 0 auto !important; width: 100%; }
.vx-form .elementor-form-fields-wrapper { margin: 0 -10px !important; }
.vx-form .elementor-field-group { padding: 0 10px !important; margin-bottom: 20px !important; }
.vx-form .elementor-field-label { font-family: var(--rx-font) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--rx-dark) !important; margin-bottom: 8px !important; }
.vx-form .elementor-mark-required .elementor-field-label::after { color: #E5484D !important; }
.vx-form .elementor-field-textual, .vx-form .elementor-select-wrapper select {
	font-family: var(--rx-font) !important; font-size: 16px !important; color: var(--rx-text) !important; background-color: #F3F6F9 !important;
	border: 1px solid #DCE4ED !important; border-radius: 10px !important; padding: 16px 18px !important; min-height: 58px; box-shadow: none !important;
}
.vx-form textarea.elementor-field-textual { min-height: 170px; }
.vx-form .elementor-field-textual:focus, .vx-form .elementor-select-wrapper select:focus { border-color: var(--rx-blue) !important; background-color: #fff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(24, 88, 185, .15) !important; }
.vx-form .elementor-field-textual::placeholder { color: #8796A5; }
.vx-form .elementor-button {
	width: 100%; font-family: var(--rx-font) !important; font-size: 18px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
	background: var(--rx-accent) !important; color: #fff !important; border-radius: 10px !important; padding: 20px 30px !important; border: 0 !important; transition: background .2s;
}
.vx-form .elementor-button:hover { background: var(--rx-blue) !important; }
.vx-form .elementor-message { font-family: var(--rx-font); font-size: 16px; }
.vx-form .elementor-message-success { color: #12805c; }
.vx-cinfo { max-width: 1060px; width: 100%; margin: 36px auto 0 !important; }
.vx-ccards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 !important; }
@media (max-width: 900px) { .vx-ccards { grid-template-columns: 1fr; } }

/* ---------- Header/footer on the landing ---------- */
.vx-site .rx-footer .rx-menu a, .vx-site .rx-footer [data-vx-cat] { cursor: pointer; }
.vx-site .rx-mobile .rx-menu .current-menu-item > a { color: var(--rx-accent) !important; }

/* Services: blue note under the cards */
.vx-note { background: var(--rx-accent); border-radius: 16px; padding: 28px 36px !important; }
.vx-note p { color: #fff !important; font-family: var(--rx-font) !important; font-size: 18px !important; line-height: 1.75 !important; margin: 0 0 10px !important; }
.vx-note p:last-child { margin-bottom: 0 !important; }
@media (max-width: 767px) { .vx-note { padding: 22px 20px !important; } .vx-note p { font-size: 16px !important; } }
.vx-site .rx-svc .elementor-image-box-img a, .vx-site .rx-svc .elementor-image-box-title a { pointer-events: none; }
.vx-footer .rx-footer__bottom .rx-wrap { justify-content: center; text-align: center; }

/* ---------- Round 2 fixes ---------- */
/* Services note: centred, tighter lines */
.vx-note { text-align: center; }
.vx-note p { line-height: 1.55 !important; margin-bottom: 6px !important; }
/* Section heads: title and text vertically centred */
.vx-site .rx-head { align-items: center !important; }

/* Header like the Figma: full-width white bar above the banner (no overlap) */
body.vx-site { --vx-hh: 116px; }
.vx-site #masthead { position: relative !important; height: var(--vx-hh); }
.vx-site .vx-header, .vx-site .vx-header.is-scrolled {
	position: fixed !important; top: var(--wp-admin--admin-bar--height, 0px) !important; left: 0; right: 0; padding: 0 !important;
	background: #fff; box-shadow: 0 1px 0 var(--rx-line); transition: box-shadow .25s; z-index: 1000;
}
.vx-site .vx-header.is-scrolled { box-shadow: 0 6px 24px rgba(10, 37, 64, .1); }
.vx-site .vx-header .rx-header__bar, .vx-site .vx-header.is-scrolled .rx-header__bar {
	max-width: 1340px; margin: 0 auto; border-radius: 0 !important; box-shadow: none !important; background: transparent;
	min-height: var(--vx-hh); padding: 8px 20px !important;
}
.vx-site .rx-hero { padding-top: 110px !important; min-height: max(720px, calc(94vh - var(--vx-hh))) !important; }
.vx-site .rx-mobile { border-top: 1px solid var(--rx-line); }
.vx-site .rx-search { padding-top: calc(var(--vx-hh) + 24px); }
@media (max-width: 1024px) {
	body.vx-site { --vx-hh: 88px; }
	.vx-site .rx-hero { padding-top: 90px !important; min-height: 600px !important; }
}
@media (max-width: 600px) {
	body.vx-site { --vx-hh: 76px; }
	.vx-site .rx-hero { padding-top: 64px !important; min-height: 0 !important; padding-bottom: 80px !important; }
	.vx-site .vx-header .rx-header__bar { padding: 6px 16px !important; }
}
@media (max-width: 600px) { .admin-bar.vx-site .vx-header:not(.is-scrolled) { top: 46px !important; } .admin-bar.vx-site .vx-header.is-scrolled { top: 0 !important; } }


/* Round 3 – same feel as RSOLE: bigger logo, hero text like RSOLE */
.vx-site .vx-header .vx-logo svg, .vx-site .vx-header .vx-logo img { height: 112px !important; }
body.vx-site { --vx-hh: 132px; }
.vx-site .vx-header .rx-header__bar, .vx-site .vx-header.is-scrolled .rx-header__bar { max-width: 1280px; }
.vx-site .rx-hero .rx-lead, .vx-site .rx-hero .rx-lead p { font-size: 20px !important; line-height: 1.65 !important; }
@media (max-width: 1300px) { .vx-site .vx-header .vx-logo svg, .vx-site .vx-header .vx-logo img { height: 100px !important; } body.vx-site { --vx-hh: 120px; } }
@media (max-width: 1024px) { .vx-site .vx-header .vx-logo svg, .vx-site .vx-header .vx-logo img { height: 80px !important; } body.vx-site { --vx-hh: 100px; } }
@media (max-width: 767px) { .vx-site .rx-hero .rx-lead, .vx-site .rx-hero .rx-lead p { font-size: 18px !important; } }
@media (max-width: 600px) { .vx-site .vx-header .vx-logo svg, .vx-site .vx-header .vx-logo img { height: 66px !important; } body.vx-site { --vx-hh: 84px; } }

/* 1024 (laptop/tablet landscape): About in 2 columns, equipment 3 per row */
@media (min-width: 901px) and (max-width: 1024px) {
	.vx-site .rx-split, .vx-site .rx-welcome .rx-split { grid-template-columns: 1fr 1fr; gap: 40px !important; }
	.vx-site .rx-media .rx-image img { aspect-ratio: 4 / 5 !important; }
	.vx-site .vx-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
/* Mobile: same side space before and after scrolling */
@media (max-width: 600px) { .vx-site .vx-header.is-scrolled .rx-header__bar { padding: 6px 16px !important; } }
/* Mobile: all paragraphs 16px */
@media (max-width: 767px) {
	.vx-site .elementor-widget-text-editor p, .vx-site .rx-text p, .vx-site .rx-hero .rx-lead, .vx-site .rx-hero .rx-lead p, .vx-site .rx-lead-dark, .vx-site .rx-footer__brand p, .vx-site .elementor-image-box-description, .vx-site .rx-banner__text { font-size: 16px !important; line-height: 1.7 !important; }
}

/* Hero like RSOLE: first line blue, second line white; intro line not extra bold */
.vx-site .rx-hero .rx-h1 .elementor-heading-title { color: #fff !important; }
.vx-site .rx-hero .rx-lead strong { font-weight: 600 !important; }