/* Header */
.main-header {
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 50%, #1976D2 100%);
  padding: 15px 20px;
  color: #fff;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav .logo {
  font-size: 1.8rem;
  font-weight: 700;
}
.nav-links {
  list-style: none;
  display: flex;
}
.nav-links li {
  margin-left: 20px;
}
.nav-links li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.nav-links li a:hover,
.nav-links li a.active {
  color: #FFB74D;
}

/* Header layout helpers (safe even if similar rules exist in header.css) */
.main-header nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem}
.brand-icon{height:28px;width:auto;display:block}

.nav-links{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.nav-logo{display:flex;align-items:center}
.nav-icon{height:22px;width:auto;display:block}


/* ======= BIGGER LOGOS (overrides) ======= */
/* ===== MEGA LOGO & FOOTER OVERRIDES (v2) ===== */
:root{
  /* bump these if you want EVEN bigger numbers */
  --brand-logo-size:  clamp(90px, 12vw, 140px);  /* avir before "Petrofore" */
  --nav-logo-size:    clamp(80px, 11vw, 120px);  /* maroon before Home/Login */
  --footer-logo-size: clamp(90px, 12vw, 140px);  /* footer left/right logos */

  /* tweak if you want smaller/bigger just for the dashboard token logos */
  --token-logo-size: clamp(56px, 8vw, 88px);
}

/* HEADER — make brand & nav logos huge and keep layout tidy */
.main-header{ padding: 22px 26px !important; } /* more breathing room */
.main-header nav{ align-items: center; gap: 28px !important; }
.logo{
  display:flex; align-items:center; gap:16px !important;
  font-size: 2.4rem !important; font-weight: 800; line-height: 1;
}
.brand-icon{ height: var(--brand-logo-size) !important; width:auto; display:block; }

.nav-links{ display:flex; align-items:center; gap:28px !important; margin:0; padding:0; list-style:none; }
.nav-logo{ display:flex; align-items:center; }
.nav-icon{ height: var(--nav-logo-size) !important; width:auto; display:block; }

/* FOOTER — bigger bar and bigger logos */
footer,
.site-footer{
  background: linear-gradient(135deg, #FF6B35 0%, #D32F2F 50%, #1976D2 100%) !important; /* unify footer color */
  color: #fff !important;
}
.footer-inner{
  max-width: 1400px !important;
  margin: 0 auto;
  padding: 28px 28px !important;   /* thicker footer */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px !important;
}
.footer-inner p{
  margin: 0;
  flex: 1;
  text-align: center;
  font-size: 1.15rem;               /* slightly larger text */
}
.footer-icon{
  height: var(--footer-logo-size) !important;
  width: auto;
  display: block;
}

/* keep it usable on very small screens */
@media (max-width: 520px){
  :root{
    --brand-logo-size:  clamp(72px, 16vw, 120px);
    --nav-logo-size:    clamp(64px, 15vw, 110px);
    --footer-logo-size: clamp(72px, 16vw, 120px);
  }
  .nav-links{ gap: 18px !important; }
  .logo{ font-size: 2rem !important; }
}

/* ===== Dashboard token-center logos (slightly smaller than mega) ===== */
.main-header nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Keep the center actually centered even with big images */
.token-center{
  flex: 1;                          /* let center occupy the middle band */
  display: flex;
  align-items: center;
  justify-content: center;           /* true center alignment */
  gap: 14px;
  font-weight: 700;
}

/* Flanking logos for token area */
.token-logo{
  height: var(--token-logo-size);
  width: auto;
  display: block;
}

/* make sure long navs don’t squish things on tiny screens */
.nav-links{flex-wrap: nowrap; gap: 20px}

/* small screens: dial it down a touch for fit */
@media (max-width: 640px){
  :root{ --token-logo-size: clamp(44px, 12vw, 72px); }
  .token-center{ gap: 10px; }
}

/* ==== UNIFY HEADER LOGO SIZES (index & dashboard) ==== */
/* Force landing page header logos (.brand-icon, .nav-icon) to match dashboard token logos */
.brand-icon,
.nav-icon,
.token-logo{
  height: var(--token-logo-size) !important;  /* same size everywhere */
  width: auto;
  display: block;
}

/* Optional: normalize header padding across pages so they feel identical */
.main-header{ padding: 18px 22px !important; }