/* RESET + BASE -------------------------------------------------- */
/* This is Jim Homyak's rambling as of June 6, 2026                */
/* --------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

body {
    background: #f4f4f4;
    color: #222;
}

.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* SECTION 1 — TOP ----------------------------------------------- */
.top-section {
    text-align: center;
    padding: 15px 0;
}

/* DARK MODE TOGGLE BUTTON --------------------------------------- */
.dark-toggle {
    margin-top: 15px;
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid #888;
    background: #ddd;
    cursor: pointer;
    transition: 0.2s ease;
}

.dark-toggle:hover {
    background: #ccc;
}

.tma-logo {
    width: 140px;
    margin-bottom: 15px;
}

.top-section h1 {
    font-size: 2rem;
    font-weight: 700;
}

.top-section h2 {
    font-size: 1.2rem;
    color: #555;
    margin-top: 5px;
}

/* SECTION 2 — BUTTON GRID ---------------------------------------- */
.button-grid {
    margin: 15px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.button-grid a {
    display: block;
    padding: 15px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* --------------------------------------------------------------- */
/* INDUSTRIAL COLOR SYSTEM — Optimized + Unified                   */
/* --------------------------------------------------------------- */

/* UNIVERSAL BUTTON BASE ----------------------------------------- */
/* All button families inherit these rules */
.btn-blue,
.btn-green,
.btn-red,
.btn-gold,
.btn-royal,
.btn-lavender,
.button-grid a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 10px; /* unified radius */
    cursor: pointer;
    transition: 0.2s ease;
    border: 2px solid rgba(0,0,0,0.35); /* darkest outline */
    box-shadow: 0 4px 10px rgba(0,0,0,0.35); /* 3D shadow */
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.0;
}

/* UNIVERSAL HOVER EFFECTS --------------------------------------- */
.btn-blue:hover,
.btn-green:hover,
.btn-red:hover,
.btn-gold:hover,
.btn-royal:hover,
.btn-lavender:hover,
.button-grid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    filter: brightness(1.10);
    color: #00ffff; /* electric cyan */
    text-shadow:
        0 0 6px #00ffff,
        0 0 12px #00ffff,
        0 0 18px #00ffff;
}

/* --------------------------------------------------------------- */
/* COLOR FAMILIES — Gradients + Hover Shading                      */
/* --------------------------------------------------------------- */

