/*
Theme Name: Benchmark Human Services
Theme URI: https://benchmarkhs.com
Author: Code Chameleon
Description: Classic theme for Benchmark Human Services. ACF Pro + ACF Extended page builder (rows, columns, content blocks), Gravity Forms. Source styles are built with Vite from src/ into assets/build.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: bhs
*/

/* ==========================================================================
   WordPress editor content (required rules)
   ========================================================================== */

.wp-content img {
    height: auto;
}

.wp-content h1, .wp-content h2, .wp-content h3, .wp-content h4, .wp-content h5, .wp-content h6 {
    margin: 1rem 0;
    display: block;
    clear: both;
}

.wp-content img.alignnone {
    clear: both;
    display: block;
    margin-bottom: 2rem;
}

.wp-content p {
    text-align: justify;
}

.wp-content div.column {
    overflow: hidden;
}

.wp-content figure.alignleft {
    margin: 2rem 2rem 2rem 0;
}

.wp-content figure.alignright {
    margin: 2rem 0 2rem 2rem;
}

.wp-content figure.alignnone {
    margin: 2rem 0;
}

.wp-content figure.aligncenter img, .wp-content figure.aligncenter, .wp-content img.aligncenter {
    display: block;
    margin: 0 auto;
    padding: 2rem 0;
}

.wp-content figure.aligncenter figcaption {
    text-align: center;
}

@media (min-width: 52rem) {
    .wp-content figure.alignleft, .wp-content img.alignleft {
        padding-bottom: 2rem;
        padding-right: 2rem;
        float: left;
        max-width: 50%;
    }

    .wp-content figure.alignright, .wp-content img.alignright {
        padding-bottom: 2rem;
        padding-left: 2rem;
        float: right;
        max-width: 50%;
    }

    .wp-content figure.alignnone, .wp-content img.aligncenter, .wp-content figure.alignright img, .wp-content figure.alignleft img, .wp-content figure.alignnone img {
        padding-bottom: 2rem;
    }
}

@media (max-width: 52rem) {
    .wp-content figure.alignleft, .wp-content img.alignleft {
        max-width: 40%;
        padding-bottom: 2rem;
        padding-right: 2rem;
        float: left;
    }

    .wp-content figure.alignright, .wp-content img.alignright {
        max-width: 40%;
        padding-bottom: 2rem;
        padding-left: 2rem;
        float: right;
    }

    .wp-content figure.alignnone, .wp-content img.aligncenter, .wp-content figure.alignright img, .wp-content figure.alignleft img, .wp-content figure.alignnone img {
        padding-bottom: 2rem;
    }
}

@media (max-width: 40rem) {
    .wp-content figure.alignleft, .wp-content img.alignleft {
        display: block;
        max-width: 100%;
        margin-bottom: 2rem;
        padding: 0;
    }

    .wp-content figure.alignright, .wp-content img.alignright {
        display: block;
        max-width: 100%;
        margin-bottom: 2rem;
        padding: 0;
    }

    .wp-content figure.aligncenter, .wp-content img.aligncenter {
        display: block;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .wp-content figure, .wp-content img {
        display: block;
        max-width: 100%;
    }
}

/* The design sets body copy left-aligned; keep editor content consistent with it. */
.bhs-prose.wp-content p {
    text-align: inherit;
}

/* Article bodies space headings like any other child (src/css/components/_news.scss),
   not with the generic .wp-content heading margins above. */
.news-post__body.wp-content > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

.news-post__body.wp-content > * + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--space-md-plus);
}

.news-post__body.wp-content > :is(hr, figure, .media-pair) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--space-2xl);
}

/* ==========================================================================
   Page Builder rows and columns (blocks/row.php)
   ========================================================================== */

.bhs-row {
    position: relative;
    background-position: center;
    background-size: cover;
}

.bhs-row__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
}

.bhs-row__grid.bhs-container {
    column-gap: var(--gutter, 2rem);
}

.bhs-row__col {
    grid-column: span 12;
    min-width: 0;
}

