/* ================================================================
   NnuForum — Main Stylesheet
   Mobile-first. Custom properties. Zero framework dependency.
   Fonts: Fraunces (display) + Plus Jakarta Sans (body)
================================================================ */
:root {
  --bg:#f8f7f4; --white:#ffffff; --surface:#f0ede7; --surface2:#e8e4dc;
  --border:#ddd9d0; --border-dark:#c8c3b8;
  --ink:#18170f; --ink-2:#3a3830; --ink-3:#6b6860; --ink-4:#9e9b93;
  --accent:#1b5e3b; --accent-2:#2a7d52; --accent-bg:#eaf4ee; --accent-text:#0f3d26;
  --orange:#c4520f; --orange-bg:#fdf1e8;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem;
  --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(0,0,0,.08); --shadow-lg:0 8px 32px rgba(0,0,0,.1);
  --max-w:1180px; --side-w:300px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
ul{list-style:none}

.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:1.25rem}

/* TOPBAR */
.site-topbar{background:var(--accent);color:rgba(255,255,255,.9);text-align:center;padding:.55rem 1rem;font-size:var(--text-sm);font-family:var(--font-mono);letter-spacing:.04em}

/* NAV */
.site-nav{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:var(--shadow-sm)}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.site-nav__logo{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.site-nav__hex{width:40px;height:40px;background:var(--accent);display:flex;align-items:center;justify-content:center;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);font-family:var(--font-display);font-size:1.1rem;font-weight:900;color:white;flex-shrink:0}
.site-nav__wordmark{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1}
.site-nav__wordmark em{font-style:normal;color:var(--accent)}
.site-nav__tagline{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-4);letter-spacing:.07em;margin-top:2px}
.site-nav__links{display:none;align-items:center;gap:.25rem}
.site-nav__link{font-size:var(--text-sm);font-weight:600;color:var(--ink-3);padding:.5rem .875rem;border-radius:var(--radius-sm);transition:background .15s,color .15s}
.site-nav__link:hover{background:var(--surface);color:var(--ink)}
.site-nav__cta{font-size:var(--text-sm);font-weight:700;color:white;background:var(--accent);padding:.6rem 1.25rem;border-radius:var(--radius-sm);transition:background .15s;white-space:nowrap;flex-shrink:0}
.site-nav__cta:hover{background:var(--accent-2)}
.site-nav__hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:.25rem}
.site-nav__hamburger span{display:block;width:24px;height:2px;background:var(--ink-2);border-radius:2px;transition:transform .2s,opacity .2s}
.site-nav__mobile{display:none;flex-direction:column;background:var(--white);border-top:1px solid var(--border);padding:1rem 1.25rem;gap:.25rem}
.site-nav__mobile.open{display:flex}
.site-nav__mobile a{font-size:var(--text-md);font-weight:600;color:var(--ink-2);padding:.75rem 0;border-bottom:1px solid var(--border)}
.site-nav__mobile a:last-child{border-bottom:none}

/* HERO */
.hero{background:var(--white);border-bottom:2px solid var(--border);padding:4rem 0 3.5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 100% 80% at 50% -20%,rgba(27,94,59,.05) 0%,transparent 70%);pointer-events:none}
.hero__inner{position:relative;text-align:center;max-width:800px}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent);background:var(--accent-bg);border:1px solid rgba(27,94,59,.2);padding:.45rem 1rem;border-radius:100px;margin-bottom:2rem;letter-spacing:.03em}
.hero__badge-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;line-height:1.08;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.25rem}
.hero__title-accent{color:var(--accent);display:block}
.hero__sub{font-size:var(--text-md);color:var(--ink-3);max-width:580px;margin:0 auto 2.5rem;line-height:1.7}
.hero__search{position:relative;max-width:640px;margin:0 auto}
.hero__search-wrap{display:flex;background:var(--white);border:2px solid var(--border-dark);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.hero__search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(27,94,59,.12)}
.hero__search-input{flex:1;font-family:var(--font-body);font-size:var(--text-md);color:var(--ink);background:transparent;border:none;outline:none;padding:1rem 1.25rem;min-width:0}
.hero__search-input::placeholder{color:var(--ink-4)}
.hero__search-btn{background:var(--accent);color:white;border:none;padding:0 1.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.hero__search-btn:hover{background:var(--accent-2)}
.hero__search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:100;max-height:400px;overflow-y:auto;display:none}
.hero__search-results.open{display:block}
.search-result-item{display:block;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);font-size:var(--text-base);color:var(--ink-2);transition:background .12s}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--surface)}
.hero__hints{margin-top:1rem;font-size:var(--text-sm);color:var(--ink-4);font-family:var(--font-mono);letter-spacing:.02em}

