/* =============================================================================
   MODERN REDESIGN — Jobhunt Theme
   2026 SaaS Design System
   Version: 1.0.0
   Loads after style.css and elementor-style.css via priority-20 hook.
   All changes are purely additive overrides — no functionality is removed.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================================= */

:root {
  /* ── Brand ── */
  --jh-primary:          #fb236a;
  --jh-primary-dark:     #e01c5e;
  --jh-primary-light:    #fff0f5;
  --jh-primary-alpha-12: rgba(251, 35, 106, 0.12);
  --jh-primary-alpha-20: rgba(251, 35, 106, 0.20);
  --jh-secondary:        #6c43f5;
  --jh-secondary-dark:   #5a35d9;
  --jh-secondary-light:  #f0ecff;
  --jh-gradient:         linear-gradient(135deg, #fb236a 0%, #6c43f5 100%);
  --jh-gradient-hover:   linear-gradient(135deg, #e01c5e 0%, #5a35d9 100%);
  --jh-gradient-subtle:  linear-gradient(135deg, #fff0f5 0%, #f0ecff 100%);

  /* ── Neutral Scale ── */
  --jh-gray-950: #0c0e14;
  --jh-gray-900: #111827;
  --jh-gray-800: #1f2937;
  --jh-gray-700: #374151;
  --jh-gray-600: #4b5563;
  --jh-gray-500: #6b7280;
  --jh-gray-400: #9ca3af;
  --jh-gray-300: #d1d5db;
  --jh-gray-200: #e5e7eb;
  --jh-gray-150: #eef0f3;
  --jh-gray-100: #f3f4f6;
  --jh-gray-50:  #f8f9fb;
  --jh-white:    #ffffff;

  /* ── Semantic Text ── */
  --jh-text-primary:     #111827;
  --jh-text-secondary:   #374151;
  --jh-text-muted:       #6b7280;
  --jh-text-placeholder: #9ca3af;
  --jh-text-inverse:     #ffffff;
  --jh-text-link:        #fb236a;

  /* ── Semantic Backgrounds ── */
  --jh-bg-base:     #ffffff;
  --jh-bg-subtle:   #f8f9fb;
  --jh-bg-muted:    #f3f4f6;
  --jh-bg-dark:     #111827;
  --jh-bg-darker:   #0c0e14;

  /* ── Borders ── */
  --jh-border:        #e5e7eb;
  --jh-border-strong: #d1d5db;
  --jh-border-focus:  #fb236a;

  /* ── Status ── */
  --jh-success:    #10b981;
  --jh-success-bg: #ecfdf5;
  --jh-warning:    #f59e0b;
  --jh-warning-bg: #fffbeb;
  --jh-error:      #ef4444;
  --jh-error-bg:   #fef2f2;
  --jh-info:       #3b82f6;
  --jh-info-bg:    #eff6ff;

  /* ── Typography ── */
  --jh-font-body:    'Varela Round', 'Quicksand', system-ui, -apple-system, sans-serif;
  --jh-font-heading: 'Quicksand', system-ui, -apple-system, sans-serif;

  --jh-size-xs:   0.75rem;   /* 12px */
  --jh-size-sm:   0.875rem;  /* 14px */
  --jh-size-base: 1rem;      /* 16px */
  --jh-size-lg:   1.125rem;  /* 18px */
  --jh-size-xl:   1.25rem;   /* 20px */
  --jh-size-2xl:  1.5rem;    /* 24px */
  --jh-size-3xl:  1.875rem;  /* 30px */
  --jh-size-4xl:  2.25rem;   /* 36px */
  --jh-size-5xl:  3rem;      /* 48px */

  --jh-leading-tight:   1.2;
  --jh-leading-snug:    1.35;
  --jh-leading-normal:  1.6;
  --jh-leading-relaxed: 1.75;

  --jh-weight-normal:   400;
  --jh-weight-medium:   500;
  --jh-weight-semibold: 600;
  --jh-weight-bold:     700;

  /* ── Spacing (8-point scale) ── */
  --jh-sp-1:  4px;
  --jh-sp-2:  8px;
  --jh-sp-3:  12px;
  --jh-sp-4:  16px;
  --jh-sp-5:  24px;
  --jh-sp-6:  32px;
  --jh-sp-7:  48px;
  --jh-sp-8:  64px;
  --jh-sp-9:  80px;
  --jh-sp-10: 96px;

  /* ── Border Radius ── */
  --jh-r-xs:   4px;
  --jh-r-sm:   6px;
  --jh-r-md:   10px;
  --jh-r-lg:   16px;
  --jh-r-xl:   24px;
  --jh-r-full: 9999px;

  /* ── Shadows ── */
  --jh-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --jh-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --jh-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --jh-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.09), 0 4px 8px rgba(0, 0, 0, 0.04);
  --jh-shadow-xl:  0 20px 48px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.05);
  --jh-shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.14);
  --jh-shadow-primary: 0 8px 24px rgba(251, 35, 106, 0.28);
  --jh-shadow-focus:   0 0 0 3px rgba(251, 35, 106, 0.18);

  /* ── Transitions ── */
  --jh-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --jh-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --jh-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --jh-t-fast:   150ms;
  --jh-t-base:   200ms;
  --jh-t-slow:   300ms;
  --jh-transition: var(--jh-t-base) var(--jh-ease);

  /* ── Component Tokens ── */
  --jh-header-h:     80px;
  --jh-input-h:      48px;
  --jh-btn-r:        var(--jh-r-sm);
  --jh-card-r:       var(--jh-r-md);
  --jh-section-gap:  var(--jh-sp-9);
}


/* =============================================================================
   2. REDUCED MOTION — guard all animations
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }

  /* Disable Animate.css classes that fire on scroll */
  .animated { animation: none !important; }
}


/* =============================================================================
   3. GLOBAL BASE — typography, body, links
   ============================================================================= */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size:   var(--jh-size-base);        /* 16px — was 14px */
  line-height: var(--jh-leading-normal);
  color:       var(--jh-text-secondary);
  background:  var(--jh-bg-base);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Heading scale — proportional, breathing */
h1, .h1 { font-size: var(--jh-size-4xl);  line-height: var(--jh-leading-tight); font-weight: var(--jh-weight-bold); }
h2, .h2 { font-size: var(--jh-size-3xl);  line-height: var(--jh-leading-tight); font-weight: var(--jh-weight-bold); }
h3, .h3 { font-size: var(--jh-size-2xl);  line-height: var(--jh-leading-snug);  font-weight: var(--jh-weight-semibold); }
h4, .h4 { font-size: var(--jh-size-xl);   line-height: var(--jh-leading-snug);  font-weight: var(--jh-weight-semibold); }
h5, .h5 { font-size: var(--jh-size-lg);   line-height: var(--jh-leading-normal); font-weight: var(--jh-weight-semibold); }
h6, .h6 { font-size: var(--jh-size-base); line-height: var(--jh-leading-normal); font-weight: var(--jh-weight-semibold); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color:          var(--jh-text-primary);
  letter-spacing: -0.01em;
  margin-top:     0;
}

p { margin-top: 0; }

a {
  color:      var(--jh-text-link);
  transition: color var(--jh-t-fast) var(--jh-ease);
}
a:hover, a:focus { color: var(--jh-primary-dark); text-decoration: none; }

/* Raise 13px micro-text to minimum readable size */
.pagination li a,
.pagination li > span,
.widget ul li,
.widget ul li a,
.post-readmore a,
.post-navigation .post-title,
.ui-autocomplete .ui-menu-item,
.pac-container .pac-item {
  font-size: var(--jh-size-sm) !important; /* 14px minimum */
}

/* Section header — consistent scale */
.section-header { margin-bottom: var(--jh-sp-7); }

.section-header .section-title {
  font-size:      clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  font-weight:    var(--jh-weight-bold);
  letter-spacing: -0.02em;
  line-height:    var(--jh-leading-tight);
  color:          var(--jh-text-primary);
}

.section-header .section-sub-title {
  font-size:  var(--jh-size-lg);
  color:      var(--jh-text-muted);
  margin-top: var(--jh-sp-2);
}

/* Homepage sections breathing room */
.jh-section { margin-bottom: var(--jh-section-gap); }

/* Page text selection */
::selection {
  background-color: var(--jh-primary-alpha-20);
  color:            var(--jh-text-primary);
}


/* =============================================================================
   4. ACCESSIBILITY — focus rings, landmarks
   ============================================================================= */

/* Universal keyboard focus ring (shown only on keyboard nav) */
:focus-visible {
  outline:        2px solid var(--jh-primary);
  outline-offset: 3px;
  border-radius:  var(--jh-r-xs);
}

/* Remove outline only when mouse is used */
:focus:not(:focus-visible) { outline: none; }

/* Restore focus ring on interactive elements that explicitly removed it */
.post-a-job a:focus-visible,
.action-link:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline:        2px solid var(--jh-primary) !important;
  outline-offset: 3px                         !important;
  box-shadow:     var(--jh-shadow-focus)      !important;
}

/* Skip link */
.skip-link:focus {
  position:   fixed;
  top:        var(--jh-sp-4);
  left:       var(--jh-sp-4);
  z-index:    9999;
  padding:    var(--jh-sp-3) var(--jh-sp-5);
  background: var(--jh-primary);
  color:      var(--jh-white);
  border-radius: var(--jh-r-sm);
  font-weight:   var(--jh-weight-semibold);
  outline:    none;
  box-shadow: var(--jh-shadow-lg);
}


/* =============================================================================
   5. LAYOUT & BREAKPOINT FIX
   ============================================================================= */

/* Fix: switch desktop/mobile header at 992px (lg) instead of 1200px (xl) */
@media (min-width: 992px) {
  .desktop-only { display: block !important; }
  .handheld-only { display: none !important; }
}

@media (max-width: 991.98px) {
  .desktop-only { display: none !important; }
  .handheld-only { display: block !important; }
}

/* Enable desktop dropdown hover at new 992px breakpoint */
@media (min-width: 992px) {
  .header-menu .menu-item-has-children:hover > .sub-menu,
  .header-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  .header-menu > li > .sub-menu::before {
    content: '';
    display: block;
    position: absolute;
    top: -4px;
    left: 40px;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    background-color: var(--jh-white);
    border-radius: 3px;
  }

  .header-menu > li:last-child > .sub-menu::before {
    right: 40px;
    left: auto;
  }

  /* Dropdown caret arrow on nav items */
  .header-menu .menu-item-has-children > a:after {
    content: '\f107';
    font-family: 'Line Awesome Free';
    font-size: 10px;
    line-height: 28px;
    margin-left: 6px;
  }
}

