/* ==========================================================================
   ACCESSIBILITY FIX - WCAG 1.4.11 Non-text Contrast
   --------------------------------------------------------------------------
   Loaded LAST (after theme/style.css, the colour-theme file and Metronic's
   style.bundle.css) so these rules win over the utility classes.

   Sections 1-4 apply to the public site (marketing pages + the guest /
   sign-in pages).  Sections 5-6 are scoped to `.admin-panel`, the class on
   the admin layout <body>, so they can never touch the marketing design.

   Every declaration changes COLOURS only, with one deliberate exception:
   the admin "light" buttons get a real 1px outline back.  For those the
   +1px padding compensation Metronic adds for a borderless button is
   removed at the same time, so the rendered width/height stay identical
   (verified pixel for pixel).

   What was broken and what is fixed:
   1. Marketing-site form fields shipped with a *transparent* 1px border on a
      #f5f6f8 / #ffffff fill, so the field outline was invisible (1:1).
   2. The Metronic "solid" form fields shipped with border-color === fill,
      again an invisible outline (1:1).
   3. The Metronic solid check box shipped with border:0 and a #eff2f5 fill
      (1.12:1) - no visible boundary at all.
   4. The Metronic primary button #009ef7 on white was 2.90:1 (needs 3:1)
      and its white label was only 3.28:1 (needs 4.5:1, WCAG 1.4.3).
   5. The admin "light" buttons shipped with no outline at all and a
      near-white tint (1.05-1.07:1).
   6. The admin solid select and the current page of the DataTables
      pagination shipped with border-color === background-color (1:1).

   Fix: give the controls a visible outline of #6c7a89 and pull the primary
   blue to #0079c2.  #6c7a89 scores 4.06:1 against #f5f6f8, 3.93:1 against
   #eef3f7, 4.12:1 against #f5f8fa and 3.91:1 against #eff2f5.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Marketing-site form fields (contact / news / blog / team / stories /
      WhatsApp / quick-search forms).
      `border-transparent` is replaced by a visible outline.  The border box
      was already 1px (or 2px) wide, so the layout does not move.
   -------------------------------------------------------------------------- */
.form-control.border-transparent,
.contact-form .form-control,
.contact-form .form-select,
.sign-up-form .form-control,
.hero-section .quick-form .form-control,
.quick-form .form-control {
  border-color: #6c7a89 !important;
}

/* Focus states keep the design's existing blue, darkened where the original
   value was below 3:1 (#3eb1ff was 2.35:1 on white). */
.form-control.border-transparent:focus,
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.sign-up-form .form-control:focus,
.quick-form .form-control:focus {
  border-color: #1680fb !important;
}
.hero-section .quick-form .form-control:focus {
  border-color: #1f8ed9 !important;
}

/* --------------------------------------------------------------------------
   2. Metronic solid form fields (admin sign-in / forgot-password).
      Metronic sets border-color equal to background-color, so the field
      boundary disappeared.  Restore a visible outline.
   -------------------------------------------------------------------------- */
.form-control.form-control-solid {
  border-color: #6c7a89 !important;
}
.form-control.form-control-solid:focus {
  border-color: #1680fb !important;
}

/* --------------------------------------------------------------------------
   3. Check boxes / radio buttons.
      Metronic's default border is rgba(0,0,0,.25) (= 1.84:1 on white) and
      .form-check-solid removes the border completely.
   -------------------------------------------------------------------------- */
.form-check-input {
  border-color: #6c7a89;
}
.form-check.form-check-solid .form-check-input {
  border: 1px solid #6c7a89;
}
.form-check-input:focus {
  border-color: #1680fb;
}
.form-check-input:checked {
  background-color: #0079c2;
  border-color: #0079c2;
}

/* --------------------------------------------------------------------------
   4. Primary button - #009ef7 on white was 2.90:1.
      Metronic also ships a `.btn.btn-primary` rule, so the same (higher)
      specificity is used here to make sure this wins.
   -------------------------------------------------------------------------- */
.btn.btn-primary {
  background-color: #0079c2;
  border-color: #0079c2;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: #0069a8;
  border-color: #0069a8;
}
/* keep the Metronic primary-blue family consistent with the button */
.link-primary {
  color: #0079c2;
}

