/*
 * tnt-eureka.css
 * TNT | TechNoviceTools | DWR & Eureka Moments page
 * Used by: formerPages/dwrEureka.html
 *
 * Covers: hero (dangerZone background), intro callout boxes,
 *         moments log table with expandable details, responsive stacking.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO  — DWR danger zone
   Background image: ../images/dangerZone.jpg
   CSS lives in styles/, images in images/ → relative path is ../images/
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 48vh;
    background:
        linear-gradient(135deg,
            rgba(10,14,26,0.85) 0%,
            rgba(168,16,32,0.60) 100%),
        url('../images/dangerZone.jpg') center top / 100% auto no-repeat;
    padding: 4rem 1rem;
    position: relative;
}

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

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

/* White outline on the red D, W, R letters — mirrors the .tnt-t treatment */
#hero .hero-title span {
    text-shadow:
        -0.5px -0.5px 0 #fff,
         0.5px -0.5px 0 #fff,
        -0.5px  0.5px 0 #fff,
         0.5px  0.5px 0 #fff;
}

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


/* ═══════════════════════════════════════════════════════════════════
   INTRO SECTION
═══════════════════════════════════════════════════════════════════ */
#introSection {
    background: #fff;
    padding: 3.5rem 1rem 2.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   CALLOUT BOXES  (intro explainers)
═══════════════════════════════════════════════════════════════════ */
.dwr-callout {
    background: rgba(216,24,39,0.05);
    border: 1px solid rgba(216,24,39,0.18);
    border-left: 4px solid var(--tnt-red);
    border-radius: 0 10px 10px 0;
    padding: 1.1rem 1.3rem;
    height: 100%;
}

.dwr-callout .callout-head {
    font-family: var(--boogaloo);
    font-size: 1.2rem;
    color: var(--tnt-red);
    margin-bottom: 0.5rem;
}

.eureka-callout {
    background: rgba(230,159,77,0.07);
    border: 1px solid rgba(230,159,77,0.25);
    border-left: 4px solid var(--tnt-amber);
    border-radius: 0 10px 10px 0;
    padding: 1.1rem 1.3rem;
    height: 100%;
}

.eureka-callout .callout-head {
    font-family: var(--boogaloo);
    font-size: 1.2rem;
    color: var(--tnt-amber-dark);
    margin-bottom: 0.5rem;
}

.dwr-callout p,
.eureka-callout p {
    font-size: 0.9rem;
    margin: 0;
}


/* ── Callout split: photo on the left, text on the right ─────────── */
.callout-split {
    display: flex;
    flex-direction: row;
    gap: 0.9rem;
    align-items: flex-start;
}

.callout-photo {
    width: 90px;
    height: 110px;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    flex-shrink: 0;
}

.callout-split .callout-text {
    flex: 1;
    min-width: 0;
}

@media (max-width: 400px) {
    .callout-split {
        flex-direction: column;
    }
    .callout-photo {
        width: 100%;
        height: 150px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   MOMENTS LOG SECTION
═══════════════════════════════════════════════════════════════════ */
#momentsSection {
    background: var(--tnt-light);
    padding: 3rem 1rem 4.5rem;
}


/* ── Type badges ─────────────────────────────────────────────────── */
.badge-dwr {
    display: inline-block;
    background: var(--tnt-red);
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-eureka {
    display: inline-block;
    background: var(--tnt-amber);
    color: var(--tnt-dark);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    white-space: nowrap;
}


/* ── Table ───────────────────────────────────────────────────────── */
.moments-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.moments-table thead th {
    font-family: var(--boogaloo);
    font-size: 1.05rem;
    font-weight: 400;
    background: var(--tnt-dark);
    color: rgba(255,255,255,0.85);
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 3px solid var(--tnt-red);
}

.moments-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    transition: background 0.15s;
}

.moments-table tbody tr:last-child {
    border-bottom: none;
}

.moments-table tbody tr:hover {
    background: rgba(216,24,39,0.03);
}

.moments-table tbody td {
    padding: 1rem 1rem;
    vertical-align: top;
    font-size: 0.91rem;
}

.moment-date {
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 600;
    color: #777;
    width: 7rem;
}

.moment-title {
    font-weight: 700;
    color: var(--tnt-dark);
    margin-bottom: 0.1rem;
}

.moment-title a {
    color: var(--tnt-dark);
    text-decoration: none;
}

.moment-title a:hover {
    color: var(--tnt-red);
    text-decoration: underline;
}

.moment-type {
    width: 7.5rem;
}


/* ── Expandable details ──────────────────────────────────────────── */
details.moment-detail {
    margin-top: 0.45rem;
}

details.moment-detail summary {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tnt-red);
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}

details.moment-detail summary::before {
    content: '▶';
    font-size: 0.58rem;
    transition: transform 0.2s;
    display: inline-block;
}

details[open].moment-detail summary::before {
    transform: rotate(90deg);
}

/* Hide default marker in all browsers */
details.moment-detail summary::-webkit-details-marker { display: none; }

.moment-body {
    padding: 0.8rem 0 0.25rem 1rem;
    border-left: 3px solid rgba(216,24,39,0.2);
    margin-top: 0.5rem;
}

.moment-body p {
    font-size: 0.875rem;
    color: #333;
    margin-bottom: 0.55rem;
}

.moment-body p:last-child { margin-bottom: 0; }

.moment-body a {
    color: var(--tnt-red);
}

.moment-body a:hover {
    color: var(--tnt-red-dark);
}


/* ── Code / pre ──────────────────────────────────────────────────── */
.moment-body code {
    font-weight: 700;
    color: #2e7d32;
    font-size: 0.88em;
    background: rgba(46,125,50,0.08);
    padding: 1px 5px;
    border-radius: 3px;
}

.moment-body pre {
    background: #f6f8f0;
    border-left: 3px solid var(--tnt-red);
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    overflow-x: auto;
    border-radius: 0 5px 5px 0;
    color: #2e7d32;
    font-weight: 700;
    margin-top: 0.5rem;
}


@media (max-width: 520px) {
    #hero {
        background:
            linear-gradient(135deg,
                rgba(10,14,26,0.85) 0%,
                rgba(168,16,32,0.60) 100%),
            url('../images/dangerZone.jpg') center center / cover no-repeat;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — stack table on mobile
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
    .moments-table,
    .moments-table tbody,
    .moments-table tr,
    .moments-table td {
        display: block;
        width: 100%;
    }

    .moments-table thead { display: none; }

    .moments-table tbody tr {
        padding: 0.75rem 0.9rem;
        border-bottom: 2px solid rgba(0,0,0,0.08);
    }

    .moments-table tbody td {
        padding: 0.2rem 0;
        border: none;
    }

    .moment-date::before {
        content: 'Date: ';
        font-weight: 400;
        color: #999;
    }

    .moment-type { padding-top: 0.4rem; }
}