/*
 * tnt-explore.css
 * TNT | TechNoviceTools | Explore page
 * Used by: explore.html (root)
 * Loads after: tnt-base-styles.css
 *
 * Covers: hero config, intro section with legacy callout,
 *         dark category grid, category cards, language badges.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — Explore page
   Background: images/jetsonsSceneMS.jpeg — futuristic/space-age.
   Overlay: deep navy + dark teal; nods to 1960s "future" aesthetic.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 48vh;
    background:
        linear-gradient(135deg, rgba(10,14,26,0.88) 0%, rgba(0,50,90,0.75) 100%),
        url('../images/jetsonsSceneMS.jpeg') center / cover no-repeat;
    padding: 4.5rem 1rem;
}

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

.hero-title {
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   INTRO SECTION  (#exploreIntro)
   Light warm background — matches the tone of #aboutSection.
═══════════════════════════════════════════════════════════════════ */
#exploreIntro {
    background: #f4f5f7;
    padding: 5rem 0;
}

#exploreIntro .section-title { color: var(--tnt-dark); }

#exploreIntro p {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.72;
}

/* ── Legacy callout box ── */
.legacy-callout {
    background: var(--tnt-dark);
    border: 2px solid var(--tnt-amber);
    border-radius: 18px;
    padding: 2.5rem 2rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.legacy-callout-icon {
    font-size: 2.6rem;
    color: var(--tnt-amber);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.legacy-callout h3 {
    font-family: var(--boogaloo);
    font-size: 1.65rem;
    color: #fff;
    margin: 0 0 0.65rem;
}

.legacy-callout p {
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.btn-legacy {
    display: inline-block;
    background: var(--tnt-amber);
    color: var(--tnt-dark);
    font-family: var(--boogaloo);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.6rem 1.6rem;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-legacy:hover {
    background: var(--tnt-amber-dark);
    color: var(--tnt-dark);
    text-decoration: none;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════
   CATEGORY GRID  (#categoryGrid)
   Deep space dark gradient — sets categories apart from the light intro.
═══════════════════════════════════════════════════════════════════ */
#categoryGrid {
    background: linear-gradient(180deg, #0a0e1a 0%, #0e1228 60%, #0d0820 100%);
    padding: 5rem 0 6.5rem;
}

/* Override base section-label and section-title for dark background */
.explore-section-label {
    color: var(--tnt-amber) !important;
}

.explore-section-title {
    color: #fff;
}

.explore-section-sub {
    color: rgba(255,255,255,0.62);
    max-width: 640px;
    margin: 0 auto;
    font-size: 0.97rem;
}


/* ── Category Card ── */
.category-card {
    background: #141a2e;
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
    border-color: var(--tnt-amber);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(230,159,77,0.18);
}

/* ── Icon circle wrapper ── */
.category-icon-wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.3rem;
    flex-shrink: 0;
}

/* Font Awesome icon inside circle */
.category-fa-icon { font-size: 2rem; }

/* PNG/SVG image icon inside circle */
.category-img-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* ── Card title ── */
.category-card h3 {
    font-family: var(--boogaloo);
    font-size: 1.5rem;
    color: var(--tnt-amber);
    margin-bottom: 0.6rem;
    line-height: 1.15;
}

/* ── Card body copy ── */
.category-card p {
    font-size: 0.87rem;
    color: rgba(255,255,255,0.68);
    line-height: 1.65;
    flex-grow: 1;
    margin-bottom: 1rem;
}

/* ── Language badge row ── */
.category-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.lang-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.18rem 0.52rem;
    border-radius: 4px;
    text-transform: uppercase;
    line-height: 1.5;
}

.lang-js   { background: #2a2400; color: #F7DF1E; border: 1px solid rgba(247,223,30,0.28); }
.lang-php  { background: #16163a; color: #8892BF; border: 1px solid rgba(136,146,191,0.28); }
.lang-java { background: #2a1000; color: #E87820; border: 1px solid rgba(232,120,32,0.28); }
.lang-css  { background: #1a0b2e; color: #B06CE5; border: 1px solid rgba(176,108,229,0.28); }
.lang-py   { background: #001a1a; color: #3DB48C; border: 1px solid rgba(61,180,140,0.28); }

/* ── Legacy link at card bottom ── */
.category-legacy-link {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tnt-amber-dark);
    text-decoration: none;
    transition: color 0.2s;
    margin-top: auto;
}

.category-legacy-link:hover {
    color: var(--tnt-amber);
    text-decoration: none;
}

/* ── New app links — listed above the legacy link ── */
/* Each card can have a <ul class="category-app-list"> containing  */
/* one <li> per new app. Links are brighter than the legacy link   */
/* to signal these are live, current apps worth clicking.          */
.category-app-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 0.75rem;
}

.category-app-list li + li {
    margin-top: 0.35rem;
}

.category-app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.category-app-link:hover {
    color: var(--tnt-amber);
    text-decoration: none;
}

/* ── "See all" button — replaces the legacy link on cards that have new apps ──
   Sits at the very bottom of the card (margin-top:auto pushes it down).
   Styled as a subtle ghost button so it doesn't compete with the app links
   above it, but becomes amber on hover to stay on-brand.                     */
.category-see-all {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--tnt-amber-dark);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.category-see-all:hover {
    border-color: var(--tnt-amber);
    color: var(--tnt-amber);
    background: rgba(230,159,77,0.08);
}


/* ═══════════════════════════════════════════════════════════════════
   TNT OFFCANVAS PANEL
   Slides in from the right when "See all" is clicked.
   One panel per category — each has id="offcanvas-{category}".
   Dark theme matches the category grid section.
   Width capped at 360px so it doesn't swamp the page on desktop.
═══════════════════════════════════════════════════════════════════ */
.tnt-offcanvas {
    background: #0e1228;
    border-left: 2px solid var(--tnt-amber);
    width: 360px;
    max-width: 92vw;
}

.tnt-offcanvas .offcanvas-header {
    background: #141a2e;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 1.5rem;
}

.tnt-offcanvas .offcanvas-title {
    font-family: var(--boogaloo);
    font-size: 1.4rem;
    color: #fff;
}

.tnt-offcanvas .offcanvas-body {
    padding: 1.5rem;
    overflow-y: auto;
}

/* Short descriptive blurb at the top of the panel */
.offcanvas-intro {
    font-size: 0.87rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Section headings inside the panel ("2026 Apps", "Legacy Apps") */
.offcanvas-section-label {
    font-family: var(--boogaloo);
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tnt-amber);
    margin-bottom: 0.6rem;
}

/* ── App list inside the offcanvas ── */
.offcanvas-app-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.offcanvas-app-list li + li {
    margin-top: 0.4rem;
}

/* Each app link: icon | name | lang badge — all in a pill-shaped row */
.offcanvas-app-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    transition: background 0.2s;
}

.offcanvas-app-link:hover {
    background: rgba(230,159,77,0.12);
    text-decoration: none;
}

.offcanvas-app-link i {
    color: var(--tnt-amber-dark);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.offcanvas-app-name {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    flex-grow: 1;
}

/* ── Legacy section at the bottom of the panel ── */
.offcanvas-legacy-section {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.25rem;
    margin-top: 0.5rem;
}

.offcanvas-legacy-note {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.55;
    margin-bottom: 1rem;
}