/* ------------------------------------------------------------------
   HireGate HR — theme styling built on the v3 tokens.
   Everything here is written with logical properties (inline/block)
   so the site can mirror for Arabic later without a rewrite.
   ------------------------------------------------------------------ */

/* --- Base --------------------------------------------------------- */
body{
  font-family:var(--hg-font-body);
  font-size:var(--hg-body);
  line-height:var(--hg-body-lh);
  color:var(--hg-ink);
  background:var(--hg-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--hg-font-head);
  color:var(--hg-head);
  margin-block:0 var(--hg-space-4);
  text-wrap:balance;
}
h1,.hg-h1{font-size:var(--hg-h1);line-height:var(--hg-h1-lh);letter-spacing:var(--hg-h1-ls);font-weight:700}
h2,.hg-h2{font-size:var(--hg-h2);line-height:var(--hg-h2-lh);letter-spacing:var(--hg-h2-ls);font-weight:700}
h3,.hg-h3{font-size:var(--hg-h3);line-height:var(--hg-h3-lh);letter-spacing:var(--hg-h3-ls);font-weight:600}
h4,.hg-h4{font-size:var(--hg-h4);line-height:var(--hg-h4-lh);letter-spacing:var(--hg-h4-ls);font-weight:600}
p{margin-block:0 var(--hg-space-4)}
p:last-child{margin-block-end:0}

/* Max 65 characters of running text. Applied to prose, not to layout. */
.hg-prose p,.hg-lead,.entry-content > p{max-width:65ch}
.hg-lead{font-size:calc(var(--hg-body) + 2px);color:var(--hg-ink)}
small,.hg-small{font-size:var(--hg-small);line-height:var(--hg-small-lh)}
.hg-muted{color:var(--hg-muted)}

/* Links are actions, so links are blue. Always. */
a{color:var(--hg-blue-600);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--hg-blue-700)}

/* --- Overline — green-700, never blue ----------------------------- */
.hg-overline{
  display:block;
  font-family:var(--hg-font-body);
  font-size:var(--hg-overline);
  font-weight:600;
  line-height:1.4;
  letter-spacing:var(--hg-overline-ls);
  text-transform:uppercase;
  color:var(--hg-green-700);
  margin-block-end:var(--hg-space-3);
}
.hg-band-dark .hg-overline{color:var(--hg-green-500)}

