/* ============================================================================
   TSC Chrome - v1.0 - October 2026
   Site header + footer for internal / course / registration pages.
   ----------------------------------------------------------------------------
   Ported from site.css ("Yellow Line", NJ). Same colours, type and sizes as the
   marketing header and footer, rebuilt so it can sit on the legacy course pages
   without touching them and without being touched by them.

   ISOLATION RULES (why this sheet looks the way it does)
   1. Every selector starts with .tsc-chrome. Nothing here styles a bare
      element, an id, or a class the legacy sheets use (#nav, #content, #main,
      .row, .price, .content, .left, .right, .clear, .wrap, .nav, .foot, .btn).
      Loading this sheet cannot change a single course or registration page.
   2. Custom properties are --tscc-*, not site.css's --structure/--action, so
      this sheet and site.css can load on the same page without either one
      repainting the other.
   3. The legacy sheets set globals that would leak in: style.css
      (*{margin:0;padding:0}, body 12px Arial #444, a{color}, img{margin:10px 0},
      p{margin-bottom:20px}), chapters.css ("#chapter_tag ol, ul" - the bare ul
      gets margin-left:20px everywhere; #content_container text-align:center).
      The reset block below neutralises each of those inside the chrome only.
      .tsc-chrome x (0,1,1) outranks every bare-element rule they set.
   4. Keep the header and footer OUTSIDE #course_content. chapters.css uses
      !important on links, p and headings inside it, and !important beats any
      specificity this sheet could use.
   ========================================================================= */

.tsc-chrome{
  --tscc-structure:#343E4A;
  --tscc-action:#FFC629;   --tscc-action-dk:#E8AF12;  --tscc-action-ink:#1F242A;
  --tscc-paper:#F6F7F8;    --tscc-card:#FFFFFF;
  --tscc-ink:#232A32;      --tscc-muted:#5A626B;      --tscc-line:#E3E6E9;
  --tscc-wrap:1120px;      --tscc-r-sm:10px;
  --tscc-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --tscc-display:"Overpass","Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  display:block;position:relative;width:100%;margin:0;padding:0;
  font-family:var(--tscc-sans);font-size:16px;line-height:1.5;font-weight:400;
  color:var(--tscc-ink);text-align:left;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

/* ---- reset: only what the legacy sheets actually push in ---------------- */
.tsc-chrome *,.tsc-chrome *::before,.tsc-chrome *::after{box-sizing:border-box}
.tsc-chrome ul,.tsc-chrome ol{margin:0;padding:0;list-style:none}
.tsc-chrome li{margin:0;padding:0}
.tsc-chrome p{margin:0;padding:0}
.tsc-chrome img,.tsc-chrome svg{display:block;margin:0;padding:0;border:0;max-width:100%}
.tsc-chrome a{color:inherit;text-decoration:none;border:0}
.tsc-chrome a:hover{color:inherit}

.tsc-chrome .tsc-wrap{max-width:var(--tscc-wrap);margin:0 auto;padding:0 26px}

/* skip link, as on the home page */
.tsc-chrome .tsc-skip{position:absolute;left:-9999px;top:auto}
.tsc-chrome .tsc-skip:focus{left:12px;top:12px;z-index:99;background:var(--tscc-action);
  color:var(--tscc-action-ink);font-family:var(--tscc-display);font-weight:800;
  padding:15px 20px;border-radius:var(--tscc-r-sm)}

.tsc-chrome :focus-visible{outline:3px solid var(--tscc-structure);outline-offset:3px;border-radius:3px}
.tsc-chrome.tsc-foot :focus-visible{outline-color:var(--tscc-action)}

/* ---- header -------------------------------------------------------------- */
.tsc-chrome.tsc-nav{z-index:5;background:var(--tscc-card);border-bottom:1px solid var(--tscc-line)}
.tsc-chrome.tsc-nav .tsc-wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:66px;padding-top:10px;padding-bottom:10px}

