/* ==========================================================================
   C&H Recruitment — 2026 Site Refresh
   Font: Inter (Google Fonts)
   Primary: #236cff | Accent: #ffc31d | Dark: #0c1f3d
   ========================================================================== */

/* ---------- 1. Typography — Inter font stack, 16 px body copy ---------- */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ch-text, #1e293b);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

p,
body:not(.front-end) p,
.wp-block-freeform.block-library-rich-text__tinymce p {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ch-text, #1e293b);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.editor-post-title__block .editor-post-title__input {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  color: var(--ch-primary, #236cff);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

@media (max-width: 480px) {
  h1, .h1 { font-size: 1.875rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
}

li, td, th, label, input, select, textarea, blockquote {
  font-size: 16px;
}

small, .small {
  font-size: 14px;
}

code, kbd, pre, samp {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Fira Mono',
    'Roboto Mono', monospace;
}

/* ---------- 2. Links & Buttons ---------- */

a, .btn-link {
  color: var(--ch-primary);
  transition: color 0.2s ease;
}

a:hover, a:focus,
.btn-link:hover, .btn-link:focus {
  color: var(--ch-primary-dark, #1a52cc);
  text-decoration: none;
}

.btn-primary,
a.btn-primary {
  background-color: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.btn-primary:hover, .btn-primary:focus,
a.btn-primary:hover, a.btn-primary:focus {
  background-color: var(--ch-primary-dark, #1a52cc) !important;
  border-color: var(--ch-primary-dark, #1a52cc) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(35, 108, 255, 0.3);
}

.el-btn .btn.btn-skin-primary,
.el-btn .btn.btn-skin-primary-ghost:hover,
.el-btn .btn.btn-skin-primary-ghost:focus {
  background-color: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
}

.el-btn .btn.btn-skin-primary-ghost {
  color: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
}

.el-btn .btn {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

/* ---------- 3. Navigation ---------- */

.top-bar {
  background-color: #fff;
}

.top-bar .top-bar-module {
  color: var(--ch-text);
  font-size: 14px;
}

.icon-bar {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.main-menu .menu-item > a {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.main-menu .sub-menu,
.sub-menu-container {
  background-color: var(--ch-primary) !important;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.main-menu .sub-menu-container .menu-item > a:hover {
  color: #000 !important;
  text-decoration: none !important;
}

.main-menu .sub-menu-container .menu-item > a {
  color: #fff !important;
  font-size: 14px;
  padding: 12px 20px !important;
}

.icon-bar.affix {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------- 4. Hero / Slider ---------- */

.slides-container .wrap-caption .caption-heading {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .slides-container .wrap-caption .caption-heading {
    font-size: 1.75rem;
  }
}

.slides-container .wrap-caption .excerpt {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  max-width: 600px;
}

.slides-container .container,
.custom-page-title .container {
  border-radius: 8px;
  padding: 20px 28px;
  background-color: rgba(12, 31, 61, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.slides-container .btn-primary {
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 6px;
}

/* ---------- 5. Page Headings ---------- */

.page-heading .custom-page-title .page-title,
.page-heading .custom-page-title .category-label,
.page-heading .custom-page-title .search-name {
  font-weight: 700;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.breadcrumb > li,
.breadcrumb > li a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.breadcrumb > li a:hover {
  color: #fff;
}

/* ---------- 6. Section headings ---------- */

.section-heading {
  font-size: 32px;
  font-weight: 800;
  color: var(--ch-darkblue, #0c1f3d);
  letter-spacing: -0.03em;
}

.section-heading:after {
  background: var(--ch-primary);
  height: 4px;
  width: 40px;
  border-radius: 2px;
}

.section-head h2 {
  color: var(--ch-darkblue, #0c1f3d);
}

.section-head.layout-walls-wp .section-main-title:after {
  background-color: var(--ch-primary);
}

/* ---------- 7. Cards / Icon Boxes ---------- */

.module-iconboxes:not(.style-8):not(.style-9):not(.style-10):not(.style-2):not(.style-3):hover {
  background-color: var(--ch-primary);
}

.module-iconboxes .box i {
  color: var(--ch-primary) !important;
  transition: color 0.2s ease;
}

.module-iconboxes .more-link,
.module-img-box .more-link {
  color: var(--ch-primary);
  font-weight: 600;
}

.module-img-box .box {
  background-color: var(--ch-primary);
  border-radius: 8px;
}

/* ---------- 8. Portfolio / Industries ---------- */

.gum_portfolio .portfolio-filter li > a:hover,
.gum_portfolio .portfolio-filter li > a:focus,
.gum_portfolio .portfolio-filter li.active a {
  color: var(--ch-primary);
}

.portfolio-content .portfolio .image-overlay-container {
  background-color: rgba(35, 108, 255, 0.75);
  border-color: var(--ch-primary);
}

.layout-slide .portfolio-content .portfolio .portfolio-title:after {
  background-color: var(--ch-primary);
}

/* ---------- 9. Footer ---------- */

.footer-contact-card > .container {
  background: var(--ch-accent, #ffc31d);
  border-radius: 8px;
}

.footer-contact-card .card .body-content .heading {
  color: #0c1f3d;
  font-weight: 700;
}

.footer-contact-card .card {
  color: #0c1f3d;
}

.footer-contact-card .card a {
  color: #0c1f3d;
  text-decoration: underline;
}

.footer-widget {
  padding: 60px 0 40px;
  background-color: var(--ch-darkblue, #0c1f3d);
}

.footer-widget .widget .widget-title,
.footer-widget .widget .widgettitle {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #fff !important;
}

.footer-widget,
.footer-widget .widget {
  color: rgba(255, 255, 255, 0.85);
}

.footer-widget .widget ul > li a:hover,
.footer-widget .widget ul > li a:focus {
  color: var(--ch-accent) !important;
}

.footer-widget .widget.widget_recent_entries ul > li > a:hover,
.footer-widget .widget.widget_recent_entries ul > li > a:focus {
  color: var(--ch-accent);
}

.footer-widget .widget.widget_nav_menu ul li.menu-item > a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-widget .widget.widget_nav_menu ul li.menu-item > a:hover,
.footer-widget .widget.widget_nav_menu ul li.menu-item > a:focus {
  color: var(--ch-accent, #ffc31d) !important;
}

.footer-widget .widget.widget_nav_menu ul li.menu-item > .sub-menu a,
.footer-widget .widget.widget_nav_menu ul li.menu-item > .sub-menu a:hover,
.footer-widget .widget.widget_nav_menu ul li.menu-item > .sub-menu a:focus {
  color: black !important;
}

.footer-widget .sub-menu {
  background-color: var(--ch-accent, #ffc31d);
}

.footer-widget .sub-menu a {
  color: #0c1f3d !important;
}

.footer-widget .sub-menu a:hover {
  color: var(--ch-primary) !important;
}

.footer-widget .widget.walls_widget_social .social-item i {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.footer-widget .widget.walls_widget_social .social-item:hover i,
.footer-widget .widget.walls_widget_social .social-item:focus i {
  background-color: var(--ch-primary);
}

.footer-copyright {
  background-color: #081529;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright, .footer-copyright a, .footer-copyright p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.footer-copyright a:hover {
  color: #fff;
}

.footer-copyright .widget.walls_widget_social .social-item:hover i,
.footer-copyright .widget.walls_widget_social .social-item:focus i {
  background-color: var(--ch-primary);
}

/* ---------- 10. Job Search page ---------- */

.ja-job-search {
  background-color: var(--ch-primary);
  border-radius: 8px;
  padding: 30px;
}

.ja-job-search .ja-button {
  background-color: var(--ch-accent, #ffc31d);
  color: #0c1f3d;
  border-radius: 6px;
  font-weight: 600;
  padding: 12px 28px;
  border: none;
  transition: all 0.2s ease;
}

.ja-job-search .ja-button:hover {
  background-color: var(--ch-accent-dark, #e0ab00);
}

.ja-job-list .job .view-details {
  background-color: var(--ch-primary);
  border-radius: 6px;
  font-weight: 600;
  padding: 10px 24px;
  transition: all 0.2s ease;
}

.ja-job-list .job .view-details:hover {
  background-color: var(--ch-primary-dark, #1a52cc);
  box-shadow: 0 4px 12px rgba(35, 108, 255, 0.25);
}

.ja-job-list .job {
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: box-shadow 0.2s ease;
}

.ja-job-list .job:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.ja-job-list .job .title a {
  color: var(--ch-primary);
  font-weight: 600;
}

.ja-job-list .job .title a:hover {
  color: var(--ch-primary-dark, #1a52cc);
}

.ja-job-details .apply {
  background-color: var(--ch-accent, #ffc31d);
  border-radius: 8px;
  padding: 30px;
}

.ja-job-details .apply .back-link {
  color: #0c1f3d;
}

.ja-pager span,
.ja-pager a {
  background-color: var(--ch-primary);
  border-radius: 4px;
}

.ja-pager a:hover,
.ja-pager .current-page {
  background-color: var(--ch-primary-dark, #1a52cc);
}

/* ---------- 11. Pagination ---------- */

.page-pagination .page-numbers.current,
.page-pagination .page-numbers:hover,
.page-pagination .page-numbers:focus,
.page-pagination > .page-numbers,
.pagination li .page-numbers.current,
.pagination li .page-numbers:hover,
.pagination li .page-numbers:focus,
.pagination li .older-post,
.pagination li .newest-post {
  background-color: var(--ch-primary);
  border-radius: 4px;
}

/* ---------- 12. Widgets ---------- */

.widget .widget-title:after,
.widget .widgettitle:after {
  background-color: var(--ch-primary);
}

.widget .tagcloud a:hover,
.widget .tagcloud a:focus {
  background-color: var(--ch-primary);
}

/* ---------- 13. #toTop ---------- */

#toTop {
  background-color: var(--ch-accent, #ffc31d);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

#toTop span {
  border-color: #0c1f3d !important;
}

#toTop:hover {
  background-color: var(--ch-primary);
  box-shadow: 0 4px 16px rgba(35, 108, 255, 0.4);
}

#toTop:hover span {
  border-color: #fff !important;
}

/* ---------- 14. Forms ---------- */

.search-form .search-field {
  border-color: var(--ch-primary);
  border-radius: 6px;
  font-size: 18px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font-size: 16px;
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--ch-primary);
  box-shadow: 0 0 0 3px rgba(35, 108, 255, 0.15);
  outline: none;
}

/* ---------- 15. Misc / Polish ---------- */

.post-title, .post-title a {
  color: var(--ch-primary);
}

.team_custom .profile-subheading {
  color: var(--ch-primary);
}

.comment-respond .comment-form .form-submit .button {
  background-color: var(--ch-primary);
  border-radius: 6px;
}

pre {
  color: var(--ch-primary);
}

ul.bull li:before,
ul.circle li:before,
ul.checklist li:before {
  color: var(--ch-primary);
}

.ch-icon i {
  color: var(--ch-primary) !important;
}

/* Smoother transitions on interactive elements */
a, button, .btn, input, select, textarea {
  transition: all 0.2s ease;
}

img {
  border-radius: 2px;
}

/* Ensure portfolio/industries hover text is not clipped */
.portfolio-content .portfolio,
.portfolio-content .portfolio .portfolio-image,
.layout-slide .portfolio-content .portfolio {
  overflow: visible !important;
}

.portfolio-content .portfolio .portfolio-image img {
  border-radius: 0;
}

/* Card/box subtle hover lift */
.module-iconboxes .box,
.module-img-box .box {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-iconboxes:hover .box,
.module-img-box:hover .box {
  transform: translateY(-2px);
}

/* Ensure body text in main content is readable */
.main-content {
  color: var(--ch-text, #1e293b);
}

.main-content p,
.main-content li,
.main-content td,
.main-content th {
  color: var(--ch-text, #1e293b);
}

/* Fix green body color leak from theme */
.footer-widget .widget.widget_recent_entries ul > li .post-date {
  color: rgba(255, 255, 255, 0.5);
}

/* Ensure page heading doesn't get covered by sticky top-heading */
@media (min-width: 769px) {
  .top-heading {
    padding-bottom: 0 !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  .slides-container .container,
  .custom-page-title .container {
    padding: 15px 18px;
  }

  .footer-widget {
    padding: 40px 0 20px;
  }

  .ja-job-search {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .ja-job-list .job {
    padding: 15px;
  }
}

/* Footer link legibility */
.footer-widget a,
.footer-widget p,
.footer-widget li > a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-widget a:hover,
.footer-widget a:focus {
  color: var(--ch-accent, #ffc31d) !important;
}

/* Ensure secondary buttons follow palette */
.btn-secondary {
  color: var(--ch-primary);
  border-color: var(--ch-primary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--ch-primary);
  border-color: var(--ch-primary);
  color: #fff;
}

/* Progress bars */
.el_progress_bar .progress-bar-outer .progress-bar {
  background-color: var(--ch-primary);
}

/* Timeline */
.el-timeline .single-timeline-item .thumb:after {
  background-color: var(--ch-primary);
}

/* Price blocks */
.price-block.layout-2 .price-footer .btn:hover,
.price-block.layout-2 .price-footer .btn:focus {
  background-color: var(--ch-primary);
}

/* ---------- 16. Bootstrap overrides (customized vendor file) ---------- */

a:hover, a:focus {
  color: var(--ch-primary-dark, #1a52cc);
}

.text-primary {
  color: var(--ch-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--ch-primary-dark, #1a52cc) !important;
}

.bg-primary {
  background-color: var(--ch-primary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: var(--ch-primary-dark, #1a52cc) !important;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ch-primary);
}

.btn-default {
  border-radius: 6px;
}

.btn-default:hover,
.btn-default:focus {
  border-color: var(--ch-primary);
  color: var(--ch-primary);
}

/* ---------- 17. WooCommerce buttons ---------- */

.woocommerce #respond input#submit,
input.woocommerce-button,
input.woocommerce-Button,
button.single_add_to_cart_button,
.add_to_cart_button,
.button.wc-backward,
.button.wc-forward,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--ch-primary) !important;
  border-color: var(--ch-primary) !important;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- 18. Responsive tab/accordion overrides ---------- */

.responsive_tab .panel.panel-default .panel-heading {
  background-color: var(--ch-primary);
}

.responsive_tab .nav-tabs li > a,
.responsive_tab .nav-tabs li:hover > a {
  color: var(--ch-primary);
}

.responsive_tab .nav-tabs li.active > a {
  border-bottom-color: var(--ch-primary);
}

/* ---------- 19. Post meta / blog ---------- */

.post-lists .post-content:before {
  background-color: var(--ch-primary);
}

.post-title a:hover {
  color: var(--ch-primary-dark, #1a52cc);
}

/* ---------- 20. YouTube popup / video overlay ---------- */

.youtube_popup .action-panel {
  background-color: var(--ch-primary);
}

/* ---------- 21. Owl carousel pagination ---------- */

.owl-carousel-container .owl-custom-pagination.navigation .btn-owl {
  color: var(--ch-primary);
  border-color: var(--ch-primary);
}

/* ---------- 22. Overall polish ---------- */

::selection {
  background-color: var(--ch-primary);
  color: #fff;
}

::-moz-selection {
  background-color: var(--ch-primary);
  color: #fff;
}

.layout-slide .portfolio .portfolio-excerpt {
  overflow: visible !important;
}

.layout-slide .portfolio-content .portfolio .portfolio-title {
  color: #fff !important;
}

/* Buttonizer floating "Contact Us" — fa-facebook-messenger glyph missing; use paper plane */
i.fa-paper-plane.buttonizer-icon-0-0-14,
.buttonizer-button i.fa-paper-plane {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}