/*
* Home blocks - shared base
* Fonts, colour tokens and the pieces every section of the 2026 homepage ("BrightHire Homepage v3"
* handoff) repeats: eyebrow, section heading, lead text, checklist, purple button and arrow link.
* Loaded as a dependency of each home block's own CSS (see brighthire_enqueue_home_block()).
*
* Fonts are self-hosted under their own family names: the theme's "Haffer" only has the 500 weight
* and its "DM Sans" only 400/700, while the design uses Haffer 400-600 and DM Sans 400-600.
*/

@font-face {
    font-family: "BrightHire Home Haffer";
    src: url("fonts/haffer-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "BrightHire Home Haffer";
    src: url("fonts/haffer-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "BrightHire Home Haffer";
    src: url("fonts/haffer-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "BrightHire Home DM Sans";
    src: url("fonts/dm-sans-latin-variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "BrightHire Home DM Mono";
    src: url("fonts/dm-mono-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.bhh {
    --bhh-font: "BrightHire Home DM Sans", "DM Sans", system-ui, sans-serif;
    --bhh-font-head: "BrightHire Home Haffer", "Haffer", "BrightHire Home DM Sans", sans-serif;
    --bhh-font-mono: "BrightHire Home DM Mono", ui-monospace, monospace;
    --bhh-ink: #283560;
    --bhh-text: #161616;
    --bhh-muted: #4C5985;
    --bhh-soft: #8C95B5;
    --bhh-check-text: #38446B;
    --bhh-purple: #472EE7;
    --bhh-purple-dark: #3A28B1;
    --bhh-teal: #00FEE7;
    --bhh-line: #E6E8EF;
    --bhh-lavender: #E2E9FF;
    --bhh-pale: #F0F5FD;
    --bhh-off-white: #F8F9FB;
    --bhh-gutter: 120px;
    position: relative;
    box-sizing: border-box;
    font-family: var(--bhh-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--bhh-text);
    -webkit-font-smoothing: antialiased;
}
.bhh *,
.bhh *::before,
.bhh *::after {
    box-sizing: border-box;
}
/* Bootstrap and the theme add margins to these; the design spaces everything with gap */
.bhh h1,
.bhh h2,
.bhh h3,
.bhh h4,
.bhh p,
.bhh ul,
.bhh ol,
.bhh figure,
.bhh blockquote {
    margin: 0;
}
.bhh ul {
    padding: 0;
    list-style: none;
}
.bhh a {
    text-decoration: none;
}
/* The theme underlines every a:hover; buttons and arrow links here never are (text links set it themselves) */
.bhh a:hover,
.bhh a:focus {
    text-decoration: none;
}
.bhh img {
    max-width: 100%;
}
.bhh svg {
    flex-shrink: 0;
}

/* 1440 design: 120px side gutters, so a 1200px content column */
.bhh-container {
    width: 100%;
    max-width: calc(1200px + var(--bhh-gutter) * 2);
    margin: 0 auto;
    padding-left: var(--bhh-gutter);
    padding-right: var(--bhh-gutter);
}

/* Eyebrow: DM Sans 600 14 uppercase, 0.14em */
.bhh .bhh-eyebrow {
    font-family: var(--bhh-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bhh-purple);
}

/* Section heading: Haffer 600 44 / 1.1 */
.bhh .bhh-h2 {
    font-family: var(--bhh-font-head);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--bhh-ink);
}
.bhh .bhh-h2 .bhh-highlight {
    color: var(--bhh-purple);
}

/* Lead text: 18 / 1.6 */
.bhh .bhh-lead,
.bhh .bhh-lead p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--bhh-muted);
}
.bhh .bhh-lead {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.bhh .bhh-lead strong,
.bhh .bhh-lead b {
    font-weight: 600;
    color: var(--bhh-purple);
}
.bhh .bhh-lead a {
    color: var(--bhh-purple);
    text-decoration: underline;
}

/* Checklist: purple tick, 16 / 1.5 */
.bhh .bhh-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bhh .bhh-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--bhh-check-text);
}
.bhh .bhh-checks svg {
    margin-top: 3px;
    color: var(--bhh-purple);
}

/* Purple button, 48 high, optional arrow */
.bhh .bhh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--bhh-purple);
    box-shadow: 0 4px 12px rgba(22, 22, 22, 0.10);
    font-family: var(--bhh-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #FFFFFF;
    text-align: center;
    transition: background-color 0.2s ease;
}
.bhh .bhh-btn:hover,
.bhh .bhh-btn:focus-visible {
    background: var(--bhh-purple-dark);
    color: #FFFFFF;
}
.bhh .bhh-btn:focus-visible,
.bhh .bhh-link:focus-visible {
    outline: 2px solid var(--bhh-purple);
    outline-offset: 3px;
}

/* Text link with arrow */
.bhh .bhh-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bhh-purple);
}
.bhh .bhh-link svg {
    transition: transform 0.2s ease;
}
.bhh .bhh-link:hover {
    color: var(--bhh-purple-dark);
}
.bhh .bhh-link:hover svg {
    transform: translateX(3px);
}

/* Decorative line pattern (hero, enterprise, CTA): anchored bottom-right, faded in towards the bottom */
.bhh .bhh-pattern {
    position: absolute;
    right: 0;
    bottom: -100px;
    width: 170%;
    max-width: none;
    height: auto;
    opacity: 0.4;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.45) 60%, #000 92%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.45) 60%, #000 92%);
}

