/* ==========================================================================
   candoor-a11y.css - accessibility and interaction-state layer for the Blade
   tier (the public marketing site and the admin sign-in / password-recovery
   pages).

   WHY A SEPARATE SHEET. The marketing styles live in per-page inline <style>
   blocks (resources/views/userLayout/includes/css.blade.php and
   resources/views/UserPanel/pages/<page>/css.blade.php), five of which are
   near-duplicates of one another, and the admin tier loads the vendor theme
   (public/assets/css/style.css, ~940 KB, third party). Rules that have to hold
   on every page belong in one place rather than pasted five times, and the
   vendor theme must not be edited at all - so anything this sheet has to beat
   in style.css is overridden here with a scoped selector and named below.

   LOAD ORDER IS LOAD-BEARING. Every layout links this file AFTER its own
   includes and after @yield('style'), so an equal-specificity rule here wins on
   source order. Where a declaration must beat an `!important` in the vendor
   theme, that is called out on the rule itself.

   SCOPES. `body.candoor-marketing` = the five public pages served through
   resources/views/userLayout/app.blade.php. `body.candoor-auth` = the admin
   sign-in page, the e-mail-verification notice and the three account-recovery
   views served through resources/views/AdminPanel/layouts/app.blade.php. The
   authenticated admin panel (resources/views/layout/app.blade.php) does not
   load this sheet.

   COLOURS. Every value below is either an existing Candoor palette token or the
   nearest darkening of one that reaches the WCAG 2.1 AA ratio named beside it.
   Ratios are computed against the surface the element actually sits on.
   ========================================================================== */

:root {
    /* #458DFC is the brand blue. It carries only 3.24:1 against white, so it
       cannot hold white text (AA wants 4.5:1 for text below 18.66px bold) or be
       used as text on white. This is the darkened member of the same hue used
       wherever the blue has to carry text: 5.08:1 against white. */
    --candoor-blue-accessible: #2e6bd0;
    /* Pressed state of the above: 7.06:1 against white, and visibly darker than
       the hover state so a press is distinguishable from a hover. */
    --candoor-blue-pressed: #1f4e9c;
    /* Hover state: between the two, 6.02:1 against white. */
    --candoor-blue-hover: #2659b0;
    /* The theme's --theme-deafult (#7366ff) carries 4.14:1 against white, which
       is below AA for the 14px button and link text the admin pages render in
       it. 4.83:1 against white, same hue family. */
    --candoor-purple-accessible: #6a5ceb;
    --candoor-purple-hover: #5748d8;
    --candoor-purple-pressed: #4536bb;
    /* Existing dark tokens, reused for focus rings and control chrome:
       #1d2939 is the marketing footer background (14.6:1 on white),
       #1f3f65 is the carousel dot colour (10.6:1 against white). */
    --candoor-ink: #1d2939;
    --candoor-navy: #1f3f65;
    /* Focus indicator, built as a dark ring wrapped in a white halo. A single
       colour cannot satisfy the 3:1 non-text minimum on every surface this tier
       paints (white cards, the #f9fafb band, the #458DFC/#67c3f3 testimonial
       gradient, the #295597 About hero, the #3771ca partner band and the
       #1d2939 footer), so both are drawn: the ink ring carries the contrast on
       light surfaces (14.6:1 on white) and the halo carries it on dark ones
       (14.6:1 against #1d2939, 4.8:1 against #3771ca, 7.4:1 against #295597,
       3.2:1 against #458DFC). The outline is painted over the halo, giving a
       white / dark / white sandwich that is visible against anything. */
    --candoor-focus-ring: #1d2939;
    --candoor-focus-halo: #ffffff;
}

/* --------------------------------------------------------------------------
   1. Bypass block ("skip to main content")
   Every Blade page now opens with one of these as the first focusable element
   and carries exactly one <main id="main-content">. The link is off-screen
   until focused, then slides into the top-left corner - so it is available to
   a keyboard user and invisible to everyone else.
   -------------------------------------------------------------------------- */
