:root{
  --iq-indigo:#1E1446;
  --iq-blue:#02A3FF;
  --iq-pink:#FF85C2;
  --iq-yellow:#FFCC26;
  --iq-mint:#ACF0D0;
  --iq-purple:#4E1D66;

  --iq-bg:#F6F7F8;
  --iq-text:#1A1A1A;

  --line:#E6E6EF;
  --muted:#5a5a5a;
}

body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  background:var(--iq-bg);
  color:var(--iq-text);
}

main{
  max-width:980px;
  margin:-32px auto 0;
  padding:0 0 24px;
  position:relative;
  z-index:2;
}

header{
  position:relative;
  background:var(--iq-indigo);
  color:#fff;
  padding:56px 24px 88px;
  overflow:hidden;
}

header::before,
header::after{
  pointer-events:none;
}

/* …header gradients… */

header::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
  background:var(--iq-bg);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

header::before{
  content:"";
  position:absolute;
  bottom:44px;
  left:0;
  width:100%;
  height:10px;
  background: linear-gradient(90deg, var(--iq-pink), var(--iq-yellow));
}

    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:8px;
      padding:22px 24px;
    }

.by-badge{
  position:absolute;
  top:20px;
  right:24px;
  background: linear-gradient(135deg, var(--iq-pink), var(--iq-yellow));
  color:var(--iq-indigo);
  font-weight:700;
  font-size:12px;
  padding:8px 14px;
  text-transform:uppercase;
  letter-spacing:.3px;
  border-radius:999px;
}

.site-title{
  margin-bottom:6px;
}

.site-location{
  font-weight:400;
  font-size:14px;
  color:var(--muted);
}

header h1{
  margin:0 0 6px;
  font-size:28px;
}

header h2{
  margin:0;
  font-size:16px;
  font-weight:400;
  opacity:.9;
}

/* Neutral intro panel (keeps pink sections from clashing) */
.intro{
  background:#f2f3f5;              /* soft grey */
  border:1px solid var(--line);
  border-left:4px solid #c7c9d3; /* subtle accent */
  border-radius:8px;
  padding:20px 24px;
  margin-bottom:28px;
  color:var(--iq-text);
}

.intro p{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.5;
}

.intro p strong{
  font-weight:700;
}

.section{
  background:#ffffff;
  border-left:6px solid var(--iq-blue); /* default, overridden inline */
  padding:22px 26px;
  margin-bottom:36px;
  border-radius:6px;
  color: inherit; /* critical: allow inline section color to flow */
}

/* Top accent line uses section color */
.section::before{
  content:"";
  display:block;
  height:3px;
  width:48px;
  border-radius:2px;
  margin-bottom:12px;
  background: currentColor;
}

/* Headings inside sections */
.section h2,
.section h3{
  margin:0 0 8px;
  font-size:20px;
  font-weight:700;
}

/* Sub‑headings */
.section h4{
  margin:18px 0 6px;
  font-size:15px;
  font-weight:600;
  color: inherit;
}

/* Paragraph text */
.section p,
.section ul{
  margin:8px 0;
  font-size:14px;
  color: inherit;
}

/* Ensure ALL children inherit section colour */
.section > *{
  color: inherit;
}

/* ======================================================
   Picker cards (neutral containers inside coloured sections)
   ====================================================== */

.picker-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px 22px;
  margin:16px 0 28px;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
}

/* Picker intro text */
.picker-intro{
  margin-bottom:10px;
  font-size:14px;
}

/* Picker help / hint text */
.picker-help,
.hint{
  margin-top:10px;
  font-size:13px;
  color:var(--muted); /* intentionally muted, not section colour */
}

/* Top row of picker: country chips + clear button */
.picker-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

/* Ensure country filters stay on the left */
.picker-controls .filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Push Clear selection to the far right */
.picker-controls .clear-btn{
  margin-left:auto;
  margin-top:8px;
  margin-bottom: 8px;
}

/* ======================================================
   Filters (chips) – unchanged from old behaviour
   ====================================================== */

.filters,
.cities{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.filters button,
.cities button{
  border:0;
  background:#f0f0f0;
  color:#333;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}

.filters button.active,
.cities button.active{
  background:var(--iq-blue);
  color:#fff;
}

/* Clear selection button */
.clear-btn{
  margin-left:auto;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid #ccc;
  background:#ffffff;
  color:#555;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.clear-btn:hover{
  background:#f6f6f6;
  border-color:#999;
}

/* ======================================================
   Results list – colour inheritance restored
   ====================================================== */

.results{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.site-card{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  background:#ffffff;
}

/* ✅ KEY FIX: links inherit section colour */
.site-card a,
.results a{
  display:block;
  margin:6px 0;
  font-weight:700;
  text-decoration:none;
  font-size:15px;
  color:inherit;
}

.site-card a:hover,
.results a:hover{
  text-decoration:underline;
}

.empty-state{
  margin:40px 0;
  padding:28px;
  background:#f2f3f5;
  border-radius:8px;
  text-align:center;
}

.empty-state h3{
  margin-bottom:6px;
}

.empty-state p{
  font-size:14px;
  color:var(--muted);
}

.hint{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

/* ======================================================
   Search input
   ====================================================== */

input[type="search"]{
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:13px;
}

    .assets{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }

    .asset-link{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:14px 16px;
      border:1px solid var(--line);
      border-radius:6px;
      text-decoration:none;
      color:var(--iq-blue);
      font-weight:600;
      background:#fff;
    }

    .asset-link:hover{
      background:#f7f9fb;
    }

    .asset-note{
      font-size:12px;
      color:#666;
      margin-top:24px;
    }

.back-nav {
  margin: 12px 0 16px;
}

.back-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  color: var(--iq-indigo);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #e2e4f0;
}

.back-nav a:hover {
  background: #f6f7fb;
}


/* Meta text remains neutral */
.meta{
  margin-top:4px;
  font-size:12px;
  color:#666;
}

    .description{
      font-size:15px;
      line-height:1.55;
      color:#333;
      white-space:pre-line;
      margin-bottom:22px;
    }

footer{
  display:flex;
  justify-content:center;
  text-align:center;
  font-size:13px;
  color:#555;
  padding:24px 12px;
  border-top:1px solid var(--line);
}