/* Bass CSS colors */
:root {
    --primary-color: #4a637d;
    --primary-color-on-hover: #3a4c60;
    --primary-color-light: #d0e1f5;
    --secondary-color: #a72536;
    --secondary-color-on-hover: #88202e;
    --secondary-color-light: #ffe3e3;
    --tertiary-color: #ffc107;
    --tertiary-color-on-hover: #e6ac06;
    --tertiary-color-light: #fff8e1;
    --neutral: #e8ecf1;
    --neutral-100: #f8fafc;
    --text-color: #333;
    --navbar-link-while-active: #d0e1f5;
    --navbar-link-on-hover:#bcd7f7;
}

/* Text colors */
.text-plucky-primary {
    color: var(--primary-color);
}
a.text-plucky-primary:hover {
    color: var(--primary-color-on-hover);
}
.text-plucky-secondary {
    color: var(--secondary-color);
}
.a.text-plucky-secondary:hover,
.button.text-plucky-secondary:hover {
    color: var(--secondary-color-on-hover);
}
.text-neutral {
    color: var(--neutral);
}

/* Background classes */
.bg-plucky-primary {
    background-color: var(--primary-color);
    color: white;
}
.bg-plucky-primary-light {
    background-color: var(--primary-color-light);
}
.bg-plucky-secondary {
    background-color: var(--secondary-color);
    color: white;
}
.bg-plucky-secondary-light {
    background-color: var(--secondary-color-light);
}
.bg-plucky-tertiary {
    background-color: var(--tertiary-color);
}
.bg-plucky-tertiary-light {
    background-color: var(--tertiary-color-light)
}
.bg-plucky-neutral {
    background-color: var(--neutral);
}
.bg-plucky-neutral-light {
    background-color: var(--neutral-100);
}


/* Border classes */
.border-plucky-primary {
    border-color: var(--primary-color);
}
.border-plucky-primary-start {
    border-left: 5px solid var(--primary-color);
}
.border-plucky-secondary {
    border-color: var(--secondary-color);
}

/* Overwriting Primary Bootstrap Button */
.btn-plucky-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
input[type="radio"] + label.btn-plucky-primary:hover {
    background-color: var(--primary-color-on-hover) !important;
    border-color: var(--primary-color-on-hover) !important;
    color: white !important;
}
.btn-plucky-primary:hover {
    background-color: var(--primary-color-on-hover);
    border-color: var(--primary-color-on-hover);
    color: white;
}
.btn-outline-plucky-primary {
    color: var(--primary-color);
    background-color: white;
    border-color: var(--primary-color);
}
.btn-outline-plucky-primary:hover {
    background-color: var(--primary-color);
    color: white;
}
.btn-outline-plucky-secondary {
    color: var(--secondary-color);
    background-color: white;
    border-color: var(--secondary-color);
}
.btn-outline-plucky-secondary:hover {
    background-color: var(--secondary-color);
    color: white;
}

/* Adding to Bootstrap */
.nav-link {
    color: var(--text-color);
}
.nav-link.active {
    color:black;
}
.nav-link:hover {
    color: black;
}
.nav-item:has(> .nav-link.active) {
    color: black;
    background-color: var(--neutral);
    border-radius: 0.25rem;
}

/* Overwriting Danger Bootstrap Button */
.btn-plucky-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}
.btn-plucky-secondary:hover {
    background-color: var(--secondary-color-on-hover);
    border-color: var(--secondary-color-on-hover);
    color: white;
}
.btn-outline-danger {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-outline-danger:hover {
    background-color: var(--secondary-color);
    color: white;
}

/* Custom active class for navbar */
.btn-neutral {
    border: 1px solid rgba(255, 255, 255, 0);
}
.btn-neutral:hover {
    border: 1px solid var(--primary-color);
}
.btn-neutral-active {
    background: rgba(0, 0, 0, 0.096);
    border: 1px solid rgba(255, 255, 255, 0);
    color: black;
}
.btn-neutral-active:hover {
    border: 1px solid var(--primary-color);
}

/* Set the brand custom color */
.text-plucky-secondary {
    color: var(--secondary-color);
}
.text-bg-plucky-secondary {
    color: white;
    background-color: var(--secondary-color);
}
button.text-bg-plucky-secondary:hover,
a.text-bg-plucky-secondary:hover {
    background-color: var(--secondary-color-on-hover);
    color: white;
}
.text-plucky-teal {
    color: var(--primary-color);
}
.text-bg-plucky-primary {
    color: white;
    background-color: var(--primary-color);
}
a.text-bg-plucky-primary:hover,
a.text-bg-plucky-primary.show,
button.text-bg-plucky-primary:hover,
button.text-bg-plucky-primary.show {
    color: white;
    background-color: var(--primary-color-on-hover);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Enables cloaking for Alpine JS */
[x-cloak] {
    display: none !important;
}

/* Item wiggles on hover */
.hover-wiggle:hover {
    animation: wiggle 0.5s ease-in-out infinite;
}
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

/* Dialogue Modals */
dialog {
    width: 80vw;
}
dialog[open] {
    opacity: 1;
    pointer-events: inherit;
}
dialog::backdrop {
    background-color: #0000003d;
}
/* Prevent scroll behind dialogue modals */
body:has(dialog[open]) {
    overflow: hidden;
}

/* Outlet logos */
.outlet-logo-small {
    max-width: 50px;
    max-height: 50px;
    padding: 3px;
    width: auto;  /* Allow width to adjust based on aspect ratio */
    height: auto; /* Allow height to adjust based on aspect ratio */
    border: 1px solid rgb(215, 215, 215);
    border-radius: 3px;
}

/* Images and icons */
.custom-img-hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.custom-img-hover-scale:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* HTMX indicators */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: block;
}
.htmx-request.htmx-indicator {
    display: block;
}