/* Container refinement — consistent gutter */
.container { padding-left: var(--jh-sp-5); padding-right: var(--jh-sp-5); }

@media (min-width: 992px) {
  .container { padding-left: var(--jh-sp-4); padding-right: var(--jh-sp-4); }
}

/* Section vertical spacing */
.site-content { margin-bottom: var(--jh-sp-9); }


/* =============================================================================
   6. HEADER — modern, clean, frosted-glass sticky
   ============================================================================= */

.site-header {
  background-color: var(--jh-bg-base);
  border-bottom:    1px solid var(--jh-border);
  transition:
    background-color var(--jh-t-slow) var(--jh-ease),
    box-shadow       var(--jh-t-slow) var(--jh-ease),
    border-color     var(--jh-t-slow) var(--jh-ease);
}

/* Desktop header inner — taller, flex-centered */
.site-header-inner {
  height:      auto;
  min-height:  var(--jh-header-h);
  padding-top:    0;
  padding-bottom: 0;
  align-items: center;
  gap:         var(--jh-sp-5);
}

/* Frosted glass when sticky */
.jobhunt-stick-this.stuck {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter:  blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), var(--jh-shadow-md) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6) !important;
}

/* Remove the old Animate.css "drop" — use a smooth slide-in instead */
.stuck.animated.fadeInDown {
  animation: jh-slide-down var(--jh-t-slow) var(--jh-ease-out) both;
}

@keyframes jh-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stuck.animated.fadeInDown { animation: none; }
}

/* Admin bar offset */
.admin-bar .site-header .jobhunt-stick-this.stuck { top: 32px; }

/* Site branding */
.site-branding .site-title {
  font-size:   1.5rem;
  font-weight: var(--jh-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color:       var(--jh-text-primary);
}

/* Logo sizing */
.site-branding img,
.site-branding .custom-logo { max-height: 48px; width: auto; }

/* Header bg-default (transparent) overrides */
.header-bg-default .site-header:not(.stuck) .site-branding .site-title,
.header-bg-default .site-header:not(.stuck) .site-branding .custom-logo-link {
  color: var(--jh-white);
}


/* =============================================================================
   7. PRIMARY NAVIGATION — better contrast, refined dropdowns
   ============================================================================= */

/* Nav link contrast fix: #7b8b8e → #4b5563 (4.9:1 on white — passes AA) */
.header-menu > li > a {
  color:       var(--jh-gray-600);
  font-size:   var(--jh-size-sm);
  font-weight: var(--jh-weight-semibold);
  padding:     0.5em 12px;
  border-radius: var(--jh-r-xs);
  transition: color var(--jh-t-fast) var(--jh-ease),
              background-color var(--jh-t-fast) var(--jh-ease);
}

.header-menu > li > a:hover,
.header-menu > li > a:focus {
  color:            var(--jh-text-primary);
  background-color: var(--jh-gray-50);
  text-decoration:  none;
}

/* Modern dropdown panel */
.header-menu .sub-menu {
  border:        1px solid var(--jh-border);
  border-radius: var(--jh-r-md);
  box-shadow:    var(--jh-shadow-lg);
  padding:       var(--jh-sp-2);
  min-width:     200px;
  background:    var(--jh-white);
  margin-top:    var(--jh-sp-3);
  overflow:      hidden;
}

.header-menu .sub-menu > li > a {
  font-size:     var(--jh-size-sm);
  color:         var(--jh-gray-600);
  padding:       8px 14px;
  border-radius: var(--jh-r-xs);
  font-weight:   var(--jh-weight-medium);
  transition: color            var(--jh-t-fast) var(--jh-ease),
              background-color var(--jh-t-fast) var(--jh-ease);
}

.header-menu .sub-menu > li > a:hover,
.header-menu .sub-menu > li > a:focus {
  background-color: var(--jh-gray-50);
  color:            var(--jh-primary);
}

.header-menu .sub-menu > li > a.active,
.header-menu .sub-menu > li > a:active {
  background-color: var(--jh-primary-light);
  color:            var(--jh-primary);
}

/* Remove legacy ::before triangle — replaced by sub-menu border+radius */
.header-menu > li > .sub-menu:before { display: none; }

/* "Post a Job" — gradient CTA button */
.post-a-job a {
  display:          inline-flex !important;
  align-items:      center;
  background:       var(--jh-gradient) !important;
  color:            var(--jh-white)    !important;
  border:           none               !important;
  border-radius:    var(--jh-btn-r)   !important;
  padding:          10px 20px          !important;
  font-size:        var(--jh-size-sm)  !important;
  font-weight:      var(--jh-weight-semibold) !important;
  letter-spacing:   0.01em;
  white-space:      nowrap;
  box-shadow:       var(--jh-shadow-sm);
  transition:       opacity     var(--jh-t-base) var(--jh-ease),
                    transform   var(--jh-t-base) var(--jh-ease),
                    box-shadow  var(--jh-t-base) var(--jh-ease) !important;
  outline:          none !important; /* replaced by focus-visible ring */
}

.post-a-job a:hover {
  opacity:    0.88 !important;
  transform:  translateY(-1px) !important;
  box-shadow: var(--jh-shadow-primary) !important;
  color:      var(--jh-white) !important;
}

.post-a-job a:active { transform: translateY(0) !important; }

.post-a-job a i { margin-right: 6px; }

/* Header search icon */
.site-header .header-search-icon .search-btn {
  color:      var(--jh-gray-500);
  transition: color var(--jh-t-fast) var(--jh-ease);
  border-radius: var(--jh-r-xs);
  padding: 6px;
}

.site-header .header-search-icon .search-btn:hover { color: var(--jh-text-primary); }

/* Header search popup */
.site-header .header-search-icon.show > .job-search-block,
.site-header .header-search-icon.show > .resume-search-block {
  border-bottom: 1px solid var(--jh-border);
  box-shadow:    var(--jh-shadow-md);
  top:           0;
}

/* Secondary nav (login/register icons) */
.site-header-inner > .header-menu > li > a {
  color:         var(--jh-gray-600);
  border-radius: var(--jh-r-xs);
  transition:    color            var(--jh-t-fast) var(--jh-ease),
                 background-color var(--jh-t-fast) var(--jh-ease);
}

.site-header-inner > .header-menu > li > a:hover { color: var(--jh-primary); }

/* Top bar */
.top-bar {
  font-size:        var(--jh-size-xs);
  background-color: var(--jh-gray-900);
  border-bottom:    none;
}

.top-bar a { color: var(--jh-gray-400); transition: color var(--jh-t-fast) var(--jh-ease); }
.top-bar a:hover { color: var(--jh-white); }
.top-bar .top-bar-left a { color: var(--jh-gray-400); }


/* =============================================================================
   8. MOBILE HEADER & OFF-CANVAS NAVIGATION
   ============================================================================= */

/* Handheld header */
.handheld-header {
  min-height: var(--jh-header-h);
  padding: var(--jh-sp-4) 0;
  align-items: center;
}

/* Hamburger/close toggle buttons */
.off-canvas-navbar-toggle-buttons .navbar-toggler {
  width:         40px;
  height:        40px;
  border:        1px solid var(--jh-border) !important;
  border-radius: var(--jh-r-sm);
  background:    var(--jh-white);
  color:         var(--jh-gray-600);
  font-size:     20px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition: background-color var(--jh-t-fast) var(--jh-ease),
              border-color     var(--jh-t-fast) var(--jh-ease),
              color            var(--jh-t-fast) var(--jh-ease);
  cursor: pointer;
}

.off-canvas-navbar-toggle-buttons .navbar-toggler:hover {
  background:   var(--jh-gray-50);
  border-color: var(--jh-border-strong) !important;
  color:        var(--jh-text-primary);
}

/* Transparent header: white hamburger */
.header-bg-default .off-canvas-navbar-toggle-buttons .navbar-toggler {
  border-color: rgba(255,255,255,0.35) !important;
  background:   rgba(255,255,255,0.12);
  color:        var(--jh-white);
}

.stuck .off-canvas-navbar-toggle-buttons .navbar-toggler {
  border-color: var(--jh-border) !important;
  background:   var(--jh-white);
  color:        var(--jh-gray-600);
}

/* ── Off-canvas panel: light theme ── */
.off-canvas-navigation {
  background-color: var(--jh-white);
  border-right:     none;
  box-shadow:       var(--jh-shadow-2xl);
  width:            280px;
  left:             -280px;
  padding:          var(--jh-sp-5) 0;
}

/* Navigation titles in off-canvas */
.off-canvas-navigation .nav-title,
.off-canvas-navigation .widgettitle,
.off-canvas-navigation .widget-title {
  color:        var(--jh-text-muted);
  font-size:    var(--jh-size-xs);
  font-weight:  var(--jh-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:      var(--jh-sp-4) var(--jh-sp-5) var(--jh-sp-2);
}

.off-canvas-navigation .nav-title a { color: inherit; padding: 0; border: none; }

/* Off-canvas links — light palette */
.off-canvas-navigation ul li a,
.off-canvas-navigation ul li.nav-title,
.off-canvas-navigation .yamm .yamm-content li a {
  color:       var(--jh-text-secondary) !important;
  border-bottom: 1px solid var(--jh-gray-100) !important;
  padding:     12px var(--jh-sp-5);
  font-size:   var(--jh-size-base);
  font-weight: var(--jh-weight-medium);
  transition:  background-color var(--jh-t-fast) var(--jh-ease),
               color            var(--jh-t-fast) var(--jh-ease);
}

.off-canvas-navigation ul li a:hover,
.off-canvas-navigation ul li a:focus,
.off-canvas-navigation .yamm .yamm-content li a:hover {
  background-color: var(--jh-gray-50)    !important;
  color:            var(--jh-primary)    !important;
  box-shadow:       none                 !important;
}

/* Dropdown toggle */
.off-canvas-navigation li .dropdown-toggle {
  border-bottom: 1px solid var(--jh-gray-100) !important;
  color:         var(--jh-gray-400) !important;
}

.off-canvas-navigation li .dropdown-toggle::after,
.off-canvas-navigation li.menu-item-has-children .dropdown-toggle::after {
  color: var(--jh-gray-400) !important;
}

/* Sub-menu in off-canvas */
.off-canvas-navigation .dropdown-menu,
.off-canvas-navigation ul .dropdown-menu {
  background-color: var(--jh-gray-50) !important;
  border:           none;
}

.off-canvas-navigation ul .dropdown-menu li .dropdown-toggle::after { color: var(--jh-gray-500) !important; }

/* Overlay backdrop */
.off-canvas-bg-opacity .site-content::before {
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(2px);
}


/* =============================================================================
   9. BUTTONS — consolidated system with gradient primary
   ============================================================================= */

/* ── Primary gradient button ── */
.btn-primary,
input[type="submit"],
button[type="submit"],
.submit-button,
.job-submit-btn,
.resume-submit-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  background:    var(--jh-gradient)          !important;
  color:         var(--jh-white)             !important;
  border:        none                        !important;
  border-radius: var(--jh-btn-r)            !important;
  padding:       12px 24px                   !important;
  font-size:     var(--jh-size-sm)           !important;
  font-weight:   var(--jh-weight-semibold)  !important;
  font-family:   var(--jh-font-heading)     !important;
  letter-spacing: 0.01em;
  line-height:   1.4;
  white-space:   nowrap;
  cursor:        pointer;
  box-shadow:    var(--jh-shadow-sm)        !important;
  transition:    opacity   var(--jh-t-base) var(--jh-ease),
                 transform var(--jh-t-base) var(--jh-ease),
                 box-shadow var(--jh-t-base) var(--jh-ease) !important;
  min-height:    var(--jh-input-h);
}

.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.submit-button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  opacity:    0.88    !important;
  transform:  translateY(-1px)         !important;
  box-shadow: var(--jh-shadow-primary) !important;
  color:      var(--jh-white)          !important;
}

