/*
 * tnt-askcop.css
 * TNT | TechNoviceTools | Ask Copilot
 * Used by: askCopilot.html (root)
 * Loads after: tnt-base-styles.css
 *
 * Covers: hero config, newspaper masthead, column entries
 *         (letter + response cards), topic badges, code highlights.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — Ask Copilot page
   Background: images/robotColumnist.jpeg
   A robot at a typewriter — our AI columnist, hard at work.
   Warm sepia overlay evokes the newspaper aesthetic.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 44vh;
    background:
        linear-gradient(135deg, rgba(16,10,4,0.90) 0%, rgba(64,40,8,0.78) 100%),
        url('../images/robotColumnist.jpeg') center top / cover no-repeat;
    padding: 4.5rem 1rem;
}

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

@media (max-width: 760px) {
    #hero { background-position: center top; }
}


/* ═══════════════════════════════════════════════════════════════════
   COLUMN SECTION  (#columnSection)
   Warm parchment background — the page of a newspaper.
═══════════════════════════════════════════════════════════════════ */
#columnSection {
    background: #f9f4e8;
    padding: 5rem 0;
}


/* ── Newspaper Masthead ──────────────────────────────────────────
   The nameplate of the column — bold, centered, authoritative.
   Two thick rules bracket the title; a tagline sits below.        */
.column-masthead {
    text-align: center;
    border-top:    4px double var(--tnt-dark);
    border-bottom: 2px solid  var(--tnt-dark);
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 3rem;
}

.masthead-vol {
    font-size:      0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          #777;
    margin-bottom:  0.6rem;
}

.masthead-title {
    font-family:    var(--boogaloo);
    font-size:      clamp(2.6rem, 8vw, 4.4rem);
    color:          var(--tnt-dark);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin:         0;
    line-height:    1;
}

.masthead-rule {
    border:     none;
    border-top: 1px solid #bbb;
    margin:     0.6rem auto;
    max-width:  480px;
}

.masthead-tagline {
    font-family: Georgia, 'Times New Roman', serif;
    font-style:  italic;
    font-size:   0.97rem;
    color:       #555;
    margin:      0;
}

.masthead-byline {
    font-size:      0.74rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          #999;
    margin-top:     0.5rem;
}


/* ── How-to-add bar ──────────────────────────────────────────────
   Dark collapsible bar at the top of the entries — editor's note
   that tells you how to add a new entry. Collapsed by default.    */
.column-editor-bar {
    background:    var(--tnt-dark);
    border:        1.5px solid var(--tnt-amber);
    border-radius: 12px;
    padding:       0;
    margin-bottom: 3rem;
    overflow:      hidden;
}

.column-editor-toggle {
    width:       100%;
    background:  none;
    border:      none;
    padding:     0.9rem 1.5rem;
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    cursor:      pointer;
    color:       var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size:   1rem;
    text-align:  left;
    transition:  background 0.2s;
}

.column-editor-toggle:hover { background: rgba(255,255,255,0.05); }

.column-editor-toggle i.toggle-arrow {
    margin-left: auto;
    font-size:   0.8rem;
    color:       rgba(255,255,255,0.4);
    transition:  transform 0.2s;
}

.column-editor-toggle[aria-expanded="true"] i.toggle-arrow {
    transform: rotate(180deg);
}

.column-editor-body {
    padding: 0 1.5rem 1.25rem;
}

.column-editor-body p {
    font-size:   0.87rem;
    color:       rgba(255,255,255,0.7);
    line-height: 1.6;
    margin:      0 0 0.75rem;
}

.column-editor-body code {
    display:       block;
    background:    rgba(255,255,255,0.06);
    color:         #b8e0d4;
    font-size:     0.8rem;
    line-height:   1.65;
    padding:       0.85rem 1rem;
    border-radius: 6px;
    border-left:   3px solid var(--tnt-amber);
    white-space:   pre;
    overflow-x:    auto;
}


/* ── Entry search/filter bar ──────────────────────────────────── */
.column-filter-bar {
    background:    #fff;
    border:        1.5px solid #d4c9a8;
    border-radius: 10px;
    padding:       1rem;
    margin-bottom: 1.5rem;
    box-shadow:    0 2px 8px rgba(0,0,0,0.06);
}