.candoor-skip-link {
    position: absolute;
    top: -80px;
    left: 8px;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    background-color: var(--candoor-ink);
    color: #ffffff;          /* 14.6:1 on #1d2939 */
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    border: 2px solid #ffffff;
    border-radius: 0 0 8px 8px;
    transition: top 120ms ease-in-out;
}

.candoor-skip-link:focus,
.candoor-skip-link:focus-visible {
    top: 0;
    color: #ffffff;
    /* Inverse of the sandwich used elsewhere: the chip itself is ink, so the
       inner ring is white and the outer halo is ink. */
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--candoor-focus-ring);
}

/* The slide is decorative; a reduced-motion request gets the same two positions
   without the animation. */
@media (prefers-reduced-motion: reduce) {
    .candoor-skip-link {
        transition: none;
    }
}

/* The skip target is given tabindex="-1" in the markup so following the link
   moves focus into the region. That makes <main> focusable, and a focusable
   container must not paint a ring of its own when it receives programmatic
   focus - the page content below it is what the user is now reading. */
main#main-content:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   2. Focus indicators (WCAG 2.4.7 / 1.4.11)

   Three different things were removing them:
     - the marketing FAQ: `.accordion-button:focus{box-shadow:none}` in
       UserPanel/pages/home/css.blade.php and .../advisor/css.blade.php, which
       deletes the Bootstrap 5 accordion indicator (a box-shadow) and puts
       nothing in its place;
     - the admin tier: `button:focus{outline:none !important}` and
       `.btn:focus{box-shadow:none !important}` in public/assets/css/style.css
       (vendor theme, not editable here) - which is why the two rules below
       carry `!important`; they are the only `!important`s in this sheet;
     - the Owl controls, which had no focus style because they were not
       focusable at all until the script partial gave them a tab stop.

   `:focus-visible` rather than `:focus` on purpose: a mouse click on the
   accordion or a submit button keeps the quiet appearance the design intends,
   while every keyboard focus paints the ring. The indicator itself is the
   ink-ring + white-halo sandwich described at the top of this file, so it is
   visible on the white cards, the grey band, the blue gradient and the navy
   footer alike.
   -------------------------------------------------------------------------- */
body.candoor-marketing a:focus-visible,
body.candoor-marketing button:focus-visible,
body.candoor-marketing input:focus-visible,
body.candoor-marketing select:focus-visible,
body.candoor-marketing textarea:focus-visible,
body.candoor-marketing [role="button"]:focus-visible,
body.candoor-marketing .accordion-button:focus-visible,
body.candoor-marketing .navbar-toggler:focus-visible,
body.candoor-marketing .signUpEarlyBtn:focus-visible,
body.candoor-marketing .owl-prev:focus-visible,
body.candoor-marketing .owl-next:focus-visible,
body.candoor-marketing .owl-dot:focus-visible {
    outline: 3px solid var(--candoor-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--candoor-focus-halo);
}

/* The dark ring would disappear into the two dark bands, so on those the two
   layers swap: white ring, ink halo. */
body.candoor-marketing .about-header a:focus-visible,
body.candoor-marketing .about-header button:focus-visible,
body.candoor-marketing .about-header .navbar-toggler:focus-visible,
body.candoor-marketing .footerWrap a:focus-visible,
body.candoor-marketing .partnerWrap-1 a:focus-visible {
    outline: 3px solid var(--candoor-focus-halo);
    box-shadow: 0 0 0 6px var(--candoor-focus-ring);
}

/* `!important` is required here and nowhere else: it is what beats
   `button:focus{outline:none !important}` and `.btn:focus{box-shadow:none
   !important}` in the vendor theme this tier loads. */
body.candoor-auth a:focus-visible,
body.candoor-auth button:focus-visible,
body.candoor-auth input:focus-visible,
body.candoor-auth select:focus-visible,
body.candoor-auth textarea:focus-visible,
body.candoor-auth .btn:focus-visible,
body.candoor-auth .btn-link:focus-visible,
body.candoor-auth .form-check-input:focus-visible {
    outline: 3px solid var(--candoor-focus-ring) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--candoor-focus-halo) !important;
}

