/*
 * Play2Learn — Visual Theme Override
 * Warm Slate facelift: richer palette, gradients, juicy hover states, hero entrance animation.
 * Loaded after components.css so specificity wins cleanly.
 */

/* ─── Palette overrides ─────────────────────────────────────────────────── */
:root {
    /* Warm off-white body instead of clinical #f4f4f5 */
    --color-bg: #f8f7f5;
    --color-bg-alt: #f0ede8;

    /* Deepened primary blue for more punch */
    --color-primary: #2563eb;
    --color-primary-dark: #1e40af;
    --color-primary-light: #60a5fa;

    /* Warm near-black text */
    --color-black: #1c1917;
    --color-gray-900: #1c1917;
    --color-gray-800: #292524;
    --color-gray-700: #44403c;
    --color-gray-600: #57534e;
    --color-gray-500: #78716c;
    --color-gray-400: #a8a29e;
    --color-gray-300: #d6d3d1;
    --color-gray-200: #e7e5e4;
    --color-gray-100: #f5f5f4;

    /* Brand colours — slightly richer */
    --color-brand-purple: #7c3aed;
    --color-brand-purple-light: #8b5cf6;
    --color-brand-orange: #ea580c;
    --color-secondary: #d97706;
    --color-secondary-dark: #b45309;

    /* Glow shadows for hover states */
    --shadow-glow-blue: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 20px 40px -10px rgba(37, 99, 235, 0.14);
    --shadow-glow-purple: 0 0 0 3px rgba(124, 58, 237, 0.18), 0 20px 40px -10px rgba(124, 58, 237, 0.12);
    --shadow-glow-orange: 0 0 0 3px rgba(234, 88, 12, 0.18), 0 20px 40px -10px rgba(234, 88, 12, 0.12);
}

/* ─── Body background ───────────────────────────────────────────────────── */
body {
    background-color: var(--color-bg);
    color: var(--color-gray-900);
}

/* ─── Navigation ────────────────────────────────────────────────────────── */
.site-header {
    background-color: rgba(248, 247, 245, 0.82);
    border-bottom: 1px solid rgba(215, 210, 205, 0.7);
}

/* Sliding underline on nav links */
.main-nav a {
    color: var(--color-gray-600);
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: var(--space-4);
    left: var(--space-4);
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-brand-purple));
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    transform: scaleX(1);
}

.main-nav a:hover {
    color: var(--color-gray-900);
    background-color: rgba(240, 237, 232, 0.7);
}

.main-nav a.active {
    color: var(--color-primary-dark);
    background-color: rgba(37, 99, 235, 0.07);
}

/* ─── Hero section (index.html only) ───────────────────────────────────── */
.hero {
    position: relative;
}

/* Dark gradient overlay for drama */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.45) 0%,
        rgba(245, 158, 11, 0.35) 60%,
        rgba(254, 243, 199, 0.15) 100%
    );
    z-index: 0;
}

.hero .container {
    position: relative;
    z-index: 1;
}

/* Hero title & subtitle in black */
.hero-title {
    color: #000000;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    text-shadow: none;
}

.hero-subtitle {
    color: rgba(0, 0, 0, 0.85);
    text-shadow: none;
}

/* ─── Hero entrance animation ───────────────────────────────────────────── */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate {
    animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-animate.hero-animate-delay {
    animation-delay: 0.35s;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--color-gray-200);
    background-color: #ffffff;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow: var(--shadow-glow-blue);
    border-color: rgba(37, 99, 235, 0.2);
}

/* ─── Brand boxes ───────────────────────────────────────────────────────── */
.brand-box {
    border: 1px solid var(--color-gray-200);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Animated left accent stripe */
.brand-box::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-brand-purple));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-slow);
    border-radius: 0 2px 2px 0;
}

.brand-box.blue-accent::after {
    background: linear-gradient(180deg, #4c1d95, #6d28d9);
}
.brand-box.orange-accent::after {
    background: linear-gradient(180deg, #6d28d9, #8b5cf6);
}
.brand-box.purple-accent::after {
    background: linear-gradient(180deg, #581c87, #7c3aed);
}

.brand-box:hover::after {
    transform: scaleY(1);
}

.brand-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow-purple);
}

/* Brand box with blue/orange/purple header all glow purple */
.brand-box:has(.brand-box-header.blue):hover {
    box-shadow: var(--shadow-glow-purple);
}
.brand-box:has(.brand-box-header.orange):hover {
    box-shadow: var(--shadow-glow-purple);
}
.brand-box:has(.brand-box-header.purple):hover {
    box-shadow: var(--shadow-glow-purple);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-brand-purple-light), var(--color-brand-purple)) !important;
    border: none;
    color: var(--color-white) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08);
    background: #5b21b6 !important; /* solid purple on hover */
    box-shadow: var(--shadow-md);
}

.btn-contact {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.35);
}

.btn-contact:hover {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(135deg, #9333ea, #db2777);
    box-shadow: 0 4px 18px rgba(168, 85, 247, 0.5);
    filter: brightness(1.06);
}

.btn-info:hover {
    transform: translateY(-2px) scale(1.02);
    background-color: var(--color-gray-300);
}

/* ─── Section backgrounds ───────────────────────────────────────────────── */
.section {
    background-color: var(--color-bg);
}

/* Featured / alternating sections */
section[style*="background-color: var(--color-gray-100)"],
section.section[style*="background-color"] {
    background-color: var(--color-bg-alt) !important;
}

/* Section title accent bar */
.section-title::after {
    background: linear-gradient(90deg, var(--color-primary), var(--color-brand-purple));
    width: 80px;
    height: 3px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(160deg, #1c1917 0%, #292524 55%, #1c1917 100%);
}

/* ─── Inner page banners (gray light banner) ────────────────────────────── */
/* Thin warm banner on non-home pages */
section.hero[style*="background-color"] {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--color-gray-300);
}

/* Inner page title colour (overrides inline color: gray-900 from inline style) */
section.hero[style*="background-color"] .hero-title {
    color: var(--color-gray-900) !important;
    text-shadow: none;
    border-bottom: none;
}

section.hero[style*="background-color"] .hero-subtitle {
    color: var(--color-gray-700) !important;
    text-shadow: none;
}

/* ─── Playground game thumbs ────────────────────────────────────────────── */
.game-thumb {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.game-thumb:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.18), 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* ─── Scrollbar (subtle warm tint) ─────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ─── Mobile adjustments ────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .main-nav {
        background-color: var(--color-bg);
    }
}