/* ============================================================
   CCG SOCIAL ICONS — OMEGA FINAL (HOME FIX)
   ------------------------------------------------------------
   • Inner pages: inline header socials
   • HOME page: forces header actions visible + laid out
   • Uses HOME-scoped !important only (layout authority)
   • Zero HTML or JS changes
============================================================ */

/* ============================================================
   DEFAULT HEADER SOCIALS (ALL PAGES)
============================================================ */

.ccg-header-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ccg-header-socials a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,0.18),
        rgba(0,0,0,0.8)
    );
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);

    box-shadow:
        0 0 6px var(--ccg-header-glow),
        0 0 12px rgba(var(--accent-rgb), 0.3);

    transition:
        transform var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        box-shadow var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        border-color var(--ccg-hover-duration) var(--ccg-ease-out-lux);
}

.ccg-header-socials a:hover {
    transform: translateY(-1px) scale(1.04);
    border-color: var(--accent);
    box-shadow:
        0 0 10px var(--ccg-header-glow-strong),
        0 0 18px rgba(var(--accent-rgb), 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .ccg-header-socials a:hover {
        transform: none;
    }
}

/* ============================================================
   ICONS
============================================================ */

.ccg-socials__icon {
    width: 60%;
    height: 60%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 6px var(--ccg-header-glow-strong));
}

.ccg-socials__icon--yt      { background-image: url("../icons/youtube.svg"); }
.ccg-socials__icon--x       { background-image: url("../icons/twitter.svg"); }
.ccg-socials__icon--fb      { background-image: url("../icons/facebook.svg"); }
.ccg-socials__icon--discord { background-image: url("../icons/discord.svg"); }
.ccg-socials__icon--patreon { background-image: url("../icons/patreon.svg"); }
.ccg-socials__icon--paypal  { background-image: url("../icons/paypal.svg"); }

/* ============================================================
   RESPONSIVE TWEAKS — KEEP ACTIONS TIDY ON SMALL SCREENS
============================================================ */

@media (max-width: 880px) {
    .ccg-header-actions {
        gap: 10px;
        flex-wrap: wrap;
    }

    .ccg-header-socials {
        gap: 0.55rem;
    }
}

@media (min-width: 1024px) {
    .ccg-header-socials {
        gap: 0.9rem;
    }

    .ccg-header-socials a {
        width: 44px;
        height: 44px;
        box-shadow:
            0 0 12px var(--ccg-header-glow),
            0 0 20px rgba(var(--accent-rgb), 0.35);
    }

    .ccg-socials__icon {
        width: 65%;
        height: 65%;
    }
}