/* --- Sections and rhythm ------------------------------------------ */
.hg-section{padding-block:var(--hg-section-y)}
.hg-band-surface{background:var(--hg-surface)}
.hg-band-white{background:var(--hg-white)}
.hg-band-dark{background:var(--hg-ink-navy);color:#fff}
.hg-band-dark h1,.hg-band-dark h2,.hg-band-dark h3,.hg-band-dark h4,
.hg-band-dark .elementor-heading-title{color:#fff}
.hg-band-dark p{color:rgba(255,255,255,.82)}

/* --- Buttons ------------------------------------------------------
   Primary is blue. Secondary is an outline. There is no green button
   in any state on any ground — a button is an action.
   ------------------------------------------------------------------ */
.hg-btn,
.elementor-button,
.wp-block-button__link,
input[type=submit],
button[type=submit]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--hg-space-2);
  min-height:var(--hg-control-height);
  padding-inline:var(--hg-space-6);
  padding-block:0;
  border-radius:var(--hg-radius-button);
  border:1.5px solid transparent;
  font-family:var(--hg-font-body);
  font-size:16px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--hg-transition),color var(--hg-transition),border-color var(--hg-transition),transform var(--hg-transition);
}
.hg-btn--primary,
.elementor-button,
input[type=submit],
button[type=submit]{background:var(--hg-blue-600);color:#fff}
.hg-btn--primary:hover,
.elementor-button:hover,
input[type=submit]:hover,
button[type=submit]:hover{background:var(--hg-blue-700);color:#fff}

.hg-btn--secondary,
.elementor-button.hg-btn--secondary{
  background:transparent;
  color:var(--hg-head);
  border-color:var(--hg-head);
}
.hg-btn--secondary:hover{background:var(--hg-head);color:#fff}

/* On a dark band the secondary button turns white-on-transparent. */
.hg-band-dark .hg-btn--secondary,
.hg-band-dark .elementor-button.hg-btn--secondary{color:#fff;border-color:#fff}
.hg-band-dark .hg-btn--secondary:hover{background:#fff;color:var(--hg-ink-navy)}

/* Tertiary — a text link with an arrow. */
.hg-btn--tertiary{
  min-height:0;padding:0;border:0;background:none;
  color:var(--hg-blue-600);font-weight:600;
}
.hg-btn--tertiary::after{content:"→";font-size:16px;transition:transform var(--hg-transition)}
.hg-btn--tertiary:hover::after{transform:translateX(3px)}

.hg-btn[disabled],.hg-btn.is-disabled,
.elementor-button[disabled],input[type=submit][disabled],button[disabled]{
  background:var(--hg-disabled-bg);
  color:var(--hg-disabled-fg);
  border-color:transparent;
  cursor:not-allowed;
}

/* --- Cards -------------------------------------------------------- */
.hg-card{
  background:var(--hg-white);
  border:1px solid var(--hg-border);
  border-radius:var(--hg-radius-card);
  padding:var(--hg-card-padding);
  box-shadow:none;
  transition:border-color var(--hg-transition),transform var(--hg-transition);
  height:100%;                 /* flexible height, never fixed */
}
.hg-card:hover{border-color:var(--hg-blue-600);transform:translateY(-2px)}
.hg-card h3,.hg-card h4{margin-block-end:var(--hg-space-2)}

/* Icon chip — identical for every service, including AI. Not colour-coded. */
.hg-icon-chip{
  inline-size:var(--hg-icon-chip);
  block-size:var(--hg-icon-chip);
  border-radius:50%;
  background:var(--hg-blue-50);
  color:var(--hg-blue-600);
  display:inline-flex;align-items:center;justify-content:center;
  margin-block-end:var(--hg-space-4);
}
.hg-icon-chip svg{inline-size:24px;block-size:24px;stroke-width:1.5;fill:none;stroke:currentColor}

/* --- Chips and state pills ---------------------------------------- */
.hg-chip{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius:var(--hg-radius-chip);
  font-size:var(--hg-small);
  font-weight:600;
  line-height:1.4;
  background:var(--hg-surface);
  color:var(--hg-muted);
}
.hg-chip--progress{background:var(--hg-blue-50);color:var(--hg-blue-700)}   /* in progress = action */
.hg-chip--done{background:var(--hg-green-50);color:var(--hg-green-700)}     /* completed = outcome */

/* --- Outcome ticks — the green rule, on light grounds -------------- */
.hg-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hg-space-3)}
.hg-ticks li{position:relative;padding-inline-start:28px;line-height:1.5}
.hg-ticks li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.35em;
  inline-size:14px;block-size:8px;
  border-inline-start:2px solid var(--hg-green-700);
  border-block-end:2px solid var(--hg-green-700);
  transform:rotate(-45deg);
}
.hg-band-dark .hg-ticks li::before{border-color:var(--hg-green-500)}
.hg-trust-row{display:flex;flex-wrap:wrap;gap:var(--hg-space-6);margin-block-start:var(--hg-space-6)}
.hg-trust-row .hg-ticks li{font-weight:500}

/* --- Stat band — the only place green-500 appears on a dark ground - */
.hg-stat{text-align:start}
.hg-stat .hg-stat__n{
  font-family:var(--hg-font-head);
  font-weight:700;
  font-size:var(--hg-stat);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--hg-green-500);
  display:block;
}
.hg-stat .hg-stat__l{color:rgba(255,255,255,.66);font-size:var(--hg-small);margin-block-start:var(--hg-space-2);display:block}

/* --- Market card — country, one line, one number. No addresses. ---- */
.hg-market{border:1px solid var(--hg-border);border-radius:var(--hg-radius-card);padding:var(--hg-card-padding);background:var(--hg-white);height:100%}
.hg-market__c{font-family:var(--hg-font-head);font-weight:700;font-size:var(--hg-h4);color:var(--hg-head);margin-block-end:var(--hg-space-2)}
.hg-market__p{display:inline-block;margin-block-start:var(--hg-space-3);font-weight:600;color:var(--hg-blue-600);text-decoration:none}

/* --- Forms — labels above fields, never placeholder-only ---------- */
label{display:block;font-size:var(--hg-small);font-weight:600;color:var(--hg-head);margin-block-end:6px}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],
input[type=search],input[type=date],select,textarea{
  inline-size:100%;
  min-height:var(--hg-control-height);
  padding:12px 14px;
  border:1px solid var(--hg-border);
  border-radius:var(--hg-radius-input);
  background:var(--hg-white);
  font-family:var(--hg-font-body);
  font-size:16px;                 /* 16px stops iOS zooming on focus */
  color:var(--hg-ink);
}
textarea{min-height:120px;line-height:1.5}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--hg-blue-600);
  outline-offset:1px;
  border-color:var(--hg-blue-600);
}
.hg-field-error,.hg-form-error{color:var(--hg-error);font-size:var(--hg-small);font-weight:500}
.hg-field-warning{color:var(--hg-warning);font-size:var(--hg-small)}
/* Errors are text plus colour — colour is never the only signal. */
.hg-field-error::before{content:"! ";font-weight:700}

