/* Recruit Engineers - brand layer
 * Moved out of Customizer > Additional CSS on 2026-09-07.
 * THIS FILE IS THE SOURCE OF TRUTH for brand colour. Edit here, commit to git.
 * Do NOT paste this back into Additional CSS - two copies will drift apart.
 * Enqueued after child-theme.min.css; see functions.php.
 *
 * Hardcoded IDs:  .page-id-48445     = homepage
 *                 li#menu-item-48487 = Find Talent CTA pill
 * Rebuilding that menu changes the ID and silently breaks the yellow pill.
 */

/* ================================================================
   RECRUIT ENGINEERS — COMPLETE CSS OVERRIDE
   Paste into: WP Admin → Appearance → Customize → Additional CSS
   ================================================================

   COLOR TOKENS — edit only these to retheme the entire site:
   --re-red:      #BA1F32   Safety Red    → brand, nav hover, links
   --re-yellow:   #F7BE19   Golden Gear   → ALL CTA buttons
   --re-charcoal: #3C3C3C   Charcoal      → nav text, structure
   --re-navy:     #1A2B3C   Trust Navy    → footer, job cards
   --re-mist:     #E8E8E8   Steel Mist    → card/section backgrounds
   ================================================================ */


/* ---------------------------------------------------------------
   0. COLOR SYSTEM
--------------------------------------------------------------- */
:root {
  --re-red:          #BA1F32;
  --re-red-dark:     #A61D2A;
  --re-yellow:       #F7BE19;
  --re-yellow-dark:  #D9A500;
  --re-charcoal:     #3C3C3C;
  --re-navy:         #1A2B3C;
  --re-mist:         #E8E8E8;
  --re-on-yellow:    #1A1A1A;  /* text ON yellow backgrounds */
  --re-on-red:       #ffffff;  /* text ON red backgrounds   */

  /* Keeps var(--primary) working throughout theme templates */
  --primary: #BA1F32 !important;
}


/* ================================================================
   1. HEADER
================================================================ */


/*--------------------*/
.site-header {
  height: 75px !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--re-mist) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  display: flex !important;
  align-items: center !important;
}

.site-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 0 1.5rem !important;
}

/* Logo */
/* ================================================================
   LOGO — clean single source of truth
================================================================ */

/* All pages — default */
.site-branding {
  max-width: 200px !important;
}
.site-branding img {
  height: auto !important;
  max-height: 55px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Homepage only — bigger logo, no border */
.page-id-48445 .site-header {
  border-bottom: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 75px !important;
  padding: 12px 0 !important;
}
.page-id-48445 .site-branding {
  max-width: 260px !important;
}
.page-id-48445 .site-branding img {
  max-height: 90px !important;
}

/* Homepage scrolled — border returns, logo shrinks */
.sticky-header.page-id-48445 .site-header {
  border-bottom: 2px solid var(--re-mist) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  height: 75px !important;
  min-height: 75px !important;
  padding: 0 !important;
}
.sticky-header.page-id-48445 .site-branding {
  max-width: 200px !important;
}
.sticky-header.page-id-48445 .site-branding img {
  max-height: 55px !important;
}

/* Mobile — always small, no expansion */
@media (max-width: 991.98px) {
  .site-branding,
  .page-id-48445 .site-branding,
  .sticky-header.page-id-48445 .site-branding {
    max-width: 160px !important;
  }
  .site-branding img,
  .page-id-48445 .site-branding img,
  .sticky-header.page-id-48445 .site-branding img {
    max-height: 45px !important;
  }
}






/* Nav links */
#cssmenu > ul > li > a {
  color: var(--re-charcoal) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 28px 12px !important;
  transition: color 0.2s ease !important;
}
#cssmenu > ul > li > a:hover          { color: var(--re-red) !important; text-decoration: none !important; }
#cssmenu > ul > li.active > a         { color: var(--re-red) !important; background-color: transparent !important; }
#cssmenu > ul > li:hover,
#cssmenu > ul > li:focus-within,
#cssmenu > ul > li.active             { background-color: transparent !important; }

