@charset "UTF-8";
/* ===========================================================================
   CryptoInvestIndia — SHARED editorial header / footer / nav chrome.
   Loaded on EVERY page (homepage + all legacy/Hindi pages) so the header,
   navigation, language switcher, burger menu and footer are identical
   site-wide. Targets the legacy .header / .footer markup. Self-contained:
   hard-coded editorial colours (no CSS vars) so it works with or without
   main.css. Burger / mobile menu / sticky CTA are built by editorial-nav.js.
   =========================================================================== */

/* ---------- Header (scoped to the <header> element so the footer's
   `.footer.header` div is NOT affected) ---------- */
header.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:none !important;border-bottom:1px solid #c2c6d6 !important;border-radius:0 !important;
  display:flex;align-items:center;gap:22px;
  min-height:68px;
  padding:10px max(24px, calc((100% - 1180px) / 2)) !important;
}
.header__logo-container{
  width:auto !important;height:auto !important;
  background:none !important;border:none !important;border-radius:0 !important;
}
.header__logo{width:40px !important;height:40px !important}
header.header > a{width:fit-content}

.header__navigation{display:flex;flex-direction:row;gap:20px;align-items:center;margin-left:6px}
.header__navigation a,.dropdown-toggle{
  font-family:'Public Sans',sans-serif;font-size:15px;font-weight:500;color:#121c2a;padding:0;
}
.header__navigation a:hover,.dropdown-toggle:hover{color:#0058be}
.dropdown{position:relative}
.dropdown-toggle{padding:6px 0}
.dropdown-menu{
  position:absolute;top:130%;left:0;min-width:300px;background:#fff;
  border:1px solid #c2c6d6;border-radius:8px;box-shadow:0 8px 28px rgba(18,28,42,.12);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;z-index:60;
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{
  display:block;padding:9px 12px;border-radius:4px;border:none !important;
  font-size:14px;font-weight:500;color:#121c2a;white-space:normal;
}
.dropdown-menu a:hover{background:#eff4ff;color:#0058be}

/* language switcher -> editorial blue (kills legacy teal) */
.header .lang-switcher{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;margin-left:auto}
.header .lang-switcher span{display:none}            /* hide the "|" separator */
.header .lang-switcher a{
  color:#424754 !important;background:none !important;
  padding:3px 8px;border-radius:4px;min-width:auto;text-decoration:none;
}
.header .lang-switcher a:hover,.header .lang-switcher a.active{background:#0058be !important;color:#fff !important}

/* Buy Crypto button */
.header__button,.header__button.btn{
  background:#fd761a !important;color:#1b0f0a !important;border-radius:4px !important;
  padding:11px 22px !important;font-family:'Public Sans',sans-serif;font-weight:600;
  font-size:14px;text-transform:uppercase;letter-spacing:.05em;border:none;cursor:pointer;
  white-space:nowrap;line-height:1.1;
}
.header__button:hover{background:#e8650d !important}

/* ---------- Burger + mobile menu (built by editorial-nav.js) ---------- */
.burger{display:none;background:none !important;border:1px solid #c2c6d6 !important;border-radius:4px !important;cursor:pointer;padding:8px 9px !important;color:#121c2a !important;line-height:0}
.burger svg{display:block}
.mobile-menu{display:none;position:fixed;inset:68px 0 0 0;background:#fff;z-index:55;padding:18px 24px;overflow-y:auto;flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu a{color:#121c2a;font-size:17px;font-weight:600;padding:13px 6px;border-bottom:1px solid #e6eeff;text-decoration:none;display:block;width:auto}
.mobile-menu a.sub{font-size:14.5px;font-weight:500;color:#424754;padding-left:18px}
.mobile-menu .mm-lang{display:flex;gap:10px;padding:16px 6px 6px}
.mobile-menu .mm-lang a{border:1px solid #c2c6d6;border-radius:4px;padding:8px 16px}
.mobile-menu .mm-lang a.active{background:#0058be;color:#fff;border-color:#0058be}

/* sticky mobile CTA (built by editorial-nav.js) */
.mcta{display:none}

/* ---------- Footer ---------- */
.footer{
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:16px 28px;
  margin-top:40px !important;border:none !important;border-top:1px solid #c2c6d6 !important;border-radius:0 !important;
  padding:28px max(24px, calc((100% - 1180px) / 2)) !important;background:#fff !important;
}
.footer .header__logo-container{width:auto !important;height:auto !important;background:none !important;border:none !important}
.footer .header__logo{width:40px !important;height:40px !important}
.footer nav{display:flex;flex-direction:row !important;flex-wrap:wrap;gap:14px 24px !important;margin-left:auto;font-size:14px}
.footer nav a{color:#424754 !important;white-space:nowrap;width:auto;font-weight:500}
.footer nav a:hover{color:#0058be !important}
.footer > p,.footer p{color:#424754 !important;font-weight:400}
/* the disclaimer div under the footer row (inline brown color) -> editorial */
footer > .container > div:last-child,
footer > .container > div[style]{ color:#424754 !important; }
footer > .container > div[style] strong{ color:#121c2a !important; }

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .header__navigation,.header .lang-switcher{display:none}
  .burger{display:inline-flex;margin-left:auto}
  body{padding-bottom:70px}
  .mcta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid #c2c6d6;padding:10px 16px;box-shadow:0 -4px 16px rgba(18,28,42,.1)}
  .mcta button,.mcta .btn{width:100%;background:#fd761a;color:#1b0f0a;border-radius:4px;padding:13px;font-weight:600;font-family:'Public Sans',sans-serif;font-size:15px;border:none;cursor:pointer}
}
@media(max-width:640px){
  .footer{flex-direction:column;text-align:center}
  .footer nav{margin-left:0;justify-content:center;gap:10px 18px}
}