/* style.css — VillageInfo-like improved responsive theme (accent = red) */

:root{
  --accent: #c62828;
  --accent-dark: #8e0000;
  --muted: #6b7280;
  --bg: #f5f6f8;
  --card: #ffffff;
  --radius: 8px;
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
  --maxw: 1180px;
  --gap: 16px;
  --glass: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#111;}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:20px auto;padding:0 16px}

/* Top header (site-header should be used in header.php) */
.site-header {
  background: var(--glass);
  backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 14px;
  z-index: 60;
}

/* Connectivity table: vi-quick-info (striped, clean) */
.vi-quick-info {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.vi-quick-info thead .table-head th {
  background: var(--accent);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.vi-quick-info td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3e9e9;
  background: #fff;
}
.vi-quick-info--striped tbody tr:nth-child(even) td {
  background: #fff7f7;
}
.vi-quick-info .viw-40 { width:40%; }
.vi-quick-info .viw-60 { width:60%; }

/* Nearby villages tab list */
.tab { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.vi-nbvli { display:inline-block; margin:0; }
.vi-nbvli a { display:inline-block; padding:8px 12px; border-radius:8px; background:#fff; border:1px solid #f0e6e6; color:var(--accent); box-shadow: var(--shadow-sm); font-weight:600; }
.vi-nbvli a:hover { background:#fff7f7; color:var(--accent-dark); }

/* Responsive tweaks for both */
@media (max-width:520px) {
  .vi-quick-info thead .table-head th, .vi-quick-info td { padding:10px 8px; font-size:14px; }
  .vi-quick-info .viw-40, .vi-quick-info .viw-60 { display:table-cell; width:auto; }
  .vi-nbvli a { padding:8px 10px; font-size:13px; }
}


/* Logo left */
.header-left {
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 210px;
}
.site-logo {
  display:flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
  color:var(--accent-dark);
}
.site-logo .mark {
  width:46px;height:46px;border-radius:10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.site-logo .text { display:flex;flex-direction:column;line-height:1; }
.site-logo .title { font-size:18px;font-weight:700; }
.site-logo .sub { font-size:12px;color:var(--muted);margin-top:2px; }

/* Centered search form (keeps visible on mobile) */
.header-center {
  flex:1; display:flex; justify-content:center;
}
.header-search {
  width:100%; max-width:880px;
}
.header-search form {
  display:flex; align-items:center; gap:8px;
  border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.header-search input[type="search"], .header-search input[type="text"]{
  flex:1;padding:12px 14px;border:0;font-size:15px;outline:none;
  min-width:0;
}
.header-search button{
  background:var(--accent);color:#fff;border:0;padding:10px 16px;font-weight:600;cursor:pointer;border-radius:0;
}
.header-search .micro { font-size:13px;color:var(--muted);padding:0 8px; }

/* Right area */
.header-right { display:flex;align-items:center;gap:10px;min-width:150px;justify-content:flex-end; }
.header-right .btn { background:#fff;border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:8px;font-weight:600;color:var(--accent); }
.header-right .meta { font-size:13px;color:var(--muted) }

/* Subnav pills */
.site-subnav { margin-top:12px;display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;background:transparent;overflow:auto; }
.site-subnav a { padding:8px 12px;border-radius:999px;background:rgba(0,0,0,0.03);color:var(--muted);font-size:14px;white-space:nowrap; }
.site-subnav a:hover, .site-subnav a.active { background:var(--accent);color:#fff;font-weight:600; box-shadow:0 6px 20px rgba(198,40,40,0.08); }

/* Main cards */
.card{
  background:var(--card);
  padding:18px;border-radius:12px;
  box-shadow:var(--shadow-sm);
  margin-top:var(--gap);
}

/* small utility classes */
.states-list{display:flex;flex-wrap:wrap;gap:10px}
.states-list a{background:#fff4f4;padding:8px 12px;border-radius:10px;border:1px solid rgba(198,40,40,0.06);color:var(--accent-dark)}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:8px}
.h1{font-size:22px;margin:6px 0 10px 0}

/* Layout grid */
.layout {
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:24px;
  align-items:start;
  margin-top:12px;
}

/* Tables */
.data-table {
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  font-size:14px;
  border-radius:8px;
  overflow:hidden;
}
.data-table th {
  background: var(--accent);
  color:#fff;
  text-align:left;
  padding:10px;
  font-weight:600;
}
.data-table td {
  padding:10px;
  border-bottom:1px solid #f0eaea;
  background: #fff;
}
.data-table tr:nth-child(even) td { background: #fff7f7; }
.data-table tr:hover td { background: #ffefef; }

/* Small text classes */
.muted { color:var(--muted); }
.small { font-size:13px; color:var(--muted); }

/* Responsive tweaks - keep search visible on mobile and stack layout */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .header-left { min-width: 150px; }
  .header-right { min-width: 100px; }
  .header-search { max-width:520px; }
  .site-logo .sub { display:none; }
}
@media (max-width: 640px) {
  .site-header { padding:10px; gap:8px; }
  .site-logo .mark { width:40px;height:40px;font-size:16px; }
  .site-logo .title { font-size:16px; }
  /* move search to full width on small screens and keep visible */
  .header-center { order:3;width:100%; display:block; margin-top:8px; }
  .header-search { max-width:100%; width:100%; }
  .header-search form { border-radius:10px; }
  .site-subnav { display:none; }
  .header-left { min-width:auto; }
  aside { width:100% !important; }
}

/* Mobile: show hamburger if present */
.hamburger { display:none; cursor:pointer; border-radius:8px; padding:6px; }
.hamburger .bar { width:22px;height:2px;background:#333;margin:4px 0;display:block;border-radius:2px; }
@media (max-width:640px) { .hamburger{display:block} .header-nav{display:none} }

/* Footer */
.footer { text-align:center;color:var(--muted);font-size:13px;margin:18px 0; }