/* Recruitful — supplemental marketing layer.
   The design system (assets/design-system/) is the source of truth for tokens + components.
   This file holds the page-specific `pg-*` classes from the design prototype, the HubSpot
   form-style override, and small theme glue (skip link, capture-bar reserve). */

/* ---- base overrides (from prototype) ---- */
body{margin:0;background:var(--rf-white)}
a{color:var(--text-link)}
a:hover{color:var(--rf-teal-deep)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--rf-teal-deep);color:#fff;padding:10px 16px;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ---- page-specific type ---- */
.pg-h1{font-size:64px!important;letter-spacing:-.01em}
.pg-h2{font-size:45px!important}
.pg-h3{font-family:var(--font-display);font-size:28px;color:var(--text-heading);margin:0;line-height:1.2}
.pg-eyebrow{font:500 12px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rf-teal-700)}
.pg-body{font:300 16px/1.65 Montserrat,sans-serif;color:var(--text-body);margin:0}

/* ---- hero content wrapper: cap width + centre on large screens so the copy and
       form card stay a cohesive block instead of spreading edge-to-edge ---- */
.rf-herowrap{display:flex;align-items:flex-start;gap:60px;width:100%;position:relative;z-index:1;flex-wrap:wrap}
.rf-herowrap>.rf-hero__copy{flex:0 1 640px}
.rf-herocard{flex:none;width:540px;max-width:100%;margin-left:auto;background:var(--rf-white);border-radius:var(--rf-radius-lg);box-shadow:var(--rf-shadow-overlay);padding:32px}
@media (max-width:1100px){
  .rf-herowrap{gap:44px}
  .rf-herowrap>.rf-hero__copy{flex-basis:100%}
  .rf-herocard{margin-left:0;width:100%}
}

/* ---- arrow ticks (the brand's only icon) ---- */
.pg-tick{display:flex;gap:12px;font:300 16px/1.6 Montserrat,sans-serif;color:var(--text-body)}
.pg-tick span:first-child{color:var(--rf-teal);flex:none}

/* ---- steps ---- */
.pg-stepnum{font-family:var(--font-display);font-size:32px;color:var(--rf-teal);line-height:1}
.pg-steptitle{font-family:var(--font-display);font-size:22px;color:var(--text-heading)}
.pg-stepbody{font:300 15px/1.65 Montserrat,sans-serif;color:var(--text-body)}
.pg-steps{display:flex;gap:44px;margin-top:52px}
.pg-step{display:flex;flex-direction:column;gap:10px;flex:1}

/* ---- proof / stat strip (placeholders — editable + removable) ---- */
.pg-statnum{font-family:var(--font-display);font-size:50px;line-height:1;color:var(--text-heading)}
.pg-statlbl{font:300 15px/1.5 Montserrat,sans-serif;color:var(--text-muted);margin-top:8px}

/* ---- forms ---- */
.pg-note{font:300 13px/1.6 Montserrat,sans-serif;color:var(--text-muted)}
.pg-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---- misc ---- */
.pg-crumb{font:400 13px Montserrat,sans-serif;color:rgba(255,255,255,.85)}
.pg-postmeta{font:400 12px Montserrat,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pg-navlink--on{opacity:1;text-decoration:underline;text-underline-offset:6px}

/* ---- capture bar ---- */
.pg-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--rf-mint);padding:14px 5vw;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.pg-bar[hidden]{display:none}

/* ---- mobile nav ---- */
.pg-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;border:1px solid rgba(255,255,255,.55);border-radius:var(--rf-radius-full);background:transparent;cursor:pointer}
.pg-burger span{display:block;height:2px;border-radius:2px;background:var(--rf-white)}
.pg-mobilemenu{position:absolute;top:72px;left:5vw;right:5vw;z-index:35;background:var(--rf-teal-deep);border-radius:20px;box-shadow:var(--rf-shadow-overlay);padding:20px 24px;display:flex;flex-direction:column;gap:14px}
.pg-mobilemenu[hidden]{display:none}
.pg-mobilelink{font:500 17px Montserrat,sans-serif;color:var(--rf-white);text-decoration:none}

/* Header nav: never wrap to a second row. The seven links need ~1400px; below that,
   switch to the hamburger (handoff: "the nav is hidden rather than wrapped"). */
.rf-mkheader__nav{flex-wrap:nowrap}
@media (max-width:1400px){
  .rf-mkheader__nav{display:none}
  .pg-burger{display:flex}
  .rf-mkheader__end{margin-left:auto} /* push Login/Get Started + burger to the right */
}
@media (max-width:820px){
  .rf-mkheader__end{display:none} /* Login + Get Started move into the hamburger panel */
  .pg-burger{margin-left:auto}
}