.btn-primary:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform:  translateY(0)  !important;
  box-shadow: var(--jh-shadow-sm) !important;
}

/* ── Outline / secondary button ── */
.button,
.btn-outline,
.action-link,
.btn-secondary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background:       transparent;
  color:            var(--jh-primary);
  border:           2px solid var(--jh-primary);
  border-radius:    var(--jh-btn-r);
  padding:          10px 22px;
  font-size:        var(--jh-size-sm);
  font-weight:      var(--jh-weight-semibold);
  font-family:      var(--jh-font-heading);
  letter-spacing:   0.01em;
  cursor:           pointer;
  transition: background-color var(--jh-t-base) var(--jh-ease),
              color             var(--jh-t-base) var(--jh-ease),
              box-shadow        var(--jh-t-base) var(--jh-ease),
              transform         var(--jh-t-base) var(--jh-ease);
}

.button:hover,
.btn-outline:hover,
.action-link:hover {
  background-color: var(--jh-primary);
  color:            var(--jh-white);
  box-shadow:       var(--jh-shadow-primary);
  transform:        translateY(-1px);
  text-decoration:  none;
}

/* White outline variant (banners on dark bg) */
.banners-block .action-link,
.app-promo-link a,
.banner-action a {
  background:    transparent;
  color:         var(--jh-white);
  border-color:  rgba(255,255,255,0.7);
  border-width:  2px;
  border-radius: var(--jh-btn-r);
  padding:       12px 28px;
  font-weight:   var(--jh-weight-semibold);
  transition:    background-color var(--jh-t-base) var(--jh-ease),
                 border-color     var(--jh-t-base) var(--jh-ease),
                 box-shadow       var(--jh-t-base) var(--jh-ease),
                 transform        var(--jh-t-base) var(--jh-ease);
}

.banners-block .action-link:hover,
.app-promo-link a:hover,
.banner-action a:hover {
  background-color: var(--jh-white);
  color:            var(--jh-text-primary);
  border-color:     var(--jh-white);
  transform:        translateY(-1px);
  box-shadow:       0 8px 24px rgba(0,0,0,0.2);
}

/* Consistent border-radius everywhere */
.dual-banner-inner .banners .banner-action a {
  border-radius: var(--jh-btn-r) !important;
}

/* Back-to-top scroll button */
#scrollUp {
  background:    var(--jh-gradient);
  color:         var(--jh-white);
  border:        none;
  border-radius: var(--jh-r-full);
  width:         48px;
  height:        48px;
  font-size:     20px;
  box-shadow:    var(--jh-shadow-md);
  transition:    transform   var(--jh-t-base) var(--jh-ease),
                 box-shadow  var(--jh-t-base) var(--jh-ease),
                 opacity     var(--jh-t-base) var(--jh-ease);
}

#scrollUp:hover {
  transform:  translateY(-3px);
  box-shadow: var(--jh-shadow-primary);
  opacity:    0.9;
}


/* =============================================================================
   10. FORMS — 48px targets, 1px resting border, clean focus rings
   ============================================================================= */

/* Inputs, selects, textareas */
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
.input-text,
textarea,
select {
  min-height:    var(--jh-input-h) !important;
  padding:       12px 16px         !important;
  font-size:     var(--jh-size-base)   !important;
  border:        1px solid var(--jh-border)     !important; /* was 2px */
  border-radius: var(--jh-r-sm)                 !important;
  background:    var(--jh-bg-base)              !important;
  color:         var(--jh-text-secondary)        !important;
  transition:    border-color var(--jh-t-fast) var(--jh-ease),
                 box-shadow   var(--jh-t-fast) var(--jh-ease) !important;
  outline:       none;
  width:         100%;
  line-height:   1.5;
}

input[type="password"]:hover,
input[type="text"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
.input-text:hover,
textarea:hover,
select:hover {
  border-color: var(--jh-border-strong) !important;
}

input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
.input-text:focus,
textarea:focus,
select:focus {
  border-color:     var(--jh-border-focus)   !important;
  box-shadow:       var(--jh-shadow-focus)   !important;
  background-color: var(--jh-white)          !important;
  outline:          none                     !important;
}

textarea {
  min-height: 120px !important;
  resize:     vertical;
}

/* Labels */
label {
  font-size:     var(--jh-size-sm);
  font-weight:   var(--jh-weight-semibold);
  color:         var(--jh-text-secondary);
  margin-bottom: 6px;
  display:       block;
}

/* Placeholders */
::placeholder {
  color:   var(--jh-text-placeholder);
  opacity: 1;
}

/* Select native dropdown */
select {
  padding-right: 40px !important;
  appearance:    none;
  cursor:        pointer;
}

/* Search form widget */
.widget_search form.search-form label {
  border:        1px solid var(--jh-border);
  border-radius: var(--jh-r-sm);
  background:    var(--jh-bg-base);
  transition:    border-color var(--jh-t-fast) var(--jh-ease),
                 box-shadow   var(--jh-t-fast) var(--jh-ease);
  padding:       0;
}

.widget_search form.search-form label:focus-within {
  border-color: var(--jh-border-focus);
  box-shadow:   var(--jh-shadow-focus);
}

.widget_search form.search-form .search-field {
  border:        none !important;
  box-shadow:    none !important;
  min-height:    44px !important;
  font-size:     var(--jh-size-sm) !important;
  padding:       10px 36px 10px 14px !important;
}

/* Job search form (hero) */
.job-search-form input[type="text"],
.job-search-form input[type="search"],
.resume-search-form input[type="text"],
.resume-search-form input[type="search"] {
  border-radius: var(--jh-r-sm) !important;
  min-height:    52px !important;
  font-size:     var(--jh-size-base) !important;
}

/* WPForms overrides — remove !important chains from elementor-style.css */
.footer-subscribe-form form input[type="email"] {
  border:        1px solid rgba(255,255,255,0.25) !important;
  border-radius: var(--jh-r-sm) 0 0 var(--jh-r-sm) !important;
  min-height:    50px !important;
  background:    rgba(255,255,255,0.08) !important;
  color:         var(--jh-white) !important;
  font-size:     var(--jh-size-sm) !important;
}

.footer-subscribe-form form input[type="email"]::placeholder {
  color: rgba(255,255,255,0.5);
}

.footer-submit-button,
.footer-subscribe-form .wpforms-submit-container button {
  background:    var(--jh-gradient) !important;
  border:        none !important;
  border-radius: 0 var(--jh-r-sm) var(--jh-r-sm) 0 !important;
  min-height:    50px !important;
  padding:       0 20px !important;
  font-weight:   var(--jh-weight-semibold) !important;
  color:         var(--jh-white) !important;
  transition:    opacity var(--jh-t-fast) var(--jh-ease) !important;
}

.footer-submit-button:hover { opacity: 0.88 !important; }

/* Contact form */
.jobhunt-contact-form form input[type="email"],
.jobhunt-contact-form form input[type="text"],
.jobhunt-contact-form form textarea {
  border:        1px solid var(--jh-border) !important;
  border-radius: var(--jh-r-sm) !important;
  font-size:     var(--jh-size-sm) !important;
  padding:       12px 16px !important;
  transition:    border-color var(--jh-t-fast) var(--jh-ease),
                 box-shadow   var(--jh-t-fast) var(--jh-ease) !important;
}

.jobhunt-contact-form form input:focus,
.jobhunt-contact-form form textarea:focus {
  border-color: var(--jh-border-focus) !important;
  box-shadow:   var(--jh-shadow-focus) !important;
}

.jobhunt-contact-form .wpforms-submit-container button {
  background:    var(--jh-gradient) !important;
  border:        none !important;
  border-radius: var(--jh-r-sm) !important;
  min-height:    48px !important;
  padding:       0 28px !important;
  font-weight:   var(--jh-weight-semibold) !important;
  box-shadow:    var(--jh-shadow-sm) !important;
  transition:    opacity var(--jh-t-base) var(--jh-ease),
                 transform var(--jh-t-base) var(--jh-ease),
                 box-shadow var(--jh-t-base) var(--jh-ease) !important;
}

.jobhunt-contact-form .wpforms-submit-container button:hover {
  opacity:    0.88 !important;
  transform:  translateY(-1px) !important;
  box-shadow: var(--jh-shadow-primary) !important;
}


/* =============================================================================
   11. CARDS — modern elevation, hover lift, no layout-shift border
   ============================================================================= */

/* ── Blog grid cards ── */
.blog-grid article,
.blog-grid article.post {
  margin-bottom: var(--jh-sp-6);
}

.blog-grid article .post-inner,
.blog-grid article.post .post-inner {
  border-radius: var(--jh-card-r);
  border:        1px solid transparent !important; /* eliminates hover layout-shift */
  box-shadow:    var(--jh-shadow-sm);
  background:    var(--jh-white);
  overflow:      hidden;
  transition:    transform  var(--jh-t-slow) var(--jh-ease),
                 box-shadow var(--jh-t-slow) var(--jh-ease) !important;
  display:       flex;
  flex-direction: column;
  height:        100%;
}

.blog-grid article:hover .post-inner,
.blog-grid article:focus-within .post-inner,
.blog-grid article.post:hover .post-inner {
  transform:  translateY(-4px);
  box-shadow: var(--jh-shadow-xl) !important;
}

/* Responsive image aspect ratio — no hard 280px */
.blog-grid article .post-thumbnail,
.blog-grid article.post .post-thumbnail {
  overflow:      hidden;
  border-radius: var(--jh-r-md) var(--jh-r-md) 0 0;
  aspect-ratio:  16 / 9;
  background:    var(--jh-gray-100);
}

.blog-grid article .post-thumbnail img,
.blog-grid article.post .post-thumbnail img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover;
  border-radius: var(--jh-r-md) var(--jh-r-md) 0 0;
  transform:  scale(1.04);
  transition: transform var(--jh-t-slow) var(--jh-ease) !important;
}