/* STATS */
.statsbar{background:var(--surface);border-bottom:1px solid var(--border)}
.statsbar__inner{display:grid;grid-template-columns:repeat(2,1fr)}
.statsbar__item{padding:1.25rem 1rem;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.statsbar__item:nth-child(2n){border-right:none}
.statsbar__item:nth-last-child(-n+2){border-bottom:none}
.statsbar__item strong{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1.1}
.statsbar__item span{display:block;font-size:var(--text-xs);color:var(--ink-4);font-family:var(--font-mono);letter-spacing:.07em;text-transform:uppercase;margin-top:.2rem}

/* ADS */
/* Ad slots — no placeholder styling, invisible when empty */
.nnu-ad{width:100%;overflow:hidden}
.nnu-ad--leaderboard{margin:.5rem 0 1rem}
.nnu-ad--in-content{margin:1.5rem 0}
.nnu-ad--rectangle,.nnu-ad--sidebar{margin:1.5rem 0}

/* PAGE GRID */
.page-grid{display:grid;grid-template-columns:1fr;gap:2rem;padding-top:2.5rem;padding-bottom:4rem;align-items:start}

/* SECTIONS */
.section{margin-bottom:3rem}
.section__header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}
.section__eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.section__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.section__link{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;transition:color .15s;flex-shrink:0}
.section__link:hover{color:var(--accent)}

/* TOPICS */
.topics-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem}
.topic-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.4rem;position:relative;overflow:hidden;transition:border-color .2s,transform .15s,box-shadow .2s}
.topic-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--topic-color,var(--accent));border-radius:3px 0 0 3px}
.topic-card:hover{border-color:var(--topic-color,var(--accent));transform:translateY(-2px);box-shadow:var(--shadow)}
.topic-card__icon{font-size:1.75rem;line-height:1;margin-bottom:.25rem}
.topic-card__name{font-family:var(--font-display);font-size:var(--text-base);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.topic-card__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.04em}

/* TRENDING */
.trending{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:2rem}
.trending__label{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:.75rem}
.trending__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag-pill{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;padding:.4rem .875rem;background:var(--surface);border:1px solid var(--border);border-radius:100px;color:var(--ink-2);transition:all .15s}
.tag-pill:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text)}

/* COUNTRY FILTER */
.country-filter{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.5rem;scrollbar-width:none;-ms-overflow-style:none}
.country-filter::-webkit-scrollbar{display:none}
.country-pill{font-size:var(--text-sm);font-weight:600;padding:.45rem .875rem;background:var(--white);border:1px solid var(--border);border-radius:100px;color:var(--ink-3);white-space:nowrap;transition:all .15s;flex-shrink:0}
.country-pill:hover,.country-pill--active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text)}

/* ANSWER CARDS */
.answers-list{display:flex;flex-direction:column;gap:.875rem}
.answer-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.375rem 1.25rem;display:block;transition:border-color .15s,box-shadow .15s}
.answer-card:hover{border-color:var(--border-dark);box-shadow:var(--shadow)}
.answer-card__topic{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--topic-color,var(--accent));margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.answer-card__topic::before{content:'';width:5px;height:5px;background:var(--topic-color,var(--accent));border-radius:50%;display:inline-block;flex-shrink:0}
.answer-card__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:.6rem;letter-spacing:-.02em}
.answer-card__excerpt{font-size:var(--text-base);color:var(--ink-3);line-height:1.6;margin-bottom:.875rem}
.answer-card__meta{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--ink-4);font-family:var(--font-mono)}
.answer-card__flag{font-size:1.1rem}
.answer-card__dot{color:var(--border-dark)}

