/*
Theme Name:   Maxhunt Child
Theme URI:    https://maxhuntresource.com.sg/
Description:  Child theme for Maxhunt Resources. Owns the brand design tokens and all custom CSS so nothing is lost when Hello Elementor updates.
Author:       Maxhunt Resources
Author URI:   https://maxhuntresource.com.sg/
Template:     hello-elementor
Version:      1.1.0
Text Domain:  maxhunt-child
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags:         elementor, recruitment
*/

/* ==========================================================================
   CONTENTS
   1. Design tokens
   2. Brand button system
   3. Accessibility — focus, motion
   4. Layout corrections
   5. WP Job Manager chrome
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Extracted from the live Elementor build. Every custom value on this site
   should resolve to a token here — never a raw hex in a rule below.
   ========================================================================== */

:root {

  /* --- Brand ramp ------------------------------------------------------
     One hue (16.8deg) held across the ramp; only lightness moves. */
  --mh-terracotta:        #C96A45;  /* brand primary — surfaces, large type */
  --mh-terracotta-light:  #D97B4F;  /* gradient end, hover start */
  --mh-peach:             #F6B18A;  /* hover gradient */
  --mh-peach-mid:         #F2A074;  /* 3-stop hover midpoint */
  --mh-gold:              #FFD978;  /* hover gradient terminal warmth */
  --mh-gold-soft:         #FFBC7D;  /* accent highlight */

  /* --- Brand, contrast-safe -------------------------------------------
     Same hue and saturation as --mh-terracotta, darkened until it clears
     WCAG AA (4.5:1) for text at normal sizes. Use these whenever the type
     is under ~19px; use the ramp above for large display type and fills. */
  --mh-terracotta-text:   #B05633;  /* 4.50:1 on cream — small brand text */
  --mh-terracotta-solid:  #BA5B36;  /* 4.53:1 vs white — fills under white text */

  /* --- Surfaces --------------------------------------------------------- */
  --mh-cream:             #FBF2EC;  /* primary section background */
  --mh-cream-alt:         #FBF6F0;  /* alternating section background */
  --mh-offwhite:          #F7F3EE;  /* button borders over terracotta */
  --mh-blush:             #F6E9E2;  /* subtle fills */
  --mh-tan:               #E7CFC2;  /* card borders, dividers (non-text) */
  --mh-white:             #FFFFFF;

  /* --- Ink -------------------------------------------------------------- */
  --mh-ink-strong:        #111827;  /* strongest headings */
  --mh-ink:               #1F2933;  /* headings, header colour */
  --mh-text:              #4B5563;  /* body copy — 6.84:1 on cream */
  --mh-text-muted:        #69707E;  /* secondary copy — 4.51:1 on cream */
  --mh-link:              #2563EB;  /* inline links — 4.68:1 on cream */

  /* --- Gradients -------------------------------------------------------- */
  --mh-gradient:          linear-gradient(135deg, var(--mh-terracotta-solid) 0%, var(--mh-terracotta-light) 100%);
  --mh-gradient-hover:    linear-gradient(135deg, var(--mh-terracotta-light) 0%, var(--mh-peach) 100%);
  --mh-gradient-hover-warm: linear-gradient(135deg, var(--mh-peach) 0%, var(--mh-peach-mid) 50%, var(--mh-gold) 100%);

  /* --- Shape ------------------------------------------------------------ */
  --mh-radius-pill:       999px;    /* buttons — the dominant shape sitewide */
  --mh-radius-card:       10px;     /* cards, images */
  --mh-radius-lg:         22px;     /* large feature panels */

  /* --- Elevation -------------------------------------------------------
     Tinted with the brand hue rather than neutral black, so shadows read as
     warm shade on a warm palette instead of grey haze. */
  --mh-shadow-btn:        0 14px 32px rgba(44, 25, 17, .28);
  --mh-shadow-btn-rest:   0 2px 6px  rgba(44, 25, 17, .10);
  --mh-shadow-card:       0 8px 24px rgba(31, 41, 51, .08);

  /* --- Type ------------------------------------------------------------- */
  --mh-font:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mh-weight-regular:    400;
  --mh-weight-medium:     500;
  --mh-weight-semibold:   600;
  --mh-weight-bold:       700;

  /* --- Motion ----------------------------------------------------------
     Exponential ease-out: fast departure, settled arrival. */
  --mh-ease:              cubic-bezier(.22, 1, .36, 1);
  --mh-duration:          .25s;
  --mh-duration-slow:     .35s;

  /* --- Controls --------------------------------------------------------- */
  --mh-btn-padding:       14px 30px;
  --mh-btn-size:          14px;
  --mh-btn-border:        2px;
  --mh-focus-ring:        var(--mh-ink);
  --mh-focus-width:       3px;
  --mh-focus-offset:      3px;
}