/* --- Zoho form embeds ---------------------------------------------
   The iframe is sealed: nothing in this file reaches inside it. Each
   form is themed to v3 inside Zoho's own editor. All this wrapper
   does is constrain the frame to the content column and stop it
   introducing a horizontal scrollbar.
   ------------------------------------------------------------------ */
.hg-zoho-form{inline-size:100%;max-inline-size:var(--hg-reading-width);margin-inline:auto}
.hg-zoho-form iframe{inline-size:100%;border:0;display:block;min-block-size:640px}
.hg-zoho-form--wide{max-inline-size:none}

/* --- WP Job Manager — style the plugin's own markup, do not replace it */
.job_listings .job_listing,
ul.job_listings li.job_listing{
  border:1px solid var(--hg-border);
  border-radius:var(--hg-radius-card);
  margin-block-end:var(--hg-space-3);
  background:var(--hg-white);
  transition:border-color var(--hg-transition),transform var(--hg-transition);
  list-style:none;
}
.job_listings .job_listing:hover{border-color:var(--hg-blue-600);transform:translateY(-2px)}
ul.job_listings li.job_listing a{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--hg-space-4);
  padding:var(--hg-space-4) var(--hg-space-6);
  text-decoration:none;color:var(--hg-ink);
}
ul.job_listings li.job_listing .position h3{
  font-size:var(--hg-h4);margin:0;color:var(--hg-head);
}
ul.job_listings li.job_listing .company,
ul.job_listings li.job_listing .location,
ul.job_listings li.job_listing .meta{
  font-size:var(--hg-small);color:var(--hg-muted);
}
ul.job_listings li.job_listing .meta .date{color:var(--hg-muted)}
/* Work-mode and job-type chips — square, never pills. */
ul.job_listings li.job_listing .job-type,
.hg-job-chip{
  display:inline-flex;padding:4px 10px;border-radius:var(--hg-radius-chip);
  background:var(--hg-blue-50);color:var(--hg-blue-700);
  font-size:var(--hg-small);font-weight:600;line-height:1.4;
}
ul.job_listings li.job_listing .job-type.filled,
ul.job_listings li.job_listing .job-type.position-filled{
  background:var(--hg-green-50);color:var(--hg-green-700);   /* filled is an outcome */
}
.job_filters{
  background:var(--hg-surface);
  border:1px solid var(--hg-border);
  border-radius:var(--hg-radius-card);
  padding:var(--hg-space-4);
  margin-block-end:var(--hg-space-6);
}
.job_filters .search_jobs > div{margin-block-end:var(--hg-space-3)}
.job_filters .job_types{display:flex;flex-wrap:wrap;gap:var(--hg-space-3)}
.single_job_listing .company{border:0;padding:0}
.single_job_listing .meta{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--hg-space-4);font-size:var(--hg-small);color:var(--hg-muted)}
.single_job_listing .application .application_button{width:auto}

