/* ==========================================================================
   Seven Ocean Bunkering — shared stylesheet for sub-pages
   Design tokens mirror index.html; lighter weight for content pages.
   ========================================================================== */

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

:root{
  --white:#ffffff; --off:#f7f8fa; --light:#eef1f5; --border:#e2e6ec;
  --ink:#0a0f1a; --ink2:#1a2333; --body:#4a5568; --muted:#8899aa;
  --dark:#07111e; --dark2:#0d1f33; --dark3:#112840;
  --blue:#0057e7; --blue2:#2d7aff; --cyan:#00c4e8;
  --gold:#f0a500; --gold2:#ffbe33;
  --r:10px; --r2:18px;
}

html{scroll-behavior:smooth}
body{
  background:var(--white); color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--off)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:2px}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue2)}

/* ── NAV (shared, simpler than index) ── */
nav.topnav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border);
  padding:.9rem 0;
}
.nav-inner{
  max-width:1320px; margin:0 auto; padding:0 3rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.logo-name{
  font-family:'Bebas Neue',sans-serif; font-size:1.3rem;
  letter-spacing:.08em; color:var(--ink);
}
.logo-sub{
  font-family:'JetBrains Mono',monospace; font-size:.5rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue);
}
.nav-center{display:flex;align-items:center;gap:2rem}
.nav-link{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--body); text-decoration:none;
}
.nav-link:hover,.nav-link.active{color:var(--ink)}
.nav-quote{
  background:var(--gold); color:var(--ink);
  padding:.5rem 1.4rem; border-radius:4px;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background .2s;
}
.nav-quote:hover{background:var(--gold2)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem}
.hamburger span{width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:all .3s}
.mob-nav{display:none;position:fixed;inset:0;z-index:99;background:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.mob-nav.on{display:flex}
.mob-nav a{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;letter-spacing:.08em;color:var(--white);text-decoration:none}
.mob-nav a:hover{color:var(--gold)}
.mob-close{position:absolute;top:1.5rem;right:2rem;background:none;border:none;color:var(--muted);font-size:2rem;cursor:pointer}

/* ── HERO on sub-pages ── */
.subhero{
  background:var(--dark);
  color:var(--white);
  padding:6rem 0 4rem;
  position:relative; overflow:hidden;
}
.subhero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at top right,rgba(0,87,231,.18),transparent 50%),
    radial-gradient(ellipse at bottom left,rgba(240,165,0,.08),transparent 45%);
  pointer-events:none;
}
.subhero .wrap{position:relative;z-index:1}

.breadcrumbs{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:1.5rem;
}
.breadcrumbs a{color:rgba(255,255,255,.7)}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs .sep{margin:0 .6rem;color:rgba(255,255,255,.25)}
.breadcrumbs .current{color:var(--gold2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'JetBrains Mono',monospace; font-size:.62rem;
  color:rgba(255,255,255,.6); letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:1rem;
}
.eyebrow::before{content:'';width:24px;height:1.5px;background:var(--gold)}

.subhero h1{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.4rem,5vw,4.8rem); line-height:1;
  letter-spacing:.02em; color:var(--white); margin-bottom:1rem;
  max-width:900px;
}
.subhero h1 em{font-style:normal;color:var(--gold)}
.subhero .lede{
  color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.75;
  font-weight:300; max-width:720px;
}

/* ── CONTENT ── */
section.content{padding:5rem 0;background:var(--white)}
.wrap{max-width:1100px;margin:0 auto;padding:0 3rem}
.wrap-wide{max-width:1320px;margin:0 auto;padding:0 3rem}

.content h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:.02em;
  color:var(--ink); margin:2.5rem 0 1.2rem; line-height:1.1;
}
.content h2:first-child{margin-top:0}
.content h2 em{font-style:normal;color:var(--blue)}
.content h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.18rem; font-weight:700; color:var(--ink);
  margin:2rem 0 .75rem; line-height:1.3;
}
.content p{
  color:var(--body); font-size:1rem; line-height:1.8;
  font-weight:400; margin-bottom:1.1rem;
}
.content ul, .content ol{margin:0 0 1.2rem 1.3rem;color:var(--body);line-height:1.8}
.content li{margin-bottom:.4rem}
.content strong{color:var(--ink);font-weight:600}