/* Wave lines (brighthire_home_waves()): fill the box, colour from `color` */
.bhh .bhh-waves {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Centred section head (product page): eyebrow, heading, lead, 18px apart */
.bhh .bhh-head {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.bhh .bhh-head .bhh-h2 {
    text-wrap: balance;
}
.bhh .bhh-head .bhh-lead {
    max-width: 820px;
    font-size: 20px;
    line-height: 1.55;
    text-wrap: pretty;
}
/* Larger section heading (product page): Haffer 600 52 / 1.08 */
.bhh .bhh-h2.bhh-h2--xl {
    font-size: 52px;
    line-height: 1.08;
}

.bhh .bhh-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1279px) {
    .bhh {
        --bhh-gutter: 64px;
    }
}
@media (max-width: 991px) {
    .bhh {
        --bhh-gutter: 40px;
    }
    .bhh .bhh-h2,
    .bhh .bhh-h2.bhh-h2--xl {
        font-size: 36px;
    }
    .bhh .bhh-head .bhh-lead {
        font-size: 18px;
    }
}
/* Mobile design: 390 wide, 20px gutters */
@media (max-width: 767px) {
    .bhh {
        --bhh-gutter: 20px;
    }
    .bhh .bhh-eyebrow {
        font-size: 12px;
    }
    .bhh .bhh-h2,
    .bhh .bhh-h2.bhh-h2--xl {
        font-size: 30px;
        line-height: 1.12;
        text-wrap: balance;
    }
    .bhh .bhh-head {
        gap: 14px;
    }
    .bhh .bhh-head .bhh-lead {
        font-size: 16px;
    }
    .bhh .bhh-lead,
    .bhh .bhh-lead p {
        font-size: 16px;
    }
    .bhh .bhh-lead {
        gap: 18px;
    }
    .bhh .bhh-checks {
        gap: 10px;
    }
    .bhh .bhh-checks li {
        font-size: 15px;
    }
    .bhh .bhh-btn {
        width: 100%;
    }
}
/*
 * Product icons (brighthire_home_product_icon): 32px boxes, purple line art, gently animated
 * (level bars, a breathing trend line and a slow hue shift on the orb).
 */
.bhh .bhh-picon {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #4E2BCD;
}
.bhh .bhh-picon svg {
    display: block;
    overflow: visible;
}
.bhh .bhh-picon--orb i {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 22% 64%, #44F2EE 0%, rgba(68, 242, 238, 0) 46%), radial-gradient(circle at 78% 34%, #C42CF6 0%, rgba(196, 44, 246, 0) 42%), radial-gradient(circle at 88% 64%, #FF86EC 0%, rgba(255, 134, 236, 0) 38%), radial-gradient(circle at 46% 16%, #7B55F4 0%, rgba(123, 85, 244, 0) 55%), radial-gradient(circle at 52% 88%, #4C6CF6 0%, rgba(76, 108, 246, 0) 55%), linear-gradient(150deg, #8F7CF2, #4F86F7 58%, #3CCBF4);
    box-shadow: 0 0 16px rgba(140, 110, 255, 0.35);
    animation: bhh-picon-hue 12s ease-in-out infinite;
}
.bhh .bhh-picon--live b {
    position: absolute;
    left: 7px;
    top: 12px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 6px;
}
.bhh .bhh-picon--live i {
    display: block;
    width: 2px;
    height: 6px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: bottom;
    animation: bhh-picon-level 4.8s ease-in-out infinite;
}
.bhh .bhh-picon--live i:nth-child(2) {
    animation-delay: 0.15s;
}
.bhh .bhh-picon--live i:nth-child(3) {
    animation-delay: 0.3s;
}
.bhh .bhh-picon--intel {
    align-items: flex-end;
    justify-content: flex-start;
    gap: 3px;
    padding: 0 0 5px 3px;
    box-sizing: border-box;
}
.bhh .bhh-picon--intel svg {
    position: absolute;
    left: 3px;
    top: -1px;
}
.bhh .bhh-picon--intel path {
    animation: bhh-picon-trend 6.5s ease-in-out infinite;
}
.bhh .bhh-picon--intel i {
    display: block;
    width: 5px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: bottom;
    animation: bhh-picon-bar 6.5s ease-in-out infinite;
}
.bhh .bhh-picon--intel i:nth-of-type(1) {
    height: 10px;
}
.bhh .bhh-picon--intel i:nth-of-type(2) {
    height: 15px;
    animation-delay: 0.2s;
}
.bhh .bhh-picon--intel i:nth-of-type(3) {
    height: 20px;
    animation-delay: 0.4s;
}
@keyframes bhh-picon-hue {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(-18deg); }
}
@keyframes bhh-picon-level {
    0%, 100% { transform: scaleY(0.72); }
    50% { transform: scaleY(1); }
}
@keyframes bhh-picon-bar {
    0%, 100% { transform: scaleY(0.82); }
    50% { transform: scaleY(1); }
}
@keyframes bhh-picon-trend {
    0%, 100% { stroke-dashoffset: 5; opacity: 0.65; }
    50% { stroke-dashoffset: 0; opacity: 1; }
}

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

/* Page width "Wide" (body.bhh-wide, product page design v17): these sections grow to 1520px including
   5vw (20-64px) side padding; the others keep their own widths */
.bhh-wide .bhh-phero .bhh-container,
.bhh-wide .bhh-spotlight .bhh-container,
.bhh-wide .bhh-steps .bhh-container,
.bhh-wide .bhh-ats .bhh-container,
.bhh-wide .bhh-cta .bhh-container,
.bhh-wide .faq-block--split .bhh-container,
.bhh-wide .bhh-pricing .bhh-pricing__container {
    max-width: 1520px;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
}