/* SIDEBAR */
.widget{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.375rem 1.25rem;margin-bottom:1.5rem}
.widget__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--ink);letter-spacing:-.03em;margin-bottom:1rem;padding-bottom:.875rem;border-bottom:1px solid var(--border)}
.widget__list{display:flex;flex-direction:column;gap:.875rem}
.widget__item{display:flex;align-items:flex-start;gap:.75rem}
.widget__rank{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;color:var(--white);background:var(--accent);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.widget__link{font-size:var(--text-base);color:var(--ink-2);line-height:1.45;font-weight:500;transition:color .15s}
.widget__link:hover{color:var(--accent)}
.widget__flags{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.flag-link{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem;transition:all .15s}
.flag-link:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text)}

/* CTA BAND */
.cta-band{background:var(--accent);padding:4rem 0;text-align:center}
.cta-band__inner{max-width:680px}
.cta-band__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:white;letter-spacing:-.04em;line-height:1.1;margin-bottom:.875rem}
.cta-band__sub{font-size:var(--text-md);color:rgba(255,255,255,.8);margin-bottom:2rem;line-height:1.6}
.cta-band__btns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-weight:700;font-size:var(--text-base);padding:.875rem 2rem;border-radius:var(--radius-sm);border:2px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem}
.btn--white{background:white;color:var(--accent-text);border-color:white}
.btn--white:hover{opacity:.92}
.btn--outline{background:transparent;color:white;border-color:rgba(255,255,255,.5)}
.btn--outline:hover{border-color:white}

/* FOOTER */
.site-footer{background:var(--surface);border-top:1px solid var(--border);padding:3rem 0 1.75rem}
.site-footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.site-footer__brand p{font-size:var(--text-base);color:var(--ink-3);line-height:1.7;margin-top:.875rem;max-width:280px}
.site-footer__col h4{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem}
.site-footer__col a{display:block;font-size:var(--text-base);color:var(--ink-3);margin-bottom:.625rem;transition:color .15s}
.site-footer__col a:hover{color:var(--accent)}
.site-footer__base{padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.05em;text-transform:uppercase}

/* SINGLE ANSWER */
.answer-body{max-width:740px;margin-inline:auto}
.answer-body h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;line-height:1.1;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.25rem}
.answer-body h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:2.5rem 0 .875rem}
.answer-body p{font-size:var(--text-md);line-height:1.8;color:var(--ink-2);margin-bottom:1.25rem}
.answer-body ul,.answer-body ol{font-size:var(--text-md);line-height:1.8;color:var(--ink-2);margin:0 0 1.25rem 1.5rem}
.answer-body li{margin-bottom:.5rem}
.quick-answer{background:var(--accent-bg);border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.25rem 1.5rem;margin-bottom:2rem;font-size:var(--text-md);color:var(--accent-text);line-height:1.7;font-weight:500}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}


/* ================================================================
   LAYOUT OVERFLOW FIXES — topic chips + main column containment
================================================================ */
/* Prevent ANY child of the main column from overflowing the grid cell */
.page-grid__main { min-width: 0; overflow-x: hidden; }
.page-grid__side  { min-width: 0; }

/* Topic chips: always wrap on any screen when inside a grid */
.page-grid__main .topic-chips {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}

/* Answer cards: never overflow their container */
.answer-card, .answer-card__title { word-break: break-word; }