/* --- WhatsApp click-to-chat --------------------------------------
   In Pakistan and the Gulf this converts several times better than a
   form. It is a contact action, so it is not green — the brand green
   is reserved for outcomes. WhatsApp's own brand green would collide
   with the rule, so the button is blue.
   ------------------------------------------------------------------ */
.hg-whatsapp{
  position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:998;
  inline-size:56px;block-size:56px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hg-blue-600);color:#fff;
  border-radius:var(--hg-radius-card);
  box-shadow:0 4px 14px rgba(18,26,36,.18);
  transition:background-color var(--hg-transition),transform var(--hg-transition);
}
.hg-whatsapp:hover{background:var(--hg-blue-700);color:#fff;transform:translateY(-2px)}
.hg-whatsapp svg{inline-size:28px;block-size:28px;fill:currentColor}
@media print{.hg-whatsapp{display:none}}

/* --- Header and footer helpers ------------------------------------ */
.hg-header{min-block-size:var(--hg-header-height);background:var(--hg-white);border-block-end:1px solid var(--hg-border)}
.hg-logo svg,.hg-logo img{block-size:36px;inline-size:auto;display:block}
.hg-footer{background:var(--hg-ink-navy);color:rgba(255,255,255,.82)}
.hg-footer a{color:rgba(255,255,255,.82);text-decoration:none}
.hg-footer a:hover{color:#fff;text-decoration:underline}
.hg-footer .hg-tagline{color:#fff;font-family:var(--hg-font-head);font-weight:600}

/* --- Accessibility ------------------------------------------------ */
.hg-skip-link{
  position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:1000;
  background:var(--hg-blue-600);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--hg-radius-button) 0;font-weight:600;
}
.hg-skip-link:focus{inset-inline-start:0;color:#fff}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--hg-blue-600);
  outline-offset:2px;
}
/* Every interactive target clears 44px. */
.hg-header a,.hg-footer a,.job_listings a{min-block-size:var(--hg-touch-min);display:inline-flex;align-items:center}

/* --- Guard rails ---------------------------------------------------
   The design system says no pills. Editors reach for rounded corners.
   These two rules put the radius back for the elements they can
   actually change in the builder.
   ------------------------------------------------------------------ */
.elementor-button,.elementor-field-group .elementor-field,
.hg-card,.hg-chip{border-radius:var(--hg-radius-button)}
.hg-card{border-radius:var(--hg-radius-card)}
.hg-chip{border-radius:var(--hg-radius-chip)}

/* --- Utility ------------------------------------------------------ */
.hg-container{max-inline-size:var(--hg-content-width);margin-inline:auto;padding-inline:var(--hg-gutter)}
.hg-reading{max-inline-size:var(--hg-reading-width);margin-inline:auto}
.hg-grid{display:grid;gap:var(--hg-space-6)}
.hg-grid--2{grid-template-columns:repeat(2,1fr)}
.hg-grid--3{grid-template-columns:repeat(3,1fr)}
.hg-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.hg-grid--3,.hg-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.hg-grid--2,.hg-grid--3,.hg-grid--4{grid-template-columns:1fr}}

/* No autoplaying motion anywhere, and respect the OS setting. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* --- Header and footer furniture (child-theme templates) ------------ */
.hg-header{position:sticky;inset-block-start:0;z-index:900}
.hg-header__inner{display:flex;align-items:center;gap:var(--hg-space-6);min-block-size:var(--hg-header-height)}
.hg-wordmark{font-family:var(--hg-font-head);font-weight:800;font-size:20px;letter-spacing:-0.01em;line-height:1;white-space:nowrap}
.hg-wordmark__a{color:var(--hg-head)}
.hg-wordmark__b{color:var(--hg-blue-600)}
.hg-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}

