/* ToolsToHelp.Me shared header and footer (see /assets/shell.js).
   Every rule is scoped under .tthm-shell so it cannot leak into an app, and
   every property the apps' CSS resets (Tailwind preflight) is set explicitly. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,700;9..40,800&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

#tthm-shell-header { position: sticky; top: 0; z-index: 1000; }
#tthm-shell-header:empty { min-height: 72px; background: #fff; border-bottom: 1px solid rgba(15,35,65,.08); }

.tthm-shell, .tthm-shell * { box-sizing: border-box; }
.tthm-shell { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
.tthm-shell a { text-decoration: none; }
.tthm-shell img { display: block; max-width: none; }

/* ─── HEADER ─── */
.tthm-header { background: rgba(255,255,255,.97); border-bottom: 1px solid #e3e9ed; }
.tthm-bar { max-width: 1380px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tthm-brand { display: flex; align-items: center; gap: 10px; color: #102942; flex: 0 0 auto; }
.tthm-brand img { width: 40px; height: 40px; object-fit: contain; }
.tthm-wordmark { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 1.48rem; letter-spacing: -.035em; color: #102942; white-space: nowrap; }
.tthm-to { color: #2577A4; }
.tthm-me { color: #E97839; }
.tthm-links { display: flex; align-items: center; gap: 26px; }
.tthm-links > a { font-size: .9rem; font-weight: 500; color: #5A6578; transition: color .2s; }
.tthm-links > a:hover { color: #0F2341; }

.tthm-tools { position: relative; }
.tthm-tools-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 .9rem/1 'Plus Jakarta Sans', system-ui, sans-serif;
  color: #102942; background: #f5f8fa; border: 1px solid #dce7ec; border-radius: 9px; padding: 10px 14px; cursor: pointer; }
.tthm-tools-btn:hover { border-color: #0F2341; }
.tthm-tools-btn:focus-visible, .tthm-shell a:focus-visible, .tthm-burger:focus-visible { outline: 2px solid #E8862A; outline-offset: 2px; }
.tthm-caret { font-size: .7rem; }
.tthm-tools-menu { position: absolute; top: calc(100% + 10px); left: 0; width: 320px; background: #fff; border: 1px solid #E8ECF2;
  border-radius: 14px; box-shadow: 0 20px 50px rgba(15,35,65,.16); padding: 8px; z-index: 1001; }
.tthm-tools-menu[hidden] { display: none; }
.tthm-tool { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: #1A1F2E; }
.tthm-tool:hover, .tthm-tool[aria-current="page"] { background: #F4F6FA; }
.tthm-tool img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }
.tthm-tool strong { display: block; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .95rem; color: #0F2341; }
.tthm-tool small { display: block; font-size: .8rem; color: #5A6578; }
.tthm-t-qr[aria-current="page"] strong { color: #315e9b; }
.tthm-t-invoice[aria-current="page"] strong { color: #19857b; }
.tthm-t-pdf[aria-current="page"] strong { color: #2577a4; }
.tthm-t-credit[aria-current="page"] strong { color: #19857b; }
.tthm-all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid #E8ECF2; font-size: .85rem; font-weight: 600; color: #2E86C1; }

.tthm-burger { display: none; width: 40px; height: 40px; position: relative; background: none; border: 0; cursor: pointer; padding: 0; }
.tthm-burger span { position: absolute; left: 9px; width: 22px; height: 2px; background: #0F2341; }
.tthm-burger span:nth-child(1) { top: 13px; }
.tthm-burger span:nth-child(2) { top: 19px; }
.tthm-burger span:nth-child(3) { top: 25px; }
.tthm-mobile { border-top: 1px solid #E8ECF2; background: #fff; padding: 8px 24px 16px; display: flex; flex-direction: column; }
.tthm-mobile[hidden] { display: none; }
.tthm-mobile > a { padding: 12px 0; border-bottom: 1px solid #F4F6FA; font-size: 1rem; font-weight: 500; color: #1A1F2E; }
.tthm-mobile > a[aria-current="page"] { color: #2E86C1; font-weight: 700; }

/* ─── FOOTER ─── */
.tthm-footer { background: #102942; color: rgba(255,255,255,.72); padding: 56px 0 28px; }
.tthm-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px 36px; display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr 1fr; gap: 32px; }
.tthm-footer .tthm-brand { margin-bottom: 14px; }
.tthm-footer .tthm-brand img { width: 42px; height: 42px; }
.tthm-footer .tthm-wordmark { color: #fff; }
.tthm-footer-brand p { font-size: .88rem; line-height: 1.6; max-width: 280px; margin: 0; color: rgba(255,255,255,.68); }
.tthm-col h4 { font-family: 'DM Sans', sans-serif; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85);
  margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em; }
.tthm-col a { display: block; font-size: .88rem; color: rgba(255,255,255,.68); padding: 5px 0; transition: color .2s; }
.tthm-col a:hover { color: #fff; }
.tthm-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 22px 24px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; }

@media (max-width: 900px) {
  .tthm-links { display: none; }
  .tthm-burger { display: block; }
  .tthm-footer-inner { grid-template-columns: 1fr 1fr; }
  .tthm-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .tthm-wordmark { font-size: 1.2rem; }
  .tthm-bar { padding: 0 16px; }
}
@media print { #tthm-shell-header, #tthm-shell-footer { display: none; } }