/*
 * dragDropStyles.css
 * TNT | TechNoviceTools | Drag and Drop Circles
 * Page-specific styles for dragDropIndex.html
 * Date: 2026-07-23
 *
 * Loads after: tnt-base-styles.css
 * Covers: hero, SPARK bar, light-theme canvas section
 */


/* ── Light body ── */
body {
    background: #f8f9fa;
}


/* ═══════════════════════════════════════════════════════════════
   HERO — dragDropDots.png background, dark overlay for text
═══════════════════════════════════════════════════════════════ */
#hero {
    background:
        linear-gradient(135deg, rgba(8,6,14,0.76) 0%, rgba(30,10,40,0.60) 100%),
        url('../images/dragDropDots.png') center / cover no-repeat;
    background-color: #0e080a;
    min-height: 280px;
    padding: 4rem 1rem 3.5rem;
    text-align: center;
}

.hero-content {
    max-width: 700px;
}

.hero-title {
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}


/* ═══════════════════════════════════════════════════════════════
   SPARK BAR
═══════════════════════════════════════════════════════════════ */
.spark-bar {
    background: #0a0e1a;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.spark-bar a {
    color: var(--tnt-amber);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}

.spark-bar a:hover { text-decoration: underline; }
.spark-bar .spark-links { display: flex; gap: 1.2rem; align-items: center; }
.spark-bar span { color: rgba(255,255,255,0.40); font-size: 0.8rem; }


/* ═══════════════════════════════════════════════════════════════
   APP SECTION — light white container around canvas + controls
═══════════════════════════════════════════════════════════════ */
#appSection {
    background: #ffffff;
    padding: 2.5rem 0 3.5rem;
}

/* Instructions wrapper — max-width keeps it aligned with canvas */
.dd-instructions-wrap {
    max-width: 840px;
    margin: 0 auto;
}

/* Canvas frame — full-width with a comfortable maximum */
#cFrame {
    max-width: 840px;
    margin: 0 auto;
}

/* Canvas — fills its container up to the max, fixed 500 px height */
canvas#myCanvas {
    width: 100%;
    max-width: 840px;
    height: 500px;
    cursor: crosshair;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    display: block;
}

/* Button console — same max-width as canvas */
#buttonConsole {
    max-width: 840px;
}