/* ===== Saturday Code Club — shared site theme (loaded on every page) ===== */

/* Break sections out of the layout's centered .container to full viewport width */
body { overflow-x: hidden; }
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ---- Home hero (home page only) ---- */
.home-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(1200px 600px at 70% 30%, rgba(56, 189, 248, 0.18), transparent 60%),
        radial-gradient(900px 500px at 20% 70%, rgba(37, 99, 235, 0.20), transparent 60%),
        linear-gradient(160deg, #0a0f1f 0%, #0d1b3a 55%, #091226 100%);
    margin-top: -1rem;
}
#brain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.home-hero .hero-content { position: relative; z-index: 2; }
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 10, 25, 0.78) 0%, rgba(5, 10, 25, 0.35) 45%, rgba(5, 10, 25, 0) 70%);
    pointer-events: none;
}
.hero-eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: .8rem; font-weight: 700; color: #7dd3fc; }
.hero-title { font-weight: 800; line-height: 1.1; font-size: clamp(2rem, 4.5vw, 3.4rem); }
.hero-title .grad {
    background: linear-gradient(90deg, #38bdf8, #818cf8 55%, #c084fc);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tagline { font-weight: 700; letter-spacing: .04em; color: #93c5fd; }
.scroll-cue {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 2; color: #cbd5e1; font-size: .8rem; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---- Inner-page hero band (shared by all content pages) ---- */
.page-hero {
    color: #f8fafc;
    padding: 3.5rem 0 3rem;
    margin-top: -1rem;
    margin-bottom: 2.5rem;
    background:
        radial-gradient(900px 400px at 80% 20%, rgba(56, 189, 248, 0.16), transparent 60%),
        linear-gradient(160deg, #0a0f1f 0%, #0d1b3a 60%, #091226 100%);
}
.page-hero .eyebrow { color: #7dd3fc; }
.page-hero h1 { font-weight: 800; line-height: 1.12; }
.page-hero .page-hero-lead { color: #cbd5e1; max-width: 760px; }

/* ---- Section helpers ---- */
.section-pad { padding: 4.5rem 0; }
.section-dark { background: linear-gradient(180deg, #0b1326 0%, #0d1b3a 100%); color: #e2e8f0; }
.eyebrow { letter-spacing: .22em; text-transform: uppercase; font-size: .78rem; font-weight: 700; color: #2563eb; }
.section-dark .eyebrow { color: #7dd3fc; }

/* ---- Cards ---- */
.feature-card, .insight-card {
    height: 100%;
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .03);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.feature-card { background: #fff; border-color: rgba(15,23,42,.08); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.feature-card:hover, .insight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .45);
    border-color: rgba(56, 189, 248, .5);
}
/* .card-body inside these cards loses Bootstrap's --bs-card-spacer padding (it's only set
   on .card), so restore comfortable padding here. */
.feature-card > .card-body,
.insight-card > .card-body {
    padding: 1.5rem;
}
.insight-card a.stretched-link { color: #7dd3fc; }
.insight-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.3rem;
    background: linear-gradient(135deg, #1d4ed8, #38bdf8); color: #fff;
}

/* Pill sub-navs (courses) */
.nav-pills .nav-link { color: #1e293b; }

/* ---- Hover dropdown (user menu) — pure CSS, no JS (CSP-safe) ---- */
.user-menu-toggle { cursor: pointer; }
.hover-dropdown { position: relative; }
.hover-dropdown > .dropdown-menu {
    display: block;            /* always present; toggled via opacity/visibility */
    margin-top: 0;             /* no gap, so hover doesn't drop between toggle and menu */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
}
.hover-dropdown:hover > .dropdown-menu,
.hover-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
/* On larger screens position it as an absolute overlay; on the collapsed mobile
   navbar let it sit inline so it doesn't overflow. */
@media (min-width: 576px) {
    .hover-dropdown > .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        top: 100%;
    }
}

/* ---- Rich text editor ---- */
.rich-content {
    min-height: 9rem;
    overflow: auto;
    background: #fff;
}
.rich-content:focus { outline: 2px solid rgba(56, 189, 248, .5); outline-offset: -1px; }
.rich-content img { max-width: 100%; height: auto; }
.rich-text img { max-width: 100%; height: auto; }
.rich-content:empty::before { content: attr(data-placeholder); color: #94a3b8; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); max-width: 17rem; }
.emoji-grid .btn { padding: .15rem .35rem; font-size: 1.1rem; line-height: 1; }

/* ---- Scroll reveal animations ---- */
.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .scroll-cue { animation: none; }
}