/* ===========================================================
   /css/faq.css — FAQ + Countries isolated styles
   This file is ONLY loaded on FAQ/Countries pages.
   =========================================================== */

/* -------------------------------
   Compare Bar
   ------------------------------- */
body[data-page="countries"] .compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 0 0 12px 0;
}

body[data-page="countries"] .faq-btn {
  background: #005eb8;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}
body[data-page="countries"] .faq-btn:hover {
  background: #004a93;
}

/* Compare Bar — sticky banner */
body[data-page="countries"] .compare-bar {
  position: sticky;
  top: 0;                     /* stick to top of viewport */
  z-index: 1000;              /* keep it above the list */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px; /* optional: rounded only at bottom */
  padding: 10px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  margin: 0 0 12px 0;
}

/* -------------------------------
   Countries List — Multi-column vertical flow
   ------------------------------- */
body[data-page="countries"] .countries-list {
  /* Use CSS multicol to force top-to-bottom flow */
  column-width: 320px;       /* Wider columns to avoid wrapping */
  column-gap: 24px;          /* Space between columns */
  list-style: none;
  padding: 0;
  margin: 0;
}

body[data-page="countries"] .countries-list > li {
  break-inside: avoid;       /* Prevent splitting a country row */
  -webkit-column-break-inside: avoid;
  margin: 0 0 6px 0;
  border: 0;
  padding: 0;
}

/* -------------------------------
   Country Items
   ------------------------------- */
body[data-page="countries"] .country-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;       /* Keep full country names on one line */
}

body[data-page="countries"] .country-name {
  color: #333333;
}

body[data-page="countries"] .country-name.visited {
  color: #228B22;
  font-weight: 600;
}

body[data-page="countries"] .is-visited .country-name a {
  color: #228B22;
  text-decoration: none;
}
body[data-page="countries"] .is-visited .country-name a:hover {
  text-decoration: underline;
}

/* -------------------------------
   Accessibility
   ------------------------------- */
body[data-page="countries"] .visitor-check:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
}

/* -------------------------------
   Responsive Tweaks
   ------------------------------- */
@media (max-width: 1200px) {
  body[data-page="countries"] .countries-list { column-width: 260px; }
}
@media (max-width: 992px) {
  body[data-page="countries"] .countries-list { column-width: 240px; }
}
@media (max-width: 700px) {
  body[data-page="countries"] .countries-list { column-width: 200px; }
}
/* ===========================================================
   Countries banner fixes
   =========================================================== */
.country-counter-banner {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.5em 1em;
  border-bottom: 1px solid #ccc;
  z-index: 5; /* lower than nav dropdowns */
}

/* ===========================================================
   Messages page formatting
   =========================================================== */

body[data-page="messages"] .intro-note {
  margin-bottom: 1.5em;
  font-style: italic;
}

body[data-page="messages"] .message-block {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

body[data-page="messages"] .message-block p {
  margin: 0.3em 0;
}

body[data-page="messages"] .message-author {
  text-align: right;
  font-style: italic;
  color: #555;
}

body[data-page="countries"] .compare-bar {
  position: sticky;
  top: 60px;   /* adjust: match your header’s fixed height */
  z-index: 500;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  margin: 0 0 12px 0;
}

/* ==========================================================
   FAQ Sidebar (flat list override)
   ========================================================== */

/* Container reset */
.sidebar-nav .flat-list,
#sidebar-travel .flat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Items */
.sidebar-nav .flat-list li,
#sidebar-travel .flat-list li {
  margin: 0;
  padding: 0;
}

/* Links */
.sidebar-nav .flat-list a,
#sidebar-travel .flat-list a {
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.sidebar-nav .flat-list a:hover,
#sidebar-travel .flat-list a:hover {
  background-color: #e6eef8;
  color: #0056b3;
}

/* Active link */
.sidebar-nav .flat-list a.active,
#sidebar-travel .flat-list a.active {
  background-color: #0056b3;
  color: #fff;
  font-weight: bold;
}

/* -------------------------
   Messages Page Styling
-------------------------- */
.messages-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Each message container */
.message-block {
  background: #fff;
  padding: 1em 1.25em;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  line-height: 1.35;           /* tighter line spacing */
  white-space: pre-line;       /* preserves intended breaks from text file */
  margin-bottom: 1.5rem;       /* gap between messages */
}

/* Paragraph spacing inside a message */
.message-block p {
  margin: 0.4em 0;             /* smaller vertical spacing */
}

/* Signature area at the bottom of a message */
.message-block .signature {
  display: block;
  margin-top: 0.6rem;
  font-style: italic;
  color: #555;
  text-align: right;
}

/* ===== Answers page ===== */
.answers-intro p { margin: .8rem 0; line-height: 1.35; }

.answers-contents { margin: 1rem 0 1.5rem; }
.answers-contents ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: .5rem 0 0;
}
.answers-contents a { font-weight: 600; }

