/* OpsHarbor overrides. Kept out of styles.css so a theme update cannot drop them. */

/* The theme sets appearance:none on selects but never styles them, so they did not match
   the text inputs beside them. Values below are copied from a computed text input. */
.form-contact select {
    /* The theme leaves selects as content-box while inputs are border-box, so the
       24px right padding for the arrow was making them 24px wider than every input. */
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgb(9, 9, 11);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgb(212, 212, 216);
    border-radius: 0;
    padding: 0 24px 11px 0;
    /* appearance:none removes the native arrow, so draw one back in */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    cursor: pointer;
}

.form-contact select:focus {
    outline: none;
    border-bottom-color: #54459C;
}

/* Placeholder option should read as placeholder text, not as a real answer. */
.form-contact select:has(option[value=""]:checked) {
    color: rgb(113, 113, 122);
}


/* ---------------------------------------------------------------------------
   Theme dropdown (jquery.nice-select), used on the contact forms.

   The stock arrow glyph is wrong: nice-select's ::before points at an icomoon
   codepoint that renders as a small box, not a chevron. Repointed at
   .icon-angle-down-solid (\e901), the chevron this icon font actually ships
   and which the rest of the site uses.
   --------------------------------------------------------------------------- */
.form-contact .nice-select::before {
    content: "\e901";
    font-family: icomoon;
    font-size: 12px;
    line-height: 1;
    color: rgb(113, 113, 122);
    border: 0;
    width: auto;
    height: auto;
    transform: none;
    transition: transform .2s ease;
}

/* Flip it while the list is open, the way a native select implies. */
.form-contact .nice-select.open::before {
    transform: rotate(180deg);
}



/* ---------------------------------------------------------------------------
   Legal pages (privacy.html, terms.html).

   The theme resets list-style on li, so an inline list-style on the ul does
   nothing and the bullets vanished. Scoped class instead of fighting the reset
   globally, since bulleted prose only appears on these two pages.
   --------------------------------------------------------------------------- */
.legal-list {
    padding-left: 22px;
    margin-bottom: 16px;
}

.legal-list li {
    list-style: disc outside;
    margin-bottom: 8px;
}

/* Section headings on the legal pages read better with a little air above. */
.legal-prose h5 {
    margin-top: 8px;
}


/* ---------------------------------------------------------------------------
   Open dropdown panel.

   The theme renders nice-select's .list on a BLACK background while the option
   text stays near-black, so the panel appeared as a solid black box with the
   options invisible inside it. Repainted to match the light form.
   --------------------------------------------------------------------------- */
.form-contact .nice-select .list {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgb(228, 228, 231);
    border-radius: 12px;
    padding: 6px;
    margin-top: 6px;
    box-shadow: 0 12px 28px rgba(9, 9, 11, .12);
    /* 340px fits all seven service options without scrolling. At 260px the last one
       ("Not sure yet") sat below the fold, and a hidden option is a lost lead. */
    max-height: 340px;
    overflow-y: auto;
}

.form-contact .nice-select .option {
    color: rgb(9, 9, 11);
    background-color: transparent;
    font-size: 16px;
    line-height: 1.4;
    min-height: 0;
    padding: 10px 12px;
    border-radius: 8px;
    list-style: none;
    transition: background-color .15s ease, color .15s ease;
}

.form-contact .nice-select .option:hover,
.form-contact .nice-select .option.focus,
.form-contact .nice-select .option.hover {
    background-color: rgb(244, 244, 245);
    color: rgb(9, 9, 11);
}

.form-contact .nice-select .option.selected {
    font-weight: 600;
    color: #54459C;
}

/* The placeholder row should not look like a real answer. */
.form-contact .nice-select .option[data-value=""] {
    color: rgb(113, 113, 122);
    font-weight: 400;
}

/* Nor should the closed widget, while nothing has been chosen. */
.form-contact .nice-select .current {
    color: rgb(9, 9, 11);
}