/* ==========================================================================
   Site-wide accessibility corrections
   Loaded last from head.php so these override the rules they correct.
   Every contrast value below was computed against WCAG 2.1; the ratio for
   each pair is noted beside it.
   ========================================================================== */

/* ==========================================================================
   1. Skip link
   The navigation carries ~40 links before the content starts. Keyboard and
   screen-reader users had no way past it.
   ========================================================================== */

/* Hidden by transform rather than by `top`: something in the existing cascade
   pins `top` on this element, and transform also keeps the reveal off the
   layout path. !important guards against the same thing happening again. */
.skip-link {
    position: absolute !important;
    top: 0 !important;
    left: 16px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    background: #094fb7;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .18s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0) !important;
    color: #fff !important;
    text-decoration: none;
    outline: 3px solid #7fd4f2;
    outline-offset: 2px;
}

/* ==========================================================================
   2. Keyboard-operable navigation
   Every dropdown opened on :hover only, so the 28-link OptiML mega-menu, the
   Services menu and the About Us and Events submenus could not be reached
   without a mouse. These mirror the existing :hover rules exactly, adding
   :focus-within so tabbing into a menu opens it.
   ========================================================================== */

/* Both menu patterns are hidden with visibility + opacity + transform: scale(0)
   and revealed on :hover. !important because the hiding rules live in the
   minified core stylesheet and win on ordering otherwise. */
#navbarNav .navbar-links li.navbar-dropdown:focus-within > .sub-menu,
#navbarNav .navbar-links li.navbar-dropdown:focus-within .sub-menu,
#navbarNav .navbar-links .sub-menu .navbar-dropdown:focus-within .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 1 !important;
}

.dropdown-hover:focus-within > .dropdown-menu,
li.navbar-dropdown:focus-within > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 1000 !important;
}

/* A dropdown parent that only opens a submenu is not a destination; make the
   focus ring obvious on the trigger itself. */
#navbarNav .navbar-links a:focus-visible,
#navbarNav .navbar-links [role="button"]:focus-visible,
.header_section a:focus-visible,
.header_section button:focus-visible {
    outline: 3px solid #094fb7;
    outline-offset: 2px;
    border-radius: 3px;
}

/* The two-tone ring below works on the dark header and hero as well, so no
   per-context override is needed any more. */

/* ==========================================================================
   3. Contrast corrections
   Brand hues are preserved wherever possible by darkening the LABEL rather
   than the background, so the orange, cyan and green stay recognisable.
   ========================================================================== */

/* Bootstrap's default primary was never overridden, so every .btn-primary on
   the site rendered #007bff/white = 3.98:1. This is not a brand colour; move
   it to the site palette blue, which also makes the buttons consistent.
   #ffffff on #094fb7 = 7.46:1 */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: #094fb7;
    border-color: #094fb7;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #073d8e;
    border-color: #073d8e;
    color: #fff;
}

.btn-primary:focus-visible {
    outline: 3px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0a1425;
}

/* Header "Contact Us" CTA was #fff on #f0812d = 2.66:1.
   Keeping the orange and darkening the label: #0a1425 on #f0812d = 6.92:1 */
/* #navbarNav .navbar-links li.contact-link a,
.header_section #navbarNav .navbar-links li.contact-link a {
    color: #fff !important;
    font-weight: 600;
}

#navbarNav .navbar-links li.contact-link a:hover,
#navbarNav .navbar-links li.contact-link a:focus {
    color: #0a1425 !important;
} */

/* Quick-contact panel Send button was #fff on #31bae6 = 2.26:1.
   It carries .btn-primary, so the palette-blue rule above already re-grounds
   it: #ffffff on #094fb7 = 7.46:1. Override style.css's cyan background so the
   two rules cannot disagree, and keep the label white. Darkening the label
   here instead would have put #0a1425 on #094fb7 = 2.47:1 — worse than the
   problem being fixed. */
.sidebar-contact .scroll form button,
.sidebar-contact .scroll form button:hover,
.sidebar-contact .scroll form button:focus {
    background-color: #094fb7 !important;
    border-color: #094fb7 !important;
    color: #fff !important;
    font-weight: 600;
}

/* Demo-capture submit was #fff on #16a64a = 3.19:1.
   #0a1425 on #16a64a = 5.78:1

   The dark label only belongs on the green ground style.css gives this button.
   Every current hero submit also carries .btn-primary, which the palette rule
   above re-grounds to #094fb7 - and #0a1425 on #094fb7 is 2.47:1, worse than
   the problem this rule was written to fix. So exclude .btn-primary, which
   keeps its own white label (#ffffff on #094fb7 = 7.46:1) and leaves the green
   variant covered. The weight applies either way. */
