/**
 * Horizons Hello — components.css
 * `.hz-btn` (the pill button used in sidebars/interior CTAs — the header CTA
 * "tab" and Elementor-widget buttons are NOT this component, see layout.css
 * and the kit respectively), Gravity Forms restyle, and the sanctioned
 * `.hz-*` utility set patterns may reference (Design System Spec §8).
 */

:root {
	--hz-navy: #0b087b;
	--hz-indigo: #4440cc;
	--hz-orange: #f77c07;
	--hz-orange-hover: #dc6b04;
	--hz-cream: #faf9f6;
	--hz-lightgray: #ebebeb;
	--hz-white: #fff;
}

/* .hz-btn — pill radius 40px, padding 20px, uppercase, 1.5px tracking (B-06/B-07).
   Weight 600 / 15px matches the kit's button typography (Poppins 600 15px) so PHP-rendered
   buttons (sidebar "Get In Touch", any hz_button() call) and Elementor button widgets render
   identically (fix round 1, item f / O3 I-10).

   FIX ROUND 2 — Elementor puts a button widget's `_css_classes` on the WRAPPER div
   (`.elementor-widget.hz-btn`), not on the `<a class="elementor-button">` it renders
   inside that wrapper. The old single `.hz-btn{...}` rule therefore painted the
   wrapper itself as a full-width colored box around the kit's own (correctly)
   styled anchor. Every rule below now has two forms: `a.hz-btn...` for
   hz_button()'s own anchor (the class sits directly on the `<a>` there), and
   `.elementor-widget.hz-btn... .elementor-button` for the Elementor-widget case —
   3 classes (0-3-0) so it reliably beats the kit's own
   `.elementor-kit-248 .elementor-button` rule (0-2-0) regardless of stylesheet
   order, not just because hz-components loads after the kit CSS (see item g). */
a.hz-btn,
.elementor-widget.hz-btn .elementor-button {
	display: inline-block;
	border: none;
	border-radius: 40px;
	padding: 20px;
	background: var(--hz-navy);
	color: var(--hz-white);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	font-size: 15px;
	transition: background-color 200ms ease-in-out;
}

/* Neutralize the wrapper div itself — it must never again paint a second box
   around the real, now-correctly-styled anchor. */
.elementor-widget.hz-btn {
	background: none;
	padding: 0;
	border-radius: 0;
	width: auto;
}

a.hz-btn:hover, a.hz-btn:focus-visible,
.elementor-widget.hz-btn .elementor-button:hover, .elementor-widget.hz-btn .elementor-button:focus-visible {
	text-decoration: none;
}

a.hz-btn--navy:hover, a.hz-btn--navy:focus-visible,
.elementor-widget.hz-btn--navy .elementor-button:hover, .elementor-widget.hz-btn--navy .elementor-button:focus-visible {
	background: var(--hz-indigo);
}

a.hz-btn--indigo, .elementor-widget.hz-btn--indigo .elementor-button { background: var(--hz-indigo); }
a.hz-btn--indigo:hover, a.hz-btn--indigo:focus-visible,
.elementor-widget.hz-btn--indigo .elementor-button:hover, .elementor-widget.hz-btn--indigo .elementor-button:focus-visible {
	background: var(--hz-navy);
}

/* Orange button: NAVY text, never white (Design System Spec §6 — white-on-orange
   is 2.68:1, fails AA at every size; navy-on-orange is 5.87:1). Hover keeps navy text. */
a.hz-btn--orange, .elementor-widget.hz-btn--orange .elementor-button {
	background: var(--hz-orange);
	color: var(--hz-navy);
}
a.hz-btn--orange:hover, a.hz-btn--orange:focus-visible,
.elementor-widget.hz-btn--orange .elementor-button:hover, .elementor-widget.hz-btn--orange .elementor-button:focus-visible {
	background: var(--hz-orange-hover);
	color: var(--hz-navy);
}

a.hz-btn:focus-visible, .elementor-widget.hz-btn .elementor-button:focus-visible {
	outline: 3px solid var(--hz-navy);
	outline-offset: 2px;
}

/* A button placed on a navy/indigo/band-bgimage surface needs a white ring
   instead (navy-on-navy would be invisible) — apply this modifier there. */
a.hz-btn--on-dark:focus-visible,
.elementor-widget.hz-btn--on-dark .elementor-button:focus-visible {
	outline-color: var(--hz-white);
}

/* Hero buttons stack narrow by default (content-width sizing); prod shows both
   at a fixed minimum width. */
.hz-hero-home .elementor-button { min-width: 250px; }

