/* BankersClub.in — Sitewide Header, Ticker & Footer
   Loaded via wp_enqueue_scripts on all non-front-page templates.
   front-page.php is self-contained and does not load this file.
*/

/* ── Design tokens ── */
:root {
  --navy:   #0d4f4f;
  --gold:   #0a9e9e;
  --green:  #2D7D5A;
  --coral:  #C94A2C;
  --bc-bg:  #F3F8F8;
  --muted:  #4a6b6b;
  --border: #cce3e3;
}

/* ── Suppress Hestia fixed-navbar body padding ── */
body { padding-top: 0 !important; }

/* ── Collapse Hestia's page-header banner on single posts ── */
.page-header.header-small {
  min-height: 0 !important;
  padding:    0 !important;
  margin:     0 !important;
  overflow:   hidden;
}

/* ── Footer inner container (avoids overriding Bootstrap .container) ── */
.bc-ft-inner {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 24px;
}

/* ════════════════════════════ HEADER ════════════════════════════ */
#site-header {
  position:       sticky;
  top:            0;
  z-index:        100;
  background:     #fff;
  border-bottom:  1px solid var(--border);
  transition:     box-shadow .3s;
}
#site-header.compact { box-shadow: 0 2px 16px rgba(13,79,79,.12); }

.hdr-inner {
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 24px;
  display:    flex;
  align-items: center;
  gap:        24px;
  height:     72px;
  transition: height .3s;
}
#site-header.compact .hdr-inner { height: 56px; }
#site-header.compact .hdr-tag   { display: none; }

.hdr-logo a {
  font-family:     'Playfair Display', serif;
  font-size:       22px;
  color:           var(--navy);
  display:         block;
  line-height:     1.2;
  text-decoration: none;
}
.hdr-tag {
  font-size:  11px;
  color:      var(--muted);
  margin-top: 2px;
  transition: opacity .3s;
}

.hdr-nav {
  flex:            1;
  display:         flex;
  justify-content: center;
  gap:             28px;
  list-style:      none;
  margin:          0;
  padding:         0;
}
.hdr-nav a {
  font-size:       14px;
  font-weight:     500;
  color:           #1a2e2e;
  text-decoration: none;
  transition:      color .2s;
  white-space:     nowrap;
}
.hdr-nav a:hover { color: var(--navy); }
.hdr-nav li { list-style: none; position: relative; }
.hdr-nav li.current-menu-item > a,
.hdr-nav li.current-menu-ancestor > a { color: var(--navy); font-weight: 700; }

/* Dropdown indicator */
.hdr-nav .menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 10px;
  opacity: .55;
}

/* Dropdown panel */
.hdr-nav .sub-menu {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  background:    #fff;
  border:        1px solid var(--border);
  border-radius: 10px;
  box-shadow:    0 8px 28px rgba(13,79,79,.13);
  min-width:     200px;
  padding:       6px 0;
  z-index:       200;
  list-style:    none;
  margin:        0;
}
.hdr-nav li:hover > .sub-menu,
.hdr-nav li:focus-within > .sub-menu { display: block; }
.hdr-nav .sub-menu li { list-style: none; }
.hdr-nav .sub-menu a {
  display:         block;
  padding:         9px 20px;
  font-size:       13px;
  font-weight:     400;
  color:           #1a2e2e;
  white-space:     nowrap;
  text-decoration: none;
  transition:      background .15s, color .15s;
}
.hdr-nav .sub-menu a:hover {
  color:      var(--navy);
  background: var(--bc-bg);
}

.hdr-right {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         12px;
}
.search-pill {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--bc-bg);
  border:        1px solid var(--border);
  border-radius: 20px;
  padding:       7px 14px;
  width:         200px;
}
.search-pill input {
  border:      none;
  background:  transparent;
  font-size:   13px;
  width:       100%;
  outline:     none;
  color:       #1a2e2e;
  font-family: 'Inter', sans-serif;
}
.search-pill input::placeholder { color: var(--muted); }
.search-pill svg { flex-shrink: 0; color: var(--muted); }

.btn-nl {
  background:      var(--gold);
  color:           #fff;
  font-size:       13px;
  font-weight:     600;
  padding:         8px 18px;
  border-radius:   20px;
  border:          none;
  white-space:     nowrap;
  transition:      background .2s;
  text-decoration: none;
  display:         inline-block;
  cursor:          pointer;
}
.btn-nl:hover { background: #088a8a; color: #fff; }

.hamburger {
  display:     none;
  flex-direction: column;
  gap:         5px;
  background:  none;
  border:      none;
  padding:     6px;
  margin-left: auto;
  cursor:      pointer;
}
.hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--navy);
  border-radius: 2px;
  transition:    all .3s;
}

/* ── Mobile menu overlay ── */
.mob-menu {
  display:    none;
  position:   fixed;
  inset:      0;
  background: #fff;
  z-index:    200;
  flex-direction: column;
  padding:    24px;
  overflow-y: auto;
}
.mob-menu.open { display: flex; }

