/************************************************************
 * achievers-refresh.css
 *
 * Purpose: New brand stylesheet for Achievers, using:
 *          - Host Grotesk (primary) loaded from Google Fonts
 *          - Mokoko (secondary) loaded from Typekit
 *
 * Best Practice:
 * - Load AFTER old theme CSS so older pages remain intact.
 * - Use these new classes on updated pages/modules.
 ************************************************************/

/* Example: Host Grotesk variable font face */
@font-face {
  font-family: "Host Grotesk";
  src: url(/wp-content/themes/achievers/assets/css/fontello/font/HostGrotesk-VariableFont_wght.ttf);
}

/* 1) Root Variables (Mobile Font Styles & Colors) */
:root {
  /* Colors */
  --color-paper: #f2f2e8;
  --color-primary-black: #1a1717;
  --color-purple: #6329c2;
  --color-black: #2e1a47;
  --color-yellow: #f2cc29;
  --color-green: #2b992b;
  --color-pink: #f2a1d9;
  --color-white: #ffffff;
  --color-primary-orange: #f76600;
  --color-orange: #f76c00;
  --color-grey: #a6a391;

  /* Typography Scale */
  --fs-2xl: 60px; /* 2XL */
  --fs-xl: 48px; /* XL  */
  --fs-l: 36px; /* L   */
  --fs-m: 30px; /* M   */
  --fs-s: 24px; /* S   */
  --fs-xs: 20px; /* XS  */
  --fs-b: 16px; /* base body */

  /* Line Heights */
  --lh-tight: 1.05;
  --lh-body: 1.35;

  /* Spacing Scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
}

/************************************************************
 * 2) Headings (Host Grotesk)
 *    Classes: .h-2xl, .h-xl, .h-l, .h-m, .h-s, .h-xs
 ************************************************************/

/* 2XL (60px) */
.h-2xl {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~63px */
  color: var(--color-primary-black);
  letter-spacing: 0.6px;
  font-feature-settings: "ss01" on;
  margin: 0 0 var(--space-sm);
}

/* XL (48px) */
.h-xl {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~50.4px */
  color: var(--color-primary-black);
  letter-spacing: 0.48px;
  font-feature-settings: "ss01" on;
  margin: 0 0 var(--space-sm);
}

/* L (36px) */
.h-l {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~37.8px */
  color: var(--color-primary-black);
  letter-spacing: 0.36px;
  font-feature-settings: "liga" off, "clig" off;
  margin: 0 0 var(--space-sm);
}

/* M (30px) */
.h-m {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-m);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~31.5px */
  color: var(--color-primary-black);
  letter-spacing: 0.3px;
  margin: 0 0 var(--space-sm);
}

/* S (24px) */
.h-s {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~25.2px */
  color: var(--color-primary-black);
  letter-spacing: 0.24px;
  margin: 0 0 var(--space-xs);
}

/* XS (20px) */
.h-xs {
  font-family: "Host Grotesk", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: var(--lh-tight); /* ~21px */
  color: var(--color-primary-black);
  letter-spacing: 0.2px;
  margin: 0 0 var(--space-xs);
}

/************************************************************
 * 3) Body Text (Host Grotesk)
 *    Classes: .body-r, .body-b, .body-sr, .body-sb, .body-ssb,
 *             .body-xsr, .body-xsb, .body-xssb
 ************************************************************/

/* Body Regular (16px) */
.body-r {
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--lh-body); /* ~21.6px */
  color: var(--color-primary-black);
  letter-spacing: 0.08px;
  margin-bottom: var(--space-sm);
}

/* Body Bold (16px) */
.body-b {
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.08px;
  margin-bottom: var(--space-sm);
}

/* Body Small Regular (14px) */
.body-sr {
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.07px;
  margin-bottom: var(--space-sm);
}

/* Body Small Bold (14px) */
.body-sb {
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.07px;
  margin-bottom: var(--space-sm);
}

/* Body Small Semibold (14px) */
.body-ssb {
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.07px;
  margin-bottom: var(--space-sm);
}

/* Body XS Regular (12px) */
.body-xsr {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.06px;
  margin-bottom: var(--space-xs);
}

/* Body XS Bold (12px) */
.body-xsb {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.06px;
  margin-bottom: var(--space-xs);
}

/* Body XS Semibold (12px) */
.body-xssb {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  letter-spacing: 0.06px;
  margin-bottom: var(--space-xs);
}

/************************************************************
 * 4) Responsive Adjustments for Headings
 ************************************************************/
@media (max-width: 990px) {
  /* h-2xl becomes ~36px */
  .h-2xl {
    font-size: var(--fs-l);
    letter-spacing: 0.27px;
  }
  /* h-xl becomes ~36px */
  .h-xl {
    font-size: var(--fs-l);
    letter-spacing: 0.27px;
  }
  /* h-l becomes ~24px */
  .h-l {
    font-size: var(--fs-s);
  }
  /* h-m becomes ~20px */
  .h-m {
    font-size: var(--fs-xs);
    letter-spacing: 0.27px;
  }
  /* h-s becomes ~16px */
  .h-s {
    font-size: var(--fs-b);
    line-height: 130%;
    letter-spacing: 0.18px;
  }
}

/************************************************************
 * 5) Mobile-specific heading classes (m-head-*)
 ************************************************************/