.blog-grid article:hover .post-thumbnail img { transform: scale(1); }

/* Content area inside blog card */
.blog-grid .content-body {
  padding:    var(--jh-sp-5) var(--jh-sp-5) var(--jh-sp-4);
  text-align: left;
  margin-top: 0;
  flex:       1;
}

.blog-grid article .entry-title,
.blog-grid article.post .entry-title {
  font-size:   var(--jh-size-lg) !important;
  font-weight: var(--jh-weight-semibold);
  line-height: var(--jh-leading-snug);
  margin-bottom: var(--jh-sp-3);
}

.blog-grid article .entry-title a { color: var(--jh-text-primary); }
.blog-grid article .entry-title a:hover { color: var(--jh-primary); }

/* Read more link */
.blog-grid article .post-readmore {
  border-top: 1px solid var(--jh-gray-100);
  margin-top: auto;
}

.blog-grid article .post-readmore a {
  padding:     12px var(--jh-sp-5);
  font-size:   var(--jh-size-sm) !important;
  font-weight: var(--jh-weight-semibold);
  color:       var(--jh-primary);
  transition:  color var(--jh-t-fast) var(--jh-ease) !important;
}

.blog-grid article .post-readmore a:hover { color: var(--jh-primary-dark); }

/* Entry meta in card */
.blog-grid article .entry-meta {
  background:    transparent;
  padding:       var(--jh-sp-4) var(--jh-sp-5) 0;
  border-radius: 0;
  margin-bottom: 0;
  justify-content: flex-start;
  gap: var(--jh-sp-3);
}

/* ── Feature cards ── */
.feature-inner {
  padding:       var(--jh-sp-5);
  border:        1px solid var(--jh-border);
  border-radius: var(--jh-card-r);
  transition:    border-color var(--jh-t-base) var(--jh-ease),
                 box-shadow   var(--jh-t-base) var(--jh-ease),
                 transform    var(--jh-t-base) var(--jh-ease);
  background:    var(--jh-white);
  height:        100%;
}

.feature-inner:hover,
.feature-inner:focus-within {
  border-color: var(--jh-primary-alpha-20);
  box-shadow:   var(--jh-shadow-md);
  transform:    translateY(-3px);
}

/* Feature icon — 50% radius fix */
.feature-thumbnail i {
  border-radius: 50% !important; /* was 50px — now truly circular */
  width:  56px;
  height: 56px;
  font-size:  22px;
  display:    inline-flex;
  align-items: center;
  justify-content: center;
  background:  var(--jh-gray-50);
  color:       var(--jh-gray-500);
  border:      1px solid var(--jh-border);
  transition:  background-color var(--jh-t-base) var(--jh-ease),
               color            var(--jh-t-base) var(--jh-ease),
               border-color     var(--jh-t-base) var(--jh-ease);
  flex-shrink: 0;
  margin-right: var(--jh-sp-4);
}

.feature-inner:hover .feature-thumbnail i,
.feature-inner:focus .feature-thumbnail i {
  background:  var(--jh-primary);
  color:       var(--jh-white);
  border-color: var(--jh-primary);
}

.feature-title {
  font-size:   var(--jh-size-base) !important;
  font-weight: var(--jh-weight-semibold);
  color:       var(--jh-text-primary);
  margin:      var(--jh-sp-2) 0 var(--jh-sp-1);
}

.feature-desc { color: var(--jh-text-muted); font-size: var(--jh-size-sm); }

/* ── Job category cards ── */
.job-categories-section .job-category,
.v1.job-categories-section .job-category,
.v2.job-categories-section .job-category {
  border:        1px solid var(--jh-border);
  border-radius: var(--jh-card-r);
  background:    var(--jh-white);
  padding:       var(--jh-sp-5);
  text-align:    center;
  transition:    border-color var(--jh-t-base) var(--jh-ease),
                 box-shadow   var(--jh-t-base) var(--jh-ease),
                 transform    var(--jh-t-base) var(--jh-ease);
  cursor:        pointer;
}

.job-categories-section .job-category:hover,
.v1.job-categories-section .job-category:hover,
.v2.job-categories-section .job-category:hover {
  border-color: var(--jh-primary-alpha-20);
  box-shadow:   var(--jh-shadow-md);
  transform:    translateY(-3px);
}

/* ── Widget area cards (sidebar filters) ── */
.company-type-v3 .widget-area-inner .widget,
.company-type-v2 .widget-area-inner .widget,
.type-list-classic .widget-area-inner .widget {
  border-radius: var(--jh-r-md) !important; /* was 4px */
  border:        1px solid var(--jh-border) !important; /* was 2px */
  box-shadow:    var(--jh-shadow-xs);
}

/* How-it-works step icon — modern filled */
.how-it-works-section .step i {
  background:    var(--jh-gray-50);
  color:         var(--jh-primary);
  border:        2px solid var(--jh-primary-alpha-12) !important;
  border-radius: 50% !important;
  transition:    background-color var(--jh-t-base) var(--jh-ease),
                 color            var(--jh-t-base) var(--jh-ease),
                 box-shadow       var(--jh-t-base) var(--jh-ease);
}

.how-it-works-section .step:hover i,
.how-it-works-section .step:focus i {
  background: var(--jh-gradient-subtle);
  box-shadow: var(--jh-shadow-focus);
}

/* Testimonial cards — modern inner card */
.v1 .testimonial-inner {
  border-radius: var(--jh-r-lg) !important;
  box-shadow:    var(--jh-shadow-md) !important;
  border:        none;
  padding:       var(--jh-sp-6) var(--jh-sp-6) var(--jh-sp-5) !important;
  transition:    box-shadow var(--jh-t-base) var(--jh-ease);
}

.v1 .testimonial:hover .testimonial-inner { box-shadow: var(--jh-shadow-lg) !important; }

.v1 .testimonial-inner .customer-feedback { color: var(--jh-text-muted); }
.v1 .testimonial-inner .customer-name { color: var(--jh-text-primary); font-weight: var(--jh-weight-semibold); }

/* FAQ block */
.jobhunt-faq-section .faq-content-question-header {
  border-radius: var(--jh-r-sm);
  transition:    background-color var(--jh-t-fast) var(--jh-ease);
}

.faq-content-question + .faq-content-question { margin-top: var(--jh-sp-2); }

.jobhunt-faq-section .faq-content-question-header h5[data-toggle="collapse"] {
  font-weight: var(--jh-weight-semibold);
  color:       var(--jh-text-primary);
}

/* Tag cloud */
.widget_tag_cloud .tagcloud a,
.tag-share .tags-links a {
  border-radius: var(--jh-r-full) !important;
  border:        1px solid var(--jh-border) !important;
  color:         var(--jh-gray-600) !important;
  font-size:     var(--jh-size-xs) !important;
  font-weight:   var(--jh-weight-medium) !important;
  padding:       4px 12px !important;
  transition:    background-color var(--jh-t-fast) var(--jh-ease),
                 border-color     var(--jh-t-fast) var(--jh-ease),
                 color            var(--jh-t-fast) var(--jh-ease) !important;
  background:    var(--jh-white) !important;
}

.widget_tag_cloud .tagcloud a:hover,
.tag-share .tags-links a:hover {
  background-color: var(--jh-primary-light) !important;
  border-color:     var(--jh-primary) !important;
  color:            var(--jh-primary) !important;
}


/* =============================================================================
   12. HOMEPAGE SECTIONS
   ============================================================================= */

/* ── Banner section ── */
.banners-block {
  border-radius: var(--jh-r-lg);
  overflow: hidden;
}

.banners-block.with-action .section-title {
  font-size:      clamp(1.75rem, 3vw + 1rem, 3rem) !important;
  font-weight:    var(--jh-weight-bold);
  letter-spacing: -0.03em;
  line-height:    var(--jh-leading-tight);
}

/* Dual banner CTA alignment */
.dual-banner-inner .banners .banner-title {
  font-size:      clamp(1.5rem, 3vw, 2.5rem) !important;
  font-weight:    var(--jh-weight-bold);
  letter-spacing: -0.02em;
}

/* ── Stats counters ── */
.jh-site-stats-section .site-stats .stats-count {
  font-size:    clamp(2.5rem, 5vw, 3.75rem) !important;
  font-weight:  var(--jh-weight-bold);
  letter-spacing: -0.03em;
  line-height:  1;
}

.jh-site-stats-section .site-stats .stats-title {
  font-size:   var(--jh-size-base) !important;
  color:       var(--jh-text-muted);
  margin-top:  var(--jh-sp-2);
  font-weight: var(--jh-weight-medium);
}

/* Stats on dark bg stay white */
.v1.jh-site-stats-section .site-stats .stats-count,
.v1.jh-site-stats-section .site-stats .stats-title {
  color: var(--jh-white) !important;
}

/* Stats on mobile: 2-col grid instead of single column */
@media (max-width: 575.98px) {
  .jh-site-stats-section .site-stats-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--jh-sp-7) var(--jh-sp-5);
    flex-direction: unset !important;
  }

  .jh-site-stats-section .site-stats-list li + li { margin-top: 0 !important; }
}