.mob-menu-top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   40px;
}
.mob-close {
  background: none;
  border:     none;
  font-size:  28px;
  color:      var(--muted);
  line-height: 1;
  cursor:     pointer;
}
.mob-nav-list { list-style: none; margin: 0; padding: 0; }
.mob-nav-list li { list-style: none; }
.mob-nav a,
.mob-nav-list a {
  font-family:     'Playfair Display', serif;
  font-size:       22px;
  color:           var(--navy);
  padding:         14px 0;
  border-bottom:   1px solid var(--border);
  display:         block;
  text-decoration: none;
}
.mob-nl { margin-top: 32px; }

/* ── Mobile bottom bar ── */
.bot-bar {
  display:        none;
  position:       fixed;
  bottom:         0;
  left:           0;
  right:          0;
  background:     #fff;
  border-top:     1px solid var(--border);
  z-index:        90;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bot-nav {
  display:         flex;
  justify-content: space-around;
  padding:         8px 0;
  list-style:      none;
  margin:          0;
}
.btab {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  padding:        4px 12px;
  color:          var(--muted);
  font-size:      10px;
  font-weight:    500;
  font-family:    'Inter', sans-serif;
  background:     none;
  border:         none;
  text-decoration: none;
  transition:     color .2s;
  cursor:         pointer;
}
.btab.active { color: var(--navy); }
.btab svg { width: 20px; height: 20px; }

/* ════════════════════════════ TICKER ════════════════════════════ */
.bc-ticker {
  background:   var(--navy);
  height:       40px;
  display:      flex;
  align-items:  center;
  overflow:     hidden;
}
.ticker-badge {
  background:    var(--gold);
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  padding:       3px 12px;
  border-radius: 20px;
  white-space:   nowrap;
  flex-shrink:   0;
  margin:        0 0 0 16px;
}
.ticker-track {
  flex:        1;
  overflow:    hidden;
  mask-image:  linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.ticker-list {
  display:   flex;
  animation: bcTickMove 55s linear infinite;
  white-space: nowrap;
}
.ticker-list:hover { animation-play-state: paused; }
.ticker-item {
  font-size:   14px;
  color:       #fff;
  padding:     0 28px;
  flex-shrink: 0;
}
.ticker-dot { color: var(--gold); margin: 0 4px; }
@keyframes bcTickMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════ FOOTER ════════════════════════════ */
#bc-footer {
  background: #062828;
  padding:    48px 0 0;
}
.f-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  padding-bottom:  32px;
  border-bottom:   1px solid rgba(255,255,255,.08);
  margin-bottom:   40px;
  flex-wrap:       wrap;
  gap:             24px;
}
.f-logo {
  font-family:     'Playfair Display', serif;
  font-size:       22px;
  color:           #fff;
  margin-bottom:   4px;
  display:         block;
  text-decoration: none;
}
.f-tag {
  font-size:     12px;
  color:         rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.f-socials { display: flex; gap: 10px; }
.f-si {
  width:          36px;
  height:         36px;
  border-radius:  50%;
  background:     rgba(255,255,255,.1);
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
  transition:     background .2s;
  text-decoration: none;
}
.f-si:hover { background: var(--gold); }
.f-si svg { width: 18px; height: 18px; }

.f-cols {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   32px;
  margin-bottom:         40px;
}
#bc-footer .f-col h4 {
  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          rgba(255,255,255,.9);
  margin-bottom:  16px;
  font-family:    'Inter', sans-serif;
}
#bc-footer .f-col ul {
  list-style: none;
  padding:    0;
  margin:     0;
}
#bc-footer .f-col li a {
  font-size:       13px;
  color:           rgba(255,255,255,.55);
  transition:      color .2s;
  display:         block;
  padding:         2px 0;
  text-decoration: none;
}
#bc-footer .f-col li a:hover { color: #a8f0f0; }

.f-bar {
  border-top:      1px solid rgba(255,255,255,.08);
  padding:         20px 0;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             12px;
}
.fb-l { font-size: 12px; color: rgba(255,255,255,.35); }
.fb-r { display: flex; gap: 16px; }
.fb-r a {
  font-size:       12px;
  color:           rgba(255,255,255,.4);
  transition:      color .2s;
  text-decoration: none;
}
.fb-r a:hover { color: rgba(255,255,255,.8); }

/* ════════════════════════════ RESPONSIVE ════════════════════════════ */
@media (max-width: 1024px) {
  .f-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .hdr-nav, .hdr-right { display: none; }
  .hamburger  { display: flex; }
  .bot-bar    { display: block; }
  body        { padding-bottom: 60px; }
  .f-top      { flex-direction: column; }
  .f-cols     { grid-template-columns: repeat(2, 1fr); }
  .f-bar      { flex-direction: column; text-align: center; }
  .fb-r       { justify-content: center; }
}
@media (max-width: 480px) {
  .f-cols { grid-template-columns: 1fr; }
}
/* Breadcrumbs */
.bc-breadcrumb { padding: 8px 0 4px; font-size: 13px; color: #666; }
.bc-breadcrumb .rank-math-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bc-breadcrumb .rank-math-breadcrumb a { color: #065f5f; text-decoration: none; }
.bc-breadcrumb .rank-math-breadcrumb a:hover { text-decoration: underline; }
.bc-breadcrumb .rank-math-breadcrumb .separator { color: #aaa; margin: 0 2px; }

@media print {
  #site-header { position: static !important; }
  .bc-ticker, .bot-bar, .mob-menu { display: none !important; }
}