/*!
 * OnTrack Web Solutions - Batch 1O, Part 2
 * Pre-migration accessibility, contrast and interaction-resilience remediation.
 * -------------------------------------------------------------------------
 * Loaded site-wide by wp-content/mu-plugins/otw-batch1o-accessibility.php,
 * because the footer email link (Part D) appears on every page. Every rule
 * below is nevertheless scoped to the exact elements being corrected.
 *
 * This file is ADDITIVE. It does not modify, replace or duplicate Batch 1K,
 * the Elementor global kit (kit 6), the header template (27) or the footer
 * template (28). No Batch 1K declaration is overridden other than the two
 * focus-ring colours explicitly authorised in Part E.
 *
 * No !important is used anywhere in this file.
 *
 * Batch 1O Part 2 scope, as authorised:
 *   B - HP-1  Our Work 320px horizontal overflow
 *   C - HP-2  gold heading text contrast on light backgrounds
 *   D - HP-3  footer email contrast on the black footer
 *   E - HP-4  focus-ring contrast on light-background controls
 */


/* =========================================================================
   PART B - HP-1: Our Work horizontal overflow at 320px
   -------------------------------------------------------------------------
   Measured before: at a 320px viewport, page 17 reported
   document.documentElement.scrollWidth = 344 (24px of horizontal scroll).

   Traced to two leaf elements whose content box exceeded their layout box
   because the project names are single unbreakable tokens:

     H2 "FirstShotTraining.com"   265px of content in a 186px box (left 67 -> right edge 332)
     H2 "FaithFirstFirearms.com"  277px of content in a 186px box (left 67 -> right edge 344)

   The .ot-pf-url domain labels inside .ot-pf-bar overflow their own boxes
   too (214/184, 219/184, 208/184) and are included here as instructed,
   although their right edges stop short of the viewport.

   Fix: grant a break opportunity. `anywhere` is used rather than
   `break-word` because these elements sit inside flex containers -
   `anywhere` also reduces the intrinsic min-content width, which is what
   actually lets the container shrink. It introduces a break ONLY when the
   available width leaves no alternative, so normal word breaking is
   preserved at every wider viewport.

   Nothing is truncated, hidden, abbreviated or renamed. Font size, weight,
   colour, spacing, gallery dimensions and card structure are unchanged.
   ========================================================================= */

body.page-id-17 .elementor-widget-html h2,
body.page-id-17 .ot-pf-bar .ot-pf-url {
	overflow-wrap: anywhere;
}


/* =========================================================================
   PART C - HP-2: gold heading text contrast on light backgrounds
   -------------------------------------------------------------------------
   Root cause: Elementor's global heading rule

     .elementor-widget-heading .elementor-heading-title
         color: var( --e-global-color-primary )      [resolves to #DCA433]

   Any heading widget WITHOUT a per-widget colour override falls through to
   the brand gold. A sweep of all eight public pages found exactly nine such
   headings. All nine fail. There are ZERO gold headings on dark backgrounds
   anywhere on the site, so no passing case is affected by this correction.

   Each is corrected individually by its Elementor element id so the change
   is provably limited to the nine measured failures. The global palette,
   the kit, and every decorative gold accent are left untouched.

     #DCA433 on #FFFFFF = 2.23:1   ->   #916312 on #FFFFFF = 5.25:1
     #DCA433 on #F7F8FA = 2.10:1   ->   #916312 on #F7F8FA = 4.94:1

   All nine are 38px/700, which is WCAG "large text" (3:1 required). The
   replacement clears 3:1 with a wide margin and also clears the stricter
   4.5:1 normal-text threshold, so the headings stay compliant even if their
   size is reduced later.

   Typography, font size, weight, letter-spacing and spacing are unchanged -
   only the colour declaration is added.
   ========================================================================= */

