/* Minimal offline styling; replace with harvested CSS later */
:root { --text:#111; --bg:#fff; --muted:#666; --primary:#0b57d0; }
/* Global layout vars */
:root { --nav-height: 70px; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);} 
/* Ensure content never hides under sticky header */
main{padding-top:var(--nav-height);} 
/* Our unified header is sticky and above content */
.esim-nav-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.98);} 
header{border-bottom:1px solid #eee;}
/* Generic nav styles removed - using unified nav component styles instead */
nav a{color:var(--text);text-decoration:none}
main{max-width:1100px;margin:0 auto;padding:2rem 1rem}
#hero{padding:3rem 0;border-bottom:1px solid #eee}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.cards li{border:1px solid #e5e5e5;border-radius:8px;padding:1rem}
.cards a{display:inline-block;margin-top:.5rem;color:#fff;background:var(--primary);padding:.5rem .75rem;border-radius:6px}
section{margin:2rem 0}
footer{border-top:1px solid #eee;padding:1rem;text-align:center;color:var(--muted)}

/* Ensure white background across all pages, overriding Webflow */
body{
  background-color: #fff !important;
  background-image: none !important;
  background-attachment: scroll !important;
  background-size: auto !important;
}

/* Override Webflow dotted/yellow background used by .home-body in webflow.css */
.home-body{
  background-image: none !important;
  background-color: #fff !important;
  background-attachment: scroll !important;
  background-size: auto !important;
}

/* Layout refinements (mobile-first) and strong overrides */
.w-container {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Simple header (nav-simple) */
.nav-simple { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #eee; }
.nav-simple .nav-inner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-simple .brand { display: inline-flex; align-items: center; gap: 8px; color: #111; text-decoration: none; font-weight: 800; }
.nav-simple .nav-links { display: none; gap: 16px; align-items: center; }
.nav-simple .nav-links a { color: #111; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.nav-simple .nav-links a:hover { background: #f6f6f6; }
.nav-simple .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; }
@media (min-width: 769px) { .nav-simple .nav-links { display: flex; } .nav-simple .nav-toggle { display: none; } }

/* Footer */
.site-footer { margin-top: 32px; background: #111; color: #fff; }
.site-footer .footer-inner { max-width: 1100px; margin: 0 auto; padding: 20px 16px; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
.site-footer .footer-brand { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; }
.site-footer .footer-links { display: flex; gap: 12px; flex-wrap: wrap; }
.site-footer .footer-links a { color: #fff; text-decoration: none; opacity: 0.9; }
.site-footer .footer-links a:hover { opacity: 1; }
.site-footer .footer-copy { font-size: 12px; opacity: 0.8; }
@media (min-width: 769px) { .site-footer .footer-inner { grid-template-columns: auto 1fr auto; } }

.navbar.w-nav {
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  background: #fff !important;
}

/* Hide legacy/Webflow nav elements when unified nav is present */
body .w-nav,
body .navbar,
body .w-nav-menu,
body .menu-button,
body .nav-simple {
  display: none !important;
}

/* IMPORTANT: Keep our NEW modular nav visible */
.site-nav .nav-menu {
  display: flex !important;
}

.site-nav .nav-auth {
  display: flex !important;
}

/* Keep our unified nav visible and properly styled */
header.esim-nav-header { display: block !important; }
nav.esim-nav-menu { display: flex !important; }
/* Mobile menu hidden by default - shown only via media query in unified-nav.html */

.main-container { margin-top: 16px !important; }

.seo-hero { border: 1px solid #eee !important; padding: 12px 12px !important; }

.section-title {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

.card { border: 1px solid #eee !important; box-shadow: 0 3px 10px rgba(0,0,0,.065) !important; }

.view-link {
  background: #0b57d0 !important;
  border: 0 !important;
}

.pkg-name { font-weight: 700 !important; }
.pkg-price { color: #0b57d0 !important; }

/* Typography scale */
.seo-hero h1 { font-size: clamp(22px, 5vw, 34px) !important; margin: 6px 0 4px 0 !important; }
.seo-hero .seo-subtitle { font-size: clamp(15px, 2vw, 19px) !important; margin: 0 0 6px 0 !important; }
.section-title { font-size: clamp(19px, 2.2vw, 26px) !important; }

/* Mobile-first grid: 1 column by default */
.trending-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

/* Improve tap targets on mobile */
.view-link { padding: 12px 14px !important; border-radius: 10px !important; }
.nav-link { padding: 10px 8px !important; }

/* Remove stray horizontal rules and heavy decorations */
.why-we hr, .why-we .divider { display: none !important; }

/* Breakpoints (progressive enhancement) */
@media (min-width: 600px) { .trending-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } }

@media (min-width: 768px) {
  .w-container { max-width: 720px !important; }
  .seo-hero h1 { font-size: clamp(24px, 4vw, 34px) !important; }
}

@media (min-width: 992px) {
  .w-container { max-width: 1100px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .trending-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
}

@media (min-width: 1200px) {
  .w-container { max-width: 1280px !important; }
}