.hg-nav{display:flex;align-items:center;gap:var(--hg-space-6);margin-inline-start:auto}
.hg-nav__list{display:flex;align-items:center;gap:var(--hg-space-6);list-style:none;margin:0;padding:0}
.hg-nav__list a{color:var(--hg-head);text-decoration:none;font-weight:500;font-size:15px}
.hg-nav__list a:hover{color:var(--hg-blue-600)}
.hg-header__cta{display:flex;gap:var(--hg-space-3)}
.hg-header__cta .hg-btn{min-height:40px;padding-inline:var(--hg-space-4);font-size:15px}
.hg-nav-toggle,.hg-burger{display:none}

@media (max-width:1024px){
  .hg-burger{display:block;margin-inline-start:auto;inline-size:44px;block-size:44px;position:relative;cursor:pointer}
  .hg-burger span,.hg-burger::before,.hg-burger::after{content:"";position:absolute;inset-inline-start:10px;inline-size:24px;block-size:2px;background:var(--hg-head)}
  .hg-burger span{inset-block-start:21px}
  .hg-burger::before{inset-block-start:14px}
  .hg-burger::after{inset-block-start:28px}
  .hg-nav{display:none;position:absolute;inset-inline:0;inset-block-start:var(--hg-header-height);
          background:var(--hg-white);border-block-end:1px solid var(--hg-border);
          flex-direction:column;align-items:flex-start;gap:var(--hg-space-4);padding:var(--hg-space-6)}
  .hg-nav__list{flex-direction:column;align-items:flex-start;gap:var(--hg-space-4)}
  .hg-nav-toggle:checked ~ .hg-nav{display:flex}
  .hg-header__inner{position:relative;flex-wrap:wrap}
}

.hg-footer{padding-block:var(--hg-space-16) var(--hg-space-8);margin-block-start:var(--hg-space-20)}
.hg-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:var(--hg-space-8)}
.hg-footer__h{font-size:var(--hg-small);text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-block-end:var(--hg-space-4)}
.hg-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hg-space-2)}
.hg-footer__list a{font-size:var(--hg-small)}
.hg-footer__contact li{font-size:var(--hg-small);line-height:1.6}
.hg-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--hg-space-4);
                  margin-block-start:var(--hg-space-12);padding-block-start:var(--hg-space-6);
                  border-block-start:1px solid rgba(255,255,255,.15);font-size:var(--hg-small)}
.hg-footer__legal a{margin-inline-start:var(--hg-space-4)}
@media (max-width:1024px){.hg-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.hg-footer__grid{grid-template-columns:1fr}}

/* ── 1.3.0 — page-content furniture ─────────────────────────────── */
/* Button rows: consistent gap and wrap on narrow viewports */
.hg-cta-row{display:flex;flex-wrap:wrap;gap:var(--hg-space-3);
            margin-block-start:var(--hg-space-6)}
.hg-cta-row .hg-btn{margin:0}

/* Hero band: taller than a standard section, H1 measure capped */
.hg-hero{padding-block:clamp(72px,9vw,128px)}
.hg-hero h1{max-inline-size:16ch}
.hg-hero .hg-lead{max-inline-size:62ch}
.hg-hero .hg-trust-row{margin-block-start:var(--hg-space-8)}

/* Section headings sit clear of the grid that follows */
.hg-section > .hg-container > h2{margin-block-end:var(--hg-space-8)}
.hg-section > .hg-container > .hg-lead{max-inline-size:66ch}

/* Cards that end in a tertiary link push it to the card foot */
.hg-card{display:flex;flex-direction:column}
.hg-card > .hg-btn--tertiary{margin-block-start:auto;
                             padding-block-start:var(--hg-space-4)}

/* Dark bands: cards read as raised panels, not white boxes */
.hg-band-dark .hg-card{background:rgba(255,255,255,.06);
                       border-color:rgba(255,255,255,.14)}
.hg-band-dark .hg-card p{color:rgba(255,255,255,.78)}
.hg-band-dark .hg-muted{color:rgba(255,255,255,.62)}