/* Homepage - page 14 */
.elementor-14 .elementor-element-58af959 .elementor-heading-title,
.elementor-14 .elementor-element-269ae03 .elementor-heading-title,
.elementor-14 .elementor-element-c123a07 .elementor-heading-title,
/* Services - page 15 */
.elementor-15 .elementor-element-svcfaqe2 .elementor-heading-title,
/* About - page 18 */
.elementor-18 .elementor-element-142131d .elementor-heading-title,
.elementor-18 .elementor-element-c74877f .elementor-heading-title,
.elementor-18 .elementor-element-b968e81 .elementor-heading-title,
.elementor-18 .elementor-element-abwhoe2 .elementor-heading-title,
/* Request a Consultation - page 19 */
.elementor-19 .elementor-element-9daaaa5 .elementor-heading-title {
	color: #916312;
}


/* =========================================================================
   PART D - HP-3: footer email contrast on the black footer
   -------------------------------------------------------------------------
   a.ot-foot-email inherits its resting colour from the kit link rule
   `.elementor-kit-6 a { color:#916312 }`. That darker gold is correct on
   light surfaces but sits on the #000000 footer here:

     #916312 on #000000 = 4.00:1   (16px/600 normal text needs 4.5:1)  FAIL
     #DCA433 on #000000 = 9.44:1                                       PASS

   This is the mirror image of Part C: the light gold belongs on dark, the
   dark gold on light.

   Scoped to the resting link state only, via :link and :visited. That gives
   specificity (0,2,1), which cleanly beats the kit rule's (0,1,1) without
   !important, and structurally cannot affect the hover state.

   Deliberately preserved and untouched:
     - hover colour            .ot-foot-email:hover { color:#fff !important }
     - the site-wide focus ring on the link
     - link text, mailto destination, accessible name and tab order
     - font size, font weight
     - the Batch 1N Part 3A.1 `overflow-wrap: anywhere` wrapping behaviour
   Footer template 28 is NOT modified - this is achieved entirely from this
   additive stylesheet.
   ========================================================================= */

a.ot-foot-email:link,
a.ot-foot-email:visited {
	color: #DCA433;
}


/* =========================================================================
   PART E - HP-4: focus-ring contrast on light-background controls
   -------------------------------------------------------------------------
   Batch 1K gives five controls a #DCA433 focus ring. Three of them sit on
   dark surfaces where that gold measures 9.44:1 and passes comfortably:

     .otw-gal__track   .ot-pf-link   .ot-live      -> LEFT UNCHANGED

   Two sit on light surfaces, where the same gold measures 2.23:1 against
   the 3:1 required by SC 1.4.11 Non-text Contrast:

     .otw-lcbtn  (on the #F7F8FA hero)      2.23:1  FAIL
     .otw-more   (on white cards)           2.23:1  FAIL

   Corrected to #B98220, the same colour the passing site-wide kit focus
   ring already uses:

     #B98220 on #FFFFFF = 3.35:1   PASS
     #B98220 on #F7F8FA = 3.15:1   PASS

   ONLY `outline-color` is declared. Outline width (3px) and the existing
   per-control outline-offset (3px on .otw-lcbtn, 2px on .otw-more) are
   inherited unchanged from Batch 1K. No native outline is removed and
   `outline: none` is never used.

   A type selector is included to raise specificity to (0,2,1) so the
   correction applies regardless of stylesheet load order.
   ========================================================================= */

button.otw-lcbtn:focus-visible,
.otw-js .otw-lcbtn:focus-visible {
	outline-color: #B98220;
}

button.otw-more:focus-visible,
.otw-js .otw-more:focus-visible {
	outline-color: #B98220;
}


/* =========================================================================
   PART 2.1 / BATCH 1O PART 3 - lifecycle step-number contrast (SC 1.4.3)
   -------------------------------------------------------------------------
   The digits 1-5 inside span.ot-hv-node in the homepage lifecycle panel are
   TEXT, not decoration. Elementor Kit 6 renders them at:

     .ot-hv-node { background:#fff; color:#B98220; font-size:15px;
                   font-weight:600; }

   15px / 600 is normal-size text under WCAG 2.1, so SC 1.4.3 requires 4.5:1.
   #B98220 on the node's own #fff background measures 3.35:1 -> FAIL.
   #916312 on #fff measures 5.25:1 -> PASS.

   Scope is deliberately minimal:
     - ONLY `color` is declared. background, border, border-radius, flex
       basis, height, border-radius, font-family, font-size, font-weight,
       display, alignment, spacing and the otHvFill animation are untouched.
     - Specificity is (0,1,0), identical to the Kit 6 rule it corrects.
       This stylesheet loads AFTER post-6.css, so source order decides.
     - `.ot-hv-node.is-final` (the gold waypoint glyph) is specificity
       (0,2,0) and therefore UNAFFECTED - the waypoint keeps its #fff glyph
       on the #DCA433 fill exactly as before.
     - The step labels (.ot-hv-txt b / .ot-hv-txt i) are not selected.
   ========================================================================= */

