/*
 * codeWordCollectorStyles.css
 * TNT | Code Word Collector — page-specific styles
 * 2026-07-22
 *
 * url() paths are relative to this file's location:
 *   CodeWordCollectorSPARK/styles/
 * so ../  →  CodeWordCollectorSPARK/
 *    ../../images/  →  root images/
 */


/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════════════ */
:root {
    --cwc-teal:       #1a5276;
    --cwc-teal-mid:   #21618c;
    --cwc-teal-lt:    #2e86c1;
    --cwc-gold:       #c9972b;
    --cwc-gold-lt:    #e8b84b;
    --cwc-parch:      #faf8f0;
    --cwc-warm:       #f0ece0;
    --cwc-border:     #d0c8b4;
    --cwc-text:       #1a1a2e;
    --cwc-muted:      #5a5040;

    /* Table row colors */
    --cwc-row-odd:    #f0f5fa;
    --cwc-row-even:   #dce8f5;
    --cwc-row-hdr:    #1a5276;

    /* Print row colors — softer */
    --cwc-print-odd:  #f5f8fc;
    --cwc-print-even: #e8f0f8;
}


/* ════════════════════════════════════════════════════════════════
   GLOBAL OVERRIDES (light theme)
════════════════════════════════════════════════════════════════ */
body {
    background: var(--cwc-parch);
    color: var(--cwc-text);
    font-family: 'Inter', sans-serif;
}

a           { color: var(--cwc-teal); }
a:hover     { color: var(--cwc-teal-lt); }


/* ════════════════════════════════════════════════════════════════
   LOG BAR
════════════════════════════════════════════════════════════════ */
.cwc-log-bar {
    background: var(--cwc-teal);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 0.30rem 1.25rem;
}
.cwc-log-bar a {
    color: rgba(255,255,255,0.88);
    font-size: 0.80rem;
    font-weight: 600;
    transition: opacity 0.2s;
}
.cwc-log-bar a:hover { color: #fff; text-decoration: underline; }


/* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
#cwcHero {
    background:
        linear-gradient(135deg, rgba(10,30,50,0.82) 0%, rgba(26,82,118,0.70) 100%),
        url('../acblackflagresynced-treasure-maps-header.avif') center center / cover no-repeat;
    border-bottom: 3px solid var(--cwc-gold);
    padding: 3.5rem 1rem 3.25rem;
    min-height: 280px;
    display: flex;
    align-items: center;
}

.cwc-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--cwc-gold-lt);
    margin-bottom: 0.75rem;
}

.cwc-hero-title {
    font-family: 'Boogaloo', cursive;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 400;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
    margin-bottom: 0.7rem;
    line-height: 1.1;
}

.cwc-hero-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: rgba(255,255,255,0.84);
    font-weight: 300;
    line-height: 1.65;
    max-width: 540px;
    margin: 0;
}

.cwc-hero-icon {
    font-size: clamp(5rem, 12vw, 8.5rem);
    color: var(--cwc-gold);
    opacity: 0.60;
    line-height: 1;
    display: block;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}


/* ════════════════════════════════════════════════════════════════
   CONTENT SHELL
════════════════════════════════════════════════════════════════ */
.cwc-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
}


/* ════════════════════════════════════════════════════════════════
   SECTION LABEL
════════════════════════════════════════════════════════════════ */
.cwc-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cwc-teal);
    margin-bottom: 0.45rem;
}


/* ════════════════════════════════════════════════════════════════
   INTRO PANEL
════════════════════════════════════════════════════════════════ */
.cwc-intro-panel {
    background: #fff;
    border: 1px solid var(--cwc-border);
    border-left: 5px solid var(--cwc-teal);
    border-radius: 0 10px 10px 0;
    padding: 1.4rem 1.75rem;
    margin-bottom: 1.75rem;
}
.cwc-intro-panel p:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════════════════════════════
   PRINT-ONLY HEADER  (hidden on screen)
════════════════════════════════════════════════════════════════ */
.cwc-print-header { display: none; }


/* ════════════════════════════════════════════════════════════════
   STUDENT INFO CARD
════════════════════════════════════════════════════════════════ */
.cwc-info-card {
    background: #fff;
    border: 1px solid var(--cwc-border);
    border-top: 4px solid var(--cwc-teal);
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.cwc-info-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    align-items: flex-end;
}

.cwc-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    flex: 1 1 190px;
}

.cwc-field-date { flex: 0 1 165px; }

.cwc-field-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--cwc-teal);
}

.cwc-meta-input {
    width: 100%;
    border: 1px solid #c5baa8;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: var(--cwc-text);
    background: var(--cwc-parch);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cwc-meta-input:focus {
    outline: none;
    border-color: var(--cwc-teal);
    box-shadow: 0 0 0 3px rgba(26,82,118,0.14);
    background: #fff;
}


/* ════════════════════════════════════════════════════════════════
   ACTIONS BAR
════════════════════════════════════════════════════════════════ */
.cwc-actions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.cwc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.46rem 1.05rem;
    border: none;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
    white-space: nowrap;
}
.cwc-btn:active { transform: scale(0.96); }

