/* /static/custom_styles.css */

/* This class provides a consistent gradient background and container style for all main content pages. */
/* On larger screens, we constrain the width for better readability. */
.content-wrapper {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    /* Constrain width on larger screens for better readability */
    margin: 0 auto;
    /* Center the container */
}

/* Ensure text within the container has good contrast */
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper p,
.content-wrapper div,
.content-wrapper a:not(.btn) {
    color: #333;
}

/* On mobile devices, make the container full-width for better use of space. */
@media (max-width: 768px) {
    .content-wrapper {
        /* Add horizontal padding to keep content away from screen edges */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-radius: 0;
        /* Remove rounded corners for edge-to-edge look */
        box-shadow: none;
        /* Remove shadow on mobile for a flatter look */
        max-width: 100%;
        /* Ensure full width on mobile */
    }
}

/* Default avatar style */
.avatar-img {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Install App Button Styles */
.install-btn,
button.install-btn,
#install-button.install-btn {
    background: linear-gradient(135deg, #3e2217 0%, #5a3328 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(62, 34, 23, 0.3);
    text-decoration: none;
    white-space: nowrap;
    animation: slideInFade 0.5s ease-out, gentleGlow 2s ease-in-out 1s infinite alternate;
    /* Reset any inherited styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    line-height: 1.4;
}

.install-btn:hover,
button.install-btn:hover,
#install-button.install-btn:hover {
    background: linear-gradient(135deg, #2a1810 0%, #4a2820 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 34, 23, 0.4);
    color: white;
    text-decoration: none;
}

.install-btn:active,
button.install-btn:active,
#install-button.install-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(62, 34, 23, 0.3);
}

.install-btn i {
    font-size: 0.8rem;
}

.install-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(62, 34, 23, 0.5);
}

/* Animation for install button appearance */
@keyframes slideInFade {
    0% {
        opacity: 0;
        transform: translateX(20px) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: translateX(0) scale(1.05);
    }

    70% {
        transform: translateX(0) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes gentleGlow {
    from {
        box-shadow: 0 2px 8px rgba(62, 34, 23, 0.3);
    }

    to {
        box-shadow: 0 2px 12px rgba(62, 34, 23, 0.6);
    }
}

/* Mobile responsive adjustments for install button */
@media (max-width: 768px) {
    .install-btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        gap: 0.4rem;
        border-radius: 20px;
        margin-left: 0.5rem;
        flex-shrink: 0;
        /* Ensure styles aren't overridden on mobile */
        background: linear-gradient(135deg, #3e2217 0%, #5a3328 100%) !important;
        color: white !important;
        border: none !important;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(62, 34, 23, 0.4);
    }

    .install-btn i {
        font-size: 0.7rem;
    }

    /* Ensure button is visible and properly positioned in nav */
    .nav-links .install-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* When button is shown (not hidden) */
    #install-button[style*="inline-block"],
    #install-button[style*="flex"] {
        display: inline-flex !important;
    }
}

/* Extra small screens (360px and below) - additional refinements */
@media (max-width: 380px) {

    .install-btn,
    button.install-btn,
    #install-button.install-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        gap: 0.25rem;
        border-radius: 15px;
    }

    .install-btn i {
        font-size: 0.65rem;
    }

    /* Ensure nav items fit on very small screens */
    .nav-links a {
        font-size: 0.8rem;
        padding: 0.3rem 0.35rem;
    }

    .nav-brand {
        font-size: 1rem;
    }

    .nav-logo {
        height: 28px;
    }

    .nav-socials {
        gap: 0.4rem;
    }

    .nav-socials a {
        font-size: 0.95rem;
    }
}