/* --------------------------------------------------------------------------
   3. Interaction states for the marketing calls to action (WCAG 1.4.1 is not
   the issue here - the issue is that nothing at all changed on hover or press)

   `.signUpEarlyBtn` (the hero CTA), `.log-in-button` and `.Ba-btn` in the
   header, and the two form submit buttons had no `:hover`, `:active` or
   `:focus` rule anywhere in the project, so pointer and keyboard users got no
   feedback that a control had been engaged. Each now has three distinct
   states: hover darkens and lifts the control, press darkens further and
   sinks it with an inset shadow, focus paints the ring from section 2.

   The transform is 1px in each direction - enough to read as a press, small
   enough not to shift the line it sits on - and it is dropped entirely for a
   reduced-motion request.
   -------------------------------------------------------------------------- */
body.candoor-marketing .signUpEarlyBtn,
body.candoor-marketing .log-in-button,
body.candoor-marketing .Ba-btn,
body.candoor-marketing .Ba-btn3,
body.candoor-marketing .contactRightWrap .btn-primary {
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out,
                box-shadow 120ms ease-in-out, transform 120ms ease-in-out;
}

body.candoor-marketing .signUpEarlyBtn:hover,
body.candoor-marketing .contactRightWrap .btn-primary:hover {
    background-color: var(--candoor-blue-hover);
    box-shadow: 0 6px 12px rgba(29, 41, 57, 0.28);
    transform: translateY(-1px);
    color: #ffffff;
}

body.candoor-marketing .signUpEarlyBtn:active,
body.candoor-marketing .contactRightWrap .btn-primary:active {
    background-color: var(--candoor-blue-pressed);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
    color: #ffffff;
}

/* The header's solid-blue "Log In" pill: same three states. */
body.candoor-marketing .log-in-button:hover,
body.candoor-marketing .Ba-btn3:hover {
    background-color: var(--candoor-blue-hover);
    border-color: var(--candoor-blue-hover);
    box-shadow: 0 4px 10px rgba(29, 41, 57, 0.25);
    transform: translateY(-1px);
}

body.candoor-marketing .log-in-button:active,
body.candoor-marketing .Ba-btn3:active {
    background-color: var(--candoor-blue-pressed);
    border-color: var(--candoor-blue-pressed);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
}

/* The header's outlined "Become an Advisor/Advisee" pill inverts on hover
   instead of darkening, because its resting state is already white. White on
   var(--candoor-blue-accessible) is 5.08:1. */
body.candoor-marketing .Ba-btn:hover {
    background-color: var(--candoor-blue-accessible);
    border-color: var(--candoor-blue-accessible);
    color: #ffffff !important;   /* the base rule sets `color: ... !important` */
    box-shadow: 0 4px 10px rgba(29, 41, 57, 0.25);
    transform: translateY(-1px);
}

body.candoor-marketing .Ba-btn:active {
    background-color: var(--candoor-blue-pressed);
    border-color: var(--candoor-blue-pressed);
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
}

/* Hover/press feedback for the admin tier's buttons and its recovery link. */
body.candoor-auth .btn-primary:hover {
    background-color: var(--candoor-purple-hover) !important;
    border-color: var(--candoor-purple-hover) !important;
}

body.candoor-auth .btn-primary:active {
    background-color: var(--candoor-purple-pressed) !important;
    border-color: var(--candoor-purple-pressed) !important;
}