@media (min-width: 64rem) {
    .bhs-row__col--2 { grid-column: span 2; }
    .bhs-row__col--3 { grid-column: span 3; }
    .bhs-row__col--4 { grid-column: span 4; }
    .bhs-row__col--6 { grid-column: span 6; }
    .bhs-row__col--8 { grid-column: span 8; }
    .bhs-row__col--9 { grid-column: span 9; }
}

.bhs-row-text-dark { color: var(--color-navy); }

.bhs-mt-none { margin-top: 0; }
.bhs-mt-xs { margin-top: 0.75rem; }
.bhs-mt-sm { margin-top: 1.5rem; }
.bhs-mt-md { margin-top: 3rem; }
.bhs-mt-lg { margin-top: 4.5rem; }
.bhs-mt-xl { margin-top: 6rem; }
.bhs-mt-xxl { margin-top: 9rem; }
.bhs-mb-none { margin-bottom: 0; }
.bhs-mb-xs { margin-bottom: 0.75rem; }
.bhs-mb-sm { margin-bottom: 1.5rem; }
.bhs-mb-md { margin-bottom: 3rem; }
.bhs-mb-lg { margin-bottom: 4.5rem; }
.bhs-mb-xl { margin-bottom: 6rem; }
.bhs-mb-xxl { margin-bottom: 9rem; }
.bhs-ml-none { margin-left: 0; }
.bhs-ml-xs { margin-left: 0.75rem; }
.bhs-ml-sm { margin-left: 1.5rem; }
.bhs-ml-md { margin-left: 3rem; }
.bhs-ml-lg { margin-left: 4.5rem; }
.bhs-ml-xl { margin-left: 6rem; }
.bhs-ml-xxl { margin-left: 9rem; }
.bhs-mr-none { margin-right: 0; }
.bhs-mr-xs { margin-right: 0.75rem; }
.bhs-mr-sm { margin-right: 1.5rem; }
.bhs-mr-md { margin-right: 3rem; }
.bhs-mr-lg { margin-right: 4.5rem; }
.bhs-mr-xl { margin-right: 6rem; }
.bhs-mr-xxl { margin-right: 9rem; }
.bhs-pt-none { padding-top: 0; }
.bhs-pt-xs { padding-top: 0.75rem; }
.bhs-pt-sm { padding-top: 1.5rem; }
.bhs-pt-md { padding-top: 3rem; }
.bhs-pt-lg { padding-top: 4.5rem; }
.bhs-pt-xl { padding-top: 6rem; }
.bhs-pt-xxl { padding-top: 9rem; }
.bhs-pb-none { padding-bottom: 0; }
.bhs-pb-xs { padding-bottom: 0.75rem; }
.bhs-pb-sm { padding-bottom: 1.5rem; }
.bhs-pb-md { padding-bottom: 3rem; }
.bhs-pb-lg { padding-bottom: 4.5rem; }
.bhs-pb-xl { padding-bottom: 6rem; }
.bhs-pb-xxl { padding-bottom: 9rem; }
.bhs-pl-none { padding-left: 0; }
.bhs-pl-xs { padding-left: 0.75rem; }
.bhs-pl-sm { padding-left: 1.5rem; }
.bhs-pl-md { padding-left: 3rem; }
.bhs-pl-lg { padding-left: 4.5rem; }
.bhs-pl-xl { padding-left: 6rem; }
.bhs-pl-xxl { padding-left: 9rem; }
.bhs-pr-none { padding-right: 0; }
.bhs-pr-xs { padding-right: 0.75rem; }
.bhs-pr-sm { padding-right: 1.5rem; }
.bhs-pr-md { padding-right: 3rem; }
.bhs-pr-lg { padding-right: 4.5rem; }
.bhs-pr-xl { padding-right: 6rem; }
.bhs-pr-xxl { padding-right: 9rem; }

.bhs-editor-notice {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--color-red);
    color: var(--color-red);
    font-size: 0.875rem;
}

/* ==========================================================================
   Gravity Forms
   Real GF 3.x markup in the spots where the static build had hand-written mock markup
   (partials/gravity-forms/*, the footer sign-up). GF's own stylesheets are switched off
   (gform_disable_css in helpers/forms.php), as on the static site, so the compiled
   _gravity-forms / _insights / _contact / _news rules apply to the real markup; this
   section covers what real markup adds or names differently. The panel wrappers get
   `gform_wrapper--signup` (and `--contact`) from bhs_render_panel_form().
   ========================================================================== */

