/*
 * conlexia-site-styles.css
 * TNT | TechNoviceTools | Conlexia Encryption App
 * Stage 2 — upgraded 06/12/2026 to match 2026 TNT design system.
 *
 * EDUCATIONAL NOTE — Stylesheet architecture:
 *   This file handles ONLY Conlexia-specific styles.
 *   Global styles (navbar, footer, hero structure, typography tokens)
 *   live in ../styles/tnt-base-styles.css and are loaded first.
 *   The cascade means rules here can override the base file when needed.
 *
 * EDUCATIONAL NOTE — CSS custom properties:
 *   Variables defined in tnt-base-styles.css under :root are available
 *   everywhere in the page.  We reference them with var(--name) so our
 *   colours stay in sync with the rest of the site automatically.
 */


/* ═══════════════════════════════════════════════════════════════════
   FONT HELPERS
   Monospace font for textareas — equal-width characters make
   encoded text easier to compare letter-by-letter.
═══════════════════════════════════════════════════════════════════ */
.mono-font {
    font-family: "Noto Sans Mono", "Courier New", Courier, monospace;
}

.boogaloo-font {
    font-family: var(--boogaloo);
}

.show-cursor {
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   HERO — Conlexia-specific sizing and background
   tnt-base-styles.css provides the structural rules (#hero flex,
   .hero-title colour/font, etc.); we only need to set the image,
   min-height, and an overlay so text stays readable.
═══════════════════════════════════════════════════════════════════ */
#hero {
    background-image:
        linear-gradient(rgba(10, 14, 26, 0.68), rgba(10, 14, 26, 0.68)),
        url('../images/dyslexia.webp');
    background-size: cover;
    background-position: center;
    min-height: 260px;
    padding: 3rem 1rem;
}

.hero-title {
    font-size: clamp(2.8rem, 8vw, 5rem);
    margin-bottom: 0.5rem;
}

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


/* ═══════════════════════════════════════════════════════════════════
   INSTRUCTIONS PANEL
═══════════════════════════════════════════════════════════════════ */
#introDiv {
    max-width: 900px;
}

#info a {
    /* Links inside the instructions use the amber accent from the
       TNT design token instead of plain blue. */
    color: var(--tnt-amber-dark);
}


/* ═══════════════════════════════════════════════════════════════════
   TARGET LETTER ROW
   max-width and margin: auto mirror #twoColumnApp so the label and
   field share the same left edge as the textarea container below.
═══════════════════════════════════════════════════════════════════ */
#targetRow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   TWO-COLUMN APP PANEL
   A dark-blue card that houses both textareas side-by-side.
   The inner columns get contrasting backgrounds to visually
   separate "input" from "output" at a glance.
═══════════════════════════════════════════════════════════════════ */
#appSection {
    max-width: 960px;
}

#twoColumnApp {
    background-color: #014CA2;      /* deep blue card background     */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Left column (original text) — warm contrast against the blue card */
#col1Div {
    background-color: #d2a679;      /* warm tan                       */
}

/* Right column (encrypted result) — mid-blue stays in the blue family */
#col2Div {
    background-color: #029BE3;
}

/*
 * EDUCATIONAL NOTE — responsive column border
 * At medium width (md, ≥768px) the columns sit side-by-side so we
 * draw a vertical separator on the right edge of col1.
 * Below md Bootstrap stacks them vertically, so we switch to a
 * horizontal separator at the bottom of col1 instead.
 */
@media (min-width: 768px) {
    #col1Div {
        border-right: 3px solid lightcyan;
    }
}

@media (max-width: 767.98px) {
    #col1Div {
        border-bottom: 3px solid lightcyan;
        padding-bottom: 1rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   TEXTAREAS
   Green bold monospace text gives the encoded output a distinctive
   'terminal' look that signals "this is machine output."
═══════════════════════════════════════════════════════════════════ */
textarea {
    color: #1a6b1a !important;      /* dark green — readable on white  */
    font-weight: 700 !important;
    resize: vertical;               /* allow height adjustment only     */
}

textarea:focus {
    /* EDUCATIONAL NOTE: box-shadow is used instead of outline so we
       can control the spread and colour while keeping the native
       browser focus ring accessible. */
    box-shadow: 0 0 0 3px rgba(230, 159, 77, 0.45) !important;
    border-color: var(--tnt-amber) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   HEADINGS INSIDE THE APP PANEL
   Override Bootstrap's default dark text so headings are legible
   against the coloured column backgrounds.
═══════════════════════════════════════════════════════════════════ */
#col1Div h2,
#col2Div h2 {
    color: #fff;
    letter-spacing: 0.5px;
}

#col1Div h2:hover {
    /* Subtle hint that the heading is clickable (loads sample text) */
    color: var(--tnt-amber);
    text-decoration: underline;
    text-underline-offset: 4px;
}