/* ---- responsive (from prototype) ---- */
@media (max-width:1100px){
  .pg-bar__head{display:none}
  .pg-burger{display:flex}
  .rf-hero{flex-wrap:wrap;gap:44px!important}
  .rf-featurerow{flex-wrap:wrap;justify-content:flex-start;gap:40px}
  .pg-h1{font-size:46px!important}
  .pg-h2{font-size:34px!important}
  .pg-steps{flex-wrap:wrap;gap:32px!important;margin-top:40px}
  .pg-step{flex:1 1 40%}
  .pg-bloggrid{grid-template-columns:1fr 1fr!important}
  .pg-trio{flex-wrap:wrap}
  .pg-trio>*{flex:1 1 260px}
  .pg-doc{flex-wrap:wrap}
  .pg-rail{position:static!important;width:100%!important;flex-direction:row!important;flex-wrap:wrap}
  .pg-rail>*{flex:1 1 300px}
}
@media (max-width:820px){
  .pg-h1{font-size:36px!important}
  .pg-h2{font-size:28px!important}
  .pg-h3{font-size:22px}
  .rf-hero__lead{font-size:17px!important}
  .rf-hero__art{width:100%}
  .rf-cutout{width:300px!important;height:330px!important;max-width:100%}
  .pg-formgrid{grid-template-columns:1fr}
  .pg-step{flex:1 1 100%}
  .pg-statnum{font-size:38px}
  .pg-bloggrid{grid-template-columns:1fr!important}
  .pg-bloggrid>*{grid-column:span 1!important}
  .pg-featured{flex-direction:column!important;align-items:flex-start!important}
  .pg-featimg{width:100%!important;height:200px!important}
  .pg-featimg .rf-blob{width:100%!important;height:200px!important}
  .pg-hide-sm{display:none}
  .pg-bar{padding:12px 5vw;gap:12px}
  .pg-bar__grp{width:100%!important;min-width:0!important}
  .pg-mobilemenu{top:66px}
}

/* ---- article (editor content: About / Fairplay / Terms + new pages) ---- */
.rf-article{max-width:var(--rf-measure)}
.rf-article>*{margin:0 0 20px}
.rf-article>*:last-child{margin-bottom:0}
.rf-article>p:first-of-type{font-size:19px;font-weight:300;line-height:1.6;color:var(--text-body)}
.rf-article p{font:400 16px/1.65 var(--font-body);color:var(--text-body)}
.rf-article h2{font-family:var(--font-display);font-size:32px;line-height:1.2;color:var(--text-heading);margin-top:40px}
.rf-article h3{font-family:var(--font-display);font-size:22px;color:var(--text-heading);margin-top:28px}
.rf-article a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.rf-article ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.rf-article ul li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:var(--text-body)}
.rf-article ul li::before{content:"\2192";position:absolute;left:0;color:var(--rf-teal);font-family:var(--font-body)}
.rf-article ol{padding-left:22px;display:flex;flex-direction:column;gap:12px}
.rf-article ol li{font-size:16px;line-height:1.65;color:var(--text-body)}
.rf-article blockquote{background:var(--rf-grey-50);border-radius:var(--rf-radius-md);padding:24px 28px;font-size:19px;font-weight:300;line-height:1.6;color:var(--text-body)}
.rf-article img{max-width:100%;height:auto;border-radius:var(--rf-radius-md)}

/* ---- rail capture card (page + single) ---- */
.rf-railcard{background:var(--rf-white);border:2px solid var(--rf-teal);border-radius:var(--rf-radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px}

/* ---- HubSpot form → design-system input styling override ----
   HubSpot renders its own markup; map its classes onto .rf-input / .rf-field styles.
   Wrap the embed in <div class="rf-hsform"> in the template. */
.rf-hsform .hs-form-field{margin-bottom:16px}
.rf-hsform label{font-family:var(--font-body);font-size:var(--rf-size-ui-sm);font-weight:var(--rf-weight-medium);color:var(--text-strong);display:block;margin-bottom:6px}
.rf-hsform input[type=text],.rf-hsform input[type=email],.rf-hsform input[type=tel],.rf-hsform select,.rf-hsform textarea{
  font-family:var(--font-body);font-size:var(--rf-size-ui-lg);color:var(--text-strong);background:var(--rf-white);
  border:1px solid var(--border-strong);border-radius:var(--radius-field);padding:11px 14px;width:100%;
  transition:border-color var(--rf-dur-base) var(--rf-ease-out),box-shadow var(--rf-dur-base) var(--rf-ease-out)}
.rf-hsform input:hover,.rf-hsform select:hover,.rf-hsform textarea:hover{border-color:var(--rf-teal-300)}
.rf-hsform input:focus,.rf-hsform select:focus,.rf-hsform textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.rf-hsform textarea{min-height:104px;resize:vertical}
.rf-hsform .hs-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--rf-radius-pill);
  background:var(--rf-mint);color:var(--text-on-mint);box-shadow:var(--rf-shadow-soft);font-family:var(--font-body);
  font-size:var(--rf-size-label);font-weight:var(--rf-weight-medium);padding:16px 28px;cursor:pointer;width:100%;
  transition:var(--rf-transition-control)}
.rf-hsform .hs-button:hover{background:#4FBF9A;transform:var(--rf-lift)}
.rf-hsform .hs-error-msg,.rf-hsform .hs_error_rollup{font-size:var(--rf-size-ui-xs);font-weight:var(--rf-weight-medium);color:var(--rf-danger)}
@media(min-width:821px){
  .rf-hsform .hs-form fieldset{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rf-hsform .hs-form fieldset .hs-form-field{width:auto!important;float:none!important;margin:0}
  .rf-hsform .hs-form fieldset.form-columns-1{grid-template-columns:1fr}
}