form.theme-form-submit button,
form.theme-form-submit button:hover,
form.theme-form-submit button:focus,
form.theme-form-submit button:active {
    font-weight: 600;
}

form.theme-form-submit button:not(.btn-primary),
form.theme-form-submit button:not(.btn-primary):hover,
form.theme-form-submit button:not(.btn-primary):focus,
form.theme-form-submit button:not(.btn-primary):active {
    color: #0a1425 !important;
}

/* The platform hero and CTA buttons run an orange-to-red gradient with white
   text. Dark text passes on the orange stop but fails on the red (4.04:1), so
   here the gradient itself has to deepen.
   #ffffff on #b15f21 = 4.64:1, on #c9202e = 5.63:1 */
.pf_hero .theme-form-submit .btn-primary,
.pf_cta_btn {
    background: linear-gradient(135deg, #b15f21 0%, #c9202e 100%);
    color: #fff !important;
}

.pf_hero .theme-form-submit .btn-primary:hover,
.pf_hero .theme-form-submit .btn-primary:focus,
.pf_cta_btn:hover,
.pf_cta_btn:focus {
    background: linear-gradient(135deg, #9c521c 0%, #b01c28 100%);
    color: #fff !important;
}

/* ==========================================================================
   4. Focus visibility everywhere else
   ========================================================================== */

/* A two-tone ring: white immediately around the element, then dark outside it.
   No single colour clears WCAG 2.2's 3:1 against every ground this site uses -
   #7fd4f2 measures 1.67:1 on the white page, #094fb7 measures 1.93:1 on the
   dark hero and 1.00:1 on a blue button. With two tones one half always
   contrasts, whatever is behind. The transparent outline is there so the ring
   survives Windows forced-colors mode, which discards box-shadow. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0a1425;
}

/* main receives focus from the skip link; it should not draw a ring around the
   whole page when it does. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* ==========================================================================
   6. Quick-contact panel status message
   The "Connect Now" form previously gave no feedback at all because it had no
   handler. Now it reports what happened.
   ========================================================================== */

.sidebar-contact-status {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #0a1425;
}

.sidebar-contact-status.is-error {
    color: #8a1c24;
}

.sidebar-contact-status a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   7. Off-canvas drawer: remove it from the tab order while closed
   The closed drawer is pushed off-screen with transform: translateX(-390px)
   but stays visibility:visible, so its 47 links remain focusable — a keyboard
   user tabs through 47 invisible destinations (of 177 on the page) before
   reaching any content, and a screen reader reads them all.

   visibility is animatable, so the slide still works: it flips to hidden only
   after the 0.5s slide-out finishes, and back to visible instantly on open.
   ========================================================================== */

#sidebar {
    visibility: hidden;
    transition: transform .5s ease-in-out, visibility 0s linear .5s;
}

#sidebar.active {
    visibility: visible;
    transition: transform .5s ease-in-out, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #sidebar.active {
        transition: none;
    }
}

/* ==========================================================================
   8. Stop iOS Safari zooming into form fields
   Safari on iOS zooms the viewport whenever a focused control has a font
   smaller than 16px. The lead-capture fields are 13px, so tapping any of them
   zooms the page and the visitor has to pinch back out mid-form.

   Applied at mobile widths only, so the desktop design is unchanged. The
   fields are 46px tall, so 16px text still fits comfortably.
   ========================================================================== */

@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea,
    .form-control,
    .custom-select {
        font-size: 16px !important;
    }
}

/* Buttons that carry a decorative box-shadow out-specify the generic
   :focus-visible rule above (e.g. .pf_hero .theme-form-submit .btn-primary is
   0,3,0 against 0,2,0), so their focus ring never appeared. Restate it for
   those cases; !important is warranted because the decorative shadow is set on
   the element's own resting state and will always win otherwise. */
.pf_hero .theme-form-submit .btn-primary:focus-visible,
.pf_cta_btn:focus-visible,
form.theme-form-submit button:focus-visible,
.hp_platform_btn:focus-visible,
.sidebar-contact .scroll form button:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0a1425 !important;
    outline: 3px solid transparent;
    outline-offset: 2px;
}

/* ==========================================================================
   9. Reduced motion, site-wide
   AOS scroll-reveal animates 24-31 elements per page. The guard previously
   lived in platform-sections.css, which only loads on the CX Platform pages,
   so the other ~35 routes animated regardless of the user's setting.

   AOS starts elements at opacity:0 and reveals them on scroll, so simply
   disabling the transition would leave content invisible - the elements must
   be forced visible, not just un-animated.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ==========================================================================
   10. Touch target sizes on mobile
   Measured at 386px wide: the hamburger that opens the navigation drawer is
   40x34px, its sibling button 40x34, and the back-to-top button 40x40 - all
   under the 44px minimum, and the hamburger is the single most-tapped control
   on a phone.

   Sized with padding rather than width/height so the icon glyph inside keeps
   its current size and nothing shifts visually beyond the hit area growing.
   ========================================================================== */

