/* /public/assets/css/country.css */
/* Force white background for country page (override base dark theme) */
html, body { background: #ffffff !important; color: #111827 !important; }

/* Base */
.qmk-country { max-width: 1100px; margin: 0 auto; padding: 18px 14px 42px; color: #111827; }

/* Breadcrumb */
.qmk-bc{ margin: 6px 0 14px; font-size: 13px; color:#4b5563; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.qmk-bc__a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.18); }
.qmk-bc__a:hover{ border-bottom-color: rgba(0,0,0,.35); }
.qmk-bc__dot{ opacity:.5; }
.qmk-bc__cur{ color:#111827; opacity:.9; }

/* Header */
.qmk-country-head { padding: 8px 2px 18px; }
.qmk-country-title{ display:flex; gap:14px; align-items:flex-start; }

.qmk-country-flag{
  width: 42px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: inline-block;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  margin-top: 2px;
}

.qmk-country-headtext{ flex:1; min-width:0; }
.qmk-h1{ margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.qmk-sub{ margin:0; color:#4b5563; font-size: 13px; }

/* Grid like event */
.qmk-grid { display:grid; gap:12px; }
@media (min-width: 980px){
  .qmk-grid{ grid-template-columns: 1fr 1fr; }
  .card--full{ grid-column: 1 / -1; }
}

/* Cards */
.card{
  background:#ffffff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.card__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 10px; gap:10px; }
.card__title{ margin:0; font-size:16px; color:#111827; }

.qmk-muted{ opacity:.75; color:#4b5563; }

/* Buttons */
.btn{
  display: inline-flex; align-items:center; justify-content:center;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color:#111827; text-decoration:none;
  cursor:pointer;
}
.btn:hover{ background: rgba(0,0,0,.06); }
.btn.is-disabled{
  pointer-events:none;
  opacity:.5;
}

/* KPI row (if you keep it in twig) */
.qmk-kpis{
  display:grid; gap:10px;
  margin: 10px 2px 14px;
}
@media (min-width:980px){ .qmk-kpis{ grid-template-columns: repeat(4, 1fr); } }

.qmk-kpi{
  padding: 12px; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}
.qmk-kpi-k{ opacity:.75; font-size: 13px; color:#374151; }
.qmk-kpi-v{ font-size: 22px; margin-top: 6px; color:#111827; }
.qmk-kpi-s{ opacity:.75; font-size: 12px; margin-top: 4px; color:#4b5563; }
.qmk-rowlink{ color: inherit; text-decoration:none; border-bottom: 1px solid rgba(0,0,0,.18); }
.qmk-rowlink:hover{ border-bottom-color: rgba(0,0,0,.35); }

/* Spotlight */
.qmk-spot{ display:grid; gap:8px; }
.qmk-spotline{ display:flex; align-items:center; gap:10px; }
.qmk-magbadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  font-weight: 800;
}
.qmk-spotplace{ font-size: 14px; color:#111827; }
.qmk-spotmeta{ font-size: 12px; }

/* Map */
.qmk-map{ min-height: 320px; border-radius: 14px; overflow:hidden; background:#f3f5f8; }
.qmk-map .leaflet-container{ height:100%; width:100%; }
.qmk-mapnote{ margin-top: 10px; font-size: 13px; color:#4b5563; }

/* Table */
.qmk-table{ display:grid; gap:8px; }
.qmk-tr{
  display:grid;
  grid-template-columns: 90px 1fr 160px 50px;
  gap:10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background:#ffffff;
}
.qmk-th{
  background: rgba(0,0,0,.02);
  color:#6b7280;
  font-size: 12px;
}
.qmk-td{ min-width:0; }
.qmk-td-r{ text-align:right; }
.qmk-mval{ font-weight: 800; color:#111827; }
.qmk-place{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; color:#111827; }

.qmk-empty{ color:#6b7280; font-size: 13px; }
.qmk-emptyrow{ grid-column: 1 / -1; color:#6b7280; }

/* Mobile table stack */
@media (max-width: 640px){
  .qmk-tr{ grid-template-columns: 90px 1fr; }
  .qmk-th .qmk-td:nth-child(3),
  .qmk-th .qmk-td:nth-child(4){ display:none; }
  .qmk-tr .qmk-td:nth-child(3),
  .qmk-tr .qmk-td:nth-child(4){ display:none; }
}

/* ============================================================
   FAQ mini patch (optional but recommended)
   Works with <details><summary> blocks used in country.twig
   ============================================================ */
.qmk-country details{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
}

.qmk-country summary{
  cursor: pointer;
  font-weight: 700;
  color: #111827;
  list-style: none;
  outline: none;
}

.qmk-country summary::-webkit-details-marker{ display:none; }

.qmk-country details > summary{
  position: relative;
  padding-right: 22px;
}

.qmk-country details > summary::after{
  content: "▾";
  position: absolute;
  right: 0;
  top: 0;
  opacity: .55;
  line-height: 1.2;
}

.qmk-country details[open] > summary{ margin-bottom: 6px; }
.qmk-country details[open] > summary::after{ content: "▴"; opacity: .55; }

.qmk-country details > div{
  color: #4b5563;
  opacity: .95;
}