/* =============================================================================
   File: /assets/tg/tg.core.css
   Updated: 2025-09-13 16:20 PT
   Purpose:
     - Global tokens, layout, header/nav, hero, cards, tiles, CTAs, utilities.
     - Consistent hero overlay (fixed size), with image-only pan/zoom shims.
     - Level-1 page consistency (spacing, borders, tile accents).
     - THREE global markers for titles/links sizing:
         1) --tg-section-header-size  → Section Card Header <h2>
         2) --tg-mini-title-size      → Mini Card Title (.qs-card .title)
         3) --tg-accent-link-size     → Link Arrow text (.qs-card .accent)
     - Card border color coding helpers (default/info/success/warn/danger).
     - Shared form system (.tg-form, .form-grid).
     - Mobile header stack: Hamburger → Brand → Menu.
   =============================================================================

   TABLE OF CONTENTS
   01) Reset / Base helpers
   02) Tokens / Root variables
   03) Base / Typography
   04) Header / Top navigation
   05) Hero (variable-driven + enforced layering)
   06) Buttons
   07) Layout: wrapper + leftnav + content
   08) Content cards (sections)
   09) Quick tile grid + cards
   10) Card border color variants
   11) Evaluation alerts
   12) Forms (global)
   13) Utilities / Misc
   14) Print
   15) Page-specific tweaks (Join)
*/

/* ============================================================================
   01) RESET / BASE HELPERS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

/* ============================================================================
   02) TOKENS / ROOT VARIABLES
   - Edit these to change the global look/scale.
   ========================================================================== */
:root{
  /* Brand palette */
  --tg-blue:#002058;
  --tg-red:#BA0C2F;
  --tg-gold:#D4AF37;

  /* Text palette */
  --tg-dark:#111318;
  --tg-text:#0b1e33;
  --tg-muted:#475569;

  /* Surfaces & lines */
  --bg-page:#F5F7FB;
  --card:#ffffff;
  --line:#E2E8F0;
  --line-strong:#C3CAD7;

  /* Shadows & radii */
  --shadow-sm:0 6px 16px rgba(0,0,0,.05);
  --shadow:0 10px 28px rgba(0,0,0,.06);
  --shadow-lg:0 12px 24px rgba(0,0,0,.08);
  --radius-lg:18px;
  --radius-md:14px;

  /* ===============================
     HERO (fixed size; image shims only)
     =============================== */
  --tg-hero-min-h-sm: 360px;
  --tg-hero-min-h-md: 420px;
  --tg-hero-min-h-lg: 520px;

  --tg-hero-pad-y-sm: 56px;   /* top/bottom padding inside overlay */
  --tg-hero-pad-y-md: 72px;
  --tg-hero-pad-y-lg: 96px;

  --tg-hero-title-size: clamp(28px, 4.2vw, 56px);
  --tg-hero-motto-size: clamp(16px, 1.6vw, 22px);

  --tg-hero-overlay-top: rgba(0,0,0,.34);
  --tg-hero-overlay-bottom: rgba(0,0,0,.58);
  --tg-hero-img-brightness: 0.86;

  --tg-hero-align: center;
  --tg-hero-cta-gap: 12px;
  --tg-hero-shim-y: 0px;      /* small vertical nudge for CONTENT, not image */

  /* ===============================
     TITLE / LINK SIZE MARKERS
     =============================== */
  /* 1) Section Card Header (e.g., How Joining Works, Resources) */
  --tg-section-header-size: 1.25rem;    /* ~20px */

  /* 2) Mini Card Title (e.g., 1. Free Evaluation, Placement) */
  --tg-mini-title-size: 0.75rem;        /* ≈75% default per your spec */

  /* 3) Link Arrow (e.g., Book Eval →, Groups →) */
  --tg-accent-link-size: 0.85rem;

  /* ===============================
     CARD BORDER COLOR SYSTEM
     =============================== */
  --tg-card-border-default: var(--line-strong);
  --tg-card-border-info:    #60a5fa;  /* blue-400 */
  --tg-card-border-success: #34d399;  /* emerald-400 */
  --tg-card-border-warn:    #f59e0b;  /* amber-500 */
  --tg-card-border-danger:  #ef4444;  /* red-500 */
}

