/**
 * BTFC Stats Independent Menu System - Top Menu Component
 * 
 * Styles for the top menu (quick access) section
 * 
 * @package BTFC_Stats
 * @since 1.0.0
 */

/* ============================================
   Top Menu Row (Quick Access)
   ============================================ */

.btfc-top-menu {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btfc-top-menu-content {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.btfc-top-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.btfc-top-menu-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 13px !important;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    touch-action: manipulation;
    cursor: pointer;
}

.btfc-top-menu-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .btfc-top-menu {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: center;
    }
    
    .btfc-top-menu-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    .btfc-top-menu-link {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    .btfc-top-menu-list {
        gap: 4px;
    }
    
    .btfc-top-menu-link {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
}

/* ============================================
   Top Menu Social Links
   ============================================ */

.btfc-top-social-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btfc-top-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.btfc-top-social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.btfc-top-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 193, 12, 0.5);
}

.btfc-top-social-link:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Website Icon */
.btfc-top-social-link.btfc-social-website::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC10C'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

/* Twitter Icon */
.btfc-top-social-link.btfc-social-twitter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC10C'%3E%3Cpath d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/%3E%3C/svg%3E");
}

/* Facebook Icon */
.btfc-top-social-link.btfc-social-facebook::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC10C'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

/* Instagram Icon */
.btfc-top-social-link.btfc-social-instagram::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC10C'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.014 5.367 18.647.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.297-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.807.875 1.297 2.026 1.297 3.323s-.49 2.448-1.297 3.323c-.875.807-2.026 1.297-3.323 1.297zm7.718-1.297c-.875.807-2.026 1.297-3.323 1.297s-2.448-.49-3.323-1.297c-.807-.875-1.297-2.026-1.297-3.323s.49-2.448 1.297-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.807.875 1.297 2.026 1.297 3.323s-.49 2.448-1.297 3.323zm-7.718-8.988c-2.026 0-3.708 1.682-3.708 3.708s1.682 3.708 3.708 3.708 3.708-1.682 3.708-3.708-1.682-3.708-3.708-3.708z'/%3E%3C/svg%3E");
}

/* YouTube Icon */
.btfc-top-social-link.btfc-social-youtube::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFC10C'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

/* Responsive Social Links */
@media (max-width: 768px) {
    .btfc-top-social-links {
        display: none; /* Hide social links in mobile view since they're in the actions area */
    }
}

@media (max-width: 768px) {
    .btfc-top-menu-content {
        gap: 15px;
    }
    
    .btfc-top-social-links {
        gap: 6px;
    }
    
    .btfc-top-social-link {
        width: 28px;
        height: 28px;
    }
    
    .btfc-top-social-link::before {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .btfc-top-menu-content {
        gap: 10px;
    }
    
    .btfc-top-social-links {
        gap: 4px;
    }
    
    .btfc-top-social-link {
        width: 24px;
        height: 24px;
    }
    
    .btfc-top-social-link::before {
        width: 12px;
        height: 12px;
    }
}