/* ── How it works — connector ── */
@media (min-width: 768px) {
  .how-it-works-section.v1 .step + .step::before,
  .how-it-works-section.v2 .step + .step::before {
    content:          '';
    position:         absolute;
    top:              28px;
    left:             -50%;
    width:            100%;
    height:           1px;
    background:       var(--jh-border);
    border-radius:    var(--jh-r-full);
    border:           none !important;
  }
}

/* ── App promo ── */
.app-promo-link a {
  border-radius:  var(--jh-r-md) !important;
  min-width:      200px !important;
}

/* ── Company carousel / logo strip ── */
.company-info-carousel img {
  filter:     grayscale(60%);
  opacity:    0.7;
  transition: filter  var(--jh-t-base) var(--jh-ease),
              opacity var(--jh-t-base) var(--jh-ease);
}

.company-info-carousel img:hover { filter: grayscale(0); opacity: 1; }

/* ── Slick dots modernised ── */
.slick-dots li button::before {
  font-size: 8px !important;
  color:     var(--jh-gray-300) !important;
  opacity:   1 !important;
  transition: color var(--jh-t-fast) var(--jh-ease) !important;
}

.slick-dots li.slick-active button::before { color: var(--jh-primary) !important; }

/* Slick arrows */
.slick-prev, .slick-next {
  width:         40px;
  height:        40px;
  background:    var(--jh-white) !important;
  border:        1px solid var(--jh-border) !important;
  border-radius: var(--jh-r-full) !important;
  box-shadow:    var(--jh-shadow-sm) !important;
  transition:    box-shadow var(--jh-t-fast) var(--jh-ease),
                 transform  var(--jh-t-fast) var(--jh-ease) !important;
}

.slick-prev:hover, .slick-next:hover {
  box-shadow: var(--jh-shadow-md) !important;
  transform:  scale(1.08) !important;
}

.slick-prev::before, .slick-next::before {
  color:     var(--jh-text-primary) !important;
  font-size: 16px !important;
  opacity:   1 !important;
}


/* =============================================================================
   13. FOOTER — dark, spacious, modern
   ============================================================================= */

.site-footer { background-color: var(--jh-bg-dark); }

/* Footer widget area */
.footer-v1 .footer-widgets,
.footer-v3 .footer-widgets,
.footer-v4 .footer-widgets,
.footer-v5 .footer-widgets {
  background-color: var(--jh-bg-dark);
}

.footer-widgets-inner {
  padding:   var(--jh-sp-10) 0 var(--jh-sp-8);
  row-gap:   var(--jh-sp-7); /* vertical gap between stacked columns */
}