/* Fact strip — key port/fuel facts */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; margin:1.5rem 0 2.5rem;
}
.fact{background:var(--white);padding:1.2rem 1.3rem}
.fact-label{
  font-family:'JetBrains Mono',monospace; font-size:.58rem;
  color:var(--blue); letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:.4rem;
}
.fact-val{
  font-family:'Bebas Neue',sans-serif; font-size:1.4rem;
  color:var(--ink); letter-spacing:.03em; line-height:1.1;
}
.fact-sub{font-size:.75rem;color:var(--muted);margin-top:.2rem}

/* Info card (callouts) */
.card{
  background:var(--off); border-left:3px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem 1.5rem; margin:1.5rem 0;
}
.card.gold{border-left-color:var(--gold)}
.card.cyan{border-left-color:var(--cyan)}
.card-title{
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
  color:var(--blue); letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; margin-bottom:.5rem;
}
.card.gold .card-title{color:#a06800}
.card p{margin-bottom:.6rem;font-size:.92rem}
.card p:last-child{margin-bottom:0}

/* Fuel/port pill tags */
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 2rem}
.tag{
  display:inline-block; padding:.35rem .85rem;
  background:rgba(0,87,231,.08); color:var(--blue);
  border:1px solid rgba(0,87,231,.15); border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:.65rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  text-decoration:none; transition:all .2s;
}
.tag:hover{background:var(--blue);color:var(--white)}
.tag.gold{background:rgba(240,165,0,.12);color:#a06800;border-color:rgba(240,165,0,.25)}
.tag.gold:hover{background:var(--gold);color:var(--ink)}

/* Tables */
.tbl{
  width:100%; border-collapse:collapse; margin:1.5rem 0 2rem;
  font-size:.9rem; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
}
.tbl th{
  background:var(--off); text-align:left; padding:.9rem 1rem;
  font-family:'JetBrains Mono',monospace; font-size:.65rem;
  color:var(--blue); letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; border-bottom:1px solid var(--border);
}
.tbl td{padding:.9rem 1rem;border-bottom:1px solid var(--border);color:var(--body)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--off)}

/* FAQ */
.faq details{
  border:1px solid var(--border); border-radius:var(--r);
  padding:1rem 1.3rem; margin-bottom:.7rem; background:var(--white);
  transition:box-shadow .2s;
}
.faq details[open]{box-shadow:0 2px 12px rgba(10,15,26,.06)}
.faq summary{
  cursor:pointer; font-weight:600; color:var(--ink);
  font-size:1rem; list-style:none; position:relative;
  padding-right:2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:1.4rem; color:var(--blue); font-weight:300; transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:.8rem 0 .2rem;color:var(--body);font-size:.95rem}

/* Index grids — for hub pages */
.hub-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.2rem; margin:2rem 0;
}
.hub-card{
  display:block; text-decoration:none; padding:1.5rem;
  border:1px solid var(--border); border-radius:var(--r);
  background:var(--white); transition:all .25s;
  position:relative; overflow:hidden;
}
.hub-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.hub-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,15,26,.06)}
.hub-card:hover::before{transform:scaleX(1)}
.hub-card-region{
  font-family:'JetBrains Mono',monospace; font-size:.58rem;
  color:var(--blue); letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:.5rem;
}
.hub-card h3{
  font-family:'Bebas Neue',sans-serif; font-size:1.5rem;
  letter-spacing:.03em; color:var(--ink); margin:.2rem 0 .5rem !important;
}
.hub-card p{font-size:.88rem;color:var(--body);line-height:1.65;margin:0}
.hub-card-meta{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border);
  display:flex;justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:.62rem;
  color:var(--muted); letter-spacing:.08em;
}

/* Group headings on hub page */
.hub-group-head{
  font-family:'JetBrains Mono',monospace; font-size:.68rem;
  color:var(--blue); letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; margin:3rem 0 .5rem; display:flex; align-items:center; gap:.8rem;
}
.hub-group-head::after{content:'';flex:1;height:1px;background:var(--border)}
.hub-group-head:first-child{margin-top:0}

/* Related links footer */
.related{
  background:var(--off); padding:3.5rem 0; border-top:1px solid var(--border);
}
.related h2{
  font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.03em;
  color:var(--ink); margin-bottom:1.5rem;
}
.related-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.related-card{
  display:block; padding:1.1rem 1.3rem; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r);
  text-decoration:none; transition:all .2s;
}
.related-card:hover{border-color:var(--blue);transform:translateX(3px)}
.related-card-label{
  font-family:'JetBrains Mono',monospace; font-size:.58rem;
  color:var(--muted); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.3rem;
}
.related-card-title{
  font-size:.95rem; color:var(--ink); font-weight:600; line-height:1.3;
}