/* ==========================================================================
   2. BRAND BUTTON SYSTEM
   One treatment, shared by every plugin-rendered control. Elementor's own
   buttons are styled in the builder and are deliberately untouched here.

   !important is retained throughout: these rules previously lived in
   Customizer > Additional CSS, which prints after all enqueued stylesheets.
   From the theme they load earlier, so the flags preserve the cascade that
   the plugin defaults were already losing to.
   ========================================================================== */

.job_filters input[type="submit"],
.job_filters button,
.job-manager-form input[type="submit"],
.job_listing .apply-button,
.job_listing .application_button {
  position: relative;
  overflow: hidden;                                 /* clips the hover wash to the pill */
  isolation: isolate;                               /* keeps ::before under the label */
  padding: var(--mh-btn-padding);
  border: var(--mh-btn-border) solid var(--mh-offwhite) !important;
  border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font);
  font-size: var(--mh-btn-size);
  font-weight: var(--mh-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  background: var(--mh-gradient) !important;
  color: var(--mh-white) !important;
  box-shadow: var(--mh-shadow-btn-rest);
  transition:
    color       var(--mh-duration-slow) var(--mh-ease),
    transform   var(--mh-duration)      var(--mh-ease),
    box-shadow  var(--mh-duration)      var(--mh-ease);
}

/* The hover wash sits on a pseudo-element so the gradient can cross-fade
   rather than snap — background-image itself is not interpolable. */
.job_filters button::before,
.job_listing .apply-button::before,
.job_listing .application_button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mh-gradient-hover);
  opacity: 0;
  transition: opacity var(--mh-duration-slow) var(--mh-ease);
}

/* Job cards keep their warmer three-stop wash, ending in gold. */
.job_listing .apply-button::before,
.job_listing .application_button::before {
  background: var(--mh-gradient-hover-warm);
}

.job_filters input[type="submit"]:hover,
.job_filters button:hover,
.job-manager-form input[type="submit"]:hover,
.job_listing .apply-button:hover,
.job_listing .application_button:hover {
  color: var(--mh-ink) !important;                  /* 8.13:1 on the peach wash */
  transform: translateY(-2px);
  box-shadow: var(--mh-shadow-btn);
}

.job_filters button:hover::before,
.job_listing .apply-button:hover::before,
.job_listing .application_button:hover::before {
  opacity: 1;
}

/* `input` elements do not render ::before, so the cross-fade above can never
   reach them. They take the wash directly instead — it snaps rather than
   interpolates, which is what background-image does, but the state still
   reads. Anything rendered as a <button> or <a> gets the smooth path. */
.job_filters input[type="submit"]:hover,
.job-manager-form input[type="submit"]:hover {
  background: var(--mh-gradient-hover) !important;
}

/* Pressed: drop back to the resting plane so the click has weight. */
.job_filters input[type="submit"]:active,
.job_filters button:active,
.job-manager-form input[type="submit"]:active,
.job_listing .apply-button:active,
.job_listing .application_button:active {
  transform: translateY(0);
  box-shadow: var(--mh-shadow-btn-rest);
}

