/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    --radius-field: 0rem;
    --color-white: #FFFFFF;
    --color-primary: #9C5C1C;
    --color-wood: #783F13;
    --color-dark-primary: #451004;
    --color-secondary: #DBB86B;
    --color-navigation-background: #C5974C;
    --color-light: #E7CF9C;
    --color-black: #090c0d;
    --color-background: #FBF7EF;
    --color-verse-index: #565f69;
    --bible-font-family: Times New Roman;
}

body {
    background-color: var(--color-background);
}

button {
    cursor: pointer;
}

input[type="radio"] {
    background-color: var(--color-white);
    border-color: var(--color-checkbox-accent);
}

input[type="radio"]:checked {
    border-color: var(--color-checkbox-border);
    background-color: var(--color-checkbox-background);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-primary);
}

input,
select,
textarea {
    color: var(--color-primary);
}

/* Remove outline for mouse users */
input[type="radio"]:focus:not(:focus-visible) {
    outline: none;
}

/* Show custom outline for keyboard users */
input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

optgroup {
    font-size: 10px;
}

/* Hide scrollbar for chapter navigation */
.hide-scrollbar {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* ===== Make scrollbars transparent in WebKit (Safari, Chrome, Edge Chromium, Opera) ===== */

/* Apply to all scrollable elements */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background: transparent;
    /* ensure the base is transparent */
    -webkit-appearance: none;
    /* avoid native default styling */
}

/* Track (background behind the thumb) */
*::-webkit-scrollbar-track {
    background: transparent !important;
    /* remove white/colored track in Safari */
    -webkit-appearance: none;
}

/* Thumb (drag handle) — set transparent by default, keep hit-area with border */
*::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* invisible by default */
    border-radius: var(--radius-field);
    border: 3px solid transparent;
    /* preserves hit area and consistent size */
    background-clip: padding-box;
    -webkit-appearance: none;
}

/* Corner where two scrollbars meet (bottom-right) */
*::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Optional: show a subtle thumb on hover/focus for discoverability */
*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.06);
    /* adjust alpha to taste */
}