@charset "UTF-8";

/* ==========================================================================
   Bristal — Gravity Forms styling
   Reproduces the look of the legacy embedded HubSpot forms (see the
   `.hbspt-form` rules in style.css) on Gravity Forms' modern "orbital" markup.
   The orbital theme framework CSS is disabled in functions.php
   (gform_disable_form_theme_css), so these rules own the form appearance.
   Design tokens (--c*, --sl, --btn, --f-*) come from static/css/main.css.
   ========================================================================== */

@media screen {
  /* ---- Reset / neutralize leftover GF chrome ---------------------------- */
  .gform_wrapper {
    color: var(--cx);
    font-size: var(--f-d);
  }
  .gform_wrapper * {
    box-sizing: border-box;
  }

  /* Form heading (title / description / "* indicates required fields") is not
     part of the HubSpot design — hide it. */
  .gform_wrapper .gform_heading,
  .gform_wrapper .gform_required_legend {
    display: none;
  }

  /* Honeypot / spam-trap fields must stay hidden even without GF's own CSS. */
  .gform_wrapper .gform_validation_container,
  .gform_wrapper .gfield--type-honeypot {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ---- Field grid ------------------------------------------------------- */
  .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column-gap: 10rem;
    grid-row-gap: 10rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .gform_wrapper .gfield {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .gform_wrapper .gfield--width-full,
  .gform_wrapper .gfield.gfield--width-full {
    grid-column: 1 / -1;
  }
  .gform_wrapper .gfield--width-half {
    grid-column: span 1;
  }
  /* Comment/message textareas always span the full row, regardless of the
     field's width setting in the editor (some are set to 1/2 or 1/3). */
  .gform_wrapper .gfield--type-textarea {
    grid-column: 1 / -1;
  }

  /* ---- Labels ----------------------------------------------------------- */
  .gform_wrapper .gfield_label,
  .gform_wrapper .gform-field-label {
    display: block;
    margin: 0;
    padding-bottom: 0.5em;
    color: var(--cx);
    font-family: inherit;
    font-size: var(--f-d);
    font-weight: 400;
    line-height: 1.2;
  }
  .gform_wrapper .gfield_required,
  .gform_wrapper .gfield_required_asterisk {
    color: inherit;
    font-weight: inherit;
    margin-left: 0;
  }

  /* Screen-reader-only text (e.g. the date field's "MM slash DD slash YYYY").
     GF's own CSS normally hides this; we disable that CSS, so re-hide it. */
  .gform_wrapper .screen-reader-text,
  .gform_wrapper .gform-visually-hidden,
  .gform_wrapper .gfield_visibility_hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* ---- Input containers ------------------------------------------------- */
  .gform_wrapper .ginput_container {
    position: relative;
    display: flex;
    background-color: var(--c6);
    color: var(--cx);
    margin: 0;
  }
  .gform_wrapper .ginput_container::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--sl) solid;
    opacity: 0.1;
    pointer-events: none;
  }

  /* ---- Text / email / tel / date inputs and textareas ------------------- */
  .gform_wrapper .gfield input[type="text"],
  .gform_wrapper .gfield input[type="email"],
  .gform_wrapper .gfield input[type="tel"],
  .gform_wrapper .gfield input[type="url"],
  .gform_wrapper .gfield input[type="number"],
  .gform_wrapper .gfield input.datepicker,
  .gform_wrapper .gfield textarea {
    width: 100%;
    padding: 20rem 30rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    color: var(--cx);
    font: inherit;
    line-height: 1.5;
    min-width: 0;
  }
  .gform_wrapper .gfield textarea {
    resize: none;
    /* GF renders textareas at rows=10; the HubSpot forms used ~2 rows. Set an
       explicit compact height (overrides the rows attribute) to match. */
    height: max(80px, 90rem);
    min-height: 0;
  }
  .gform_wrapper .gfield input::placeholder,
  .gform_wrapper .gfield textarea::placeholder {
    color: var(--cx);
    opacity: 0.5;
  }

  /* ---- Native <select> (fallback before JS enhancement) ----------------- */
  .gform_wrapper .gfield select,
  .gform_wrapper .gfield select.gfield_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 20rem 60rem 20rem 30rem;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--cx);
    font: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0.85 0.85 7.85 7.85 14.85 0.85' fill='none' stroke='%23051840' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 30rem center;
    background-size: 16rem 9rem;
  }

  /* ---- Custom dropdown (built by gravity-forms.js from each <select>) ----
     Reuses the theme's global .selector component (defined in main.css) so it
     matches the HubSpot dropdown exactly. Only GF-specific tweaks live here. */
  .gform_wrapper .ginput_container_select .selector {
    width: 100%;
    font-size: var(--f-d);
  }
  .gform_wrapper .ginput_container_select .selector-holder-input {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    width: 100%;
  }
  /* Placeholder look for an unselected custom dropdown. */
  .gform_wrapper .ginput_container_select .selector-holder-input::placeholder {
    color: var(--cx);
    opacity: 1;
  }
  /* Long option lists (e.g. the community select) cap height and scroll,
     matching the legacy HubSpot dropdowns. */
  .gform_wrapper .ginput_container_select .selector-list {
    max-height: 50vh;
    overflow-y: auto;
  }
  /* While a dropdown is open, lift its section above later sections (which
     also use z-index:1) so the option list is not painted over. Toggled by
     gravity-forms.js. */
  .section.bristal-selector-section-open {
    z-index: 20;
  }

  /* ---- Radio / checkbox groups ----------------------------------------- */
  /* Radio/checkbox/consent fields are fieldsets and must not get the boxed
     input treatment. */
  .gform_wrapper fieldset.gfield {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  .gform_wrapper .ginput_container_radio,
  .gform_wrapper .ginput_container_checkbox,
  .gform_wrapper .ginput_container_consent {
    display: block;
    background: transparent;
  }
  .gform_wrapper .ginput_container_radio::before,
  .gform_wrapper .ginput_container_checkbox::before,
  .gform_wrapper .ginput_container_consent::before {
    content: none;
  }
  .gform_wrapper .gfield_radio,
  .gform_wrapper .gfield_checkbox {
    display: grid;
    gap: 12rem;
  }
  .gform_wrapper .gchoice {
    display: flex;
    align-items: center;
    gap: 12rem;
  }
  .gform_wrapper .gchoice input[type="radio"],
  .gform_wrapper .gchoice input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: none;
    width: max(18px, 22rem);
    height: max(18px, 22rem);
    margin: 0;
    padding: 0;
    border: var(--sl) solid var(--cx);
    background: transparent;
    cursor: pointer;
    position: relative;
  }
  .gform_wrapper .gchoice input[type="radio"] {
    border-radius: 50%;
  }
  .gform_wrapper .gchoice input[type="checkbox"] {
    border-radius: var(--br1);
  }
  .gform_wrapper .gchoice input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: max(4px, 5rem);
    border-radius: 50%;
    background: var(--cx);
  }
  .gform_wrapper .gchoice input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: max(3px, 4rem);
    background: var(--cx);
    border-radius: 1rem;
  }
  .gform_wrapper .gchoice label {
    margin: 0;
    padding: 0;
    color: var(--cx);
    cursor: pointer;
    line-height: 1.2;
  }
  /* The "Other" free-text input GF appends after a radio choice. */
  .gform_wrapper .gchoice .gchoice_button_text,
  .gform_wrapper .gfield_radio .gchoice input[type="text"] {
    margin-left: 10rem;
  }

  /* ---- Submit button ---------------------------------------------------- */
  .gform_wrapper .gform_footer,
  .gform_wrapper .gform-footer {
    margin-top: 50rem;
    padding: 0;
    display: block;
  }
  .gform_wrapper .gform_footer input[type="submit"],
  .gform_wrapper .gform_footer .gform_button,
  .gform_wrapper .gform-footer input[type="submit"],
  .gform_wrapper .gform-footer .gform_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 180rem;
    height: var(--btn);
    padding: 0 40rem;
    background-color: var(--c3);
    color: var(--c2);
    border: var(--sl) solid var(--c3);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-family: inherit;
    font-size: var(--f-d);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s;
  }
  .gform_wrapper .gform_footer input[type="submit"]:hover,
  .gform_wrapper .gform_footer .gform_button:hover,
  .gform_wrapper .gform-footer input[type="submit"]:hover,
  .gform_wrapper .gform-footer .gform_button:hover {
    background-color: transparent;
    color: var(--cx);
  }

  /* ---- Validation / errors --------------------------------------------- */
  .gform_wrapper .gform_validation_errors {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 20rem;
  }
  .gform_wrapper .gform_validation_errors .gform_submission_error {
    color: #ff0000;
    font-size: var(--f-d);
    font-weight: 500;
  }
  .gform_wrapper .gfield_validation_message,
  .gform_wrapper .validation_message {
    margin-top: 10rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: #ff0000;
    font-size: var(--f-s);
  }
  .gform_wrapper .gfield_error .ginput_container::before {
    border-color: #ff0000;
    opacity: 0.6;
  }
  .gform_wrapper .gfield_error .gfield_label {
    color: var(--cx);
  }

  /* Confirmation message after submit. */
  .gform_confirmation_message {
    color: var(--cx);
    font-size: var(--f-m);
  }

  /* ======================================================================
     Date picker — Gravity Forms uses the jQuery UI datepicker
     (#ui-datepicker-div), appended to <body>. Styled to match the calendar
     in the reference (white card, navy selection, clean nav). The month/year
     dropdowns + no prev/next arrows are enabled from gravity-forms.js.
     ====================================================================== */
  #ui-datepicker-div.ui-datepicker {
    width: auto;
    min-width: max(320px, 370rem);
    padding: 24rem;
    background-color: var(--c2);
    color: var(--c1);
    border: var(--sl) solid var(--c2);
    border-radius: var(--br1);
    box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.2);
    font-family: "Montserrat", sans-serif;
    font-size: max(14px, 16rem);
    z-index: 99999 !important;
  }
  #ui-datepicker-div .ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rem;
    padding: 0 0 12rem;
    margin-bottom: 12rem;
    border: 0;
    border-bottom: var(--sl) solid rgba(0, 0, 0, 0.1);
    background: transparent;
    color: var(--c1);
  }
  #ui-datepicker-div .ui-datepicker-prev,
  #ui-datepicker-div .ui-datepicker-next {
    display: none;
  }
  #ui-datepicker-div .ui-datepicker-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    margin: 0;
    line-height: 1.2;
  }
  #ui-datepicker-div .ui-datepicker-month,
  #ui-datepicker-div .ui-datepicker-year {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    color: var(--c1);
    font: inherit;
    font-weight: 500;
    padding: 4rem 22rem 4rem 8rem;
    border: 1px solid rgba(5, 24, 64, 0.4);
    border-radius: var(--br1);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0.85 0.85 7.85 7.85 14.85 0.85' fill='none' stroke='%23051840' stroke-width='1.4' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6rem center;
    background-size: 9rem 5rem;
  }
  #ui-datepicker-div table.ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: inherit;
  }
  #ui-datepicker-div .ui-datepicker-calendar th {
    padding: 8rem 0;
    font-size: max(12px, 13rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--c1);
    opacity: 0.6;
  }
  #ui-datepicker-div .ui-datepicker-calendar td {
    padding: 2rem;
    text-align: center;
  }
  #ui-datepicker-div .ui-datepicker-calendar td a,
  #ui-datepicker-div .ui-datepicker-calendar td span {
    display: block;
    padding: 11rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--c1);
    text-align: center;
    text-decoration: none;
    line-height: 1;
  }
  /* Day states. Selectors below match/exceed the base "td a" specificity so
     they win — a plain ".ui-datepicker-today a" would lose to it. */
  #ui-datepicker-div .ui-datepicker-calendar td a:hover {
    background-color: var(--c3);
    color: var(--c2);
  }
  #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a,
  #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today span,
  #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
  #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-highlight {
    background-color: var(--c3);
    color: var(--c2);
  }
  #ui-datepicker-div .ui-datepicker-unselectable span {
    opacity: 0.3;
  }
}

