/*
 * mamasFunctionStyles.css
 * TNT | TechNoviceTools | Mama's Little Function
 * Page-specific styles for mamasFunctionHome.html
 * Date: 2026-08-10
 *
 * Loads after: tnt-base-styles.css
 * Covers: hero, SPARK bar, app section, lyrics/chorus layout,
 *         custom color classes, app-original font aliases.
 */

/* Purple theme tokens for this app */
:root {
    --mlf-purple:      #4C009E;
    --mlf-purple-dark: #380070;
}

/* Light gray body (matches dragDrop pattern) */
body {
    background: #f8f9fa;
}


/* ═══════════════════════════════════════════════════════════════
   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; }


/* ═══════════════════════════════════════════════════════════════
   HERO — easyBakeOvenDark.jpg background, dark overlay for text
═══════════════════════════════════════════════════════════════ */
#hero {
    background:
        linear-gradient(135deg, rgba(10,6,20,0.82) 0%, rgba(40,10,60,0.68) 100%),
        url('../images/easyBakeOvenDark.jpg') center / cover no-repeat;
    background-color: #140a20;
    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); }


/* ═══════════════════════════════════════════════════════════════
   APP SECTION — white container for intro + lyrics
═══════════════════════════════════════════════════════════════ */
#appSection {
    background: #ffffff;
    padding: 2.5rem 0 3.5rem;
}

/* Intro copy width constraint */
#introDiv { max-width: 800px; margin: 0 auto; }


/* ═══════════════════════════════════════════════════════════════
   CUSTOM COLOR CLASSES  (migrated from original mamasFunction-styles.css)
═══════════════════════════════════════════════════════════════ */
.text-custom-color1 { color: var(--mlf-purple) !important; }
.bg-custom-color1   { background-color: var(--mlf-purple); }


/* ═══════════════════════════════════════════════════════════════
   FONT ALIASES  (preserved from original Google Fonts pairing)
═══════════════════════════════════════════════════════════════ */
.googleFont1 { font-family: 'Dancing Script', cursive; }
.googleFont2 { font-family: 'Dosis', sans-serif; }


/* ═══════════════════════════════════════════════════════════════
   LYRICS  (migrated from original inline <style> block)
═══════════════════════════════════════════════════════════════ */

/* Lyrics container — display:flow-root creates a BFC, so floated stanzas stay inside */
div#lyrics {
    font-size: 1.3em;
    max-width: 700px;
    border-radius: 50px;
    margin: 0 auto;
    display: flow-root;
}

/* First verse paragraph */
p#p1 { font-size: 120%; }

/* Lyric emphasis — scope to avoid touching TNT navbar/footer */
#appSection strong {
    text-transform: uppercase;
    font-style: italic;
    color: brown;
}

/* Drop cap on each lyric stanza */
div#lyrics p::first-letter {
    font-size: 150%;
    color: var(--mlf-purple);
    font-family: 'Dancing Script', cursive;
}

/* Chorus block */
div#chorusDiv {
    background-color: white;
    text-align: center;
    padding: 20px;
    padding-top: 2px;
    font-family: cursive;
}
div#chorusDiv h3 { margin-bottom: -10px; }

/* Two-column stanza layout */
p.left  { float: left;  width: 50%; }
p.right { float: right; width: 40%; }

/* Chorus headings (h3 = c1, h4 = c2/c3) — each clears the preceding floated stanza pair */
#lyrics h3,
#lyrics h4 {
    clear: both;
    text-align: center;
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════
   EASTER EGG — Function Evaluator modal
═══════════════════════════════════════════════════════════════ */

/* Clickable blender icon in hero */
.blender-egg {
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    line-height: 1;
    font-size: inherit; /* Bootstrap .btn resets to 1rem; restore h1 inheritance */
}
.blender-egg:hover,
.blender-egg:focus {
    transform: scale(1.25) rotate(-12deg);
    filter: drop-shadow(0 0 8px rgba(230,159,77,0.9));
    outline: none;
}

/* Output chain — flex row so it wraps gracefully on small screens */
.function-output-chain {
    background: #f3eaff;
    border: 2px solid var(--mlf-purple);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem 0.45rem;
    font-family: 'Dosis', sans-serif;
    font-size: 1.08em;
    line-height: 1.6;
}
.chain-arrow { color: #999; }
.chain-x     { color: var(--mlf-purple); font-weight: 700; }
.chain-fx    { color: var(--mlf-purple); font-weight: 700; font-style: italic; }
.chain-expr  { color: #145a32; }
.chain-y     { color: #c0392b; font-weight: 700; }
.chain-pair  { color: var(--mlf-purple); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════
   NEXT VERSE BUTTON
   Outline variant: Bootstrap’s CSS variables drive all states cleanly.
═══════════════════════════════════════════════════════════════ */
.btn-outline-mlf {
    --bs-btn-color:               var(--mlf-purple);
    --bs-btn-border-color:        var(--mlf-purple);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--mlf-purple);
    --bs-btn-hover-border-color:  var(--mlf-purple);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--mlf-purple);
    --bs-btn-active-border-color: var(--mlf-purple);
    --bs-btn-focus-shadow-rgb:    76, 0, 158;
}