/* Gravity Forms restyle — covers both legacy markup (GF1, `.gform_legacy_markup_wrapper`,
   C-05) and gravity-theme markup (GF2, `.gravity-theme` — NOT `.gform-theme`, verified
   against the actual rendered wrapper class in fix round 1). Both markups render the submit
   as `<button class="gform_button button">` in this Gravity Forms version, not
   `<input type="submit">`, so `.gform_button` (a class, matching either tag) is the
   selector that actually works — confirmed by curling /about-us/ and /career-opportunities/. */
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label { color: var(--hz-navy); font-weight: 600; }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select {
	border-radius: 4px;
	border: 1px solid #ccc;
}

/* Styled like .hz-btn (navy pill, white text) — fix round 1 item j / gate observation.
   Live's `&.gform_button{border-radius:0}` is a deliberate modernization deviation: this
   rebuild makes every button on the site the same pill shape, GF included. */
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_footer input[type="submit"] {
	border: none;
	border-radius: 40px;
	padding: 20px;
	background: var(--hz-navy);
	color: var(--hz-white);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 200ms ease-in-out;
}

.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
	background: var(--hz-indigo);
}

/* Address block utility (footer + both sidebar variants share this) */
.hz-address-block__office { margin-bottom: 16px; }
.hz-address-block__office:last-child { margin-bottom: 0; }

/* Sanctioned pattern utilities (Design System Spec §8) — the only `.hz-*`
   classes elementor/patterns/*.json may reference. Added here once, not
   duplicated per-pattern, because Elementor Free has no per-element CSS. */
.hz-band--cream { background: var(--hz-cream); }
.hz-band--lightgray { background: var(--hz-lightgray); }
.hz-text--center { text-align: center; }

.hz-list { list-style: none; margin: 0; padding: 0; }
.hz-list li { margin-bottom: 8px; }
.hz-list--1col { column-count: 1; }
.hz-list--2col { column-count: 2; column-gap: 40px; }

/* Pattern layout widths from fix round 2 — REMOVED in fix round 3 (dead code). Root
   cause traced by the pattern author to `flex_wrap: wrap` + a 40px gap on two children
   summing to exactly 100% forcing a wrap regardless of width CSS; patterns now use
   Elementor's own registered, responsive `width`/`width_mobile` Container controls
   instead (`content_width: full`), which set the `--width` custom property Elementor's
   own `.e-con` rule consumes — no CSS-specificity/load-order dependency at all. These
   `.e-con` width rules never matched anything as of this fix (verified: hero-home.json,
   cols-two-lists.json, image-row-2up.json, image-row-3up.json all set `width` in JSON
   now) and are gone; the `hz-hero-home__text` etc. classes stay in the pattern markup
   for styling hooks (e.g. `.hz-hero-home .elementor-button` above) but no longer carry
   a width rule here.

   Text-editor body-copy fixes (fix round 3, @O2 CSS requests, both a11y SERIOUS): */

/* Item 4 — inline links in running body text are indigo #4440CC on body-grey #545454,
   a 1.02:1 hue-only distinction (axe link-in-text-block, WCAG 1.4.1). No palette pairing
   reaches 3:1 here, so the fix is a non-colour cue.

   FIX ROUND 4, item 3 (@O2b final QA pass) — `.hz-sidebar-card a` also matched the orange
   "Get In Touch" button (an `<a class="hz-btn hz-btn--orange">` inside the card), underlining
   a pill that spec §4 keeps undecorated. "Never selecting them" (round 3's assumption) was
   true for the other 3 selectors but not this one — added an explicit `:not(.hz-btn)
   :not(.elementor-button)` guard to all 4 selectors so the exclusion holds regardless of
   which body-copy container a button ever ends up inside. */
.hz-shell__main p a:not(.hz-btn):not(.elementor-button),
.elementor-widget-text-editor a:not(.hz-btn):not(.elementor-button),
.hz-footer__contact a:not(.hz-btn):not(.elementor-button),
.hz-sidebar-card a:not(.hz-btn):not(.elementor-button) {
	text-decoration: underline;
}

/* Item 7 — the §3 spacing scale calls for a 16px gap between body list items; rendered
   `<li>`s had no vertical margin at all (line-height only). Scoped to body-copy lists,
   not `.hz-list` (icon-list / sidebar utility, unaffected) or `.hz-nav`. */
.elementor-widget-text-editor ul li + li,
.elementor-widget-text-editor ol li + li,
.hz-shell__main ul li + li,
.hz-shell__main ol li + li {
	margin-top: 16px;
}

/* Callout-blue pattern: links inherit the kit's indigo link color (#4440CC)
   which is invisible on the indigo background. Force white + underline. */
.hz-callout-blue a { color: var(--hz-white); text-decoration: underline; }
.hz-callout-blue a:hover { opacity: 0.85; }

@media (max-width: 767px) {
	.hz-list--2col { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
	a.hz-btn,
	.elementor-widget.hz-btn .elementor-button,
	.gform_wrapper .gform_footer .gform_button {
		transition: none;
	}
}