/* CTA strip */
.cta-strip{
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 60%,#0a1e36 100%);
  padding:4.5rem 0; color:var(--white);
  position:relative; overflow:hidden;
}
.cta-strip::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at right,rgba(240,165,0,.12),transparent 50%);
}
.cta-strip .wrap{position:relative;z-index:1;text-align:center}
.cta-strip h2{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:.02em; color:var(--white); margin-bottom:1rem;
}
.cta-strip h2 em{font-style:normal;color:var(--gold)}
.cta-strip p{color:rgba(255,255,255,.65);max-width:640px;margin:0 auto 2rem;font-size:1.02rem;font-weight:300}
.cta-btn{
  display:inline-block; background:var(--gold); color:var(--ink);
  padding:1rem 2.6rem; border-radius:4px;
  font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; text-decoration:none; transition:all .2s;
}
.cta-btn:hover{background:var(--gold2);transform:translateY(-1px);color:var(--ink)}
.cta-ghost{
  display:inline-block; margin-left:.8rem;
  border:1px solid rgba(255,255,255,.3); color:rgba(255,255,255,.85);
  padding:1rem 2rem; border-radius:4px; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  text-decoration:none; transition:all .2s;
}
.cta-ghost:hover{border-color:white;color:white}

/* ── FOOTER (simpler than main site) ── */
footer.sitefoot{background:var(--ink);padding:4rem 0 2rem;color:rgba(255,255,255,.4)}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.fb-name{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.1em;color:var(--white);line-height:1}
.fb-sub{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--gold);letter-spacing:.22em;text-transform:uppercase;margin-bottom:1rem}
.fb p{color:rgba(255,255,255,.3);font-size:.78rem;line-height:1.7;font-weight:300}
.fc h4{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--gold);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}
.fc a{display:block;color:rgba(255,255,255,.35);text-decoration:none;font-size:.8rem;margin-bottom:.45rem;transition:color .2s;font-weight:300}
.fc a:hover{color:var(--white)}
.fbot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.06)}
.fbot p{font-size:.72rem;color:rgba(255,255,255,.18)}
.fbot a{color:var(--cyan)}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .nav-center{display:none}
  .hamburger{display:flex}
  .ft{grid-template-columns:1fr 1fr}
  .wrap,.wrap-wide{padding:0 1.5rem}
  .nav-inner{padding:0 1.5rem}
  .nav-quote{display:none}
}
@media (max-width:600px){
  section.content{padding:3rem 0}
  .subhero{padding:3.5rem 0 2.5rem}
  .wrap,.wrap-wide,.nav-inner{padding:0 1.2rem}
  .ft{grid-template-columns:1fr;gap:2rem}
  .fbot{flex-direction:column;text-align:center;gap:.5rem}
  .content h2{margin-top:2rem}
}

/* ── INDIA hub — ranked port grid ── */
.ports-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem; margin:2rem 0 3rem;
}
.port-card{
  display:block; text-decoration:none; padding:1.4rem 1.5rem;
  border:1px solid var(--border); border-radius:var(--r);
  background:var(--white); transition:all .25s;
  position:relative; overflow:hidden;
}
.port-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#ff9933,#138808); /* saffron → green */
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.port-card:hover{
  border-color:#ff9933; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,15,26,.06);
}
.port-card:hover::before{transform:scaleX(1)}
.port-card-rank{
  font-family:'Bebas Neue',sans-serif; font-size:1.5rem;
  color:var(--gold); letter-spacing:.02em; line-height:1;
  margin-bottom:.3rem;
}
.port-card-name{
  font-family:'Bebas Neue',sans-serif; font-size:1.6rem;
  letter-spacing:.03em; color:var(--ink); line-height:1.05; margin-bottom:.35rem;
}
.port-card-state{
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  color:var(--muted); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.8rem;
}
.port-card-volume{
  font-size:.88rem; color:var(--body); font-weight:600; margin-bottom:.3rem;
}
.port-card-fuels{
  font-family:'JetBrains Mono',monospace; font-size:.65rem;
  color:var(--muted); letter-spacing:.05em;
}