/* ============================================================================
   03) BASE / TYPOGRAPHY
   ========================================================================== */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg-page);
  color:var(--tg-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
}
a{ color:var(--tg-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
.lead-muted{ color:#334155; }
.form-note{ font-size:.9rem; color:#555; }
.req{ color:#ef4444; font-weight:800; }

/* Container helper */
.container{ max-width:1140px; margin:0 auto; padding:0 16px; }

/* ============================================================================
   04) HEADER / TOP NAVIGATION (GLOBAL)
   ========================================================================== */
.tg-topbar{
  background:#fff;
  border-bottom:1px solid #e6e8ee;
  font-size:75%; /* compact header */
}
.tg-topbar .row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
}
.tg-brand{
  font-weight:800; letter-spacing:.02em; color:#002058;
  text-decoration:none; white-space:nowrap;
}
.tg-nav-toggle{
  appearance:none; border:0; background:#002058; color:#fff;
  border-radius:10px; padding:10px 12px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.tg-nav-toggle .icon{ display:inline-block; width:18px; height:2px; background:#fff; position:relative; }
.tg-nav-toggle .icon::before,
.tg-nav-toggle .icon::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.tg-nav-toggle .icon::before{ top:-6px; }
.tg-nav-toggle .icon::after{ top:6px; }

nav.tg-nav{ display:none; }
nav.tg-nav.open{ display:block; }
nav.tg-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
nav.tg-nav a{
  text-decoration:none; color:#002058; font-weight:700;
  padding:8px 10px; border-radius:8px;
}
nav.tg-nav a:hover{ background:#f2f4f8; }

/* Desktop nav */
@media (min-width:992px){
  .tg-nav-toggle{ display:none; }
  nav.tg-nav{ display:block; }
  nav.tg-nav ul{ flex-direction:row; gap:14px; }
}

/* Mobile: stack Hamburger → Brand → Menu */
@media (max-width:991.98px){
  .tg-topbar .row{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .tg-nav-toggle{ order:1; align-self:flex-end; }
  .tg-brand{ order:2; align-self:flex-start; }
  nav.tg-nav{
    order:3; width:100%; margin-top:4px; border-top:1px solid #e6e8ee; padding-top:8px;
  }
}

/* ============================================================================
   05) HERO (VARIABLE-DRIVEN WITH ENFORCED LAYERING)
   - Overlay always above image; image accepts only background-* shims.
   ========================================================================== */
.tg-hero{
  position:relative; overflow:hidden;
  min-height: var(--tg-hero-min-h-sm);
  margin-bottom:40px; background:#0d1b2a;
}
@media (min-width:768px){  .tg-hero{ min-height: var(--tg-hero-min-h-md); } }
@media (min-width:1200px){ .tg-hero{ min-height: var(--tg-hero-min-h-lg); } }

/* Image layer (below) */
.tg-hero .img-bg{
  position:absolute; inset:0;
  z-index:1; /* image under overlay */
  background-size:cover; background-position:center;
  filter: brightness(var(--tg-hero-img-brightness));
}

/* Overlay layer (above) */
.tg-hero .overlay{
  position:absolute; inset:0;
  z-index:2; /* overlay above image */
  display:flex; align-items:center; color:#fff;
  background: linear-gradient(180deg, var(--tg-hero-overlay-top), var(--tg-hero-overlay-bottom));
}

.tg-hero .wrap{
  padding-block: var(--tg-hero-pad-y-sm); /* top/bottom padding */
  text-align: var(--tg-hero-align);
  transform: translateY(var(--tg-hero-shim-y)); /* content nudge (not image) */
}
@media (min-width:768px){  .tg-hero .wrap{ padding-block: var(--tg-hero-pad-y-md); } }
@media (min-width:1200px){ .tg-hero .wrap{ padding-block: var(--tg-hero-pad-y-lg); } }

.tg-hero h1{
  font-weight:800; letter-spacing:.01em; margin:0 0 .35rem;
  font-size: var(--tg-hero-title-size);
  color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.45);
  margin-left:auto; margin-right:auto; max-width:72ch;
}
.tg-hero .motto{
  margin:0 0 1rem; opacity:.98; font-size: var(--tg-hero-motto-size);
  color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.45);
  margin-left:auto; margin-right:auto; max-width:72ch;
}
.tg-hero .cta-row{
  display:flex; gap: var(--tg-hero-cta-gap); flex-wrap:wrap; justify-content:center;
}

/* ============================================================================
   06) BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; border-radius:10px; padding:12px 18px; line-height:1.2;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }

.btn.gold{ background:var(--tg-gold); color:#111; border-color:#9b7f1f; }
.btn.ghost{ background:#ffffff; color:#111; border-color:var(--line-strong); }
.btn.white{ background:#fff; color:#111; border:1px solid var(--line-strong); }
.btn.ghost:hover,
.btn.white:hover,
.btn.gold:hover{ box-shadow:var(--shadow); }

/* ============================================================================
   07) LAYOUT: WRAPPER + LEFT NAV + CONTENT
   ========================================================================== */
.tg-wrapper{
  display:grid; grid-template-columns:280px 1fr; gap:24px;
  margin-top:2px;
}
@media (max-width:991.98px){
  .tg-wrapper{ grid-template-columns:1fr; }
  .leftnav{ display:none; }
}

.leftnav{
  position:sticky; top:90px; align-self:start;
  background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:16px;
}
.leftnav h2{ font-size:1.05rem; letter-spacing:.02em; color:var(--tg-blue); margin:0 0 .25rem; }
.leftnav p{ margin:0 0 .75rem; color:#475569; font-size:.95rem; }
.leftnav .nav{ display:flex; flex-direction:column; gap:6px; }
.leftnav .nav a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:#0b1e33; border:1px solid transparent;
}
.leftnav .nav a:hover{ background:#f2f4f8; }
.leftnav .nav a.active{
  border-color:var(--tg-blue); background:#eef3ff; color:var(--tg-blue); font-weight:600;
}

/* ============================================================================
   08) CONTENT CARDS (SECTIONS)
   ========================================================================== */
.section-card{
  background:var(--card);
  border:1px solid var(--tg-card-border-default);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:1.25rem;
  margin-bottom:28px;
}
.section-card + .section-card{ margin-top:22px; }

/* Section Card Header (marker #1) */
.section-card > h2{
  font-size: var(--tg-section-header-size);
  color:var(--tg-blue);
  font-weight:800;
  line-height:1.22;
  margin:0 0 .35rem;
}

/* ============================================================================
   09) QUICK TILE GRID + CARDS (mini cards)
   ========================================================================== */
.qs-grid{
  display:grid;
  grid-template-columns:1fr;
  row-gap:24px; column-gap:24px;
}
@media(min-width:768px){
  .qs-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:992px){
  .qs-grid{ grid-template-columns:repeat(4,1fr); row-gap:28px; column-gap:28px; }
}

.qs-card{
  background:#fff; border:1px solid var(--tg-card-border-default);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:16px; transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; min-height:160px;
}
.qs-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* Mini Card Title (marker #2) */
.qs-card .title{
  font-size: var(--tg-mini-title-size);
  font-weight:800; margin:0 0 .25rem; color:var(--tg-text); line-height:1.25;
}

.qs-card .desc{
  margin:0 0 .75rem; color:var(--tg-muted); font-size:.9rem;
}

/* Link Arrow (marker #3) — usually aligned to bottom */
.qs-card .accent{
  margin-top:auto;
  font-size: var(--tg-accent-link-size);
  line-height:1.25; font-weight:700;
  color:var(--tg-text); text-decoration:none;
}
.qs-card .accent:hover{ text-decoration:underline; }

/* ============================================================================
   10) CARD BORDER COLOR VARIANTS
   - Apply to any .section-card or .qs-card
   ========================================================================== */
.section-card.is-info,
.qs-card.is-info,
.card-border--info { border-color: var(--tg-card-border-info) !important; }

.section-card.is-success,
.qs-card.is-success,
.card-border--success { border-color: var(--tg-card-border-success) !important; }

.section-card.is-warn,
.qs-card.is-warn,
.card-border--warn { border-color: var(--tg-card-border-warn) !important; }

.section-card.is-danger,
.qs-card.is-danger,
.card-border--danger { border-color: var(--tg-card-border-danger) !important; }

/* ============================================================================
   11) EVALUATION ALERTS
   ========================================================================== */
.eval-alert{ border-radius:12px; padding:.9rem 1rem; border:1px solid; }
.eval-ok{ background:#ecfdf5; border-color:#10b981; color:#065f46; }
.eval-fail{ background:#fef2f2; border-color:#ef4444; color:#7f1d1d; }

/* ============================================================================
   12) FORMS (GLOBAL, REUSABLE)
   ========================================================================== */
.tg-form{ display:grid; gap:16px; }

/* Grid rows */
.tg-form .form-grid{ display:grid; gap:16px; }
.tg-form .form-grid.cols-1{ grid-template-columns: 1fr; }
.tg-form .form-grid.cols-2{ grid-template-columns: 1fr; }
.tg-form .form-grid.cols-3{ grid-template-columns: 1fr; }

@media (min-width: 768px){
  .tg-form .form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px){
  .tg-form .form-grid.cols-3{ grid-template-columns: 2fr 1fr 1fr; }
}

.tg-form .field{ display:flex; flex-direction:column; gap:6px; }
.tg-form .form-label{
  font-weight:700; color:var(--tg-blue); font-size:.95rem; letter-spacing:.01em;
}
.tg-form input[type="text"],
.tg-form input[type="tel"],
.tg-form input[type="email"],
.tg-form input[type="number"],
.tg-form select,
.tg-form textarea{
  background:#fff; border:1px solid var(--line-strong); border-radius:10px;
  padding:10px 12px; font-size:1rem; color:var(--tg-text);
  outline:none; transition:border-color .12s ease, box-shadow .12s ease;
}
.tg-form textarea{ min-height:110px; resize:vertical; }

.tg-form input:focus,
.tg-form select:focus,
.tg-form textarea:focus{
  border-color:var(--tg-blue); box-shadow:0 0 0 3px rgba(0,32,88,.12);
}

/* Actions row */
.tg-form .form-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* ============================================================================
   13) UTILITIES / MISC
   ========================================================================== */
.tg-hide{ display:none !important; }
.tg-muted{ color:#64748b; }
.tg-center{ text-align:center; }
.tg-right{ text-align:right; }

.section-card img,
.qs-card img{ max-width:100%; height:auto; border-radius:10px; }

a:focus,
.btn:focus,
.leftnav .nav a:focus,
.qs-card .accent:focus{
  outline:2px solid #93c5fd; outline-offset:2px;
}

/* ============================================================================
   14) PRINT
   ========================================================================== */
@media print{
  .tg-topbar,.tg-hero,.leftnav{ display:none !important; }
  body{ background:#fff; }
  .section-card{ box-shadow:none; border-color:#ddd; margin-bottom:16px; }
}

/* ============================================================================
   15) PAGE-SPECIFIC TWEAKS — JOIN
   - Raise section headers for “How Joining Works” and “Resources”.
   ========================================================================== */
#main-content #how.section-card,
#main-content #resources.section-card {
  padding-top: 0.5rem; /* header sits higher on the card */
}
#main-content #how > h2,
#main-content #resources > h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.15;
}