/* Widget title in footer */
.footer-widgets .widget-title,
.footer-widgets span.widget-title {
  color:          var(--jh-white);
  font-size:      var(--jh-size-sm);
  font-weight:    var(--jh-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom:  var(--jh-sp-4);
}

/* Footer links */
.footer-v1 .footer-widgets a,
.footer-v3 .footer-widgets a,
.footer-v4 .footer-widgets a,
.footer-v5 .footer-widgets a {
  color:      var(--jh-gray-400);
  font-size:  var(--jh-size-sm);
  transition: color var(--jh-t-fast) var(--jh-ease);
}

.footer-v1 .footer-widgets a:hover,
.footer-v3 .footer-widgets a:hover,
.footer-v4 .footer-widgets a:hover,
.footer-v5 .footer-widgets a:hover { color: var(--jh-white); }

/* Footer nav menu items */
.footer-v1 .footer-widgets .widget_nav_menu .menu-item a,
.footer-v3 .footer-widgets .widget_nav_menu .menu-item a,
.footer-v4 .footer-widgets .widget_nav_menu .menu-item a,
.footer-v5 .footer-widgets .widget_nav_menu .menu-item a {
  color:      var(--jh-gray-400);
  font-size:  var(--jh-size-sm);
  transition: color var(--jh-t-fast) var(--jh-ease);
  padding:    4px 0;
  display:    inline-block;
}

.footer-v1 .footer-widgets .widget_nav_menu .menu-item a:hover { color: var(--jh-white); }

/* Body text in footer */
.footer-widgets address,
.footer-widgets .textwidget,
.footer-widgets .textwidget p,
.footer-widgets .widget ul li {
  color:      var(--jh-gray-500);
  font-size:  var(--jh-size-sm);
  line-height: var(--jh-leading-relaxed);
}

/* Copyright bar */
.footer-copyright-bar {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-copyright-bar .footer-copyright-bar-inner {
  min-height: 72px;    /* was fixed 80px */
  height:     auto;
  padding:    var(--jh-sp-4) 0;
}

.footer-v1 .footer-copyright-bar {
  background-color: rgba(0,0,0,0.25);
}

.footer-v1 .footer-copyright-bar .copyright-info,
.footer-v1 .footer-copyright-bar a {
  color:     var(--jh-gray-500);
  font-size: var(--jh-size-sm);
}

.footer-v1 .footer-copyright-bar a:hover { color: var(--jh-gray-300); }


/* =============================================================================
   14. SIDEBAR & WIDGETS
   ============================================================================= */

.widget { margin-bottom: var(--jh-sp-6); }

.widget .widget-title {
  font-size:      var(--jh-size-sm);
  font-weight:    var(--jh-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--jh-text-primary);
  margin-bottom:  var(--jh-sp-4);
  padding-bottom: var(--jh-sp-3);
  border-bottom:  2px solid var(--jh-primary);
  display:        inline-block;
}

/* Widget filter accordion toggle */
.widget_jobhunt_wpjm_layered_nav .widget-title,
.widget_jobhunt_wpjmr_layered_nav .widget-title,
.widget_jobhunt_wpjmc_layered_nav .widget-title,
.widget_jobhunt_wpjm_date_filter .widget-title,
.widget_jobhunt_wpjmr_date_filter .widget-title,
.widget_jobhunt_wpjmc_date_filter .widget-title {
  display:       flex;
  text-transform: none;
  letter-spacing: normal;
  font-size:      var(--jh-size-sm);
  color:          var(--jh-text-primary);
  font-weight:    var(--jh-weight-semibold);
  border-bottom:  1px solid var(--jh-border);
  padding-bottom: var(--jh-sp-3);
  margin-bottom:  var(--jh-sp-3);
  cursor:         pointer;
  transition:     color var(--jh-t-fast) var(--jh-ease);
}

.widget_jobhunt_wpjm_layered_nav .widget-title:hover,
.widget_jobhunt_wpjmr_layered_nav .widget-title:hover,
.widget_jobhunt_wpjmc_layered_nav .widget-title:hover {
  color: var(--jh-primary);
}

/* Layered nav checkbox items */
.jobhunt-wpjm-widget-layered-nav-list__item a,
.jobhunt-wpjmc-widget-layered-nav-list__item a,
.jobhunt-wpjmr-widget-layered-nav-list__item a {
  font-size:  var(--jh-size-sm) !important;
  color:      var(--jh-text-muted);
  transition: color var(--jh-t-fast) var(--jh-ease);
}

.jobhunt-wpjm-widget-layered-nav-list__item a:hover,
.jobhunt-wpjmc-widget-layered-nav-list__item a:hover {
  color: var(--jh-primary);
}

/* Sidebar search input */
.widget-area .jobhunt-wpjm-search,
.widget-area .jobhunt-wpjm-location-search,
.widget-area .jobhunt-wpjmc-search,
.widget-area .jobhunt-wpjmr-search {
  border:        1px solid var(--jh-border) !important;
  border-radius: var(--jh-r-sm) !important;
  min-height:    var(--jh-input-h) !important;
  transition:    border-color var(--jh-t-fast) var(--jh-ease) !important;
}

.widget-area .jobhunt-wpjm-search:focus-within,
.widget-area .jobhunt-wpjm-location-search:focus-within {
  border-color: var(--jh-border-focus) !important;
  box-shadow:   var(--jh-shadow-focus) !important;
}


/* =============================================================================
   15. PAGINATION
   ============================================================================= */

.pagination li a,
.pagination li > span,
.wpjm-pagination li a,
.wpjm-pagination li > span,
.wpjmr-pagination li a,
.wpjmr-pagination li > span,
.wpjmc-pagination li a,
.wpjmc-pagination li > span {
  border:        1px solid var(--jh-border)        !important;
  border-radius: var(--jh-r-sm)                    !important;
  color:         var(--jh-text-muted)              !important;
  font-size:     var(--jh-size-sm)                 !important;
  font-weight:   var(--jh-weight-semibold)         !important;
  padding:       8px 14px                          !important;
  transition:    background-color var(--jh-t-fast) var(--jh-ease),
                 border-color     var(--jh-t-fast) var(--jh-ease),
                 color            var(--jh-t-fast) var(--jh-ease) !important;
  min-width:     40px;
  text-align:    center;
  display:       flex;
  align-items:   center;
  justify-content: center;
}

.pagination li:hover a,
.wpjm-pagination li:hover a,
.wpjmr-pagination li:hover a {
  border-color:     var(--jh-primary)      !important;
  color:            var(--jh-primary)      !important;
  background-color: var(--jh-primary-light) !important;
}

.pagination .current,
.wpjm-pagination .current,
.wpjmr-pagination .current {
  background:   var(--jh-gradient) !important;
  border-color: transparent        !important;
  color:        var(--jh-white)    !important;
}

.pagination li + li { margin-left: 6px !important; }


/* =============================================================================
   16. POST NAVIGATION
   ============================================================================= */

.post-navigation .nav-icon {
  border-radius:  var(--jh-r-full) !important;
  border:         1px solid var(--jh-border) !important;
  width:          48px  !important;
  height:         48px  !important;
  line-height:    46px  !important;
  transition:     border-color var(--jh-t-fast) var(--jh-ease),
                  background   var(--jh-t-fast) var(--jh-ease) !important;
}

.post-navigation .nav-icon:hover {
  background:   var(--jh-primary) !important;
  border-color: var(--jh-primary) !important;
  color:        var(--jh-white)   !important;
}


/* =============================================================================
   17. PAGE HEADER (breadcrumb area)
   ============================================================================= */

.site-content-page-header { background-color: var(--jh-bg-subtle); }

.site-content-page-title {
  font-size:      clamp(1.5rem, 3vw, 2.5rem) !important;
  font-weight:    var(--jh-weight-bold);
  letter-spacing: -0.02em;
}


/* =============================================================================
   18. HOVER EFFECTS & MICRO-INTERACTIONS
   ============================================================================= */

/* Generic card hover lift helper class */
.jh-hover-lift {
  transition: transform  var(--jh-t-slow) var(--jh-ease),
              box-shadow var(--jh-t-slow) var(--jh-ease);
}
.jh-hover-lift:hover {
  transform:  translateY(-4px);
  box-shadow: var(--jh-shadow-lg);
}

/* Post image pan on hover */
.hentry .post-thumbnail img {
  transition: transform var(--jh-t-slow) var(--jh-ease) !important;
}

.blog-list .hentry .post-thumbnail img { transform: none !important; }

/* WP Job Manager job listing row */
.job_listing {
  transition: background-color var(--jh-t-fast) var(--jh-ease),
              box-shadow        var(--jh-t-fast) var(--jh-ease);
  border-radius: var(--jh-r-sm);
}

.job_listing:hover {
  background-color: var(--jh-bg-subtle);
  box-shadow:       var(--jh-shadow-xs);
}

/* Smooth dropdown transition */
.header-menu .sub-menu {
  opacity:    0;
  visibility: hidden;
  transform:  translateY(8px);
  transition: opacity    var(--jh-t-base) var(--jh-ease),
              visibility var(--jh-t-base) var(--jh-ease),
              transform  var(--jh-t-base) var(--jh-ease) !important;
  display:    block !important; /* override display:none — use opacity/visibility instead */
}

@media (min-width: 992px) {
  .header-menu .menu-item-has-children:hover > .sub-menu,
  .header-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
  }
}

/* Handheld sub-menu: keep display:block toggle JS behavior */
@media (max-width: 991.98px) {
  .handheld-header-menu.header-menu .sub-menu {
    opacity:    1 !important;
    visibility: visible !important;
    transform:  none !important;
    transition: none !important;
    display:    none !important; /* restored for JS .toggled-on */
  }

  .handheld-header-menu.header-menu .sub-menu.toggled-on {
    display: block !important;
  }
}


/* =============================================================================
   19. ENTRANCE ANIMATIONS (scroll-triggered via .animated class)
   ============================================================================= */

/* Subtle fade-up — replaces abrupt Animate.css variants */
@keyframes jh-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.jh-fade-up   { animation: jh-fade-up  var(--jh-t-slow) var(--jh-ease-out) both; }
.jh-fade-in   { animation: jh-fade-in  var(--jh-t-base) var(--jh-ease-out) both; }

/* Stagger delay utilities */
.jh-delay-1 { animation-delay: 60ms; }
.jh-delay-2 { animation-delay: 120ms; }
.jh-delay-3 { animation-delay: 180ms; }
.jh-delay-4 { animation-delay: 240ms; }

/* Keep Animate.css classes but soften them */
.fadeInUp, .fadeInDown, .fadeIn, .fadeInLeft, .fadeInRight {
  animation-duration: var(--jh-t-slow) !important;
  animation-timing-function: var(--jh-ease-out) !important;
}


/* =============================================================================
   20. TABLET EXPERIENCE (768px – 991px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Handheld header stays clean at tablet */
  .handheld-header { padding: var(--jh-sp-5) 0; }

  /* Blog grid: 2 columns at tablet */
  .blog-grid article,
  .blog-grid article.post {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Features: 2 columns */
  .features .feature { flex: 0 0 50%; max-width: 50%; }

  /* Homepage stats: 2×2 grid */
  .jh-site-stats-section .site-stats-list {
    display:       grid !important;
    grid-template-columns: 1fr 1fr;
    gap:           var(--jh-sp-7) var(--jh-sp-5);
    flex-direction: unset !important;
  }

  .jh-site-stats-section .site-stats-list li + li { margin-top: 0 !important; }

  /* Footer: 2-col grid */
  .footer-widgets-inner .footer-widget {
    flex:      0 0 50%;
    max-width: 50%;
  }

  /* How it works: 3-col at tablet is ok, ensure spacing */
  .how-it-works-section .step + .step { margin-top: 0 !important; }

  /* Section title scale */
  .section-header .section-title { font-size: 1.75rem !important; }

  /* Container gutter at tablet */
  .container { padding-left: var(--jh-sp-5); padding-right: var(--jh-sp-5); }
}


/* =============================================================================
   21. MOBILE EXPERIENCE (< 768px)
   ============================================================================= */

@media (max-width: 767.98px) {
  /* Heading scale — mobile-first */
  h1, .h1 { font-size: var(--jh-size-2xl) !important; }
  h2, .h2 { font-size: var(--jh-size-xl)  !important; }
  h3, .h3 { font-size: var(--jh-size-lg)  !important; }

  /* Section spacing tighter on mobile */
  .jh-section         { margin-bottom: var(--jh-sp-8); }
  .section-header     { margin-bottom: var(--jh-sp-5); }
  .footer-widgets-inner { padding: var(--jh-sp-8) 0 var(--jh-sp-6); }

  /* Section titles */
  .section-header .section-title { font-size: var(--jh-size-2xl) !important; }
  .section-header .section-sub-title { font-size: var(--jh-size-base) !important; }

  /* Banner section */
  .banners-block.with-action { padding: var(--jh-sp-8) 0 !important; }
  .banners-block.with-action .section-title { font-size: var(--jh-size-2xl) !important; }

  /* How it works mobile stack */
  .how-it-works-section .step + .step { margin-top: var(--jh-sp-7) !important; }

  /* Testimonials — remove massive side padding on v2/v3 */
  .v2 .testimonials .testimonial-inner,
  .v3 .testimonials .testimonial-inner { padding-left: var(--jh-sp-4) !important; padding-right: var(--jh-sp-4) !important; }

  /* Dual banner: full-width block on mobile */
  .dual-banner-inner { flex-direction: column; height: auto !important; }
  .dual-banner-inner .banners .banner { padding: var(--jh-sp-8) var(--jh-sp-5) !important; }
  .dual-banner-inner .banners .banner::after { left: 0 !important; right: 0 !important; }

  /* Blog grid: single column on mobile */
  .blog-grid article,
  .blog-grid article.post {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Footer single column */
  .footer-widgets-inner .footer-widget {
    flex:      0 0 100%;
    max-width: 100%;
  }

  /* App promo stacked */
  .app-promo-link + .app-promo-link { margin-left: 0 !important; margin-top: var(--jh-sp-3) !important; }

  /* Forms full-width on mobile */
  .job-search-form, .resume-search-form { flex-direction: column; }

  /* Button full-width on mobile (optional utility) */
  .btn-block-mobile { width: 100% !important; display: flex !important; }

  /* Container mobile gutter */
  .container { padding-left: var(--jh-sp-4); padding-right: var(--jh-sp-4); }

  /* Handheld header */
  .handheld-header { min-height: 64px; }

  /* Off-canvas at mobile — push #page by new panel width */
  .off-canvas-navigation { width: 80vw !important; left: calc(-80vw) !important; }

  /* Page push matches new width */
  /* (jobhunt.js sets translateX(250px) — we let that remain; the overlay covers the rest) */
}


/* =============================================================================
   22. DESKTOP EXPERIENCE (992px+)
   ============================================================================= */

@media (min-width: 992px) {
  /* 3-column blog grid */
  .blog-grid article,
  .blog-grid article.post {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .blog-grid.right-sidebar article,
  .blog-grid.right-sidebar article.post,
  .blog-grid.left-sidebar article,
  .blog-grid.left-sidebar article.post {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* 3-column features */
  .features .feature { flex: 0 0 33.333%; max-width: 33.333%; }

  /* How it works: no top margin in 3-col row */
  .how-it-works-section.v3,
  .how-it-works-section.v4 { padding: var(--jh-sp-9) 0; }

  /* Section spacing — generous */
  .jh-section { margin-bottom: var(--jh-sp-10); }

  /* Site content area */
  .site-content { margin-bottom: var(--jh-sp-10); }
}


/* =============================================================================
   23. LARGE DESKTOP (1200px+)
   ============================================================================= */

@media (min-width: 1200px) {
  /* Container max-width already set to 1170px by theme — maintain */
  .container { max-width: 1170px; }

  /* Extra section breathing room */
  .jh-section { margin-bottom: var(--jh-sp-10); }
}


/* =============================================================================
   24. UTILITY OVERRIDES & CLEANUPS
   ============================================================================= */

/* Replace all `transition: all 0.4s` with targeted properties where accessible */
.banners-block:not(.with-action),
.post-a-job a,
.job_listing,
.feature-inner,
#scrollUp {
  transition: color            var(--jh-t-base) var(--jh-ease),
              background-color var(--jh-t-base) var(--jh-ease),
              border-color     var(--jh-t-base) var(--jh-ease),
              box-shadow       var(--jh-t-base) var(--jh-ease),
              transform        var(--jh-t-base) var(--jh-ease),
              opacity          var(--jh-t-base) var(--jh-ease) !important;
}

/* Section backgrounds — subtle tinting for alternating sections */
.testimonial-block.v1 {
  border-radius: var(--jh-r-xl);
  overflow:      hidden;
}

/* Scroll-up button position */
#scrollUp {
  bottom: var(--jh-sp-5) !important;
  right:  var(--jh-sp-5) !important;
}

/* Off-canvas overlay text visibility fix */
.off-canvas-bg-opacity #page { overflow: visible; }

/* Site footer newsletter logo widget */
.footer-v1 .footer-widgets .site-title {
  font-size: var(--jh-size-2xl) !important;
  color:     var(--jh-white)    !important;
}

/* Consistent link color in dark footer */
.footer-v1 .footer-widgets .widget_text .textwidget p strong { color: var(--jh-white); }

/* Remove vendor-prefixed scroll for footer search select */
.footer-v1 .footer-widgets select {
  background-color: rgba(255,255,255,0.06) !important;
  border:           1px solid rgba(255,255,255,0.12) !important;
  color:            var(--jh-gray-300) !important;
  border-radius:    var(--jh-r-sm) !important;
}

/* Blog list posts — modern side-by-side */
.blog-list article .post-inner { gap: var(--jh-sp-5); }

/* Comments area */
.comment-respond .comment-form input,
.comment-respond .comment-form textarea {
  font-size:     var(--jh-size-base) !important;
  border:        1px solid var(--jh-border) !important;
  border-radius: var(--jh-r-sm) !important;
  min-height:    var(--jh-input-h) !important;
  padding:       12px 16px !important;
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--jh-gray-50); }
::-webkit-scrollbar-thumb { background: var(--jh-gray-300); border-radius: var(--jh-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--jh-gray-400); }

/* ── WP Job Manager filter badges ── */
.jobhunt-wpjm-active-filters > ul .chosen {
  border-radius: var(--jh-r-full) !important;
  font-size:     var(--jh-size-xs) !important;
  padding:       3px 10px !important;
}

/* ── Elementor nav menu mobile: override hardcoded black ── */
@media (max-width: 1200px) {
  .mas-elementor-nav-menu { background-color: var(--jh-white) !important; }
  .mas-nav-menu .collapse.show { margin-top: var(--jh-sp-2) !important; }
  .mas-nav-menu .handheld {
    border-radius: var(--jh-r-lg) !important;
    box-shadow:    var(--jh-shadow-xl) !important;
    border:        1px solid var(--jh-border) !important;
  }
}


/* =============================================================================
   RESPONSIVE FIXES — R01 – R25
   Verified against: 320px · 375px · 425px · 768px · 1024px · 1440px
   ============================================================================= */


/* ── R01 ──────────────────────────────────────────────────────────────────────
   BUG: Job-categories horizontal scroll axis was overflow-y (wrong axis).
   Fix: Use overflow-x:auto so the icon-grid scrolls horizontally on mobile.
   ─────────────────────────────────────────────────────────────────────────── */
.job-categories-section .job-categories {
  overflow-x: auto  !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--jh-gray-300) transparent;
  padding-bottom: var(--jh-sp-2);
}

