/*
 * pf_styles.css
 * TNT | TechNoviceTools | Personal Finance — Page-Specific Styles
 *
 * ─── DEPENDENCY ─────────────────────────────────────────────────────────────
 * Load AFTER ../styles/tnt-base-styles.css so CSS custom properties
 * (--tnt-red, --tnt-amber, --tnt-dark, --boogaloo, etc.) are already defined.
 *
 * ─── SECTIONS ───────────────────────────────────────────────────────────────
 *   1.  Per-Calculator Color Tokens
 *   2.  PF Sub-Navigation  (secondary nav below the TNT navbar)
 *   3.  Index Page Hero    (coinage.jpg background)
 *   4.  Calculator Page Heroes  (compact, color-coded per tool)
 *   5.  Index Destination Cards  (grid of 5 tools + equations)
 *   6.  Calculator Card  (outer wrapper for the form)
 *   7.  Form Elements  (labels, inputs, selects)
 *   8.  Button Row  (Go / Clear / Reload)
 *   9.  Output Display  (result values + interest)
 *   10. Bad-Input Alert
 *   11. Equations Page  (reference tables)
 *   12. Responsive Adjustments
 *
 * Created:  2026-06-11
 * Author:   kpendleton + GitHub Copilot
 * ────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. PER-CALCULATOR COLOR TOKENS
   Each tool gets a distinct accent that flows through the hero, card header,
   output border, and sub-nav active state for that page.
═══════════════════════════════════════════════════════════════════════════ */
:root {
    --pf-savings:   #FF59B9;   /* pink    — piggy bank / savings     */
    --pf-loan:      #00449F;   /* navy    — loan / debt              */
    --pf-sinking:   #FF001C;   /* red     — financial goal           */
    --pf-annuity:   #12B0FB;   /* teal    — income stream / annuity  */
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. PF SUB-NAVIGATION
   A thin secondary nav that sits immediately below the TNT main navbar on
   every Personal Finance page, linking between the six tools.
═══════════════════════════════════════════════════════════════════════════ */
#pfSubNav {
    background: var(--tnt-mid);
    border-bottom: 2px solid rgba(230, 159, 77, 0.25);
    padding: 0.4rem 0;
}

#pfSubNav .nav-link {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}

#pfSubNav .nav-link:hover {
    color: #fff;
    background: rgba(230, 159, 77, 0.12);
}

/* The active link for the current page. */
#pfSubNav .nav-link.active {
    background: var(--tnt-amber);
    color: var(--tnt-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. INDEX PAGE HERO
   Full-bleed coinage.jpg background with a dark overlay so the white text
   is readable. The image path is relative to this CSS file's location inside
   the styles/ subfolder, so ../images/ resolves correctly.
═══════════════════════════════════════════════════════════════════════════ */
#pfHero {
    background:
        linear-gradient(to bottom,
            rgba(10, 14, 26, 0.70) 0%,
            rgba(10, 14, 26, 0.90) 100%),
        url('../images/coinage.jpg') center / cover no-repeat;
    min-height: 320px;
    padding: 4.5rem 1rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 3px solid var(--tnt-amber);
}

#pfHero .hero-title   { font-size: clamp(2.4rem, 6vw, 3.8rem); }
#pfHero .hero-subtitle{ font-size: clamp(0.95rem, 2.2vw, 1.15rem); max-width: 540px; margin: 0 auto; }

/* Big coin icon above the title. */
#pfHero .pf-hero-icon {
    font-size: 3.2rem;
    color: var(--tnt-amber);
    filter: drop-shadow(0 0 18px rgba(230, 159, 77, 0.55));
    display: block;
    margin-bottom: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. CALCULATOR PAGE HEROES
   Compact dark hero — enough room for the icon, title, and one-liner.
   Color-coded per tool via modifier classes.