.ot-hv-node {
	color: #916312;
}


/* =====================================================================
   BATCH 1O - PART 3 FINAL PRE-CLONE REFINEMENT
   Lifecycle CTA: reposition, enlarge, centre.

   Additive only. Batch 1K is NOT modified. The button element itself is
   still created by Batch 1K's initLifecycle(); the Batch 1O Part 3 Final
   script moves that same node (never a clone) so it becomes the panel's
   immediately preceding sibling, and adds the .otw-lcbtn--cta hook these
   rules target.

   Specificity note: Batch 1K declares .otw-lcbtn with !important, including
   inside a max-width media query (media queries add no specificity). These
   rules therefore use the two-class selector .otw-lcbtn.otw-lcbtn--cta
   (0,2,0) with !important, which outranks Batch 1K's (0,1,0) !important on
   every property overridden below. Batch 1K keeps every property not listed.

   Why display:block and not flex. Batch 1K lays the button out as a flex
   row of [glyph][label]. Centred and widened, a wrapping label becomes a
   full-width flex item, which strands the glyph against the left edge.
   Switching to normal inline flow lets the glyph and the label centre and
   wrap together as one continuous text run, so the glyph always stays
   attached to the start of the label at every width. No element is added,
   removed or reordered to achieve this.

   Touch target: vertical padding alone yields ~64px on one line and ~85px
   on two, so the comfortable minimum is met without relying on min-height,
   which would top-bias the text in normal flow.

   Deliberately NOT overridden, so they remain exactly as approved:
     - colour #916312 on background #fff (5.25:1, passes AA normal text)
     - the :focus-visible treatment (Kit 6's button:focus-visible !important
       wins the cascade at 3px #B98220, per Part 3 section 10)
     - the transition, hover and active interaction, and Batch 1K's
       reduced-motion override of them - no new animation is introduced
     - the existing glyph, which is pre-existing to this button's treatment
       and is not a newly added icon
   ===================================================================== */

.otw-lcbtn.otw-lcbtn--cta {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto 20px !important;
    padding: 22px 30px !important;
    min-height: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    letter-spacing: 1.4px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    border-width: 2px !important;
    border-color: #DCA433 !important;
    box-shadow: 0 6px 20px rgba(184, 130, 32, .16) !important;
}

.otw-lcbtn.otw-lcbtn--cta .ot-hv-cross {
    display: inline !important;
    margin-right: 10px !important;
    font-size: 17px !important;
}

.otw-lcbtn.otw-lcbtn--cta .otw-lcbtn__label {
    display: inline !important;
}

/* Tablet: keep the CTA generous but allow a little more width before the
   label wraps. Overrides Batch 1K's max-width:1024px rule, which sets
   text-align:left and a smaller type size. */
@media (max-width: 1024px) {
    .otw-lcbtn.otw-lcbtn--cta {
        max-width: 560px !important;
        padding: 21px 26px !important;
        font-size: 13px !important;
        letter-spacing: 1.3px !important;
        text-align: center !important;
    }
}

/* Mobile: use the available content width with comfortable side margins. */
@media (max-width: 767px) {
    .otw-lcbtn.otw-lcbtn--cta {
        width: auto !important;
        max-width: none !important;
        margin: 0 6px 18px !important;
        padding: 20px 18px !important;
        font-size: 13px !important;
        letter-spacing: 1.2px !important;
    }
}

/* Very narrow screens: hold the label complete and let it wrap cleanly.
   Padding tightens so the text box stays comfortable; type is held at 12px
   and is not reduced further to force the label onto fewer lines. */
@media (max-width: 400px) {
    .otw-lcbtn.otw-lcbtn--cta {
        margin: 0 4px 16px !important;
        padding: 18px 14px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
}