/*--- Global Styles ---*/
main a {
    color: #8A2B2B;
    text-decoration: none;
    border-bottom: 1px dotted #8A2B2B;
}

main a:hover {
    color: #ca2d2d;
    text-decoration: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background: url('../arrow-down.svg') no-repeat calc(100% - 10px) center;
    background-size: 1rem;
    border-right: 16px solid transparent;
}

select[multiple] {
    background: white;
}

hr {
    border-color: #53545A;
}

.button {
    cursor: pointer;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #9ca3af;
}

/*--- Utility Classes ---*/
/* Used to prevent flashing of conditional fields before alpine.js is loaded */
[x-cloak] { display: none !important; }

/*--- Pagination Styles ---*/
.inner-pagination-item {
    border-color: #E0E0E0;
    border-width: 0 1px 0 0;
    width: 100%;
    text-align: center;
}

/* Add border to left and right on first element */
.desktop-pagination-container a:nth-child(2) .inner-pagination-item {
    border-width: 0 1px 0 1px;
}


/*--- Publication List Styles ---*/
.publications-list article:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}


/*--- Choices Library to Tailwind Styles ---*/
/* Make Choices dropdown look like Tailwind selects */
.choices {
    width: 100%;
    flex: 1 1;
    margin-bottom: 0;
}

.choices__inner {
    border: 1px solid #d1d5db; /* Tailwind: border-gray-300 */
    border-radius: 0.375rem;  /* Tailwind: rounded-md */
    padding: 0.5rem 0.75rem;  /* Tailwind: px-3 py-2 */
    min-height: 2.5rem;       /* Tailwind: h-10 */
    font-size: 1rem;          /* Tailwind: text-base */
    display: flex;
    align-items: center;
    background-color: #fff;   /* Tailwind: bg-white */
}

.choices__inner:hover {
    border-color: #9ca3af; /* Tailwind: border-gray-400 */
}

.choices__inner.is-focused,
.choices__inner.is-open {
    border-color: #2563eb;  /* Tailwind: border-blue-600 */
    box-shadow: 0 0 0 1px #2563eb;
}

/* Text inside select */
.choices__list--single .choices__item {
    padding-right: 2rem;
    color: #111827; /* Tailwind: text-gray-900 */
}

/* Placeholder styling */
.choices__placeholder {
    color: #9ca3af !important; /* Tailwind: text-gray-400 */
    opacity: 1;
}

/* Dropdown menu */
.choices__list--dropdown {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    margin-top: 0.25rem; /* Tailwind: mt-1 */
    background: #fff;
}

/* Dropdown option */
.choices__list--dropdown .choices__item {
    padding: 0.5rem 0.75rem; /* Tailwind px-3 py-2 */
    font-size: 1rem;
}

/* Hover option */
.choices__list--dropdown .choices__item--selectable:hover {
    background-color: #f3f4f6; /* Tailwind: bg-gray-100 */
}

/* Selected option */
.choices__item--selectable.is-highlighted {
    background-color: #e5e7eb; /* Tailwind bg-gray-200 */
}

/* Remove the default dropdown arrow */
.choices[data-type*="select-one"] .choices__inner::after {
    content: "";
    border: none;
}

/* Add custom Tailwind-style dropdown arrow */
/* Make Choices selects visually match regular <select> */

.choices[data-type*="select-one"] .choices__inner {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 2.5rem;
    border-right: 16px solid transparent;

    background-color: #fff;
    background-image: url('../arrow-down.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 1rem;

    border: 1px solid #d1d5db; /* border-gray-300 */
    border-radius: 0.375rem;
    min-height: 2.5rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* Remove Choices default chevron */
.choices[data-type*=select-one]::after {
    display: none !important;
}

.choices__list--dropdown .choices__item--selectable.is-selected {
    background-color: #f3f4f6; /* bg-gray-100 */
    font-weight: 600;
}