/* Chevron */
#cssmenu > ul > li.menu-item-has-children > a:after {
  content: "" !important; display: inline-block !important;
  width: 6px !important; height: 6px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform 0.3s ease !important;
  margin-left: 8px !important; vertical-align: middle !important; margin-bottom: 2px !important;
}
#cssmenu > ul > li.menu-item-has-children:hover > a:after {
  transform: rotate(225deg) !important; margin-bottom: -2px !important;
}

/* Dropdown */
#cssmenu > ul > li.has-sub > ul {
  display: block !important; opacity: 0 !important; visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
  border-radius: 16px !important; margin-top: 10px !important; padding: 6px 0 !important;
  width: 220px !important; background: #ffffff !important;
  position: absolute !important; top: 100% !important; left: 0 !important; z-index: 9999 !important;
}
#cssmenu > ul > li.has-sub > ul::before {
  content: "" !important; position: absolute !important; top: -6px !important; left: 18px !important;
  width: 12px !important; height: 12px !important; background: #ffffff !important;
  transform: rotate(45deg) !important; box-shadow: -1px -1px 2px rgba(0,0,0,0.05) !important; z-index: -1 !important;
}
#cssmenu > ul > li.has-sub:hover > ul,
#cssmenu > ul > li.has-sub:focus-within > ul { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }

#cssmenu ul li > ul li a {
  font-size: 0.9rem !important; color: var(--re-charcoal) !important;
  padding: 10px 18px !important; display: block !important; font-weight: 400 !important;
  transition: background 0.2s, color 0.2s !important;
}
#cssmenu ul li > ul li a:hover          { background-color: rgba(186,31,50,0.06) !important; color: var(--re-red) !important; }
#cssmenu ul li > ul li:first-child a    { border-radius: 16px 16px 0 0 !important; }
#cssmenu ul li > ul li:last-child a     { border-radius: 0 0 16px 16px !important; }

/* "Find Talent" CTA pill — YELLOW, black text */
.site-header li#menu-item-48487 {
  background-color: var(--re-yellow) !important;
  border-radius: 10px !important;
  height: 44px !important;
	margin-top: 10px !important;
  margin-left: 14px !important;
  display: flex !important; align-items: center !important;
}
.site-header li#menu-item-48487 > a     { color: var(--re-on-yellow) !important; font-weight: 700 !important; padding: 8px 22px !important; }
.site-header li#menu-item-48487:hover   { background-color: var(--re-yellow-dark) !important; }
.site-header li#menu-item-48487 > a:hover { color: var(--re-on-yellow) !important; opacity: 1 !important; }

/* Mobile header */
@media (max-width: 991.98px) {
  .site-header          { height: 65px !important; }
  .site-branding img    { height: 40px !important; max-height: 40px !important; }
  #mobilecssmenu        { top: 65px !important; }
}

/* Mobile nav text & burger */
.burger span { background: var(--re-charcoal) !important; }
.mobile-drawer .close-btn           { color: var(--re-red) !important; }
.mobile-drawer li .submenu,
.mobile-drawer .submenu             { border-left-color: var(--re-red) !important; }
.mobile-drawer li .submenu li a:hover { color: var(--re-red) !important; }
.menu-items .menu-item a            { color: var(--re-charcoal) !important; }
.menu-items .menu-item a:hover      { color: var(--re-red) !important; }

#mobilecssmenu > ul > li.active > a,
#cssmenu > ul > li.active > a       { color: var(--re-red) !important; background-color: transparent !important; }

/* Page offset */
.page-wrapper { padding-top: 75px !important; }
@media (max-width: 991.98px) { .page-wrapper { padding-top: 65px !important; } }



/* ================================================================
   2. BUTTONS
================================================================ */