/* ==========================================================================
   5. ADMIN PANEL - Metronic "light" buttons
   --------------------------------------------------------------------------
   Metronic renders .btn with `border: 0` and adds +1px to the padding so the
   box keeps its size.  The "light" variants then paint a near-white tint
   (#f1faff, #f5f8fa, #fff5f8, #e8fff3, #fff8dd) with no outline at all, so
   the button boundary was 1.05-1.07:1 against the white card behind it.

   Fix: put a real 1px outline back and remove the +1px padding compensation,
   so the rendered width and height stay exactly the same.
   ========================================================================== */
.admin-panel .btn.btn-light,
.admin-panel .btn.btn-light-primary,
.admin-panel .btn.btn-light-danger,
.admin-panel .btn.btn-light-success,
.admin-panel .btn.btn-light-warning {
  border-width: 1px !important;
  border-style: solid !important;
  padding: .75rem 1.5rem !important;
}
.admin-panel .btn.btn-sm.btn-light,
.admin-panel .btn.btn-sm.btn-light-primary,
.admin-panel .btn.btn-sm.btn-light-danger,
.admin-panel .btn.btn-sm.btn-light-success,
.admin-panel .btn.btn-sm.btn-light-warning,
.admin-panel .btn-group-sm > .btn.btn-light,
.admin-panel .btn-group-sm > .btn.btn-light-primary,
.admin-panel .btn-group-sm > .btn.btn-light-danger,
.admin-panel .btn-group-sm > .btn.btn-light-success,
.admin-panel .btn-group-sm > .btn.btn-light-warning {
  padding: .65rem 1.25rem !important;
}
.admin-panel .btn.btn-lg.btn-light,
.admin-panel .btn.btn-lg.btn-light-primary,
.admin-panel .btn.btn-lg.btn-light-danger,
.admin-panel .btn.btn-lg.btn-light-success,
.admin-panel .btn.btn-lg.btn-light-warning,
.admin-panel .btn-group-lg > .btn.btn-light,
.admin-panel .btn-group-lg > .btn.btn-light-primary,
.admin-panel .btn-group-lg > .btn.btn-light-danger,
.admin-panel .btn-group-lg > .btn.btn-light-success,
.admin-panel .btn-group-lg > .btn.btn-light-warning {
  padding: .825rem 1.75rem !important;
}

/* primary - #009ef7 was 2.90:1 on white, pulled to #0079c2 (3.28:1) */
.admin-panel .btn.btn-light {
  border-color: #7e8299 !important;
}
.admin-panel .btn.btn-light-primary {
  color: #0079c2 !important;
  border-color: #0079c2 !important;
}
.admin-panel .btn.btn-light-primary i,
.admin-panel .btn.btn-light-primary .svg-icon svg [fill] {
  color: #0079c2 !important;
  fill: #0079c2 !important;
}
/* on hover Metronic turns the light button into a solid #009ef7 (2.90:1) */
.admin-panel .btn.btn-light-primary:hover:not(.btn-active),
.admin-panel .btn.btn-light-primary:focus:not(.btn-active),
.admin-panel .btn.btn-light-primary:active:not(.btn-active),
.admin-panel .btn.btn-light-primary.show {
  background-color: #0069a8 !important;
  border-color: #0069a8 !important;
  color: #fff !important;
}
.admin-panel .btn.btn-light-primary:hover:not(.btn-active) i,
.admin-panel .btn.btn-light-primary:focus:not(.btn-active) i {
  color: #fff !important;
}

/* danger - #f1416c is 3.68:1 on white, the outline now makes it visible */
.admin-panel .btn.btn-light-danger {
  border-color: #f1416c !important;
}
.admin-panel .btn.btn-light-danger:hover:not(.btn-active),
.admin-panel .btn.btn-light-danger:focus:not(.btn-active),
.admin-panel .btn.btn-light-danger:active:not(.btn-active),
.admin-panel .btn.btn-light-danger.show {
  background-color: #d6336c !important;
  border-color: #d6336c !important;
  color: #fff !important;
}
.admin-panel .btn.btn-light-danger:hover:not(.btn-active) i,
.admin-panel .btn.btn-light-danger:focus:not(.btn-active) i {
  color: #fff !important;
}

