/* Texas Toy Lab — shared site chrome (header + footer)
   Owned by tools/site-chrome.py. Every class is prefixed ttl- so it never
   collides with a page's inline styles. Brand tokens: brand-book.html. */

.ttl-header,.ttl-foot,.ttl-menu,.ttl-burger{
  --ttl-ink:#2b2344;--ttl-cream:#fff6e9;--ttl-coral:#ff5d5d;--ttl-yellow:#ffc933;
  --ttl-teal:#2bc6b0;--ttl-blue:#5ec8f2;--ttl-green:#7ed957;--ttl-pink:#ff8fd8;--ttl-purple:#8b5cf6;
  --ttl-display:'Lilita One',system-ui,sans-serif;
  --ttl-body:'Nunito',system-ui,sans-serif;
  --ttl-mono:'Space Mono',ui-monospace,Menlo,monospace;
  box-sizing:border-box;font-family:var(--ttl-body);font-size:16px;line-height:1.4;font-weight:800;
  color:var(--ttl-ink);text-align:left;letter-spacing:0;
}
.ttl-header *,.ttl-foot *,.ttl-menu *{box-sizing:border-box}
.ttl-header a,.ttl-foot a,.ttl-menu a{color:inherit;text-decoration:none}
.ttl-header svg,.ttl-foot svg,.ttl-menu svg{display:block;max-width:100%}
.ttl-header ul,.ttl-foot ul{list-style:none;margin:0;padding:0}
.ttl-header a,.ttl-foot a,.ttl-menu a{margin:0}
.ttl-foot p{margin:0;font-size:inherit;line-height:inherit}
.ttl-foot li{margin:0;padding:0;list-style:none;font-size:inherit;line-height:inherit}
.ttl-foot li::before,.ttl-foot li::after{content:none}
/* pages style their old <footer> with element selectors (opacity, letter-spacing...) */
.ttl-header,.ttl-foot{opacity:1;visibility:visible;text-transform:none;transform:none}

/* Full-bleed even when <body> has padding/margin: chrome.js measures the
   html/body box and sets --ttl-bleed-*. With no JS the chrome simply sits
   inside the page's padding. */
.ttl-header,.ttl-foot{
  width:calc(100% + var(--ttl-bleed-l,0px) + var(--ttl-bleed-r,0px));
  margin-left:calc(-1 * var(--ttl-bleed-l,0px));
  margin-right:calc(-1 * var(--ttl-bleed-r,0px));
  flex:none;justify-self:stretch;
}
.ttl-header{margin-top:calc(-1 * var(--ttl-bleed-t,0px));margin-bottom:0;align-self:start}
.ttl-foot{margin-top:56px;margin-bottom:calc(-1 * var(--ttl-bleed-b,0px));align-self:end}
:where([id]){scroll-margin-top:76px}