.tsc-chrome .tsc-brand{display:flex;align-items:center;gap:12px;color:var(--tscc-ink);min-width:0}
.tsc-chrome .tsc-brand-mark{width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden;
  background:var(--tscc-structure);box-shadow:0 2px 6px rgba(38,46,56,.28);
  transition:transform .16s ease}
.tsc-chrome .tsc-brand-mark svg{width:100%;height:100%}
.tsc-chrome .tsc-brand:hover .tsc-brand-mark{transform:translateY(-1px) rotate(-3deg)}
.tsc-chrome .tsc-brand-type{display:flex;flex-direction:column;gap:2px;line-height:1;min-width:0}
.tsc-chrome .tsc-brand-name{font-family:var(--tscc-display);font-weight:800;font-size:18px;
  letter-spacing:-.024em;white-space:nowrap;color:var(--tscc-ink)}
.tsc-chrome .tsc-brand-sub{font-family:var(--tscc-sans);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tscc-muted)}
.tsc-chrome .tsc-brand-sub i{font-style:normal;color:var(--tscc-action-dk);padding:0 2px}

.tsc-chrome .tsc-navlinks{display:flex;align-items:center;gap:26px;
  font-size:14.5px;font-weight:600;color:var(--tscc-muted)}
.tsc-chrome .tsc-navlinks a{padding:8px 0}
.tsc-chrome .tsc-navlinks a:hover{color:var(--tscc-structure)}
/* the pill; nowrap so it never breaks to "Log / in" on a phone */
.tsc-chrome .tsc-navlinks .tsc-login{color:var(--tscc-structure);
  box-shadow:inset 0 0 0 2px var(--tscc-line);padding:11px 16px;
  border-radius:var(--tscc-r-sm);white-space:nowrap}
.tsc-chrome .tsc-navlinks .tsc-login:hover{box-shadow:inset 0 0 0 2px var(--tscc-structure)}

/* ---- footer -------------------------------------------------------------- */
.tsc-chrome.tsc-foot{clear:both;background:var(--tscc-structure);
  color:rgba(246,247,248,.82);padding:34px 0 30px;font-size:14px}
/* the painted centre line */
.tsc-chrome.tsc-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;
  background:repeating-linear-gradient(90deg,var(--tscc-action) 0 52px,transparent 52px 104px)}
.tsc-chrome.tsc-foot .tsc-wrap{display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap}
.tsc-chrome.tsc-foot a{color:var(--tscc-paper)}
.tsc-chrome.tsc-foot a:hover{color:var(--tscc-action)}
.tsc-chrome .tsc-foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
/* every footer link is a tap target: 44px tall without moving the row */
.tsc-chrome .tsc-foot-links a{display:inline-block;padding:12px 0;line-height:20px}
.tsc-chrome.tsc-foot a[href^="tel:"],.tsc-chrome.tsc-foot a[href^="mailto:"]{overflow-wrap:anywhere}

/* ---- responsive (same breakpoints as site.css) --------------------------- */
@media (max-width:900px){
  .tsc-chrome .tsc-navlinks a:not(.tsc-login){display:none}
  .tsc-chrome .tsc-brand-name{font-size:14.5px;white-space:normal;line-height:1.15}
  .tsc-chrome .tsc-brand-sub{font-size:9px;letter-spacing:.16em}
  .tsc-chrome .tsc-brand-mark{width:32px;height:32px}
}
@media (max-width:560px){
  .tsc-chrome .tsc-wrap{padding:0 18px}
  .tsc-chrome.tsc-foot .tsc-wrap{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .tsc-chrome *{transition:none!important;animation:none!important}
}
@media (max-width:400px){
  /* keep "MVC-approved" from breaking at its hyphen on small phones */
  .tsc-chrome .tsc-brand-sub{white-space:nowrap;letter-spacing:.1em}
}