.job_filters input[type="submit"]:disabled,
.job_filters button:disabled,
.job-manager-form input[type="submit"]:disabled {
  opacity: .55;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.job_filters input[type="submit"]:disabled::before,
.job_filters button:disabled::before,
.job-manager-form input[type="submit"]:disabled::before {
  opacity: 0;
}

/* Label rides above the wash where markup provides a span. */
.job_listing .apply-button span,
.job_listing .application_button span {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   3. ACCESSIBILITY
   ========================================================================== */

/* Keyboard focus. The brand buttons carry a cream border on a mid-tone fill,
   so a light ring would vanish — the ring is ink, offset clear of the pill. */
.job_filters input[type="submit"]:focus-visible,
.job_filters button:focus-visible,
.job-manager-form input[type="submit"]:focus-visible,
.job_listing .apply-button:focus-visible,
.job_listing .application_button:focus-visible {
  outline: var(--mh-focus-width) solid var(--mh-focus-ring);
  outline-offset: var(--mh-focus-offset);
}

/* Honour a reduced-motion preference: the colour cross-fade stays, the
   travel and lift do not. */
@media (prefers-reduced-motion: reduce) {

  .job_filters input[type="submit"],
  .job_filters button,
  .job-manager-form input[type="submit"],
  .job_listing .apply-button,
  .job_listing .application_button {
    transition: color var(--mh-duration-slow) linear;
  }

  .job_filters input[type="submit"]:hover,
  .job_filters button:hover,
  .job-manager-form input[type="submit"]:hover,
  .job_listing .apply-button:hover,
  .job_listing .application_button:hover,
  .job_filters input[type="submit"]:active,
  .job_filters button:active,
  .job-manager-form input[type="submit"]:active,
  .job_listing .apply-button:active,
  .job_listing .application_button:active {
    transform: none;
  }
}


/* ==========================================================================
   4. LAYOUT CORRECTIONS
   Removes the gap Hello Elementor leaves between the header and the first
   Elementor section. Migrated verbatim in intent from Customizer CSS.
   ========================================================================== */

body,
.site-content,
.page-content,
.content-area,
#content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.elementor-location-header + .elementor-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Sticky-header spacers from Ultimate Addons, which reserve height the
   Elementor header does not need. */
.uae-sticky-header-spacer,
.uae-sticky-placeholder {
  display: none !important;
  height: 0 !important;
}

/* Was `margin-bottom<ZWSP>មាន: 0 !important` in the Customizer — a stray
   zero-width space and pasted Khmer characters made the property invalid, so
   browsers dropped the declaration and this rule never applied. Corrected. */
.elementor-location-header {
  margin-bottom: 0 !important;
}

.maxhunt-contact-section,
.elementor-section:has(#maxhunt-contact) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Collapses sections left genuinely empty by the builder. Preserved from the
   Customizer as-is because it is load-bearing for current spacing, but it is
   blunt: it hides ANY childless section sitewide, so a section emptied during
   editing will vanish rather than show as a gap. Scope it to the pages that
   need it if that ever causes confusion. */
.elementor-section:not(:has(*)):not(:has(#maxhunt-contact)) {
  display: none;
}


/* ==========================================================================
   5. WP JOB MANAGER CHROME
   The RSS link is now unhooked in functions.php via
   `job_manager_job_filters_showing_jobs_links`, which removes it from the
   markup entirely. This rule remains only as a fallback for cached or
   template-overridden output.
   ========================================================================== */

a.rss_link,
.job-manager-jobs a.rss_link,
.job-manager-archive a.rss_link,
.wp-job-manager-jobs a.rss_link,
.job-manager-jobs-header a[href*="rss"],
.job-manager-jobs-header a[href*="feed"] {
  display: none !important;
}