.answers-table {
  width: 100%;
  border-collapse: collapse;
  margin: .25rem 0 1.75rem;
}
.answers-table td {
  padding: .35rem .5rem;
  vertical-align: top;
  line-height: 1.35;
  border-bottom: 1px solid #eee;
}
.answers-table td.q { width: 34%; color: #333; font-weight: 600; }
.answers-table td.a { width: 66%; color: #222; }
.answers-table tr:last-child td { border-bottom: 0; }

.muted { color:#003366; font-size:.95em; }

/* FAQ Answers Page Styling */
.faq-section h2, .answers-toc a {
  color: #003366;
}
.answers-toc ol {
  padding-left: 2rem;
}

.faq-section h2 {
  color: #003366;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.faq-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}
.faq-table td {
  padding: 0.4rem 0.8rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}
.animal-list {
  columns: 2;
  column-gap: 2rem;
  list-style: none;
  padding-left: 0;
}
.animal-list li {
  margin: 0.25rem 0;
}

/* ===========================================================
   Wonders of the World — page-specific styling
   Matches body[data-page="worldwonders"]
   =========================================================== */

body[data-page="worldwonders"] .wonders-banner{
  position: sticky;
  top: 60px;                 /* same offset as countries banner */
  z-index: 500;              /* below dropdowns */
  background: #ffd700;
  color: #003366;
  font-weight: 600;
  text-align: center;
  padding: 10px 15px;
  border-bottom: 2px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

body[data-page="worldwonders"] .wonder-group{ margin-top: 2rem; }

body[data-page="worldwonders"] .wonder-group h2{
  color:#003366;
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.75rem;
  border-bottom:2px solid #ccc;
  padding-bottom:4px;
}

/* Use flex (like countries) to dodge any global display:block collisions */
body[data-page="worldwonders"] .wonder-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:6px 10px;
  border-bottom:1px solid #eee;
}
body[data-page="worldwonders"] .wonder-row:nth-child(odd){ background:#f9f9f9; }

body[data-page="worldwonders"] .wonder-row.visited{ color:#006400; font-weight:500; }
body[data-page="worldwonders"] .wonder-row.na{ color:#999; font-style:italic; }

body[data-page="worldwonders"] .wonder-name{ flex:2 1 auto; }
body[data-page="worldwonders"] .wonder-country{ flex:1 0 auto; text-align:right; white-space:nowrap; }
body[data-page="worldwonders"] .wonder-country a{ color:#005eb8; text-decoration:none; }
body[data-page="worldwonders"] .wonder-country a:hover{ text-decoration:underline; }

/* Wonders banner layout + button style */
body[data-page="worldwonders"] .wonders-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

body[data-page="worldwonders"] .faq-btn{
  background:#005eb8;
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
body[data-page="worldwonders"] .faq-btn:hover{ background:#004a93; }

/* ===========================================================
   Wonders of the World — banner styled like Countries compare bar
   =========================================================== */
body[data-page="worldwonders"] .wonders-banner{
  position: sticky;
  top: 60px;                         /* same offset as countries */
  z-index: 500;                      /* below dropdowns */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  margin: 0 0 12px 0;
}
body[data-page="worldwonders"] .wonders-banner .wonders-meta{
  font-weight: 600;
  color: #333;
}

/* Button style (mirrors countries .faq-btn) */
body[data-page="worldwonders"] .faq-btn{
  background:#005eb8;
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
body[data-page="worldwonders"] .faq-btn:hover{ background:#004a93; }

/* ===========================================================
   70 Architectural Wonders — page-specific styling
   =========================================================== */
body[data-page="70architectural"] .arch-banner{
  position: sticky;
  top: 60px;                       /* same offset as countries/wonders */
  z-index: 500;                    /* below dropdowns */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  margin: 0 0 12px 0;
}
body[data-page="70architectural"] .arch-meta{ font-weight:600; color:#333; }

body[data-page="70architectural"] .arch-group{ margin-top: 2rem; }
body[data-page="70architectural"] .arch-group h2{
  color:#003366;
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.75rem;
  border-bottom:2px solid #ccc;
  padding-bottom:4px;
}

/* Two-column rows (borrowed from countries/wonders) */
body[data-page="70architectural"] .arch-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:6px 10px;
  border-bottom:1px solid #eee;
}
body[data-page="70architectural"] .arch-row:nth-child(odd){ background:#f9f9f9; }

body[data-page="70architectural"] .arch-name{ flex:2 1 auto; }
body[data-page="70architectural"] .arch-country{ flex:1 0 auto; text-align:right; white-space:nowrap; }

/* Reuse countries button style */
body[data-page="70architectural"] .faq-btn{
  background:#005eb8;
  color:#fff;
  border:0;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
body[data-page="70architectural"] .faq-btn:hover{ background:#004a93; }

/* 70 Architectural — visited styling + link colour */
body[data-page="70architectural"] .arch-row.visited{ color:#006400; font-weight:500; }
body[data-page="70architectural"] .arch-country a{ color:#005eb8; text-decoration:none; }
body[data-page="70architectural"] .arch-country a:hover{ text-decoration:underline; }

/* ===========================================================
   BBC Top 50 — page-specific styling (mirrors Countries/Wonders)
   =========================================================== */
body[data-page="bbctop50"] .bbc-banner{
  position: sticky;
  top: 60px;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  margin:0 0 12px 0;
}
body[data-page="bbctop50"] .bbc-meta{ font-weight:600; color:#333; }

body[data-page="bbctop50"] .bbc-group{ margin-top:2rem; }
body[data-page="bbctop50"] .bbc-group h2{
  color:#003366;
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.75rem;
  border-bottom:2px solid #ccc;
  padding-bottom:4px;
}

/* two-column rows */
body[data-page="bbctop50"] .bbc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:6px 10px;
  border-bottom:1px solid #eee;
}
body[data-page="bbctop50"] .bbc-row:nth-child(odd){ background:#f9f9f9; }

body[data-page="bbctop50"] .bbc-row.visited{ color:#006400; font-weight:500; }

body[data-page="bbctop50"] .bbc-name{ flex:2 1 auto; }
body[data-page="bbctop50"] .bbc-country{ flex:1 0 auto; text-align:right; white-space:nowrap; }

body[data-page="bbctop50"] .bbc-country a{ color:#005eb8; text-decoration:none; }
body[data-page="bbctop50"] .bbc-country a:hover{ text-decoration:underline; }

/* reuse button style */
body[data-page="bbctop50"] .faq-btn{
  background:#005eb8; color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer;
}
body[data-page="bbctop50"] .faq-btn:hover{ background:#004a93; }

/* ===========================================================
   50 to Go — page-specific styling (3 columns)
   =========================================================== */
body[data-page="50togo"] .togo-banner{
  position: sticky;
  top: 60px;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  margin:0 0 12px 0;
}
body[data-page="50togo"] .togo-meta{ font-weight:600; color:#333; }

body[data-page="50togo"] .togo-group{ margin-top:2rem; }
body[data-page="50togo"] .togo-group h2{
  color:#003366; font-size:1.25rem; font-weight:600;
  margin-bottom:.75rem; border-bottom:2px solid #ccc; padding-bottom:4px;
}

/* Three-column rows: No. | [checkbox + place] | Country */
body[data-page="50togo"] .togo-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:6px 10px;
  border-bottom:1px solid #eee;
}
body[data-page="50togo"] .togo-row:nth-child(odd){ background:#f9f9f9; }

body[data-page="50togo"] .togo-num{
  width:56px; min-width:56px; text-align:center; color:#666;
}
body[data-page="50togo"] .togo-name{
  flex:2 1 auto; display:flex; align-items:center; gap:.5rem;
}
body[data-page="50togo"] .togo-name label{ cursor:pointer; }
body[data-page="50togo"] .togo-country{
  flex:1 0 auto; text-align:right; white-space:nowrap;
}

/* Reuse button style */
body[data-page="50togo"] .faq-btn{
  background:#005eb8; color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer;
}
body[data-page="50togo"] .faq-btn:hover{ background:#004a93; }

/* ===========================================================
   100 Recommended — page-specific styling (3 columns like 50togo)
   =========================================================== */
body[data-page="100recommended"] .rec100-banner{
  position: sticky;
  top: 60px;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  margin:0 0 12px 0;
}
body[data-page="100recommended"] .rec100-meta{ font-weight:600; color:#333; }

body[data-page="100recommended"] .rec100-group{ margin-top:2rem; }
body[data-page="100recommended"] .rec100-group h2{
  color:#003366; font-size:1.25rem; font-weight:600;
  margin-bottom:.75rem; border-bottom:2px solid #ccc; padding-bottom:4px;
}

/* Three-column rows: No. | [checkbox + place] | Country */
body[data-page="100recommended"] .rec100-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:6px 10px;
  border-bottom:1px solid #eee;
}
body[data-page="100recommended"] .rec100-row:nth-child(odd){ background:#f9f9f9; }

body[data-page="100recommended"] .rec100-row.visited{ color:#006400; font-weight:500; }

body[data-page="100recommended"] .rec100-num{
  width:56px; min-width:56px; text-align:center; color:#666;
}
body[data-page="100recommended"] .rec100-name{
  flex:2 1 auto; display:flex; align-items:center; gap:.5rem;
}
body[data-page="100recommended"] .rec100-name label{ cursor:pointer; }
body[data-page="100recommended"] .rec100-country{
  flex:1 0 auto; text-align:right; white-space:nowrap;
}

/* Reuse button style */
body[data-page="100recommended"] .faq-btn{
  background:#005eb8; color:#fff; border:0; padding:8px 12px; border-radius:10px; cursor:pointer;
}
body[data-page="100recommended"] .faq-btn:hover{ background:#004a93; }

/* Intro paragraph spacing (shared) */
.page-intro { margin: .5rem 0 1.25rem; color: #333; }
.page-intro p { margin: 0 0 .85rem; line-height: 1.45; }