@media (max-width: 990px) {
  .m-head-xl {
    font-family: "Host Grotesk", sans-serif;
    font-size: var(--fs-xl) !important;
    letter-spacing: 0.48px !important;
  }
  .m-head-l {
    font-family: "Host Grotesk", sans-serif;
    font-size: var(--fs-l) !important;
    letter-spacing: 0.36px;
  }
  .m-head-m {
    font-family: "Host Grotesk", sans-serif;
    font-size: var(--fs-m) !important;
    letter-spacing: 0.3px !important;
  }
  .m-head-s {
    font-family: "Host Grotesk", sans-serif;
    font-size: var(--fs-s) !important;
    letter-spacing: 0.24px !important;
  }
  .m-head-xs {
    font-family: "Host Grotesk", sans-serif;
    font-size: var(--fs-xs) !important;
    letter-spacing: 0.2px !important;
  }

  /* Mobile Body (m-body-*) */
  .m-body-m {
    font-size: 16px !important;
    letter-spacing: 0.08px !important;
  }
  .m-body-s {
    font-size: 14px !important;
    letter-spacing: 0.07px !important;
  }
  .m-body-xs {
    font-size: 12px !important;
    letter-spacing: 0.06px !important;
  }

  /* Mobile Buttons (m-btn, etc.) */
  .m-btn {
    display: inline-flex;
    min-height: 44px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    font-family: "Host Grotesk", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  }
  .m-btn--primary {
    background: var(--color-purple);
    color: var(--color-white);
    border: none;
  }
  .m-btn--primary:hover {
    background: rgba(99, 41, 194, 0.8);
  }
  .m-btn--secondary-transparent {
    background: transparent;
    color: var(--color-purple);
    border: 2px solid var(--color-purple);
  }
  .m-btn--secondary-transparent:hover {
    background: rgba(99, 41, 194, 0.1);
  }

  /* Example "m-hero" styles (if needed) */
  .m-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    color: var(--color-primary-black);
  }
  .m-hero__background-color {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background-color: var(--color-paper);
  }
  .m-hero__background--mobile {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
  }
  .m-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px;
  }
  .m-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
  }
}

/************************************************************
 * 6) Hero-New Classes
 ************************************************************/

/* Main container for the new hero block */
.hero-new {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: var(--color-primary-black);
}

/* Color fill behind the background images */
.hero-new__background-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background-color: var(--color-paper);
}

/* Desktop background image */
.hero-new__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Mobile background image, hidden by default on desktop */
.hero-new__background--mobile {
  display: none;
}

/* Content wrapper inside the hero */
.hero-new__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px; /* adjust as needed */
}

/* Optional overlay for tinted backgrounds */
.hero-new__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.3); /* or any overlay color/gradient */
}

/* Eyebrow text (upper label) */
.hero-new__eyebrow {
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: var(--color-purple);
  margin-bottom: 12px;
}

/* Main heading text */
.hero-new__heading {
  font-family: "Host Grotesk", sans-serif;
  font-size: 48px; /* or .h-xl if you prefer */
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-primary-black);
  margin-bottom: 16px;
}

/* Subheading text or body copy */
.hero-new__subheading {
  font-family: "Host Grotesk", sans-serif;
  font-size: 18px; /* or .body-r */
  line-height: var(--lh-body);
  color: var(--color-primary-black);
  margin-bottom: 24px;
}

/* CTA Button */
.hero-new__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--color-purple);
  color: var(--color-white);
  text-decoration: none;
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.hero-new__button:hover {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), var(--color-purple);
}

/* If you want a disabled style */
.hero-new__button.disabled,
.hero-new__button[disabled] {
  background: var(--color-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

/************************************************************
 * 7) Responsive for hero-new
 ************************************************************/
@media (max-width: 768px) {
  .hero-new__background {
    display: none; /* hide desktop BG on mobile */
  }
  .hero-new__background--mobile {
    display: block; /* show mobile BG */
    height: auto; /* or 100%, depends on your design */
  }
  .hero-new__content {
    padding: 30px 16px;
  }
  .hero-new__heading {
    font-size: 28px; /* smaller heading on mobile */
  }
  .hero-new__subheading {
    font-size: 16px; /* smaller body text on mobile */
  }
}

/************************************************************
 * 8) Misc. Classes
 ************************************************************/

/* Mokoko font usage example */
.mokoko {
  font-family: "Mokoko", cursive;
}

/* Utility for bold text if needed */
.bold-weight {
  font-weight: 700;
}

/* font color */
.primary-purple {
  color: var(--color-purple) !important;
}
.primary-black {
  color: var(--color-primary-black) !important;
}
.primary-paper {
  color: var(--color-paper) !important;
}
.secondary-yellow {
  color: var(--color-yellow) !important;
}
.secondary-green {
  color: var(--color-green) !important;
}
.secondary-pink {
  color: var(--color-pink) !important;
}
.secondary-orange {
  color: var(--color-primary-orange) !important;
}
.secondary-white {
  color: var(--color-white) !important;
}
.secondary-grey {
  color: var(--color-grey) !important;
}

/* bg color */
.bg-primary-purple {
  background-color: var(--color-purple) !important;
}
.bg-primary-black {
  background-color: var(--color-primary-black) !important;
}
.bg-primary-paper {
  background-color: var(--color-paper) !important;
}
.bg-secondary-yellow {
  background-color: var(--color-yellow) !important;
}
.bg-secondary-green {
  background-color: var(--color-green) !important;
}
.bg-secondary-pink {
  background-color: var(--color-pink) !important;
}
.bg-secondary-orange {
  background-color: var(--color-primary-orange) !important;
}
.bg-secondary-white {
  background-color: var(--color-white) !important;
}
.bg-secondary-grey {
  background-color: var(--color-grey) !important;
}