/* ------------------------------
   main.css – Shared Site Styles
   ------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap");

/* ===== Base ===== */
html,body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
  background:#fafafa;
  color:#222;
  line-height:1.75;
}
body{
  max-width:1050px;
  margin:0 auto;
  padding:2rem;
}

/* ===== Navigation Bar ===== */
.nav-bar{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:1rem 2rem;
  background:#ffffffee;            /* translucent glass */
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e0e0e0;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  font-size:.95rem;
}

/* links container (desktop default) */
.nav-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
}

.nav-bar a{
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  color:#1a73e8;
  font-weight:600;
  text-decoration:none;
  border-radius:6px;
  transition:all .2s ease;
}

.nav-bar a:hover{
  background:#e3f2fd;
  color:#0d47a1;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* Hide the hamburger by default on desktop */
.nav-toggle{
  display:none;
}

/* ===== Utility ===== */
.tag{
  background:#e8f5e9;
  color:#1b5e20;
  font-size:.75rem;
  padding:.25rem .5rem;
  border-radius:12px;
  font-weight:600;
}
.ev{
  background:#e3e7fd;
  color:#283593;
  font-size:.75rem;
  padding:.25rem .5rem;
  border-radius:12px;
  font-weight:600;
}

/* ===== Headings ===== */
h1,h2,h3{
  color:#2c3e50;
  margin-top:0;
}

/* ===== Buttons (generic) ===== */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  background:#2ecc71;
  color:#fff;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease;
}
.btn:hover{background:#27ae60;}

/* ===== Tables ===== */
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:2rem;
}
th,td{
  padding:1rem;
  border:1px solid #ddd;
  vertical-align:top;
}
th{
  background:#f2f2f2;
  text-align:left;
}

.filter-tag {
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  background: #eee;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}
.filter-tag.active {
  background: #1565c0;
  color: #fff;
  font-weight: 600;
}

/* ===== Disclaimers / Alerts ===== */
.disclaimer{
  background:#f9f9f9;
  padding:2rem;
  border-left:5px solid #e74c3c;
  font-size:.95rem;
}

.warning{
  background:#fff3cd;
  border-left:5px solid #ffa726;
  padding:1rem 1.2rem;
  color:#664d03;
  font-size:.95rem;
}

/* Search UX polish */
.search-shell { position: relative; display: inline-block; }
.search-clear {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; font-size: 1rem; cursor: pointer;
  padding: 0; line-height: 1; opacity: .6;
}
.search-clear:hover { opacity: 1; }

.search-dropdown {
  margin-top: .4rem; border: 1px solid #ddd; border-radius: 8px; background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); max-height: 360px; overflow: auto;
}
.search-list { list-style: none; margin: 0; padding: .25rem; }
.search-item { padding: .55rem .7rem; cursor: pointer; border-radius: 6px; }
.search-item:hover, .search-item.is-active { background: #f3f6ff; }
.si-title { font-weight: 600; color: #2c3e50; }
.si-tags { margin-top: .15rem; display:flex; flex-wrap:wrap; gap:.25rem; }
.si-tag {
  font-size: .75rem; background:#eef2ff; border:1px solid #e0e7ff; color:#334155;
  padding:.1rem .4rem; border-radius:10px;
}
.search-empty { padding: .8rem; color: #555; }

mark.search-hit { background: #fff2a8; padding: 0 .1rem; border-radius: 2px; }

details.search-pulse { animation: sp 900ms ease-out; }
@keyframes sp { 0%{box-shadow: 0 0 0 0 rgba(33,150,243,.35)} 100%{box-shadow: 0 0 0 12px rgba(33,150,243,0)} }

/* Active filter-tag visual */
.filter-tag.is-active {
  outline: 2px solid #667eea; background: #eef2ff;
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:clamp(320px, 48vh, 520px);
  display:flex; align-items:center;
  color:#fff;
  /* left-side dark overlay to help text pop; image on the right */
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 70%),
    url("images/CellularBackground.png"); /* relative path */
  background-size:cover;
  background-position:right center;
}

.hero-inner{ max-width:1050px; margin:0 auto; padding:4rem 1.5rem; }
.hero .subtitle{ opacity:.95; max-width:42ch; }
.hero .btn{ display:inline-block; margin-right:.8rem; padding:.7rem 1rem; border-radius:.75rem; background:#16a34a; color:#fff; text-decoration:none; font-weight:600; }
.hero .btn.secondary{ background:transparent; border:1.5px solid rgba(255,255,255,.75); }

/* ===== Responsive ===== */
@media (max-width: 768px){
  /* use same image as a portrait crop unless you add a separate mobile file */
  .hero{
    min-height:380px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%),
      url("images/CellularBackground.png");
    background-size:cover;
    background-position:center 30%;
  }
}

/* ===== Mobile hamburger nav (JS-driven) ===== */
@media (max-width: 600px) {
  .nav-bar {
    padding: .5rem 1rem;
    gap: 0;
    justify-content: flex-start;
  }

  /* show the existing button */
  .nav-toggle {
    display: block;            /* visible on phones */
    margin-left: auto;         /* push to the right edge */
    font-size: 1.6rem;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: 6px;
  }

  /* hide links by default on phones */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid #e0e0e0;
    width: 100%;
  }

  /* show when JS adds .open */
  .nav-bar.open .nav-links { display: flex; }

  .nav-bar a {
    padding: .5rem .6rem;
    font-size: .95rem;
  }

  /* compact page padding on phones */
  body { padding: 1rem; }
}