.job-categories-section .job-category {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Improve horizontal scroll UX on touch */
.job-categories-section .job-categories::-webkit-scrollbar { height: 4px; }
.job-categories-section .job-categories::-webkit-scrollbar-thumb {
  background: var(--jh-gray-300);
  border-radius: var(--jh-r-full);
}


/* ── R02 ──────────────────────────────────────────────────────────────────────
   BUG: Dashboard tables lack overflow-x wrapper between 576–767px.
   The existing sm-block-display rule only fires at <576px; at 576-767px the
   multi-column table overflows without a scrollable container.
   ─────────────────────────────────────────────────────────────────────────── */
#job-manager-job-dashboard,
#job-manager-company-dashboard,
#resume-manager-candidate-dashboard,
#job-manager-job-applications {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Also cover any plain WordPress tables inside post content or shortcodes */
.entry-content table,
.entry-content .tablepress,
.single_job_listing table,
.woocommerce-account table,
.job-manager-form table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Responsive label for dashboard table rows at 576-767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  #job-manager-job-dashboard table.job-manager-jobs,
  #job-manager-company-dashboard table.job-manager-companies,
  #resume-manager-candidate-dashboard table.resume-manager-resumes {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* ── R03 ──────────────────────────────────────────────────────────────────────
   BUG: Resume search filter form uses width:50% / 25% / 25% that do not
   collapse on mobile — creating columns as narrow as 96px on a 375px screen.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .search_resumes {
    flex-direction: column !important;
    gap:            var(--jh-sp-3);
  }

  .search_resumes .search_keywords.resume-filter,
  .search_resumes .search_location.resume-filter,
  .search_resumes .search_categories.resume-filter {
    width:        100% !important;
    padding:      0 !important;
    margin-bottom: var(--jh-sp-3);
  }

  .search_resumes .search_categories.resume-filter .select2-container {
    width: 100% !important;
  }
}


/* ── R04 ──────────────────────────────────────────────────────────────────────
   BUG: .jh-scroll-to uses a 130×130px absolute circle positioned at top:100%
   of the hero, pushing the next section down by 65px+ and overflowing at
   320–375px viewports.
   Fix: hide below md; scale down at md.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .jh-scroll-to { display: none !important; }
}

@media (min-width: 768px) {
  .jh-scroll-to a {
    width:  80px !important;
    height: 80px !important;
  }

  .jh-scroll-to a i {
    font-size: 18px !important;
    padding:   10px !important;
  }
}


/* ── R05 ──────────────────────────────────────────────────────────────────────
   BUG: Homepage v4 search form is `position:absolute; bottom:-50px` at lg+.
   At 768-991px (tablet, now showing mobile header) this absolute-positioned
   form sits outside its container and overlaps the next section.
   Fix: use static positioning at tablet; absolute only at 1024px+.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-template-template-homepage-v4 .job-search-block .job-search-form,
  .page-template-template-homepage-v4 .resume-search-block .resume-search-form {
    position:      static !important;
    bottom:        auto   !important;
    border-radius: var(--jh-r-md) !important;
    margin-top:    var(--jh-sp-5);
  }
}

/* At the new 992px desktop threshold the form is back to absolute */
@media (min-width: 1024px) {
  .page-template-template-homepage-v4 .job-search-block .job-search-form,
  .page-template-template-homepage-v4 .resume-search-block .resume-search-form {
    position: absolute;
    bottom:   -50px;
  }
}

/* Give v4 hero breathing room so the absolute form doesn't clip at 1024px */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .page-template-template-homepage-v4 .site-content-page-header-inner {
    min-height: 420px !important;
    height:     auto  !important;
  }
}


/* ── R06 ──────────────────────────────────────────────────────────────────────
   BUG: Multiple component sections use hardcoded `height` (not min-height).
   At large system fonts or zoomed viewports, content clips out of the box.
   ─────────────────────────────────────────────────────────────────────────── */

/* Banner with image */
.banner-with-image-section-inner {
  height:     auto   !important;
  min-height: 200px;
}

/* Dual banner */
.dual-banner-inner {
  height:     auto   !important;
  min-height: 0;
}

/* App promo */
.app-promo-section-inner {
  height:     auto   !important;
  min-height: 0;
  padding-bottom: var(--jh-sp-7);
}

/* Company single header */
.single-company .site-content-page-header-inner {
  height:     auto   !important;
  min-height: 200px;
}

/* Job category fixed-height cells v1/v3/v4 */
.job-categories-section.v1 .job-category,
.job-categories-section.v3 .job-category,
.job-categories-section.v4 .job-category {
  height: auto !important;
}

.job-categories-section.v3 .job-category a,
.job-categories-section.v4 .job-category a {
  height:     auto   !important;
  min-height: 140px;
}

/* Pricing plan header card */
.job-pricing-inner .job-pricing-header {
  height:   auto !important;
  flex:     0 0 auto !important;
  min-height: 160px;
}

/* Company/resume list page hero header */
.type-list-classic.post-type-archive-job_listing .site-content-page-header-inner,
.type-grid.post-type-archive-job_listing .site-content-page-header-inner {
  height: auto !important;
  min-height: 280px;
}


/* ── R07 ──────────────────────────────────────────────────────────────────────
   BUG: Job search inputs inside hero blocks use `height: 60px` (not
   min-height), clipping text at zoom ≥150% and on high-DPI mobile fonts.
   ─────────────────────────────────────────────────────────────────────────── */
.job-search-block input[type="text"],
.job-search-block #search_category,
.resume-search-block input[type="text"],
.resume-search-block #search_category,
.post-type-archive-job_listing .job-search-block input[type="text"] {
  height:     auto   !important;
  min-height: 52px;
  line-height: 1.4;
}

.job-search-submit button,
.resume-search-submit button {
  height:     auto   !important;
  min-height: 52px;
}

/* Job manager form inputs — raise from 44px to 48px */
.job-manager-form input[type="text"],
.job-manager-form select {
  height:     auto   !important;
  min-height: 48px;
}

/* Sorting control bar selects — raise from 35px to 44px touch target */
.jh-jobs-control-bar .jobs-sorting select,
.jh-companies-control-bar select {
  height:     auto   !important;
  min-height: 44px;
}


/* ── R08 ──────────────────────────────────────────────────────────────────────
   BUG: .job-type badges have a fixed `width: 110px` that truncates long job
   type strings (e.g. "Part Time", "Internship") and wastes space on narrow
   screens.
   ─────────────────────────────────────────────────────────────────────────── */
.job-type {
  width:        auto       !important;
  min-width:    80px;
  white-space:  normal;
  text-align:   center;
  padding:      4px 10px   !important;
  border-radius: var(--jh-r-full) !important;
  font-size:    var(--jh-size-xs) !important;
  font-weight:  var(--jh-weight-semibold) !important;
}


/* ── R09 ──────────────────────────────────────────────────────────────────────
   BUG: Search form inputs use `padding: 14px 60px 14px 30px` everywhere.
   On 320px screens the 60px right-icon-padding consumes 21% of the input
   width, obscuring typed text.
   Fix: reduce horizontal padding below 425px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .job-search-block input[type="text"],
  .job-search-block #search_category,
  .resume-search-block input[type="text"],
  .resume-search-block #search_category {
    padding: 12px 40px 12px 14px !important;
  }

  /* Scale down the inline icon */
  .job-search-keywords::after,
  .resume-search-keywords::after,
  .job-search-location::after,
  .resume-search-location::after {
    font-size: 20px !important;
    right:     8px  !important;
  }
}


/* ── R10 ──────────────────────────────────────────────────────────────────────
   BUG: Company A-Z letter bar has `padding: 0 30px` on its ul, which
   at 320px leaves only 260px of space for 26 letters — they clip or overflow.
   Fix: reduce padding and enable wrapping on mobile.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .company-letters ul {
    padding:         8px 12px !important;
    flex-wrap:       wrap !important;
    justify-content: flex-start !important;
    height:          auto !important;
    gap:             4px;
  }

  .company-letters ul li {
    padding: 4px !important;
  }
}


/* ── R11 ──────────────────────────────────────────────────────────────────────
   BUG: Desktop nav items compress badly at 1024px now that the breakpoint
   moved from 1200px → 992px.  Items with long labels run into the Post-a-Job
   button.
   Fix: tighten nav item padding between 992px–1100px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1100px) {
  .header-menu > li > a {
    padding:   0.4em 8px !important;
    font-size: 13px      !important;
  }

  .post-a-job a {
    padding:   8px 14px !important;
    font-size: 13px     !important;
  }

  .site-header-inner { gap: var(--jh-sp-3) !important; }
}

/* Between 1100-1199px: moderate compression */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .header-menu > li > a { padding: 0.5em 10px !important; }
  .site-header-inner    { gap: var(--jh-sp-4) !important; }
}