/* Blue — SteelBlue → Deep Navy */
.btn-blue  { background: linear-gradient(135deg, #4682b4, #1f4f9c); }
.btn-blue:hover  { background: #1f4f9c; }

/* Green — Industrial Green */
.btn-green { background: linear-gradient(135deg, #0b2b1f, #1f8c4a); }
.btn-green:hover { background: #1f8c4a; }

/* Orange (formerly Red) — Industrial Orange */
.btn-red   { background: linear-gradient(135deg, #cc5500, #ff8c00); }
.btn-red:hover   { background: #ff8c00; }

/* Gold — Industrial Gold */
.btn-gold  { background: linear-gradient(135deg, #3b2a0b, #c89b2b); }
.btn-gold:hover  { background: #c89b2b; }

/* Royal — Blue → Purple (Four Pillars) */
.btn-royal {
    background: linear-gradient(135deg, #1a2aff, #7a00c8);
}
.btn-royal:hover {
    background: #7a00c8;
}

/* Lavender — Soft Lavender → Deep Lavender (Workflow Topics) */
.btn-lavender {
    background: linear-gradient(135deg, #b497d6, #8a6fb8);
}
.btn-lavender:hover {
    background: #8a6fb8;
}

/* --------------------------------------------------------------- */
/* FOUR PILLARS ALWAYS STACKED ----------------------------------- */
.four-pillars-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* SECTION 3 — BRAND + PILLARS ------------------------------------ */
.brand-pillars {
    display: grid;
    /* display: block;       /* stop forcing 2 columns  */
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 40px 0;
}

.brand-pillars h3 {
    margin-bottom: 10px;
}

.four-pillars ul {
    list-style: none;
}

.four-pillars li {
    padding: 6px 0;
}


/* SECTION 4 — WORKFLOW TOPICS ------------------------------------ */
.workflow-topics {
    max-width: 1200px;
    /* margin: 40px 0; */
    margin: 15px auto;
}

.workflow-grid {
    /* margin-top: 15px; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;

    /* max-width: 1000px;   /* ← match your pillars + button grid */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin: 15px auto 0 auto; */
    margin-top: 2px;
}

.workflow-grid div {
    display: block;
    /* background: #e8e8e8; */
    background: none;
    padding: 0;  /* was 12px; */
    border-radius: 0; /* was 6px; */
    text-align: center;
}


/* SECTION 5 — FOOTER --------------------------------------------- */
.footer {
    /* margin-top: 40px; */
    padding: 2px 0;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------- */
/* DARK MODE — Automatic (prefers-color-scheme: dark)              */
/* --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

    body {
        background: #0f0f0f;
        color: #e6e6e6;
    }

    .page-wrapper {
        background: transparent;
    }

    /* Top section text */
    .top-section h1 {
        color: #e6e6e6;
    }

    .top-section h2 {
        color: #bbbbbb;
    }

    /* Footer */
    .footer {
        color: #999;
    }

    /* Brand + Pillars text */
    .brand-pillars h3,
    .brand-pillars p {
        color: #e6e6e6;
    }

    /* Workflow section heading */
    .workflow-topics h3 {
        color: #e6e6e6;
    }

    /* Remove light backgrounds from workflow-grid divs (now buttons anyway) */
    .workflow-grid div {
        background: #222;
        color: #ddd;
    }

    /* Button shadows deepen slightly in dark mode */
    .btn-blue,
    .btn-green,
    .btn-red,
    .btn-gold,
    .btn-royal,
    .btn-lavender,
    .button-grid a {
        box-shadow: 0 4px 12px rgba(0,0,0,0.6);
        border-color: rgba(255,255,255,0.15);
    }

    /* Hover shadows deepen too */
    .btn-blue:hover,
    .btn-green:hover,
    .btn-red:hover,
    .btn-gold:hover,
    .btn-royal:hover,
    .btn-lavender:hover,
    .button-grid a:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.75);
    }
}

/* --------------------------------------------------------------- */
/* MANUAL DARK MODE — Corrected + Overrides Body Background        */
/* --------------------------------------------------------------- */

.dark-mode body {
    background: #0f0f0f !important;
    color: #e6e6e6;
}

/* Top section text */
.dark-mode .top-section h1,
.dark-mode .top-section h2 {
    color: #e6e6e6;
}

/* Brand + Pillars */
.dark-mode .brand-pillars h3,
.dark-mode .brand-pillars p {
    color: #e6e6e6;
}

/* Workflow section */
.dark-mode .workflow-topics h3 {
    color: #e6e6e6;
}

.dark-mode .workflow-grid div {
    background: #222;
    color: #ddd;
}

/* Buttons deepen shadows + lighten borders */
.dark-mode .btn-blue,
.dark-mode .btn-green,
.dark-mode .btn-red,
.dark-mode .btn-gold,
.dark-mode .btn-royal,
.dark-mode .btn-lavender,
.dark-mode .button-grid a {
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.15);
}

/* Hover shadows deepen */
.dark-mode .btn-blue:hover,
.dark-mode .btn-green:hover,
.dark-mode .btn-red:hover,
.dark-mode .btn-gold:hover,
.dark-mode .btn-royal:hover,
.dark-mode .btn-lavender:hover,
.dark-mode .button-grid a:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.75);
}

/* Toggle button in dark mode */
.dark-mode .dark-toggle {
    background: #333;
    color: #eee;
    border-color: #666;
}

.dark-mode .dark-toggle:hover {
    background: #444;
}

/* --------------------------------------------------------------- */
/* SMOOTH DARK MODE TRANSITION                                     */
/* --------------------------------------------------------------- */

html, body,
.top-section,
.brand-pillars,
.workflow-topics,
.footer,
.btn-blue,
.btn-green,
.btn-red,
.btn-gold,
.btn-royal,
.btn-lavender,
.button-grid a {
    transition: 
        background-color 0.75s ease,
        color 0.75s ease,
        border-color 0.75s ease,
        box-shadow 0.75s ease,
        filter 0.75s ease;
}

/* ============================================================
   GLOBAL BUTTON FIX — btn-blue hover anomaly
   Forces correct Industrial Blue hover shade site-wide.
   ============================================================ */

.btn-blue {
    background: #4682b4 !important; /* SteelBlue base */
    border: 2px solid rgba(0,0,0,0.35) !important;
    color: #fff !important;
    border-radius: 10px;
    padding: 10px 14px;
    /* font-weight: 600; */
}

/* Strong global override for hover */
.btn-blue:hover {
    background: #6aa7d9 !important; /* Lightened hover blue */
    color: #00ffff !important;      /* Cyan glow */
    text-shadow:
        0 0 6px #00ffff,
        0 0 12px #00ffff,
        0 0 18px #00ffff !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

/* FOUR PILLARS — SIMPLE TWO‑COLUMN GRID */
.four-pillars-front {
    /* margin: 2rem auto; */     /* Original */
    /* text-align: center; */    /* Original */
    max-width: 1200px;   /* match the pillars grid */
    width: 100%;
    margin: 0 auto 0 auto;
}

.pillars-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* Two equal columns, buttons stay natural width */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* two equal columns */
    gap: 15px; /* matches your button grid spacing */
    max-width: 1200px;
    margin: 0 auto 0 auto;
}

/* Two equal columns */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    /* The magic: widen the container */
    /* max-width: 800px; */
    width: 100%;
    max-width: 1200px;   /* ← this is what doubles the width */
    /* width: 1000px;       /* my first idea that didn't work  */
    margin: 0 auto 0 auto;  
}

/* Make each button wider, but keep it inside its column */
.pillar-wide {
    width: 100% -important!;
    display: block;
    /* max-width: 100%;          /* ← double-width button */
    /* width: 200%;               /* fills its allowed space */
    /* justify-self: center;      /* centers inside each column */
}
.top-2-col-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    gap: 2rem;
}

.top-2-col-section .col {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tma-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 1rem;
}

/* Mobile-friendly stacking */
@media (max-width: 700px) {
    .top-2-col-section {
        flex-direction: column;
    }
}