body.candoor-auth .btn-link:hover,
body.candoor-auth .btn-link:active {
    color: var(--candoor-purple-pressed);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    body.candoor-marketing .signUpEarlyBtn,
    body.candoor-marketing .log-in-button,
    body.candoor-marketing .Ba-btn,
    body.candoor-marketing .Ba-btn3,
    body.candoor-marketing .contactRightWrap .btn-primary {
        transition: none;
    }

    body.candoor-marketing .signUpEarlyBtn:hover,
    body.candoor-marketing .signUpEarlyBtn:active,
    body.candoor-marketing .log-in-button:hover,
    body.candoor-marketing .log-in-button:active,
    body.candoor-marketing .Ba-btn:hover,
    body.candoor-marketing .Ba-btn:active,
    body.candoor-marketing .Ba-btn3:hover,
    body.candoor-marketing .Ba-btn3:active,
    body.candoor-marketing .contactRightWrap .btn-primary:hover,
    body.candoor-marketing .contactRightWrap .btn-primary:active {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   4. Contrast (WCAG 1.4.3 text, 1.4.11 non-text)

   Five measured failures, each fixed by darkening the existing token rather
   than by restyling the control. Every ratio below was read back from the live
   computed styles after the change, not calculated from the source values.

     a. The brand-blue buttons - `.signUpEarlyBtn` (18px/600), the header
        `.log-in-button` (16px/500), the outlined `.Ba-btn`'s blue label and the
        two form submit buttons (16-20px) - carried #fff on #458DFC = 3.25:1.
        None of that text is large enough for the 3:1 allowance (AA wants
        18.66px bold or 24px regular), so all of it needs 4.5:1.
        -> --candoor-blue-accessible (#2e6bd0): 5.08:1.
     b. The partner hero subtitle and its mail link: #B5D1FE on #3771CA =
        3.09:1 at 20px/400. The band's own headings are already #fff, so the
        subtitle joins them: 4.79:1 on the unchanged #3771CA band.
     c. The admin `.btn-primary` and `.btn-link` (14px/400) used the theme's
        --theme-deafult #7366ff = 4.14:1 against white.
        -> --candoor-purple-accessible (#6a5ceb): 4.83:1.
     d. The About page's hamburger glyph is Bootstrap's light-navbar SVG, whose
        stroke is rgba(0,0,0,0.55); over that page's #295597 header it composits
        to 2.05:1, below the 3:1 non-text floor. The same SVG with a white
        stroke gives 7.40:1. The data URI is Bootstrap's own, with only the
        stroke colour changed.
     e. That toggler's border was rgba(0,0,0,0.1) over #295597 = 1.15:1.
        -> rgba(255,255,255,0.7) = 4.40:1.

   Scope note: (c) is scoped to `body.candoor-auth`, so the authenticated admin
   panel - which does not load this sheet - keeps the theme's own colour and is
   untouched by this group.
   -------------------------------------------------------------------------- */

/* (a) */
body.candoor-marketing .signUpEarlyBtn,
body.candoor-marketing .log-in-button,
body.candoor-marketing .contactRightWrap .btn-primary {
    background-color: var(--candoor-blue-accessible);
    color: #ffffff;
}

body.candoor-marketing .log-in-button {
    border-color: var(--candoor-blue-accessible);
}

/* The outlined pill keeps its white fill, so it is the label and the border
   that darken. `!important` is not used: the base rule's own
   `color: ... !important` is matched by adding the body scope, which raises
   specificity above it - see the hover rule in section 3 for the one place
   `!important` was unavoidable. */
body.candoor-marketing .Ba-btn {
    color: var(--candoor-blue-accessible) !important;
    border-color: var(--candoor-blue-accessible);
}

/* (b) */
body.candoor-marketing .partnerWrap-1 p,
body.candoor-marketing .partnerWrap-1 p a {
    color: #ffffff;
}

/* The mail link in that paragraph is the same colour as the text around it, so
   it is underlined to stay distinguishable without relying on colour. */
body.candoor-marketing .partnerWrap-1 p a {
    text-decoration: underline;
}

/* (c) */
body.candoor-auth .btn-primary {
    background-color: var(--candoor-purple-accessible) !important;
    border-color: var(--candoor-purple-accessible) !important;
}

body.candoor-auth .btn-link,
body.candoor-auth a {
    color: var(--candoor-purple-accessible);
}

/* (e, all pages) Bootstrap's own toggler border is rgba(0,0,0,0.1), which
   measures 1.25:1 against the white header the other four pages use - the same
   defect the About page showed at 1.14:1, so it is fixed on every page rather
   than only on the one it was measured on. #667085 is the palette's nav-text
   grey: 4.92:1 against white. The About override below raises specificity, so
   the dark header keeps its own value. */
body.candoor-marketing .navbar-toggler {
    border-color: #667085;
}

/* (d) and (e) - scoped to the dark About header only; the white headers on the
   other four pages keep Bootstrap's dark glyph, which measures 4.76:1 there. */
body.candoor-marketing .about-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.7);
}

body.candoor-marketing .about-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   5. Pointer target sizes (WCAG 2.5.5 AAA / 2.5.8 AA)

   Measured before: header nav links 77x40, Owl arrows 50x32, Owl dots 24x20
   (with a 10x10 visible span), text inputs 38px tall, the admin buttons 35px,
   the "Remember Me" checkbox 14x14 and the standalone footer and "Back to sign
   in" links about 20px tall. Each is raised to at least 44x44 with padding or a
   minimum size, so no visible label, colour or copy changes.

   In-sentence links are deliberately NOT enlarged - the "According to LinkedIn"
   link inside the About paragraph and the mail link inside the partner band -
   because 2.5.8 exempts a target whose position is determined by the flow of
   surrounding text, and padding them would break the line rhythm of the
   paragraph they sit in.
   -------------------------------------------------------------------------- */
body.candoor-marketing .navbar-nav .nav-link {
    /* 24px line box + 2 x 10px = 44. The horizontal padding the theme sets is
       left alone so the nav's rhythm is unchanged. */
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
}

body.candoor-marketing .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}

/* The arrows' artwork lives on an inner div (.left--/.right--) that Owl injects
   as `navText`, so the button is centred around it rather than sized by it. */
body.candoor-marketing .owl-prev,
body.candoor-marketing .owl-next,
body.candoor-marketing .owl-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

body.candoor-marketing .form-control,
body.candoor-marketing .form-select,
body.candoor-auth .form-control,
body.candoor-auth .form-select {
    min-height: 44px;
}

/* The recovery and sign-in buttons were 35px tall. `.btn-link` is included
   because the "Forgot Your Password?" control is a link styled as a button and
   sits beside the submit. */
body.candoor-auth .btn,
body.candoor-auth .btn-primary,
body.candoor-auth .btn-link {
    min-height: 44px;
}

/* The checkbox itself grows to 24px - the 2.5.8 floor in its own right, where a
   44px box would dwarf its label - and the label it is associated with, which
   toggles it, carries the full 44px target beside it. The input's top margin
   centres it in that 44px line box: (44 - 24) / 2. */
body.candoor-auth .form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 10px;
}

