/* ============================================================
   Trail Safari India — Shared Layout Styles
   Header (topbar + nav) and Footer, used on every page.
   ============================================================ */

:root{
  --tsi-gold:    #C9A84C;
  --tsi-gold-lt: #E2C97E;
  --tsi-hdr:     #1A2A0C;   /* dark green header */
  --tsi-topbar:  #2E3F14;
  --tsi-footer:  #0B1608;
}

/* ── TOPBAR ── */
.tsi-topbar{
  background:var(--tsi-topbar);
  padding:9px 30px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.65);
  flex-wrap:wrap;gap:8px;
}
.tsi-topbar a{color:rgba(255,255,255,.65);text-decoration:none;}
.tsi-topbar a:hover{color:var(--tsi-gold);}
.tsi-topbar .tb-left{display:flex;align-items:center;gap:18px;}
.tsi-topbar .tb-right{display:flex;align-items:center;gap:12px;}
.tsi-topbar .tb-right p{margin:0;}
.wa-btn{
  background:#25d366;color:#fff !important;
  padding:5px 14px;border-radius:20px;font-weight:600;font-size:.75rem;
  display:flex;align-items:center;gap:5px;text-decoration:none !important;
}
.wa-btn:hover{background:#1fb855;}

/* ── HEADER ── */
.tsi-header{
  background:var(--tsi-hdr);
  padding:14px 30px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.tsi-logo img{height:54px;width:auto;display:block;}
.tsi-nav{display:flex;align-items:center;gap:32px;}
.tsi-nav a{
  text-decoration:none;color:rgba(255,255,255,.75);
  font-size:.82rem;font-weight:600;letter-spacing:.5px;
  position:relative;padding-bottom:3px;transition:color .2s;
}
.tsi-nav a::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;background:var(--tsi-gold);transition:width .2s;
}
.tsi-nav a:hover{color:var(--tsi-gold);}
.tsi-nav a:hover::after{width:100%;}
.tsi-nav a.active{color:var(--tsi-gold);}
.tsi-nav a.active::after{width:100%;}

.ham-btn{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.ham-btn span{display:block;width:24px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:all .3s;}
.mob-nav{display:none;background:var(--tsi-hdr);border-top:1px solid rgba(255,255,255,.1);padding:16px 24px;flex-direction:column;gap:14px;}
.mob-nav a{text-decoration:none;color:rgba(255,255,255,.75);font-size:.92rem;font-weight:600;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.mob-nav a:hover{color:var(--tsi-gold);}
.mob-nav.open{display:flex;}

@media(max-width:900px){
  .tsi-nav{display:none;}
  .ham-btn{display:flex;}
  .tsi-topbar .tb-left-mail{display:none;}
}

/* ── RUNNING DISCLAIMER BAR ── */
.tsi-runbar{
  background:#D90002;color:#fff;padding:15px 20px;margin:0;
  border-bottom:3px solid #cc0000;box-shadow:0 2px 8px rgba(0,0,0,0.15);
  font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;box-sizing:border-box;
}
.tsi-runbar .run-text{display:inline-block;animation:tsi-scroll-left 35s linear infinite;padding-left:100%;padding-right:100%;}
@keyframes tsi-scroll-left{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* ── FOOTER ── */
.trail-footer { background: var(--tsi-footer); color: #ccc; font-family: Georgia, serif; padding: 48px 40px 0; margin-top: 60px; }
.trail-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; max-width:1240px;margin:0 auto;}
.trail-footer-logo-area p { font-size: 14px; line-height: 1.7; color: #aaa; margin: 16px 0 0; }
.trail-footer-logo-area strong { color: #fff; }
.trail-logo-box { display: flex; align-items: center; gap: 10px; }
.trail-logo-box img{height:60px;width:auto;}
.trail-footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 8px; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.trail-contact-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: rgba(255,255,255,.5); margin: 10px 0; }
.trail-contact-icon { color: var(--tsi-gold); font-size: 15px; margin-top: 1px; }
.trail-contact-item a { color: rgba(255,255,255,.5); text-decoration: none; }
.trail-contact-item a:hover { color: var(--tsi-gold); }
.trail-footer-col ul { list-style: none; margin: 12px 0 0; padding: 0; }
.trail-footer-col ul li { margin: 10px 0; }
.trail-footer-col ul li a { color: rgba(255,255,255,.5); text-decoration: none; font-size: 14px; transition: color .2s; }
.trail-footer-col ul li a:hover { color: var(--tsi-gold); }
.trail-note-box { margin-top: 20px; padding: 12px 16px; border: 1px solid rgba(201,168,76,.25); border-radius: 10px; background: rgba(201,168,76,.06); font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; }
.trail-note-box strong { color: var(--tsi-gold); }
.trail-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(255,255,255,.3); max-width:1240px;margin:0 auto;}
.trail-footer-bottom a { color: rgba(255, 255, 255, 0.79); text-decoration: none; margin-left: 16px; }
.trail-footer-bottom a:hover { color: var(--tsi-gold); }
.trail-footer-bottom-left { display: flex; flex-direction: column; gap: 4px; }
.trail-reg-info { font-size: 12px; color: rgb(203, 206, 203); letter-spacing: 0.3px; }
.trail-reg-info span { margin-right: 16px; }
@media(max-width:768px){
  .trail-footer-grid { grid-template-columns: 1fr; }
  .trail-footer { padding: 32px 20px 0; }
  .trail-footer-bottom { flex-direction: column; text-align: center; }
  .trail-footer-bottom a { margin: 0 8px; }
  .trail-reg-info { text-align: center; }
  .trail-reg-info span { display: block; margin: 2px 0; }
}