/* ============================================================
   Tip Consult GH — Website template demos (shared skeleton)
   Each template page sets its own palette/typography inline;
   this file only provides the demo bar + a neutral baseline.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    line-height: 1.6;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 52px; /* room for the fixed demo bar at the bottom */
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ---- Tip Consult demo ribbon (fixed at the BOTTOM so it never covers the template's header) ---- */
.tc-demo-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #0b2545;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 16px;
    text-align: center;
    box-shadow: 0 -2px 16px rgba(0,0,0,.25);
}
.tc-demo-bar strong { font-weight: 700; }
.tc-demo-bar .tc-demo-label { opacity: .9; }
.tc-demo-bar a {
    color: #0b2545;
    background: #f5b301;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    white-space: nowrap;
    transition: transform .15s ease, background .15s ease;
}
.tc-demo-bar a:hover { background: #ffc733; transform: translateY(-1px); }
.tc-demo-bar a.tc-demo-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,.5);
}
.tc-demo-bar a.tc-demo-ghost:hover { background: rgba(255,255,255,.12); }

/* ---- Placeholder image slot (no external images in demos) ---- */
.t-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: .02em;
    text-align: center;
    position: relative;
}
.t-ph i { font-size: 2.2rem; opacity: .9; }
.t-ph .t-ph-cap {
    position: absolute;
    bottom: 10px;
    font-size: 11px;
    opacity: .7;
}

/* ---- Shared helpers ---- */
.t-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.t-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 640px) {
    .tc-demo-bar { font-size: 12.5px; gap: 8px; }
    .tc-demo-bar .tc-demo-label { display: none; }
}