═══════════════════════════════════════════════════════════════════════════ */
.pf-calc-hero {
    min-height: 190px;
    padding: 2.75rem 1rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Per-calculator gradient backgrounds. */
.pf-calc-hero-savings   { background: linear-gradient(135deg, #1a0010 0%, #2e0020 100%); border-bottom: 3px solid var(--pf-savings);  }
.pf-calc-hero-loan      { background: linear-gradient(135deg, #00091f 0%, #00194f 100%); border-bottom: 3px solid var(--pf-loan);     }
.pf-calc-hero-sinking   { background: linear-gradient(135deg, #1a0002 0%, #2e0008 100%); border-bottom: 3px solid var(--pf-sinking);  }
.pf-calc-hero-annuity   { background: linear-gradient(135deg, #001520 0%, #003048 100%); border-bottom: 3px solid var(--pf-annuity);  }
.pf-calc-hero-equations { background: linear-gradient(135deg, var(--tnt-dark) 0%, var(--tnt-mid) 100%); border-bottom: 3px solid var(--tnt-amber); }

/* Large icon at the top of each compact hero. */
.pf-calc-hero .calc-hero-icon {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 0.6rem;
}

/* Per-tool icon colors and glow. */
.pf-calc-hero-savings  .calc-hero-icon { color: var(--pf-savings);  filter: drop-shadow(0 0 12px rgba(255, 89, 185, 0.5));  }
.pf-calc-hero-loan     .calc-hero-icon { color: var(--pf-loan);     filter: drop-shadow(0 0 12px rgba(0, 68, 159, 0.55));   }
.pf-calc-hero-sinking  .calc-hero-icon { color: var(--pf-sinking);  filter: drop-shadow(0 0 12px rgba(255, 0, 28, 0.55));   }
.pf-calc-hero-annuity  .calc-hero-icon { color: var(--pf-annuity);  filter: drop-shadow(0 0 12px rgba(18, 176, 251, 0.55)); }
.pf-calc-hero-equations .calc-hero-icon{ color: var(--tnt-amber);   filter: drop-shadow(0 0 12px rgba(230, 159, 77, 0.55)); }

.pf-calc-hero .hero-title    { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.4rem; }
.pf-calc-hero .hero-subtitle { font-size: 0.95rem; max-width: 480px; margin: 0 auto; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. INDEX DESTINATION CARDS
   Grid of clickable cards on the landing page, one per tool.
═══════════════════════════════════════════════════════════════════════════ */
#pfIndex {
    background: var(--tnt-mid);
    padding: 3rem 1rem 3.5rem;
}

#pfIndex .section-label { color: var(--tnt-amber); }
#pfIndex .section-title { color: #fff; }

/* Base card — all tools share this structure. */
.pf-dest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    height: 100%;
    transition: transform 0.18s, background 0.18s;
}

.pf-dest-card:hover { transform: translateY(-4px); color: #fff; text-decoration: none; }

/* Accent top-border + hover tint per tool. */
.pf-dest-savings   { border-top: 3px solid var(--pf-savings);  }
.pf-dest-loan      { border-top: 3px solid var(--pf-loan);     }
.pf-dest-sinking   { border-top: 3px solid var(--pf-sinking);  }
.pf-dest-annuity   { border-top: 3px solid var(--pf-annuity);  }
.pf-dest-equations { border-top: 3px solid var(--tnt-amber);   }

.pf-dest-savings:hover   { background: rgba(255,  89, 185, 0.1);  }
.pf-dest-loan:hover      { background: rgba(  0,  68, 159, 0.15); }
.pf-dest-sinking:hover   { background: rgba(255,   0,  28, 0.1);  }
.pf-dest-annuity:hover   { background: rgba( 18, 176, 251, 0.1);  }
.pf-dest-equations:hover { background: rgba(230, 159,  77, 0.1);  }

/* Icon inside each destination card. */
.pf-dest-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.pf-dest-savings  .pf-dest-icon { color: var(--pf-savings);  }
.pf-dest-loan     .pf-dest-icon { color: var(--pf-loan);     }
.pf-dest-sinking  .pf-dest-icon { color: var(--pf-sinking);  }
.pf-dest-annuity  .pf-dest-icon { color: var(--pf-annuity);  }
.pf-dest-equations .pf-dest-icon{ color: var(--tnt-amber);   }

.pf-dest-title {
    font-family: var(--boogaloo);
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.pf-dest-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. CALCULATOR CARD
   The outer container that holds the form for each calculator page.
═══════════════════════════════════════════════════════════════════════════ */
#pfCalcSection {
    background: var(--tnt-dark);
    padding: 2.5rem 1rem 3rem;
}

/* Card wrapper: dark panel with a subtle border. */
.pf-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

/* Card header: colored left-border accent per calculator. */
.pf-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-card-header h2 {
    font-family: var(--boogaloo);
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
}

.pf-card-savings  .pf-card-header { background: rgba(255,  89, 185, 0.12); border-left: 4px solid var(--pf-savings);  }
.pf-card-loan     .pf-card-header { background: rgba(  0,  68, 159, 0.18); border-left: 4px solid var(--pf-loan);     }
.pf-card-sinking  .pf-card-header { background: rgba(255,   0,  28, 0.12); border-left: 4px solid var(--pf-sinking);  }
.pf-card-annuity  .pf-card-header { background: rgba( 18, 176, 251, 0.12); border-left: 4px solid var(--pf-annuity);  }

/* Card body: transparent so the .pf-card background shows through. */
.pf-card .pf-card-body { padding: 1.5rem; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. FORM ELEMENTS
   Custom styled labels, text inputs, number inputs, and selects.
   These override Bootstrap 5 form defaults to match the TNT dark theme.
═══════════════════════════════════════════════════════════════════════════ */

/* Artwork figure — floated left so form fields sit in a vertical column
 * beside it.  All sibling form elements receive a matching margin-left
 * (see below) so they never wrap under the image. */
.pf-artwork-figure {
    float: left;
    max-width: 110px;
    margin: 0.25rem 1.25rem 0.5rem 0;  /* top  right  bottom  left */
    text-align: center;
}

.pf-artwork-figure img {
    width: 100%;
    height: auto;
    opacity: 0.85;
}

.pf-artwork-figure figcaption {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin-top: 0.3rem;
    line-height: 1.4;
}

/* Parameter section heading inside the form. */
.pf-params-heading {
    font-family: var(--boogaloo);
    font-size: 1.05rem;
    color: var(--tnt-amber);
    font-style: italic;
    margin-bottom: 0.75rem;
    margin-left: 130px;   /* figure max-width (110px) + right gap (1.25rem ≈ 20px) */
}

/* Label + input/select stacked pair. */
.pf-form-label {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    margin-left: 130px;   /* keeps labels aligned in the same column as inputs */
}

.pf-form-control,
.pf-form-select {
    display: block;               /* match labels so margin-left aligns correctly */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    padding: 0.38rem 0.65rem;
    font-size: 0.9rem;
    width: 100%;
    max-width: 240px;
    margin-bottom: 0.75rem;
    margin-left: 130px;   /* aligns inputs with their labels beside the float */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pf-form-control:focus,
.pf-form-select:focus {
    outline: none;
    border-color: var(--tnt-amber);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(230, 159, 77, 0.2);
}

/* Number inputs right-aligned so decimal points line up. */
input[type="number"].pf-form-control { text-align: right; }

/* <select> option dropdown needs explicit dark background in Chromium. */
.pf-form-select option { background: var(--tnt-dark); color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   8. BUTTON ROW
   Three buttons per calculator: Go (green) · Clear (amber outline) ·
   Reload (red outline).  Clear the float before the button row.
═══════════════════════════════════════════════════════════════════════════ */
.pf-btn-row {
    clear: both;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;   /* centre the Go / Clear / Reload buttons */
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Go — solid green. */
.btn-pf-go {
    background: #198754;
    border: 2px solid #198754;
    color: #fff;
    font-family: var(--boogaloo);
    font-size: 1.1rem;
    padding: 0.42rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    min-width: 80px;
}
.btn-pf-go:hover { background: #157347; border-color: #157347; transform: scale(1.03); }

/* Clear / Reload — amber outline. */
.btn-pf-secondary {
    background: transparent;
    border: 2px solid var(--tnt-amber);
    color: var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size: 1rem;
    padding: 0.38rem 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-pf-secondary:hover { background: var(--tnt-amber); color: var(--tnt-dark); }


/* ═══════════════════════════════════════════════════════════════════════════
   9. OUTPUT DISPLAY
   Result values shown after Go is clicked. Green monospace numbers on a
   dark amber-bordered panel.
═══════════════════════════════════════════════════════════════════════════ */
.pf-output {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(230, 159, 77, 0.22);
    border-left: 4px solid var(--tnt-amber);
    border-radius: 8px;
    text-align: center;
}

.pf-output-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.2rem;
}

/* Primary result — large monospace value. */
.pf-output-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: #3ddc84;   /* Android green — clearly a positive result */
    margin: 0 0 0.75rem;
    min-height: 2.5rem; /* reserves space for the &nbsp; placeholder */
}

/* Secondary result — interest earned / charged. */
.pf-output-interest {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    color: rgba(61, 220, 132, 0.7);
    font-style: italic;
    margin: 0;
    min-height: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. BAD-INPUT ALERT
   Starts hidden via inline style (set by HTML).
   JS calls badInputDiv.style.display = 'block' on invalid input,
   and the Bootstrap close button (btn-close) dismisses it.
═══════════════════════════════════════════════════════════════════════════ */
#badInputDiv {
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. EQUATIONS PAGE
   Dark-themed reference tables for the four financial formulas.
═══════════════════════════════════════════════════════════════════════════ */
#pfEquations {
    background: var(--tnt-dark);
    padding: 2.5rem 1rem 3.5rem;
}

#pfEquations .section-label { color: var(--tnt-amber); }
#pfEquations .section-title { color: #fff; }

.pf-eqn-intro {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 720px;
}

/* Scroll wrapper prevents table overflow on narrow screens. */
.pf-eqn-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2.5rem;
}

/* Equations table. */
.pf-eqn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.82);
    min-width: 480px;
}

/* Caption rendered above the table. */
.pf-eqn-table caption {
    caption-side: top;
    font-family: var(--boogaloo);
    font-size: 1.1rem;
    color: var(--tnt-amber);
    text-align: center;
    padding-bottom: 0.4rem;
}

/* Header row. */
.pf-eqn-table thead tr { background: rgba(255, 255, 255, 0.07); }

.pf-eqn-table th {
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--tnt-amber);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

/* Data rows alternating shades. */
.pf-eqn-table tbody tr:nth-child(odd)  { background: rgba(255, 255, 255, 0.03); }
.pf-eqn-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

.pf-eqn-table td {
    padding: 0.75rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    vertical-align: top;
}

/* Concept column icons — centered small icons. */
.pf-eqn-table td img.eqn-icon {
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto 0.4rem;
    opacity: 0.85;
}

/* Equation formula images — full-width within the cell.
 * Clickable: each image opens the #eqnModal zoom overlay. */
.pf-eqn-table img.eqn {
    width: 100%;
    max-width: 340px;
    height: auto;
    background: rgba(255, 255, 255, 0.06);
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;                    /* signals interactivity */
    transition: transform 0.18s, filter 0.18s, box-shadow 0.18s;
}

.pf-eqn-table img.eqn:hover,
.pf-eqn-table img.eqn:focus {
    transform: scale(1.05);
    filter: brightness(1.12);
    box-shadow: 0 0 0 3px rgba(230, 159, 77, 0.55); /* amber focus ring */
    outline: none;
}

/* Symbol column — bold amber monospace. */
.pf-eqn-table td.sym {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    color: var(--tnt-amber);
    white-space: nowrap;
}

/* Concept column in symbol tables — plain text, slightly muted. */
.pf-eqn-table td.concept {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE ADJUSTMENTS
═══════════════════════════════════════════════════════════════════════════ */

/* Hide artwork on very small screens to give the form more room.
 * Also reset the margin-left indents so inputs use full width. */
@media (max-width: 576px) {
    .pf-artwork-figure { display: none; }
    .pf-params-heading,
    .pf-form-label,
    .pf-form-control,
    .pf-form-select  { margin-left: 0; max-width: 100%; }
    .pf-btn-row { flex-direction: column; align-items: flex-start; }
}