/*
 * Intentional improvements over the original static site (lcoa-website).
 * site.css stays a verbatim copy of the original styles.css; every deliberate
 * visual difference lives here, loaded right after it.
 */

/*
 * Select fields (requested by David, 2026-10-10): replace the browser's
 * default arrow, which sat tight against the right edge, with a chevron in
 * the site's muted ink, inset like the field's text padding. Height and text
 * position stay the same as before (47 px).
 */
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    /* 21 px text line + 24 px padding + 2 px border = the original 47 px. */
    line-height: 21px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2352646d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

select:hover {
    border-color: var(--muted);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2397aab3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

:root[data-theme='dark'] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2397aab3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The contact form sits on the always-dark "deep" panel. site.css sets its
   fields with the `background` shorthand, which resets image, repeat, position
   and size, so all four are set again here. */
.form select {
    background-color: var(--deep);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239fb2bb' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form select:hover {
    border-color: var(--deep-muted);
}

/* Keep the original focus ring: the hover border must not override it. */
select:focus,
.form select:focus {
    border-color: transparent;
}