/* Yellow — primary CTA */
.btn-primary,
.primary-button {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
.btn-primary:hover,
.primary-button:hover {
  background-color: var(--re-yellow-dark) !important;
  border-color:     var(--re-yellow-dark) !important;
  color:            var(--re-on-yellow) !important;
}
.primary-button a { color: var(--re-on-yellow) !important; }

/* Outlined — red border, yellow fill on hover */
.btn-outline-primary, a.btn-outline-primary, .outlined-primary-button {
  background-color: transparent !important;
  border-color:     var(--re-red) !important;
  color:            var(--re-red) !important;
  border-radius: 30px !important; font-weight: 700 !important;
  transition: all 0.25s ease !important;
}
.btn-outline-primary:hover, a.btn-outline-primary:hover, .outlined-primary-button:hover {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
}

/* Navy/black button */
.btn-black, .black-button {
  background-color: var(--re-navy) !important;
  border-color:     var(--re-navy) !important;
  color:            #ffffff !important;
  border-radius: 30px !important;
}
.btn-black:hover, .black-button:hover {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
}

/* White button */
.white-button { background-color: #ffffff !important; color: var(--re-navy) !important; border-radius: 30px !important; }
.white-button:hover { background-color: var(--re-yellow) !important; color: var(--re-on-yellow) !important; }

/* White Border - Red Button  */
.bg-dark-red .btn-outline-light {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
  border-radius: 5px !important;
}
.bg-dark-red .btn-outline-light:hover {
  background-color: #ffffff !important;
  color: var(--re-red) !important;
}

/* Override broad button reset — don't let it nuke everything */
[type="button"]:not(:disabled), button:not(:disabled) { color: inherit !important; background-color: initial !important; border-color: initial !important; }



/* Form submit specifically */
form [type="submit"]:not(:disabled),
.search_jobs .search_submit input {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* Coloured card buttons */
.red-background .card { background-color: var(--re-red) !important; color: #ffffff !important; }
.red-background .card .triangle { background-image: linear-gradient(to left top, var(--re-red-dark) 0%, var(--re-red-dark) 50%, transparent 50%) !important; }
.red-background .card .btn { border-color: #ffffff !important; color: #ffffff !important; background-color: transparent !important; }
.red-background .card .btn:hover { background-color: var(--re-yellow) !important; border-color: var(--re-yellow) !important; color: var(--re-on-yellow) !important; }


/* ================================================================
   3. LINKS, COLOUR UTILITIES & TYPOGRAPHY
================================================================ */
a               { color: var(--re-red) !important; }
a:hover         { color: var(--re-red-dark) !important; }
.text-primary   { color: var(--re-red) !important; }
.bg-primary     { background-color: var(--re-red) !important; }
.bg-dark-red    { background-color: var(--re-red-dark) !important; }
.im-accent-1    { color: var(--re-red) !important; }
.im-accent-2    { color: #576C99 !important; }

/* Form focus rings */
.input-container:focus { outline-color: var(--re-red) !important; }


/* ================================================================
   4. HERO / BANNER SECTIONS
================================================================ */
.offshore-hero-container .hero-subtitle { background-color: rgba(232,232,232,0.5) !important; color: var(--re-red) !important; }
.offshore-table .cell-red               { background: var(--re-red) !important; }

/* Yellow glow shadows (replacing old red glows) */
.find-talent-shadow-red::after,
.find-talent-shadow-red-2::after,
.scrollable-use-cases .shadow-circle-1,
.scrollable-use-cases .shadow-circle-2 { background: var(--re-yellow) !important; }

@-moz-document url-prefix() {
  .find-talent-shadow-red::after, .find-talent-shadow-red-2::after { background: var(--re-yellow) !important; }
}


/* ================================================================
   5. CARDS & SECTION BACKGROUNDS
================================================================ */
.home-approach-container { background-color: var(--re-mist) !important; }
.testimonial-card        { background-color: var(--re-mist) !important; }
.grey-card               { background-color: var(--re-mist) !important; }

/* Expertise cards */
.expertise-cards .expertise-card:nth-child(1) .card { background-color: var(--re-red) !important; color: #ffffff !important; }
.expertise-cards .expertise-card:nth-child(1) .card .btn { background-color: var(--re-yellow) !important; border-color: var(--re-yellow) !important; color: var(--re-on-yellow) !important; }
.expertise-cards .expertise-card:nth-child(2) .card { border-color: var(--re-red) !important; }
.expertise-cards .expertise-card:nth-child(2) .card .btn { color: var(--re-red) !important; border-color: var(--re-red) !important; background-color: transparent !important; }
.expertise-cards .expertise-card:nth-child(3) .card { border-color: #576C99 !important; background-color: #EBF4FF !important; }

/* Case study */
.case-study-item .column-content h3                  { background-color: var(--re-red-dark) !important; }
.case-study-item .column-content h4,
.case-study-item .kpi-label,
.case-study-item .problem-label,
.case-study-item .kpi-number,
.case-study-item .kpi-item:after                     { color: var(--re-red) !important; }


/* ================================================================
   6. JOB BOARD
================================================================ */
.job-card-header         { background: var(--re-navy) !important; color: #ffffff !important; }
.job-card-header h3      { color: #ffffff !important; }
.job-card__date          { background: var(--re-yellow) !important; color: var(--re-on-yellow) !important; }
.job-card-container .meta li { background: var(--re-mist) !important; color: var(--re-navy) !important; }
.job-card__link          { color: var(--re-red) !important; }

.single_job_listing .meta .job-type         { background-color: var(--re-red) !important; }
.job-listing-meta .location .google_map_link { color: var(--re-red) !important; }
.job_description a                          { color: var(--re-red) !important; }
.job_application_email                      { color: var(--re-red) !important; }
.load_more_jobs                             { color: var(--re-red) !important; }

.job_application .application_button {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
  border-radius: 20px !important; font-weight: 700 !important;
}
.job_application .application_button:hover {
  background-color: transparent !important;
  color: var(--re-red) !important;
  border-color: var(--re-red) !important;
}


/* ================================================================
   7. APPLICATION FORM
================================================================ */
.job-manager-application-form input:focus,
.job-manager-application-form textarea:focus,
.job-manager-application-form select:focus { border-color: var(--re-red) !important; outline-color: var(--re-red) !important; }
.job-manager-application-form input[type="checkbox"] { accent-color: var(--re-red) !important; }
.job-manager-application-form .wp_job_manager_send_application_button {
  background-color: var(--re-yellow) !important;
  border-color:     var(--re-yellow) !important;
  color:            var(--re-on-yellow) !important;
  font-weight: 700 !important; border-radius: 10px !important;
}
.job-manager-application-form .wp_job_manager_send_application_button:hover {
  background-color: var(--re-yellow-dark) !important;
}


/* ================================================================
   8. FOOTER
================================================================ */
.main-footer                { background-color: #000000 !important;

}
.footer-cta-container       { background-color: var(--re-navy) !important; }
.footer-cta-swiper img      { border-color: var(--re-yellow) !important; }
.social-footer-menu li:hover svg,
.social-footer-menu li:hover g { fill: var(--re-yellow) !important; }
.subfooter a:hover          { color: var(--re-yellow) !important; }

.main-footer a,
.main-footer a:hover,
.footer-menu li a,
.footer-menu li a:hover,
.subfooter a {
  color: #ffffff !important;
}

.subfooter a {
  color: #000000 !important;
}

.subfooter a:hover {
  color: var(--re-yellow) !important;
}



/* ================================================================
   9. SLIDERS, DOTS, PAGINATION
================================================================ */
.slick-dots li button,
.slick-dots li.slick-active button          { border-color: var(--re-yellow) !important; background-color: var(--re-yellow) !important; }

.testimonials-swiper .swiper-pagination .swiper-pagination-bullet-active,
.home-testimonials-swiper .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--re-navy) !important; }

.blogs-page .page-numbers.current           { border-color: var(--re-red) !important; color: var(--re-red) !important; }

/* Google Reviews arrows — yellow tint */
.ti-next, .ti-prev {
  filter: invert(75%) sepia(80%) saturate(600%) hue-rotate(5deg) brightness(105%) contrast(98%) !important;
}


/* ================================================================
   10. CONTACT & MISC
================================================================ */
.contact-section .left-info h2                          { color: var(--re-red) !important; }
.page-template-fullwidthpage-acf .site-main             { border-right-color: var(--re-red) !important; }
.custom-file-label                                      { background-color: var(--re-yellow) !important; color: var(--re-on-yellow) !important; }

/*-----------
 * /* Remove focus outlines site-wide (replace with custom if needed) */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}




/* Remove red right border */
.page-template-fullwidthpage-acf .site-main,
.page-id-48445.page-template-fullwidthpage-acf .site-main {
  border-right: none !important;
}





/* Keyboard focus visibility - added 2026-09-07
 * The *:focus rule above removes every focus outline, which leaves keyboard
 * users with no position indicator - including on the application form.
 * :focus-visible restores it for keyboard nav only; mouse clicks stay clean.
 * Delete this block if unwanted. */
*:focus-visible {
  outline: 2px solid var(--re-red) !important;
  outline-offset: 2px !important;
}