/* static/css/app-styles.css */
@import url('./colors.css');

.align-chat-left {
    margin-left: 20px;
}

/* ByteFlavor Text Styles */

.byteflavor-lilita {
    font-size: 2.0rem;
    font-family: 'Lilita One', cursive;
    color: var(--bs-secondary-500);
}


.byteflavor-blackopsone {
    font-family: 'Black Ops One', cursive;
    font-size: 2.0rem;
    line-height: 1;
    color: var(--bs-secondary-500);
}

.custom-header-border {
    border-bottom: 4px solid var(--bs-primary-400);
    background: linear-gradient(to right, var(--bs-primary-50) 0%, var(--bs-primary-100) 100%);
}

.custom-settings-icon {
    color: var(--bs-secondary-700);
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Desktop header micro-polish */
@media (min-width: 992px) {
    header.custom-header-border {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Nudge right-side controls down a touch to align with logo baseline */
    header .text-end,
    header .dropdown {
        margin-top: 4px;
    }
}

/* Desktop recipe card breathing room */
@media (min-width: 992px) {

    .recipe-card,
    .card.recipe-card {
        margin-right: 6px;
        margin-left: 6px;
    }
}

/* Desktop: outlined gear like mobile; solid on hover */
.dropdown .dropdown-toggle .custom-settings-icon {
    color: var(--bs-white);
    -webkit-text-stroke: 2px var(--bs-primary-500);
}

.dropdown .dropdown-toggle:hover .custom-settings-icon,
.dropdown .dropdown-toggle:focus .custom-settings-icon {
    color: var(--bs-primary-600);
    -webkit-text-stroke: 0;
    transform: rotate(90deg);
}

/* Desktop: prevent sticky focus/active thickness on Feedback button */
/* Desktop feedback icon button matches mobile look */
.feedback-desktop-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feedback-desktop-btn i {
    font-size: 18px;
    line-height: 1;
    color: var(--bs-primary-600);
}

.feedback-desktop-btn:hover i {
    color: var(--bs-white);
}

.feedback-desktop-btn:focus,
.feedback-desktop-btn:focus-visible,
.feedback-desktop-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove Bootstrap caret/arrow on the settings toggle */
#dropdownUser1.dropdown-toggle::after,
#dropdownUser1::after {
    display: none;
}

/* Desktop: open settings dropdown on hover, close on unhover */
@media (min-width: 577px) {

    header .dropdown:hover>.dropdown-menu,
    .dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* Rotate the cog when hovering the dropdown container */
    header .dropdown:hover .custom-settings-icon {
        color: var(--bs-primary-600);
        -webkit-text-stroke: 0;
        transform: rotate(90deg);
    }

    /* Desktop only: disable clicking; rely on hover */
    #dropdownUser1 {
        pointer-events: none;
    }
}

.gradient-bg {
    background: linear-gradient(to bottom, var(--bs-primary-25), var(--bs-gray-50));
}

a {
    color: var(--bs-primary-600);
}

.dark-link {
    color: var(--bs-secondary-700) !important;
    text-decoration: none;
}

.dark-link:hover {
    color: var(--bs-secondary-800) !important;
    text-decoration: underline;
}