/* Ensure country-filter also wraps gracefully inside the grid */
.page-grid__main .country-filter {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* TABLET 640px+ */
@media(min-width:640px){
  .hero__title{font-size:var(--text-4xl)}
  .topics-grid{grid-template-columns:repeat(3,1fr)}
  .statsbar__inner{grid-template-columns:repeat(4,1fr)}
  .statsbar__item{border-bottom:none}
  .statsbar__item:nth-child(2n){border-right:1px solid var(--border)}
  .statsbar__item:last-child{border-right:none}
  .site-footer__grid{grid-template-columns:2fr 1fr 1fr}
}

/* DESKTOP 1024px+ */
/* No-sidebar variant — used when topic/country has no content yet */
.page-grid--no-sidebar{grid-template-columns:1fr !important}
.page-grid--no-sidebar .page-grid__side{display:none}

@media(min-width:1024px){
  .hero__title{font-size:var(--text-5xl)}
  .hero__sub{font-size:var(--text-lg)}
  .container{padding-inline:2rem}
  .site-nav__links{display:flex}
  .site-nav__hamburger{display:none}
  .page-grid{grid-template-columns:minmax(0,1fr) var(--side-w);gap:3rem}
  .topics-grid{grid-template-columns:repeat(5,1fr)}
  .cta-band__title{font-size:var(--text-3xl)}
  .site-footer__grid{grid-template-columns:2.2fr 1fr 1fr 1fr;gap:3rem}
}

@media(min-width:1280px){:root{--side-w:320px}}
@media print{.site-nav,.cta-band,.ad-slot,.site-footer{display:none}body{background:white;color:black;font-size:12pt}}

/* ================================================================
   SINGLE ANSWER PAGE
================================================================ */
.answer-page{}
.breadcrumb-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:.65rem 0}
.breadcrumb-bar__inner{}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;font-size:var(--text-sm);font-family:var(--font-mono);letter-spacing:.02em}
.breadcrumb li{color:var(--ink-4)}
.breadcrumb li::after{content:'›';margin-left:.35rem;color:var(--border-dark)}
.breadcrumb li:last-child::after{display:none}
.breadcrumb a{color:var(--accent)}
.breadcrumb a:hover{text-decoration:underline}

.answer-header{background:var(--white);border-bottom:1px solid var(--border);padding:2.5rem 0 2rem}
.answer-header__inner{max-width:820px}
.answer-header__meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.answer-header__topic{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--topic-color,var(--accent));background:var(--accent-bg);padding:.3rem .75rem;border-radius:100px;border:1px solid rgba(27,94,59,.15)}
.answer-header__country{font-size:var(--text-sm);color:var(--ink-3);font-family:var(--font-mono)}
.answer-header__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-bottom:1rem}
.answer-header__stats{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--ink-4);font-family:var(--font-mono);flex-wrap:wrap}
.answer-header__stats .sep{color:var(--border-dark)}
.ai-badge{background:#e8f0fc;color:#0a2a6e;padding:.2rem .6rem;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.answer-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-top:2.5rem;padding-bottom:4rem;align-items:start}

.answer-content{}
.answer-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.answer-tags__label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase;flex-shrink:0}

.share-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.share-bar__label{font-size:var(--text-sm);font-weight:600;color:var(--ink-3);flex-shrink:0;margin-right:.25rem}
.share-btn{font-size:var(--text-sm);font-weight:600;padding:.45rem 1rem;border-radius:100px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.share-btn--wa:hover{border-color:#25D366;color:#128C7E;background:#f0fdf4}
.share-btn--fb:hover{border-color:#1877F2;color:#1877F2;background:#eef4ff}

.answer-sidebar{}

/* ================================================================
   TOPIC ARCHIVE PAGE
================================================================ */
.topic-archive{}
.topic-header{background:var(--white);border-bottom:1px solid var(--border);padding:2.5rem 0 2rem;border-bottom-width:4px}
.topic-header__inner{display:flex;align-items:center;gap:1.25rem}
.topic-header__icon{font-size:3rem;line-height:1;flex-shrink:0}
.topic-header__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.35rem}
.topic-header__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase}

.topic-chips{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;padding-bottom:.625rem;margin-bottom:1.75rem;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.topic-chips::-webkit-scrollbar{display:none}
.topic-chip{font-size:var(--text-sm);font-weight:600;padding:.45rem .875rem;border:1px solid var(--border);border-radius:100px;white-space:nowrap;color:var(--ink-3);flex-shrink:0;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem}
.topic-chip:hover,.topic-chip--active{border-color:var(--tc,var(--accent));color:var(--tc,var(--accent));background:rgba(0,0,0,.03)}

/* ================================================================
   PAGINATION
================================================================ */
.pagination{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.pagination__list{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}
.pagination__btn{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .875rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;color:var(--ink-2);background:var(--white);transition:all .15s}
.pagination__btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.pagination__btn--active{background:var(--accent);color:white;border-color:var(--accent)}
.pagination__dots{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;color:var(--ink-4);font-size:var(--text-sm)}

/* ================================================================
   DESKTOP OVERRIDES FOR ANSWER + TOPIC PAGES
================================================================ */
@media(min-width:1024px){
  .answer-header__title{font-size:var(--text-3xl)}
  .answer-layout{grid-template-columns:1fr 300px}
  .answer-sidebar{}
}

/* ================================================================
   COUNTRY HERO
================================================================ */
.country-hero{background:var(--white);border-bottom:2px solid var(--border);padding:2.5rem 0}
.country-hero__inner{display:flex;align-items:center;gap:1.25rem}
.country-hero__flag{font-size:3.5rem;line-height:1;flex-shrink:0}
.country-hero__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.35rem}
.country-hero__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase}

/* ================================================================
   SEARCH PAGE
================================================================ */
.search-header{background:var(--white);border-bottom:2px solid var(--border);padding:2.5rem 0 2rem}
.search-header__inner{max-width:760px}
.search-header__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.5rem;line-height:1.1}
.search-header__title em{font-style:italic;color:var(--accent)}
.search-page-form{width:100%}
.search-page-wrap{display:flex;background:var(--white);border:2px solid var(--border-dark);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.search-page-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(27,94,59,.12)}
.search-page-input{flex:1;font-family:var(--font-body);font-size:var(--text-md);color:var(--ink);background:transparent;border:none;outline:none;padding:1rem 1.25rem;min-width:0}
.search-page-input::placeholder{color:var(--ink-4)}
.search-page-btn{background:var(--accent);color:white;border:none;padding:0 1.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;cursor:pointer}
.search-page-btn:hover{background:var(--accent-2)}