.cwc-btn-add   { background: var(--cwc-teal);  color: #fff; }
.cwc-btn-add:hover   { background: var(--cwc-teal-mid); box-shadow: 0 3px 10px rgba(26,82,118,0.30); }

.cwc-btn-save  { background: #2e7d32; color: #fff; }
.cwc-btn-save:hover  { background: #1b5e20; box-shadow: 0 3px 10px rgba(46,125,50,0.30); }

.cwc-btn-print { background: var(--cwc-gold);  color: #fff; }
.cwc-btn-print:hover { background: #a67820; box-shadow: 0 3px 10px rgba(201,151,43,0.30); }

.cwc-btn-clear { background: #c62828; color: #fff; }
.cwc-btn-clear:hover { background: #8e1a1a; box-shadow: 0 3px 10px rgba(198,40,40,0.30); }


/* ════════════════════════════════════════════════════════════════
   STATUS BADGE
════════════════════════════════════════════════════════════════ */
.cwc-status-badge {
    font-size: 0.80rem;
    font-weight: 600;
    padding: 0.28rem 0.80rem;
    border-radius: 999px;
    min-width: 0;
}
.cwc-status-ok   { background: #e8f5e9; color: #2e7d32; }
.cwc-status-info { background: #e3f2fd; color: #1565c0; }
.cwc-status-err  { background: #ffebee; color: #b71c1c; }


/* ════════════════════════════════════════════════════════════════
   TABLE WRAPPER
════════════════════════════════════════════════════════════════ */
.cwc-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.09);
    border: 1px solid var(--cwc-border);
}


/* ════════════════════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════════════════════ */
.cwc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

/* Header row */
.cwc-table thead tr   { background: var(--cwc-row-hdr); }
.cwc-table thead th   {
    color: #fff;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 0.72rem 0.9rem;
    border: none;
    white-space: nowrap;
}

.th-no      { width: 54px;  text-align: center; }
.th-word    { width: 34%; }
.th-comment { /* fills remainder */ }

/* Data rows */
.cwc-table tbody tr:nth-child(odd)  { background: var(--cwc-row-odd); }
.cwc-table tbody tr:nth-child(even) { background: var(--cwc-row-even); }
.cwc-table tbody tr:hover { background: #c5dcf4; transition: background 0.12s; }

.cwc-table tbody td {
    padding: 0.12rem 0.30rem;
    border-bottom: 1px solid #c5d8ec;
    vertical-align: middle;
}

.td-no {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cwc-teal);
    padding: 0.3rem;
    white-space: nowrap;
}

/* Row inputs */
.cwc-row-input {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.38rem 0.5rem;
    font-size: 0.90rem;
    font-family: 'Inter', sans-serif;
    color: var(--cwc-text);
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
}
.cwc-row-input:focus {
    outline: none;
    border-color: var(--cwc-teal-lt);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 0 0 2px rgba(46,134,193,0.14);
}
.cwc-row-input::placeholder { color: #aaa; font-style: italic; }


/* ════════════════════════════════════════════════════════════════
   TIP LINE
════════════════════════════════════════════════════════════════ */
.cwc-tip {
    margin-top: 1.2rem;
    font-size: 0.83rem;
    color: var(--cwc-muted);
    text-align: center;
}


/* ════════════════════════════════════════════════════════════════
   PRINT  @media print
════════════════════════════════════════════════════════════════ */
@media print {

    /* Force background/color printing */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    @page { size: letter; margin: 0.75in; }

    /* ── Hide screen chrome ── */
    #mainNav,
    footer,
    .cwc-log-bar,
    #cwcHero,
    .cwc-intro-panel,
    .cwc-actions-bar,
    .cwc-tip               { display: none !important; }

    body   { background: #fff !important; }

    .cwc-shell { padding: 0; max-width: 100%; }

    /* ── Show print-only header ── */
    .cwc-print-header {
        display: flex !important;
        align-items: center;
        gap: 0.9rem;
        padding-bottom: 0.55rem;
        margin-bottom: 0.75rem;
        border-bottom: 2px solid var(--cwc-teal);
    }
    .cwc-print-logo-img {
        height: 54px;
        width: auto;
        object-fit: contain;
    }
    .cwc-print-app-name {
        font-family: 'Boogaloo', cursive;
        font-size: 1.55rem;
        font-weight: 700;
        color: var(--cwc-teal);
        line-height: 1.1;
    }
    .cwc-print-tagline {
        font-size: 0.72rem;
        color: var(--cwc-muted);
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    /* ── Student info card — clean horizontal strip ── */
    .cwc-info-card {
        border: none !important;
        border-top: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 0 0.5rem 0 !important;
        margin-bottom: 0.75rem !important;
        border-bottom: 1px solid #bbb !important;
    }
    .cwc-info-inner {
        flex-wrap: nowrap;
        gap: 0 1.8rem;
    }
    .cwc-field-wrap, .cwc-field-date {
        flex: 0 1 auto;
        min-width: 0;
    }
    .cwc-field-label {
        font-size: 0.68rem;
        color: #555;
    }
    .cwc-meta-input {
        border: none !important;
        border-bottom: 1px solid #aaa !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0.05rem 0 !important;
        font-size: 0.88rem !important;
        min-width: 100px;
    }
    .cwc-meta-input::placeholder { opacity: 0 !important; }

    /* ── Table ── */
    .cwc-table-wrap {
        border: none;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .cwc-table { font-size: 0.80rem; }

    .cwc-table thead { display: table-header-group; }

    .cwc-table thead th {
        background: var(--cwc-teal) !important;
        color: #fff !important;
        padding: 0.38rem 0.6rem;
        font-size: 0.72rem;
    }

    .cwc-table tbody tr:nth-child(odd)  { background: var(--cwc-print-odd)  !important; }
    .cwc-table tbody tr:nth-child(even) { background: var(--cwc-print-even) !important; }
    .cwc-table tbody tr:hover           { background: inherit !important; }

    .cwc-table tbody td {
        padding: 0.22rem 0.5rem;
        border: 1px solid #c0d0e0;
    }

    .cwc-table tbody tr { page-break-inside: avoid; }

    .cwc-row-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 0.80rem;
    }
    .cwc-row-input::placeholder { opacity: 0 !important; }

}