/* ===================================================================
 * EC COMPONENTS — buttons, cards, forms, badges, eyebrows.
 *
 * Bootstrap 3 + OneUp's button system via .btn / .btn-primary.
 * Override with brand colors; preserve OneUp's transitions where they
 * already work. CTA buttons get the gold accent treatment.
 * ================================================================ */

/* --- Buttons (Bootstrap 3 + OneUp) ---------------------------- */
.btn,
.btn-default,
button[type="submit"],
input[type="submit"] {
	font-family: var(--ec-font-family);
	font-weight: 600;
	letter-spacing: var(--ec-nav-tracking);
	border-radius: var(--ec-radius);
	transition: transform var(--ec-transition),
	            box-shadow var(--ec-transition),
	            background-color var(--ec-transition),
	            color var(--ec-transition);
}

.btn-primary,
.wpb_button.btn-primary,
button[type="submit"],
input[type="submit"] {
	background-color: var(--ec-color-accent);
	border-color: var(--ec-color-accent);
	color: var(--ec-color-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.wpb_button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--ec-color-accent-dark);
	border-color: var(--ec-color-accent-dark);
	color: var(--ec-color-primary);
	transform: translateY(-2px);
	box-shadow: var(--ec-shadow);
}

/* --- Eyebrow / pre-heading label ------------------------------ */
.subtitle-section {
	display: inline-block;
	font-family: var(--ec-font-family);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ec-color-accent);
	margin-bottom: 12px;
}

/* --- Forms (CF7 + WPBakery) ----------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.vc_column input[type="text"],
.vc_column input[type="email"] {
	font-family: var(--ec-font-family);
	border-radius: var(--ec-radius);
	transition: border-color var(--ec-transition),
	            box-shadow var(--ec-transition);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--ec-color-accent);
	box-shadow: 0 0 0 3px var(--ec-color-accent-tint);
	outline: none;
}

/* --- Navbar shadow + menu spacing ----------------------------- */
/* Drop shadow lives on .navbar-fixed-top across all viewports. Was
 * previously in 06-mobile.css but that file is media-gated to
 * (max-width:1023px), so desktop visitors lost the depth cue. */
.navbar.navbar-fixed-top {
	box-shadow: var(--ec-shadow);
}

/* --- Navbar menu spacing -------------------------------------- */
/* OneUp's style.css forces .navbar-default .navbar-nav > li > a
 * { padding: 0 } and exposes no option for horizontal padding —
 * matches the OneUp One Page 5 demo where item spacing is part of
 * the design system, not an option. Without this override, items
 * concatenate with no gap ("Who we areWhat we doOur Work…"). */
header.navbar-default .navbar-nav > li > a {
	padding: 7px 18px;
}
@media (min-width: 1200px) {
	header.navbar-default .navbar-nav > li > a {
		padding: 7px 22px;
	}
}

/* Right-edge breathing room on the menu container so the last item
 * isn't flush with the viewport edge, matching the demo. */
header .navbar-collapse {
	padding-right: 30px;
}
@media (min-width: 1200px) {
	header .navbar-collapse {
		padding-right: 40px;
	}
}

/* Vertical centering — RCA finding (5-Whys traced via sequential-thinking
 * 2026-05-04): the navbar's inner layout container `.nav-container`
 * holds four sibling blocks in DOM order: `.navbar-header` (logo),
 * `.oneup_right_header_icons` (pill), `.dl-menuwrapper` (mobile burger),
 * `.navbar-collapse` (menu items). Only `.navbar-header` carries
 * symmetric vertical margins (from `oneup_logo_*_margin_top`), so only
 * the logo centers within the 90/73 px navbar — the menu and pill snap
 * to top:0 in OneUp's float-based block layout.
 *
 * The OneUp One Page 5 demo solves this with style5, a built-in flex
 * layout. EC is on style1 (default fallback) where this is up to us.
 *
 * Treatment: convert `.nav-container` to a flex row that fills the
 * navbar's height (via min-height:100%) and centers cross-axis. The
 * float-based source order is logo-pill-burger-menu, but the visual
 * order needs to be logo-LEFT, menu-CENTER, pill-RIGHT — so reorder
 * via flex `order` and use `margin-left: auto` on the pill to push it
 * to the trailing edge. Inside `.navbar-collapse`, switch the
 * `<ul class="navbar-nav">` to flex with `justify-content: center` so
 * items center horizontally in the available space (replaces
 * `float: right` which pulled them right when their container was
 * narrow). */
header .nav-container {
	display: flex;
	align-items: center;
	min-height: 100%;
}
header .nav-container > .navbar-header { order: 0; }
/* navbar-collapse is itself a flex container so justify-content:center
 * acts on the full 992 px span (logo→pill); on the inner UL the
 * `display:flex` shrinks to content (618 px) and centering becomes a
 * no-op. `display: flex !important` is needed to beat Bootstrap 3's
 * `.navbar-collapse.collapse { display:block !important }` at min-width
 * 768px. Verified 2026-05-04: items pre-fix at l:577 r:1194 (asymmetric,
 * biased ~170 px right of nav center); post-fix matches demo's symmetric
 * ~395/396 split. */