.search-topic-pills{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;padding:.875rem 1.25rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.search-topic-pills__label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);flex-shrink:0}

.no-results{text-align:center;padding:3rem 1rem}
.no-results__icon{font-size:3rem;margin-bottom:1rem}
.no-results__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.75rem}
.no-results__sub{font-size:var(--text-md);color:var(--ink-3);line-height:1.6}

/* ================================================================
   TAG PAGE
================================================================ */
.tag-header{background:var(--white);border-bottom:2px solid var(--border);padding:2.5rem 0 2rem}
.tag-header__inner{max-width:700px}
.tag-header__label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.5rem}
.tag-header__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.5rem}
.tag-header__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.07em;text-transform:uppercase}
.tag-pill--active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-text)}

/* ================================================================
   404 PAGE
================================================================ */
.error-page{padding:5rem 0 6rem;text-align:center}
.error-page__inner{max-width:640px;margin:0 auto}
.error-page__code{font-family:var(--font-display);font-size:7rem;font-weight:900;color:var(--border);letter-spacing:-.06em;line-height:1;margin-bottom:.5rem}
.error-page__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:1rem}
.error-page__sub{font-size:var(--text-md);color:var(--ink-3);line-height:1.7;margin-bottom:2rem;max-width:500px;margin-inline:auto}

.error-search{max-width:520px;margin:0 auto 2.5rem}
.error-search__wrap{display:flex;border:2px solid var(--border-dark);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.error-search__wrap:focus-within{border-color:var(--accent)}
.error-search__input{flex:1;font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);background:transparent;border:none;outline:none;padding:.875rem 1.25rem;min-width:0}
.error-search__input::placeholder{color:var(--ink-4)}
.error-search__btn{background:var(--accent);color:white;border:none;padding:0 1.25rem;font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);cursor:pointer;transition:background .15s;white-space:nowrap}
.error-search__btn:hover{background:var(--accent-2)}

.error-links{margin-top:2rem}
.error-links__label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);display:block;margin-bottom:.875rem}
.error-links__list{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}

/* ================================================================
   ARCHIVE HERO (topics/countries pages)
================================================================ */
.archive-hero{background:var(--white);border-bottom:2px solid var(--border);padding:3rem 0 2.5rem}
.archive-hero__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.5rem;margin-top:.35rem}
.archive-hero__sub{font-size:var(--text-md);color:var(--ink-3);max-width:520px;line-height:1.65}