/* ==========================================================================
   Dark / community variant
   The community forms (e.g. IDs 4, 8, 10) render inside `.section__contrast`,
   which already re-maps `--cx` to white and the background to navy (--c3), so
   labels and field text turn light automatically. These overrides handle the
   pieces that are hard-coded in the base rules: input fills, the select
   chevron, and the submit button (inverted to a white button).

   Form ID 1 (the Resource Guide download form) is NOT inside a contrast
   section, so `#gform_wrapper_1` opts in to the same treatment and paints its
   own navy "blue box" around the form.
   ========================================================================== */
@media screen {
  /* Form 1: self-contained navy box. Re-mapping --cx/--cz mirrors
     `.section__contrast .section-inner`, so labels/text/chevrons turn light
     exactly like the community forms. */
  #gform_wrapper_1 {
    background-color: var(--c3);
    color: var(--cz);
    --cx: var(--c2);
    --cz: var(--c9);
    padding: 50rem 40rem;
  }

  /* Inputs: transparent fill on the navy panel, with a slightly stronger
     hairline border so fields read on the dark background. */
  .section__contrast .gform_wrapper .ginput_container,
  #gform_wrapper_1 .ginput_container {
    background-color: transparent;
  }
  .section__contrast .gform_wrapper .ginput_container::before,
  #gform_wrapper_1 .ginput_container::before,
  #gform_wrapper_1 .selector::before {
    opacity: 0.25;
  }

  /* Native <select> fallback chevron -> white. */
  .section__contrast .gform_wrapper .gfield select,
  #gform_wrapper_1 .gfield select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0.85 0.85 7.85 7.85 14.85 0.85' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* Custom dropdown: transparent on the navy panel, open or closed. In
     community sections the theme handles the closed state via `.s9-7 .selector`;
     form 1 isn't in that section, so set it here too. */
  .section__contrast .gform_wrapper .ginput_container_select .selector.active,
  #gform_wrapper_1 .ginput_container_select .selector,
  #gform_wrapper_1 .ginput_container_select .selector.active {
    background-color: transparent;
  }

  /* Submit button: inverted (white fill, navy text) to match the community
     design and the theme's `.section__contrast .button__default`. */
  .section__contrast .gform_wrapper .gform_footer input[type="submit"],
  .section__contrast .gform_wrapper .gform_footer .gform_button,
  .section__contrast .gform_wrapper .gform-footer input[type="submit"],
  .section__contrast .gform_wrapper .gform-footer .gform_button,
  #gform_wrapper_1 .gform_footer input[type="submit"],
  #gform_wrapper_1 .gform_footer .gform_button {
    background-color: var(--c2);
    color: var(--c1);
    border-color: var(--c2);
  }
  .section__contrast .gform_wrapper .gform_footer input[type="submit"]:hover,
  .section__contrast .gform_wrapper .gform_footer .gform_button:hover,
  .section__contrast .gform_wrapper .gform-footer input[type="submit"]:hover,
  .section__contrast .gform_wrapper .gform-footer .gform_button:hover,
  #gform_wrapper_1 .gform_footer input[type="submit"]:hover,
  #gform_wrapper_1 .gform_footer .gform_button:hover {
    background-color: transparent;
    color: var(--c2);
    border-color: var(--c2);
  }
}

/* ---- Mobile: stack paired fields, fixed 1px rem base (matches theme) ---- */
@media screen and (max-width: 1023.98px) {
  .gform_wrapper .gform_fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .gform_wrapper .gfield--width-half {
    grid-column: 1 / -1;
  }
}