/* ---------- header ---------- */
.ttl-header{
  position:sticky;top:0;z-index:50;
  background:var(--ttl-cream);border-bottom:3px solid var(--ttl-ink);
}
.ttl-nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1120px;margin:0 auto;padding:9px 24px;min-height:64px;
}
.ttl-logo{display:flex;align-items:center;gap:9px;flex:none;border-radius:8px}
.ttl-logo-bot{display:grid;place-items:center;flex:none}
.ttl-logo-bot svg{width:36px;height:39px}
.ttl-logo-text{font-family:var(--ttl-display);font-size:1.15rem;line-height:1;white-space:nowrap}
.ttl-logo-text small{display:block;font-family:var(--ttl-mono);font-weight:700;font-size:.55rem;letter-spacing:.1em;color:#d63232;margin-top:2px}
.ttl-cursor{animation:ttl-blink 1.2s steps(1) infinite}
@keyframes ttl-blink{50%{opacity:0}}
.ttl-rainbow i{font-style:normal}
.ttl-rainbow i:nth-child(6n+1){color:#E8791E}
.ttl-rainbow i:nth-child(6n+2){color:#D99E06}
.ttl-rainbow i:nth-child(6n+3){color:#1FA08A}
.ttl-rainbow i:nth-child(6n+4){color:#E04848}
.ttl-rainbow i:nth-child(6n+5){color:#4E82E0}
.ttl-rainbow i:nth-child(6n){color:#5FAE3C}

.ttl-links{display:flex;align-items:center;gap:22px;font-size:.98rem;margin-left:auto}
.ttl-links a{position:relative;white-space:nowrap;padding:4px 0;border-radius:4px}
.ttl-links a:hover{color:var(--ttl-coral)}
.ttl-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;border-radius:2px;background:var(--ttl-yellow);
}
.ttl-actions{display:flex;align-items:center;gap:12px;flex:none}

.ttl-cart,.ttl-burger{
  position:relative;width:42px;height:42px;flex:none;border-radius:999px;display:grid;place-items:center;
  background:#fff;color:var(--ttl-ink);border:3px solid var(--ttl-ink);box-shadow:3px 3px 0 var(--ttl-ink);
  cursor:pointer;padding:0;margin:0;font:inherit;transition:transform .12s ease,box-shadow .12s ease;
}
.ttl-cart:hover,.ttl-burger:hover{transform:translateY(-2px)}
.ttl-cart:active,.ttl-burger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ttl-ink)}
.ttl-cart svg{width:20px;height:20px}

.ttl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ttl-display);font-weight:400;font-size:1rem;letter-spacing:.02em;line-height:1;
  padding:.75em 1.35em;border-radius:999px;border:3px solid var(--ttl-ink);box-shadow:4px 4px 0 var(--ttl-ink);
  background:#fff;color:var(--ttl-ink);white-space:nowrap;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.ttl-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ttl-ink)}
.ttl-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ttl-ink)}
.ttl-btn-coral{background:var(--ttl-coral)}

/* hamburger: three bars that fold into an X */
.ttl-burger{display:none;background:var(--ttl-yellow)}
.ttl-burger span{
  position:absolute;left:11px;width:17px;height:3px;border-radius:2px;background:var(--ttl-ink);
  transition:transform .18s ease,opacity .18s ease,top .18s ease;
}
.ttl-burger span:nth-child(1){top:12px}
.ttl-burger span:nth-child(2){top:18px}
.ttl-burger span:nth-child(3){top:24px}
.ttl-burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.ttl-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.ttl-burger[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* phone menu (full width, drops out of the sticky header) */
.ttl-menu{
  display:none;border-top:3px solid var(--ttl-ink);background:var(--ttl-cream);
  max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;
  padding:8px 24px 22px;
}
.ttl-menu[hidden]{display:none}
.ttl-menu a:not(.ttl-btn){
  display:flex;align-items:center;gap:14px;padding:13px 4px;
  font-family:var(--ttl-display);font-weight:400;font-size:1.35rem;letter-spacing:.01em;
  border-bottom:2px dashed rgba(43,35,68,.22);
}
.ttl-menu a:not(.ttl-btn)::before{
  content:"";width:12px;height:12px;flex:none;border-radius:50%;border:2.5px solid var(--ttl-ink);
  background:var(--ttl-dot,var(--ttl-yellow));box-shadow:2px 2px 0 var(--ttl-ink);
}
.ttl-menu a:nth-child(6n+1){--ttl-dot:var(--ttl-coral)}
.ttl-menu a:nth-child(6n+2){--ttl-dot:var(--ttl-yellow)}
.ttl-menu a:nth-child(6n+3){--ttl-dot:var(--ttl-teal)}
.ttl-menu a:nth-child(6n+4){--ttl-dot:var(--ttl-blue)}
.ttl-menu a:nth-child(6n+5){--ttl-dot:var(--ttl-green)}
.ttl-menu a:nth-child(6n){--ttl-dot:var(--ttl-pink)}
.ttl-menu a:not(.ttl-btn):hover{color:var(--ttl-coral)}
.ttl-menu .ttl-btn{margin-top:18px;width:100%;font-size:1.15rem;padding:.85em 1.4em}

@media (max-width:760px){
  .ttl-links{display:none}
  .ttl-burger{display:grid}
  .ttl-menu:not([hidden]){display:block}
  .ttl-nav{gap:10px;padding:9px 16px}
  .ttl-actions{gap:10px}
  /* index.html's hero header shares the burger + menu */
  header > .nav{gap:10px;padding:12px 16px}
  header > .nav .nav-links{gap:12px}
}
@media (max-width:399px){
  .ttl-logo-text,header > .nav .logo-text{display:none}
  .ttl-btn{padding:.75em 1.05em}
}

/* ---------- footer ---------- */
.ttl-foot{
  background:#1b1530;color:var(--ttl-cream);padding:0 0 36px;
  border-top:3px solid var(--ttl-ink);
  font-weight:700;
}
.ttl-foot-wrap{max-width:1120px;margin:0 auto;padding:44px 24px 0}
.ttl-foot-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.25fr;gap:34px 28px}
.ttl-foot .ttl-foot-brand p{font-size:.9rem;opacity:.8;margin:12px 0 18px;max-width:28em;line-height:1.55}
.ttl-foot-logo{display:inline-flex;align-items:center;gap:10px;border-radius:8px}
.ttl-foot-logo svg{width:44px;height:48px}
.ttl-foot-logo .ttl-logo-text{font-size:1.5rem}
.ttl-foot-logo .ttl-logo-text small{color:var(--ttl-yellow)}
.ttl-foot .ttl-rainbow i:nth-child(6n+1){color:#FF9C4A}
.ttl-foot .ttl-rainbow i:nth-child(6n+2){color:#FFC933}
.ttl-foot .ttl-rainbow i:nth-child(6n+3){color:#2BC6B0}
.ttl-foot .ttl-rainbow i:nth-child(6n+4){color:#FF7A7A}
.ttl-foot .ttl-rainbow i:nth-child(6n+5){color:#7FB2E0}
.ttl-foot .ttl-rainbow i:nth-child(6n){color:#8FE06A}
.ttl-foot .ttl-btn{box-shadow:4px 4px 0 #0e0a1c;border-color:var(--ttl-ink)}
.ttl-foot .ttl-btn:hover{box-shadow:6px 6px 0 #0e0a1c}

.ttl-foot-col b{
  display:block;font-family:var(--ttl-display);font-weight:400;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ttl-yellow);margin-bottom:12px;
}
.ttl-foot-col li{margin:0 0 9px;break-inside:avoid}
.ttl-foot-col a{font-size:.92rem;opacity:.85;border-radius:3px}
.ttl-foot-col a:hover{opacity:1;color:var(--ttl-yellow)}
.ttl-foot-col--lab ul{columns:2;column-gap:22px}

.ttl-foot-legal{
  margin-top:36px;padding-top:22px;border-top:2px solid rgba(255,246,233,.14);
  text-align:center;font-size:.82rem;line-height:1.8;opacity:.85;
}
.ttl-foot-legal a{color:inherit;border-radius:3px}
.ttl-foot-legal a:hover{color:var(--ttl-yellow)}
.ttl-foot .ttl-foot-social{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin:12px 0 4px}
.ttl-foot-social .ttl-handle{font-family:var(--ttl-mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;color:var(--ttl-yellow);margin-right:4px}
.ttl-foot-social a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--ttl-cream);color:var(--ttl-ink);border:3px solid var(--ttl-cream);
  transition:transform .12s ease,background .12s ease;
}
.ttl-foot-social a:hover{transform:translateY(-3px) rotate(-4deg);background:var(--ttl-yellow)}
.ttl-foot-social svg{width:19px;height:19px;fill:currentColor}
.ttl-foot .ttl-foot-fine{font-size:.74rem;opacity:.65;margin-top:8px}
.ttl-foot .calm-btn{font:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer;text-decoration:underline;padding:0}
.ttl-foot .foot-sub{margin-bottom:34px}

@media (max-width:900px){
  .ttl-foot-grid{grid-template-columns:1fr 1fr 1fr}
  .ttl-foot-brand{grid-column:1 / -1}
  .ttl-foot-col--lab ul{columns:1}
}
@media (max-width:560px){
  .ttl-foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .ttl-foot-col--lab{grid-column:1 / -1}
  .ttl-foot-col--lab ul{columns:2}
  .ttl-foot-wrap{padding:36px 18px 0}
}

/* ---------- focus + motion ---------- */
.ttl-header a:focus-visible,.ttl-menu a:focus-visible,.ttl-burger:focus-visible,.ttl-cart:focus-visible{
  outline:3px dashed var(--ttl-ink);outline-offset:3px;
}
.ttl-foot a:focus-visible,.ttl-foot button:focus-visible{outline:3px dashed var(--ttl-yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ttl-cursor{animation:none}
  .ttl-header *,.ttl-foot *,.ttl-menu *{transition:none!important}
  .ttl-btn:hover,.ttl-cart:hover,.ttl-burger:hover,.ttl-foot-social a:hover{transform:none}
}