body.candoor-auth .form-check-label {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
}

/* Standalone links: the footer's destination list and the recovery pages' "Back
   to sign in". Both are on their own line, so a 44px box does not disturb any
   surrounding text. */
body.candoor-marketing .footer-widget-2 ul li a,
body.candoor-auth .candoor-back-link a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 8px;
}

/* The contact page's Subject field is a select2 combobox: the plugin clips the
   native <select> to 1px (hence the `.form-select` rule above cannot reach it)
   and renders its own control, which has to match the 44px minimum of the
   fields it sits between. The inner rendered value box is raised with it so the
   text stays vertically centred. */
body.candoor-marketing .select2-container .select2-selection--single {
    min-height: 44px;
}

body.candoor-marketing .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
}

body.candoor-marketing .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

/* --------------------------------------------------------------------------
   6. Testimonial carousel: control appearance and layout

   Three separate defects, all in the Owl Carousel region on the home and
   advisor pages:

     a. MISMATCHED ARROWS. `.left--` drew images/UserImages/Home/left.png and
        `.right--` drew right.png - and those two files are not a pair: left.png
        is a BLACK arrow (every opaque pixel is #000) and right.png is a WHITE
        one (#fff). On the #67c3f3 -> #458dfc gradient the band paints, one was
        a dark smudge and the other bright. Both arrows are now drawn from
        right.png, with the left one mirrored, so they are one glyph at one
        weight; the URL is relative to this file (public/assets/css/), which
        keeps it correct if the app is ever served from a sub-path.
     b. NO CONTROL SURFACE. The buttons were transparent 50x32 boxes floating
        on the gradient. They now sit on a 44x44 #1f3f65 disc - the colour this
        carousel already uses for its dots - which reads as a button, carries
        10.6:1 for the white glyph and 3.3:1 for the disc against the lightest
        point of the gradient.
     c. DEAD SPACE. `.owl-nav` had `margin-top: 50px` while `.owl-prev` and
        `.owl-next` were `position: absolute; bottom: -5px; left/right: 34%`,
        so the nav container collapsed to 1360x0 and left the arrows floating
        over the dots, with roughly 236px of empty gradient between the last
        slide and the next heading at 1920. The controls are returned to normal
        flow as one centred row, and the band's bottom padding and the FAQ
        section's top padding are trimmed to close the remaining gap.
   -------------------------------------------------------------------------- */