/* success - #50cd89 was only 2.01:1 on white, pulled to #179c5c (3.53:1) */
.admin-panel .btn.btn-light-success {
  color: #179c5c !important;
  border-color: #179c5c !important;
}
.admin-panel .btn.btn-light-success i,
.admin-panel .btn.btn-light-success .svg-icon svg [fill] {
  color: #179c5c !important;
  fill: #179c5c !important;
}
.admin-panel .btn.btn-light-success:hover:not(.btn-active),
.admin-panel .btn.btn-light-success:focus:not(.btn-active),
.admin-panel .btn.btn-light-success:active:not(.btn-active),
.admin-panel .btn.btn-light-success.show {
  background-color: #12844a !important;
  border-color: #12844a !important;
  color: #fff !important;
}
.admin-panel .btn.btn-light-success:hover:not(.btn-active) i,
.admin-panel .btn.btn-light-success:focus:not(.btn-active) i {
  color: #fff !important;
}

/* warning - #ffc700 was only 1.56:1 on white, pulled to #a87b00 (3.82:1) */
.admin-panel .btn.btn-light-warning {
  color: #a87b00 !important;
  border-color: #a87b00 !important;
}
.admin-panel .btn.btn-light-warning i,
.admin-panel .btn.btn-light-warning .svg-icon svg [fill] {
  color: #a87b00 !important;
  fill: #a87b00 !important;
}
.admin-panel .btn.btn-light-warning:hover:not(.btn-active),
.admin-panel .btn.btn-light-warning:focus:not(.btn-active),
.admin-panel .btn.btn-light-warning:active:not(.btn-active),
.admin-panel .btn.btn-light-warning.show {
  background-color: #8a6600 !important;
  border-color: #8a6600 !important;
  color: #fff !important;
}
.admin-panel .btn.btn-light-warning:hover:not(.btn-active) i,
.admin-panel .btn.btn-light-warning:focus:not(.btn-active) i {
  color: #fff !important;
}

/* ==========================================================================
   6. ADMIN PANEL - solid selects, pagination
   ========================================================================== */
/* .form-select-solid shipped with border-color === background-color */
.admin-panel .form-select.form-select-solid {
  border-color: #6c7a89 !important;
}
.admin-panel .form-select.form-select-solid:focus {
  border-color: #1680fb !important;
}

/* the current page in the DataTables pagination: #009ef7 was 2.90:1 */
.admin-panel .page-item.active .page-link {
  background-color: #0079c2 !important;
  border-color: #0079c2 !important;
}

/* ==========================================================================
   7. VISUALLY-HIDDEN UTILITY
   --------------------------------------------------------------------------
   Bootstrap ships `.visually-hidden`, the marketing site (Tailwind) does not.
   It is used for the status-message live region and for the screen-reader
   breadcrumb, both of which must not change the visual design.
   ========================================================================== */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   7b. PRONUNCIATION AIDS MUST NOT CHANGE THE DESIGN
   --------------------------------------------------------------------------
   The acronyms in the shared navigation carry an <abbr title="..."> so that
   a screen reader can pronounce them (WCAG 3.1.4 / 3.1.5).  Browsers draw a
   dotted underline on <abbr title>; removing it again keeps the navigation
   pixel identical to before.
   ========================================================================== */
abbr[title] {
  text-decoration: inherit;
}