/* ================================================================
   TOPICS FULL GRID
================================================================ */
.topics-full-grid{display:flex;flex-direction:column;gap:.875rem}
.topic-full-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.375rem 1.25rem;display:flex;align-items:center;gap:1.25rem;transition:border-color .2s,box-shadow .15s;position:relative;overflow:hidden}
.topic-full-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--topic-color,var(--accent));border-radius:4px 0 0 4px}
.topic-full-card:hover{border-color:var(--topic-color,var(--accent));box-shadow:var(--shadow)}
.topic-full-card__icon{font-size:2.25rem;line-height:1;flex-shrink:0}
.topic-full-card__body{flex:1;min-width:0}
.topic-full-card__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;letter-spacing:-.02em;color:var(--ink);display:block;margin-bottom:.25rem}
.topic-full-card__desc{font-size:var(--text-sm);color:var(--ink-3);line-height:1.5;margin-bottom:.35rem}
.topic-full-card__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);letter-spacing:.05em}
.topic-full-card__arrow{font-size:1.25rem;color:var(--border-dark);flex-shrink:0;transition:color .15s,transform .15s}
.topic-full-card:hover .topic-full-card__arrow{color:var(--topic-color,var(--accent));transform:translateX(4px)}

/* ================================================================
   COUNTRIES GRID
================================================================ */
.country-region{margin-bottom:3rem}
.country-region__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--border)}
.country-region__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.country-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;align-items:center;gap:.75rem;transition:all .15s}
.country-card:hover{border-color:var(--accent);background:var(--accent-bg)}
.country-card__flag{font-size:1.5rem;line-height:1;flex-shrink:0}
.country-card__name{font-size:var(--text-base);font-weight:600;color:var(--ink-2);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.country-card__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-4);flex-shrink:0}

/* ================================================================
   RESPONSIVE ADDITIONS
================================================================ */
@media(min-width:640px){
  .country-region__grid{grid-template-columns:repeat(3,1fr)}
  .topics-full-grid .topic-full-card{padding:1.5rem 1.75rem}
}
@media(min-width:1024px){
  .country-region__grid{grid-template-columns:repeat(4,1fr)}
  .search-header__title{font-size:var(--text-3xl)}
  .topics-full-grid .topic-full-card__icon{font-size:2.5rem}
}

/* ================================================================
   ASK A QUESTION PAGE
================================================================ */
.ask-page{padding:3.5rem 0 5rem}
.ask-page__inner{max-width:800px}
.ask-hero{margin-bottom:2.5rem}
.ask-hero__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:.75rem;margin-top:.35rem}
.ask-hero__sub{font-size:var(--text-md);color:var(--ink-3);line-height:1.7;max-width:560px}

.ask-form-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 1.75rem;margin-bottom:3rem;box-shadow:var(--shadow)}

.ask-form{display:flex;flex-direction:column;gap:1.25rem}
.ask-form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ask-form__field{display:flex;flex-direction:column;gap:.4rem}
.ask-form__label{font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.ask-form__input,.ask-form__select{font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);padding:.875rem 1rem;border:1.5px solid var(--border-dark);border-radius:var(--radius-sm);background:var(--white);transition:border-color .2s,box-shadow .2s;width:100%}
.ask-form__input:focus,.ask-form__select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(27,94,59,.1)}
.ask-form__input::placeholder{color:var(--ink-4)}
.ask-form__hint{font-size:var(--text-xs);color:var(--ink-4);font-family:var(--font-mono);letter-spacing:.03em}
.ask-form__submit{background:var(--accent);color:white;border:none;padding:1rem 2rem;font-family:var(--font-body);font-weight:700;font-size:var(--text-base);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;align-self:flex-start}
.ask-form__submit:hover{background:var(--accent-2)}
.ask-form__submit:disabled{opacity:.6;cursor:not-allowed}
.ask-form__status{padding:.875rem 1rem;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;margin-top:.5rem}
.ask-form__status--success{background:var(--accent-bg);color:var(--accent-text);border:1px solid rgba(27,94,59,.2)}
.ask-form__status--error{background:#fdeef0;color:#5a0a14;border:1px solid #f5c2c8}

.ask-how{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:3rem}
.ask-how__item{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.25rem}
.ask-how__num{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--border);letter-spacing:-.04em;display:block;line-height:1;margin-bottom:.75rem}
.ask-how__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--ink);letter-spacing:-.02em;display:block;margin-bottom:.4rem}
.ask-how__desc{font-size:var(--text-sm);color:var(--ink-3);line-height:1.6}

.ask-browse{margin-top:1rem}

@media(max-width:640px){
  .ask-form__row{grid-template-columns:1fr}
  .ask-how{grid-template-columns:1fr}
  .ask-form__submit{width:100%;text-align:center;justify-content:center}
}