header .nav-container > .navbar-collapse {
	order: 1;
	flex: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
header .nav-container > .oneup_right_header_icons { order: 2; margin-left: auto; margin-right: 30px; }
@media (min-width: 1200px) {
	header .nav-container > .oneup_right_header_icons { margin-right: 40px; }
}
header .nav-container > .dl-menuwrapper { order: 3; }
header .navbar-collapse > ul.navbar-nav {
	float: none;
}

/* --- Testimonial author/company color default ----------------- */
/* OneUp's [testimonials] shortcode (oneup_custom_post_types' style1
 * render) emits author + company in <span class="t-author-style1">
 * — meant for dark-bg sections, so it inherits the demo's white
 * default. EC's "Trusted by leading experts" section sits on white
 * page bg, so author/company render white-on-white and disappear.
 *
 * Set explicit dark color. Same fix would apply to .t-author (the
 * style2 wide variant) if EC ever uses it. */
.t-author-style1,
.t-author-style1 a,
.t-author,
.t-author a {
	color: var(--ec-color-primary) !important;
}

/* --- Feature-tile title color default ------------------------- */
/* Many [bsf-info-box] tiles ship without a title_font_color — the
 * demo authored them only where a non-default was wanted (dark-bg
 * sections like the diff-band photo, the hero-photo band, the
 * Contacts cards). Where it's missing, OneUp's cascade leaves the
 * .aio-icon-title h3 at the demo's white default.
 *
 * Branding.php's `oneup_h3_color` filter doesn't help here because
 * theme-styles.php's emitted rule explicitly excludes h3.aio-icon-
 * title and h3.ult-responsive via :not() — both of which apply to
 * every UVCA info-box title.
 *
 * Default to EC primary so titles are readable on white cards / page
 * bg. Tiles with title_font_color="..." in shortcode emit an inline
 * `style="color:..."` that wins via CSS precedence, so the diff-band
 * (white-on-scrim), hero-photo band (white-on-photo) and contact
 * cards (#111 on white) all keep their authored colors. */
.aio-icon-title:not([style*="color"]) {
	color: var(--ec-color-primary) !important;
}

/* --- Feature-tile icon size ----------------------------------- */
/* Custom-uploaded SVG icons inside [bsf-info-box icon_type="custom"]
 * tiles render at sizes baked into the demo's img_width attribute —
 * 70 px on home, 90 px on /what-we-do/ and /our-work/. The 3–4:1
 * icon-to-label ratio reads icon-led; modern B2B precedent is
 * 1.5–2:1 (icons sized 32–48 px against ~22 px labels). Centralize
 * via --ec-icon-feature so size is config, not per-page string-
 * replace in rebuild-*.php.
 *
 * Scope: .aio-icon-img is the wrapper Ultimate VC Addons emits for
 * the IMG-icon variant only. Font-icon tiles (iconsmind / iconsreso-*)
 * use .aio-icon-default and are unaffected here, so the small list-
 * bullet decorations on /what-we-do/, /our-work/ and /contacts/ keep
 * their authored 15–25 px sizes.
 *
 * !important needed: img_width is emitted as inline `font-size:Npx`
 * on .aio-icon-img and as HTML `width="N" height="N"` on .img-icon.
 * The wrapper's inline style would otherwise outweigh author CSS. */
.aio-icon-img {
	font-size: var(--ec-icon-feature) !important;
}
.aio-icon-img > img.img-icon {
	width: var(--ec-icon-feature) !important;
	height: var(--ec-icon-feature) !important;
}

/* --- Section bg-image scrim ----------------------------------- */
/* The "Let's make an Impact together" 4-tile differentiator band on
 * post 6936 (home) sits an [ult_content_box el_class="gradient_box"]
 * over a motion-blur trade-show-floor photo. The photo's bright
 * rim-lit ceiling/wall highlights compete with the white-text labels
 * overlaid on top. Drop a 45 % black scrim between the bg image and
 * the foreground tiles so labels read crisply.
 *
 * Scope: .ult-content-box is the inner element that actually carries
 * the bg image (already position:relative + border-radius:30px from
 * Ultimate VC Addons inline styles), so the ::before attaches there
 * — not on the outer .gradient_box wrapper. The
 * [style*="uploads"] qualifier confines the scrim to instances with
 * a real uploaded bg image: /our-work/ also uses .gradient_box but
 * its bg_image references resolve to background-image:url("") — a
 * 0.45 scrim there would black out the "Trusted by leading experts"
 * testimonial block.
 *
 * border-radius:inherit picks up the 30 px rounded corners from the
 * inline style; without it the scrim is a square that bleeds outside
 * the rounded box. pointer-events:none keeps the "Get a Free Quote"
 * button clickable through the scrim. Direct children get z-index:2
 * so they paint above the ::before within the .ult-content-box
 * stacking context (positioned ::before with z-index:1 would
 * otherwise sit above non-positioned block descendants). */
.gradient_box .ult-content-box[style*="uploads"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}
.gradient_box .ult-content-box[style*="uploads"] > * {
	position: relative;
	z-index: 2;
}

/* --- WPBakery custom-heading visibility ----------------------- */
/* OneUp's wpb_chars/wpb_lines reveal: js_composer.min.css sets
 *   .wpb_animate_when_almost_visible { opacity: 0 }
 * on the H2 itself. The only restore rule
 *   .charsAnimInLong-1.animated .char { opacity: 1 }
 * targets char children — never the parent. So when the scroll-trigger
 * JS adds .wpb_start_animation and .animated, the chars become visible
 * but the H2 stays at opacity 0 and the whole heading is invisible.
 * Restore parent opacity once either marker class is present.
 *
 * The companion font-size:0 collapse is handled at the source via
 * `pre_option_oneup_h{2,3}_size{,_tablet,_mobile}` filters in
 * branding.php — no CSS override needed. */
.wpb_animate_when_almost_visible.wpb_start_animation,
.wpb_animate_when_almost_visible.animated {
	opacity: 1;
}