/* ── R12 ──────────────────────────────────────────────────────────────────────
   BUG: Testimonial v2/v3 `.testimonial-inner` has `padding: 0 210px` which
   was designed for xl+ (1200px) but the existing media query fires at lg+
   (992px with our new breakpoint, or 1024px on a common device).
   At 1024px: 1024 - 32px gutters = 992px content; 992 - 420px = only 572px
   for the quote — workable but plus the `.before/.after` quote-mark SVGs
   positioned at ±28% overflow the viewport.
   Fix: rein in the padding and clip the overflow decorations.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .testimonials .testimonial-inner,
  .v3 .testimonials .testimonial-inner {
    padding-left:  80px !important;
    padding-right: 80px !important;
  }

  /* Clip the floating quotation-mark SVGs before they exceed viewport */
  .v2 .testimonial .customer-feedback::before,
  .v2 .testimonial .customer-feedback::after,
  .v3 .testimonial .customer-feedback::before,
  .v3 .testimonial .customer-feedback::after {
    display: none !important;
  }
}

/* Tablet range gets even tighter padding */
@media (min-width: 768px) and (max-width: 991.98px) {
  .testimonials .testimonial-inner,
  .v3 .testimonials .testimonial-inner {
    padding-left:  var(--jh-sp-5) !important;
    padding-right: var(--jh-sp-5) !important;
  }

  .v2 .testimonial .customer-feedback::before,
  .v2 .testimonial .customer-feedback::after,
  .v3 .testimonial .customer-feedback::before,
  .v3 .testimonial .customer-feedback::after {
    display: none !important;
  }
}


/* ── R13 ──────────────────────────────────────────────────────────────────────
   BUG: Company single page logo image uses explicit px dimensions
   (`width:160px; height:138px`) that only apply at xl. But the company logo
   area between 992px–1199px has no constraint, letting the image stretch.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .company-single-head__left .company-logo img {
    width:     120px !important;
    max-width: 120px !important;
    height:    104px !important;
    object-fit: cover;
  }
}

/* Company logo images generally should never overflow their container */
.company-single-head__left .company-logo img,
.company-single-head__left .company-logo .company_logo {
  max-width: 100%;
}


/* ── R14 ──────────────────────────────────────────────────────────────────────
   BUG: `.company-location-map` button on company single v2 has
   `min-width: 165px` which at 320px forces the button wider than the screen
   minus left padding, causing horizontal overflow.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .company-single-head__right .company-location-map {
    min-width: 0 !important;
    width:     100% !important;
  }
}


/* ── R15 ──────────────────────────────────────────────────────────────────────
   BUG: `.view-resume-action a` has `min-width: 150px` which on a 320px screen
   leaves no room alongside candidate image and details.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .view-resume-action a {
    min-width:       0   !important;
    width:           100% !important;
    justify-content: center !important;
  }
}


/* ── R16 ──────────────────────────────────────────────────────────────────────
   BUG: Blockquote uses `background-size: 161px 112px` — the decorative SVG
   quotation marks are too large for a 320px screen and the 10% horizontal
   padding only gives ~32px on each side.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  blockquote {
    padding:         32px 4% !important;
    background-size: 80px 56px !important;
    font-size:       1rem !important;
  }
}


/* ── R17 ──────────────────────────────────────────────────────────────────────
   BUG: Hero paddings are set per-template version. Several have no rule
   covering the 425–767px range, inheriting the desktop paddings that make the
   hero excessively tall on mobile.
   ─────────────────────────────────────────────────────────────────────────── */

/* Homepage v1 / v3 hero — tighten at all mobile sizes */
@media (max-width: 767.98px) {
  .page-template-template-homepage-v1 .site-content-page-header-inner,
  .header-search-icon .site-content-page-header-inner {
    padding-top:    56px !important;
    padding-bottom: 100px !important;
  }

  .page-template-template-homepage-v3 .site-content-page-header-inner {
    padding: 56px 16px 80px !important;
  }

  /* v5 hero */
  .page-template-template-homepage-v5 .site-content-page-header-inner {
    padding:   56px 0 72px !important;
    max-width: 100%         !important;
  }
}

/* 425px step for v1/v3 */
@media (max-width: 424.98px) {
  .page-template-template-homepage-v1 .site-content-page-header-inner,
  .header-search-icon .site-content-page-header-inner {
    padding-top:    40px !important;
    padding-bottom: 80px !important;
  }

  .page-template-template-homepage-v3 .site-content-page-header-inner {
    padding: 40px 12px 64px !important;
  }

  /* v5 */
  .page-template-template-homepage-v5 .site-content-page-header-inner {
    padding: 40px 0 60px !important;
  }
}


/* ── R18 ──────────────────────────────────────────────────────────────────────
   BUG: Job listing company-logo flex cell has no override at <425px.
   At 320px with `max-width:180px; flex: 0 0 180px` (md rule) the logo cell
   is wider than the remaining content area after padding.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .job-listing-company-logo {
    max-width: 100% !important;
    flex:      0 0 100% !important;
    margin-bottom: var(--jh-sp-4) !important;
  }
}


/* ── R19 ──────────────────────────────────────────────────────────────────────
   BUG: Job pricing `woocommerce-Price-amount` is 60px — same size as the
   stats counter. On mobile this makes pricing cards very tall.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .job-pricing-inner .woocommerce-Price-amount {
    font-size: 2.5rem !important;
  }
}


/* ── R20 ──────────────────────────────────────────────────────────────────────
   BUG: Company card v3 has `min-height: 240px` that makes cards much taller
   than needed on 320px where only a logo + name is shown.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .company-type-v3 .jh-companies .company-inner {
    min-height: 0 !important;
    padding:    var(--jh-sp-5) var(--jh-sp-4) var(--jh-sp-4) !important;
  }
}


/* ── R21 ──────────────────────────────────────────────────────────────────────
   BUG: Register/login form tab labels use `font-size: 20px; padding: 20px`
   which at 320px makes each tab take ~160px, overflowing the form card.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .jobhunt-register-login-form .nav li a {
    padding:   12px 8px !important;
    font-size: 15px     !important;
  }
}


/* ── R22 ──────────────────────────────────────────────────────────────────────
   All hero search form fields — ensure full-width stacking on mobile.
   The existing breakpoint-down(md) rules mostly do this, but the `padding`
   and negative `margin` from `@include make-row` can create horizontal overflow
   on 320px.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Reset row negative margins that create overflow */
  .job-search-block form,
  .resume-search-block form {
    margin-left:  0 !important;
    margin-right: 0 !important;
  }

  /* Each field: full-width, no horizontal gutter */
  .job-search-block form > div,
  .resume-search-block form > div {
    padding-left:  0 !important;
    padding-right: 0 !important;
    width:         100% !important;
    max-width:     100% !important;
    min-width:     0   !important;
    flex:          0 0 100% !important;
    margin-bottom: var(--jh-sp-3) !important;
  }

  /* Remove the last-field bottom margin */
  .job-search-block form > div:last-child,
  .resume-search-block form > div:last-child {
    margin-bottom: 0 !important;
  }

  /* Inputs full-width */
  .job-search-block form input[type="text"],
  .job-search-block form #search_category,
  .resume-search-block form input[type="text"],
  .resume-search-block form #search_category {
    width:     100% !important;
    min-width: 0   !important;
  }

  /* Submit button full-width */
  .job-search-submit button,
  .resume-search-submit button {
    width:         100% !important;
    border-radius: var(--jh-r-sm) !important;
    height:        auto  !important;
    min-height:    52px  !important;
    padding:       12px  !important;
    display:       flex  !important;
    align-items:   center !important;
    justify-content: center !important;
  }

  /* Show search text label on mobile */
  .job-search-text,
  .resume-search-text {
    display: inline !important;
    order:   -1 !important;
    margin-right: var(--jh-sp-2) !important;
    font-size: var(--jh-size-base) !important;
    color: var(--jh-white) !important;
  }
}


/* ── R23 ──────────────────────────────────────────────────────────────────────
   BUG: Homepage v2 search form wraps a pill (border-radius:50px) that works
   at md+ but at <768px falls back to stacked blocks with 16px gutter inside
   an rgba(255,255,255,0.2) card. The `margin: 0 16px 40px` means on 320px
   the card is only 288px wide with 16px wasted on each side.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .page-template-template-homepage-v2 .job-search-block .job-search-form,
  .page-template-template-homepage-v2 .resume-search-block .resume-search-form {
    margin:        0 0 var(--jh-sp-6) !important;
    border-radius: var(--jh-r-md)     !important;
    padding:       var(--jh-sp-3)     !important;
  }
}


/* ── R24 ──────────────────────────────────────────────────────────────────────
   BUG: The app-promo section at 320px stacks `.app-promo-link + app-promo-link`
   with only a top-margin, but the `min-width: 230px` on the anchor overflows
   a 288px container.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 424.98px) {
  .app-promo-link a {
    min-width:       0    !important;
    width:           100% !important;
    justify-content: center !important;
  }

  .app-promo-links { gap: var(--jh-sp-3); }

  .app-promo-link + .app-promo-link {
    margin-left: 0 !important;
    margin-top:  var(--jh-sp-3) !important;
  }
}

@media (min-width: 425px) and (max-width: 767.98px) {
  .app-promo-link a { min-width: 0 !important; width: 100% !important; }
}


/* ── R25 ──────────────────────────────────────────────────────────────────────
   Global overflow guard: prevent any direct child of .container from creating
   horizontal document overflow.  This is a safety net for edge-cases not
   individually addressed above.
   ─────────────────────────────────────────────────────────────────────────── */
.container { overflow-x: clip; }

/* But allow slick carousel arrows to overflow their container */
.slick-initialized.container,
.company-profile-inner,
.testimonial-block .slick-initialized {
  overflow-x: visible;
}

/* Prevent the wrapper from clipping sticky elements */
.off-canvas-wrapper { overflow-x: clip; }

/* Ensure images never break out of their columns */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Table safety: max-width guard so tables never push layout */
table {
  max-width: 100%;
  word-break: break-word;
}

/* =============================================================================
   END OF RESPONSIVE FIXES
   ============================================================================= */