.column-filter-bar .form-control,
.column-filter-bar .form-select {
    border-color: #c9bc97;
    font-size:    0.9rem;
}

.column-filter-bar .form-control:focus,
.column-filter-bar .form-select:focus {
    border-color: #b48a2a;
    box-shadow:   0 0 0 0.2rem rgba(180,138,42,0.15);
}

.column-filter-status {
    margin:      0.65rem 0 0;
    font-size:   0.82rem;
    color:       #6b675a;
    font-family: Arial, Helvetica, sans-serif;
}

.column-no-results {
    background:    #fff;
    border:        1px dashed #bda96d;
    color:         #5d4e26;
    border-radius: 8px;
    padding:       0.75rem 1rem;
    margin:        0 0 1.25rem;
    font-size:     0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════
   COLUMN ENTRY
   Each Q&A pair: a header bar, a letter block, and a response block.
═══════════════════════════════════════════════════════════════════ */
.column-entry {
    background:    #fff;
    border:        1.5px solid #d4c9a8;
    border-radius: 10px;
    margin-bottom: 2.5rem;
    overflow:      hidden;
    box-shadow:    0 2px 10px rgba(0,0,0,0.07);
    /* Each entry is a self-contained article — no collapse needed.
       This is a newspaper column: you scroll and read.             */
}

/* ── Entry header bar ── */
.column-entry-header {
    background:      var(--tnt-dark);
    padding:         0.55rem 1.25rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.75rem;
}

.column-entry-num {
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 1.5px;
    color:          rgba(255,255,255,0.4);
    text-transform: uppercase;
    white-space:    nowrap;
    margin:         0;          /* reset h3 default */
    padding:        0;          /* reset h3 default */
    font-family:    inherit;    /* don't inherit heading stack */
    line-height:    1;
}

.column-topic-badge {
    display:        inline-block;
    background:     var(--tnt-red);
    color:          #fff;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding:        0.2rem 0.6rem;
    border-radius:  4px;
    white-space:    nowrap;
}


/* ── Letter block (the question) ── */
.column-letter {
    padding:         1.5rem 1.75rem;
    background:      #faf5e8;
    border-bottom:   1px dashed #c8b870;
    font-family:     Georgia, 'Times New Roman', serif;
    font-size:       0.95rem;
    color:           #333;
    line-height:     1.78;
}

.column-letter-label {
    display:        inline-block;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.64rem;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          #999;
    margin-bottom:  0.6rem;
}

.column-salutation {
    display:       block;
    font-weight:   bold;
    color:         var(--tnt-dark);
    margin-bottom: 0.5rem;
}

.column-sign {
    display:    block;
    margin-top: 0.85rem;
    font-style: italic;
    color:      #777;
    text-align: right;
}


/* ── Response block (Copilot's answer) ── */
.column-response {
    padding:     1.5rem 1.75rem;
    background:  #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   0.95rem;
    color:       #333;
    line-height: 1.78;
}

.column-response-label {
    display:        inline-block;
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      0.64rem;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--tnt-red);
    margin-bottom:  0.6rem;
}

.column-response .column-salutation { color: var(--tnt-red); }

.column-response .column-sign {
    font-weight: bold;
    color:       var(--tnt-dark);
    font-style:  italic;
}

/* Inline code snippets inside responses — same warm red as TNT */
.column-response code {
    background:    rgba(216,24,39,0.08);
    color:         #B01020;
    font-size:     0.88em;
    padding:       0.1em 0.35em;
    border-radius: 3px;
}

/* Paragraph spacing inside both blocks */
.column-letter  p + p,
.column-response p + p { margin-top: 0.75rem; }

/* ── Inline image inside a response ─────────────────────────────
   Float right so text wraps naturally around the image.
   max-width caps it so it never dominates the column.
   The clear on the sign keeps the signature below the image.      */
.column-response-img {
    float:         right;
    max-width:     180px;
    width:         40%;
    margin:        0 0 0.75rem 1.25rem;
    border-radius: 8px;
    border:        2px solid #e2e4e8;
}

.column-response .column-sign { clear: both; }