/* ==========================================================================
   8. WCAG 2.4.7 FOCUS VISIBLE / 2.4.13 FOCUS APPEARANCE
   --------------------------------------------------------------------------
   Before this the site removed the focus outline almost everywhere
   (`focus:[outline:0px_none]` on the form fields, no :focus rule at all on
   the links), so 58-81 focusable elements per page had NO visible focus
   indicator.

   `outline` is drawn outside the element and never takes part in layout, so
   nothing moves.  #1680fb scores 3.82:1 against white and 4.51:1 against
   #1a1a1a, i.e. it clears the 3:1 of WCAG 1.4.11 on both the light and the
   dark panels of the site.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid #1680fb !important;
  outline-offset: 2px !important;
}

/* The same indicator for the Metronic based admin panel. */
.admin-panel a:focus-visible,
.admin-panel button:focus-visible,
.admin-panel input:focus-visible,
.admin-panel select:focus-visible,
.admin-panel textarea:focus-visible,
.admin-panel summary:focus-visible,
.admin-panel [tabindex]:focus-visible {
  outline: 2px solid #1680fb !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   9. WCAG 1.4.3 CONTRAST (MINIMUM) - TEXT
   --------------------------------------------------------------------------
   Every visible text node of all 75 public pages was measured against its
   effective background.  Only five colour combinations failed 4.5:1; they
   are listed below together with the smallest possible correction.  The
   hue is never changed, only the lightness, so the brand identity and the
   layout stay exactly as they were.

   1. Body copy - the theme sets `body { color: #6c757d }`.  On the #f4f4f9
      and #f7f8f9 panels that is 4.28:1 / 4.41:1.  #697078 is the same grey
      three units darker: 4.54:1 / 4.72:1.  Visually identical.
   2. The big orange quote glyph - #ff6f22 on white was 2.78:1 (large text
      needs 3:1).  #f26a1f gives 3.10:1.
   3. The theme-orange call to action - white on #ed6825 was 3.18:1.
      #c6531c (same hue, darker) gives 4.51:1.
   4. The theme-orange links - #ed6825 on the #f4f4f9 panel was 2.90:1.
      #b8480f gives 4.78:1.
   5. The Metronic primary blue - white on #0094e8 was 3.28:1.
      #0079c2 gives 4.65:1.  The whole primary-blue family of the theme
      (buttons, links, pagination, admin) was pulled to the same value.
   6. The base link colour - the theme sets `a { color: #6c757d }`, which is
      4.41:1 on the #f7f8f9 panels of the job cards.  The links on the
      light grey panels get the same three units darker grey as the body
      copy (#697078 = 4.72:1).  The rule is deliberately limited to the
      grey panels, so every link that the theme paints itself (the black
      "Explore ..." buttons, the navigation, the footer) keeps its colour.
   ========================================================================== */

/* 1 - body copy (marketing site only) */
.marketing-site {
  color: #697078;
}

/* 2 - the decorative quote marks */
.quote {
  color: #f26a1f;
}

/* 3 - theme orange call to action (white label) */
body .btn--theme {
  background-color: #ed6825 !important;
  border-color: #ed6825 !important;
}
body .hover--theme:hover,
body .white-scroll .scroll .hover--theme:hover,
body .black-scroll .scroll .hover--theme:hover {
  background-color: #b3480d !important;
  border-color: #b3480d !important;
}

/* 4 - theme orange links */
body a.color--theme,
body .color--theme a {
  color: #b8480f !important;
}

/* 5 - Metronic primary blue on the sign-in / reset pages */
.guest-panel .btn-primary {
  background-color: #0079c2 !important;
  border-color: #0079c2 !important;
  color: #fff !important;
}
.guest-panel .btn-primary:hover,
.guest-panel .btn-primary:focus,
.guest-panel .btn-primary:active,
.guest-panel .btn-primary.show {
  background-color: #0069a8 !important;
  border-color: #0069a8 !important;
  color: #fff !important;
}
.guest-panel .link-primary {
  color: #0079c2 !important;
}
.guest-panel .link-primary:hover,
.guest-panel .link-primary:focus {
  color: #0069a8 !important;
}

/* 6 - base link colour on the light grey panels of the theme */
.marketing-site :where(.bg--white-300, .bg--white-400) a {
  color: #697078;
}

/* ==========================================================================
   10. WCAG 1.4.12 TEXT SPACING
   --------------------------------------------------------------------------
   No content may be lost when the user increases the line height, the
   letter spacing, the word spacing or the paragraph spacing.

   The complete public site was tested with the W3C text spacing overrides
   (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em and a 2em
   paragraph margin) - once as a normal style sheet and once with the values
   forced onto every single element - in the 390 px and in the 1366 px
   viewport.  Nothing was clipped, nothing was hidden and the document
   never produced a horizontal scrollbar.

   The only element that could be pushed over the right edge was the
   e-mail address in the footer: one single unbreakable word.  It is now
   allowed to break inside, which only ever happens when it no longer
   fits - the default rendering is unchanged.
   ========================================================================== */
.footer,
footer p,
footer a {
  overflow-wrap: break-word;
}