/* GF utility markup normally hidden by its CSS. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield_visibility_administrative,
.gform_wrapper .gf_invisible {
    display: none !important;
}

.gform_wrapper .screen-reader-text,
.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .gform-field-label.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.gform_wrapper .gfield_required_text,
.gform_wrapper .gfield_required_asterisk {
    margin-left: 0.25em;
}

/* GF 2.9+ AJAX loader (an empty span without GF's CSS). */
.gform_wrapper .gform-loader,
.gform_wrapper .gform_ajax_spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.75rem;
    vertical-align: middle;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bhs-gf-spin 0.8s linear infinite;
}

.gform_wrapper img.gform_ajax_spinner {
    padding: 0;
    border: 0;
    animation: none;
}

@keyframes bhs-gf-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper .gform-loader { animation-duration: 2.4s; }
}

/* Validation messages GF prints under fields and above the form. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.3125rem;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font: 700 1rem/1.3125rem var(--font-text);
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

/* GF focuses the summary (tabindex -1) after a failed submit; it isn't a control. */
.gform_wrapper .gform_validation_errors:focus {
    outline: none;
}

.gform_wrapper .gform_validation_errors .gform-icon {
    display: none;
}

.gform_wrapper .gform_validation_errors ol {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.gform_wrapper .gform_validation_errors a {
    color: inherit;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Dark sign-up / contact panels (.signup-panel, Navy / Form Panel)
   -------------------------------------------------------------------------- */

/* The mock has no required marker (fields carry aria-required) and a visually hidden
   "Consent" legend. */
.signup-panel .gform_wrapper .gfield_required,
.site-footer__signup .gform_wrapper .gfield_required {
    display: none;
}

.signup-panel .gform_wrapper .gfield--type-consent > legend.gfield_label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.signup-panel .gform_wrapper .gfield--type-consent {
    padding: 0;
    margin: 0;
    border: 0;
}

/* Phone: no country picker in GF; the field is the mock's plain white input. */
.signup-panel .gform_wrapper .ginput_container_phone input[type="tel"] {
    width: 100%;
}

/* State select: the mock's chevron (a sibling SVG there) as a masked pseudo-element. */
.signup-panel .gform_wrapper .ginput_container_select {
    position: relative;
}

.signup-panel .gform_wrapper .ginput_container_select::after {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    content: "";
    background: var(--bhs-placeholder);
    transform: translateY(-50%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 7.03786L10 12.9609L4.5 7.03786' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.5 7.03786L10 12.9609L4.5 7.03786' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.signup-panel .gform_wrapper select.gfield_select {
    width: 100%;
    height: 3.875rem;
    padding: 0 3rem 0 1rem;
    font: inherit;
    color: var(--color-black);
    appearance: none;
    cursor: pointer;
    background: var(--color-white);
    border: 0;
    border-radius: 0;
}

.signup-panel .gform_wrapper select.gfield_select:has(option[value=""]:checked) {
    color: var(--bhs-placeholder);
}

.signup-panel .gform_wrapper textarea::placeholder {
    color: var(--bhs-placeholder);
    opacity: 1;
}

/* Submit: Red on the sign-up panels (bhs-btn--red), Gold on Contact and the News &
   Insights split band (gform_button--yellow in the mock). */
.signup-panel .gform_wrapper .gform_button {
    --btn-bg: var(--color-red);
    --btn-bg-hover: var(--bhs-red-hover);
    --btn-fg: var(--color-white);
}

.signup-panel .gform_wrapper--contact .gform_button,
.signup-panel--split .gform_wrapper .gform_button {
    --btn-bg: var(--color-gold);
    --btn-bg-hover: var(--color-gold-25);
    --btn-fg: var(--color-navy);
}

/* Errors on the dark panels and the footer: the light-surface error red is unreadable on
   Navy, so messages are Gold and the white fields get a red inset edge. */
:is(.signup-panel, .site-footer__signup) .gform_wrapper .gfield_error .gfield_label {
    color: var(--color-white);
}

:is(.signup-panel, .site-footer__signup) .gform_wrapper :is(.gfield_validation_message, .validation_message) {
    font-weight: 600;
    color: var(--color-gold);
}

:is(.signup-panel, .site-footer__signup) .gform_wrapper .gfield_error :is(input:not([type="checkbox"]), select, textarea) {
    box-shadow: inset 0 0 0 2px var(--color-red);
}

:is(.signup-panel, .site-footer__signup) .gform_wrapper .gform_validation_errors {
    color: var(--color-white);
    border-color: var(--color-gold);
}

/* Confirmation (replaces the wrapper after an AJAX submit). */
:is(.signup-panel, .site-footer__signup) .gform_confirmation_message {
    max-width: none;
    padding: 1rem 1.25rem;
    font: var(--text-p1);
    color: var(--color-white);
    border: 2px solid var(--color-light-blue);
    border-radius: 0;
}

.site-footer__signup .gform_confirmation_message {
    max-width: 16.3125rem;
    font: var(--text-p2);
}

/* --------------------------------------------------------------------------
   Footer sign-up (mock: .footer-signup__label / __row / __input / __submit)
   The GF wrappers collapse (display: contents) so the label, the field and the submit
   sit on the form's own grid: label across, 208 field + 53 square chevron below.
   -------------------------------------------------------------------------- */
.site-footer__signup .gform_wrapper {
    --gf-border-focus: var(--color-gold);

    max-width: none;
}

.site-footer__signup .gform_wrapper form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.3125rem;
    max-width: 16.3125rem;
}

.site-footer__signup .gform_wrapper :is(.gform_body, .gform_fields, .gfield) {
    display: contents;
}

.site-footer__signup .gform_wrapper :is(.gform_validation_errors, .gfield_label, .gfield_validation_message, .validation_message, .gfield_description) {
    grid-column: 1 / -1;
}

.site-footer__signup .gform_wrapper :is(.gfield_validation_message, .validation_message, .gfield_description) {
    order: 1;
}

.site-footer__signup .gform_wrapper .gform_validation_errors {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font: var(--text-p3);
}

.site-footer__signup .gform_wrapper .gform_validation_errors .gform_submission_error {
    font-size: 0.875rem;
    line-height: 1.3125rem;
}

.site-footer__signup .gform_wrapper .gfield_label {
    display: block;
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-white);
}

.site-footer__signup .gform_wrapper .ginput_container {
    grid-column: 1;
    min-width: 0;
}

.site-footer__signup .gform_wrapper input[type="email"],
.site-footer__signup .gform_wrapper input[type="text"] {
    display: block;
    width: 100%;
    height: 3.125rem;
    padding: 0 0.75rem;
    font: inherit;
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: 0;
}

.site-footer__signup .gform_wrapper input:is([type="email"], [type="text"]):focus {
    outline: none;
}

.site-footer__signup .gform_wrapper input:is([type="email"], [type="text"]):focus-visible {
    outline: var(--focus-ring-on-dark);
    outline-offset: var(--focus-offset);
    border-color: var(--color-gray-100);
}

.site-footer__signup .gform_wrapper .gform_footer {
    display: flex;
    grid-column: 2;
    margin: 0;
    padding: 0;
}

.site-footer__signup .gform_wrapper .gform_button.footer-signup__submit {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.3125rem;
    height: 3.125rem;
    min-height: 0;
    padding: 0;
    color: var(--color-white);
    cursor: pointer;
    background: var(--bhs-red-small);
    border: 0;
    border-radius: 0;
    transition: background-color var(--bhs-dur-fast) linear;
}

.site-footer__signup .gform_wrapper .gform_button.footer-signup__submit:hover {
    background: var(--bhs-red-hover);
}

.site-footer__signup .gform_wrapper .gform_footer .gform-loader {
    position: absolute;
    margin: 0.9375rem 0 0 4rem;
    color: var(--color-white);
}

@media (width < 48rem) {
    .site-footer__signup .gform_wrapper form,
    .site-footer__signup .gform_confirmation_message {
        max-width: none;
    }
}