/* The stage runs the full width of the band, so the outer cards previously bled
   into the viewport edges. Padding the carousel element insets them; Owl measures
   this element's content box when it initialises, so the slide widths are computed
   from the padded width and nothing overflows. */
body.candoor-marketing .testimonialsWrap .owl-carousel {
    padding-left: 24px;
    padding-right: 24px;
}

/* The testimonial portrait is fixed at `width: 100px` by the page sheet's
   `@media (max-width: 768px)` block while its column is `col-md-3` of the card -
   about 87px at the 768px breakpoint - so the image overflowed its column and
   ran under the quote beside it. Capping it at the column width keeps the
   declared size where there is room for it and shrinks it where there is not. */
body.candoor-marketing .owl-item .advisorWrap img {
    max-width: 100%;
    height: auto;
}

body.candoor-marketing .owl-theme .owl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

body.candoor-marketing .owl-theme .owl-nav .owl-prev,
body.candoor-marketing .owl-theme .owl-nav .owl-next {
    position: static;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--candoor-navy);
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out;
}

body.candoor-marketing .owl-theme .owl-nav .owl-prev:hover,
body.candoor-marketing .owl-theme .owl-nav .owl-next:hover {
    background-color: #16304e;   /* 13.3:1 for the white glyph */
    transform: scale(1.06);
}

body.candoor-marketing .owl-theme .owl-nav .owl-prev:active,
body.candoor-marketing .owl-theme .owl-nav .owl-next:active {
    background-color: #0f2338;
    transform: scale(0.96);
}

/* One glyph for both directions. `.right--` keeps right.png as-is; `.left--`
   uses the same file mirrored, which is why left.png is no longer referenced
   anywhere. */
body.candoor-marketing .owl-theme .owl-nav .left--,
body.candoor-marketing .owl-theme .owl-nav .right-- {
    width: 24px;
    height: 24px;
    background-image: url("../../images/UserImages/Home/right.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

body.candoor-marketing .owl-theme .owl-nav .left-- {
    transform: scaleX(-1);
}

body.candoor-marketing .owl-theme .owl-dots {
    margin-top: 4px;
}

/* Closing the gap the absolute positioning left behind. Both declarations
   carry `!important` only because the rule they override does
   (`.testimonialsWrap{padding-top:80px !important;padding-bottom:80px !important}`
   in the page sheets); the FAQ rule below needs no such thing. */
body.candoor-marketing .testimonialsWrap {
    padding-bottom: 24px !important;
}

body.candoor-marketing .FAQWrap {
    padding-top: 40px;
}

/* --------------------------------------------------------------------------
   7. Employer-logo grid (home page)

   Eighteen logos of different intrinsic sizes were laid out with no bound of
   their own: at 1280 they rendered at natural size (97x34 next to a 60x60
   disc), and the `@media (max-width: 768px)` block in the page sheet set
   `.companies img{width:100%}` inside a 33.33% cell, which upscaled every one
   of them to 200px wide - Tesla by 3.4x, Facebook by 2.6x - and grew the
   section from 421px to 1126px.

   The fix is a bounded box per logo plus a consistent cell: each image is
   capped by HEIGHT (the dimension that governs how a wordmark reads next to
   its neighbours) and never stretched past its natural width, and each cell
   reserves the same vertical space so the two rows are even. These selectors
   carry the body scope, which is what lets them beat the page sheet's
   media-query rule at a higher specificity.
   -------------------------------------------------------------------------- */
body.candoor-marketing .companies .col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

body.candoor-marketing .companies img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
}

@media only screen and (max-width: 768px) {
    body.candoor-marketing .companies img {
        width: auto;
        max-height: 32px;
    }

    body.candoor-marketing .companies .col {
        min-height: 48px;
    }
}