@media (max-width: 991px) {
    .header_section .btn-blue,
    .header_section .navbar-toggler,
    #sidebarCollapse,
    .scroll-top,
    #chat-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   11. Contact form: consent checkbox and character counter
   The consent checkbox is `required` and gates the whole lead form, but shipped
   as a 13x13px box - roughly half the 24px minimum target, and the hardest
   control on the page to hit on a phone. The character counter under the
   message box rendered at 11px, below the 11.5px legibility floor.

   1.5rem is the 24px minimum itself, so the box no longer leans on the
   adjacent <label for="flexCheckChecked"> to be reachable. Bootstrap's
   .form-check reserves only 1.25rem of left padding, narrower than the new
   box, so the indent is widened to 2rem in step - that keeps the same ~8px
   gap between box and label text and the label does not reflow at any width.

   Scoped to #contactForm, which exists only on the contact page.
   ========================================================================== */

#contactForm .privacy-check {
    padding-left: 2rem;
}

#contactForm .privacy-check .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: -2rem;
    margin-top: .125rem;
}

#contactForm #wordCount {
    font-size: 12px;
}

/* ==========================================================================
   12. Cookie policy heading levels
   The five cookie-type headings under the h3 "Types of Cookies We Use" were
   h5, skipping h4 and breaking the document outline for screen-reader
   navigation. They are now h4. Above 1024px an h4 would render at Bootstrap's
   24px rather than the h5's 20px, so pin the old size back and keep the tag
   change purely semantic; at 1024px and below the shared .section_sub_heading
   rules already govern both tags identically, so no override is needed there.
   ========================================================================== */

@media only screen and (min-width: 1025px) {
    section.privacy_policy .Theme_white_page h4.section_sub_heading {
        font-size: 20px;
    }
}

/* ==========================================================================
   13. Keep intrinsic-size attributes from fixing the rendered height
   Images on the contact and fun-at-work pages now carry width/height
   attributes so the browser can reserve their space before they decode. Those
   attributes are presentational hints, though: where the CSS sizes an image
   fluidly and says nothing about height, the height hint wins and the picture
   stretches (the 1140x449 carousel slides rendered 360x449 at 390px wide).
   height:auto hands the height back to the attribute-derived aspect ratio,
   which is what these images rendered at before.

   Both selectors are gated on [width][height], so they reach only the images
   that were given the attributes - nothing else on the site carries them.
   ========================================================================== */

.single_service_img_box img[width][height],
img.w-100[width][height] {
    height: auto;
}

/* ==========================================================================
   14. Fun-at-work feedback monograms
   All five quotes in the feedback carousel pointed at the same generic
   clip-art avatar, so three differently named people showed the identical
   grey-suit illustration side by side. The picture carried no information, so
   the avatar is now an initial-letter monogram in brand blue: unique per
   person and consistent with the rest of the page's palette.

   Scoped to the feedback carousel - .feecback-img exists only on
   php-fun-at-work.php, and the .feedback-monogram modifier reaches only the
   five divs that replaced an <img>. The base .feecback-img rules (60px width,
   white ring, drop shadow, top margin) still apply; only the height and the
   centring of the letters are added here, because those came from the image.
   ========================================================================== */

section.customer-feedback .feedback-box .feecback-img.feedback-monogram {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #094fb7;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .5px;
    user-select: none;
}

/* ==========================================================================
   15. Intro paragraphs set in a label style
   .section_sub_heading is a one-line label style - 20px at 24px leading,
   dropping to 19px at 1024px and below - and the platform pages were using it
   for the multi-sentence paragraph that introduces each section. At 1440 that
   put 60-word paragraphs across the full 1110px container in type larger and
   more tightly leaded than the 16px card copy beneath them; at 390 it left
   only a 5px step between a section heading and the paragraph under it.

   .pf_section_intro is a body variant of the same class: it is a new class
   name, so it reaches nothing but the blocks it is added to, and
   .section_sub_heading keeps its label sizing everywhere else. The
   .single_service_frame ancestor is carried in the selector only to outrank
   .single_service_frame .section_sub_heading, which is where the 20px comes
   from.
   ========================================================================== */

.single_service_frame .section_sub_heading.pf_section_intro {
    max-width: 68ch;
    /* the blocks carry Bootstrap's .m-0, which is !important, so the centring
       margins have to be too; the zeroed top and bottom margins are kept. */
    margin-right: auto !important;
    margin-left: auto !important;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
}