/* YMCA Logo PNG Definitions */

/* Set 1: Red + Orange Logo */
.ymca-logo-set-1 {
    width: 120px;
    height: 40px;
    background: url('/images/logos/ymca-logo-1.png') no-repeat;
    background-size: contain;
}

/* Set 2: Teal + Blue Logo (Default) */
.ymca-logo-set-2 {
    width: 120px;
    height: 40px;
    background: url('/images/logos/ymca-logo-2.png') no-repeat;
    background-size: contain;
}

/* Set 3: Yellow + Teal Logo */
.ymca-logo-set-3 {
    width: 120px;
    height: 40px;
    background: url('/images/logos/ymca-logo-3.png') no-repeat;
    background-size: contain;
}

/* Set 4: Blue + Purple Logo */
.ymca-logo-set-4 {
    width: 120px;
    height: 40px;
    background: url('/images/logos/ymca-logo-4.png') no-repeat;
    background-size: contain;
}

/* Set 5: Purple + Red Logo */
.ymca-logo-set-5 {
    width: 120px;
    height: 40px;
    background: url('/images/logos/ymca-logo-5.png') no-repeat;
    background-size: contain;
}

/* Logo container styles - integrated into navbar */
.ymca-logo-container {
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

/* Logo in color palette selector */
.palette-logo {
    width: 60px;
    height: 20px;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid #e1e5e9;
}

/* Active logo styling */
.palette-option.active .palette-logo {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 137, 208, 0.2);
}