/* 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;
}
.outlet-logo-xs {
    max-width: 50px;
    max-height: 50px;
    width: auto;  /* Allow width to adjust based on aspect ratio */
    height: auto; /* Allow height to adjust based on aspect ratio */
    margin: 0.1em;
    padding: 3px;
}
.outlet-badge-for-widget {
    font-size: 0.6em;
    font-style: italic;
    color: white;
    background-color: rgb(65, 126, 211);
    border-radius: 5px;
    padding: 4px;
    text-align: center;
    margin: 0.1em;
}

/* Outlet hover panel - shows outlet name and profile link on hover */
.outlet-hover-wrapper {
    position: relative;
    display: inline-block;
}

.outlet-hover-panel {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    /* Delay hiding to give user time to move cursor to panel */
    transition: visibility 0s 0.3s, opacity 0.15s ease-out 0.15s;
}

.outlet-hover-wrapper:hover .outlet-hover-panel,
.outlet-hover-wrapper:focus-within .outlet-hover-panel {
    visibility: visible;
    opacity: 1;
    /* Show immediately on hover */
    transition: visibility 0s, opacity 0.15s ease-in;
}

.outlet-hover-panel a {
    color: var(--primary-color);
}

/* 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;
}

/* Elegant link with animated underline on hover */
.link-elegant {
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.link-elegant::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    transition: width 0.2s ease;
}

.link-elegant:hover {
    color: var(--primary-color-on-hover);
}

.link-elegant:hover::after {
    width: 100%;
}

/* Livestream "Scheduled to air" line on the story detail page. */
.story-livestream-schedule {
    font-variant: small-caps;
    letter-spacing: 0.02em;
}

/* Dashboard nav-hero cards: step shadow-sm up to Bootstrap's shadow on hover. */
.card-hover-lift {
    transition: box-shadow 0.15s ease-in-out;
}

.card-hover-lift:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}