/*
    TNT | SuperSorterTNT2026-10-14-Stg6
    File:    styles/superSorterHomeStyles.css
    Created: 2026-10-14
    Author:  klp + GitHub Copilot

    PURPOSE:
    Home-page shell styles for superSorterHome.html — hero banner, SPARK bar,
    and overrides that neutralize legacy rules in the original superSorterStyles.css
    that conflict with the TNT 2026 dark-shell standard.

    This file is loaded LAST so its rules win over superSorterStyles.css.

    HERO IMAGE: images/sortingPic.jpg
    (AI-powered industrial sorting facility; bright blue robotic arms.)

    COLOR PALETTE (SuperSorter):
      --ss-blue:      #1a7fd4   machine / AI blue  — primary accent
      --ss-blue-dim:  rgba(26,127,212,0.42)
      --ss-dark:      #090e1a   deep navy background
      --ss-mid:       #0f1928   mid-dark surface
*/

:root {
    --ss-blue:      #1a7fd4;
    --ss-blue-dim:  rgba(26, 127, 212, 0.42);
    --ss-dark:      #090e1a;
    --ss-mid:       #0f1928;
}

/* ════════════════════════════════════════════════════════
   LEGACY OVERRIDE — neutralize rainbow nav-border media
   queries from superSorterStyles.css so the TNT dark
   navbar border-bottom from tnt-base-styles.css shows.
════════════════════════════════════════════════════════ */
@media (max-width: 576px)  { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }
@media (min-width: 577px)  { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }
@media (min-width: 768px)  { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }
@media (min-width: 992px)  { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }
@media (min-width: 1200px) { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }
@media (min-width: 1400px) { #mainNav { border-bottom-color: var(--tnt-red, #D81827); } }

/* ════════════════════════════════════════════════════════
   LEGACY OVERRIDE — original superSorterStyles.css set
   button { width: 50px } globally, which crushes the
   navbar toggler and the SPARK bar button.  Target only
   app-control buttons to restore the correct intent.
════════════════════════════════════════════════════════ */
#mainNav button,
.spark-bar button { width: auto !important; }

/* ════════════════════════════════════════════════════════
   LEGACY OVERRIDE — nav img rule targets the TNT brand
   icon in the new navbar; keep it at the standard size.
════════════════════════════════════════════════════════ */
#mainNav .navbar-brand img {
    width: 28px;
    height: auto;
    margin-right: 8px;
}

/* ════════════════════════════════════════════════════════
   LEGACY OVERRIDE — repoint .googleFont1 from Bebas Neue
   (no longer loaded) to Boogaloo (the TNT 2026 headline
   font that replaces it).
════════════════════════════════════════════════════════ */
.googleFont1 { font-family: 'Boogaloo', cursive; }

/* ════════════════════════════════════════════════════════
   HERO BANNER
   Background: images/sortingPic.jpg (AI sorting facility)
   url() is relative to THIS file location (styles/), so
   ../images/sortingPic.jpg resolves correctly.
════════════════════════════════════════════════════════ */
#hero {
    min-height: 34vh;
    background:
        linear-gradient(180deg,
            rgba(0, 10, 28, 0.80) 0%,
            rgba(5, 25, 55, 0.48) 55%,
            rgba(0, 5, 20, 0.12) 100%),
        url('../images/sortingPic.jpg') center 35% / cover no-repeat;
    background-color: var(--ss-dark);
    padding: 3.5rem 1rem 3rem;
    display: flex;
    align-items: flex-end;
}

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

.hero-eyebrow {
    display: block;
    color: var(--ss-blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.hero-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(2rem, 6vw, 3.6rem);
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 0.65rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.hero-subtitle {
    font-size: clamp(0.92rem, 2vw, 1.1rem);
    color: rgba(220, 235, 255, 0.82);
    line-height: 1.55;
    margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════
   SPARK BAR
   Thin quick-link strip between the hero and main content.
════════════════════════════════════════════════════════ */
.spark-bar {
    background: var(--ss-dark);
    border-bottom: 2px solid var(--ss-blue-dim);
    padding: 0.45rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.83rem;
    overflow-x: auto;
    white-space: nowrap;
}

.spark-bar a,
.spark-bar .spark-link {
    color: #4aaae8;
    text-decoration: none;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
}

.spark-bar a:hover,
.spark-bar .spark-link:hover {
    background: rgba(74, 170, 232, 0.15);
    color: #80ccf5;
    text-decoration: none;
}

.spark-bar span {
    margin-left: auto;
    color: rgba(200, 220, 255, 0.28);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   FOOTER OVERRIDE
   tnt-base-styles.css provides the dark footer; the legacy
   superSorterStyles.css has 'footer { font-size: .8em }'
   which is harmless, but we ensure the footer-text class
   and footer-icons class from tnt-base-styles work cleanly.
════════════════════════════════════════════════════════ */
footer {
    font-size: inherit;
}